@charset "UTF-8";
@media (min-width: 750px) {
  .ugb {
    width: 750px;
    margin: auto;
  }
}
p {
  margin: 0;
}

b{
	font-weight: 600;
}

.yu {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

#canv {
  position: absolute;
  z-index: 1;
}

.ugb {
  position: relative;
}
.ugb .kv .kv_main {
  position: relative;
}
.ugb .kv .kv_main .switch_outer {
  width: 50px;
  height: 25px;
  background-color: lightgray;
  border-radius: 30px;
  position: absolute;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  z-index: 2;
  top: 50vw;
  right: 10px;
}
@media (min-width: 750px) {
  .ugb .kv .kv_main .switch_outer {
    top: 2vh;
    right: 20px;
  }
}

.ugb .kv .kv_main .switch_outer.active {
  background-color: #e21b79;
}
.ugb .kv .kv_main .switch_outer.active:before 
{
	position: absolute;
	top: 0px;
	right: 57%;
	margin-left: -50px;
	content: '\f2dc';
	color: #fff;
	font-size: 16px;
	font-family: Font Awesome\ 5 Free;
}

.ugb .kv .kv_main .toggle_switch {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  position: absolute;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 5px;
  margin: auto;
  box-shadow: 1px 1px 7px #B7B7B7, -1px -1px 4px #ccc inset;
  transition: left 0.3s ease-in-out;
}
.ugb .kv .kv_main .toggle_switch.active {
  left: 28px;
}
.ugb .kv .kv_message {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 11px 0;
  font-size: 1.8rem;
  line-height: 1.3;
}
@media (min-width: 750px) {
  .ugb .kv .kv_message {
    font-size: 3rem;
  }
}
.ugb .kv .kv_text {
  text-align: center;
  padding: 30px 0;
}
.ugb .kv .kv_text .logo {
  margin: 0 0 10px;
}
.ugb .kv .kv_text .jp {
  font-size: 1.9rem;
}
@media (min-width: 750px) {
  .ugb .kv .kv_text .jp {
    font-size: 2.8rem;
  }
}
.ugb .kv .kv_text .desc {
  margin: 10px 0 20px;
}
@media (min-width: 750px) {
  .ugb .kv .kv_text .desc {
    font-size: 2rem;
  }
}
.ugb .kv .kv_text .note {
  font-size: 0.95rem;
}
@media (min-width: 750px) {
  .ugb .kv .kv_text .note {
    font-size: 1.4rem;
  }
}

.kv_snow { display:flex; justify-content: space-evenly; align-items: center; }
.kv_snows { font-size: 32px; }

.ugb .sec01 {
  background: rgb(228, 228, 228);
  background: linear-gradient(0deg, rgb(228, 228, 228) 0%, rgb(255, 255, 255) 10%);
  text-align: center;
  border-top: 10px solid #000;
  border-bottom: 10px solid #000;
  padding: 0 0 30px;
}
.ugb .sec01 .sec01_heading {
  font-size: 2rem;
  margin: 20px 0 15px;
}

.ugb .sec01_img {
  padding: 25px 0 0;
}

@media (min-width: 750px) {
  .ugb .sec01 .sec01_heading {
    font-size: 3.5rem;
  }
}
.ugb .sec01 .sec01_subheading {
  font-size: 2rem;
  margin: -20px 0 20px;
}
@media (min-width: 750px) {
  .ugb .sec01 .sec01_subheading {
    font-size: 3.5rem;
  }
}

.ugb .sec02 {
  padding: 30px 0 0;
}
.ugb .sec02 .sec02_heading_group {
  text-align: center;
  margin: 0 0 25px;
  font-size: 1.5rem;
}
@media (min-width: 750px) {
  .ugb .sec02 .sec02_heading_group {
    font-size: 2.7rem;
  }
}
.ugb .sec02 .sec02_heading_group .logo {
  margin: 10px 0;
}
@media (min-width: 750px) {
  .ugb .sec02 .sec02_heading_group .logo {
    margin: 10px auto;
  }
}
.ugb .sec02 .sec02_heading_group .jp {
  font-size: 1.5rem;
}
@media (min-width: 750px) {
  .ugb .sec02 .sec02_heading_group .jp {
    font-size: 2.7rem;
  }
}
.ugb .sec02 .sec02_group .text-main {
  font-size: 2.3rem;
  font-weight: bold;
  margin: 0 0 24px;
}
@media (min-width: 750px) {
  .ugb .sec02 .sec02_group .text-main {
    font-size: 4rem;
  }
}
.ugb .sec02 .sec02_group .text-main::after {
  content: "";
  display: block;
  position: relative;
  border-bottom: 2px solid #000;
  width: 60px;
  height: 3px;
  top: 8px;
}

.ugb .sec02 .sec02_group .text-desc {
	font-size: 1.3rem;
}

@media (min-width: 750px) {
  .ugb .sec02 .sec02_group .text-desc {
    font-size: 2.2rem;
  }
}

.ugb .sec02 .sec02_group01 {
  display: flex;
  position: relative;
}
.ugb .sec02 .sec02_group01 .group-text {
  flex: 1;
  padding: 9vw 0 0 12px;
}
.ugb .sec02 .sec02_group01 .group-img {
  mix-blend-mode: multiply;
  position: relative;
  top: -40px;
  width: 40%;
}
.ugb .sec02 .sec02_group02 {
  background: url(/template/default/img/sp/ugb/img04.jpg) no-repeat;
  background-size: cover;
  position: relative;
  z-index: -1;
  top: -75px;
}
.ugb .sec02 .sec02_group02 .group-text {
  text-align: right;
  padding: 12.5vw 12px 12.5vw 0;
}
.ugb .sec02 .sec02_group02 .text-main::after {
  content: "";
  margin: 0 0 0 auto;
}
.ugb .sec02 .sec02_group03 {
  background: url(/template/default/img/sp/ugb/img05.jpg) no-repeat;
  background-size: cover;
  position: relative;
  z-index: -1;
  top: -75px;
  border-bottom: 10px solid #000;
}
.ugb .sec02 .sec02_group03 .group-text {
  flex: 1px;
  padding: 12.5vw 0 12.5vw 12px;
}

.ugb .sec_prod {
  padding: 25px 0 0;
}

.ugb .sec03 {
  border-bottom: 10px solid #000;
  margin: 0 0 30px;
}
.ugb .sec03 .sec03_heading {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 30px 0 7px;
  font-size: 1.8rem;
}
@media (min-width: 750px) {
  .ugb .sec03 .sec03_heading {
    font-size: 2.8rem;
  }
}
.ugb .sec03 .sec03_heading b {
  font-size: 2.7rem;
}
@media (min-width: 750px) {
  .ugb .sec03 .sec03_heading b {
    font-size: 3.5rem;
  }
}
.ugb .sec04 {
  border-bottom: 10px solid #000;
  margin: 0 0 60px;
}
.ugb .sec04 .sec04_heading {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 30px 0 10px;
  font-size: 2.7rem;
  line-height: 1.3;
}
@media (min-width: 750px) {
  .ugb .sec04 .sec04_heading {
    font-size: 3.5rem;
  }
}
.ugb .sec04 .sec04_heading .img {
  width: 150px;
  margin: auto;
}
.ugb .sec04 .sec04_content .list {
  position: relative;
  z-index: 5;
}
.ugb .sec04 .sec04_content .list .item {
  flex-shrink: 0;
  width: 100%;
}
.ugb .sec04 .slide-arrow {
    position: absolute;
    bottom: 50%;
    width: 35px;
}
.ugb .sec04 .next-arrow {
    right: 2%;
}
.ugb .sec04 .prev-arrow {
    left: 2%;
}
.ugb .sec05 .sec05_heading {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 30px 0 7px;
  font-size: 1.8rem;
}
@media (min-width: 750px) {
  .ugb .sec05 .sec05_heading {
    font-size: 2.8rem;
  }
}
.ugb .sec05 .sec05_heading b {
  font-size: 2.7rem;
}
@media (min-width: 750px) {
  .ugb .sec05 .sec05_heading b {
    font-size: 3.5rem;
  }
}
.ugb .sec06 {
  border-bottom: 10px solid #000;
  margin: 60px 0;
}
.ugb .sec06 .sec06_heading {
  text-align: center;
  font-size: 2.7rem;
}
@media (min-width: 750px) {
  .ugb .sec06 .sec06_heading {
    font-size: 3.5rem;
  }
}
.ugb .sec06 .sec06_text {
  text-align: center;
  padding: 30px 0;
}
.ugb .sec06 .sec06_text .logo {
  margin: 0 0 10px;
}
.ugb .sec06 .sec06_text .jp {
  font-size: 1.9rem;
}
@media (min-width: 750px) {
  .ugb .sec06 .sec06_text .jp {
    font-size: 2.9rem;
  }
}
.ugb .sec06 .sec06_text .desc {
  margin: 10px 0 20px;
}
@media (min-width: 750px) {
  .ugb .sec06 .sec06_text .desc {
    font-size: 2rem;
  }
}
.ugb .sec06 .sec06_text .note {
  font-size: 0.95rem;
}
@media (min-width: 750px) {
  .ugb .sec06 .sec06_text .note {
    font-size: 1.95rem;
  }
}


.ugb .sec01_prod {
  background: rgb(228, 228, 228);
  background: linear-gradient(0deg, rgb(228, 228, 228) 0%, rgb(255, 255, 255) 50%);
  text-align: center;
  border-bottom: 10px solid #000;
  padding: 0 0 30px;
}

.ugb .sec01_prod_img {
  padding: 0;
}



.ugb .sec07 {
  border-bottom: 10px solid #000;
  margin: 0 0 50px;
  padding: 30px 0 50px;
}
.ugb .sec07 .sec07_heading {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 30px 0 7px;
  font-size: 1.8rem;
}
@media (min-width: 750px) {
  .ugb .sec07 .sec07_heading {
    font-size: 2.8rem;
  }
}
.ugb .sec07 .sec07_heading b {
  font-size: 2.7rem;
}
@media (min-width: 750px) {
  .ugb .sec07 .sec07_heading b {
    font-size: 3.5rem;
  }
}
.ugb .sec07 .sec07_content {
  width: 96%;
  margin: auto;
}
.ugb .sec07 .sec07_video {
  text-align: center;
  margin: 30px auto;
  width: 74%;
}
.ugb .sec07 .sec07_video video {
  width: 100%;
}
.ugb .sec07 .sec07_subheading {
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
  line-height: 1.4;
}
@media (min-width: 750px) {
  .ugb .sec07 .sec07_subheading {
    font-size: 3rem;
  }
}
.ugb .sec07 .sec07_list {
  margin: 20px auto;
  width: 96%;
}
.ugb .sec07 .sec07_list .item {
  display: flex;
  font-size: 1.6rem;
  margin: 10px 0;
}
@media (min-width: 750px) {
  .ugb .sec07 .sec07_list .item {
    font-size: 2.8rem;
  }
}
.ugb .sec07 .sec07_note {
  border: 1px solid #000;
  padding: 8px 30px;
  line-height: 20px;
}

@media (min-width: 750px) {
	.ugb .sec07 .sec07_note {
	  line-height: 26px;
	}
}


.ugb .sec07 .sec07_note .list .item {
  display: flex;
  margin: 5px 0;
}
@media (min-width: 750px) {
  .ugb .sec07 .sec07_note .list .item {
    font-size: 2rem;
  }
}
.ugb .sec07 .material {
  margin: 55px 0 0;
}
.ugb .sec07 .material .material_heading {
  font-size: 2.7rem;
  text-align: center;
}
.ugb .sec07 .material p {
  border: 1px solid #000;
  padding: 10px;
  font-size: 1rem;
}
@media (min-width: 750px) {
  .ugb .sec07 .material p {
    font-size: 1.8rem;
  }
}

.invisible {
  visibility: hidden;
}

.animated {
  animation-duration: 1.2s;
  animation-delay: 0.2s;
}

.animated_slow {
  animation-delay: 0.8s;
}

.animated_slow1 {
  animation-delay: 0.1s;
}

.animated_slow2 {
  animation-delay: 0.3s;
}

.animated_slow3 {
  animation-delay: 0.5s;
}

.animated_slow4 {
  animation-delay: 0.7s;
}

.animated_slow5 {
  animation-delay: 0.9s;
}

.animated_slow6 {
  animation-delay: 1.1s;
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -10%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDown {
  animation-name: fadeInDown;
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-3%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeft {
  animation-name: fadeInLeft;
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(3%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRight {
  animation-name: fadeInRight;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 5%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}

.message__thumbnail-sp {
  display: none;
}/*# sourceMappingURL=style.css.map */


/* for sale bnr */
.sale-bnr{
	margin: 20px 20px 0;
	position: relative;
	z-index: 2;
}

.sale_bnr_bottom{
	margin: 20px 20px 0;
}
.sale_prime{
	margin: 20px auto;
	width:75%;
	position: relative;
	z-index: 2;
}

.sale_other{
	margin-top: 300px;
}

@media screen and (min-width: 767px) {
.sale_prime{
	width:100%;
}

.footer_sticky_sp img {
    max-width: 100vw;
}
}

.footer_sticky {/*display: none !important;*/}
.footer_sticky_sp {
    position: fixed;
    bottom: 0;
    z-index: 9;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

/* --------------------------------------------------------------------------------
 #Faq
-------------------------------------------------------------------------------- */
#Faq {
	margin-bottom: 15%;
	background: #fff;
	border-bottom: 10px solid #000;
	& h2 {
	text-align: center;
    font-size: 2.7rem;
	}
	& .body {
		& .block_faq {
			display: flex;
			flex-direction: column;
			gap: 1em 0;
			margin-bottom: 10%;
			& .faq_box {
				width: 86.67%;
				margin: auto;
				background: #f2efec;
				& .faq_head {
					font-size: clamp(1.3rem, 3.467vw, 26px);
					font-weight: 700;
					text-align: left;
					padding: 7% 18% 7% 0;
					& p {
						padding-left: 24%;
						position: relative;
						&::before {
							content: "Q";
							font-size: clamp(3rem, 8vw, 60px);
							font-weight: 400;
							font-family: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", 游明朝,'Yu Mincho',YuMincho, 'Hiragino Mincho ProN','Hiragino Mincho Pro',"Times New Roman", HGS明朝E,メイリオ,Meiryo,serif;
							position: absolute;
							top: 50%;
							left: 8%;
							transform: translateY(-50%);
						}
					}
				}
				& .faq_body {
					position: relative;
					&::before {
						content: "";
						width: 90%;
						height: .1rem;
						background: #000;
						position: absolute;
						top: 0;
						left: 50%;
						transform: translateX(-50%);
					}
					& p {
						font-size: clamp(1.2rem, 3.2vw, 24px);
						padding: 5%;
					}
				}
			}
		}
		& .block_ingredient {
			width: 86.67%;
			padding: 5%;
			margin: auto;
			border: .1rem solid #000;
			& h3 {
				font-size: clamp(2rem, 5.33vw, 40px);
				font-weight: 700;
				text-align: center;
				margin-bottom: 5%;
			}
			& p {
				font-size: clamp(1.2rem, 3.2vw, 24px);
			}
		}
	}
}

/* --------------------------------------------------------------------------------
 Accordion
-------------------------------------------------------------------------------- */
.accordion {
	& .acd_head {
		display: block;
		cursor: pointer;
		position: relative;
		&::-webkit-details-marker {
			display: none;
		}
		&::before {
			content: '';
			display: inline-block;
			width: 1em;
			height: .1rem;
			background-color: #000;
			position: absolute;
			right: 5%;
			top: 50%;
			transform: translateY(-50%);
			transition: 0.2s;
		}
		&::after {
			content: '';
			display: inline-block;
			width: 1em;
			height: .1rem;
			background-color: #000;
			position: absolute;
			right: 5%;
			top: 50%;
			transform: translateY(-50%) rotate(90deg);
			transition: 0.2s;
		}
	}
}

.h_p { line-height: 24px;
							@media (min-width: 750px) {
							line-height: 36px;
							}
}