@charset "UTF-8";
/* ==========================================================
   特集（コンセプト）専用CSS
   /assets/concept-section.css

   使う部品
     /templates_parts/area_l/concept_section.php … 県トップの入口（.cpt-entry / .cpt-icons）
     /templates_parts/concept/_icon.php           … 県トップの丸アイコン（.cpt-icon）
     /templates_parts/concept/hub_section.php     … 特集ページ（.cpt-hub）
     /templates_parts/concept/_tile.php           … 特集ページのタイル（.cpt-tile）

   ・色は base.css のトークン（--ap-*）を使う。無い場所でも崩れないよう代替色つき
   ・お店の特集は金、セラの特集はピンク（.-thera）
   ・書体はサイト共通のまま（2026-09-22 に明朝体の指定を外した）
   ・ブレークポイントは 768px（県トップと同じ）
   ・2026-09-22: タイルを「画像の上にコピーを重ねる」形に変更
   ・2026-09-23: タイルを正方形から 2:1 の長方形に変更（PC3列）
       画像は「右3〜4割に被写体・左は無地」で作る。左半分にコピーを重ねる。
   ・2026-09-23（夜）: SPをリスト型に変更（社長指示）
   ・2026-09-24: 県トップの入口で お店 / セラの小見出しを廃止
   ・2026-10-05: 県トップの入口を丸アイコンに変更
       SPは2段の横スクロール（丸 7rem）、PCは丸を少しずつ重ねて折り返す（丸 14rem）。
       PCは1つ分の幅を12remにして、14remの丸を左右に1remずつはみ出させて重ねる。
       丸の外側に背景色の縁取りを付けて、重なりの境目を見せる。
       丸の下はコピー（title）。長いものは3行で切る。
       丸の中はイラスト（m_concepts.icon）→ タイル画像 → 小ラベルの1文字目。
       .cpt-row / .cpt-row__sp-hide は廃止。タイル（.cpt-tile）は特集ページで引き続き使う。
   ========================================================== */

.cpt-entry,
.cpt-hub {
    --cpt-bg: var(--ap-bg, #0d0a0c);
    --cpt-frame: var(--ap-panel-v2, #1f1f24);
    --cpt-frame-thera: #231820;
    --cpt-text: var(--ap-text, #f2eee6);
    --cpt-muted: var(--ap-muted, #a49d92);
    --cpt-gold: var(--ap-gold, #c9a86c);
    --cpt-gold-light: var(--ap-gold-light, #e3cb98);
    --cpt-gold-line: var(--ap-gold-line, rgba(201, 168, 108, 0.3));
    --cpt-pink: var(--ap-pink-light, #ff5ca6);
    --cpt-pink-line: var(--ap-pink-line, rgba(245, 48, 139, 0.35));
    --cpt-radius: var(--ap-radius-mini, 4px);
    color: var(--cpt-text);
}


/* ----------------------------------------------------------
   見出し（特集ページで使用。県トップは .ap-sec__title に統一した）
   ---------------------------------------------------------- */
.cpt-head {
    text-align: center;
    margin-bottom: 2rem;
}

.cpt-head__eyebrow {
    margin: 0;
    font-size: 1.3rem;
    letter-spacing: 0.28em;
    color: var(--cpt-gold);
}

.cpt-head__title {
    margin: 0.6rem 0 0;
    word-break: auto-phrase;
    text-wrap: balance;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--cpt-text);
}

.cpt-head__title::after {
    content: "";
    display: block;
    width: 3.6rem;
    height: 1px;
    margin: 1.2rem auto 0;
    background: var(--cpt-gold);
    opacity: 0.6;
}

.cpt-head__lead {
    margin: 1.2rem 0 0;
    font-size: 1.3rem;
    line-height: 1.7;
    color: var(--cpt-muted);
}


/* ----------------------------------------------------------
   県トップの入口（丸アイコン）
     PC … 丸を少しずつ重ねて折り返す（丸 14rem・下の min-width: 768px）
     SP … 2段の横スクロール（丸 7rem・下のメディアクエリ）
     丸の下はコピー（title）を3行まで
     見出しは .ap-sec__title を1行で使う。下に「特集をすべて見る」
   ---------------------------------------------------------- */
.cpt-icons {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cpt-icons__item {
    min-width: 0;
}

.cpt-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    color: inherit;
    text-decoration: none;
}

.cpt-icon__circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 14rem;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--cpt-gold-line);
    border-radius: 50%;
    /* 重なったとき下の丸が透けないよう、最後に塗りつぶしの色を敷く */
    background: radial-gradient(circle at 50% 35%, rgba(201, 168, 108, 0.18) 0%, var(--cpt-frame) 72%), var(--cpt-frame);
    box-shadow: 0 0 0 0.3rem var(--cpt-bg);
    transition: border-color 0.2s;
}

.cpt-icon__circle img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* イラスト（背景透過）は丸いっぱいに広げず、少し内側に収める */
.cpt-icon.-icon .cpt-icon__circle img {
    box-sizing: border-box;
    padding: 1.4rem;
    object-fit: contain;
}

/* タイル画像（2:1）は被写体のある右側を切り抜く */
.cpt-icon.-photo .cpt-icon__circle img {
    object-position: right center;
}

/* セラの写真（縦長）は顔が切れないよう上寄せ */
.cpt-icon.-photo .cpt-icon__circle img.-face {
    object-position: center 22%;
}

/* 画像が何も無いときの1文字 */
.cpt-icon__char {
    font-size: 4.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--cpt-gold-light);
}

/* 丸の下のコピー。3行まで出して、超える分は切る */
.cpt-icon__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    max-width: 100%;
    font-size: 1.3rem;
    line-height: 1.45;
    text-align: center;
    color: var(--cpt-text);
    word-break: auto-phrase;
    text-wrap: balance;
}

.cpt-icon:hover .cpt-icon__circle {
    border-color: var(--cpt-gold);
}

.cpt-icon:focus-visible {
    outline: none;
}

.cpt-icon:focus-visible .cpt-icon__circle {
    outline: 2px solid var(--cpt-gold);
    outline-offset: 3px;
}

/* セラの特集はピンク */
.cpt-icon.-thera .cpt-icon__circle {
    border-color: var(--cpt-pink-line);
    background: radial-gradient(circle at 50% 35%, rgba(214, 100, 140, 0.2) 0%, var(--cpt-frame-thera) 72%), var(--cpt-frame-thera);
}

.cpt-icon.-thera .cpt-icon__char {
    color: #ff9cc8;
}

.cpt-icon.-thera:hover .cpt-icon__circle {
    border-color: var(--cpt-pink);
}

.cpt-icon.-thera:focus-visible .cpt-icon__circle {
    outline-color: var(--cpt-pink);
}

/* PC：丸を少しずつ重ねて並べる
   1つ分の幅は12rem。14remの丸を中央に置くので左右に1remずつはみ出し、隣と2rem重なる。
   マウスを乗せた丸は一番手前に出す */
@media (min-width: 768px) {

    .cpt-icons {
        display: flex;
        flex-wrap: wrap;
        row-gap: 2.4rem;
        padding: 0 1rem;
    }

    .cpt-icons__item {
        position: relative;
        flex: 0 0 12rem;
        display: flex;
        justify-content: center;
    }

    .cpt-icons__item:hover,
    .cpt-icons__item:focus-within {
        z-index: 2;
    }

    .cpt-icon__circle {
        flex: 0 0 auto;
        width: 14rem;
        max-width: none;
    }

    /* コピーは隣とぶつからないよう、1つ分の幅より少し狭く */
    .cpt-icon__title {
        max-width: 11rem;
    }
}

/* 見出し末尾の「(お店編)」「(セラピスト編)」。片方しか無いときだけ付く */
.cpt-entry__ed {
    margin-left: 0.6rem;
    font-size: 0.7em;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--cpt-gold-light);
}

.cpt-entry__ed.-thera {
    color: #ff9cc8;
}


/* ----------------------------------------------------------
   タイル（特集ページで使用）
     PC … 2:1 の画像 ＋ 下側に暗い影 ＋ 左半分にコピーと小ラベル
     SP … リスト型（下のメディアクエリ）
     画像・本文・矢印は .cpt-tile の直下に並ぶ（SPで横並びにするため）
   ---------------------------------------------------------- */
.cpt-tile {
    position: relative;
    display: block;
    min-width: 0;
    container-type: inline-size;
    color: inherit;
    text-decoration: none;
}

.cpt-tile__img {
    position: relative;
    display: block;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border: 1px solid var(--cpt-gold-line);
    border-radius: var(--cpt-radius);
    background: var(--cpt-frame);
    transition: border-color 0.2s;
}

.cpt-tile__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.4s;
}

/* セラの写真（縦長）は顔が切れないよう上寄せで切り抜く */
.cpt-tile__img img.-photo {
    object-position: center 22%;
}

/* 正方形のまま残っている古い画像（image_ratio='1x1'）。入れ直せば解消する */
.cpt-tile__img img.-sq {
    object-position: center center;
}

/* 下側の暗い影（小ラベルと件数を読ませるため） */
.cpt-tile__img::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 55%;
    background: linear-gradient(to top, rgba(13, 10, 12, 0.72) 0%, rgba(13, 10, 12, 0.4) 40%, rgba(13, 10, 12, 0) 100%);
    pointer-events: none;
}

/* 画像が無いタイルは影を弱く（枠の色がそのまま見えるように） */
.cpt-tile.-noimg .cpt-tile__img::after {
    height: 45%;
    background: linear-gradient(to top, rgba(13, 10, 12, 0.5) 0%, rgba(13, 10, 12, 0) 100%);
}

/* 文字は左半分。上にコピー、下に小ラベルと件数 */
.cpt-tile__body {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    width: 62%;
    gap: 1rem;
    padding: 1.4rem;
}

.cpt-tile__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.42;
    color: #fff;
    text-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.9), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.6);
    word-break: auto-phrase;
    text-wrap: balance;
}

.cpt-tile__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
}

/* 小ラベルはピル型。黒を薄めるとグレーに見えるので、金そのものを薄く敷く */
.cpt-tile__label {
    padding: 0.3rem 0.9rem;
    border: 1px solid rgba(240, 220, 180, 0.35);
    border-radius: 999px;
    background: rgba(201, 168, 108, 0.22);
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #f5e6c8;
    text-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cpt-tile__count {
    font-size: 1.1rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
}

.cpt-tile__arrow {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    color: #fff;
}

.cpt-tile:hover .cpt-tile__img,
.cpt-tile:focus-visible .cpt-tile__img {
    border-color: var(--cpt-gold);
}

.cpt-tile:hover .cpt-tile__img img {
    transform: scale(1.04);
}

.cpt-tile:focus-visible {
    outline: 2px solid var(--cpt-gold);
    outline-offset: 3px;
    border-radius: var(--cpt-radius);
}

/* セラの特集はピンク */
.cpt-tile.-thera .cpt-tile__img {
    border-color: var(--cpt-pink-line);
    background: var(--cpt-frame-thera);
}

.cpt-tile.-thera .cpt-tile__label {
    border-color: rgba(240, 179, 198, 0.4);
    background: rgba(214, 100, 140, 0.26);
    color: #ffd9e5;
}

.cpt-tile.-thera:hover .cpt-tile__img,
.cpt-tile.-thera:focus-visible .cpt-tile__img {
    border-color: var(--cpt-pink);
}

.cpt-tile.-thera:focus-visible {
    outline-color: var(--cpt-pink);
}


/* ----------------------------------------------------------
   特集ページ
   ---------------------------------------------------------- */
.cpt-hub__empty {
    padding: 4rem 0;
    font-size: 1.4rem;
    line-height: 1.8;
    text-align: center;
    color: var(--cpt-muted);
}

.cpt-hub__empty a {
    display: block;
    margin-top: 1rem;
    color: var(--cpt-gold);
}

/* 飛び先ボタン */
.cpt-jump {
    display: flex;
    gap: 1rem;
    max-width: 48rem;
    margin: 0 auto 3.2rem;
}

.cpt-jump__btn {
    flex: 1;
    padding: 1rem 0;
    border: 1px solid var(--cpt-gold-line);
    border-radius: var(--cpt-radius);
    font-size: 1.4rem;
    text-align: center;
    color: var(--cpt-gold-light);
    text-decoration: none;
    transition: border-color 0.2s;
}

.cpt-jump__btn.-thera {
    border-color: var(--cpt-pink-line);
    color: #ff9cc8;
}

.cpt-jump__btn:hover {
    border-color: var(--cpt-gold);
}

.cpt-jump__btn.-thera:hover {
    border-color: var(--cpt-pink);
}

/* お店 / セラピストのセクション */
.cpt-part {
    scroll-margin-top: var(--ap-sticky-top, 9.4rem);
}

.cpt-part + .cpt-part {
    margin-top: 4.8rem;
}

.cpt-part__title {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin: 0 0 0.4rem;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--cpt-gold);
}

.cpt-part__title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--cpt-gold-line);
}

.cpt-part.-thera .cpt-part__title {
    color: var(--cpt-pink);
}

.cpt-part.-thera .cpt-part__title::after {
    background: var(--cpt-pink-line);
}

/* 群 */
.cpt-group {
    margin-top: 2.4rem;
    scroll-margin-top: var(--ap-sticky-top, 9.4rem);
}

.cpt-group__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-bottom: 1.2rem;
}

.cpt-group__title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--cpt-text);
}

.cpt-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}


/* ----------------------------------------------------------
   各特集の一覧（/{pref}/concept/{slug}/）の見出し
   ---------------------------------------------------------- */
.cpt-list-head {
    --cpt-gold: var(--ap-gold, #c9a86c);
    --cpt-accent: var(--cpt-gold);
}

.cpt-list-head.-thera {
    --cpt-accent: var(--ap-pink-light, #ff5ca6);
}

.cpt-list-head__eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin: 0 0 0.6rem;
    font-size: 1.2rem;
    color: var(--ap-muted, #a49d92);
}

.cpt-list-head__eyebrow a {
    padding: 0.1rem 1rem;
    border: 1px solid var(--cpt-accent);
    border-radius: 999px;
    color: var(--cpt-accent);
    text-decoration: none;
    letter-spacing: 0.1em;
}

.cpt-list-head__title {
    font-weight: 700;
}

.cpt-list-head__label {
    color: var(--cpt-accent);
}

.cpt-list-back {
    margin: 3.2rem 0 0;
    text-align: center;
}

.cpt-list-back a {
    display: inline-block;
    padding: 0.9rem 3.2rem;
    border: 1px solid var(--ap-gold-line, rgba(201, 168, 108, 0.3));
    border-radius: 999px;
    font-size: 1.3rem;
    color: var(--ap-gold-light, #e3cb98);
    text-decoration: none;
}

.cpt-list-back a:hover {
    border-color: var(--ap-gold, #c9a86c);
}


/* ----------------------------------------------------------
   SP
     県トップの丸アイコン … 1段の横スクロール
     特集ページのタイル   … リスト型
   ---------------------------------------------------------- */
@media (max-width: 767px) {

    .cpt-head__title {
        font-size: 1.9rem;
    }

    /* 丸アイコンを2段の横スクロールにする（上段→下段ではなく、縦に2つずつ埋めて右へ進む） */
    .cpt-icons {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(2, auto);
        grid-auto-columns: 8.8rem;
        grid-template-columns: none;
        gap: 0.3rem 1.2rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.4rem;
    }

    .cpt-icons::-webkit-scrollbar {
        display: none;
    }

    .cpt-icons__item {
        scroll-snap-align: start;
    }

    .cpt-icon {
        gap: 0.6rem;
    }

    .cpt-icon__circle {
        max-width: 7rem;
    }

    .cpt-icon.-icon .cpt-icon__circle img {
        padding: 0.8rem;
    }

    .cpt-icon__char {
        font-size: 2.4rem;
    }

    .cpt-icon__title {
        font-size: 1.1rem;
        line-height: 1.4;
    }

    /* 特集ページのタイル */
    .cpt-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.8rem;
    }

    .cpt-group__title {
        font-size: 1.6rem;
    }

    .cpt-tile {
        display: flex;
        align-items: center;
        gap: 1.2rem;
        box-sizing: border-box;
        padding: 0.8rem;
        border: 1px solid var(--cpt-gold-line);
        border-radius: var(--cpt-radius);
        background: var(--cpt-frame);
    }

    .cpt-tile.-thera {
        border-color: var(--cpt-pink-line);
        background: var(--cpt-frame-thera);
    }

    .cpt-tile__img {
        flex: 0 0 6.4rem;
        width: 6.4rem;
        aspect-ratio: 1 / 1;
        border: none;
        border-radius: 50%;
    }

    /* 被写体は右側にあるので、そこを切り抜く */
    .cpt-tile__img img {
        object-position: right center;
    }

    .cpt-tile__img img.-photo {
        object-position: center 22%;
    }

    .cpt-tile__img img.-sq {
        object-position: center center;
    }

    /* リストでは画像の上に文字を乗せないので影は不要 */
    .cpt-tile__img::after,
    .cpt-tile.-noimg .cpt-tile__img::after {
        display: none;
    }

    .cpt-tile__body {
        position: static;
        flex: 1;
        min-width: 0;
        width: auto;
        gap: 0.5rem;
        padding: 0;
    }

    .cpt-tile__title {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        font-size: 1.4rem;
        line-height: 1.45;
        color: var(--cpt-text);
        text-shadow: none;
        text-wrap: initial;
    }

    .cpt-tile__label {
        text-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .cpt-tile__count {
        color: var(--cpt-muted);
        text-shadow: none;
    }

    .cpt-tile__arrow {
        position: static;
        flex: 0 0 auto;
        width: auto;
        height: auto;
        border: none;
        font-size: 1.6rem;
        color: var(--cpt-muted);
    }

    .cpt-tile:hover .cpt-tile__img img {
        transform: none;
    }
}


/* ----------------------------------------------------------
   タイルの幅で文字を切り替える（PC幅のときだけ）
   ---------------------------------------------------------- */
@media (min-width: 768px) {

    @container (max-width: 300px) {

        .cpt-tile__body {
            padding: 1.1rem;
        }

        .cpt-tile__title {
            line-height: 1.4;
        }

        .cpt-tile__label {
            padding: 0.5rem 1rem;
        }

        .cpt-tile__arrow {
            width: 2.2rem;
            height: 2.2rem;
        }
    }

    @container (max-width: 200px) {

        .cpt-tile__body {
            width: 74%;
            padding: 0.9rem;
        }

        .cpt-tile__title {
            -webkit-line-clamp: 2;
            line-clamp: 2;
            font-size: 1.2rem;
        }

        .cpt-tile__meta,
        .cpt-tile__arrow {
            display: none;
        }
    }
}


/* ----------------------------------------------------------
   動きを減らす設定の人には拡大・色の切替を止める
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .cpt-icon__circle,
    .cpt-tile__img,
    .cpt-tile__img img,
    .cpt-jump__btn {
        transition: none;
    }

    .cpt-tile:hover .cpt-tile__img img {
        transform: none;
    }
}