@charset "UTF-8";
/* CSS Document */

html{scroll-behavior: smooth;}
body, h1, h2, h3, h4, h5, h6, p, address,ul, ol, li, dl, dt, dd,table, th, td, img, form, input,figure {margin: 0; padding: 0; list-style-type: none; font-size: 1rem; font-style: normal; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; -webkit-text-size-adjust: 100%; font-feature-settings: "palt"; color-scheme: light;}
a {text-decoration: none;　color: inherit;}
a:hover {filter:alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; -moz-opacity:1.0; -khtml-opacity: 1.0; opacity:1.0; zoom:1;}
.cb {clear: both;}

@font-face {
  font-family: 'LINE Seed JP';
  src: url('../fonts/LINESeedJP_OTF_Rg.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LINE Seed JP';
  src: url('../fonts/LINESeedJP_OTF_Bd.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/NotoSansJP-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/NotoSansJP-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Serif JP';
  src: url('../fonts/NotoSerifJP-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Serif JP';
  src: url('../fonts/NotoSerifJP-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.pcbr {display: block;}/* PC改行*/
.spbr {display: none;}/* スマホ改行解除*/

@media screen and (max-width: 1300px) {
.pcbr {display: none;}/* PC改行解除*/
.spbr {display: block;}/* スマホ改行*/
}

/*//////////////////////////// Common ////////////////////////////*/
#clearpotlp {width: 100%; margin: 0 auto 0; padding: 0; background-color: #eaeff3;}
.notes {width: 90%; margin: 0 auto 0; padding: 0;}
.notes>p {margin: 30px auto 0; color: #232323; font-family: 'Inter', 'Noto Sans JP', sans-serif; font-size: 0.75rem; font-weight: 400; line-height: 1.4; text-align: center;}
.section-heading {width: 90%; display: flex; align-items: center; gap: 40px; margin: 0 auto; padding: 0 0 40px; font-weight: normal;}
.section-heading__en {color: #c5d0d2; font-family: 'LINE Seed JP', Arial, Helvetica, sans-serif; font-size: clamp(1.8rem, 7vw, 3.5rem); font-weight: 700; line-height: 1; letter-spacing: 0.03em;}
.section-heading__slash {display: block; flex-shrink: 0; width: 1px; height: clamp(60px, 9vw, 90px);  background-color: #c5d0d2; transform: rotate(20deg);}
.section-heading__ja {color: #3f496d; font-family: "Noto Sans JP", "Yu Gothic", sans-serif; font-size: clamp(0.9rem, 2.5vw, 1.5rem); font-weight: 700; line-height: 1.5; letter-spacing: 0.1em;}
.section-heading_absolute {position: absolute; left: 5%; top: 40px;}
.content-heading {display: inline-block; margin: 0 auto 30px; padding-bottom: 12px; color: #000000; font-family: 'LINE Seed JP', Arial, Helvetica, sans-serif; font-size: 1.8rem; font-weight: 700; line-height: 1; letter-spacing: 0.08em; border-bottom: 1px solid #000000;}


/*//////////////////////////// FV ////////////////////////////*/
#clearpotlp>#fv {width: 100%; margin: 0 auto; padding: 80px 0 0; text-align: center; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center;}
#clearpotlp>#fv>img {width: 100%; margin: 0 auto; padding: 0; text-align: center;}
#fv>.product {position: absolute; top: 55%; left: 50%; width: min(900px, calc(100% - 40px)); transform: translate(-50%, -50%);}
#fv>.product>img {display: block; width: clamp(300px, 35vw, 600px); max-width: 45%; height: auto;}
#fv>.vertical-copy { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 40px; position: absolute; top: 30px; right: 15%;}
.vertical-copy__line {margin: 0; color: #434d6f; font-size: clamp(1.5rem, 5vw, 2.7rem); font-weight: 400; font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif; line-height: 1.5; letter-spacing: 0.08em; writing-mode: vertical-rl; text-orientation: upright; background-color: #ffffff; font-feature-settings: normal; opacity: 0; transform: translateY(50px); transition: opacity 1s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);}
.vertical-copy__line:nth-child(2) {transition-delay: 0.35s;}
.vertical-copy.is-visible .vertical-copy__line {opacity: 1; transform: translateY(0);}

@media (max-width: 600px) {
	.vertical-copy {gap: 24px;}
	.vertical-copy__line {font-size: 1.5rem; line-height: 1.55;}
    }

/* 「視差効果を減らす」設定を尊重 */
@media (prefers-reduced-motion: reduce) {
	.vertical-copy__line {opacity: 1; transform: none; transition: none;}
    }

/*//////////////////////////// LV ////////////////////////////*/
#clearpotlp #lv {width: 100%; margin: 0 auto; padding: 0 0 0; text-align: center; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center;}
#clearpotlp #lv>img {width: 100%; margin: 0 auto; padding: 0; text-align: center;}
#lv>.product {position: absolute; top: 40px; left: 50px;}
#lv>.product>img {display: block; width: 320px; height: auto;}
#lv>.lv-vertical-copy { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 30px; position: absolute; top: -30px; right: 20%;}
.lv-vertical-copy__line {margin: 0; padding: 10px 0; color: #434d6f; font-size: 2.0rem; font-weight: 400; font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif; line-height: 1.5; letter-spacing: 0.08em; writing-mode: vertical-rl; text-orientation: upright; background-color: #ffffff; font-feature-settings: normal; transition: opacity 1s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);}


/*//////////////////////////// LP-Content Base ////////////////////////////*/
#clearpotlp .lp-content {width: 800px; margin: 0 auto; padding: 0; text-align: center; background-color: #ffffff;}
#clearpotlp .lp-content>section>img {width: 100%;}

/*//////////////////////////// Offer ////////////////////////////*/
#clearpotlp #fv-offer,
#clearpotlp #lv-offer {width: 80%; margin: 0 auto; padding: 80px 0 80px;}
#clearpotlp #fv-offer>img,
#clearpotlp #lv-offer>img {width: 100%;}
#clearpotlp .order-select {width: 100%; margin: 0 auto; display: grid; grid-template-columns: 7fr 3fr; gap: 20px; align-items: center;}
#clearpotlp .order-select>.teiki>p {color: #376795; font-size: 1.0rem; font-weight: 600; line-height: 1.0; letter-spacing: 0.05em;}
#clearpotlp .order-select>.tanpin>img {width: 100%;}

/*//////////////////////////// Trouble ////////////////////////////*/
#clearpotlp #trouble {width: 100%; margin: 0 auto; padding: 0;}
#clearpotlp #trouble>.water>img {width: 100%; margin: 0 auto; padding: 0 0 100px;}
#clearpotlp #trouble>.trouble>img {width: 100%; margin: 0 auto; padding: 0;}

/*//////////////////////////// About ////////////////////////////*/
#clearpotlp #about {width: 100%; margin: 0 auto; padding: 0; position: relative;}
#clearpotlp #about>.about>img {width: 100%; margin: 0 auto; padding: 0;}

/*//////////////////////////// Benefit ////////////////////////////*/
#clearpotlp #p-benefit {width: 100%; margin: 0 auto; padding: 0 0 200px;}
#clearpotlp #p-benefit>.visual {width: 100%; margin: 0 auto; padding: 0; position: relative;}
#clearpotlp #p-benefit>.visual>img {width: 100%; margin: 0 auto; padding: 0;}
#clearpotlp #p-benefit>.visual>.benefit-copy {display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 20px; margin: 0; color: #000000; font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif; font-size: 1.8rem; font-weight: 400; line-height: 1.5; letter-spacing: 0.08em; position: absolute; bottom: -100px; right: 100px; font-feature-settings: normal;}
#clearpotlp #p-benefit>.visual>.benefit-copy>.benefit-copy__line {position: relative; margin: 0; padding-left: 12px; writing-mode: vertical-rl; text-orientation: upright; white-space: nowrap;}
#clearpotlp #p-benefit>.visual>.benefit-copy>.benefit-copy__line::after {content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: currentColor; opacity: 0.7;}

/*//////////////////////////// Features ////////////////////////////*/
#clearpotlp #features {width: 100%; margin: 0 auto; padding: 0;}
#clearpotlp #features>.features>.features__bg {width: 100%; margin: 20px auto 0; padding: 0; background-color: #f5f8ff;}
#clearpotlp #features>.features>img,
#clearpotlp #features>.features>.features__bg>img {width: 100%; margin: 0 auto; padding: 0 0 20px;}

/*//////////////////////////// UserVoice ////////////////////////////*/
#clearpotlp #uservoice {width: 100%; margin: 0 auto; padding: 100px 0; background-color: #dce3cd;}
#clearpotlp #uservoice>.uservoice {width: 80%; margin: 0 auto;}
#clearpotlp #uservoice>.uservoice>img {width: 100%; margin: 0 auto 10px;}

/*//////////////////////////// Collaboration ////////////////////////////*/
#clearpotlp #collaboration {width: 100%; margin: 0 auto; padding: 120px 0;}
#clearpotlp #collaboration>.collaboration {width: 85%; margin: 0 auto; position: relative;}
#clearpotlp #collaboration>.collaboration>img {width: 100%; margin: 0 auto;}

/*//////////////////////////// FAQ ////////////////////////////*/
#clearpotlp #faq {width: 100%; margin: 0 auto; padding: 0 0 120px;}
.faq-accordion {width: 85%; margin: 0 auto 10px; padding: 0 0 0;}
.faq-accordion>.detail-toggle {display: none;}
.faq-accordion>.detail-Label {width: 100%; margin: 0 auto; padding: 30px 0; display: block; color: #ffffff; font-size: 1.2rem; font-family: "Noto Sans JP", "Yu Gothic", sans-serif; font-weight: 700; line-height: 1.0; letter-spacing: 0.1em; text-align: center; background: linear-gradient(90deg, #81b0dd 0%, #7c95b3 100%); border-radius: 50px;}
.faq-accordion>.detail-Label,
.faq-accordion>.detail-content {-webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s;}
.faq-accordion>.detail-content {width: 95%; margin: 10px auto 10px; height: 0; padding:0 20px; overflow: hidden;}
.faq-accordion>.detail-content>.comp {margin: 0 auto 0; font-size: 80%; text-align: justify;}
.faq-accordion>.detail-content>.min {margin: 10px auto 0; font-size: 80%; text-align: justify;}
.faq-accordion>.detail-Label .icon {display: inline-block; position: absolute; top: 30px; right: 40px; width: 22px; height: 22px;}
.faq-accordion>.detail-Label .icon::before {display: block; position: absolute; content: ""; top: 10px; left: 6px; width: 10px; height: 2px; background: #ffffff;}
.faq-accordion>.detail-Label .icon::after {display: block; position: absolute; content: ""; top: 6px; left: 10px; width: 2px; height: 10px; background: #ffffff;}
.faq-accordion>.detail-toggle:checked + .detail-Label + .detail-content {height: auto; padding: 0; transition: all .3s;}
.faq-accordion>.detail-toggle:checked + .detail-Label .icon::after {width: 0 !important;}

#clearpotlp .qa-item {padding: 40px 0; border-bottom: 1px solid #ddd;}
#clearpotlp .qa-item:first-child {padding-top: 40px;}
#clearpotlp .qa-row {display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 20px; margin: 0;}
#clearpotlp .qa-row + .qa-row {margin-top: 20px;}
#clearpotlp .qa-badge {display: grid; width: 50px; height: 50px; place-items: center; border-radius: 50%; color: #fff; font-family: 'LINE Seed JP', Arial, Helvetica, sans-serif; font-size: 1.6rem; font-weight: 700; line-height: 1;}
#clearpotlp .qa-question {align-items: center;}
#clearpotlp .qa-answer {align-items: start;}
#clearpotlp .qa-question .qa-badge {background: #000;}
#clearpotlp .qa-answer .qa-badge {background: #80a5d8;}
#clearpotlp .qa-question__text,
#clearpotlp .qa-answer__text {margin: 0; font-family: "Noto Sans JP", "Yu Gothic", sans-serif; text-align: justify;}
#clearpotlp .qa-question__text {padding-top: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.6; letter-spacing: 0.02em;}
#clearpotlp .qa-answer__text {padding-top: 0; font-size: 1.05rem;; font-weight: 400; line-height: 1.6; letter-spacing: 0.02em;}

/*//////////////////////////// Btn ////////////////////////////*/
#clearpotlp a.btn_teiki {display: block; width: 95%; margin: 10px auto 10px; padding: 20px 0 25px;  color: #ffffff; font-size: 1.18rem; font-weight: 700; line-height: 1.0; letter-spacing: 0.1em; cursor: pointer; text-align: center; transition: background-color 0.3s ease, color 0.3s ease;}
#clearpotlp a.btn_teiki::after {font-size: 25px; font-weight: 400; transition: all .3s ease; margin-left: 10px; color: #ffffff; position: relative; top: 5px;}
#clearpotlp a.btn_teiki {background: linear-gradient(90deg, #376795 0%, #55cfe0 100%); border: 1px solid #55cfe0;}
#clearpotlp a.btn_teiki:hover {color: #55cfe0; background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);}
#clearpotlp a.btn_teiki:hover::after {color: #55cfe0;}

#clearpotlp a.btn_tanpin {display: block; width: 100%; margin: 10px auto 5px; padding: 10px 0 15px;  color: #000000; font-size: 0.85rem; font-weight: 700; line-height: 1.0; letter-spacing: 0.1em; cursor: pointer; text-align: center; border-radius: 50px; transition: background-color 0.3s ease, color 0.3s ease;}
#clearpotlp a.btn_tanpin::after {font-size: 16px; font-weight: 400; transition: all .3s ease; margin-left: 5px; color: #000000; position: relative; top: 4px;}
#clearpotlp a.btn_tanpin {background-color: #ffffff; border: 1px solid #000000;}
#clearpotlp a.btn_tanpin:hover {color: #ffffff; background-color: #797979; border: 1px solid #797979;}
#clearpotlp a.btn_tanpin:hover::after {color: #ffffff;}

#clearpotlp a.btn_curarox {display: block; width: 400px; margin: 0 auto; padding: 20px 0 20px; color: #ffffff; font-size: 1.0rem; font-weight: 700; line-height: 1.0; letter-spacing: 0.1em; cursor: pointer; text-align: center; border-radius: 50px; transition: background-color 0.3s ease, color 0.3s ease; position: absolute; left: 50%; transform: translateX(-50%); bottom: 50px;}
#clearpotlp a.btn_curarox::after {font-size: 16px; font-weight: 400; transition: all .3s ease; margin-left: 5px; color: #ffffff; position: relative; top: 4px;}
#clearpotlp a.btn_curarox {background-color: #003da6; border: 1px solid #003da6;}
#clearpotlp a.btn_curarox:hover {color: #003da6; background-color: #ffffff;}
#clearpotlp a.btn_curarox:hover::after {color: #003da6;}

#clearpotlp a.btn_teiki::after,
#clearpotlp a.btn_tanpin::after,
#clearpotlp a.btn_curarox::after {font-family: 'Material Symbols rounded'; content: "keyboard_arrow_right";}

@media only screen and (max-width: 1200px) {

}

/*//////////////////////////// Product Detail ////////////////////////////*/
#clearpotlp .product-info {max-width: 90%; margin: 0 auto; padding: 50px 0 50px;}
#clearpotlp .product-info>.info-list {margin: 0 auto 60px; padding: 0;}
#clearpotlp .product-info>.info-list>.info-row {display: grid; grid-template-columns: 150px 1fr;}
#clearpotlp .product-info>.info-list>.info-row dt,
#clearpotlp .product-info>.info-list>.info-row dd {padding: 16px 20px; margin: 0; font-size: 0.85rem; line-height: 1.6; border-bottom: 1px solid #4d4d4d; color: #000000;}
#clearpotlp .product-info>.info-list>.info-row dt {display: grid; align-items: center;}
#clearpotlp .product-info>.info-list>.info-row dd {text-align: justify;}

/* ============================================= Effect ============================================= */
.is-fadein01.is-animated {animation: fadeIn01 1.0s forwards;}
@keyframes fadeIn01 {
	0% {opacity: 0; transform: translateY(50px);}
  100% {opacity: 1; transform: translateY(0);}
}

.is-fadein02.is-animated {animation: fadeIn02 1.5s forwards;}
@keyframes fadeIn02 {
	0% {opacity: 0; transform: translateY(100px);}
  100% {opacity: 1; transform: translateY(0);}
}

.fadein01 {opacity: 0.0; transform: translate(0, 80px); transition: all 1200ms;}
.fadein01.scrollin {opacity: 1; transform: translate(0, 0);}
.fadein02 {opacity: 0.0; transform: translate(0, 120px); transition: all 1200ms;}
.fadein02.scrollin {opacity: 1; transform: translate(0, 0);}
.fadein03 {opacity: 0.0; transform: translate(80px, 0); transition: all 1200ms;}
.fadein03.scrollin {opacity: 1; transform: translate(0, 0);}
.fadein04 {opacity: 0.0; transform: translate(-80px, 0); transition: all 1200ms;}
.fadein04.scrollin {opacity: 1; transform: translate(0, 0);}
.fade-left {transform: translateX(-40px);}
.fade-right {transform: translateX(40px);}
.fade-top {transform: translateY(40px);}
.fade-bottom {transform: translateY(-40px);}
.js-scroll {opacity: 0; transition: opacity 1.2s ease, transform 1.2s ease;}
.js-scroll.is-show {opacity: 1; transform: translateX(0);}