@charset "UTF-8";

/* ============================================================
   style.css  —  レイアウト & コンポーネント
   命名: l-(layout) / p-(project) / c-(component) / u-(utility) / js-(script hook)
   ============================================================ */

/* ============================================================
   PAGE BACKGROUND
   PCではページ全体に水色の波背景。メインカラムがその上に重なる。
   ============================================================ */
body {
    position: relative;
    min-height: 100vh;
    background-color: var(--color-page-top);
}

/* 波は支給画像（wave1.png / wave2.png）をそのまま使用。
   中央カラムに隠れて見えないSPでは読み込まないよう、
   PCレイアウトのメディアクエリの中だけで指定している。

   ・wave2.png（#B6D6E8・濃い方）が手前、wave1.png（#CBDFEF・淡い方）が奥

   ・横：画像の左右を1.3%ずつ落とした状態がカンプの見た目。
     幅を102.6%にして中央寄せすることで、はみ出した分が
     左右から均等にクロップされる。
     （カンプ実測から数値フィットした結果、両画像とも使用幅は97.5%）

   ・縦：vh基準にしているので、ウィンドウの高さを変えても
     波の高さ・位置が画面に対して常にカンプと同じ比率になる。
     いずれも下端が画面下端より下（約115vh）に来るので、
     どの画面サイズでも下まで塗りつぶされる。 */
@media (min-width: 1180px) {
    body {
        /* 
        background-image: url("../images/wave2.png"), url("../images/wave1.png");
        background-repeat: no-repeat, no-repeat;
        
        background-size:
            102.6% 50.4vh,
            102.6% 72.3vh;
        background-position:
            center 64.7vh,
            center 42.9vh;
            background-attachment: fixed, fixed;
            */

        background-image: url("../images/wave3.png");
        background-repeat: no-repeat;

        background-size: 100% 60vh;
        background-position: center 42vh;
        background-attachment: fixed;
    }
}

/* ============================================================
   LAYOUT — メインカラム（SPデザイン500px）
   ============================================================ */
.l-main {
    position: relative;
    width: 100%;
    max-width: var(--w-main);
    margin-inline: auto;
    background: var(--color-page-top);
    overflow: hidden;
}

@media (max-width: 1180px) {
    .l-main {
        max-width: none;
    }
}

/* ============================================================
   LAYOUT — PC固定サイドカラム
   ============================================================ */
.l-side {
    display: none;
    position: fixed;
    top: 0;
    z-index: 10;
    width: calc((100% - var(--w-main)) / 2);
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.l-side--left {
    left: 0;
}

/* 右カラム：カンプ（1440px）では中央カラムの右端から96pxの位置にナビが並ぶ。
   1440px未満では余白を詰めてボタン（280px幅）がはみ出さないようにする */
.l-side--right {
    right: 0;
    align-items: flex-start;
    padding-left: 9.6rem; /* clamp() 非対応ブラウザ用のフォールバック */
    padding-left: clamp(4rem, calc((100vw - var(--w-main)) / 2 - 30rem), 9.6rem);
}

.l-side__logo {
    width: 20.5rem;
}
.l-side__sub {
    margin-top: 1.6rem;
    font-family: var(--font-display);
    font-size: var(--fs-26);
    font-weight: var(--unnamed-font-weight-medium);
    letter-spacing: var(--ls-01);
}

/* PCレイアウト有効化 */
@media (min-width: 1180px) {
    .l-side {
        display: flex;
    }
    .c-menubtn {
        display: none;
    }
}

/* ============================================================
   c-gnav — ページ内ナビ
   ============================================================ */
.c-gnav__list > li + li {
    margin-top: 3.9rem;
}

.c-gnav__link {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--fs-26);
    font-weight: var(--unnamed-font-weight-normal);
    font-weight: 500;
    letter-spacing: var(--ls-015);
    line-height: 1;
    transition: opacity 0.25s;
}
.c-gnav__link:hover {
    opacity: 0.55;
}

/* ============================================================
   c-shopbtn — 白いショップボタン
   ============================================================ */
.c-shoplist {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 4.6rem;
    max-width: 28rem;
}
.c-shoplist__item {
    flex: 1 1 100%;
}
.c-shoplist__item--half {
    flex: 1 1 calc(50% - 0.5rem);
}

.c-shopbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    min-height: 3.8rem;
    padding: 0.6rem 1.4rem;
    background: var(--color-card-bg);
    font-family: var(--font-display);
    font-size: var(--fs-16);
    letter-spacing: var(--ls-005);
    line-height: 1.3;
    white-space: nowrap;
    transition: opacity 0.25s;
}
.c-shopbtn::after {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
}
.c-shopbtn:hover {
    opacity: 0.7;
}

/* ============================================================
   c-sns
   ============================================================ */
.c-sns {
    display: flex;
    gap: 3rem; /* カンプ実測：アイコン間30px */
    margin-top: 4.6rem;
}
.c-sns img {
    width: 3.1rem;
}
.c-sns a {
    transition: opacity 0.25s;
}
.c-sns a:hover {
    opacity: 0.6;
}

/* ============================================================
   c-menubtn — ハンバーガー
   ============================================================ */
.menubtn-wrapper {
    width: 100%;
    max-width: 500px;
    margin: auto;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 99;
}

@media screen and (max-width: 1180px) {
    .menubtn-wrapper {
        max-width: none;
    }
}

.c-menubtn {
    display: block;
    position: absolute;
    top: 2.4rem;
    top: 2rem;
    right: 1.4rem;
    right: 1.6rem;
    z-index: 30;
    width: 6.6rem;
}

/* ============================================================
   c-drawer — SPメニュー
   ============================================================ */
.c-drawer {
    /* 
    display: none;
    */
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow-y: auto;
    opacity: 0; /* 既定は非表示 */
    transition: 0.5s ease;
}
/* :target で開く。ナビをクリックするとtargetが移るので自動的に閉じる */
.c-drawer:target {
    /* 
    display: block;
    */
    z-index: 100;
    opacity: 1;
}

.c-drawer__overlay {
    position: fixed;
    inset: 0;
    background: var(--color-page-top);
}

/* SPカンプ通り、500pxカラムの中で左右110pxのインデント */
.c-drawer__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: var(--w-main);
    min-height: 100%;
    margin-inline: auto;
    padding: 12rem 11rem;
}
.c-drawer__close {
    display: block;
    position: absolute;
    top: 2.7rem;
    top: 1.8rem;
    right: 1.8rem;
    right: 1.3rem;
    width: 7.2rem;
}

@media screen and (max-width: 1180px) {
    .c-drawer__close {
        display: block;
        position: fixed;
        top: 2.7rem;
        top: 1.8rem;
        right: 1.8rem;
        right: 1.3rem;
        width: 7.2rem;
    }
}
.c-drawer .c-gnav__list {
    order: 1;
}
.c-drawer .c-shoplist {
    order: 2;
}
.c-drawer .c-sns {
    order: 3;
}

/* ============================================================
   p-kv
   キャッチ・商品・ジェル・バッジ・波・キャプションまで
   すべて kv.png（500×800 相当）に含まれているため1枚で表示する
   ============================================================ */
.p-kv {
    position: relative;
    /* kv.png 最下部の色（左#96C0D6 → 右#BED9EC）をそのまま延長し、
     画像とCONCEPTセクションの境目が出ないようにする */
    background: linear-gradient(to right, #96c0d6 0%, #96c0d6 55%, #9ac3d9 70%, #a2c8dd 80%, #afd0e3 90%, #bed9ec 100%);
}
.p-kv__visual {
    display: block;
    margin: 0;
    background: var(--color-kv-bg); /* 読み込み中の背景 */
}
.p-kv__img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================
   c-heading — セクション見出し（CONCEPT / PRODUCT / FEATURES）
   ============================================================ */
.c-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    /* padding-block: 6rem 4.6rem;*/
    padding: 6rem 4.6rem;
}
.c-heading__sparkle {
    width: 2.9rem;
}
.c-heading__en {
    font-family: var(--font-display);
    font-size: var(--fs-40);
    font-weight: var(--unnamed-font-weight-medium);
    letter-spacing: var(--ls-01);
    line-height: 1;
}
.c-heading--onband .c-heading__en {
    color: var(--color-text-invert);
}

/* ============================================================
   c-note — 注釈
   ============================================================ */
.c-note {
    font-size: var(--fs-14);
    letter-spacing: var(--ls-005);
    letter-spacing: var(--ls-004);
    line-height: 1.7;
    color: var(--color-text-mute);
}
.c-note--block {
    margin-top: 2.4rem;
    padding-inline: 1.6rem;
    padding-inline: 0;
}

/* ============================================================
   p-concept
   ============================================================ */
.p-concept {
    position: relative;
    padding-bottom: 8rem;
    background:
        url(../images/concept-bg-top.png) left -2.5rem top no-repeat,
        url(../images/concept-bg.png) right bottom no-repeat var(--color-concept-bg);
}
.p-concept__body {
    position: relative;
    overflow: hidden; /* 画像の透明マージンとカードの出現をクリップ */
}

/* concept-gel.png は左に約14.7%の透明マージンを含むため、
   その分を負のマージンで引き戻し、写真の左端をカラム左端に合わせる */
.p-concept__img {
    width: 100%;
    height: auto;
    margin-left: -14.7%;
}
.p-concept__card {
    position: relative;
    z-index: 1;
    margin: -15.6rem var(--pad-x) 0;
    padding: 5rem 3rem 4rem;
    background: rgba(255, 255, 255, 0.94);
}
/* 本文は画像（未導入フォントのため）。
   文言は img の alt に全文を入れてある */
.p-concept__lead {
    width: 33rem;
    max-width: 100%;
    margin-inline: auto;
}
.p-concept__lead img {
    display: block;
    width: 100%;
    height: auto;
}
.p-concept__card .c-note {
    margin-top: 2.4rem;
    font-size: var(--fs-12);
    text-align: center;
}

/* ============================================================
   p-product
   ============================================================ */
#product .title {
    background: #91bed5;
    padding-top: 60px;
}

#product .title .title-text {
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
}

#product .title .title-text img {
    margin: auto;
}

#product .title .wave-box {
    width: 100%;
    overflow: hidden;
    background: #91BED5;
}
#product .title .wave-inner{
    display: flex;
    width: 200%;
    animation: wave linear 6s infinite;
    border-bottom: 2px solid #DFEDF5;
}
#product .title .wave-box svg{
    display: block;
    flex-shrink: 0;
    width: 50%;
    height: 50px;
    margin-bottom: -1px;
}
#product .title .wave-box path{
    width: 100%;
    fill: #DFEDF5;

}
@keyframes wave {
    from{
        transform: translateX(0);
    } to {
        transform: translateX(-50%);
    }
}

.p-product {
    background: var(--color-product-bg);
}

.p-product .c-heading {
    background: var(--color-product-band);
    padding-block: 5rem 4.4rem;
    margin-bottom: 5rem;
}

.p-product__body {
    padding: 30px var(--pad-x) 8rem;
    text-align: center;
}
.p-product__img {
    width: 13.5rem;
    margin-inline: auto;
}
.p-product__name {
    margin-top: 2.6rem;
    font-size: var(--fs-22);
    font-weight: var(--unnamed-font-weight-medium);
    font-weight: 400;
    letter-spacing: var(--ls-01);
    line-height: 1.5;
}
.p-product__type,
.p-product__volume {
    margin-top: 0.6rem;
    font-size: var(--fs-16);
    letter-spacing: var(--ls-01);
    color: var(--color-text-soft);
    font-weight: 400;
}

/* パネルの初期状態（閉じてる時） */
.p-product .c-accordion .c-accordion__panel {
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition:
        height 0.3s ease-out,
        opacity 0.3s ease-out;
}

/* 開いてる時 */
.p-product .c-accordion[open] .c-accordion__panel {
    opacity: 1;
}

/* 三角形などの標準マーカー消し */
.p-product .c-accordion__head {
    cursor: pointer;
    list-style: none;
}
.p-product .c-accordion__head::-webkit-details-marker {
    display: none;
}

/* ============================================================
   c-accordion — 購入する
   ============================================================ */
.c-accordion {
    margin-top: 3.2rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

.c-accordion__head {
    display: flex;
    list-style: none;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 6.6rem;
    padding: 1rem 5rem;
    background: var(--color-accent);
    color: var(--color-text-invert);
    transition: opacity 0.25s;
}
.c-accordion__head::-webkit-details-marker {
    display: none;
}
.c-accordion__head:hover {
    opacity: 0.85;
}

.c-accordion__label {
    font-size: var(--fs-22);
    font-weight: var(--unnamed-font-weight-medium);
    letter-spacing: var(--ls-01);
    line-height: 1;
}

/* ＋／− アイコン */
.c-accordion__icon {
    position: absolute;
    top: 50%;
    right: 2.4rem;
    translate: 0 -50%;
    width: 1.8rem;
    height: 1.8rem;
}
.c-accordion__icon::before,
.c-accordion__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transition: transform 0.3s;
}
.c-accordion__icon::after {
    transform: rotate(90deg);
}
.c-accordion[open] .c-accordion__icon::after {
    transform: rotate(0deg);
}

.c-accordion__panel {
    border: 1px solid var(--color-line);
    border-top: 0;
    background: var(--color-card-bg);
}
.c-accordion__list {
    padding: 2.4rem 0 3rem;
}
.c-accordion__list a {
    display: block;
    padding: 1.4rem 1rem;
    font-size: var(--fs-24);
    letter-spacing: var(--ls-008);
    color: var(--color-text-soft);
    transition: opacity 0.25s;
    font-weight: 500;
}
.c-accordion__list a:hover {
    opacity: 0.6;
}

/* ============================================================
   c-outlinebtn — 全成分 / 使用方法
   ============================================================ */
.p-product__modalbtns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 3rem;
}
.c-outlinebtn {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 4.8rem;
    background: var(--color-card-bg);
    border: 1px solid var(--color-line);
    font-size: var(--fs-18);
    letter-spacing: var(--ls-01);
    color: var(--color-text-soft);
    transition: opacity 0.25s;
}
.c-outlinebtn:hover {
    opacity: 0.7;
}

/* ============================================================
   p-features
   ============================================================ */
.p-features {
    background: var(--color-features-bg);
    padding-bottom: 10px;
}

.p-point {
    padding-inline: var(--pad-x);
    padding-bottom: 7rem;
}

/* Point1〜3 は手書き文字の画像。
   傾きは画像側に含まれているためCSSでの回転は不要。
   見出し帯より少し左に出るのがカンプの位置 */
.p-point__num {
    width: 10rem;
    margin-left: -2rem;
    /* 
    margin-bottom: 1rem;
    */
}
.p-point__num img {
    display: block;
    width: 100%;
    height: auto;
}

.p-point__title {
    position: relative;
    padding: 1.4rem 2rem;
    padding: 1rem 2rem;
    background: var(--color-band);
    color: var(--color-text-invert);
    font-size: var(--fs-26);
    font-weight: var(--unnamed-font-weight-medium);
    letter-spacing: var(--ls-015);
    line-height: 1.35;
    text-align: center;
}
.p-point__deco {
    position: absolute;
    right: -11rem;
    bottom: -3rem;
    width: 16rem;
    pointer-events: none;
}

.p-point__lead {
    margin-top: 2.6rem;
    font-size: var(--fs-22);
    letter-spacing: var(--ls-01);
    line-height: 1.6;
    text-align: center;
}

@media screen and (max-width: 599px) {
    .p-point__lead {
        letter-spacing: 0px;
    }
}

/* c-card — 分解＆溶解 / 吸着 / 洗浄 */
.c-card {
    margin-top: 3rem;
    padding: 3rem 2rem 3.4rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-card);
    text-align: center;
}

.p-point .c-card {
    padding: 3rem 10px 3.4rem;
}

.c-card__title {
    font-size: var(--fs-22);
    font-weight: var(--unnamed-font-weight-normal);
    letter-spacing: var(--ls-01);
    line-height: 1;
}
.c-card__img {
    width: 30rem;
    width: 35.5rem;
    margin: 2.6rem auto;
}
.c-card__text {
    font-size: var(--fs-18);
    letter-spacing: var(--ls-01);
    line-height: 1.7;
}

@media screen and (max-width: 599px) {
    .c-card__text {
        letter-spacing: 0px;
    }
}

/* c-ingredients — 成分の丸画像リスト */
.c-ingredients {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.6rem 4rem;
    margin-top: 3.6rem;
}
.c-ingredients img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
}
.c-ingredients p {
    margin-top: 1.4rem;
    font-size: var(--fs-18);
    letter-spacing: var(--ls-01);
    letter-spacing: 0;
    text-align: center;
}

@media screen and (max-width: 599px) {
    .c-ingredients p {
        letter-spacing: -0.5px;
    }
}

.c-ingredients--2col {
    padding-inline: 1rem;
}

/* p-care — スペシャルケア */
.p-care {
    margin: 0 0.8rem;
    margin: 0 10px;
    padding: 5rem 3rem 6rem;
    background: var(--color-card-bg);
    text-align: center;
}
.p-care__title {
    position: relative;
    display: inline-block;
    padding-inline: 3rem;
    font-size: var(--fs-26);
    font-weight: var(--unnamed-font-weight-medium);
    letter-spacing: var(--ls-01);
    line-height: 1.5;
}
/* 見出し左右の斜線 */
.p-care__title::before,
.p-care__title::after {
    content: "";
    position: absolute;
    display: block;
    bottom: 0.4rem;
    width: 2px;
    height: 5.6rem;
    background: var(--color-text);
}
.p-care__title::before {
    left: 0;
    transform: rotate(-45deg);
}
.p-care__title::after {
    right: 0;
    transform: rotate(45deg);
}

.p-care__img {
    width: 100%;
    max-width: 40rem;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    margin: 3.4rem auto 0;
}
.p-care__text {
    margin-top: 3.4rem;
    font-size: var(--fs-18);
    letter-spacing: var(--ls-008);
    line-height: 2.2;
    color: var(--color-text-soft);
}

/* ============================================================
   p-footer
   ============================================================ */
.p-footer {
    position: relative;
    padding-top: 6.6rem;
    background: var(--color-footer-bg);
    color: var(--color-text-invert);
    text-align: center;
}
.p-footer__logo {
    width: 21rem;
    margin-inline: auto;
}
.p-footer .c-sns--footer {
    justify-content: center;
    margin-top: 4.6rem;
}
.p-footer .c-sns--footer img {
    filter: invert(1) brightness(2);
}

.p-footer__links {
    margin-top: 4rem;
    padding-bottom: 9rem;
}
.p-footer__links li + li {
    margin-top: 2.4rem;
}
.p-footer__links a {
    font-size: var(--fs-18);
    letter-spacing: var(--ls-01);
    transition: opacity 0.25s;
}
.p-footer__links a:hover {
    opacity: 0.6;
}

.p-footer__wave {
    display: block;
    width: 100%;
    height: 6rem;
    margin-bottom: -1px;
}
.p-footer__copy {
    padding: 2rem 1rem 3rem;
    background: var(--color-copy-bg);
    font-size: var(--fs-20);
    font-weight: 500;
    letter-spacing: var(--ls-005);
    color: var(--color-text-invert);
}

.p-footer__copy img {
    margin: auto;
}

/* ============================================================
   c-pagetop
   ============================================================ */
/* 中央エリア（500pxのメインカラム）の中に追従表示する。
   left/right を 0 にして margin auto で中央寄せするので、
   transform や min() を使わずどのブラウザでも同じ位置になる */
.c-pagetop {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 2.4rem;
    z-index: 50;
    width: 100%;
    max-width: var(--w-main); /* = 500px。中央カラムと同じ幅 */
    margin-left: auto;
    margin-right: auto;
    pointer-events: none; /* 帯自体はクリックを拾わない */
}

@media screen and (max-width: 1180px) {
    .c-pagetop {
        max-width: none;
    }
}
/* 中央カラムの右端から 18px の位置（カンプ準拠） */
.c-pagetop__link {
    display: block;
    width: 6rem;
    margin-left: auto;
    margin-right: 1.8rem;
    pointer-events: auto;
    transition: opacity 0.25s;
}
.c-pagetop__link:hover {
    opacity: 0.75;
}

/* JSが動く環境でのみ、初期状態を非表示にする。
   JS無効時は常時表示になり、ボタンが消えたままにならない */
.is-js .c-pagetop {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s,
        visibility 0.3s;
}
.is-js .c-pagetop.is-visible {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   c-modal
   ============================================================ */
.c-modal {
    display: none; /* 既定は非表示 */
    position: fixed;
    inset: 0;
    z-index: 200;
    padding: 2rem var(--pad-x);
}
/* :target で開く。閉じるボタンは #close（fixedのダミー）へ戻す */
.c-modal:target {
    display: grid;
    place-items: center;
}

.c-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.c-modal__box {
    position: relative;
    width: 100%;
    max-width: 43rem;
    max-height: 82vh;
    overflow-y: auto;
    padding: 4rem 3.4rem 4.4rem;
    background: var(--color-card-bg);
    border-radius: 1.6rem;
}
.c-modal__close {
    display: block;
    position: absolute;
    top: 3rem;
    right: 3rem;
    width: 4.1rem;
}
.c-modal__title {
    font-size: var(--fs-24);
    font-weight: var(--unnamed-font-weight-medium);
    letter-spacing: var(--ls-01);
    line-height: 1;
    text-align: center;
    padding-inline: 4rem;
}
.c-modal__body {
    margin-top: 3.4rem;
    font-size: var(--fs-16);
    letter-spacing: var(--ls-01);
    line-height: 2;
    font-weight: 500;
    color: var(--color-text-soft);
}
.c-modal__body p + p {
    margin-top: 0.6em;
    margin-top: 0;
}