@charset "utf-8";

@keyframes floating1{
   0% { transform: translate3d(0, 0, 0);}
  50% { transform: translate3d(0, 15px, 0);}
 100% { transform: translate3d(0, 0, 0);}
}
@keyframes floating2{
   0% { transform: translate3d(0, 0, 0);}
  50% { transform: translate3d(0, 8px, 0);}
 100% { transform: translate3d(0, 0, 0);}
}
@keyframes puru{
  0%, 40% { transform: skew(0deg, 0deg);}
  5% { transform: skew(3deg, 0.5deg);}
 10% { transform: skew(-4deg, -1deg);}
 15% { transform: skew(4deg, 1deg);}
 20% { transform: skew(-2deg, -2deg);}
 25% { transform: skew(1deg, 1deg);}
 30% { transform: skew(-.8deg, -.4deg);}
 35% {transform: skew(.6deg, .3deg);}
}

.kv {}
.kv .inner-kv { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}
.kv .main { position: absolute; right: 0; top: 10%; width: 55%;}
.kv .main .package { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; padding-top: 100px;
 transition: 1.2s cubic-bezier(.5,1,.89,1); opacity: 0; transition-delay: 1.2s;
}
.kv .main .package figure { position: relative; text-align: center; transition: 1.6s cubic-bezier(.5,1,.89,1); filter: blur(12px); transition-delay: 1.0s;}
.kv .main .package figure img { position: relative; width: 41%;
 animation: floating1 4.0s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}
.kv .main .bubble { position: relative; z-index: 1;}
.kv .main .bubble .bubble-1 { position: absolute; left: 0; top: 0; z-index: 2;
 transition: 2.0s cubic-bezier(.5,1,.89,1); transform: translateY(30px); transition-delay: 0.25s;}
.kv .main .bubble .bubble-2 { position: relative; z-index: 1;
 transition: 2.4s cubic-bezier(.5,1,.89,1); transform: translateY(20px); transition-delay: 0.2s;}
 .kv .main .bubble .bubble-1 div,
 .kv .main .bubble .bubble-2 div { position: relative; transition: 2.4s cubic-bezier(.5,1,.89,1); opacity: 0; filter: blur(20px); transition-delay: 0.4s;}
 
.kv .main .bubble div img { position: relative; width: 100%;}
.kv .main .bubble .bubble-1 div img { animation: floating2 7.0s linear infinite;}
.kv .main .bubble .bubble-2 div img { animation: floating2 8.0s linear infinite;}
.kv .ctn { position: absolute; left: 0; bottom: 50px; width: 100%;}
.kv .ctn .inner { position: relative; width: 92%; margin: 0 auto;}
.kv .logo { width: 50%; margin-bottom: 40px; transition: 1.2s cubic-bezier(.5,1,.89,1); opacity: 0; transition-delay: 1.0s;}
.kv .logo p { text-align: center;}
.kv .logo p img { width: 30%; max-width: 180px;}
.kv .txt { width: 50%; margin-bottom: 12px; transition: 1.2s cubic-bezier(.5,1,.89,1); opacity: 0; transition-delay: 1.2s;}
.kv .txt h1 { text-align: center;}
.kv .txt h1 img{ width: 78%; max-width: 450px;}
.kv .news { position: relative; width: 50%; max-width: 550px; transition: 1.2s cubic-bezier(.5,1,.89,1); opacity: 0; transition-delay: 1.8s;}
.kv .news dl { position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); z-index: 2; display: table; width: 90%; }
.kv .news dl dt,
.kv .news dl dd { display: table-cell; vertical-align: middle;}
.kv .news dl dt { width: 120px;}
.kv .news dl dt img { width: 100%; border-radius: 10px;}
.kv .news dl dd { width: auto; padding-left: 24px; color: #333; font-size: clamp(12px,1.4vw,16px);}
.kv .news dl dd time { display: block; font-size: 14px;}
.kv .news .bg-news { position: relative; width: 100%; z-index: 1;}
.kv .news .bg-news img { position: relative; width: 100%;}
.kv .note { position: absolute; left: 0; bottom: 30px; width: 100%; }
.kv .note div { width: 92%; margin: 0 auto; transition: 1.0s cubic-bezier(.5,1,.89,1); opacity: 0; transition-delay: 2.0s}
.kv .note ul { width: 100%; max-width: 380px; margin: 0 0 0 auto; font-size: 0px;}

.kv .bg { width: 100%; }
.kv .bg picture { display: block; width: 100%;}
.kv .bg picture img { width: 100%; height: auto;}

.kv.show .main .package { opacity: 1;}
.kv.show .main .package figure { filter: blur(0px);}
.kv.show .main .bubble .bubble-1 { opacity: 1; transform: translateY(0px);}
.kv.show .main .bubble .bubble-2 { opacity: 1; transform: translateY(0px);}
.kv.show .main .bubble .bubble-1 div,
.kv.show .main .bubble .bubble-2 div { opacity: 1; filter: blur(0px); animation: floating 4.0s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;}
.kv.show .logo,
.kv.show .txt { opacity: 1;}
.kv.show .news{ opacity: 1;}
.kv.show .note div { opacity: 1;}
@media (max-width: 1281px) {
	.kv .main .package { padding-top: 9vw;}
	.kv .ctn { bottom: 3vw;}
	.kv .logo { margin-bottom: 4vw;}
	.kv .txt { margin-bottom: 1.2vw;}
	.kv .news dl dt { width: 80px;}
}
@media (max-width: 801px) {
	.kv .main { top: 0%; width: 100%; padding-top: 4vw;}
	.kv .main .package { padding-top: 17vw;}
	.kv .main .package figure { padding-left: 20px;}
	.kv .main .package figure img { width: 35%;}
	.kv .main .bubble .bubble-1 div,
	.kv .main .bubble .bubble-2 div { display: block; width: 82%; margin: 0 auto;}

	.kv .ctn { bottom: 12vw;}

	.kv .logo { width: 32%; margin-bottom: 0; position: absolute; left: 0; top: 0;}
	.kv .logo p img { width: 80%;}
	.kv .txt { width: 100%; margin-bottom: 4vw; padding-left: 30%;}
	.kv .txt h1 img{ width: 88%;}
	
	.kv .news { width: 100%; max-width: 600px; margin: 0 auto;}
	.kv .news dl dd { padding-left: 18px;}
	.kv .note ul { margin: 0;}
}
@media (max-width: 481px) {
	.kv .ctn { bottom: 50px;}
	.kv .txt { margin-bottom: 1.6vw;}
	.kv .news dl dt { width: 72px;}
	.kv .news dl dt img { border-radius: 6px;}
	.kv .news dl dd time { font-size: 12px;}
	.kv .note { bottom: 20px;}
}

@keyframes wave1 {
	0% { background-position-x: 0px;}
100% { background-position-x: 1600px;}
}
@keyframes wave2 {
	0% { background-position-x: 0px;}
100% { background-position-x: -1600px;}
}
.ttl { width: 100%; max-width: 1280px; margin: 0 auto;}
.ttl .inner { position: relative;}
.ttl .inner:after { content: ''; display: block; width: 100%; padding-top: 360px; background: url('./img/bg/ttl.png') no-repeat 50% 50%;
 position: absolute; left: 0; top: -90px; z-index: 2;
}
.ttl h2 { position: relative; width: 100%; text-align: center; z-index: 3;}
.ttl h2 img { width: 80%; max-width: 680px; height: auto;}
.ttl picture { display: block; width: 100%; position: absolute; left: 0; top: -90px; width: 100%; z-index: 2; }
.ttl picture img { width: 100%;}
.ttl .wave { position: absolute; left: 0; bottom: -100px; width: 100%; padding-top: 180px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1600 180"><g fill="%23e2edf6"><path d="M1600,0H0v179c100.8,0,151.5-12.2,201.1-24,48.8-11.6,99.2-23.7,198.3-23.7,99.1,0,149.5,12,198.3,23.7,49.5,11.8,100.7,24,201.5,24s.2,0,.3,0,.2,0,.3,0c100.8,0,152-12.2,201.5-24,48.8-11.6,99.2-23.7,198.3-23.7,99.1,0,149.5,12,198.3,23.7,49.5,11.8,101.4,24,202.2,24s0,0,0,0,0,0,0,0h0s.2-179,0-179Z"/></g></svg>');
 background-repeat: repeat-x; background-size: auto 100%; animation: wave1 20s linear infinite;
}
.ttl .wave:before,
.ttl .wave:after { content: ''; display: block; width: 100%; padding-top: 180px; position: absolute; left: 0; bottom: 0;}
.ttl .wave:before{
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1600 180"><g fill="%23fff"><path d="M1600,0H0v149c100.8,0,151.5-12.2,201.1-24,48.8-11.6,99.2-23.7,198.3-23.7,99.1,0,149.5,12,198.3,23.7,49.5,11.8,100.7,24,201.5,24s.2,0,.3,0,.2,0,.3,0c100.8,0,152-12.2,201.5-24,48.8-11.6,99.2-23.7,198.3-23.7,99.1,0,149.5,12,198.3,23.7,49.5,11.8,101.4,24,202.2,24s0,0,0,0,0,0,0,0h0s.2-149,0-149Z"/></g></svg>');
 background-repeat: repeat-x; background-size: auto 100%; animation: wave2 10s linear infinite;
}
.ttl .wave:after{
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1600 180"><g fill="%23a0c1e1"><path d="M1600,0H0v134c100.8,0,151.5-12.2,201.1-24,48.8-11.6,99.2-23.7,198.3-23.7,99.1,0,149.5,12,198.3,23.7,49.5,11.8,100.7,24,201.5,24s.2,0,.3,0,.2,0,.3,0c100.8,0,152-12.2,201.5-24,48.8-11.6,99.2-23.7,198.3-23.7,99.1,0,149.5,12,198.3,23.7,49.5,11.8,101.4,24,202.2,24s0,0,0,0,0,0,0,0h0s.2-134,0-134Z"/></g></svg>');
 background-repeat: repeat-x; background-size: auto 100%; animation: wave1 15s linear infinite;
}
@media (max-width: 1281px) {
}
@media (max-width: 801px) {
	.ttl .inner:after { top: -6vw; padding-top: 36%; background: url('./img/bg/ttl@sp.png') no-repeat 50% 50%; background-size: 100% auto;}
	.ttl .wave { bottom: -8.5vw; padding-top: 18%;}
	.ttl .wave:before,
	.ttl .wave:after { padding-top: 18%;}
}


.stl { width: 100%; max-width: 1280px; margin: 0 auto; background: url('./img/bg/stl.jpg') no-repeat 50% 50% / 100% 100%;}
.stl .inner { position: relative; width: 80%; max-width: 560px; margin: 0 auto; padding: 21px 0;}
.stl h2 { text-align: center;}
.stl h2 img { width: 100%; height: auto;}
.stl h2 img.sp { display: none;}
@media (max-width: 801px) {
	.stl .inner { padding: 16px 0;}
}
@media (max-width: 481px) {
	.stl .inner { padding: 12px 0;}
	.stl h2 img.pc { display: none;}
	.stl h2 img.sp { display: block;}
}

.bg-1 { width: 100%; max-width: 1280px; margin: 0 auto; background: #fff url('./img/bg/1.jpg') no-repeat 50% 0;}
@media (max-width: 801px) {
	.bg-1 { background: url('./img/bg/1@sp.jpg') no-repeat 50% 0 / 100% auto;}
}


.blank { transition: 0.8s cubic-bezier(.5,1,.89,1); background: rgba(255,255,255,1);}
.blank .ctn { width: 100%; max-width: 800px; margin: 0 auto;}
.blank .ctn:before { content: ''; display: block; width: 100%; padding-top: 92%;}
@media (max-width: 801px) {
	.blank .ctn:before { padding-top: 58%;}
}
.blank.show { background: rgba(255,255,255,0);}

#message .inner-sct { padding: 60px 0;}
#message .tit { width: 90%; max-width: 800px; margin: 0 auto 60px;}
#message .tit:before,
#message .tit:after { content: ''; display: block; width: 100%; height: 2px; background: url('./img/line.png') no-repeat 50% 50% / 100% auto;}
#message .tit h2 { padding: 6px 0; text-align: center;}
#message .tit h2 img { width: 90%; max-width: 560px; height: auto;}
#message .read { width: 82%; max-width: 620px; margin: 0 auto 50px;}
#message .read p.txt-1 { margin-bottom: 30px; font-size: clamp(18px,3.6vw,36px); letter-spacing: 0.1rem; line-height: 1.8;}
#message .read p.txt-2 { font-size: clamp(13px,2.6vw,26px); letter-spacing: 0.05rem; line-height: 1.8;}
#message .read p span { display: block;}
#message .movie { width: 88%; max-width: 760px; margin: 0 auto 50px;}
#message .movie img { width: 100%; height: auto;}
#message .movie .inner { position: relative; width: 100%; padding-top: 56.25%;}
#message .movie iframe { position: absolute; width: 100%; height: 100%; border: none; left: 0; top: 0;}
#message .note div { width: 88%; max-width: 1000px; margin: 0 auto;}
@media (max-width: 801px) {
	#message .tit { margin-bottom: 40px;}
	#message .read { max-width: 440px}
}
@media (max-width: 481px) {
	#message .tit { margin-bottom: 30px;}
	#message .read { margin-bottom: 20px;}
	#message .read p.txt-1 { margin-bottom: 15px; letter-spacing: 0.05rem; line-height: 1.8;}
	#message .read p.txt-2 { letter-spacing: 0rem; line-height: 1.8;}
	#message .movie { margin-bottom: 20px;}
}


#produce {}
#produce .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 60px 0 150px; background: linear-gradient(#f7f7f7 90%,#fff);}
#produce .ctn { width: 90%; max-width: 800px; margin: 0 auto;}
#produce .intro{ display: flex; justify-content: space-between; flex-direction: row-reverse; align-items: flex-end; margin-bottom: 90px;}
#produce .intro .pht { width: 66%;}
#produce .intro .data{ width: 32.5%;}
#produce .intro .pht figure img { width: 100%; height: auto;}
#produce .intro .data p img { width: 100%; height: auto;}
#produce .tit { margin-bottom: 40px;}
#produce .tit dl { width: 100%;}
#produce .tit dl dt,
#produce .tit dl dd { display: inline-block; color: #1d232e; vertical-align: middle;}
#produce .tit dl dt { margin-right: 30px; font-size: clamp(16px,3.6vw,36px); font-weight: 700; letter-spacing: 0.1rem;}
#produce .tit dl dd { font-size: clamp(11px,2.2vw,22px); font-weight: 700; letter-spacing: 0.05rem;}

#produce .flex { display: flex; justify-content: space-between; }
#produce .flex .pht { width: 50%;}
#produce .flex .txt { width: 47.5%;}
#produce .flex .pht figure img { width: 100%; height: auto;}
#produce .flex .txt .inner { position: relative; margin-bottom: 30px; padding: 20px; padding-left: 30px; background: url('./img/bg/ptn-1.png') repeat 50% 50% / 20px auto;}
#produce .flex .txt p { color: #1d232e; font-size: clamp(14px,2.3vw,22px); line-height: 1.8;}
#produce .flex .txt p span { display: block;}
#produce .flex .txt p sub { font-size: 12px; vertical-align: baseline;}

#produce .flex .txt .prof { margin-bottom: 30px; padding: 20px; background: #fff; box-shadow: 2px 2px 8px #999;}
#produce .flex .txt .prof dl dt { position: relative; margin-bottom: 8px; font-size: 14px; font-weight: 700;}
#produce .flex .txt .prof dl dt:after { content: ''; display: block; width: 98%; height: 1px; border-top: dotted 2px #7d7d7d;
 position: absolute; right: 0; top: 50%;
}
#produce .flex .txt .prof dl dt span { position: relative; display: inline-block; padding-right: 15px; background: #fff; z-index: 2;}
#produce .flex .txt .prof dl dd { font-size: 14px;}
#produce .flex .txt .prof dl dd br.sp { display: none;}
@media (max-width: 641px) {
	#produce .intro{ margin-bottom: 60px;}
	#produce .flex { display: block;}
	#produce .flex .pht { display: none;}
	#produce .flex .txt { width: 100%;}
	#produce .flex .txt .inner { padding: 15px; padding-left: 48%;}
	#produce .flex .txt .inner:before { content: ''; display: block; width: 40%; padding-top: 35%; background: url('./img/pht-2@sp.jpg') no-repeat 50% 50% / 100% auto;
	 position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	}
	#produce .flex .txt p { font-size: clamp(12px,2.5vw,24px);}
	#produce .flex .txt p sub { font-size: 9px;}
	#produce .flex .txt .prof dl dt { margin-bottom: 6px;}
	#produce .flex .txt .prof dl dt:after { border-width: 1px;}
	#produce .flex .txt .prof dl dd br.sp { display: block;}
}
@media (max-width: 481px) {
	#produce .inner-sct { padding: 30px 0 80px;}
	#produce .intro{ margin-bottom: 40px;}
	#produce .intro .pht { width: 58%;}
	#produce .intro .data{ width: 42%; padding-right: 8px;}

	#produce .tit { margin-bottom: 20px;}
	#produce .tit dl dt { margin-right: 8px;}
	#produce .flex .txt .inner { margin-bottom: 20px; padding: 12px 0; padding-left: 46%;}
	#produce .flex .txt p { line-height: 1.6;}
	#produce .flex .txt .prof { padding: 12px;}
	#produce .flex .txt .prof dl dt { font-size: 11px;}
	#produce .flex .txt .prof dl dd { font-size: 12px;}
}


#point {}
#point .bg { width: 100%; max-width: 1280px; margin: 0 auto; background: linear-gradient(#fff, #bcd4ea, #fff);}
#point .inner-sct { padding: 140px 0 120px;}
#point .read { padding: 20px 0;}
#point .read p { font-size: clamp(16px,2.8vw,28px); letter-spacing: 0.05rem; line-height: 1.8; text-align: center;}

#point .ctn-pc { position: relative;}
#point .bloc { position: absolute; left: 0; top: 0; width: 100%; z-index: 2;}
#point .bloc#point-4 { background: url('./img/bg/point.png') no-repeat 50% 50% / 1280px auto; z-index: 1;}
#point .fixed .bloc { position: fixed;}
#point .bloc .bloc-inner { width: 92%; max-width: 1100px; margin: 0 auto; padding-top: 40px; transition: 0.3s linear; opacity: 0;}
#point .bloc.show .bloc-inner { opacity: 1;}
#point .bloc .ctn { display: flex; width: 100%; justify-content: space-between;}
#point .bloc .ctn .tit { width: 47.5%;}
#point .bloc .ctn .fig { width: 50%;}
#point .bloc .ctn .tit p { margin-bottom: 80px;}
#point .bloc .ctn .tit p img { width: 100%; height: auto;}
#point .bloc .ctn .tit .note div { padding-left: 50px;}
#point .bloc .ctn .fig figure img { width: 100%; height: auto; border-radius: 20px;}


#point .sp-show { display: none;}
#point .ctn-sp { width: 84%; max-width: 600px; margin: 0 auto;}
#point .ctn-sp ul.point { margin-bottom: 30px;}
#point .ctn-sp ul.point li { padding: 8px 0;}
#point .ctn-sp ul.point li dl dt { position: relative;}
#point .ctn-sp ul.point li dl dt:after { content: ''; display: block; width: 20px; height: 20px;
 border-top: solid 2px #afacab; border-left: solid 2px #afacab;
 position: absolute; right: 5%; top: 50%; transform: translateY(-25%) rotate(45deg);
}
#point .ctn-sp ul.point li dl dt.open:after { transform: translateY(-60%) rotate(-135deg);}
#point .ctn-sp ul.point li dl dt img { width: 100%;}
#point .ctn-sp ul.point li dl dd { display: none; padding: 20px 0 0;}
#point .ctn-sp ul.point li dl dd img { width: 100%; border-radius: 20px;}

@media (max-width: 801px) {
	#point .inner-sct { padding: 80px 0; background-image: url('./img/bg/point-top@sp.png'), url('./img/bg/point-bottom@sp.png');
	background-repeat: no-repeat, no-repeat; background-position: 50% 100px, 50% 90%; background-size: 100% auto, 100% auto;}
	#point .pc-show { display: none;}
	#point .sp-show { display: block;}
}
@media (max-width: 481px) {
	#point .inner-sct { padding: 60px 0;}
	#point .read { padding: 12px 0;}
	#point .read p { letter-spacing: 0rem;}
	#point .read p span { display: block;}
	#point .read p br.pc { display: none;}
	#point .ctn-sp ul.point li dl dt:after { width: 12px; height: 12px;}
}


#pump { background: #fff;}
#pump .inner-sct { padding: 160px 0 120px;}
#pump .read { margin-bottom: 50px;}
#pump .read p { font-size: clamp(18px,2.8vw,28px); letter-spacing: 0.05rem; line-height: 1.8; text-align: center;}
#pump .ctn { width: 88%; max-width: 1000px; margin: 0 auto;}
#pump .ctn .tit { border-bottom: solid 2px #9fc1e0;}
#pump .ctn .tit h3 { line-height: 1;}
#pump .ctn .tit h3 img { width: 30%; max-width: 250px;}
#pump .ctn .flex { display: flex; justify-content: space-between; width: 100%; padding-top: 60px;
	background: url('./img/bg/bubble-1.png') no-repeat 100% 50% / auto 80%;
}
#pump .ctn .img { position: relative; width: 50%;}
#pump .ctn .txt { width: 45%; padding-top: 50px;}
#pump .ctn .img .badge { position: absolute; right: -50px; top: -130px; width: 210px;}
#pump .ctn .img .badge img { width: 100%;}
#pump .ctn .img figure {}
#pump .ctn .img figure img { width: 100%;}
#pump .ctn .txt .inner { margin-bottom: 50px;}
#pump .ctn .txt h4 { position: relative; margin-bottom: 20px; font-size: clamp(18px,3.2vw,32px); font-weight: 700;}
#pump .ctn .txt h4 span { position: relative; display: inline-block; z-index: 2; background: #fff;}
#pump .ctn .txt p { font-size: clamp(14px,2.8vw,28px); line-height: 1.8; letter-spacing: 0.8;}
#pump .ctn .txt p span { display: block;}
@media (max-width: 801px) {
	#pump .inner-sct { padding: 120px 0 80px;}
}
@media (max-width: 641px) {
	#pump .ctn .flex { display: block; padding-top: 20px; background: none;}
	#pump .ctn .img { width: 100%; margin-bottom: 20px; padding: 0 20px;}
	#pump .ctn .txt { width: 100%; padding-top: 0px;}
	#pump .ctn .img .badge { right: -10px; top: -70px; width: 150px;}
	#pump .ctn .txt .inner { margin-bottom: 30px;}
	#pump .ctn .txt .inner:before,
	#pump .ctn .txt .inner:after { content: ''; display: block; width: 100%; height: 2px; background: linear-gradient(90deg,#fff,#697985,#fff);}
	#pump .ctn .txt .inner:before{ margin-bottom: 20px;}
	#pump .ctn .txt .inner:after { margin-top: 20px;}
	#pump .ctn .txt h4 { margin-bottom: 8px; text-align: center;}
	#pump .ctn .txt h4:after { content: ''; display: block; width: 150px; height: 2px; background: #5f6568;
	 position: absolute; left: 50%; top: 50%; transform: translateX(-50%); z-index: 1;
	}
	#pump .ctn .txt h4 span { padding: 0 15px;}
	#pump .ctn .txt p { text-align: center;}
	#pump .ctn .txt p span { display: inline;}
}
@media (max-width: 481px) {
	#pump .inner-sct { padding: 60px 0 40px;}
	#pump .read { margin-bottom: 40px;}
	#pump .read p span { display: block;}
	#pump .ctn .txt .inner:before,
	#pump .ctn .txt .inner:after { height: 1px;}
	#pump .ctn .txt .inner:before{ margin-bottom: 12px;}
	#pump .ctn .txt .inner:after { margin-top: 16px;}
	#pump .ctn .img .badge { top: -55px; width: 100px;}
}


#skincare { background: #fff;}
#skincare .inner-sct { padding: 160px 0 80px; background: url('./img/bg/bubble-2.png') no-repeat 50% 50%;}
#skincare .ctn { margin-bottom: 30px;}
#skincare .ctn p { margin-bottom: 50px; font-size: clamp(18px,2.8vw,28px); line-height: 1.8; text-align: center;}
#skincare .ctn p span.flow { display: block; font-weight: 700;}
#skincare .ctn p em { font-size: clamp(20px,3.8vw,38px); font-weight: 700;}
#skincare .ctn picture { display: block; width: 88%; max-width: 1000px; margin: 0 auto;}
#skincare .ctn picture img { width: 100%;}
#skincare .note div { width: 86%; max-width: 1000px; margin: 0 auto;}
@media (max-width: 801px) {
	#skincare .inner-sct { padding: 120px 0 80px; background: url('./img/bg/bubble-2@sp.png') no-repeat 50% 20% / 100% auto;}
}
@media (max-width: 641px) {
	#skincare .inner-sct { padding: 80px 0 40px; background-position: 50% 35%;}
	#skincare .ctn { margin-bottom: 20px;}
	#skincare .ctn p { margin-bottom: 30px;}
	#skincare .ctn p span { display: block;}
}
@media (max-width: 641px) {
	#skincare .inner-sct { padding: 60px 0 40px;}
}


#product {}
#product .signboard { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}
#product .signboard picture { position: relative; display: block; width: 100%; z-index: 1;}
#product .signboard picture img { width: 100%;}
#product .signboard .more { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 55%; z-index: 2;}
#product .signboard .more .btn-trig { position: relative; width: 80%; max-width: 330px; margin: 0 auto; border: solid 1px #fff; border-radius: 15px; overflow: hidden;
 box-shadow: 3px 3px 5px rgba(50,50,50,0.5); cursor: pointer;
}
#product .signboard .more .btn-trig:before,
#product .signboard .more .btn-trig:after { content: ''; display: block; width: 18px; height: 2px; background: #fff;
 position: absolute; right: 15px; top: 50%; z-index: 2;
}
#product .signboard .more .btn-trig:before{ transform: translateY(-50%);}
#product .signboard .more .btn-trig:after { transition: 0.3s ease; transform: translateY(-50%) rotate(90deg);}
#product .signboard .more .btn-trig span { position: relative; z-index: 1;
 display: block; padding: 14px 20px; background: url('./img/product/more.jpg') no-repeat 50% 50% / cover;
 color: #fff; font-size: clamp(13px,2.3vw,23px); font-weight: 700; line-height: 1; text-shadow: 2px 0px 6px rgba(0,0,0,0.85);
}
#product .signboard .more .btn-trig.open:after { transform: translateY(-50%) rotate(180deg);}

#product .signboard .more .btn-trig:hover { opacity: 0.85;}

#product .innsr-sct {}
#product .hide-ctn { display: none;}
#product .bloc { position: relative; padding: 60px 0;}
#product .ctn { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}
#product .item { position: relative; width: 92%; max-width: 980px; margin: 0 auto;}
#product .item picture { display: block; width: 100%;}
#product .item picture img { width: 100%;}
#product .item figure { display: block; width: 100%;}
#product .item figure img { width: 100%;}
#product .txt { position: absolute; left: 0; top: 0; width: 100%; z-index: 2;}
#product .txt .left-txt { position: relative; width: 82%; margin: 0 auto; padding-top: 130px; padding-right: 380px;}
#product .txt .right-txt { position: relative; width: 60%; max-width: 740px; margin: 0 0 0 auto; padding-top: 110px;}
#product .txt .w520 { width: 100%; max-width: 520px; margin: 0 0 0 auto;}
#product .txt .copy { margin-bottom: 50px;}
#product .txt .copy dl { position: relative; }
#product .txt .copy dl.left { padding-left: 160px;}
#product .txt .copy dl.right { padding-right: 160px;}
#product .txt .copy dl dt { position: absolute; top: 50%; width: 150px; transform: translateY(-50%);}
#product .txt .copy dl.left dt { left: 0;}
#product .txt .copy dl.right dt { right: 0;}
#product .txt .copy dl dt img { width: 100%;}
#product .txt .copy dl dd { color: #7ba7cb; font-size: clamp(14px,3.0vw,30px); line-height: 1.4;}
#product .txt .copy dl.right dd { text-align: right;}
#product .txt .copy dl dd span { display: block;}
#product .txt .copy dl dd em { font-size:  clamp(15px,3.2vw,32px); font-weight: 700;}
#product .txt .copy dl dd sub { font-size: 14px; vertical-align: baseline;}
#product .txt h3 { margin-bottom: 20px; color: #5f6568; font-size: clamp(14px,3.0vw,30px); line-height: 1.4;}
#product .txt p { margin-bottom: 40px; font-size:  clamp(13px,2.0vw,18px);}
#product .txt p span{ font-size: clamp(12px,2.0vw,20px);}
#product .txt p em { font-size: clamp(15px,2.4vw,24px);}

#product .txt .cart { width: 80%; max-width: 360px;}
#product .txt .cart form { position: relative; width: 100%; border-radius: 50px; box-shadow: 3px 3px 5px rgba(50,50,50,0.5);
 background: url('./img/btn.jpg') no-repeat 50% 50% / cover; overflow: hidden;
}
#product .txt .cart form:before { content: ''; display: block; width: 24px; height: 24px; position: absolute; left: 30px; top: 50%; transform: translateY(-50%);
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 27"><g fill="%235f6568"><path d="M11.5,21.86c-.44,0-.83-.27-.94-.65L4.81,1.75H.97C.44,1.75,0,1.36,0,.88,0,.39.44,0,.97,0h4.59c.44,0,.83.27.94.65l.76,2.57,21.77,1.99c.3,0,.59.13.78.35.18.22.24.5.16.77l-3.46,11.1c-.12.38-.5.64-.94.64h-13.92s.6,2.04.6,2.04h13.17c.54,0,.97.39.97.88,0,.48-.44.88-.97.88h-13.92ZM13.91,12.51h-3.91s1.12,3.8,1.12,3.8h2.78s0-3.8,0-3.8ZM20.46,12.51h-4.6s0,3.8,0,3.8h4.6s0-3.8,0-3.8ZM26.01,12.51h-3.61s0,3.8,0,3.8h2.43s1.18-3.8,1.18-3.8ZM13.79,5.75l-5.94-.54,1.64,5.55h4.42l-.12-5.01ZM20.46,6.31l-4.6-.39v4.84s4.6,0,4.6,0v-4.45ZM27.74,6.95l-5.34-.48v4.29s4.16,0,4.16,0l1.18-3.81ZM7.22,3.09,11.13,16.31l-1.12-3.8M28.11,6.95,7.85,5.21l5.94.54"/><path d="M12.18,24.78c0-1.2,1.04-2.18,2.31-2.18s2.31.98,2.31,2.18c0,1.2-1.04,2.18-2.31,2.18-1.27,0-2.31-.98-2.31-2.18Z"/><path d="M21.19,24.78c0-1.2,1.04-2.18,2.31-2.18s2.31.98,2.31,2.18c0,1.2-1.04,2.18-2.31,2.18-1.27,0-2.31-.98-2.31-2.18Z"/></g></svg>');
 background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; 

}
#product .txt .cart form input[type="submit"]{ display: block; width: 100%; padding: 18px; padding-left: 30px; border: none; background: none;
 font-size: clamp(16px,2.4vw,24px); font-weight: 700; line-height: 1; text-align: center;}
#product .txt .cart form input[type="submit"]:hover { background: rgba(255,255,255,0.3);}

#product .txt .cart span { position: relative; display: block; width: 100%; padding: 18px; border-radius: 50px; box-shadow: 3px 3px 5px rgba(50,50,50,0.5);
 background: url('./img/btn.jpg') no-repeat 50% 50% / cover; overflow: hidden;
 color: #666; font-size: clamp(16px,2.4vw,24px); font-weight: 700; line-height: 1; text-align: center;
}

#product .txt .left-txt h3 { text-align: right;}
#product .txt .left-txt p { text-align: right;}
#product .txt .left-txt .cart { margin: 0 0 0 auto;}

#product .bubble-L,
#product .bubble-R{ position: absolute;}
#product .bubble-L:before,
#product .bubble-R:before { content: ''; display: block; width: 100%; padding-top: 100%; position: relative;}

#product .bubble-L.l1 { width: 120px; top: 5%; left: 4%;}
#product .bubble-R.r1 { width: 160px; bottom: 0; right: 4%;}
#product .bubble-L.l1:before { background: url('./img/product/bubble-1.png') no-repeat 100% 50% / auto 100%;}
#product .bubble-R.r1:before { background: url('./img/product/bubble-2.png') no-repeat 0% 50% / auto 100%}

#product .bubble-L.l2 { width: 160px; bottom: -80px; left: 4%;}
#product .bubble-L.l2:before { background: url('./img/product/bubble-1.png') no-repeat 100% 50% / auto 100%;}

#product .bubble-R.r3 { width: 120px; bottom: 8%; right: 6%;}
#product .bubble-R.r3:before { background: url('./img/product/bubble-1.png') no-repeat 0% 50% / auto 100%;}

#product .bubble-L.l4 { width: 120px; bottom: 5%; left: 4%;}
#product .bubble-R.r4 { width: 140px; bottom: -150px; right: 4%;}
#product .bubble-L.l4:before { background: url('./img/product/bubble-3.png') no-repeat 100% 50% / auto 100%;}
#product .bubble-R.r4:before { background: url('./img/product/bubble-1.png') no-repeat 0% 50% / auto 100%}

#product .flavor div { width: 90%; max-width: 900px; margin: 0 auto; padding: 80px 0 40px;}
#product .flavor div dl { display: table; width: 100%;}
#product .flavor div dl dt,
#product .flavor div dl dd { display: table-cell; width: 50%; vertical-align: middle;}
#product .flavor div dl dt img { width: 100%;}
#product .flavor div dl dd { padding-left: 40px; font-size: clamp(18px,4.2vw,42px);}
#product .note div { width: 92%; max-width: 1000px; margin: 0 auto; padding: 40px 0;}
@media (max-width: 1101px) {
	#product .txt .left-txt { padding-right: 26%;}
}
@media (max-width: 801px) {
	#product .txt .left-txt { width: 88%; padding-top: 14vw; padding-right: 28%;}
	#product .txt .right-txt { width: 88%; margin: 0 auto; padding-top: 12vw; padding-left: 30%;}

	#product .txt .copy { margin-bottom: 20px;}
	#product .txt .copy dl.left { padding-left: 130px;}
	#product .txt .copy dl.right { padding-right: 130px;}
	#product .txt .copy dl dt { width: 120px;}
	#product .txt h3 { margin-bottom: 12px;}
	#product .txt p { margin-bottom: 30px;}


	#product .bubble-L.l1 { width: 80px; top: 4%; left: 0%;}
	#product .bubble-R.r1 { width: 120px; bottom: 0; right: 0%;}
	#product .bubble-L.l1:before { padding-top: 150%;}
	#product .bubble-R.r1:before { padding-top: 120%;}
	
	#product .bubble-L.l2 { width: 100px; bottom: 15%; left: 0%;}
	#product .bubble-L.l2:before {}
	
	#product .bubble-R.r3 { width: 80px; bottom: 0%; right: 0%;}
	#product .bubble-R.r3:before { padding-top: 150%}
	
	#product .bubble-L.l4 { width: 100px; bottom: auto; top: -180px; left: 0%;}
	#product .bubble-R.r4 { display: none;}
	#product .bubble-L.l4:before { padding-top: 180%;}
}
@media (max-width: 641px) {
	#product .txt .copy dl.left { padding-left: 100px;}
	#product .txt .copy dl.right { padding-right: 100px;}
	#product .txt .copy dl dt { width: 90px;}
	#product .txt .copy dl dd sub { font-size: 10px;}
	#product .flavor div dl dd { padding-left: 20px;}
}
@media (max-width: 481px) {
	#product .signboard .more .btn-trig { border-radius: 8px;}
	#product .signboard .more .btn-trig:before,
	#product .signboard .more .btn-trig:after { width: 12px; right: 6px;}
	#product .signboard .more .btn-trig span { padding: 10px 8px; font-size: 12px; text-shadow: 1px 0px 4px rgba(0,0,0,1);}

	#product .bloc { padding: 40px 0;}
	#product .txt .left-txt { padding-bottom: 90px; padding-right: 25%;}
	#product .txt .right-txt { padding-bottom: 90px; padding-left: 28%;}
	#product .txt .left-txt.min-height { padding-bottom: 80px;}
	#product .txt .right-txt.min-height { padding-bottom: 80px;}
 
	#product .txt .copy { margin-bottom: 15px;}
	#product .txt .copy dl.left { padding-left: 68px;}
	#product .txt .copy dl.right { padding-right: 68px;}
	#product .txt .copy dl dt { width: 60px;}
	#product .txt h3 { margin-bottom: 12px;}
	#product .txt p { margin-bottom: 0px;}
	#product .txt .cart { position: absolute; left: 0; bottom: 20px; width: 100%; max-width: 100%;}
	#product .txt .cart.cart-1 { bottom: 38px;}
	#product .txt .cart.cart-2 { bottom: 24px;}
	
	#product .txt .cart form { width: 72%; margin: 0 auto;}
	#product .txt .cart span { width: 72%; margin: 0 auto; padding: 12px 0;}

	#product .bubble-L.l1 { width: 30px; top: 2%; left: 0%;}
	#product .bubble-R.r1 { width: 50px; bottom: -10px; right: 0%;}
	#product .bubble-L.l2 { width: 50px;}	
	#product .bubble-R.r3 { width: 50px;}	
	#product .bubble-L.l4 { width: 60px; top: -100px;}

	#product .flavor div { padding: 40px 0 12px;}
	#product .note div { padding: 20px 0 30px;}
}



#shop .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; background: linear-gradient(#fff, #bcd4ea);}
#shop .bg { width: 100%; padding: 50px 0 210px; background: url('./img/bg/shop.png') no-repeat 50% 0% / 100% auto}
#shop .ctn { width: 80%; max-width: 580px; margin: 0 auto;}
#shop .ctn p { margin-bottom: 40px; text-align: center;}
#shop .ctn p img { width: 100%;}
#shop .ctn p img.sp { display: none;}
#shop .ctn .btn { display: block; width: 60%; max-width: 350px; margin: 0 auto;}
#shop .ctn .btn a { position: relative; display: block; width: 100%; padding: 1px; background: #fff; border: solid 3px #9fc1e0; border-radius: 50px; text-decoration: none;
 box-shadow: 3px 3px 2px #aaa;
}
#shop .ctn .btn a:after { content: ''; display: block; width: 18px; height: 18px; border-top: solid 2px #fff; border-right: solid 2px #fff;
 position: absolute; right: 40px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
#shop .ctn .btn a span { display: block; width: 100%; padding: 18px 0; background: #9fc1e0; border-radius: 50px;
 color: #fff; font-size: clamp(16px,2.3vw,23px); font-weight: 700; line-height: 1; text-align: center;
}
#shop .ctn .btn a:hover span { opacity: 0.8;}
@media (max-width: 481px) {
	#shop .bg { padding: 30px 0 90px; background: url('./img/bg/shop@sp.png') no-repeat 50% 0% / 100% auto;}
	#shop .ctn p { margin-bottom: 20px;}
	#shop .ctn p img.pc { display: none;}
	#shop .ctn p img.sp { display: block;}
	#shop .ctn .btn a { border-width: 2px;}
	#shop .ctn .btn a:after { right: 20px; width: 10px; height: 10px;}
	#shop .ctn .btn a span { padding: 8px 0;}
}



#campaign {}
#campaign .stl div { max-width: 840px; padding: 24px 0;}
#campaign .stl .badge { width: 30%; max-width: 180px; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
#campaign .stl .badge img { width: 100%;}
#campaign .inner-sct { width: 100%; max-width: 1280px; margin: 0 auto; padding: 30px 0; background: url('./img/bg/campaign.jpg') no-repeat 50% 50% / cover;}
#campaign .ctn { display: flex; width: 88%; max-width: 740px; margin: 0 auto;}
#campaign .ctn .img { width: 44%;}
#campaign .ctn .txt { width: 56%;}
#campaign .ctn .img figure img { width: 100%;}
#campaign .ctn .txt p { margin-bottom: 20px;}
#campaign .ctn .txt p img { width: 100%;}
#campaign .ctn .txt .btn { width: 90%; max-width: 330px; margin: 0 auto;}
#campaign .ctn .txt .btn a { display: block; width: 100%;}
#campaign .ctn .txt .btn a img { width: 100%;}
#campaign .ctn .txt .btn a:hover img { opacity: 0.8;}
@media (max-width: 481px) {
	#campaign .stl div { padding: 12px 0;}
	#campaign .ctn .txt p { margin-bottom: 12px;}
}