@charset "UTF-8";

/* ===================================================
   Step 00: ブラウザの標準設定リセットと計算ルールの統一
=================================================== */
*,
*::before,
*::after {
    box-sizing: border-box; /* 箱のサイズにpaddingを内包させる魔法 */
}

[hidden] {
    display: none !important; /* hidden属性がdisplay:flexなどに負けないよう強制 */
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.6;
    color: #222;
    background: #fff;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ===================================================
   ページ上部へ戻るボタン
   JS（scrollTop.js）が.is-visibleクラスを付け外しして
   表示・非表示を切り替える
=================================================== */
.scroll-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}

.scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
}

/* ===================================================
   リサイズ中だけ一時的にアニメーションを止めるための目印クラス
   （hamburger.js / catalogDropdown.jsがウィンドウのリサイズ中だけ付け外しする）

   PC⇄タブレットの境目をまたいで「ドロワーのposition:fixed」や
   「CATALOGドロップダウンのopacity/position」が切り替わる瞬間、
   transitionが効いたままだと前の状態から新しい状態へ0.2〜0.3秒かけて
   動いてしまい、ドロワーやドロップダウンが一瞬見えてから消える
   チラつきの原因になる。リサイズ中だけ!importantでtransitionを止めて、
   操作が終わったらこのクラスを外し、開閉時のアニメーションは
   そのまま機能させる。
   ::before/::after（CATALOGの吹き出し矢印）や、子要素の.primary-nav__submenu
   にも効くようにセレクタを足してある。 */
.js-no-transition,
.js-no-transition::before,
.js-no-transition::after,
.js-no-transition .primary-nav__submenu {
    transition: none !important;
}

/* =========================================================
   サイトヘッダー（共通コンポーネント）

   ★基本の考え方★
   ・PC（1025px以上）の見た目を「デフォルト」としてここに書く
   ・スマホ（767.98px以下）／タブレット（768〜1024px）は、
     このセクションの一番下にある専用メディアクエリで上書きする
   ・本サイトはヘッダー／メインビジュアル／フッターすべて
     「1024px以下＝スマホと同じ簡易表示」に統一する方針のため、
     タブレット側の中身はスマホ用とほぼ同じになる
========================================================= */

/* 1. ヘッダー外枠（背景色） */
.site-header {
    background-color: #00794a;
}

/* ドロワーメニュー専用の要素（ロゴヘッダー／区切り線／SNS・cart行／下部の大きいロゴ／
   CATALOG項目の＞矢印）はPCでは使わないため、ここでまとめて非表示にする。
   スマホ／タブレット側のメディアクエリでdisplayを上書きして表示させる。 */
.primary-nav__drawer-header,
.primary-nav__divider,
.primary-nav__drawer-icons,
.primary-nav__drawer-bottom-logo,
.primary-nav__subitem-arrow {
    display: none;
}

/* 2. ヘッダーの中身：ロゴは左、ナビ＋アイコンは右へ */
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 80px;
    padding: 0 30px;
}

/* 3. 左側：ロゴ */
.site-branding {
    margin: 0;
    line-height: 0;
}

.site-branding__logo {
    width: 46px;
    height: 56px;
}

/* 4. 右側：ナビ＋SNS/cartアイコンのグループ
   Figmaは1920px幅で作成されているため、これを基準（最大）にして、
   「ナビ項目（TOP〜CONTACT）」と「SNS/cartボタン」を1つの括りとして
   画面幅に応じて同じ比率で縮小させる。clamp()のvw部分が比率の本体で、
   下限・上限のpx値はスマホ／Figma側の数値が基準。 */
.site-header__nav-group {
    display: flex;
    align-items: center;
    /* Gap: 40px ÷ 1920px = 2.0833vw（30px→40pxに変更）
       最小値30px＝1440px幅での計算値（縮みすぎを防ぐため、1440px以下では
       ここで止める。文字サイズなど他の項目もすべて1440px基準で揃えている） */
    gap: clamp(30px, 2.0833vw, 40px);
}

/* 5. ハンバーガーボタン（PCでは隠す。見た目の中身はスマホ／タブレット側で指定） */
.hamburger {
    display: none;
    position: relative;
    z-index: 101; /* ドロワーより手前に出し、開いている間も押せるようにする */
}

.hamburger__line {
    display: block;
    height: 3px;
    background-color: #fff;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 「is-active」が付与された時（メニューを開いた時）、3本線を×に変形させる
   移動量（15px）は、線の太さ3px＋間隔12px＝隣の線との距離と同じにして、
   中央の線の位置にきれいに重なるように合わせている。 */
.hamburger.is-active .hamburger__line:nth-child(1) {
    transform: translateY(15px) rotate(45deg);
}
.hamburger.is-active .hamburger__line:nth-child(2) {
    opacity: 0;
}
.hamburger.is-active .hamburger__line:nth-child(3) {
    transform: translateY(-15px) rotate(-45deg);
}

/* 6. ナビゲーション本体（PCでは横並びで常時表示） */
.primary-nav__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Gap: 50px ÷ 1920px = 2.604vw（40px→50pxに変更）。最小値38px＝1440px幅での計算値 */
    gap: clamp(38px, 2.604vw, 50px);
}

.primary-nav__item {
    position: relative; /* CATALOGの吹き出し（三角＋ドロップダウン）の基準点にする */
}

.primary-nav__item > a {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 900;
    /* Font: 40px ÷ 1920px = 2.083vw
       最小値30px＝1440px幅での計算値。1440px〜1024px幅の間は30pxのまま縮まない
       （1025px幅で実際に確認済み：ロゴが押し縮められず、ナビも折り返らずに収まる） */
    font-size: clamp(26px, 1.823vw, 35px); /* 35px ÷ 1920px */
    color: #e56c46;
}

/* ホバー：文字が白くなる（Figmaコンポーネントの「Hover」状態） */
.primary-nav__item > a:hover {
    color: #fff;
}

/* クリック：文字が白くなり、オレンジの文字影がつく（Figmaコンポーネントの「Click」状態） */
.primary-nav__item > a:active {
    color: #fff;
    text-shadow: 2px 2px 0 rgba(229, 108, 70, 1);
}

/* 7. CATALOGのドロップダウン（吹き出し型）
   矢印はサブメニュー自身の::before（緑・外枠）と::after（オレンジ・内側）で描く。
   サブメニューに乗せることで底辺が外枠上端に必ず密着し、幅変化による隙間が出ない。 */

/* JSが付けるis-openクラスで、ドロップダウン本体をフェード表示させる（矢印は submenu 側で制御） */

.primary-nav__item--has-children .primary-nav__submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    /* Margin-top: 8px ÷ 1920px = 0.417vw。最小値6px＝1440px幅での計算値 */
    margin-top: clamp(6px, 0.417vw, 8px);
    transform: translate(-50%, -8px);
    /* Padding: 18px ÷ 1920px = 0.9375vw（上下のみ。左右は0）。最小値13.5px＝1440px幅での計算値 */
    padding: clamp(13.5px, 0.9375vw, 18px) 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: #e56c46;
    /* Border: 4px ÷ 1920px = 0.208vw。最小値3px＝1440px幅での計算値 */
    border-width: clamp(3px, 0.208vw, 4px);
    border-style: solid;
    border-color: #00794a;
    /* Min-width: 220px ÷ 1920px = 11.458vw。最小値165px＝1440px幅での計算値 */
    min-width: clamp(165px, 11.458vw, 220px);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* 開いた時：フェードインしながら少し下にスライドする */
.primary-nav__item--has-children.is-open .primary-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* 三角（吹き出し矢印）：clip-pathで描く
   border-trickは「透明な辺」があるためサブメニューに重ねると緑が透けるバグが出る。
   clip-path: polygon(50% 0%, 100% 100%, 0% 100%) を使うと辺が透明にならず
   何pxでも安全に重ねられる。
   ::before(緑)の底辺を緑ボーダーに2px食い込ませ、
   ::after(オレンジ)の底辺をオレンジ内側コンテンツに2px食い込ませることで
   幅変化によるサブピクセル丸め誤差の隙間がゼロになる。 */
.primary-nav__item--has-children .primary-nav__submenu::before {
    content: "";
    position: absolute;
    /* 50px ÷ 1920px = 2.604vw; min = 24px */
    width: clamp(26px, 2.604vw, 50px);
    /* 23px ÷ 1920px = 1.198vw; min = 16px */
    height: clamp(16px, 1.198vw, 23px);
    background: #00794a;
    /* 底辺を緑ボーダーに2px食い込ませる: border_width(4px) - 2px = 2px above padding top */
    bottom: calc(100% + clamp(1px, 0.104vw, 2px));
    left: 50%;
    transform: translateX(-50%);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    pointer-events: none;
    z-index: 1;
}

.primary-nav__item--has-children .primary-nav__submenu::after {
    content: "";
    position: absolute;
    /* 42px ÷ 1920px = 2.188vw; min = 21px */
    width: clamp(23px, 2.188vw, 42px);
    /* 19px ÷ 1920px = 0.990vw; min = 14px */
    height: clamp(14px, 0.990vw, 19px);
    background: #e56c46;
    /* 底辺をオレンジpadding内に2px食い込ませる（隙間ゼロ保証） */
    bottom: calc(100% - 2px);
    left: 50%;
    transform: translateX(-50%);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    pointer-events: none;
    z-index: 2;
}

.primary-nav__subitem > a {
    display: block;
    /* Padding: 16px ÷ 1920px = 0.833vw、8px ÷ 1920px = 0.417vw。最小値12px・6px＝1440px幅での計算値 */
    padding: clamp(12px, 0.833vw, 16px) clamp(6px, 0.417vw, 8px);
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    /* Font: 26px ÷ 1920px = 1.354vw。最小値20px＝1440px幅での計算値 */
    font-size: clamp(20px, 1.354vw, 26px);
    color: #fff;
    text-align: center;
}

/* ホバー：背景が白、文字が緑に反転する */
.primary-nav__subitem > a:hover {
    background-color: #fff;
    color: #00794a;
}

/* 8. 右側：SNS/cartアイコン */
.site-header__icons {
    display: flex;
    align-items: center;
    /* Gap: 18px ÷ 1920px = 0.9375vw */
    gap: clamp(11px, 0.9375vw, 18px);
    margin: 0;
}

.site-header__icon a {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* InstagramアイコンとXアイコン：1色SVGをmask-imageで型取りして白く表示
   （クリックでオレンジに変わる。ホバー状態はFigmaに定義なし＝即時切り替え） */
.site-header__icon-img--instagram,
.site-header__icon-img--x {
    display: block;
    /* 38px ÷ 1920px = 1.9792vw（Figma40pxからH-2px・比率維持のためW-2pxも） */
    width: clamp(28px, 1.9792vw, 38px);
    height: clamp(28px, 1.9792vw, 38px);
    background-color: #fff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.site-header__icon-img--instagram {
    -webkit-mask-image: url("../images/Instagram_Glyph_White.svg");
    mask-image: url("../images/Instagram_Glyph_White.svg");
}

.site-header__icon-img--x {
    -webkit-mask-image: url("../images/x-logo-white.svg");
    mask-image: url("../images/x-logo-white.svg");
}

/* Instagram・Xアイコン クリック：オレンジに変わる（Figmaの「Click」状態） */
.site-header__icon--instagram a:active .site-header__icon-img--instagram,
.site-header__icon--x a:active .site-header__icon-img--x {
    background-color: #e56c46;
}

/* cartアイコン：1色SVGをmask-imageで型取りして白で表示 */
.site-header__icon-img--cart {
    display: block;
    /* width: 50px ÷ 1920px = 2.604vw、height: 41px ÷ 1920px = 2.135vw */
    width: clamp(37px, 2.604vw, 50px);
    height: clamp(28px, 2.0313vw, 39px); /* Figma41pxからH-2px */
    background-color: #fff;
    -webkit-mask-image: url("../images/cart03.svg");
    mask-image: url("../images/cart03.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* cartアイコン クリック：オレンジに変わる（Figmaの「Click」状態） */
.site-header__icon--shop a:active .site-header__icon-img--cart {
    background-color: #e56c46;
}

/* ===== スマホ用（767.98px以下）：ヘッダーをハンバーガー＋右からのドロワーに切り替え ===== */
@media screen and (max-width: 767.98px) {
    /* gap:0で上書き：PC用のgap:24pxは「ロゴ／ハンバーガー／nav-group」の3つの
       隙間すべてに効いてしまい、見た目が無いnav-group（中身はドロワーに移動済み）
       との間にも余分な24pxが入り、ハンバーガーが右端まで届かなくなるため。 */
    /* ドロワーのヘッダー（.primary-nav__drawer-header）と同じ80pxに固定する */
    .site-header__inner {
        gap: 0;
        height: 80px;
        padding: 16px 24px;
    }

    /* ドロワーメニューのヘッダーロゴ（.primary-nav__drawer-logo）と同じサイズに揃える */
    .site-branding__logo {
        width: 46px;
        height: 56px;
    }

    /* ハンバーガーボタンを表示する */
    /* margin-left: autoで、ヘッダー内の余ったスペースを左側に集めて右端に押し出す
       （ナビ用の.site-header__nav-groupは中身が隠れていても枠としては残るため、
       これが無いとjustify-content:space-betweenの計算でハンバーガーが右端に
       届かず、少し内側に寄って見えてしまう）。
       高さは36px（ロゴの見た目の高さ約49pxの2/3強）を確保。 */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        width: 36px;
        height: 36px;
        margin-left: auto;
    }

    /* ナビ本体を、右からスライドして出てくるドロワーに変える
       transitionはここに付けたままでよいが、PC⇄タブレットの境目をまたいだ瞬間にも
       同じtransitionが働いてしまい、ドロワーが一瞬見えてから消えるチラつきが起きる。
       そのため、リサイズ中だけ.js-no-transitionを付けてtransitionを止める
       （hamburger.js側で制御。開閉時のアニメーションには影響しない）。
       背景色はFigmaのドロワーデザイン準拠でオレンジに変更（旧：グリーン）。 */
    .primary-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        width: min(280px, 80vw);
        height: 100vh;
        background-color: #e56c46;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 100;
    }

    /* JSが付けるis-activeクラスで、ドロワーを画面内にスライドさせる */
    .primary-nav.is-active {
        transform: translateX(0);
    }

    /* ドロワー専用のヘッダー（ロゴ）：メインヘッダーと同じ高さ100px・グリーン背景 */
    .primary-nav__drawer-header {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        /* 高さ80px：通常時のハンバーガー側ヘッダー（.site-header__inner）の
           実際の高さと揃えている */
        height: 80px;
        padding: 2px 25px;
        background-color: #00794a;
    }

    .primary-nav__drawer-logo {
        width: 46px;
        height: 56px;
    }

    /* 背景の半透明の幕（ドロワーを開いている間だけ表示） */
    .nav-overlay {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s;
        z-index: 90;
    }

    .nav-overlay.is-active {
        opacity: 1;
        visibility: visible;
    }

    /* ドロワーを開いている間、背面の本文がスクロールしないようにする */
    body.is-nav-open {
        overflow: hidden;
    }

    /* ドロワー内は縦並びのリストにする。項目同士の隙間は使わず、
       各項目（.primary-nav__item > a）自体のpaddingで間隔を作る。 */
    .primary-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 20px 0 0;
    }

    /* デフォルトは白文字、ホバー時はグリーン文字（Figmaの色指定に合わせて
       PC用のオレンジ文字／白ホバーから上書きする。背景がオレンジになったため）。
       上下のpaddingを10px→16pxにして、項目同士の間隔を広くしている。 */
    .primary-nav__item > a {
        padding: 16px 25px;
        font-family: "M PLUS 1", sans-serif;
        font-size: 24px;
        color: #fff;
    }

    .primary-nav__item > a:hover {
        color: #00794a;
    }

    .primary-nav__item > a:active {
        color: #00794a;
        text-shadow: none;
    }

    /* CATALOGの見出し文字は、展開中であることを示すため常にグリーン（Figma準拠） */
    .js-catalog-toggle {
        color: #00794a;
    }

    /* CATALOGの吹き出し矢印（PC専用の三角アイコン）はここでは表示しない */
    .primary-nav__item--has-children::before,
    .primary-nav__item--has-children::after,
    .primary-nav__item--has-children .primary-nav__submenu::before,
    .primary-nav__item--has-children .primary-nav__submenu::after {
        display: none;
    }

    /* ドロップダウンではなく、常に開いた状態の縦並びリストとして表示する。
       左の余白を45px（CATALOGの25pxより20px深く）にして、CATALOGの中身だと
       わかるようにインデントしている。項目間の縦の隙間は10px。
       .is-open時のtransformはPC専用ルール（.is-open .primary-nav__submenu）の方が
       詳細度（セレクタの強さ）が高く、ここでのtransform:noneより優先されてしまうため、
       .is-openの形でも明示的に上書きする。 */
    .primary-nav__item--has-children .primary-nav__submenu,
    .primary-nav__item--has-children.is-open .primary-nav__submenu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        background-color: transparent;
        border: none;
        min-width: 0;
        padding: 0 25px 0 45px;
        margin-top: 5px;
        gap: 2px;
    }

    /* 矢印（＞）とテキストを横並びにする */
    .primary-nav__subitem > a {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 0;
        font-family: "M PLUS 1", sans-serif;
        font-weight: 700;
        font-size: 18px;
        color: #fff;
        text-align: left;
    }

    .primary-nav__subitem > a:hover {
        background-color: transparent;
        color: #00794a;
    }

    /* ＞アイコン：cartアイコンと同じmask-imageの手法で、文字色の変化と
       連動させて色を切り替える（白→ホバーでグリーン）。
       ホバーしている項目だけ見せるため、通常時はopacity:0で透明にしておく
       （display:noneにすると、表示時に文字の位置がガタつくため、透明にして
       場所だけ確保する方式にしている）。 */
    .primary-nav__subitem-arrow {
        display: block;
        flex-shrink: 0;
        width: 8px;
        height: 10px;
        background-color: #00794a;
        opacity: 0;
        -webkit-mask-image: url("../images/drawer-arrow.svg");
        mask-image: url("../images/drawer-arrow.svg");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .primary-nav__subitem > a:hover .primary-nav__subitem-arrow {
        opacity: 1;
    }

    /* ドロワー専用の区切り線（メインナビとSNS/cart行の間） */
    .primary-nav__divider {
        display: block;
        flex-shrink: 0;
        border: none;
        border-top: 2px solid #fff;
        margin: 20px 0 0;
    }

    /* SNS/cart行（スマホ用ドロワー） */
    .primary-nav__drawer-icons {
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        gap: 20px;
        padding: 10px 25px;
        margin-top: 20px;
    }

    .primary-nav__drawer-icon a {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* InstagramアイコンとXアイコン：ドロワー用（固定サイズ） */
    .primary-nav__drawer-icon-img--instagram,
    .primary-nav__drawer-icon-img--x {
        display: block;
        width: 38px;
        height: 38px;
        background-color: #fff;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .primary-nav__drawer-icon-img--instagram {
        -webkit-mask-image: url("../images/Instagram_Glyph_White.svg");
        mask-image: url("../images/Instagram_Glyph_White.svg");
    }

    .primary-nav__drawer-icon-img--x {
        -webkit-mask-image: url("../images/x-logo-white.svg");
        mask-image: url("../images/x-logo-white.svg");
    }

    /* Instagram・Xアイコン クリック：グリーンに変わる（ドロワー内はSNS・cart全て同じグリーン） */
    .primary-nav__drawer-icon--instagram a:active .primary-nav__drawer-icon-img--instagram,
    .primary-nav__drawer-icon--x a:active .primary-nav__drawer-icon-img--x {
        background-color: #00794a;
    }

    /* cartアイコン：ドロワー用（固定サイズ） */
    .primary-nav__drawer-icon-img--cart {
        display: block;
        width: 50px;
        height: 39px;
        background-color: #fff;
        -webkit-mask-image: url("../images/cart03.svg");
        mask-image: url("../images/cart03.svg");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .primary-nav__drawer-icon--shop a:active .primary-nav__drawer-icon-img--cart {
        background-color: #00794a;
    }

    /* 下部の大きいロゴ（装飾用） */
    .primary-nav__drawer-bottom-logo {
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        padding: 25px;
        margin-top: 20px;
    }

    .primary-nav__drawer-bottom-logo img {
        width: 157px;
        height: 190px;
    }

    /* SNS/cartアイコンはメインヘッダー内では隠す（ドロワー側の.primary-nav__drawer-iconsに表示） */
    .site-header__icons {
        display: none;
    }
}

/* ===== タブレット用（768px〜1024px）：本サイトはスマホと同じ簡易表示に統一 =====
   Figmaにタブレット専用カンプが無く、かつヘッダー／メインビジュアル／フッターの
   切り替えラインを1024pxに統一する方針のため、内容はスマホ用と同じにする。
   タブレットで実際に崩れる箇所が見つかった場合のみ、ここに追記・上書きする。 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* gap:0で上書き：PC用のgap:24pxは「ロゴ／ハンバーガー／nav-group」の3つの
       隙間すべてに効いてしまい、見た目が無いnav-group（中身はドロワーに移動済み）
       との間にも余分な24pxが入り、ハンバーガーが右端まで届かなくなるため。 */
    /* ドロワーのヘッダー（.primary-nav__drawer-header）と同じ80pxに固定する */
    .site-header__inner {
        gap: 0;
        height: 80px;
        padding: 16px 24px;
    }

    /* ドロワーメニューのヘッダーロゴ（.primary-nav__drawer-logo）と同じサイズに揃える */
    .site-branding__logo {
        width: 46px;
        height: 56px;
    }

    /* margin-left: autoで、ヘッダー内の余ったスペースを左側に集めて右端に押し出す
       （ナビ用の.site-header__nav-groupは中身が隠れていても枠としては残るため、
       これが無いとjustify-content:space-betweenの計算でハンバーガーが右端に
       届かず、少し内側に寄って見えてしまう）。
       高さは36px（ロゴの見た目の高さ約49pxの2/3強）を確保。 */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        width: 36px;
        height: 36px;
        margin-left: auto;
    }

    .primary-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        width: min(280px, 80vw);
        height: 100vh;
        background-color: #e56c46;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 100;
    }

    .primary-nav.is-active {
        transform: translateX(0);
    }

    .primary-nav__drawer-header {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        height: 80px;
        padding: 2px 25px;
        background-color: #00794a;
    }

    .primary-nav__drawer-logo {
        width: 46px;
        height: 56px;
    }

    .nav-overlay {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s;
        z-index: 90;
    }

    .nav-overlay.is-active {
        opacity: 1;
        visibility: visible;
    }

    body.is-nav-open {
        overflow: hidden;
    }

    .primary-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 20px 0 0;
    }

    .primary-nav__item > a {
        padding: 16px 25px;
        font-family: "M PLUS 1", sans-serif;
        font-size: 24px;
        color: #fff;
    }

    .primary-nav__item > a:hover {
        color: #00794a;
    }

    .primary-nav__item > a:active {
        color: #00794a;
        text-shadow: none;
    }

    .js-catalog-toggle {
        color: #00794a;
    }

    .primary-nav__item--has-children::before,
    .primary-nav__item--has-children::after,
    .primary-nav__item--has-children .primary-nav__submenu::before,
    .primary-nav__item--has-children .primary-nav__submenu::after {
        display: none;
    }

    .primary-nav__item--has-children .primary-nav__submenu,
    .primary-nav__item--has-children.is-open .primary-nav__submenu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        background-color: transparent;
        border: none;
        min-width: 0;
        padding: 0 25px 0 45px;
        margin-top: 5px;
        gap: 2px;
    }

    .primary-nav__subitem > a {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 0;
        font-family: "M PLUS 1", sans-serif;
        font-weight: 700;
        font-size: 18px;
        color: #fff;
        text-align: left;
    }

    .primary-nav__subitem > a:hover {
        background-color: transparent;
        color: #00794a;
    }

    .primary-nav__subitem-arrow {
        display: block;
        flex-shrink: 0;
        width: 8px;
        height: 10px;
        background-color: #00794a;
        opacity: 0;
        -webkit-mask-image: url("../images/drawer-arrow.svg");
        mask-image: url("../images/drawer-arrow.svg");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .primary-nav__subitem > a:hover .primary-nav__subitem-arrow {
        opacity: 1;
    }

    .primary-nav__divider {
        display: block;
        flex-shrink: 0;
        border: none;
        border-top: 2px solid #fff;
        margin: 20px 0 0;
    }

    .primary-nav__drawer-icons {
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        gap: 20px;
        padding: 10px 25px;
        margin-top: 20px;
    }

    .primary-nav__drawer-icon a {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .primary-nav__drawer-icon-img--instagram,
    .primary-nav__drawer-icon-img--x {
        display: block;
        width: 38px;
        height: 38px;
        background-color: #fff;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .primary-nav__drawer-icon-img--instagram {
        -webkit-mask-image: url("../images/Instagram_Glyph_White.svg");
        mask-image: url("../images/Instagram_Glyph_White.svg");
    }

    .primary-nav__drawer-icon-img--x {
        -webkit-mask-image: url("../images/x-logo-white.svg");
        mask-image: url("../images/x-logo-white.svg");
    }

    .primary-nav__drawer-icon--instagram a:active .primary-nav__drawer-icon-img--instagram,
    .primary-nav__drawer-icon--x a:active .primary-nav__drawer-icon-img--x {
        background-color: #00794a;
    }

    .primary-nav__drawer-icon-img--cart {
        display: block;
        width: 50px;
        height: 39px;
        background-color: #fff;
        -webkit-mask-image: url("../images/cart03.svg");
        mask-image: url("../images/cart03.svg");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .primary-nav__drawer-icon--shop a:active .primary-nav__drawer-icon-img--cart {
        background-color: #00794a;
    }

    .primary-nav__drawer-bottom-logo {
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        padding: 25px;
        margin-top: 20px;
    }

    .primary-nav__drawer-bottom-logo img {
        width: 157px;
        height: 190px;
    }

    .site-header__icons {
        display: none;
    }
}

/* =========================================================
   ヒーロー（FV）セクション

   ★基本の考え方★
   ヘッダーと同じく、PC（1025px以上）をデフォルトとしてここに書き、
   スマホ／タブレットはセクション最後のメディアクエリで上書きする。
========================================================= */

/* 1. 外側の大きな箱 */
.hero {
    background-color: #fff;
    padding: 90px 0;
    overflow: hidden;
}

/* 2. 中央寄せの内側コンテナ（最大1200px、Figmaの中身基準幅） */
.hero__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* 3. ロゴ（左）とパターン柄（右）を横並びにするラッパー */
.hero__fv {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5%;
}

/* 4. 左側：ロゴ（Figma更新：495px→412pxに縮小。412px ÷ 1200px = 34.33%を上限にした可変幅） */
.hero__logo {
    flex: 0 1 34.33%;
    max-width: 412px;
}

.hero__logo img {
    width: 100%;
}

/* 5. 右側：パターン柄＋What's newカード＋CTAの土台
   チェック柄はただの背景画像なので、別の<div>を重ねるのではなく
   .hero__visual自体のbackground-imageとして指定する（シンプルな構成にする）。
   position: relativeにして、内側のカード類（What's new／CTA）を絶対配置で
   重ねる基準点にする。 */
.hero__visual {
    position: relative;
    flex: 0 1 42%;
    max-width: 500px;
    aspect-ratio: 5 / 6; /* Figmaの500×600比率を維持する */
    min-height: 460px; /* 【★ 320px以下の極端に狭い画面で、中の「What's new」とボタン類の
        文字が折り返んで縦に長くなり、箱からはみ出して重なってしまうのを防ぐための下限。
        通常の幅ではaspect-ratioの方が大きい値になるので、ここは効かない ★】 */
    background-color: #fff;
    background-image: url("../images/200percent.png");
    background-repeat: repeat;
    background-size: 40%; /* Figma更新：60%→40%に縮小 */
    background-position: center top;
}

/* 6. 「What's new?」カード：パターン柄の左上に重ねて配置
   left/widthは元のFigma値（x:50,width:400 ÷ 500px幅の箱）に合わせて
   10%/80%に修正（実装時の誤差で8%/70%になっていたのを修正） */
.hero__whatsnew {
    position: absolute;
    top: 8%;
    left: 10%;
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* フォントサイズの下限は、767.98px以下（スマホ用）と同じ値にして、768px境界の前後で
   見た目が急に変わらないようにしている（タブレット幅はPCデザインの比例縮小として扱う方針） */
.hero__whatsnew-title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 900;
    font-size: clamp(22px, 1.4583vw, 28px); /* 28px ÷ 1920px = 1.4583vw */
    color: #000;
}

.hero__whatsnew-divider {
    border: none;
    border-top: 2px solid #000;
    margin: 0;
}

.hero__whatsnew-label,
.hero__whatsnew-date {
    font-family: "M PLUS 1p", sans-serif;
    font-size: clamp(16px, 0.9375vw, 18px); /* 18px ÷ 1920px = 0.9375vw */
    color: #000;
}

.hero__whatsnew-label {
    font-weight: 800;
}

.hero__whatsnew-date {
    font-weight: 500;
}

/* 7. What'snewの複数件表示：管理画面の「表示件数設定」で2件以上表示させた場合、
   1件＝.hero__whatsnew-entry として縦に並ぶ（Figmaには1件表示の状態しかないため、
   複数件表示時の余白はこちらで決めた値。見た目が気になる場合は調整可） */
.hero__whatsnew-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hero__whatsnew-entry {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero__whatsnew-comment {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-size: clamp(13px, 0.7292vw, 14px); /* 14px ÷ 1920px = 0.7292vw */
    color: #555;
    /* 【★ CSS上の余白は.hero__whatsnew-dateと揃っているが、日付側の先頭が
       【 】（隅付き括弧）で、括弧の字形は枠の左端より少し内側から描かれるため、
       普通のひらがなで始まるコメント側の方が見た目に左へ飛び出て見える。
       これを補正するための目視調整（Figmaに根拠となる数値はない） ★】 */
    margin-left: 0.3em;
}

/* 背景のチェック柄と文字が重なって読みづらい問題への対応：
   文字自体には手を加えず、text-shadowで白い縁取りを8方向に薄く敷くことで
   「文字の後ろにだけ白いアウトラインが乗る」状態を作っている（文字そのものは
   ぼやけない）。What'snewカード内の全テキストに共通で適用。 */
.hero__whatsnew-comment {
    text-shadow:
        1px 1px 0 #fff,
        -1px 1px 0 #fff,
        1px -1px 0 #fff,
        -1px -1px 0 #fff,
        0 1px 0 #fff,
        0 -1px 0 #fff,
        1px 0 0 #fff,
        -1px 0 0 #fff;
}

/* 8. 説明文＋BLOG/EVENT ITEMSボタン：パターン柄の下寄りに重ねて配置
   Figmaでは「パターン枠（500×600）の下端から50px(8.333%)」の位置に固定されている。
   topではなくbottomで指定しておくことで、スマホ表示でボタンなどの文字サイズが変わって
   コンテンツの高さが変化しても、枠の下端からの余白はFigma通りに保たれたまま、
   「What's new」カードとの間のGapだけが自動で縮む形になり、枠からはみ出さなくなる。 */
.hero__cta {
    position: absolute;
    bottom: 8.333%; /* 50px ÷ 600px = 8.333% */
    left: 50%;
    width: 80%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.hero__cta-text {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;
    font-size: clamp(14px, 0.8333vw, 16px); /* 16px ÷ 1920px = 0.8333vw */
    color: #000;
}

/* Figma更新：ボタンの高さ80px→60px、文字サイズ40px→28pxに変更
   max-width:250pxで頭打ちになっているため、PC〜タブレット幅（1920px〜768px）の間は
   ボックスの横幅自体が変化しない。箱が縮まないのに文字だけclamp()で縮める必要はないため、
   高さ・文字サイズは固定値にしている（767.98px以下のスマホ用は下の上書きで別途調整） */
.hero__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 250px;
    height: 60px;
    background-color: #880000;
    color: #fff;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-size: 28px;
}

/* 【★ ボタンのホバー／クリック：Figma側はどちらも同じ見た目（背景色はそのまま、
   文字色だけ白→オレンジに変化）。:focusはマウスを使わないキーボード操作の人のために
   ホバーと同じ見た目を追加している（Figmaには無いがアクセシビリティ対応として付与） ★】 */
.hero__btn:hover,
.hero__btn:focus,
.hero__btn:active {
    color: #e56c46;
}

/* ===== スマホ用（767.98px以下）：ロゴ→パターン柄を縦積みにする ===== */
@media screen and (max-width: 767.98px) {
    .hero {
        padding: 40px 16px;
    }

    .hero__fv {
        flex-direction: column;
        gap: 32px;
    }

    .hero__logo {
        flex: none;
        width: 100%;
        max-width: 280px;
    }

    .hero__visual {
        flex: none;
        width: 100%;
        max-width: 400px;
    }

    /* What's newカード／CTAは、PCと同じく「パターン柄の上に重ねて表示」を維持する
       （position:absoluteなどはPCデフォルトのまま引き継ぐので、ここでは上書きしない）。
       文字サイズ（whatsnew-title／whatsnew-label・date／cta-text）は、PC側のclamp()の
       下限が既にこのスマホ用の数値と同じ値になっているため、ここで個別に上書きしなくても
       自動でこの大きさになる（二重管理を避けるため、ここでは書かない）。
       hero__btnも同様に、max-width:250pxで頭打ちのためボックスの大きさが変わらず、
       PCデフォルトの固定値（高さ60px・文字28px）のままで収まるので上書き不要。 */
}

/* ===== タブレット用（768px〜1024px）：専用の上書きはしない =====
   このサイトの方針：タブレット幅はスマホの縦積みレイアウトではなく、
   「PCデザイン（ロゴとパターン柄の横並び）をそのまま比例縮小したもの」として扱う。
   そのため、上のPC用clamp()がそのまま768pxまで効き続ける形にして、
   ここでは何も上書きしない（767.98px以下になった瞬間だけ、上のスマホ用に切り替わる）。 */

/* =========================================================
   サイトフッター

   ★基本の考え方★
   ヘッダー／ヒーローと同じく、PC（1025px以上）をデフォルトとしてここに書き、
   スマホ／タブレットはセクション最後のメディアクエリで上書きする。
========================================================= */
.site-footer {
    background-color: #00794a;
}

/* PRIVACYリンクは左、コピーライトは右に振り分ける（Figmaの「footer帯」コンポーネント準拠）
   左右の余白50pxはclamp()で768px幅まで比例縮小する（768px時：50px×768÷1920px=20px） */
.site-footer__inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px clamp(20px, 2.604vw, 50px); /* 50px ÷ 1920px = 2.604vw */
}

/* フォントサイズの下限は、767.98px以下（スマホ用）の文字サイズと同じ値にして、
   768px境界をまたいでも見た目が急に変わらないようにしている
   【★ Figma実データで確認：PRIVACY=40px／コピーライト=28px（以前は仮の数値だった） ★】 */
.site-footer__privacy {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 900;
    font-size: clamp(20px, 1.5625vw, 30px); /* 30px ÷ 1920px = 1.5625vw */
    color: #e56c46;
}

/* PRIVACYのホバー／クリックは、ヘッダーナビの項目（.primary-nav__item > a）と
   全く同じ仕組み（ホバー：白文字／クリック：白文字＋オレンジの文字影） */
.site-footer__privacy:hover {
    color: #fff;
}

.site-footer__privacy:active {
    color: #fff;
    text-shadow: 2px 2px 0 rgba(229, 108, 70, 1);
}

.site-footer__copyright {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-size: 14px; /* 最小値と最大値が同じ14pxになったため、clamp()ではなく固定値にした */
    color: #e56c46;
}

/* ===== スマホ用（767.98px以下）：PRIVACY・コピーライトを縦積みにする ===== */
@media screen and (max-width: 767.98px) {
    .site-footer__inner {
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        padding: 20px 24px;
    }

    .site-footer__privacy {
        font-size: 20px;
    }

    .site-footer__copyright {
        font-size: 14px;
    }
}

/* ===== タブレット用（768px〜1024px）：専用の上書きはしない =====
   このサイトの方針：タブレット幅はPCデザインをそのまま比例縮小して扱う。
   フッターはclamp()でパディングが自動縮小されるため、ここでは何も上書きしない。 ===== */

/* ===================================================================
   ABOUTページ
   =================================================================== */

/* ① ページタイトル帯：パターン背景＋ページ名文字（ABOUT・CONTACTページで共通使用） */
.page-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    background-image: url("../images/checker-bold.png");
    background-repeat: repeat;
    background-size: 84px;
    background-position: center center;
}

.page-hero__title {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 900;
    font-size: 28px;
    color: #00794a;
    margin: 0;
}

/* ② プロフィールセクション */
.about-profile {
    padding: clamp(40px, 4.6875vw, 90px) 0; /* 上下同値 90px ÷ 1920px */
    background-color: #fff;
}

.about-profile__inner {
    width: 62.5vw; /* 1200px ÷ 1920px — ビューポートに比例して縮小 */
    max-width: 1200px;
    margin: 0 auto;
}

.about-profile__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: clamp(300px, 31.25vw, 600px); /* 600px ÷ 1920px */
}

.about-profile__left {
    width: 31.83%; /* 382px ÷ 1200px（rowコンテナ幅基準のflexアイテム） */
    flex-shrink: 0;
}

.about-profile__saru {
    width: 100%; /* 親（about-profile__left）を埋める */
    height: auto;
    display: block;
}

.about-profile__right {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 0.78125vw, 15px); /* 15px ÷ 1920px */
    width: 62.5%; /* 750px ÷ 1200px（コンテナ幅基準） */
}

.about-profile__name {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 900;
    font-size: clamp(30px, 2.6042vw, 50px); /* 50px ÷ 1920px */
    line-height: 1;
    color: #00794a;
    margin: 0;
}

.about-profile__tagline {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 900;
    font-size: clamp(14px, 1.4583vw, 28px); /* 28px ÷ 1920px */
    line-height: 1.5;
    color: #00794a;
    margin: 0;
}

.about-profile__divider {
    border: none;
    border-top: clamp(4px, 0.4167vw, 8px) solid #00794a; /* 8px ÷ 1920px */
    margin: 0;
}

.about-profile__detail {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 0.5208vw, 10px); /* 10px ÷ 1920px */
}

.about-profile__sales {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-size: clamp(14px, 1.0417vw, 20px); /* 20px ÷ 1920px */
    line-height: 1.5;
    color: #00794a;
    margin: 0;
}

/* カートアイコン＋「から販売サイトへ。」の横並びグループ */
.about-profile__sales-inline {
    display: inline-flex;
    align-items: center;
    gap: clamp(3px, 0.2604vw, 5px);
}

/* カートアイコンのリンクラッパー */
.about-profile__cart-link {
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
}

/* カートアイコン：白SVGをmask-imageでオレンジに着色 */
.about-profile__cart {
    display: inline-block;
    flex-shrink: 0;
    width: clamp(20px, 1.5625vw, 30px); /* 30px ÷ 1920px */
    height: clamp(18px, 1.3542vw, 26px); /* 26px ÷ 1920px */
    background-color: #e56c46;
    -webkit-mask-image: url("../images/cart03.svg");
    mask-image: url("../images/cart03.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* 「CATALOGページのFOR EVENTS」のオレンジ下線（文字の後ろに重ねる） */
.about-profile__events-link {
    color: inherit;
    text-decoration: none;
}

.about-profile__underline {
    display: inline-block;
    position: relative;
    z-index: 0;
}
.about-profile__underline::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: clamp(5px, 0.4167vw, 8px); /* 8px ÷ 1920px */
    background-color: #f3a17a;
    z-index: -1;
}

.about-profile__body {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;
    font-size: clamp(13px, 0.9375vw, 18px); /* 18px ÷ 1920px */
    line-height: 1.8;
    color: #00794a;
    text-align: justify;
    margin: 0;
}

.about-profile__catalog-link {
    color: #00794a;
    text-decoration: none;
}

.about-profile__catalog-link strong {
    font-weight: 800;
}

/* ③ PICK UP セクション（SVG3枚を重ねた背景＋コンテンツ） */
.about-pickup {
    position: relative;
    overflow: hidden;
    background-color: #fff;
}

/* about-parts03：最背面SVG。width:100%でセクションの高さが自動確定する */
.about-pickup__bg--03 {
    width: 100%;
    display: block;
}

/* about-parts02：parts03の高さの44.01%の位置から重なる */
.about-pickup__bg--02 {
    position: absolute;
    top: 44.01%; /* 477px ÷ 1084.11px */
    left: 0;
    width: 100%;
}

/* about-parts01：最前面。左17.92%・上60.97%の位置 */
.about-pickup__bg--01 {
    position: absolute;
    top: 60.97%; /* 661px ÷ 1084.11px */
    left: 17.92%; /* 344px ÷ 1920px */
    width: 82.08%; /* 1576px ÷ 1920px */
}

/* コンテンツ全体（PICK UP帯＋3ボックス）：パーセントで位置指定 */
.about-pickup__content {
    position: absolute;
    top: 38.19%; /* 414px ÷ 1084.11px */
    left: 18.75%; /* 360px ÷ 1920px */
    width: 62.5%; /* 1200px ÷ 1920px */
}

/* PICK UP 見出し帯 */
.about-pickup__header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: clamp(60px, 5.208vw, 100px); /* 100px ÷ 1920px */
    background-color: #00794a;
}

.about-pickup__title {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 900;
    font-size: clamp(30px, 2.5vw, 48px); /* 48px ÷ 1920px */
    color: #e56c46;
    margin: 0;
}

/* 3つのボックスエリア */
.about-pickup__items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(30px, 3.125vw, 60px); /* 60px ÷ 1920px */
    background-color: rgba(255, 255, 255, 0.9);
}

/* 各ボックス（300×300のグリーン正方形。後でコンテンツが入る） */
.about-pickup__item {
    width: clamp(150px, 15.625vw, 300px); /* 300px ÷ 1920px */
    height: clamp(150px, 15.625vw, 300px);
    background-color: #00794a;
}

/* ===== Aboutプロフィール縦積み（862px以下） ===== */
@media screen and (max-width: 862px) {

    .about-profile__inner {
        width: auto;
        padding: 0 24px;
    }

    .about-profile__row {
        flex-direction: column;
        align-items: center;
        gap: 54px;
        min-height: unset;
    }

    .about-profile__left {
        width: auto;
    }

    .about-profile__saru {
        width: 200px;
    }

    .about-profile__right {
        width: 100%;
    }

    .about-profile__name {
        font-size: 32px;
    }

    .about-profile__tagline {
        font-size: 18px;
    }

    .about-profile__sales {
        font-size: 15px;
    }

    .about-profile__body {
        font-size: 14px;
    }

}

/* ===== スマホ用（767.98px以下） ===== */
@media screen and (max-width: 767.98px) {
    .page-hero {
        height: 60px;
        background-size: 84px;
    }

    .page-hero__title {
        font-size: 28px;
    }

    .about-profile {
        padding: 40px 0;
    }

    .about-profile__name {
        font-size: 32px;
    }

    .about-profile__tagline {
        font-size: 18px;
    }

    .about-profile__sales {
        font-size: 15px;
    }

    .about-profile__body {
        font-size: 14px;
    }

}

/* ===== About 極小SP（375px以下） ===== */
@media screen and (max-width: 375px) {

    .about-profile__sales {
        font-size: 14px;
    }

    .about-profile__body {
        font-size: 13px;
    }

}

/* ===== スマホ用（767.98px以下）続き ===== */
@media screen and (max-width: 767.98px) {

    /* SP ではPICK UPセクションのSVG絶対配置をリセットし、parts03のみ表示 */
    .about-pickup__bg--02,
    .about-pickup__bg--01 {
        display: none;
    }

    .about-pickup__content {
        position: static;
        width: 100%;
    }

    .about-pickup__items {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .about-pickup__item {
        width: 200px;
        height: 200px;
    }
}

/* ===== タブレット用（768px〜1024px）：専用の上書きはしない =====
   このサイトの方針：タブレット幅はスマホの縦積みレイアウトではなく、
   「PCデザインをそのまま比例縮小したもの」として扱う。
   そのため、上のPC用clamp()がそのまま768pxまで効き続ける形にして、
   ここでは何も上書きしない（767.98px以下になった瞬間だけ、上のスマホ用に切り替わる）。 */

/* ===== 固定ページ汎用（page.php）===== */

.page-content {
    max-width: clamp(600px, 62.5vw, 1200px); /* 1920px基準: 1200px */
    margin: clamp(60px, 6.25vw, 120px) auto;
    padding: 0 clamp(20px, 2.083vw, 40px);
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 3.125vw, 60px);
}

.page-content__title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-size: clamp(22px, 2.292vw, 44px); /* 44px ÷ 1920px */
    color: #00794a;
    margin: 0;
    padding-bottom: clamp(15px, 1.563vw, 30px);
    border-bottom: 3px solid #00794a;
}

.page-content__body {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.083vw, 40px);
}

/* ===== スマホ用（767.98px以下）：専用の上書きはしない =====
   page.phpの固定ページは、max-widthとclamp()で幅・余白が自動調整されるため、
   スマホでも崩れにくい。崩れが見つかった場合はここに追記する。 ===== */

/* ===== タブレット用（768px〜1024px）：専用の上書きはしない =====
   このサイトの方針：タブレット幅はPCデザインをそのまま比例縮小して扱う。
   clamp()がそのまま効き続けるため、ここでは何も上書きしない。 ===== */

/* ===== CONTACTページ ===== */

.contact-section {
    padding: clamp(80px, 8.333vw, 160px) 0; /* 160px ÷ 1920px */
    display: flex;
    justify-content: center;
    background-color: #fff;
}

/* 緑のフォームボックス */
.contact-form-box {
    width: 62.5vw; /* 1200px ÷ 1920px */
    max-width: 1200px;
    background-color: #00794a;
    padding: clamp(20px, 2.083vw, 40px); /* 40px ÷ 1920px */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 2.083vw, 40px);
}

/* ロゴ＋見出し */
.contact-form-box__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 0.521vw, 10px); /* 10px ÷ 1920px */
}

.contact-form-box__saru {
    width: clamp(80px, 8.542vw, 164px); /* 164px ÷ 1920px */
    height: auto;
    display: block;
    filter: brightness(0) invert(1); /* 緑SVGを白に変換 */
}

.contact-form-box__title {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 900;
    font-size: clamp(18px, 1.823vw, 35px); /* 35px ÷ 1920px */
    color: #fff;
    margin: 0;
}

/* 白いフォームエリア */
.contact-form-box__inner {
    width: 100%;
    background-color: #fff;
    /* 左右：768pxで30px→1920pxで160px の線形スケール。段差なし */
    padding: clamp(40px, 6.25vw, 120px) clamp(30px, calc(11.28vw - 56.7px), 160px);
}

/* フォーム全体 */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 3.646vw, 70px); /* フィールド群と送信エリアの間隔 */
}

/* フィールド群 */
.contact-form__fields {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 1.823vw, 35px); /* 35px ÷ 1920px */
}

/* 各フィールド行：グリッドで左列（ラベル）・右列（入力欄）を確実に2列にする */
.contact-form__row {
    display: grid;
    grid-template-columns: clamp(150px, 12.708vw, 244px) 1fr; /* 左列固定 / 右列可変 */
    column-gap: clamp(30px, 5.208vw, 100px); /* 100px ÷ 1920px */
    align-items: center; /* Figma: alignItems center */
}

.contact-form__row--textarea {
    height: clamp(130px, 13.021vw, 250px); /* 250px ÷ 1920px */
}

/* テキストエリア行のみ：ラベルは中央揃え、入力欄は行全体の高さに引き伸ばす */
.contact-form__row--textarea .contact-form__label-group {
    align-self: center;
}

.contact-form__row--textarea .contact-form__input-wrap {
    align-self: stretch;
}

/* ラベルグループ（必須バッジ＋ラベルテキスト）*/
.contact-form__label-group {
    display: grid;
    grid-template-columns: clamp(24px, 2.083vw, 40px) 1fr; /* バッジ幅固定 / ラベルテキスト可変 */
    column-gap: clamp(6px, 0.625vw, 12px); /* 12px ÷ 1920px */
    align-items: center;
}

/* 必須バッジ */
.contact-form__required {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: clamp(24px, 2.083vw, 40px); /* 40px ÷ 1920px */
    height: clamp(14px, 1.146vw, 22px); /* 22px ÷ 1920px */
    border: 1px solid #e56c46;
    color: #e56c46;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 500;
    font-size: clamp(10px, 0.729vw, 14px); /* 14px ÷ 1920px */
    flex-shrink: 0;
    line-height: 1;
}

/* ラベルテキスト */
.contact-form__label {
    color: #00794a;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.25vw, 24px); /* 24px ÷ 1920px */
}

/* 入力欄ラッパー */
.contact-form__input-wrap {
    flex: 1;
}

.contact-form__input-wrap--textarea {
    height: 100%;
}

/* テキスト・メール入力 */
.contact-form__input {
    width: 100%;
    background-color: #00794a;
    border: none;
    outline: none;
    padding: clamp(6px, 0.521vw, 10px); /* 10px ÷ 1920px */
    color: #fff;
    font-family: "M PLUS 1", sans-serif;
    font-size: clamp(12px, 0.833vw, 16px);
}

/* テキストエリア */
.contact-form__textarea {
    width: 100%;
    height: clamp(130px, 13.021vw, 250px); /* CF7中間ラッパーでheight:100%が断ち切られるため行と同じclampを直接指定 */
    background-color: #00794a;
    border: none;
    outline: none;
    padding: clamp(6px, 0.521vw, 10px);
    color: #fff;
    font-family: "M PLUS 1", sans-serif;
    font-size: clamp(12px, 0.833vw, 16px);
    resize: none;
}

/* 送信エリア */
.contact-form__btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 1.042vw, 20px); /* 20px ÷ 1920px */
    width: 100%; /* 親の幅を確実に継承して中央揃えの基準にする */
}

/* プライバシー同意チェック */
.contact-form__privacy {
    display: flex;
    align-items: center;
    gap: clamp(3px, 0.208vw, 4px); /* 4px ÷ 1920px */
    color: #00794a;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    font-size: clamp(12px, 0.938vw, 18px); /* 18px ÷ 1920px */
    cursor: pointer;
}

/* 実checkboxは非表示 */
.contact-form__checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* カスタムチェックボックス */
.contact-form__checkbox {
    display: inline-block;
    position: relative;
    width: clamp(10px, 0.833vw, 16px); /* 16px ÷ 1920px */
    height: clamp(10px, 0.833vw, 16px);
    background-color: #e56c46;
    border: 2px solid #00794a;
    flex-shrink: 0;
}

/* チェックマーク（チェック時に表示） */
.contact-form__checkbox-input:checked + .contact-form__checkbox::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 35%;
    height: 60%;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

/* 送信ボタン */
.contact-form__submit {
    background-color: #e56c46;
    border: 4px solid #00794a;
    color: #fff;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    font-size: clamp(12px, 1.042vw, 20px); /* 20px ÷ 1920px */
    padding: clamp(6px, 0.417vw, 8px) clamp(12px, 1.042vw, 20px);
    cursor: pointer;
}

/* 送信完了メッセージ */
.contact-form-box__sent {
    width: 100%;
    background-color: #fff;
    padding: clamp(40px, 6.25vw, 120px) clamp(30px, 8.333vw, 160px); /* 120px/160px ÷ 1920px */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 2.604vw, 50px); /* 50px ÷ 1920px */
}

.contact-form-box__sent-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 1.823vw, 35px); /* 35px ÷ 1920px */
}

.contact-form-box__sent-icon {
    width: clamp(40px, 4.167vw, 80px); /* 80px ÷ 1920px */
    height: clamp(40px, 4.167vw, 80px);
    flex-shrink: 0;
}

.contact-form-box__sent-title {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 2.083vw, 40px); /* 40px ÷ 1920px */
    color: #00794a;
    margin: 0;
}

.contact-form-box__sent-body {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600;
    font-size: clamp(12px, 1.042vw, 20px); /* 20px ÷ 1920px */
    color: #777777;
    margin: 0;
    line-height: 1.8;
}

/* エラーメッセージ */
.contact-form__error-msg {
    background-color: #fff0f0;
    border-left: 4px solid #c00;
    color: #c00;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 700;
    font-size: clamp(12px, 0.833vw, 16px);
    padding: clamp(10px, 1.042vw, 20px) clamp(14px, 1.458vw, 28px);
    margin-bottom: clamp(16px, 1.667vw, 32px);
}

/* ===== スマホ用（767.98px以下） ===== */
@media (max-width: 767.98px) {

    .contact-section {
        padding: 0;
    }

    .contact-form-box {
        width: 100%;
        max-width: none;
        padding: 40px 0 0; /* Figma: 上40px・左右なし */
        gap: 40px;         /* ヘッダー↔白いフォームエリアの間隔 */
    }

    .contact-form-box__header {
        gap: 10px; /* Figma: ロゴ↔タイトル 10px */
    }

    .contact-form-box__saru {
        width: 164px; /* Figma: 164px（フルサイズ） */
    }

    .contact-form-box__title {
        font-size: 35px; /* Figma: 35px */
    }

    .contact-form-box__inner {
        padding: 35px 20px; /* Figma: 35px 20px */
    }

    .contact-form {
        gap: 40px; /* Figma: フィールド群↔送信エリア 40px */
    }

    .wpcf7-form {
        gap: 40px;
    }

    .contact-form__fields {
        gap: 30px; /* Figma: フィールド間 30px */
    }

    .contact-form__row {
        grid-template-columns: 132px 1fr; /* Figma: ラベル列132px固定 */
        column-gap: 20px;                 /* Figma: ラベル↔入力欄 20px */
    }

    .contact-form__row--textarea {
        height: 130px; /* Figma: 本文欄の高さ 130px */
    }

    .contact-form__label-group {
        grid-template-columns: 26px 1fr; /* Figma: バッジ26px固定 */
        column-gap: 10px;                /* Figma: バッジ↔ラベルテキスト 10px */
    }

    .contact-form__required {
        width: 26px;    /* Figma: 26×16px */
        height: 16px;
        font-size: 9px; /* Figma: 9px */
    }

    .contact-form__label {
        font-size: 12px; /* Figma: 12px SemiBold */
    }

    .contact-form__input {
        height: 20px;    /* Figma: 18px → 20pxに調整 */
        padding: 0 10px; /* 上下0でheight 18pxに収める・左右は10px維持 */
    }

    .contact-form__textarea {
        height: 130px; /* Figma: 130px を直接指定（CF7中間ラッパーがheight:100%チェーンを断ち切るため） */
        padding: 10px;
        resize: none;
    }

    .contact-form__btns {
        gap: 20px; /* Figma: チェック↔送信ボタン 20px */
    }

    /* CF7：プライバシーラベル */
    .wpcf7-acceptance label {
        gap: 10px;       /* Figma: チェックボックス↔テキスト 10px */
        font-size: 14px; /* Figma: 14px */
    }

    /* CF7：送信ボタン */
    .contact-form__submit,
    input[type="submit"].contact-form__submit {
        border-width: 3px; /* Figma: 3px（PC=4px） */
        font-size: 14px;   /* Figma: 14px */
        padding: 8px 10px; /* Figma: 8px 10px */
    }

    /* 送信完了メッセージ */
    .contact-form-box__sent {
        padding: 35px 20px;
    }
}

/* ===== タブレット用（768px〜1024px）：専用の上書きはしない =====
   このサイトの方針：タブレット幅はPCデザインをそのまま比例縮小して扱う。 ===== */

/* ===== CF7（Contact Form 7）固有スタイル ===== */

/* CF7のフォームラッパー：余分なmarginを消す */
.wpcf7 {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* CF7のフォームタグ：フィールド群と送信エリアの間に余白を設ける */
.wpcf7-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: clamp(30px, 3.646vw, 70px); /* フィールド群 ↔ 送信エリアの間隔 */
}

/* フィールドの入力値ラッパー（CF7が自動挿入するspan）*/
.wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* 送信エリア内の同意チェックbox：中央に寄せる */
.contact-form__btns .wpcf7-form-control-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* 各フィールドの入力エラー下メッセージ */
.wpcf7-not-valid-tip {
    display: block;
    color: #c00;
    font-family: "M PLUS 1p", sans-serif;
    font-size: clamp(11px, 0.729vw, 14px);
    margin-top: 4px;
}

/* CF7のプライバシー同意チェックボックス */
.wpcf7-acceptance {
    display: flex;
    align-items: center;
}

.wpcf7-acceptance label {
    display: flex;
    align-items: center;
    gap: 4px; /* Figma: 4px */
    font-family: "M PLUS 1", sans-serif;
    font-weight: 600; /* Figma: SemiBold */
    font-size: clamp(12px, 0.938vw, 18px); /* 18px ÷ 1920px */
    color: #00794a; /* Figma: green */
    cursor: pointer;
}

/* カスタムチェックボックス（Figma: 16×16、オレンジ塗り、緑ボーダー2px） */
.wpcf7-acceptance input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0; /* iOS Safariが自動で付ける角丸を打ち消す */
    width: 16px;
    height: 16px;
    background-color: #e56c46; /* 常時オレンジ */
    border: 2px solid #00794a;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}


.wpcf7-acceptance input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 35%;
    height: 60%;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

/* CF7の送信ボタン（input[type="submit"]で出力される）*/
input[type="submit"].contact-form__submit {
    appearance: none;
    -webkit-appearance: none;
    display: block;    /* margin: autoで確実に中央寄せ */
    margin: 0 auto;
}

/* CF7のスピナー（送信中のくるくる）*/
.wpcf7-spinner {
    display: none;
}

/* CF7の送信結果メッセージエリア：カスタム送信完了UIを使うため非表示 */
.wpcf7-response-output {
    display: none !important;
}

/* ===== スマホ用（767.98px以下）：専用の上書きはしない =====
   CF7固有のラッパー・フォームタグは、CONTACTページのスタイルを継承しているため
   個別の上書きは不要。CONTACTページ側のSP対応に合わせて対応する。 ===== */

/* ===== タブレット用（768px〜1024px）：専用の上書きはしない =====
   このサイトの方針：タブレット幅はPCデザインをそのまま比例縮小して扱う。 ===== */

/* ===== BLOGページ ===== */

/* ① ブログヒーロー */
.blog-hero {
    height: clamp(200px, 20.833vw, 400px); /* 400px ÷ 1920px */
    background-image: url("../images/checker-bold.png");
    background-repeat: repeat;
    background-size: 84px;
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blog-hero__logo {
    width: clamp(113px, 11.813vw, 227px); /* 226.82px ÷ 1920px */
    height: auto;
    display: block;
}

/* ② 帯（緑） */
.blog-obi {
    min-height: clamp(50px, 4.167vw, 80px); /* 80px ÷ 1920px — ヘッダーと同じ高さ */
    background-color: #00794a;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 clamp(16px, 1.563vw, 30px);
}

.blog-obi__text {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 800;
    font-size: clamp(16px, 1.563vw, 30px); /* 30px ÷ 1920px */
    color: #fff;
    margin: 0;
    text-align: center;
    white-space: nowrap;
}

/* ③ メインセクション */
.blog-section {
    padding: clamp(80px, 8.333vw, 160px) 0; /* 160px ÷ 1920px */
    background-color: #fff;
}

.blog-inner {
    width: 62.5vw; /* 1200px ÷ 1920px */
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: clamp(20px, 2.083vw, 40px); /* 40px ÷ 1920px */
}

/* ④ 記事一覧カラム */
.blog-main {
    flex: 1;
    min-width: 0;
}

.blog-card-list {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.042vw, 20px); /* 20px ÷ 1920px — カード間のスペース */
}

/* カード外枠（緑） — 300px ÷ 1920px ≈ 15.625vw で比例縮小 */
.blog-card {
    background-color: #00794a;
    padding: clamp(10px, 1.042vw, 20px); /* 20px ÷ 1920px */
    height: clamp(120px, 15.625vw, 300px); /* 300px ÷ 1920px */
    box-sizing: border-box;
    overflow: hidden;
}

/* カード内枠（白） — カード高さを100%で埋める */
.blog-card__inner {
    background-color: #fff;
    padding: clamp(15px, 1.563vw, 30px); /* 30px ÷ 1920px */
    display: flex;
    align-items: stretch;
    gap: clamp(10px, 1.042vw, 20px); /* 20px ÷ 1920px */
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* サムネイルラッパー（緑） — stretchで高さを内枠に合わせ、aspect-ratio:1で正方形に */
.blog-card__photo-wrap {
    flex-shrink: 0;
    background-color: #00794a;
    padding: 0;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* <a>タグがphoto-wrapを埋めるよう強制 */
.blog-card__photo-wrap a {
    display: block;
    width: 100%;
    height: 100%;
}

.blog-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-card__photo-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #00794a;
}

/* テキストエリア（右列） — fill × fill、縦方向もstretchで埋める */
.blog-card__content {
    display: flex;
    flex-direction: column;
    gap: clamp(3px, 0.26vw, 5px); /* 5px ÷ 1920px */
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.blog-card__title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 900;
    font-size: clamp(14px, 1.458vw, 24px); /* 24px ÷ 1920px */
    line-height: 1.43; /* 40px ÷ 28px */
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.blog-card__title a {
    color: #000;
    text-decoration: none;
}

.blog-card__title a:hover {
    text-decoration: underline;
}

/* 区切り線（オレンジ） */
.blog-card__divider {
    border: none;
    border-top: clamp(3px, 0.417vw, 8px) solid #e56c46; /* 8px ÷ 1920px */
    margin: 0;
}

/* Figmaの「イベント参加」フレーム — タイトル+区切り線の下の残り高さを全て使う */
.blog-card__meta {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: clamp(2px, 0.26vw, 5px) 0; /* 5px 0px ÷ 1920px */
    overflow: hidden;
}

.blog-card__meta-text {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-size: clamp(12px, 0.938vw, 18px); /* 18px ÷ 1920px */
    line-height: 1.67; /* 30px ÷ 18px */
    color: #000;
}

.blog-card__excerpt {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-size: clamp(9px, 0.833vw, 14px); /* 14px ÷ 1920px */
    line-height: 1.75;
    color: #000;
    text-align: justify;
    margin: 0;
    flex: 1;
    overflow: hidden;
}

/* AJAX読み込み中：透過 + クリック不可 */
.blog-main--loading {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* ページネーション（BLOGトップ + 記事ページ共通） */
.blog-pagination {
    margin-top: clamp(20px, 2.083vw, 40px);
}

.blog-pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 1.042vw, 20px); /* 20px ÷ 1920px */
}

.blog-pagination .page-numbers {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 0.833vw, 16px); /* 16px ÷ 1920px */
    line-height: 1.75;
    color: #000;
    text-decoration: none;
}

.blog-pagination .page-numbers:hover {
    color: #00794a;
}

.blog-pagination .page-numbers.current {
    color: #00794a;
    font-weight: 800;
}

.blog-no-posts {
    font-family: "M PLUS 1", sans-serif;
    color: #00794a;
}

/* ==========================================================================
   記事個別ページ（single.php） — Figmaノード 119:1462
   ========================================================================== */

/* 記事カード外枠（緑） */
.single-card {
    background-color: #00794a;
    padding: clamp(10px, 1.042vw, 20px); /* 20px ÷ 1920px */
}

/* 記事カード内枠（白） */
.single-card__inner {
    background-color: #fff;
    padding: clamp(18px, 1.823vw, 35px); /* 35px ÷ 1920px */
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 0.521vw, 10px); /* 10px ÷ 1920px */
}

.single-card__title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 900;
    font-size: clamp(18px, 1.823vw, 35px); /* 35px ÷ 1920px */
    line-height: 1.14; /* 40px ÷ 35px */
    color: #000;
    margin: 0;
}

/* カテゴリ＋日付：区切り線の下・右寄せ */
.single-card__meta {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 0.729vw, 14px); /* 14px ÷ 1920px */
    line-height: 1.75;
    color: #000;
    text-align: right;
    margin: 0;
}

/* 区切り線（オレンジ） */
.single-card__divider {
    border: none;
    border-top: clamp(3px, 0.417vw, 8px) solid #e56c46; /* 8px ÷ 1920px */
    margin: 0;
}

/* 本文エリア */
.single-card__body {
    padding-top: clamp(5px, 0.521vw, 10px); /* 10px ÷ 1920px */
    display: flex;
    flex-direction: column;
    gap: clamp(15px, 1.563vw, 30px); /* 30px ÷ 1920px */
}

/* --------------------------------------------------------------------------
   .entry-content — 記事本文内の各要素スタイル
   （the_content()が出力するh2/p/img/ul/olなどに自動適用）
   -------------------------------------------------------------------------- */

/* h2：緑の縦線＋太字テキスト（Figma: 8px幅の緑バー ＋ 26px ExtraBold） */
.entry-content h2 {
    display: flex;
    align-items: stretch;
    gap: clamp(5px, 0.521vw, 10px); /* 10px ÷ 1920px */
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 1.354vw, 26px); /* 26px ÷ 1920px */
    line-height: 1.15; /* 30px ÷ 26px */
    color: #000;
    margin: 0;
}

.entry-content h2::before {
    content: '';
    display: block;
    width: clamp(4px, 0.417vw, 8px); /* 8px ÷ 1920px */
    background-color: #00794a;
    flex-shrink: 0;
    align-self: stretch;
}

/* h3：オレンジ丸＋白い＞アイコン＋テキスト（Figma: 20×20 #E56C46 circle with white chevron） */
.entry-content h3 {
    display: flex;
    align-items: center;
    gap: clamp(5px, 0.313vw, 6px); /* 6px ÷ 1920px */
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 700;
    font-size: clamp(12px, 1.042vw, 20px); /* 20px ÷ 1920px */
    line-height: 1.5; /* 30px ÷ 20px */
    color: #000;
    margin: 0;
}

.entry-content h3::before {
    content: '';
    display: block;
    width: clamp(12px, 1.042vw, 20px); /* 20px ÷ 1920px */
    height: clamp(12px, 1.042vw, 20px);
    background-image: url('../images/h3-icon.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

/* h4：緑の＞＞アイコン＋テキスト（Figma: green double chevron） */
.entry-content h4 {
    display: flex;
    align-items: center;
    gap: clamp(5px, 0.313vw, 6px); /* 6px ÷ 1920px */
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 700;
    font-size: clamp(11px, 0.938vw, 18px); /* 18px ÷ 1920px */
    line-height: 1.667; /* 30px ÷ 18px */
    color: #000;
    margin: 0;
}

.entry-content h4::before {
    content: '';
    display: block;
    width: 1.07em; /* SVG幅19px ÷ font-size18px × line-height補正 */
    height: 1.667em; /* line-height 1.667 に合わせ、SVG内のchevronが縦中央に来る */
    background-image: url('../images/h4-icon.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

/* h5：テキスト＋オレンジアンダーライン（Figma: 16px ExtraBold + #E56C46 3px line） */
.entry-content h5 {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 700;
    font-size: clamp(10px, 0.833vw, 16px); /* 16px ÷ 1920px */
    line-height: 1.875; /* 30px ÷ 16px */
    color: #000;
    margin: 0;
    text-decoration: underline;
    text-decoration-color: #e56c46;
    text-decoration-thickness: clamp(2px, 0.156vw, 3px); /* 3px ÷ 1920px */
    text-underline-offset: 0.2em;
}

/* h6：Figma未定義のため基本スタイルのみ */
.entry-content h6 {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 700;
    font-size: clamp(10px, 0.833vw, 16px); /* 16px ÷ 1920px */
    line-height: 1.875; /* 30px ÷ 16px */
    color: #000;
    margin: 0;
}

/* 本文テキスト */
.entry-content p {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.833vw, 16px); /* 16px ÷ 1920px */
    line-height: 1.75; /* 28px ÷ 16px */
    text-align: justify;
    color: #000;
    margin: 0;
}

/* 箇条書き（ul）：オレンジ丸ドット（Figma: 6×6px #E56C46 circle + 8px gap） */
.entry-content ul {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.833vw, 16px);
    line-height: 1.75;
    color: #000;
    margin: 0;
    padding-left: clamp(20px, 2.083vw, 40px); /* Figma: 40px */
    list-style: none;
}

.entry-content ul li {
    display: flex;
    align-items: center;
    gap: clamp(5px, 0.417vw, 8px); /* 8px ÷ 1920px */
}

.entry-content ul li::before {
    content: '';
    display: block;
    width: clamp(4px, 0.313vw, 6px); /* 6px ÷ 1920px */
    height: clamp(4px, 0.313vw, 6px);
    background-color: #e56c46;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 番号付きリスト（ol）：標準の数字リスト */
.entry-content ol {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 0.833vw, 16px);
    line-height: 1.75;
    color: #000;
    margin: 0;
    padding-left: clamp(20px, 2.083vw, 40px);
}

/* 要素間の縦スペース（Figma: column gap 30px） */
.entry-content > * + * {
    margin-top: clamp(15px, 1.563vw, 30px); /* 30px ÷ 1920px */
}

/* WordPressエディターのアンダーライン（<u>タグ・インラインstyle）をFigma指定のマーカー線に統一
   色:#F3A17A / 太さ:8px@1920px / 文字の後ろに潜り込む
   box-decoration-break:clone で折り返し複数行にも対応 */
.entry-content u,
.entry-content span[style*="text-decoration: underline"],
.entry-content span[style*="text-decoration:underline"] {
    text-decoration: none !important;
    background-image: linear-gradient(
        to top,
        transparent 1px,
        #f3a17a 1px,
        #f3a17a calc(clamp(5px, 0.417vw, 8px) + 1px),
        transparent calc(clamp(5px, 0.417vw, 8px) + 1px)
    );
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* 画像 */
.entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* 罫線（<hr>）：オレンジ破線（Figmaのセクション区切り線）
   ブログ記事（entry-content）と商品説明欄（catalog-pg__content）で共通 */
.entry-content hr,
.catalog-pg__content hr {
    border: none;
    border-top: 1px dashed #e56c46;
    margin: clamp(8px, 0.625vw, 12px) 0; /* 12px ÷ 1920px */
}

/* リンク（色・下線は後でデザイン確定後に調整） */
.entry-content a {
    color: #00794a;
    text-decoration: underline;
}

.entry-content a:hover {
    text-decoration: none;
}

/* --------- ブログ記事内カスタムパーツ（ショートコードで呼び出し） --------- */

/* ◆ 囲みカード①：緑枠＋白ボディ */
.mou-wrap-green {
    background-color: #00794a;
    padding: clamp(5px, 0.521vw, 10px); /* 10px ÷ 1920px */
}

.mou-wrap-green__inner {
    background-color: #fff;
    padding: clamp(10px, 1.042vw, 20px); /* 20px ÷ 1920px */
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.26vw, 5px); /* 5px ÷ 1920px */
}

.mou-wrap-green .mou-wrap-green__title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-size: clamp(16px, 1.042vw, 20px); /* 20px ÷ 1920px */
    line-height: 1.43;
    color: #000;
    margin: 0;
}

.mou-wrap-green__divider {
    border-top: clamp(3px, 0.313vw, 6px) solid #e56c46; /* 6px ÷ 1920px */
    margin: 0;
}

.mou-wrap-green__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.833vw, 16px); /* 16px ÷ 1920px */
}

.mou-wrap-green__body > * {
    margin: 0 !important;
}

.mou-wrap-green__body > br {
    display: none; /* wpautop が挿入する段落間 <br> を非表示 */
}

.mou-wrap-green__body p {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 300;
}

.mou-wrap-green .mou-wrap-green__subtitle {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 0.938vw, 18px); /* 18px ÷ 1920px */
    line-height: 1.667; /* 30px ÷ 18px */
    color: #000;
    margin: 0 !important;
}

/* ◆ 囲みカード②：オレンジヘッダー＋白ボディ */
.mou-wrap-orange {
    background-color: #e56c46;
    padding: clamp(5px, 0.521vw, 10px);
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 0.521vw, 10px);
}

.mou-wrap-orange__header {
    display: flex;
    align-items: center;
    gap: clamp(5px, 0.313vw, 6px); /* 6px ÷ 1920px */
}

.mou-wrap-orange__icon {
    display: block;
    width: clamp(14px, 1.042vw, 20px); /* 20px ÷ 1920px */
    height: clamp(14px, 1.042vw, 20px);
    background-image: url('../images/h3-icon-inv.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

.mou-wrap-orange__title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-size: clamp(16px, 1.042vw, 20px); /* 20px ÷ 1920px */
    line-height: 1.43;
    color: #fff;
}

.mou-wrap-orange__inner {
    background-color: #fff;
    padding: clamp(10px, 1.042vw, 20px);
}

.mou-wrap-orange__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.833vw, 16px); /* 16px ÷ 1920px */
}

.mou-wrap-orange__body > * {
    margin: 0 !important;
}

.mou-wrap-orange__body > br {
    display: none;
}

.mou-wrap-orange__body p {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 300;
}

.mou-wrap-orange .mou-wrap-orange__subtitle {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 0.938vw, 18px); /* 18px ÷ 1920px */
    line-height: 1.667;
    color: #000;
    margin: 0 !important;
}

/* ◆ 目次 */
.mou-toc {
    border: 5px solid #00794a;
    background-color: #fff;
    padding: clamp(12px, 1.042vw, 20px); /* 20px ÷ 1920px */
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.mou-toc .mou-toc__title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-size: clamp(14px, 0.938vw, 18px); /* 18px ÷ 1920px */
    color: #000;
    margin: 0 0 clamp(4px, 0.26vw, 5px);
}

.mou-toc__divider {
    border-top: clamp(2px, 0.208vw, 4px) solid #e56c46; /* 4px ÷ 1920px */
    margin: 0 0 clamp(6px, 0.521vw, 10px);
}

.mou-toc .mou-toc__list {
    list-style: none;
    counter-reset: toc-h2;
    padding: 0;
    margin: 0;
}

.mou-toc li::before {
    content: none !important; /* entry-content ul li の丸ドットをリセット */
}

.mou-toc__item--h2 {
    counter-increment: toc-h2;
    padding: clamp(6px, 0.417vw, 8px) 0 clamp(6px, 0.417vw, 8px) clamp(20px, 2.083vw, 40px); /* 40px ÷ 1920px */
    border-bottom: 1px dotted #e56c46;
}

.mou-toc__item--h2:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mou-toc__item--h2 > a {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 700;
    font-size: clamp(12px, 0.833vw, 16px); /* 16px ÷ 1920px */
    color: #000;
    text-decoration: none;
}

.mou-toc__item--h2 > a::before {
    content: counter(toc-h2) ". ";
}

.mou-toc__item--h2 > a:hover {
    text-decoration: underline;
    text-decoration-color: #00794a;
}

.mou-toc__sublist {
    list-style: none;
    padding: clamp(4px, 0.26vw, 5px) 0 0 clamp(10px, 0.833vw, 16px);
    margin: 0;
}

.mou-toc__item--h3 {
    padding: clamp(2px, 0.156vw, 3px) 0;
}

.mou-toc__item--h3 > a {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;
    font-size: clamp(11px, 0.729vw, 14px); /* 14px ÷ 1920px */
    color: #000;
    text-decoration: none;
}

.mou-toc__item--h3 > a::before {
    content: '●';
    color: #e56c46;
    margin-right: 4px;
    font-size: 0.6em;
    vertical-align: middle;
}

.mou-toc__item--h3 > a:hover {
    text-decoration: underline;
    text-decoration-color: #00794a;
}

/* ◆ 吹き出し */
.mou-balloon {
    display: flex;
    align-items: center;
    gap: clamp(10px, 0.781vw, 15px); /* 15px ÷ 1920px */
}

.mou-balloon--b {
    flex-direction: row-reverse;
}

.mou-balloon__avatar {
    width: clamp(60px, 5.208vw, 100px); /* 100px ÷ 1920px */
    height: clamp(60px, 5.208vw, 100px);
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

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

.mou-balloon__bubble {
    position: relative;
    background-color: #fff;
    border: 2px solid #00794a;
    border-radius: clamp(4px, 0.417vw, 8px); /* 8px ÷ 1920px */
    padding: clamp(8px, 0.833vw, 16px) clamp(10px, 1.042vw, 20px); /* 16px・20px ÷ 1920px */
    color: #000;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.833vw, 16px); /* 16px ÷ 1920px */
    line-height: 1.75;
}

.mou-balloon__bubble > * {
    margin: 0 !important;
}

.mou-balloon__bubble > br {
    display: none;
}

/* 尻尾A：外（緑）・内（白）の二重三角で実線風 */
.mou-balloon--a .mou-balloon__bubble::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 11px solid #00794a;
}

.mou-balloon--a .mou-balloon__bubble::after {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 9px solid #fff;
}

/* 尻尾B：外（緑）・内（白）の二重三角で実線風 */
.mou-balloon--b .mou-balloon__bubble::before {
    content: '';
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 11px solid #00794a;
}

.mou-balloon--b .mou-balloon__bubble::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 9px solid #fff;
}

/* ◆ リンクカード：緑枠＋サムネ＋タイトル＋テキスト */
.mou-link-card {
    background-color: #00794a;
    padding: clamp(5px, 0.521vw, 10px);
}

.mou-link-card .mou-link-card__inner {
    display: flex;
    align-items: stretch; /* 写真とbodyを同じ高さに揃える */
    gap: clamp(10px, 1.042vw, 20px); /* 20px ÷ 1920px */
    background-color: #fff;
    padding: clamp(10px, 1.042vw, 20px);
    text-decoration: none; /* .entry-content aのアンダーラインを上書き */
    color: inherit;
}

.mou-link-card .mou-link-card__inner:hover {
    text-decoration: none;
}

.mou-link-card__photo {
    width: clamp(100px, 9.896vw, 190px); /* 190px ÷ 1920px */
    height: clamp(100px, 9.896vw, 190px);
    background-color: #00794a;
    flex-shrink: 0;
    overflow: hidden;
}

.mou-link-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mou-link-card__body {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    max-height: clamp(100px, 9.896vw, 190px); /* 写真と同じ高さ上限 */
    overflow: hidden;
}

.mou-link-card .mou-link-card__title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-size: clamp(16px, 1.528vw, 22px); /* 22px ÷ 1440px（実用基準） */
    line-height: 1.43;
    color: #000;
    margin: 0 0 clamp(5px, 0.521vw, 10px); /* 罫線との間だけ gap */
}

.mou-link-card__divider {
    border-top: clamp(3px, 0.313vw, 6px) solid #e56c46; /* 6px 実線 */
    margin: 0;
}

.mou-link-card .mou-link-card__text {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1.111vw, 16px); /* 16px ÷ 1440px（実用基準） */
    line-height: 1.667;
    color: #000;
    margin: 0;
    padding-top: clamp(6px, 0.521vw, 10px); /* 10px ÷ 1920px */
}

.mou-link-card .mou-link-card__text p {
    margin: 0;
}

/* ◆ ブログ内ボタン（Figma: 138×37, オレンジ背景, 緑ボーダー3px, radius10px） */
.mou-btn,
.entry-content .mou-btn {
    display: inline-block;
    background-color: #e56c46;
    color: #fff;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 700;
    font-size: clamp(12px, 0.833vw, 16px); /* 16px ÷ 1920px */
    line-height: 1;
    padding: clamp(8px, 0.521vw, 10px) clamp(10px, 0.729vw, 14px);
    border: clamp(3px, 0.208vw, 4px) solid #00794a; /* 4px ÷ 1920px */
    border-radius: 0;
    text-decoration: none;
    min-width: clamp(80px, 7.188vw, 138px); /* 138px ÷ 1920px */
    min-height: clamp(20px, 1.927vw, 37px); /* 37px ÷ 1920px */
    text-align: center;
}

.mou-btn:hover,
.entry-content .mou-btn:hover {
    text-decoration: none;
}

.mou-btn:active,
.entry-content .mou-btn:active {
    transform: translate(2px, 2px);
}

/* ◆ ボタン中央揃えラッパー（[mou-btn-center]使用時） */
.mou-btn-center {
    display: flex;
    justify-content: center;
}

/* ⑤ サイドバー（オレンジ背景） */
.blog-sidebar {
    flex-shrink: 0;
    width: 30%; /* 360 ÷ 1200 */
    background-color: #e56c46;
    padding: clamp(20px, 2.083vw, 40px); /* 40px ÷ 1920px */
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.042vw, 20px); /* 20px ÷ 1920px */
}

.blog-sidebar__section {
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 0.521vw, 10px); /* 10px ÷ 1920px */
}

.blog-sidebar__heading {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 800;
    font-size: clamp(16px, 1.563vw, 30px); /* 30px ÷ 1920px */
    color: #fff;
    margin: 0;
}

/* 検索フォーム */
.blog-sidebar__search-form {
    display: flex;
    align-items: center;
    background-color: #00794a;
    height: clamp(28px, 2.292vw, 44px); /* 44px ÷ 1920px */
    padding: 0 clamp(8px, 0.781vw, 15px);
    gap: 8px;
    max-width: clamp(160px, 14.583vw, 280px); /* 280px ÷ 1920px */
}

.blog-sidebar__search-input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 800;
    font-size: clamp(10px, 0.729vw, 14px); /* 14px ÷ 1920px */
    flex: 1;
    min-width: 0;
}

.blog-sidebar__search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* ブラウザ標準の×ボタンを非表示にしてカスタムボタンを使う */
.blog-sidebar__search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* カスタム×ボタン — 文字に入力があるときだけ表示 */
.blog-sidebar__search-clear {
    display: none;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    flex-shrink: 0;
}

.blog-sidebar__search-input:not(:placeholder-shown) + .blog-sidebar__search-clear {
    display: block;
}

.blog-sidebar__search-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.blog-sidebar__search-btn img {
    width: clamp(14px, 1.042vw, 20px); /* 20px ÷ 1920px */
    height: auto;
    filter: brightness(0) invert(1); /* SVGを白に */
    display: block;
}

/* アーカイブドロップダウン */
.blog-sidebar__select-wrap {
    position: relative;
    max-width: clamp(160px, 14.583vw, 280px); /* 280px ÷ 1920px */
}

.blog-sidebar__select-wrap::after {
    content: '';
    position: absolute;
    right: clamp(8px, 0.781vw, 15px);
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid #fff;
    pointer-events: none;
}

.blog-sidebar__select {
    width: 100%;
    height: clamp(28px, 2.292vw, 44px); /* 44px ÷ 1920px */
    background-color: #00794a;
    border: none;
    outline: none;
    color: #fff;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 800;
    font-size: clamp(10px, 0.729vw, 14px);
    padding: 0 clamp(8px, 0.781vw, 15px);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.blog-sidebar__select option {
    background-color: #00794a;
    color: #fff;
}

/* カテゴリーグリッド（2列） */
.blog-sidebar__cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(8px, 1.042vw, 20px); /* 20px ÷ 1920px */
}

.blog-sidebar__cat-item {
    background-color: #00794a;
    color: #fff;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 400;
    font-size: clamp(10px, 0.833vw, 16px); /* 16px ÷ 1920px */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    aspect-ratio: 1;
    padding: 8px;
    line-height: 1.4;
}

.blog-sidebar__cat-item:hover,
.blog-sidebar__cat-item.is-active {
    background-color: #fff;
    color: #00794a;
    box-shadow: inset 0 0 0 5px #00794a;
}

/* プロフィール */
.blog-sidebar__profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 0.781vw, 15px);
}

.blog-sidebar__profile-saru {
    width: clamp(80px, 8.333vw, 160px); /* 160px ÷ 1920px */
    height: auto;
    display: block;
    filter: brightness(0) invert(1); /* 緑SVGを白に変換 */
}

.blog-sidebar__profile-name {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 900;
    font-size: clamp(18px, 1.563vw, 30px); /* 30px ÷ 1920px */
    line-height: 1.4;
    color: #fff;
    margin: 0;
}

.blog-sidebar__profile-bio {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 900;
    font-size: clamp(10px, 0.938vw, 18px); /* 18px ÷ 1920px */
    line-height: clamp(18px, 1.563vw, 30px);
    color: #fff;
    margin: 0;
    text-align: left;
}

/* 区切り線（白） */
.blog-sidebar__divider {
    border: none;
    border-top: 2px solid #fff;
    margin: 0;
}

/* SNSアイコン行 */
.blog-sidebar__sns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 0.781vw, 15px);
}

.blog-sidebar__sns-link {
    display: flex;
    align-items: center;
}

/* Instagram・Xアイコン：ドロワーと同じmask-image方式（白表示） */
.blog-sidebar__sns-icon--instagram,
.blog-sidebar__sns-icon--x {
    display: block;
    width: clamp(24px, 2.083vw, 40px); /* 40px ÷ 1920px */
    height: clamp(24px, 2.083vw, 40px);
    background-color: #fff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.blog-sidebar__sns-icon--instagram {
    -webkit-mask-image: url("../images/Instagram_Glyph_White.svg");
    mask-image: url("../images/Instagram_Glyph_White.svg");
}

.blog-sidebar__sns-icon--x {
    -webkit-mask-image: url("../images/x-logo-white.svg");
    mask-image: url("../images/x-logo-white.svg");
}

/* クリック時：ドロワーと同じ緑に変わる */
.blog-sidebar__sns-link:active .blog-sidebar__sns-icon--instagram,
.blog-sidebar__sns-link:active .blog-sidebar__sns-icon--x,
.blog-sidebar__sns-link:active .blog-sidebar__sns-icon--cart {
    background-color: #00794a;
}

/* カートアイコン：ドロワーと同じmask-image方式（白表示） */
.blog-sidebar__sns-icon--cart {
    display: block;
    width: clamp(26px, 2.604vw, 50px); /* 50px ÷ 1920px */
    height: clamp(21px, 2.135vw, 41px); /* 41px ÷ 1920px */
    background-color: #fff;
    -webkit-mask-image: url("../images/cart03.svg");
    mask-image: url("../images/cart03.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ===== スマホ用（767.98px以下） ===== */
@media screen and (max-width: 767.98px) {
    /* ヒーロー画像エリアの高さはPC用clamp()の下限（200px）のままで問題ないが、
       テキストが大きすぎる場合は font-size をここで調整する */
    .blog-hero {
        height: 160px;
    }

    /* 帯テキストは白文字が長いと折り返してレイアウトが崩れるため、
       SP幅では固定サイズ＋折り返し許可に切り替える */
    .blog-obi__text {
        font-size: 14px;
        white-space: normal;
    }

    /* 記事一覧セクションの上下パディングをSP用に縮小 */
    .blog-section {
        padding: 40px 0;
    }

    /* 記事一覧＋サイドバーの横並びをSPでは縦積みに変更。
       width:62.5vwをリセットして全幅に。左右パディングを追加して読みやすくする */
    .blog-inner {
        width: auto;
        padding: 0 20px;
        flex-direction: column;
        gap: 32px;
    }

    /* サイドバーはSPでは縦積みの下に移動するため、幅を100%に広げる */
    .blog-sidebar {
        width: 100%;
    }

    /* 検索フォームとアーカイブドロップダウンはPC用にmax-widthが設定されているが、
       SPでは横幅いっぱいに広げる */
    .blog-sidebar__search-form,
    .blog-sidebar__select-wrap {
        max-width: 100%;
    }
}

/* ===== タブレット用（768px〜1024px）：専用の上書きはしない =====
   このサイトの方針：タブレット幅はスマホの縦積みレイアウトではなく、
   「PCデザインをそのまま比例縮小したもの」として扱う。
   そのため、上のPC用clamp()がそのまま768pxまで効き続ける形にして、
   ここでは何も上書きしない（767.98px以下になった瞬間だけ、上のスマホ用に切り替わる）。 */


/* =============================================================
   CATALOGページ
   ============================================================= */

/* ① FVスライダー＋PICKUP セクション（Figma: catalog-fv-section-1920） */
.catalog-fv {
    padding: clamp(40px, 4.167vw, 80px) 0 clamp(20px, 2.083vw, 40px); /* 80px / 40px ÷ 1920px */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 0.625vw, 12px); /* 12px ÷ 1920px（元35pxの約1/3） */
}

/* スライダーブロック（タイトルバー＋スライド行）*/
.catalog-fv__slider-block {
    width: clamp(600px, 62.5vw, 1200px); /* 1200px ÷ 1920px */
    display: flex;
    flex-direction: column;
}

/* タイトルバー */
.catalog-fv__title-bar {
    background-color: #00794a;
    display: flex;
    align-items: center;
    min-height: clamp(30px, 3.125vw, 60px); /* 60px ÷ 1920px */
    padding: clamp(5px, 0.521vw, 10px) clamp(12.5px, 1.302vw, 25px); /* 10px / 25px ÷ 1920px */
}

.catalog-fv__title-text {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 800;
    font-size: clamp(15px, 1.563vw, 30px); /* 30px ÷ 1920px */
    color: #fff;
}

/* スライド行（左矢印 + ビューポート + 右矢印）16:9 */
.catalog-fv__slider-row {
    display: flex;
    height: clamp(270px, 28.125vw, 540px); /* 540px ÷ 1920px （矢印120px×2 → 幅960px → 16:9） */
}

/* 矢印ボタン外枠（オレンジパネル） */
.catalog-fv__arrow {
    flex-shrink: 0;
    width: clamp(60px, 6.25vw, 120px); /* 120px ÷ 1920px */
    background-image: url('../images/checker-bold.png');
    background-repeat: repeat;
    background-size: clamp(42px, 4.375vw, 84px); /* ボタン幅と同比率(70%)でスケール */
    background-position: center center;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* 矢印の半透明オレンジ半円 */
.catalog-fv__arrow-inner {
    width: clamp(40px, 4.167vw, 80px);   /* 高さの半分 = 真の半円幅 */
    height: clamp(80px, 8.333vw, 160px); /* 160px ÷ 1920px */
    background-color: rgba(229, 108, 70, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 左矢印：半円を外側（左端）に寄せる */
.catalog-fv__arrow--prev {
    justify-content: flex-start;
}
.catalog-fv__arrow--prev .catalog-fv__arrow-inner {
    border-radius: 0 9999px 9999px 0;
}

/* 右矢印：半円を外側（右端）に寄せる */
.catalog-fv__arrow--next {
    justify-content: flex-end;
}
.catalog-fv__arrow--next .catalog-fv__arrow-inner {
    border-radius: 9999px 0 0 9999px;
}

.catalog-fv__arrow-icon {
    width: clamp(9px, 0.921vw, 17.7px);  /* 17.7px ÷ 1920px (26.5×2/3) */
    height: clamp(18px, 1.84vw, 35px);   /* 35px ÷ 1920px (53×2/3) */
}

/* スライドビューポート */
.catalog-fv__viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.catalog-fv__slides {
    display: flex;
    height: 100%;
    transition: transform 0.6s ease;
    will-change: transform;
}

.catalog-fv__slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url('../images/200percent.png');
    background-repeat: repeat;
    background-size: 30%;
}

.catalog-fv__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ドットナビ（< ○ ● ○ ○ >）*/
.catalog-fv__dots {
    display: flex;
    align-items: center;
    gap: clamp(10px, 0.781vw, 15px); /* 15px ÷ 1920px / 最小10px */
    padding: 8px 0;
}

.catalog-fv__dot-arrow {
    font-family: "M PLUS 1p", sans-serif;
    font-size: clamp(8px, 0.625vw, 12px); /* 12px ÷ 1920px / 最小8px */
    background: none;
    border: none;
    cursor: pointer;
    color: #777777;
    padding: 0;
    line-height: 1;
}

.catalog-fv__dot {
    width: clamp(6px, 0.417vw, 8px); /* 8px ÷ 1920px / 最小6px */
    height: clamp(6px, 0.417vw, 8px);
    border-radius: 50%;
    border: 1.5px solid #777777;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

.catalog-fv__dot.is-active {
    background-color: #777777;
}

/* PICK UP */
.catalog-pickup {
    width: clamp(600px, 62.5vw, 1200px); /* 1200px ÷ 1920px */
    margin-top: clamp(10px, 1.042vw, 20px); /* ドットナビとの間隔を20px追加 */
}

.catalog-pickup__title-bar {
    background-color: #00794a;
    display: flex;
    align-items: center;
    min-height: clamp(30px, 3.125vw, 60px); /* 60px ÷ 1920px */
    padding: clamp(5px, 0.521vw, 10px) clamp(12.5px, 1.302vw, 25px);
}

.catalog-pickup__title-text {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 800;
    font-size: clamp(15px, 1.563vw, 30px);
    color: #fff;
}

.catalog-pickup__track-wrap {
    background-color: #d9d9d9;
    padding: clamp(20px, 2.083vw, 40px); /* 40px ÷ 1920px */
    overflow: hidden;
}

/* 無限スクロール：トラックはアイテム×2の幅、50%移動でループ */
.catalog-pickup__track {
    display: flex;
    gap: clamp(20px, 2.083vw, 40px); /* 40px ÷ 1920px */
    width: max-content;
    animation: catalogPickupScroll 20s linear infinite;
}

.catalog-pickup__track:hover {
    animation-play-state: paused;
}

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

.catalog-pickup__item {
    flex-shrink: 0;
    width: clamp(95px, 9.896vw, 190px);  /* 190px ÷ 1920px */
    height: clamp(80px, 8.333vw, 160px); /* 160px ÷ 1920px */
    background-color: #fff;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

.catalog-pickup__item--placeholder {
    background-color: #fff;
}

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


/* ② 商品グリッドセクション（Figma: catalog-items-section-1920）*/
.catalog-items {
    padding: clamp(20px, 2.083vw, 40px) 0 clamp(80px, 8.333vw, 160px); /* 40px / 160px ÷ 1920px */
}

.catalog-items__inner {
    max-width: clamp(600px, 62.5vw, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.042vw, 20px); /* 20px ÷ 1920px */
}

.catalog-items__title-bar {
    background-color: #00794a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: clamp(30px, 3.125vw, 60px);
    padding: clamp(5px, 0.521vw, 10px) clamp(12.5px, 1.302vw, 25px);
    position: relative;
}

.catalog-items__title-text {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 800;
    font-size: clamp(15px, 1.563vw, 30px);
    color: #fff;
}

/* ドロップダウンナビ */
.catalog-items__nav {
    position: relative;
    display: none; /* 500px以下のSPのみ表示 */
}

.catalog-items__nav-toggle {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 800;
    font-size: clamp(12px, 0.938vw, 18px); /* 18px ÷ 1920px */
    color: #fff;
    background: transparent;
    border: 1.5px solid #fff;
    padding: clamp(3px, 0.26vw, 5px) clamp(8px, 0.833vw, 16px);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.417vw, 8px);
    white-space: nowrap;
}

.catalog-items__nav-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fff;
    transition: transform 0.2s;
}

.catalog-items__nav.is-open .catalog-items__nav-arrow {
    transform: rotate(180deg);
}

.catalog-items__nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background-color: #e56c46;
    border: 2px solid #00794a;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: clamp(120px, 12.5vw, 200px);
    z-index: 100;
}

.catalog-items__nav.is-open .catalog-items__nav-dropdown {
    display: block;
}

.catalog-items__nav-dropdown li a,
.catalog-items__nav-dropdown li button {
    display: block;
    width: 100%;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 800;
    font-size: clamp(13px, 0.938vw, 18px); /* min13px: ACCESSORIESが幅120px内に収まる上限 */
    color: #fff;
    text-decoration: none;
    background: none;
    border: none;
    padding: clamp(8px, 0.833vw, 16px) clamp(12px, 1.042vw, 20px);
    text-align: left;
    cursor: pointer;
}

.catalog-items__nav-dropdown li a:hover,
.catalog-items__nav-dropdown li button:hover {
    background-color: #fff;
    color: #00794a;
}

/* 選択中（フィルターアクティブ）・現在ページ：白背景＋緑文字 */
.catalog-items__nav-dropdown li button.is-active,
.catalog-items__nav-dropdown li.is-current a,
.catalog-items__nav-dropdown li a.is-active {
    background-color: #fff;
    color: #00794a;
}

/* 4カラム商品グリッド */
.catalog-items__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 1.667vw, 32px); /* 32px ÷ 1920px */
}

.catalog-no-items {
    grid-column: 1 / -1;
    text-align: center;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;
    color: #000;
    padding: clamp(20px, 2.083vw, 40px) 0;
}

/* ---- CATALOG 準備中ページ ---- */
.catalog-coming-soon {
    padding: clamp(40px, 4.167vw, 80px) clamp(16px, 2.083vw, 40px); /* 80px ÷ 1920px */
}

.catalog-coming-soon__inner {
    max-width: clamp(600px, 62.5vw, 1200px); /* 1200px ÷ 1920px */
    margin: 0 auto;
}

.catalog-coming-soon__title-bar {
    background-color: #00794a;
    display: flex;
    align-items: center;
    min-height: clamp(30px, 3.125vw, 60px); /* 60px ÷ 1920px */
    padding: clamp(5px, 0.521vw, 10px) clamp(12.5px, 1.302vw, 25px); /* 10px・25px ÷ 1920px */
}

.catalog-coming-soon__title-text {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 800;
    font-size: clamp(15px, 1.563vw, 30px); /* 30px ÷ 1920px */
    color: #fff;
    letter-spacing: 0.05em;
}

.catalog-coming-soon__body {
    text-align: center;
    padding: clamp(60px, 6.25vw, 120px) clamp(16px, 2.083vw, 40px); /* 120px ÷ 1920px */
}

.catalog-coming-soon__message {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;
    font-size: clamp(14px, 1.042vw, 20px); /* 20px ÷ 1920px */
    color: #555;
    letter-spacing: 0.05em;
}


/* ③ カタログカード（Figma: item card 276×350px）*/
.catalog-card {
    display: flex;
    flex-direction: column;
}

.catalog-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    height: 100%;
}

.catalog-card__photo {
    width: 100%;
    aspect-ratio: 1; /* 正方形 276×276 */
    overflow: hidden;
    background-color: #00794a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.catalog-card__noimage {
    font-family: "M PLUS 1p", sans-serif;
    font-size: clamp(8px, 0.625vw, 12px);
    color: rgba(255, 255, 255, 0.5);
}

.catalog-card__info {
    background-color: #fff;
    padding: clamp(3px, 0.26vw, 5px) 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
    min-height: 0;
}

.catalog-card__name {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 0.833vw, 16px); /* 16px ÷ 1920px */
    line-height: 1.56;
    color: #000;
    text-align: left;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.catalog-card__desc {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;
    font-size: clamp(7px, 0.729vw, 14px); /* 14px ÷ 1920px */
    line-height: 2;
    color: #000;
    text-align: center;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}


/* ④ ライトボックス */
.catalog-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalog-lightbox[hidden] {
    display: none;
}

.catalog-lightbox__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

.catalog-lightbox__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 90vw;
    max-height: 90vh;
}

.catalog-lightbox__close {
    position: absolute;
    top: -44px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}

.catalog-lightbox__img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    display: block;
}

.catalog-lightbox__link {
    display: inline-block;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #fff;
    background-color: #00794a;
    padding: 12px 40px;
    text-decoration: none;
    letter-spacing: 0.05em;
}

.catalog-lightbox__link:hover {
    background-color: #005a37;
}


/* ⑤ DOLLSページ商品ナビ（水平行、Figma: TOPS/BOTTOMS/BAGS/ACCESSORIES）*/

/* 既存の .catalog-items__nav を上書きするため、DOLLS専用クラスを使う */
.catalog-items__title-bar--dolls {
}

/* SP用カテゴリードロップダウン：PCでは非表示（500px以下のSP @mediaで display: block に上書きされる） */
.catalog-items__sp-cat {
    display: none;
}

.catalog-items__nav-list {
    display: flex;
    align-items: center;
    gap: clamp(25px, 2.604vw, 50px); /* 50px ÷ 1920px — ヘッダーnavと同じ行間 */
    list-style: none;
    padding: 0;
    margin: 0;
}

.catalog-items__nav-item {
    position: relative;
}

/* ヘッダーnavと同じスタイル：M PLUS 1 ExtraBold 30px 白 */
.catalog-items__nav-link {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 800;
    font-size: clamp(15px, 1.563vw, 30px); /* 30px ÷ 1920px */
    color: #fff;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
}

.catalog-items__nav-link:hover,
.catalog-items__nav-link.is-active {
    color: #e56c46;
}

/* サブドロップダウン — ヘッダーCATALOGと同じ吹き出し型（::before=緑三角外枠 / ::after=オレンジ三角内側）*/
.catalog-items__nav-item::before {
    content: "";
    position: absolute;
    top: calc(100% - clamp(4.5px, 0.3125vw, 6px));
    left: 50%;
    width: 0;
    height: 0;
    margin-left: calc(clamp(10.5px, 0.729vw, 14px) * -1);
    border-left: clamp(10.5px, 0.729vw, 14px) solid transparent;
    border-right: clamp(10.5px, 0.729vw, 14px) solid transparent;
    border-bottom: clamp(13.5px, 0.9375vw, 18px) solid #00794a;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
    pointer-events: none;
    z-index: 201;
}

.catalog-items__nav-item::after {
    content: "";
    position: absolute;
    top: calc(100% - clamp(1.5px, 0.104vw, 2px));
    left: 50%;
    width: 0;
    height: 0;
    margin-left: calc(clamp(7.5px, 0.521vw, 10px) * -1);
    border-left: clamp(7.5px, 0.521vw, 10px) solid transparent;
    border-right: clamp(7.5px, 0.521vw, 10px) solid transparent;
    border-bottom: clamp(10.5px, 0.729vw, 14px) solid #e56c46;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
    pointer-events: none;
    z-index: 202;
}

.catalog-items__nav-item.is-open::before,
.catalog-items__nav-item.is-open::after {
    opacity: 1;
    visibility: visible;
}

.catalog-items__subnav {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: clamp(6px, 0.417vw, 8px);
    transform: translate(-50%, -8px);
    padding: clamp(13.5px, 0.9375vw, 18px) 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: #e56c46;
    border-width: clamp(3px, 0.208vw, 4px);
    border-style: solid;
    border-color: #00794a;
    min-width: clamp(165px, 11.458vw, 220px);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
}

.catalog-items__nav-item.is-open .catalog-items__subnav {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.catalog-items__subnav-link {
    display: block;
    padding: clamp(12px, 0.833vw, 16px) clamp(6px, 0.417vw, 8px);
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-size: clamp(20px, 1.354vw, 26px); /* ヘッダーサブメニューと同じ */
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: background 0.15s;
}

.catalog-items__subnav-link:hover {
    background-color: #fff;
    color: #00794a;
}


/* ⑥ デモスライド（写真登録前の動作確認用）*/
.catalog-fv__slide--demo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalog-fv__slide--demo::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--demo-overlay, rgba(0, 0, 0, 0.4));
    z-index: 1;
}

.catalog-fv__slide-demo-label {
    position: relative;
    z-index: 2;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 800;
    font-size: clamp(16px, 2.083vw, 40px);
    color: #fff;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

/* デモPICKUPアイテム */
.catalog-pickup__item--demo {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ===== スマホ用（767.98px以下） ===== */
@media screen and (max-width: 767.98px) {

    /* FVセクション全体の上下パディングをSP用に縮小 */
    .catalog-fv {
        padding: 46px 0 12px;
    }

    /* FVスライダーブロック：PC用 width: clamp(600px, ...) は最小600pxのため
       375px幅のスマホでは横スクロールが発生する。ここで全幅（100%）に上書きする */
    .catalog-fv__slider-block {
        width: 100%;
    }

    /* FVスライダー行：
       ① 固定高さ（height: clamp(270px,...)）をやめてaspect-ratio: 16/9に変更する
          → 横幅に連動して高さが自動計算される（例：375px幅 → 高さ約211px）
       ② 矢印をスライドの上にオーバーレイ配置するための基準点として
          position: relative を付与する（absolute配置した矢印の座標基準になる） */
    .catalog-fv__slider-row {
        height: auto;
        aspect-ratio: 16 / 9;
        position: relative;
        overflow: hidden;
    }

    /* FV矢印ボタン：スライドの上に絶対配置でオーバーレイ表示（①採用）
       ・PC版はチェッカー柄の背景＋半円の組み合わせだったが、SPでは背景柄を外して
         半円（arrow-inner）だけを左右端に表示する
         （背景柄がスライド写真の左右を隠してしまうため）
       ・position: absoluteにすることでflexフローから外れ、
         viewportが自動的に全幅（100%）を占めるようになる */
    .catalog-fv__arrow {
        position: absolute;
        top: 0;
        height: 100%;
        width: auto;
        background-image: none;
        background-color: transparent;
        z-index: 10;
        display: flex;
        align-items: center;
    }

    /* 前矢印：スライドの左端に固定 */
    .catalog-fv__arrow--prev {
        left: 0;
        justify-content: flex-start;
    }

    /* 次矢印：スライドの右端に固定 */
    .catalog-fv__arrow--next {
        right: 0;
        justify-content: flex-end;
    }

    /* 半円のサイズをSP用に調整
       clamp(最小値, vw基準値, 最大値)
       幅:  8vw → 375px時=30px / 上限40px
       高さ: 16vw → 375px時=60px / 上限80px */
    .catalog-fv__arrow-inner {
        width: clamp(20px, 8vw, 40px);
        height: clamp(40px, 16vw, 80px);
    }

    /* FVドットナビ：PC・SP共通サイズで固定のためSP上書きなし */

    /* PICKUPエリア：PC用min-width:600pxを解除して全幅に。
       下の catalog-items__inner と同じ 16px 左右パディングを付けて幅を合わせる */
    .catalog-pickup {
        width: 100%;
        padding: 0 16px;
    }

    /* 商品グリッド内側コンテナ：min-width:600pxを解除して全幅に
       ※グリッドの列数（4カラム→2カラムなど）はデザイン確定後に別途追記する */
    .catalog-items__inner {
        max-width: 100%;
        padding: 0 16px;
    }
}

/* ===== タブレット用（768px〜1024px）：専用の上書きはしない =====
   このサイトの方針：タブレット幅はスマホの縦積みレイアウトではなく、
   「PCデザインをそのまま比例縮小したもの」として扱う。
   そのため、上のPC用clamp()がそのまま768pxまで効き続ける形にして、
   ここでは何も上書きしない（767.98px以下になった瞬間だけ、上のスマホ用に切り替わる）。
   ※商品ページのタブレット対応は別途検討中（保留）。 ===== */

/* =========================================================
   CATALOG 詳細ページ（single-catalog.php）
   ========================================================= */

/* ── ページ外枠 ── */
.catalog-pg {
    padding: clamp(60px, 6.771vw, 130px) clamp(40px, 4.167vw, 80px) clamp(80px, 8.333vw, 160px); /* 横: 最小40px, 最大80px ÷ 1920px */
}

.catalog-pg__inner {
    max-width: clamp(600px, 62.5vw, 1200px); /* 1200px ÷ 1920px */
    margin: 0 auto;
    padding: 0; /* 横パディングは各子要素が個別に持つ */
    overflow: hidden; /* グリッドアイテムのmin-width起因オーバーフローを封鎖 */
}

/* ① カテゴリナビバー */
.catalog-pg__cat-bar {
    background-color: #00794a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: clamp(30px, 3.125vw, 60px); /* 60px ÷ 1920px */
    padding: clamp(5px, 0.521vw, 10px) clamp(12px, 1.302vw, 25px);
    margin: 0;
}

.catalog-pg__cat-title {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 800;
    font-size: clamp(14px, 1.563vw, 30px); /* 30px ÷ 1920px */
    color: #fff;
}

.catalog-pg__cat-nav {
    display: flex;
    gap: clamp(16px, 2.604vw, 50px); /* 50px ÷ 1920px */
    list-style: none;
    padding: 0;
    margin: 0;
}

.catalog-pg__cat-nav a {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 800;
    font-size: clamp(14px, 1.563vw, 30px);
    color: #fff;
    text-decoration: none;
}

.catalog-pg__cat-nav a:hover { color: #e56c46; }

/* ===== カタログナビ 499.98px以下：ドロップダウン表示、横並びナビ非表示 ===== */
@media (max-width: 499.98px) {
    .catalog-items__nav {
        display: block;
    }
    .catalog-items__nav-list,
    .catalog-pg__cat-nav {
        display: none;
    }
}

/* ブレッドクラム */
.catalog-pg__breadcrumb {
    padding: clamp(4px, 0.417vw, 8px) 0;
    font-family: "M PLUS 1", sans-serif;
    font-weight: 500;
    font-size: clamp(10px, 0.833vw, 16px); /* 16px ÷ 1920px */
    color: #777;
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.catalog-pg__breadcrumb-link {
    color: inherit;
    text-decoration: none;
}
.catalog-pg__breadcrumb-link:hover { text-decoration: underline; }
.catalog-pg__breadcrumb-link--nolink { cursor: default; opacity: 0.5; }
.catalog-pg__breadcrumb-link--nolink:hover { text-decoration: none; }

.catalog-pg__breadcrumb-sep { color: #bbb; }

/* ── メインコンテンツ：CSSグリッド：2列（左列=メディア / 右列=情報） ── */
.catalog-pg__main {
    display: grid;
    grid-template-columns: clamp(200px, 20.833vw, 400px) 1fr; /* 400px ÷ 1920px */
    column-gap: clamp(16px, 2.083vw, 40px); /* 左列と右列の間隔 */
    align-items: start; /* 各列が独立して上から伸びる */
}

/* ② 左列コンテナ：スライダー＋ドットナビ＋サムネイルをひとまとまりに */
.catalog-pg__media-col {
    display: flex;
    flex-direction: column;
}

/* ③ 右列コンテナ：商品情報＋注意事項・コメントをひとまとまりに */
.catalog-pg__info-col {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.563vw, 30px); /* 30px ÷ 1920px */
    padding-right: clamp(16px, 2.083vw, 40px); /* 右端の余白 */
    min-width: 0;
}

/* ② 左列：スライダー */
.catalog-pg__slider {
    position: relative;
    aspect-ratio: 4 / 5; /* 400:500 */
    background-color: #bee4d5;
    overflow: hidden;
    cursor: zoom-in;
}

.catalog-pg__slider-viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.catalog-pg__slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.4s ease;
}

.catalog-pg__slide {
    flex: 0 0 100%;
    height: 100%;
}

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

.catalog-pg__slide-placeholder {
    width: 100%;
    height: 100%;
    background-color: #bee4d5;
}

/* 矢印ボタン */
.catalog-pg__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(25px, 2.604vw, 50px); /* 50px ÷ 1920px */
    height: clamp(50px, 5.208vw, 100px); /* 100px ÷ 1920px */
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(5px, 0.521vw, 10px) 0;
    z-index: 1;
}

.catalog-pg__arrow--prev {
    left: 0;
    border-radius: 0 clamp(30px, 6.25vw, 120px) clamp(30px, 6.25vw, 120px) 0; /* 120px ÷ 1920px */
}

.catalog-pg__arrow--next {
    right: 0;
    border-radius: clamp(30px, 6.25vw, 120px) 0 0 clamp(30px, 6.25vw, 120px);
}

.catalog-pg__arrow-inner svg {
    width: clamp(6px, 0.625vw, 12px); /* 12px ÷ 1920px */
    height: auto;
}

/* ② 左列：ドットナビ */
.catalog-pg__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(6px, 0.625vw, 12px);
    padding: clamp(8px, 0.833vw, 16px) 0; /* 16px ÷ 1920px */
}

.catalog-pg__dot-dir {
    background: none;
    border: none;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;
    font-size: clamp(10px, 0.833vw, 16px);
    color: #777;
    cursor: pointer;
    line-height: 1;
}

.catalog-pg__dot {
    width: clamp(6px, 0.417vw, 8px); /* 8px ÷ 1920px */
    height: clamp(6px, 0.417vw, 8px); /* 8px ÷ 1920px */
    border-radius: 50%;
    background-color: #d9d9d9;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s;
}

.catalog-pg__dot.is-active { background-color: #777; }

/* ② 左列：サムネイルグリッド */
.catalog-pg__thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(4px, 0.417vw, 8px);
    padding: clamp(16px, 2.083vw, 40px); /* Figma: 40px */
    background-color: #d9d9d9;
    align-content: start;
}

.catalog-pg__thumb {
    border: 2px solid transparent;
    padding: 0;
    background-color: #fff;
    cursor: pointer;
    aspect-ratio: 1;
    overflow: hidden;
    opacity: 0.6;
    transition: opacity 0.2s, border-color 0.2s;
}

.catalog-pg__thumb.is-active,
.catalog-pg__thumb:hover {
    opacity: 1;
    border-color: #00794a;
}

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

/* ③ 右列：商品情報 */
.catalog-pg__info-top {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 0.521vw, 10px);
}

.catalog-pg__names {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.catalog-pg__title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-size: clamp(18px, 1.354vw, 26px); /* 26px ÷ 1920px */
    color: #000;
    margin: 0;
    line-height: 1.3;
}

.catalog-pg__subtitle {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 1.042vw, 20px); /* 20px ÷ 1920px */
    color: #000;
    margin: 0;
}

.catalog-pg__divider {
    border-top: clamp(4px, 0.313vw, 6px) solid #e56c46; /* 6px ÷ 1920px */
}

.catalog-pg__badges {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(4px, 0.521vw, 10px); /* Figma: 10px */
    padding: clamp(3px, 0.26vw, 5px) 0; /* Figma: 5px 0 */
}

.catalog-pg__badge {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-size: 10px;
    padding: 3px 5px;
    border: 1px solid;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.catalog-pg__badge--doll  { color: #00794a; border-color: #00794a; }
.catalog-pg__badge--size  { color: #e56c46; border-color: #e56c46; }
.catalog-pg__badge--alert { color: #ff0000; border-color: #ff0000; }

.catalog-pg__tagline {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 0.938vw, 18px); /* 18px ÷ 1920px */
    color: #000;
    margin: 0;
}

.catalog-pg__content {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 0.833vw, 16px); /* 16px ÷ 1920px */
    color: #000;
    line-height: 1.5;
}

.catalog-pg__content p { margin: 0 0 4px; }

/* 説明欄の画像：サムネイルサイズに制限。クリックでフルサイズをライトボックス表示 */
.catalog-pg__content img {
    max-height: clamp(120px, 7.292vw, 140px); /* 140px ÷ 1920px */
    max-width: clamp(120px, 7.292vw, 140px);
    width: auto;
    height: auto;
    display: block;
    margin-bottom: clamp(6px, 0.521vw, 10px); /* 10px ÷ 1920px */
    cursor: zoom-in;
    transition: opacity 0.2s;
}

.catalog-pg__content img:hover {
    opacity: 0.8;
}

.catalog-pg__dashed {
    border-top: 1px dashed #e56c46;
    margin-top: auto; /* 説明文が短くてもdividerを下に押し付ける */
}

/* ③ 右列：注意事項＋コメント */
.catalog-pg__info-bottom {
    display: flex;
    gap: clamp(10px, 1.042vw, 20px);
    align-items: stretch;
}

.catalog-pg__notes,
.catalog-pg__comment {
    display: flex;
    flex-direction: column;
}

.catalog-pg__notes   { flex: 0 0 clamp(150px, 17.344vw, 333px); min-width: 0; } /* 333px ÷ 1920px（元1/3+100px） */
.catalog-pg__comment { flex: 1; min-width: 0; }

/* パネルタブ */
.catalog-pg__panel-tab {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-size: clamp(12px, 0.729vw, 14px); /* 14px ÷ 1920px */
    color: #fff;
    padding: clamp(3px, 0.313vw, 6px) clamp(8px, 0.833vw, 16px); /* 6px ÷ 1920px */
    border-radius: clamp(6px, 0.521vw, 10px) clamp(6px, 0.521vw, 10px) 0 0; /* 10px ÷ 1920px */
    white-space: nowrap;
    align-self: flex-start;   /* テキスト幅にフィット */
    position: relative;
    z-index: 1;
    margin-bottom: -2px;      /* パネル上枠線に重ねてタブ形状を作る */
}

.catalog-pg__panel-tab--orange { background-color: #e56c46; }
.catalog-pg__panel-tab--green  { background-color: #00794a; }

.catalog-pg__panel-body {
    flex: 1;
    padding: clamp(16px, 1.042vw, 20px) clamp(20px, 1.302vw, 25px); /* Figma: 20px 25px */
    border: 2px solid;
    overflow: hidden;
}

.catalog-pg__panel-body--orange { border-color: #e56c46; }
.catalog-pg__panel-body--green  { border-color: #00794a; }

/* 注意事項テキスト */
.catalog-pg__notes .catalog-pg__panel-body p,
.catalog-pg__notes .catalog-pg__panel-body ul,
.catalog-pg__notes .catalog-pg__panel-body ol,
.catalog-pg__notes .catalog-pg__panel-body li {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #777;
    margin: 0;
    line-height: 1.8;
}
.catalog-pg__notes .catalog-pg__panel-body ul,
.catalog-pg__notes .catalog-pg__panel-body ol {
    padding-left: 1.4em;
}
.catalog-pg__notes .catalog-pg__panel-body ul { list-style: disc; }
.catalog-pg__notes .catalog-pg__panel-body ol { list-style: decimal; }

/* コメントフォーム内スタイル */
.catalog-pg__form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    row-gap: clamp(4px, 0.417vw, 8px);
    column-gap: clamp(14px, 0.938vw, 18px); /* 18px ÷ 1920px */
    height: 100%;
}

/* textarea・チェックボックス・送信ボタンは全幅 */
.catalog-pg__form .comment-form-comment,
.catalog-pg__form .comment-form-cookies-consent,
.catalog-pg__form .form-submit {
    flex: 0 0 100%;
}

.catalog-pg__form p { margin: 0; }

/* コメントボックス→名前/メール間を3px縮小 */
.catalog-pg__form .comment-form-comment       { margin-bottom: -5px; }
/* 情報を保存する行を上下均等余白で中間配置 */
.catalog-pg__form .comment-form-cookies-consent { margin-top: auto; margin-bottom: auto; }
.catalog-pg__form .form-submit                { margin-top: 8px; }

.catalog-pg__form .comment-form-comment textarea {
    width: 100%;
    border: 2px solid #00794a;
    padding: clamp(3px, 0.26vw, 5px) clamp(6px, 0.417vw, 8px);
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: #777;
    resize: none;
    min-height: clamp(36px, 4.167vw, 80px); /* 80px ÷ 1920px */
    box-sizing: border-box;
}

/* お名前・メールを横並び（flex: 1 で均等分割） */
.catalog-pg__form .comment-form-author,
.catalog-pg__form .comment-form-email {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* セレクター二重指定で外部WPスタイルシートの上書きに勝つ */
.catalog-pg__form.catalog-pg__form label {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: #777;
}

.catalog-pg__form input[type="text"],
.catalog-pg__form input[type="email"] {
    border: none;
    border-bottom: 2px solid #00794a;
    padding: 2px 3px;
    font-family: "M PLUS 1p", sans-serif;
    font-size: 12px;
    width: 100%;
    height: 16px;
    box-sizing: border-box;
    outline: none;
}


/* ブラウザ保存チェックボックス行 */
.catalog-pg__form .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.catalog-pg__form .comment-form-cookies-consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0; /* iOS Safariが自動で付ける角丸を打ち消す */
    width: clamp(6px, 0.625vw, 12px);
    height: clamp(6px, 0.625vw, 12px);
    border: 1.5px solid #00794a;
    background-color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

.catalog-pg__form .comment-form-cookies-consent input[type="checkbox"]:checked {
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpolyline points='1.5%2C5.5 4.5%2C8.5 10.5%2C1.5' stroke='%2300794a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75%;
}

.catalog-pg__form .comment-form-cookies-consent label {
    font-size: 12px;
    color: #00794a;
    white-space: normal;
    overflow-wrap: break-word;
}

/* 送信ボタン */
.catalog-pg__form .form-submit { text-align: center; margin: 0; }

.catalog-pg__submit {
    background-color: #00794a;
    color: #fff;
    border: none;
    padding: clamp(3px, 0.26vw, 5px) clamp(12px, 1.25vw, 24px);
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}

.catalog-pg__submit:hover { opacity: 0.8; }

/* コメント送信完了メッセージ */
.catalog-comment-sent {
    background-color: #e6f3ec;
    border-left: 4px solid #00794a;
    color: #00794a;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-size: clamp(10px, 0.833vw, 16px);
    padding: clamp(8px, 0.833vw, 16px);
    margin-bottom: clamp(10px, 1.042vw, 20px);
}

/* コメント一覧は非表示（プライバシー保護） */
.single-catalog .comment-list { display: none; }

/* ④ 関連商品 */
.catalog-pg__related {
    margin-top: clamp(20px, 2.083vw, 40px); /* Figma: gap 35px */
}

.catalog-pg__related-bar {
    background-color: #00794a;
    padding: clamp(6px, 0.521vw, 10px) clamp(12px, 1.302vw, 25px); /* Figma: 10px 25px */
}

.catalog-pg__related-title {
    font-family: "M PLUS 1", sans-serif;
    font-weight: 800;
    font-size: clamp(12px, 1.146vw, 22px); /* 22px ÷ 1920px */
    color: #fff;
}

.catalog-pg__related-body {
    background-color: #d9d9d9;
    padding: clamp(16px, 2.083vw, 40px); /* Figma: 40px */
}

.catalog-pg__related-track {
    display: flex;
    justify-content: space-between; /* Figma: space-between */
    align-items: center;
}

.catalog-pg__related-item {
    flex: 0 0 clamp(80px, 9.896vw, 190px); /* 190px ÷ 1920px */
    aspect-ratio: 19 / 16; /* Figma: 190×160 */
    background-color: #fff;
    overflow: hidden;
    display: block;
    text-decoration: none;
    transition: opacity 0.2s;
}

.catalog-pg__related-item:hover { opacity: 0.8; }

.catalog-pg__related-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.catalog-pg__related-placeholder {
    width: 100%;
    height: 100%;
    background-color: #fff;
}

/* ===== スマホ用（767.98px以下） ===== */
@media screen and (max-width: 767.98px) {
    /* SP：グリッドを解除して縦積みフレックスに切り替える */
    .catalog-pg__main {
        display: flex;
        flex-direction: column;
    }

    /* 右列コンテナ：PC用の右パディングをリセット、Gap を固定値に、上に余白を追加 */
    .catalog-pg__info-col {
        padding-right: 0;
        padding-top: 16px;
        gap: 16px;
    }

    /* 注意事項パネル＋コメント送信パネルは、PC横並びをSP縦積みに変更 */
    .catalog-pg__info-bottom {
        flex-direction: column;
    }

    .catalog-pg__cat-bar { margin: 0; }

    /* 関連商品はPC横一列（space-between）からSP折り返し中央揃えに変更 */
    .catalog-pg__related-track {
        flex-wrap: wrap;
        justify-content: center;
        gap: clamp(8px, 2.133vw, 16px);
    }

    /* 関連商品の1アイテム幅：SPでは3列に収まるよう375px幅を基準にvwで指定
       (375px × 22.4vw ÷ 100 ≒ 84px → 約3列並ぶ) */
    .catalog-pg__related-item {
        flex: 0 0 clamp(80px, 22.4vw, 140px);
    }

    /* 「情報を保存する」チェックボックス：PC用はclamp()で最小6pxまで縮むが、
       SP幅ではラベルの文字サイズ（12px）に合わせて固定値にする */
    .catalog-pg__form .comment-form-cookies-consent input[type="checkbox"] {
        width: 12px;
        height: 12px;
    }
}

/* ===== タブレット用（768px〜1024px） ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* 注意事項パネル＋コメント送信パネルを縦積みに変更
       （PCでは横並びだが、タブレット幅では右列が狭くなるため縦の方が読みやすい） */
    .catalog-pg__info-bottom {
        flex-direction: column;
    }

    /* 「情報を保存する」チェックボックス：PC用はclamp()で最小6pxまで縮むが、
       タブレット幅ではラベルの文字サイズ（12px）に合わせて固定値にする */
    .catalog-pg__form .comment-form-cookies-consent input[type="checkbox"] {
        width: 12px;
        height: 12px;
    }
}