@charset "UTF-8";
/* ==========================================
   COCOTSUNA 非ログインTOPページ専用スタイル
   Based on: received/index022402.html
   ========================================== */

/* --- CSS Variables --- */
:root {
    --c-base: #F9F9F7;
    --c-white: #FFFFFF;
    --c-main: #E65100;
    --c-main-light: #FF8F00;
    --c-main-dark: #b33e00;
    --c-accent: #CCA43B;
    --c-text: #333333;
    --c-gray: #666666;
    --c-bg-light: #FFF5EC;
    --f-serif: 'Noto Serif JP', serif;
    --f-sans: 'Noto Sans JP', sans-serif;
}

/* --- Reset & Base --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--f-sans);
    color: var(--c-text);
    background-color: var(--c-white);
    font-size: 1.15rem; /* 最小フォントサイズを1.15remに設定 */
    line-height: 1.8;
    overflow-x: hidden;
    padding-bottom: 90px; /* フローティングボタン用の余白(スマホ) */
}
@media (min-width: 768px) { body { padding-bottom: 0; } }

a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
img { max-width: 100%; height: auto; display: block; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* --- Utilities --- */
.serif { font-family: var(--f-serif); }
.container { width: 90%; max-width: 1140px; margin: 0 auto; position: relative; }
.section-pad { padding: 80px 0; }
.br-sp { display: none; }
.text-center { text-align: center; }
.text-accent { color: var(--c-main); }
.hidden-sp { display: none !important; }

/* --- Section Title --- */
.sec-title {
    font-family: var(--f-serif);
    font-size: 28px;
    text-align: center;
    margin-bottom: 3.5rem;
    letter-spacing: 0.05em;
    line-height: 1.4;
}
@media (min-width: 768px) {
    .sec-title { font-size: 36px; }
}
/* ロゴ画像＋「とは」の見出し */
.sec-title--logo {
    display: flex; align-items: center; justify-content: center; gap: 12px;
}
.sec-title-logo { height: 82px; width: auto; display: block; }
@media (max-width: 1023px) {
    .sec-title-logo { height: 42px; }
    .sec-title--logo { gap: 8px; }
}
.sec-title span {
    display: block;
    font-size: 1.15rem;
    color: var(--c-main);
    margin-bottom: 0.5rem;
    font-family: var(--f-sans);
    font-weight: 900;
    letter-spacing: 0.1em;
}
.sec-title span.sec-title-accent {
    display: inline;
    font-family: inherit;
    font-size: 40px;
    color: var(--c-main);
    margin: 0;
    letter-spacing: inherit;
}

/* --- Buttons --- */
.btn-wrap { text-align: center; margin-top: 2rem; }
.micro-copy {
    display: block; font-size: 1.15rem; font-weight: bold; color: var(--c-main);
    margin-bottom: 0.5rem; letter-spacing: 0.05em;
}
.btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    padding: 1.2rem 3.5rem;
    border-radius: 50px;
    font-weight: 700;
    text-align: center;
    transition: all 0.3s;
    letter-spacing: 0.05em;
    font-size: 1.3rem;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.btn-main {
    background: linear-gradient(135deg, var(--c-main), var(--c-main-light));
    color: var(--c-white);
    border: none;
    box-shadow: 0 6px 20px rgba(230, 81, 0, 0.3);
}
.btn-main:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(230, 81, 0, 0.4);
    color: var(--c-white);
}
.btn-main::after {
    content: '\f054'; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; right: 20px; font-size: 1.15rem;
}
.btn-outline {
    background: var(--c-white);
    color: var(--c-main);
    border: 2px solid var(--c-main);
    padding: 1rem 2.5rem;
}
.btn-outline:hover { background: var(--c-main); color: var(--c-white); }
.btn-final-cta { padding: 1.2rem 5rem; font-size: 1.3rem; max-width: 100%; }

/* --- Header --- */
.header {
    position: fixed; top: 0; left: 0; width: 100%;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);
    z-index: 10002; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    height: auto; min-height: 80px; padding: 10px 0; display: flex; align-items: center;
}
.header-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; flex-wrap: wrap; }
.header .container { width: 100%; max-width: 1600px; padding: 2px 58px; }
.logo { display: flex; align-items: center; flex-shrink: 0; }
/* ヘッダーの高さ（min-height 80px − 上下padding 20px）いっぱいに配置 */
.logo img { height: 60px; width: auto; display: block; }
.header-nav { display: flex; align-items: center; flex-wrap: wrap; }
.nav-pc { display: flex; align-items: center; gap: 24px; }
/* ロゴを大きくしたぶん、幅が窮屈になる帯では左右余白とナビ間隔を詰めて1行を維持 */
@media (max-width: 1400px) {
    .header .container { padding: 2px 24px; }
    .nav-pc { gap: 16px; }
}
/* ナビが表示されたまま幅が足りなくなる帯だけロゴを縮める */
@media (min-width: 1140px) and (max-width: 1279px) {
    .logo img { height: 44px; }
}
/* 固定ヘッダー分だけアンカー位置を下げる */
#plans, #features, #reasons, #voice, #flow, #faq { scroll-margin-top: 90px; }
.nav-pc a {
    font-weight: 500; font-size: 15px; white-space: nowrap; color: #222222;
    position: relative; padding: 6px 0;
}
.nav-pc a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--c-main); border-radius: 2px;
    transform: scaleX(0); transform-origin: center; transition: transform 0.25s ease;
}
.nav-pc a:hover { color: var(--c-main); }
.nav-pc a:hover::after { transform: scaleX(1); }
.header-btn { padding: 10px 24px; font-size: 15px; margin-left: 24px; white-space: nowrap; }
.header-btn.btn-main::after { display: none; }
/* ヘッダーCTA */
.header-cta {
    display: inline-flex; align-items: center; gap: 10px;
    margin-left: 30px; padding: 12px 26px;
    background: linear-gradient(135deg, #E64A19, var(--c-main) 45%, #FB8C00);
    color: var(--c-white); border-radius: 999px;
    font-size: 15px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
    transition: transform 0.25s ease, filter 0.25s ease;
}
.header-cta:hover {
    color: var(--c-white);
    transform: translateY(-2px);
    filter: saturate(1.08);
}
.header-cta:active { transform: translateY(0); }
.header-cta:focus-visible { outline: 3px solid rgba(230, 81, 0, 0.35); outline-offset: 3px; }
.header-cta-icon { font-size: 15px; margin-right: 4px; }
.header-login {
    margin-left: 34px; font-size: 15px; font-weight: 600; color: #222222; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 5px;
}
.header-login i { color: var(--c-main); font-size: 14px; }
.header-login:hover { color: var(--c-main); }
/* --- Hero --- */
.hero {
    position: relative;
    overflow: hidden;
    padding-top: 100px; padding-bottom: 210px; /* hero-contentをやや上寄せ（usp-bar分＋α） */
    /* usp-barの下端＝画面下端になるよう画面高さにフィット（最小820px／最大900px）
       最小値はMacBook（1440×932pt）でメニューバー・ブラウザUIを除いた表示領域の高さに合わせている */
    height: clamp(820px, 100vh, 900px);
    height: clamp(820px, 100dvh, 900px);
    min-height: auto;
    background:
        url('../images/top/fv-products.webp') top center / auto calc(100% - 130px) no-repeat,
        repeating-linear-gradient(110deg, #ffeac6 0 44px, #ffefd4 44px 88px);
    display: flex; align-items: center;
}
/* FV下部：TV紹介バッジ */
.hero-badge {
    position: absolute;
    right: 1%; bottom: 10px;
    /* --badge-k は画面高さに応じた縮小率（下の height メディアクエリで指定） */
    --badge-w: 780px; --badge-max: 72%; /* PCのみ1.5倍（520px→780px） */
    width: calc(var(--badge-w) * var(--badge-k, 1));
    max-width: calc(var(--badge-max) * var(--badge-k, 1));
    height: auto;
    z-index: 5; pointer-events: none; /* FV内で最前面 */
    transform-origin: 50% 35%;
    animation: badgeWobble 2.6s ease-in-out infinite;
}
@keyframes badgeWobble {
    0%, 100% { transform: rotate(-2.5deg); }
    50% { transform: rotate(2.5deg); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-badge { animation: none; }
}
/* 1024〜1400px：他要素と干渉するためバッジを半分のサイズに（780px→390px） */
@media (min-width: 1024px) and (max-width: 1400px) {
    .hero-badge { --badge-w: 390px; --badge-max: 36%; }
}
/* FV下部：特徴バー */
.hero-usp-bar {
    position: absolute;
    left: 0; bottom: 0; width: 100%;
    background: linear-gradient(180deg, #e6851f 0%, #dd7a17 100%);
    display: flex; align-items: center; justify-content: flex-start; gap: 18px;
    padding: 5px 26px 5px 5px;
    z-index: 2;
    font-family: var(--f-sans);
}
.hero-usp-badge {
    flex: 0 0 auto;
    /* 高さはバー(.hero-usp-bar)いっぱいに伸ばす。ピルの段数が変わって
       バーが高くなっても、上下にオレンジの余白が出ずに追従する */
    width: 158px; align-self: stretch;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #fff; color: #e07d1a;
    font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: 0.01em;
    text-align: center;
}
/* 「業界最安級」の文字がキラッと光る */
.hero-usp-badge-text {
    display: inline-block; line-height: 1.15;
    background-image: linear-gradient(105deg,
        #e07d1a 0%, #e07d1a 43%,
        #ffd27a 48%, #fff2d4 50%, #ffd27a 52%,
        #e07d1a 57%, #e07d1a 100%);
    background-size: 300% 100%; background-position: 0% center;
    background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: badgeTextShine 3.2s ease-in-out infinite;
}
@keyframes badgeTextShine {
    0%, 25% { background-position: 100% center; }
    60%, 100% { background-position: 0% center; }
}
.hero-usp-list {
    flex: 0 1 auto;
    display: flex; flex-direction: column; gap: 10px;
    list-style: none; margin: 0; padding: 0;
}
.hero-usp-row { display: flex; gap: 16px; }
.hero-usp-pill {
    display: inline-flex; align-items: center; justify-content: center;
    height: 35px;
    background: #fff; color: #3a2a12;
    border-radius: 999px;
    padding: 0 18px;
    font-size: 21px; font-weight: 700; letter-spacing: 0.01em;
    white-space: nowrap;
}
.hero-usp-em { color: #f94313; }
/* 注釈マーク（※）とバー下部の注釈文 */
.hero-usp-mark { font-size: 0.6em; vertical-align: super; margin-left: 1px; font-weight: 400; }
.hero-usp-note {
    margin: 0; padding: 0 2px;
    color: rgb(255 255 255 / 92%);
    font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0.01em;
}
/* 1540px以下〜スマホ：hero-usp-list をスマホ仕様（ピル縦積み・小サイズ）に */
@media (max-width: 1540px) {
    .hero-usp-list { max-width: none; gap: 6px; margin-left: 0; align-items: flex-start; }
    .hero-usp-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 767px) {
    .hero-usp-pill {
        padding: 0 12px;
        font-size: 12px;
        font-weight: 600;
    }
    /* 長文ピルは余白だけ詰める（文字サイズは他のピルと同じ12px） */
    .hero-usp-pill--wide { padding: 0 10px; }
    .hero-usp-note { font-size: 10px; line-height: 1.4; }
}
/* --- テレビ放送スクショ 自動スクロール --- */
.tv-sec { background: #765433; padding: 20px 0 20px; overflow: hidden; position: relative; }
.tv-sec > .container, .tv-sec > .tv-marquee { position: relative; z-index: 2; }
/* 濃い背景なので浮遊する丸は白系に */
.tv-sec .float-dots span { background: rgba(255, 255, 255, 0.22) !important; }
.tv-eyebrow {
    text-align: center; font-size: 24px; font-weight: 700;
    color: #ffffff; letter-spacing: 0.06em; line-height: 1.5;
    margin-bottom: 26px;
}
/* contain: paint で描画範囲をこの要素内に閉じ込める。
   .tv-sec と二重に overflow:hidden で切り抜いた中でGPUアニメーションを動かすと、
   iOS Safari が描画結果を捨てて枠ごと真っ白になることがあるため */
.tv-marquee { position: relative; overflow: hidden; contain: paint; }
.tv-marquee-track {
    display: flex; gap: 16px; width: max-content;
    /* iOS Safari で描画が飛ぶのを防ぐため、GPU 合成レイヤーとして固定する */
    will-change: transform;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    animation: tvScroll 120s linear infinite;
}
/* マウス操作の環境だけ一時停止（タッチ端末はhoverが残り続けて止まったままになるため） */
@media (hover: hover) and (pointer: fine) {
    .tv-marquee:hover .tv-marquee-track { animation-play-state: paused; }
}
/* translate3d でGPU合成を明示（translateX だと端末により合成されず、
   メインスレッド描画になってスクロール中に止まることがある） */
@keyframes tvScroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-50% - 8px), 0, 0); }
}
.tv-shot {
    flex: 0 0 clamp(240px, 26vw, 380px);
    margin: 0; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: 10px; background: #e8e3da;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
    display: flex; align-items: center; justify-content: center;
}
.tv-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-shot-ph { color: #a59a86; font-size: 13px; letter-spacing: 0.08em; }
/* 放送スクショ入稿までの「準備中」表示 */
.tv-prep {
    max-width: 560px; margin: 0 auto; text-align: center;
    color: #ffffff; font-size: 17px; font-weight: 700;
    letter-spacing: 0.08em; line-height: 1.6;
    padding: 20px 24px; border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 767px) {
    .tv-sec { padding: 40px 0 44px; }
    .tv-eyebrow { font-size: 16px; margin-bottom: 18px; }
    .tv-prep { font-size: 15px; padding: 16px 18px; }
    /* 同名の @keyframes を上書きすると端末により解釈が割れるため、別名で定義する
       （gap が 12px なので折り返し位置は -50% - 6px） */
    .tv-marquee-track { gap: 12px; animation-name: tvScrollSp; animation-duration: 180s; }
    .tv-shot { flex: 0 0 62vw; }
    /* スマホでは背景の丸を22個→8個に減らす。
       同時に動くアニメーション要素が多いとメモリ不足でスクロールの描画が捨てられるため */
    .tv-sec .float-dots span:nth-child(n+9) { display: none; }
}
@keyframes tvScrollSp {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-50% - 6px), 0, 0); }
}
/* 「視差効果を減らす」設定でも流し続ける（意図的にアクセシビリティ設定より表示優先） */

/* ===== NEXTキャンペーン セクション ===== */
@property --camp-ang {
    syntax: '<angle>'; inherits: true; initial-value: 0deg;
}
.camp-sec {
    position: relative;
    /* パネル画像を右にずらしてカードを中央寄せするため、幅の狭いPCで画像の
       透明余白が数px はみ出す。横スクロールを出さないよう内側でクリップする */
    overflow: hidden;
    background-color: #ffcc62;
    background-image:
        repeating-conic-gradient(from var(--camp-ang) at 50% 50%, #ffe396 0deg 12deg, #ffcc62 12deg 24deg);
    padding: 54px 20px 64px;
    font-family: var(--f-sans);
    text-align: center;
    animation: campRays 40s linear infinite;
}
/* B: 放射光をゆっくり回転（1周期=24deg でシームレス） */
@keyframes campRays { to { --camp-ang: 24deg; } }
/* A: 白ドットのゆっくり明滅 */
@keyframes campTwinkle { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .camp-sec, .camp-sec::before { animation: none; }
}
.camp-sec--alt {
    /* max-width: 1000px; */
    /* margin: 80px auto; */
}
/* FV直下の1つ目のキャンペーンのみ、下の余白を広めに（料金セクションとの間を空ける） */
#campaign { padding-bottom: 180px; }
/* 白ドット：サンバーストの淡い側(#ffe396)のウェッジだけをmaskで表示。中心ぼかしより背面 */
.camp-sec::before {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.55) 0.8px, transparent 2px);
    background-size: 11px 11px;
    -webkit-mask-image: repeating-conic-gradient(from var(--camp-ang) at 50% 50%, #000 0deg 12deg, transparent 12deg 24deg);
            mask-image: repeating-conic-gradient(from var(--camp-ang) at 50% 50%, #000 0deg 12deg, transparent 12deg 24deg);
    animation: campTwinkle 4.5s ease-in-out infinite;
}
/* 中心ぼかし：濃色でフェード。ドット(::before)より前面に描画してドットを隠す */
.camp-sec::after {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(circle at 50% 50%, #ffcc62 0%, rgba(255,204,98,0.9) 28%, rgba(255,204,98,0) 92%);
}
.camp-inner { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; }
/* リボン */
.camp-ribbon {
    display: inline-block;
    background: #f23c93; color: #fff;
    font-size: 26px; font-weight: 600; letter-spacing: 0.04em;
    line-height: 1;
    padding: 12px 44px; margin-bottom: 14px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 50%, 100% 100%, 0 100%, 20px 50%);
}
.camp-ribbon-em { color: #fcff00; }
/* 「ずーっと」を少し大きく＋ポヨヨンと弾ませる */
.camp-ribbon-poyo {
    display: inline-block; line-height: 1;
    font-size: 1.2em; font-weight: 700;
    transform-origin: 50% 100%;
    animation: campRibbonPoyo 2.6s ease-in-out infinite;
}
@keyframes campRibbonPoyo {
    0%, 58%, 100% { transform: scale(1, 1) translateY(0); }
    64%           { transform: scale(1.14, 0.86) translateY(2px); }
    72%           { transform: scale(0.9, 1.14) translateY(-6px); }
    80%           { transform: scale(1.09, 0.93) translateY(0); }
    88%           { transform: scale(0.97, 1.04) translateY(-2px); }
    94%           { transform: scale(1.02, 0.99) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .camp-ribbon-poyo { animation: none; }
}
/* 見出し */
.camp-title {
    font-weight: 900; line-height: 1.1; letter-spacing: 0.02em;
    font-size: 48px; margin-bottom: 20px;
    text-shadow: 0 3px 0 rgba(0,0,0,0.06);
}
.camp-title-next {
    color: #fff; font-style: italic; margin-right: 6px;
    -webkit-text-stroke: 8px #ec7d3f;
    paint-order: stroke fill;
}
.camp-title-jp { color: #d76d95; }
/* 期間 */
.camp-period {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-bottom: 34px; flex-wrap: wrap;
}
.camp-period-tag {
    background: #4ba4ae; color: #fff;
    font-size: 24px; font-weight: 600; letter-spacing: 0.08em;
    padding: 6px 4px; border-radius: 10px;
}
.camp-period-date {
    color: #12a3b3; font-size: 28px; font-weight: 600; letter-spacing: 0.01em;
}
.camp-period-big { font-size: 1.3em; }
/* 2パネル構成 */
.camp-panels {
    display: flex; align-items: stretch; justify-content: center;
    gap: 20px; position: relative;
    font-family: var(--f-sans);
}
/* パネルを1枚画像で差し替えたとき */
.camp-panels--img { display: block; }
.camp-panels--img picture { display: block; }
/* パネル全体を申込リンクに。画像が透過のため box-shadow ではなく
   アルファ形状に沿う drop-shadow でホバーを表現する */
.camp-panel-link {
    display: block; line-height: 0;
    transition: transform 0.25s ease, filter 0.25s ease;
}
.camp-panel-link:hover { transform: translateY(-3px); filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.22)); }
.camp-panel-link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 8px; }
.camp-panels--img img {
    width: 100%; max-width: 1080px; height: auto;
    margin: 0 auto; display: block;
}
/* PC：パネル画像は左右に透明の余白（COUPONバッジのはみ出し用）があるため、
   画像幅＝白いカードの見え幅ではない。カードは画像幅の 89.702%、中心は画像中心より
   3.051% 左にある。そこで画像を右へ 3.051% ずらしてカードを中央に置き、
   セット内容アコーディオン側をカードの見え幅（画像 max-width 1080px × 0.89702）に合わせる。
   ※SPは全面塗りの専用画像に切り替わるため適用しない */
@media (min-width: 768px) {
    .camp-panels--img img { transform: translateX(3.051%); }
    .camp-value,
    .camp-inner .camp-select-guide { width: 89.702%; max-width: 969px; }
}
.camp-em-red { color: #f94415; }
.camp-panel {
    flex: 1 1 0; min-width: 0; max-width: 400px;
    background: #fff; border-radius: 0px;
    padding: 12px 20px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    text-align: left;
}
.camp-panel--ruck { border-top: 5px solid #62a2bc; border-bottom: 5px solid #4a95be; }
.camp-panel--set { border-top: 5px solid #ffa25d; border-bottom: 5px solid #ffa25d; }
/* めっちゃ控えめなふわふわ */
@keyframes campPanelFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.camp-panel--ruck, .camp-panel--set {
    animation: campPanelFloat 5s ease-in-out infinite;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .camp-panel--ruck, .camp-panel--set { animation: none; }
}
/* ＋ */
.camp-panels-plus {
    align-self: center; flex: 0 0 auto;
    color: #f94416; font-size: 58px; font-weight: 600; line-height: 1;
}
/* パネル見出し */
.camp-panel-head { display: flex; align-items: center; gap: 14px; }
.camp-panel-badge {
    flex: 0 0 auto;
    width: 110px; height: 110px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; font-size: 20px; font-weight: 600; line-height: 1.3; text-align: center;
}
.camp-panel-badge b { font-weight: 600; }
.camp-panel-badge small { font-size: 15px; font-weight: 600; }
.camp-panel-badge--red {
    background: linear-gradient(145deg, #ff8a5c 0%, #ea593f 42%, #c22d24 100%);
}
.camp-panel-badge--pink {
    background: linear-gradient(145deg, #ff74bb 0%, #ef4296 42%, #bd1470 100%);
}
.camp-panel-badge--red, .camp-panel-badge--pink {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* バッジの「きらん」：画面に入った時に1回だけ走らせる */
.camp-panel-badge { position: relative; overflow: hidden; }
.camp-panel-badge > * { position: relative; z-index: 2; }
.camp-panel-badge::before {
    content: ''; position: absolute; z-index: 1; pointer-events: none;
    top: -50%; left: -70%; width: 34%; height: 200%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(14deg);
}
/* セクション単位で発火＝赤とピンクが同じタイミングで光る */
.camp-sec.is-shine .camp-panel-badge::before {
    animation: badgeShine 1.1s ease-in-out 0.25s 1 both;
}
@keyframes badgeShine {
    from { left: -70%; }
    to   { left: 140%; }
}
@media (prefers-reduced-motion: reduce) {
    .camp-panel-badge::before { display: none; }
}
.camp-panel-title { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.camp-panel-cat { font-size: 18px; font-weight: 600; color: #222; white-space: nowrap; }
.camp-panel-name { font-size: 28px; font-weight: 600; color: #222; line-height: 1.1; white-space: nowrap; }
.camp-panel-order { font-size: 28px; font-weight: 600; color: #f94415; line-height: 1.1; white-space: nowrap; }
.camp-panel-order-suffix { font-size: 18px; }
.camp-panel-order .camp-em-red { color: #f94415; }
.camp-panel--set .camp-panel-order { color: #f94313; }
/* 点線区切り */
.camp-panel-body {
    margin-top: 18px; padding-top: 20px;
    border-top: 3px dotted #cbb48f;
}
/* 左パネル本文 */
.camp-panel-body:not(.camp-panel-body--set) { display: flex; align-items: flex-start; gap: 10px; }
.camp-panel-info { flex: 1 1 auto; }
.camp-panel-tag {
    display: inline-block; background: #f18d04; color: #fff;
    font-size: 16px; font-weight: 500; padding: 0px 10px; border-radius: 5px; margin-bottom: 10px;
}
/* 金額（明朝体・数字32px/円〜18px/月12px/税込8px） */
.camp-panel-price { color: #222; line-height: 1; }
.camp-panel-price-num { font-family: var(--f-serif); font-weight: 600; font-size: 40px; margin-right: 8px; }
.camp-panel-price-yenwrap { position: relative; font-family: var(--f-serif); font-weight: 600; font-size: 22.5px; }
.camp-panel-price-tax {
    position: absolute; left: 25%; bottom: 90%; transform: translateX(-50%);
    font-family: var(--f-sans); font-size: 10px; font-weight: 500; white-space: nowrap;
    line-height: 1; text-decoration: none;
}
.camp-panel-price-month { font-family: var(--f-serif); font-weight: 600; font-size: 15px; }
.camp-panel-price-note { color: #999; font-size: 11px; font-weight: 400; line-height: 1.4; margin-top: 4px; }
.camp-panel-perday {
    display: inline-block;
    color: #222; font-size: 18px; font-weight: 600; margin-top: 6px; white-space: nowrap;
    background: linear-gradient(transparent 58%, rgb(255 242 17 / 75%) 58%);
    padding: 0 2px;
}
.camp-panel-desc { color: #333; font-size: 13px; font-weight: 500; line-height: 1.65; margin-top: 16px; }
.camp-panel-img--ruck { width: 240px; height: auto; flex: 0 0 auto; align-self: center; }
/* 右パネル本文 */
.camp-panel-img--set { width: 100%; height: auto; }
.camp-panel-priceline { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
.camp-panel-price-strike {
    color: #545454; font-size: 32px; font-weight: 600;
}
/* 300 に左上→右下の斜め赤ライン（数字の見た目の高さに合わせる） */
.camp-panel-price-strike .camp-panel-price-num { position: relative; display: inline-block; line-height: 1; }
.camp-panel-price-strike .camp-panel-price-num::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0.16em; bottom: 0.02em; pointer-events: none;
    background: linear-gradient(to top right, transparent calc(50% - 1px), #eb5332 calc(50% - 1px), #eb5332 calc(50% + 1px), transparent calc(50% + 1px));
}
.camp-panel-arrow { color: #f94415; font-size: 26px; }
.camp-panel-free { font-family: var(--f-serif); font-size: 44px; font-weight: 600; }
.camp-panel-note { color: #555; font-size: 12px; font-weight: 500; line-height: 1.6; }
/* CTA（パネル枠外） */
/* --- キャンペーンの中身：セット内容を具体的に見せるブロック --- */
.camp-value {
    position: relative; z-index: 1;
    max-width: 1000px; margin: 30px auto 0;
    background: #fff; border-radius: 20px;
    box-shadow: 0 8px 22px rgba(120, 80, 10, 0.16);
    text-align: center; overflow: hidden;
}
/* セット内容アコーディオン */
.camp-acc-head {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 18px 20px;
    font-family: var(--f-sans); font-size: 19px; font-weight: 700; color: #422f20;
    line-height: 1.4; transition: background 0.2s ease;
}
.camp-acc-head::-webkit-details-marker { display: none; }
.camp-acc-head:hover { background: #fff8ec; }
.camp-acc-caret {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: #ed5e3b; color: #fff; font-size: 13px;
}
.camp-acc-caret i { transition: transform 0.25s ease; }
.camp-acc[open] .camp-acc-caret i { transform: rotate(180deg); }
.camp-acc-body { padding: 4px 26px 26px; border-top: 1px dashed #e2d8cc; margin-top: -1px; padding-top: 22px; }
.camp-items-group + .camp-items-group { margin-top: 26px; }
.camp-items-label {
    font-family: var(--f-sans); font-size: 16px; font-weight: 700; color: #422f20;
    line-height: 1.9; margin-bottom: 12px;
}
/* 数字だけ大きくすると和文より上に浮くので少し下げる */
.camp-items-label b {
    font-family: 'Roboto', var(--f-sans); font-size: 1.3em; color: #ed5e3b;
    position: relative; top: 0.06em;
}
.camp-items-label-tag {
    display: inline-block; vertical-align: 0.1em; margin-right: 8px;
    background: #62a2bc; color: #fff;
    font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
    padding: 3px 12px; border-radius: 999px;
}
.camp-items-label-tag--home { background: #ed5d3b; }
.camp-items {
    list-style: none; margin: 0;
    display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px;
}
.camp-item { display: flex; flex-direction: column; align-items: center; }
.camp-item-img {
    display: block; width: 100%; aspect-ratio: 1; overflow: hidden;
    background: #fff; border: 1px solid #ecdfcc; border-radius: 10px;
}
.camp-item-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 背景ごと撮影された写真は枠いっぱいに（余白が出ないよう cover） */
.camp-item-img--cover img { object-fit: cover; }
.camp-item-name {
    margin-top: 5px; font-size: 11px; font-weight: 600; color: #6b5b45;
    line-height: 1.35; letter-spacing: -0.01em; overflow-wrap: anywhere;
}
.camp-item-qty {
    margin-left: 3px; white-space: nowrap;
    font-family: 'Roboto', var(--f-sans); font-weight: 700; font-size: 1.1em; color: #ed5e3b;
}
@media (max-width: 900px) {
    .camp-items { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .camp-acc-head { font-size: 16px; padding: 15px 14px; }
    .camp-acc-body { padding: 18px 12px 20px; }
    .camp-items-label { font-size: 14px; }
    .camp-items-label-tag { font-size: 11px; padding: 2px 10px; }
    .camp-items { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .camp-item-name { font-size: 10px; }
}
.camp-card-cta {
    display: inline-flex; align-items: center; gap: 12px;
    background: #fff400; color: #ec4217;
    font-size: 27px; font-weight: 600; letter-spacing: 0.02em;
    padding: 13px 46px; border-radius: 999px; margin-top: 10px;
    box-shadow: 0 6px 0 rgb(113 113 113 / 35%);
    position: relative; overflow: hidden;
    animation: campPulse 1.6s ease-in-out infinite;
}
/* キラーン：光の帯が斜めに横切る */
.camp-card-cta::before {
    content: ''; position: absolute; top: -60%; left: -80%;
    width: 45%; height: 220%; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.85) 50%, transparent 65%);
    transform: rotate(20deg);
    animation: campShine 3.2s ease-in-out infinite;
}
@keyframes campShine {
    0%, 22% { left: -80%; }
    55%, 100% { left: 135%; }
}
/* 押されやすい脈動 */
@keyframes campPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.045); }
}
.camp-card-cta:hover {
    animation-play-state: paused;
    filter: brightness(1.05);
    color: #d33914;
    background: #ffdd00;
}
.camp-card-cta-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: #3a3a3a; color: #fff400; font-size: 14px;
}
/* レスポンシブ */
@media (max-width: 1023px) {
    .camp-sec { padding: 40px 16px 46px; }
    #campaign { padding-bottom: 110px; }
    .camp-ribbon { font-size: 17px; padding: 10px 25px; line-height: 1.45; text-align: center; }
    .camp-title-next { -webkit-text-stroke: 4px #f6a273; }
    .camp-title { font-size: 38px; }
    .camp-period-tag { font-size: 14px; }
    .camp-period-date { font-size: 17px; }
    .camp-period { gap: 10px; margin-bottom: 24px; }
    .camp-panels { flex-direction: column; gap: 12px; }
    .camp-panels-plus { font-size: 40px; }
    .camp-panel { padding: 20px 18px 22px; }
    .camp-panel--ruck,
    .camp-panel--set { align-self: center; }
    .camp-panel-badge { width: 76px; height: 76px; font-size: 13px; }
    .camp-panel-badge b { font-size: 15px; }
    .camp-panel-cat { font-size: 13px; }
    .camp-panel-name { font-size: 24px; }
    .camp-panel-order { font-size: 18px; }
    .camp-panel-price-num { font-size: 44px; }
    .camp-panel-price-unit { font-size: 20px; }
    .camp-panel-perday { font-size: 18px; }
    .camp-panel-desc { font-size: 12px; }
    .camp-panel-free { font-size: 32px; }
    .camp-panel-price-strike { font-size: 21px; }
    .camp-card-cta { font-size: 19px; padding: 14px 28px; }
}
@media (max-width: 560px) {
    .camp-title { font-size: 30px; }
    .camp-panel-img--ruck { width: 150px; }
    .camp-card-cta { font-size: 17px; padding: 13px 22px; }
}
/* FVリュック画像：基準高さ(ヘッダー下〜usp-bar上)と同じ。下に90pxずらしてusp-barの前面にはみ出す */
.hero-backpacks {
    position: absolute;
    top: 90px; left: 50%;
    transform: translateX(-50%);
    height: calc(100% - 130px); width: auto; max-width: none;
    z-index: 3;
    pointer-events: none;
}
.hero-backpacks--sp { display: none; }
.hero-characters {
    position: absolute;
    left: calc(50% - 250px);
    /* --usp-bar-h は特徴バーの実測高さ（JSが設定）。ピルが縦積みになって
       バーが高くなる1540px以下でもキャラクターがバーの上に立つ。
       JS未実行時は従来どおり128pxで表示 */
    bottom: var(--usp-bar-h, 128px);
    transform: translateX(-50%);
    /* --chars-k は画面高さに応じた縮小率（下の height メディアクエリで指定） */
    width: calc(400px * var(--chars-k, 1)); height: auto;
    z-index: 4;
}
/* 1450px以下〜スマホ：キャラクターをさらに左へ */
@media (max-width: 1450px) {
    .hero-characters { left: calc(50% - 330px); }
}
/* 1200px以下：ピルが縦積みでバーが高くなり、左端の余白も狭くなるため一回り縮小 */
@media (min-width: 768px) and (max-width: 1200px) {
    .hero-characters { --chars-k: 0.85; }
}

/* --- 画面高さが低いPC：バッジ・キャラクターを縮小し、ピルの数を減らしてFV内に収める --- */
/* 880px以下：わずかに縮小 */
@media (min-width: 1024px) and (max-height: 880px) {
    .hero-badge { --badge-k: 0.9; }
    .hero-characters { --chars-k: 0.9; }
}
/* 820px以下：さらに縮小し、ピルを4→3個に */
@media (min-width: 1024px) and (max-height: 820px) {
    .hero-badge { --badge-k: 0.78; }
    .hero-characters { --chars-k: 0.78; }
    .hero-usp-pill { height: 32px; font-size: 19px; padding: 0 15px; }
    .hero-usp-row:nth-child(2) .hero-usp-pill:last-child { display: none; }
}
/* 740px以下：最小サイズ。2段目のピルを丸ごと非表示にして4→2個に */
@media (min-width: 1024px) and (max-height: 740px) {
    .hero-badge { --badge-k: 0.64; }
    .hero-characters { --chars-k: 0.64; }
    .hero-usp-badge { width: 132px; font-size: 20px; }
    .hero-usp-pill { height: 29px; font-size: 17px; padding: 0 13px; }
    .hero-usp-row:nth-child(2) { display: none; }
    .hero-usp-note { font-size: 11px; }
}
/* 1024〜1400px はバッジが元々半分サイズなので、高さによる縮小はごく控えめに */
@media (min-width: 1024px) and (max-width: 1400px) and (max-height: 880px) {
    .hero-badge { --badge-k: 0.96; }
}
@media (min-width: 1024px) and (max-width: 1400px) and (max-height: 740px) {
    .hero-badge { --badge-k: 0.88; }
}
.hero-content {
    max-width: 900px; margin: 0 auto; text-align: center; color: #222222;
    position: relative; z-index: 2;
    /* 画面中央から250px左＋やや上に配置（キャラクターとの重なりを避ける） */
    transform: translate(-250px, -45px);
}
/* 背面の白いボカシ円：柄背景から文字を浮かせる */
.hero-content::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    left: 50%; top: 50%; translate: -50% -50%;
    width: 640px; height: 580px;
    background: radial-gradient(closest-side,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.88) 52%,
        rgba(255, 255, 255, 0) 100%);
}
.hero-bene {
    position: absolute; top: 50%; left: 50%;
    transform: translate(120px, 90px);
    width: 361px; height: auto; z-index: 2;
}
.hero-top {
    display: inline-flex; flex-direction: column; align-items: flex-start;
}
.hero-catch {
    font-family: var(--f-sans);
    font-size: 32px; font-weight: 700; letter-spacing: 0.02em;
    margin-bottom: 16px; color: #222222;
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
}
.hero-catch .catch-num { font-size: 1.3em; }
.hero-catch .catch-marker {
    background: linear-gradient(transparent 60%, rgb(255 242 17 / 75%) 60%);
    padding: 0 3px;
}
.hero-catch .catch-box {
    background: #ffffff;
    border: 2px solid #222222;
    padding: 0 7px;
    line-height: 1.4;
}
/* --- FV：hero-content（赤リボン＋大型価格＋チェック行＋タイトル） --- */
/* 価格まわりは1枚画像（赤リボン＋月額680円〜） */
.hero-price-img { width: 100%; max-width: 400px; margin: 0 auto 4px; }
.hero-price-img img { width: 100%; height: auto; display: block; }
.hero-ribbon {
    display: inline-block;
    background: #422f20; color: #fff;
    font-family: var(--f-sans);
    font-size: 24px; font-weight: 500; letter-spacing: 0.06em;
    padding: 26px 26px 4px; margin-bottom: 14px;
    line-height: 1.5;
    text-align: center;
}
/* 「東京理科大学工学部建築学科」は「高橋治教授」の上に左寄せで乗せる。
   監修者名は黄色＋太字で他より目立たせる */
.hero-ribbon .ribbon-name {
    position: relative;
    display: inline-block;
    font-size: 1.12em; font-weight: 700; color: #ffe14d;
}
/* 「?」ボタン：クリックで監修者の経歴PDFをモーダル表示 */
/* 白丸に赤い「i」のアイコン画像。学科名の行と上下中央で揃え、
   丸の直径を行より大きくしてリボンの上辺から少しはみ出させる */
.hero-ribbon .ribbon-help {
    appearance: none; -webkit-appearance: none;
    position: absolute; left: 100%; top: 50%; translate: 0 -50%;
    margin-left: 9px; padding: 0; border: 0; background: none;
    /* ボタンはUA既定のフォントサイズになるため、em指定が効くよう親から継承させる */
    font-size: 1em;
    width: 1.9em; height: 1.9em; line-height: 0;
    cursor: pointer;
}
/* 押せることに気づいてもらうため、ぽよよんと跳ねる動きを繰り返す */
.hero-ribbon .ribbon-help img {
    width: 100%; height: 100%; display: block;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
    transform-origin: 50% 90%;
    animation: ribbonHelpBoing 2.6s ease-in-out infinite;
}
@keyframes ribbonHelpBoing {
    0%, 55%, 100% { transform: translateY(0)     scale(1, 1); }
    8%            { transform: translateY(0)     scale(1.12, 0.88); }  /* ためて潰れる */
    20%           { transform: translateY(-22%)  scale(0.94, 1.08); }  /* ぽーん */
    32%           { transform: translateY(0)     scale(1.08, 0.92); }  /* 着地でつぶれる */
    42%           { transform: translateY(-7%)   scale(0.98, 1.02); }  /* 小さくもう一跳ね */
}
.hero-ribbon .ribbon-help:hover { scale: 1.12; }
@media (prefers-reduced-motion: reduce) {
    .hero-ribbon .ribbon-help img { animation: none; }
}
.hero-ribbon .ribbon-help:focus-visible { outline: 3px solid #ffe14d; outline-offset: 3px; border-radius: 50%; }
.hero-ribbon .ribbon-sub {
    position: absolute;
    left: 0; bottom: 100%;
    font-size: 0.72em; font-weight: 700; letter-spacing: 0.04em; line-height: 1.25;
    white-space: nowrap; color: #ffd24d;
}
.hero-title .em-dots {
    padding-top: 0.22em;
    background-image: radial-gradient(circle, currentColor 0.05em, transparent 0.06em);
    background-size: 1em 0.16em;
    background-position: 0 0.22em;
    background-repeat: repeat-x;
}
.hero-title .title-line2 { margin-left: 0; }
.hero-title .furi-wrap { position: relative; }
.hero-title .furi {
    position: absolute; top: -0.42em; left: 50%; transform: translateX(-50%);
    font-family: var(--f-sans);
    font-size: 15px; font-weight: 600; letter-spacing: 0.4em; text-indent: 0.4em;
    white-space: nowrap; line-height: 1;
}
.hero-cta { margin-top: 48px; display: flex; flex-direction: column; align-items: center; }
.hero-cta-balloon {
    position: relative; z-index: 3;
    background: #fff; color: var(--c-text);
    border: 2px solid #ccc;
    font-weight: 500; font-size: 17px; line-height: 1.5;
    padding: 2px 29px 4px; border-radius: 50px;
    margin-bottom: -6px;
    letter-spacing: 0.05em;
}
.hero-cta-balloon .accent { color: var(--c-main); }
.hero-cta-balloon .num { font-size: 23px; }
.hero-cta-balloon::before {
    content: ''; position: absolute;
    bottom: -11px; left: 50%; transform: translateX(-50%);
    border-width: 11px 11px 0 11px; border-style: solid;
    border-color: #ccc transparent transparent transparent;
}
.hero-cta-balloon::after {
    content: ''; position: absolute;
    bottom: -8px; left: 50%; transform: translateX(-50%);
    border-width: 9px 9px 0 9px; border-style: solid;
    border-color: #fff transparent transparent transparent;
}
.btn-mail {
    background: linear-gradient(90deg, #FF7043, var(--c-main-light));
    color: var(--c-white);
    padding: 13px 88px 13px 56px;
    font-size: 22px; font-weight: 600;
    min-width: 402px; /* 旧ボタン「メールで資料を受け取る」と同じ幅を維持 */
}
.btn-mail-text { display: flex; flex-direction: column; align-items: center; }
.btn-mail .sub-text { font-size: 14px; font-weight: 500; line-height: 1.4; }
.btn-mail .main-text { font-size: 24px; font-weight: 700; line-height: 1.4; }
.btn-mail:hover {
    transform: translateY(-3px);
    color: var(--c-white);
}
.btn-mail .circle-arrow {
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 50%;
    background: #fff; color: var(--c-main);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.hero-title {
    font-family: 'Source Han Serif JP', 'Source Han Serif', '源ノ明朝', 'Noto Serif JP', serif;
    font-size: 48px; font-weight: 600; line-height: 1.5; margin-bottom: 24px;
}
.hero-title .highlight { color: #fffb8c; font-size: 1.2em; }
.hero-lead {
    font-size: 1.3rem; margin-bottom: 2.5rem; font-weight: 700;
    background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px);
    padding: 1.5rem 2rem; border-radius: 12px; display: inline-block;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    line-height: 1.8; color: var(--c-text);
}
.hero .btn-main { border: 4px solid #fff; }
.hero-balloon {
    position: relative; display: inline-block;
    background: #fff; color: var(--c-main);
    font-weight: 900; font-size: 1.15rem;
    padding: 0.8rem 1.8rem; border-radius: 50px;
    margin-top: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    letter-spacing: 0.05em;
}
.hero-balloon::before {
    content: ''; position: absolute;
    top: -10px; left: 50%; transform: translateX(-50%);
    border-width: 0 10px 10px 10px; border-style: solid;
    border-color: transparent transparent #fff transparent;
}

/* --- 監修アイテム紹介スライダー --- */
/* 背景はFVと同じ斜めストライプ */
.items-sec {
    background: repeating-linear-gradient(110deg, #ffeac6 0 44px, #ffefd4 44px 88px);
}
.items-eyebrow {
    text-align: center; font-size: 17px; font-weight: 700;
    color: var(--c-main); letter-spacing: 0.06em; margin-bottom: 6px;
    line-height: 1.55;
}
/* 「×」は独立した1行として中央に置く */
.items-eyebrow-x { display: block; line-height: 1.2; letter-spacing: 0; }
.items-title {
    text-align: center; font-family: var(--f-serif);
    font-size: 34px; font-weight: 700; color: #2b2419;
    letter-spacing: 0.04em; margin-bottom: 38px;
}
/* 画面幅いっぱいに流すスライダー */
.items-carousel { position: relative; width: 100%; --cat-accent: var(--c-main); }
.items-track {
    display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 6px 20px 10px; scrollbar-width: none;
}
.items-track::-webkit-scrollbar { display: none; }
.items-card {
    flex: 0 0 clamp(240px, 22vw, 320px); scroll-snap-align: center;
}
/* 矢印はコンテンツ幅（最大1000px）の外側に配置 */
.items-arrow { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
.items-arrow--prev { left: max(6px, calc(50% - 523px)); }
.items-arrow--next { right: max(6px, calc(50% - 523px)); }
@media (max-width: 767px) {
    .items-title { font-size: 24px; margin-bottom: 26px; }
    .items-eyebrow { font-size: 14px; }
    .items-track { gap: 14px; padding: 6px 14px 10px; }
    .items-card { flex: 0 0 74vw; }
}
/* スライダー内は横並びカードにせず縦のまま */
@media (max-width: 560px) {
    .items-card.intro-panel { flex-direction: column; }
    .items-card .intro-panel-img { flex: none; aspect-ratio: 4 / 3; }
    /* cover指定の画像はスマホでもPCと同じ9:6を維持 */
    .items-card .intro-panel-img--cover { aspect-ratio: 9 / 6; }
    .items-card .intro-panel-body { padding: 14px 14px 16px; }
}

/* --- 問題提起 (Risk) --- */
.risk-sec {
    position: relative;
    /* 背景画像は一旦オフ（構成見直し中）／淡いクリーム系 */
    background: linear-gradient(#fffdf8, #fdf4e6);
    color: var(--c-text);
    overflow: hidden;
}
.risk-sec .container { position: relative; z-index: 2; }
/* 背景を不規則に舞う小さな丸 */
.float-dots {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden; pointer-events: none;
}
.float-dots span {
    position: absolute; bottom: -40px;
    border-radius: 50%;
    background: rgba(230, 81, 0, 0.16);
    animation: floatDot 18s linear infinite;
}
/* 位置・大きさ・速さ・開始タイミングをバラバラに */
.float-dots span:nth-child(1)  { left:  4%; width: 10px; height: 10px; animation-duration: 17s; animation-delay:  0s;  }
.float-dots span:nth-child(2)  { left: 12%; width:  6px; height:  6px; animation-duration: 23s; animation-delay: -4s;  background: rgba(255, 143, 0, 0.22); }
.float-dots span:nth-child(3)  { left: 21%; width: 16px; height: 16px; animation-duration: 14s; animation-delay: -9s;  }
.float-dots span:nth-child(4)  { left: 29%; width:  8px; height:  8px; animation-duration: 26s; animation-delay: -2s;  background: rgba(204, 164, 59, 0.24); }
.float-dots span:nth-child(5)  { left: 38%; width: 12px; height: 12px; animation-duration: 19s; animation-delay: -13s; }
.float-dots span:nth-child(6)  { left: 46%; width:  5px; height:  5px; animation-duration: 21s; animation-delay: -6s;  background: rgba(255, 143, 0, 0.22); }
.float-dots span:nth-child(7)  { left: 55%; width: 14px; height: 14px; animation-duration: 16s; animation-delay: -11s; }
.float-dots span:nth-child(8)  { left: 63%; width:  7px; height:  7px; animation-duration: 24s; animation-delay: -1s;  background: rgba(204, 164, 59, 0.24); }
.float-dots span:nth-child(9)  { left: 71%; width: 11px; height: 11px; animation-duration: 20s; animation-delay: -16s; }
.float-dots span:nth-child(10) { left: 80%; width: 18px; height: 18px; animation-duration: 15s; animation-delay: -7s;  }
.float-dots span:nth-child(11) { left: 88%; width:  6px; height:  6px; animation-duration: 25s; animation-delay: -19s; background: rgba(255, 143, 0, 0.22); }
.float-dots span:nth-child(12) { left: 95%; width:  9px; height:  9px; animation-duration: 18s; animation-delay: -3s;  }
.float-dots span:nth-child(13) { left:  8%; width:  7px; height:  7px; animation-duration: 22s; animation-delay: -14s; background: rgba(255, 143, 0, 0.22); }
.float-dots span:nth-child(14) { left: 17%; width: 13px; height: 13px; animation-duration: 16s; animation-delay: -21s; }
.float-dots span:nth-child(15) { left: 25%; width:  5px; height:  5px; animation-duration: 27s; animation-delay: -5s;  background: rgba(204, 164, 59, 0.24); }
.float-dots span:nth-child(16) { left: 34%; width:  9px; height:  9px; animation-duration: 20s; animation-delay: -17s; }
.float-dots span:nth-child(17) { left: 42%; width: 15px; height: 15px; animation-duration: 15s; animation-delay: -8s;  }
.float-dots span:nth-child(18) { left: 51%; width:  6px; height:  6px; animation-duration: 24s; animation-delay: -23s; background: rgba(255, 143, 0, 0.22); }
.float-dots span:nth-child(19) { left: 59%; width: 10px; height: 10px; animation-duration: 18s; animation-delay: -12s; }
.float-dots span:nth-child(20) { left: 67%; width:  8px; height:  8px; animation-duration: 26s; animation-delay: -18s; background: rgba(204, 164, 59, 0.24); }
.float-dots span:nth-child(21) { left: 76%; width: 12px; height: 12px; animation-duration: 17s; animation-delay: -25s; }
.float-dots span:nth-child(22) { left: 92%; width: 14px; height: 14px; animation-duration: 21s; animation-delay: -10s; }
@keyframes floatDot {
    0%   { transform: translate(0, 0) scale(1);      opacity: 0; }
    12%  {                                           opacity: 1; }
    35%  { transform: translate(22px, -32vh) scale(1.1); }
    65%  { transform: translate(-18px, -64vh) scale(0.9); }
    88%  {                                           opacity: 1; }
    100% { transform: translate(14px, -105vh) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .float-dots { display: none; }
}
.risk-sec .sec-title { color: var(--c-text); }
.risk-sec .sec-title span { color: var(--c-main); }

.risk-media {
    max-width: 1100px; margin: 0 auto 48px;
}
.risk-media-fig {
    margin: 0;
}
.risk-media-fig img {
    width: 100%; height: auto; display: block;
}
/* 画像下の大見出し（#f94313 文字 ＋ #ebebeb 袋文字） */
.risk-media-heading {
    font-family: var(--f-serif);
    text-align: center; font-weight: 900; line-height: 1.3;
    font-size: 42px; letter-spacing: 0.02em;
    margin: 18px 0 28px;
    color: #f94313;
    -webkit-text-stroke: 6px #ebebeb;
    paint-order: stroke fill;
}
.risk-svg-defs { position: absolute; width: 0; height: 0; }
/* 画像に被せる上見出し */
.risk-media-heading--over {
    position: relative; z-index: 2;
    margin-top: -4%; margin-bottom: 10px;
    /* 文字の輪郭をガビガビ・ボロボロに崩す */
    filter: url(#rough-text);
}
/* 1つ目（他人事）は元の位置 */
.risk-media-heading--disaster { margin-top: -9%; }
/* 2つ目（避難所）は現状位置のまま文字色のみ変更 */
.risk-media-heading--shelter { color: #363636; }
.risk-media-heading--pink {
    font-size: 36px; margin: 8px 0 8px;
    color: #f23c93;
}
/* 画像下のリード文 */
.risk-media-lead {
    text-align: center; font-size: 22px; font-weight: 400; line-height: 1.9;
    color: var(--c-text); margin: 56px 0;
}
/* 黄色マーカー（下2/3にラインを敷く） */
.hl-marker {
    background: linear-gradient(transparent 62%, #fbff6b 62%);
    font-weight: 600;
    padding: 0 2px;
}
.risk-media-lead .marker {
    display: inline-block;
    font-weight: 700;
    color: var(--c-main-dark);
    border: 2px solid var(--c-main);
    border-radius: 6px;
    padding: 6px 18px;
    margin-top: 6px;
}

.risk-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    max-width: 1000px; margin: 0 auto 48px;
}
.risk-card {
    border-radius: 12px; overflow: hidden; line-height: 0;
    border: 1px solid rgba(0,0,0,0.08);
}
.risk-card img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.risk-lead {
    text-align: center; font-size: 21px; font-weight: 500; line-height: 2;
    color: var(--c-gray); margin-bottom: 48px;
}
.risk-lead .text-accent { color: var(--c-main); }
.risk-followup { background: #f2e7ce; position: relative; overflow: hidden; }
.risk-followup::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    border-width: 34px 42px 0 42px; border-style: solid;
    border-color: #fdf6e8 transparent transparent transparent;
    z-index: 2;
}
/* 砂埃テクスチャを背景に重ねる */
.risk-followup::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: url('../images/top/risk-dust.webp') center center / cover no-repeat;
}
.risk-followup .container { position: relative; z-index: 1; }
.risk-voice {
    display: grid; grid-template-columns: 135px 1fr 135px; gap: 10px;
    align-items: center; max-width: 1180px; margin: 0 auto;
}
.risk-person {
    display: flex; align-items: flex-end; justify-content: center;
    transform: translateY(70px);
    /* 吹き出しより人物を前面に */
    position: relative; z-index: 3;
}
.risk-person img { width: 100%; height: auto; display: block; }
.risk-bubbles { list-style: none; display: flex; flex-direction: column; gap: 18px; position: relative; z-index: 1; }
.risk-bubbles li {
    position: relative; display: inline-block; width: fit-content; max-width: 100%;
    background: #ffffff; color: #2a2724;
    border-radius: 999px; padding: 15px 52px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.28);
    font-size: 16px; font-weight: 500; line-height: 1.65; white-space: nowrap;
}
.risk-bubbles li.is-left { align-self: flex-start; text-align: left; }
.risk-bubbles li.is-right { align-self: flex-end; text-align: right; }
.risk-bubbles .voice-warn { color: #f94416; font-weight: 700; }
.risk-bubbles li:nth-child(2) { padding-right: 70px; }
.risk-bubbles li:nth-child(3) { padding-left: 70px; }
/* 思考の吹き出し（もくもく）: 大小2つの丸を連ねる */
.risk-bubbles li::before,
.risk-bubbles li::after {
    content: ''; position: absolute; border-radius: 50%; background: #ffffff;
}
.risk-bubbles li.is-left::before { width: 15px; height: 15px; left: -16px; bottom: 8px; }
.risk-bubbles li.is-left::after  { width: 8px;  height: 8px;  left: -30px; bottom: 0px; }
.risk-bubbles li.is-right::before { width: 15px; height: 15px; right: -16px; bottom: 8px; }
.risk-bubbles li.is-right::after  { width: 8px;  height: 8px;  right: -30px; bottom: 0px; }
/* risk-voice：幅が足りなくなったら吹き出しを上・左右の人物画像を下に横並び */
@media (max-width: 1065px) {
    .risk-voice {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "bubbles bubbles" "left right";
        gap: 18px 12px; align-items: end;
    }
    .risk-bubbles { grid-area: bubbles; }
    .risk-person { display: flex; transform: none; }
    .risk-person--left { grid-area: left; }
    .risk-person--right { grid-area: right; }
    .risk-person img { max-width: 150px; margin: 0 auto; }
}

@media (max-width: 767px) {
    .risk-media { margin-bottom: 32px; }
    .risk-media-heading { font-size: 26px; -webkit-text-stroke-width: 3.5px; margin: 14px 0 20px; }
    .risk-media-heading--pink { font-size: 30px; margin: 6px 0 6px; }
    .risk-media-lead { font-size: 16px; line-height: 1.8; margin: 18px 0 14px; }
    .risk-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 32px; }
    .risk-lead { font-size: 17px; margin-bottom: 32px; }
    .risk-bubbles li { font-size: 13px; padding: 13px 20px; white-space: normal; border-radius: 20px; }
    .risk-bubbles li:nth-child(2), .risk-bubbles li:nth-child(3) { padding-left: 20px; padding-right: 20px; }
    .risk-bubbles li::after { display: none !important; }
    .risk-bridge { font-size: 20px; }
    /* お悩みセクション：見出しを小さく、人物は半分のサイズに */
    .risk-followup .sec-title { font-size: 20px; }
    .risk-followup .sec-title span.sec-title-accent { font-size: 28px; }
    .risk-person img { max-width: 75px; }
}

/* --- ココツナとは (About) --- */
.about-sec { background: #fffcf5; position: relative; overflow: hidden; padding-bottom: 160px; }
.about-sec::after {
    content: ''; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
    background: radial-gradient(circle, rgba(230,81,0,0.06) 2px, transparent 2.2px) 0 0 / 26px 26px;
    transform: rotate(45deg); transform-origin: center;
}
.about-sec::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 18px; z-index: 1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cpolygon points='0,0 36,0 18,18' fill='%23f2e7ce'/%3E%3C/svg%3E");
    background-repeat: repeat-x; background-position: center top; background-size: 36px 18px;
}
.about-sec > .container { position: relative; z-index: 1; }
.about-head { text-align: center; margin-bottom: 56px; }
.about-lead-title {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    font-size: 26px; font-weight: 600; color: #222222; margin-bottom: 22px;
}
.about-line2 { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-serif); font-size: 36px; font-weight: 700; }
.about-maru {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 800;
    font-size: 1.45em;
    color: var(--c-main);
    line-height: 1;
}
.about-logo { height: 44px; width: auto; display: block; }
.about-copy {
    font-family: 'Source Han Serif JP', 'Noto Serif JP', serif;
    font-size: 34px; font-weight: 600; color: #222222; line-height: 1.7;
}
.about-copy-strong { color: var(--c-main); }
.point-head {
    position: relative;
    display: flex; align-items: center; gap: 22px;
    max-width: 1000px; margin: 0 auto 30px;
}
.point-head::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, #e0d5c8, rgba(224,213,200,0));
}
.point-badge {
    flex-shrink: 0; width: 74px; height: 74px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-main), var(--c-main-light));
    color: #fff; display: flex; flex-direction: column;
    align-items: center; justify-content: center; line-height: 1;
}
.point-badge-label {
    font-family: 'Roboto', var(--f-sans);
    font-size: 10px; font-weight: 700; letter-spacing: 0.18em; opacity: 0.9;
}
.point-badge-num {
    font-family: 'Roboto', var(--f-sans);
    font-size: 32px; font-weight: 700; letter-spacing: 0.02em; margin-top: 2px;
}
.point-title {
    font-family: 'Source Han Serif JP', 'Noto Serif JP', serif;
    font-size: 27px; font-weight: 600; color: #222222; line-height: 1.5;
    white-space: nowrap;
}
.about-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24px; max-width: 1000px; margin: 0 auto 56px;
}
.about-grid:last-child { margin-bottom: 0; }
.about-panel {
    background: #fff;
    border-radius: 16px; padding: 22px 22px 28px; text-align: center;
    box-shadow: 0 10px 30px rgba(120, 90, 40, 0.13);
}
.about-panel-img {
    width: 100%; aspect-ratio: 9 / 6; margin-bottom: 18px;
    background: #d8d8d8; border-radius: 8px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: #8a8a8a; font-size: 13px; letter-spacing: 0.1em;
}
/* 画像が入ったらプレースホルダーのグレーは隠す */
.about-panel-img:has(img) { background: none; }
.about-panel-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-panel-title {
    font-size: 18px; font-weight: 600; color: #222222;
    padding-bottom: 12px; margin-bottom: 12px;
    background-image: radial-gradient(circle, #d9b38c 1.5px, transparent 1.6px);
    background-size: 8px 2px;
    background-position: bottom center;
    background-repeat: repeat-x;
}
.about-panel-text { font-size: 14px; line-height: 1.9; color: #555; text-align: left; }
/* 見出しが長くなるのを避けるため、大学名・肩書きは小さい1行目に逃がす */
.title-sup {
    display: block;
    font-family: var(--f-sans);
    font-size: 0.72em; font-weight: 700; color: var(--c-main);
    letter-spacing: 0; line-height: 1.45; margin-bottom: 3px;
}
/* スライダー／グリッド直下の注記（※） */
.about-grid-note {
    max-width: 1000px; margin: 0 auto 56px; list-style: none;
    font-size: 12px; line-height: 1.7; color: #888; text-align: left;
}
.about-grid-note li { position: relative; padding-left: 1em; }
.about-grid-note li + li { margin-top: 4px; }
.about-grid-note li::before { content: '※'; position: absolute; left: 0; top: 0; }
/* 注記が続くグリッドは下余白を詰める */
.about-grid:has(+ .about-grid-note) { margin-bottom: 14px; }
@media (max-width: 1023px) {
    /* 2列にすると3枚目が折り返して2行になるため、スマホと同じ横スライド（スワイプ）に */
    .about-grid {
        display: flex; gap: 14px;
        margin-bottom: 36px;
        overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* .container(width:90%)の左右余白ぶんだけ外に広げ、画面端まで流れるように */
        margin-left: -5.556%; margin-right: -5.556%;
        padding: 10px 5.556% 22px;
        scroll-padding-left: 5.556%;
    }
    .about-grid::-webkit-scrollbar { display: none; }
    .about-grid:has(+ .about-grid-note) { margin-bottom: 4px; }
    .about-panel { flex: 0 0 46%; scroll-snap-align: start; }
}
@media (max-width: 767px) {
    .about-lead-title { font-size: 19px; }
    .about-line2 { font-size: 22px; }
    .about-logo { height: 32px; }
    .about-copy { font-size: 21px; }
    .about-panel-title { font-size: 16px; }
    .about-grid-note { margin-bottom: 36px; font-size: 11px; }
    .about-panel { flex: 0 0 78%; }
    .point-head { gap: 14px; margin-bottom: 20px; }
    .point-badge { width: 56px; height: 56px; }
    .point-badge-label { font-size: 8px; }
    .point-badge-num { font-size: 22px; }
    .point-title { font-size: 17px; white-space: normal; }
    .point-head::after { display: none; }
    .about-panel { padding: 26px 20px; }
}

/* --- 料金 (Price) --- */
.price-sec { background: #F7EFE6; border-radius: 80px 80px 0 0; margin-top: -80px; position: relative; z-index: 1; }
.price-eyebrow { text-align: center; margin-bottom: 22px; }
.eyebrow-band {
    position: relative; display: inline-block;
    background: linear-gradient(145deg, #ff9a4a 0%, #e65100 45%, #a83600 100%);
    color: #fff;
    font-size: 26px; font-weight: 500; letter-spacing: 0.06em;
    padding: 3px 25px; border-radius: 6px;
    box-shadow: 0 4px 12px rgba(166, 54, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 2px rgba(120, 40, 0, 0.35);
}
.eyebrow-band sup { font-size: 10px; font-weight: 500; vertical-align: super; margin-left: 2px; }
.eyebrow-band::after {
    content: ''; position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%);
    border-width: 11px 11px 0 11px; border-style: solid;
    border-color: #bc4000 transparent transparent transparent;
}
.price-title {
    text-align: center; font-family: 'Source Han Serif JP', 'Noto Serif JP', serif;
    font-size: 40px; font-weight: 600; color: #222222; margin-bottom: 12px;
}
.price-mini {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
    margin: 0 auto 34px; max-width: 860px;
}
.price-mini-panel {
    flex: 1 1 400px; display: flex; align-items: stretch; overflow: hidden;
    background: #fff; border: 1px solid #f0e6da; border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.price-mini-thumb {
    flex: 0 0 130px; background: #eaf3f6; display: flex;
    align-items: center; justify-content: center; padding: 12px;
}
.price-mini-thumb img { width: 100%; height: 100%; max-height: 110px; object-fit: contain; }
.price-mini-info {
    flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start;
    gap: 8px; padding: 14px 18px;
}
.price-mini-label {
    font-family: var(--f-sans); font-size: 17px; font-weight: 700; color: #333;
}
.price-mini-price {
    font-family: var(--f-sans); font-size: 15px; font-weight: 700; color: #333;
    display: flex; align-items: baseline; gap: 2px;
}
.price-mini-num {
    font-family: 'Roboto', var(--f-sans); font-size: 26px; font-weight: 700;
    color: var(--c-main); letter-spacing: -0.01em;
}
.price-mini-tax { font-size: 12px; font-weight: 600; color: var(--c-gray); }
.price-mini-btn {
    margin-top: auto; align-self: stretch; text-align: center;
    background: var(--c-main); color: #fff; border-radius: 999px;
    font-family: var(--f-sans); font-size: 14px; font-weight: 700;
    padding: 9px 18px; transition: opacity 0.2s;
}
.price-mini-btn:hover { opacity: 0.88; }
.price-hero {
    text-align: center; color: var(--c-main); line-height: 1; margin-bottom: 40px;
    display: flex; align-items: flex-end; justify-content: center; gap: 2px;
}
.price-hero-label { font-size: 26px; font-weight: 700; margin-right: 6px; padding-bottom: 14px; }
.price-hero-num { font-family: 'Roboto', var(--f-sans); font-size: 96px; font-weight: 500; letter-spacing: -0.02em; }
.price-hero-unit { font-size: 40px; font-weight: 700; padding-bottom: 10px; }
.price-hero-from { font-size: 40px; font-weight: 700; padding-bottom: 10px; }
.price-hero-tax { font-size: 18px; font-weight: 600; color: var(--c-gray); padding-bottom: 16px; margin-left: 4px; }
@media (max-width: 767px) {
    .price-hero-num { font-size: 66px; }
    .price-hero-label { font-size: 20px; padding-bottom: 10px; }
    .price-hero-unit, .price-hero-from { font-size: 28px; }
}
.price-komi { text-align: center; margin-bottom: 22px; }
.komi-inner {
    position: relative; display: inline-block;
    font-size: 19px; font-weight: 700; letter-spacing: 0.06em;
    color: #222222; padding: 0 34px;
}
.komi-inner::before,
.komi-inner::after {
    content: ''; position: absolute; top: 50%; width: 20px; height: 2px;
    background: #222222; border-radius: 2px;
}
.komi-inner::before { left: 0; transform: translateY(-50%) rotate(62deg); }
.komi-inner::after { right: 0; transform: translateY(-50%) rotate(-62deg); }
.price-incl {
    display: flex; justify-content: center; gap: 34px; margin-bottom: 26px;
}
.price-incl-item { text-align: center; }
.price-incl-icon {
    width: 104px; height: 104px; margin: 0 auto 12px;
    border-radius: 50%; border: 2px solid #60b0b8;
    background: linear-gradient(145deg, #ffffff 0%, #f4fbfc 55%, #e0f2f4 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 38px; color: #55b4bd;
    transition: transform 0.3s ease;
}
.price-incl-item:hover .price-incl-icon { transform: translateY(-4px); }
.price-incl-name { font-size: 15px; font-weight: 500; color: #419098; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
    .price-incl-icon { transition: none; }
    .price-incl-item:hover .price-incl-icon { transform: none; }
}
.price-note-pill {
    display: block; width: fit-content; margin: 0 auto 14px;
    background: #fff; border: 2px dashed var(--c-main-light); border-radius: 999px;
    padding: 10px 34px; font-size: 17px; font-weight: 700; color: #222222;
}
.price-note {
    max-width: 760px; margin: 0 auto 48px;
    font-size: 12px; color: var(--c-gray); text-align: center; line-height: 1.8;
}
/* PC：「すべてコミコミ」〜注釈のかたまりをひとまわり大きく */
@media (min-width: 768px) {
    /* 見出し「利用料金はずーっと定額」との間隔 */
    .price-title { margin-bottom: 36px; }
    .price-komi { margin-bottom: 26px; }
    .komi-inner { font-size: 22px; padding: 0 40px; }
    .komi-inner::before,
    .komi-inner::after { width: 24px; }
    .price-incl { gap: 42px; margin-bottom: 32px; }
    .price-incl-icon {
        width: 124px; height: 124px; margin-bottom: 14px;
        font-size: 46px;
    }
    .price-incl-name { font-size: 18px; }
    .price-note-pill { font-size: 20px; padding: 12px 40px; margin-bottom: 16px; }
    .price-note { font-size: 14px; }
}
.flow-guide {
    max-width: 1000px; margin: 0 auto 60px;
    background: #fff; border: 1px solid #f0e6da; border-radius: 22px;
    padding: 40px 40px 44px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
/* 家族構成モーダルを開くボタン */
.family-cta-label {
    text-align: center; font-size: 14px; font-weight: 700; color: var(--c-main);
    letter-spacing: 0.04em; margin: 28px 0 10px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.family-cta-wrap {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
    margin: 0 auto;
}
.family-cta {
    display: inline-flex; align-items: center; gap: 14px;
    background: #fff; color: #2a2724; border: 2px solid var(--c-main); cursor: pointer;
    font-family: var(--f-sans); font-size: 17px; font-weight: 700;
    padding: 12px 24px 12px 14px; border-radius: 999px;
    box-shadow: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.family-cta > i:first-child {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
    background: var(--c-main); color: #fff; font-size: 15px;
    transition: background 0.2s ease, color 0.2s ease;
}
.family-cta:hover {
    background: var(--c-main); color: #fff;
    transform: translateY(-3px);
    box-shadow: none;
}
.family-cta:hover > i:first-child { background: #fff; color: var(--c-main); }
.family-cta:active { transform: translateY(-1px); }
.family-cta-body { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.2; }
.family-cta-main { font-size: 17px; font-weight: 500; }
.family-cta-arrow { font-size: 13px; transition: transform 0.2s ease; }
.family-cta:hover .family-cta-arrow { transform: translateX(4px); }
/* スマホ：ボタンをコンテナ幅いっぱいに縦積み */
@media (max-width: 767px) {
    .family-cta-wrap { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
    .family-cta {
        width: 100%;
        justify-content: flex-start; gap: 10px;
        font-size: 15px;
        padding: 10px 16px 10px 10px;
    }
    .family-cta > i:first-child { width: 30px; height: 30px; font-size: 13px; }
    .family-cta-main { font-size: 15px; }
    .family-cta-arrow { margin-left: auto; }
}
/* 汎用モーダル */
/* ヘッダー(z-index:10002)より前面に出す */
.modal { position: fixed; inset: 0; z-index: 10050; display: none; }
.modal.is-open { display: block; }
.modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); }
/* ダイアログ外（暗い背景の上）に出るCTAリードは白抜きにする */
.modal .plans-cta-lead { color: #fff; }
.modal .plans-cta-lead .accent { color: #fffa53; }
.modal .plans-cta-lead::before, .modal .plans-cta-lead::after { background: #ffffff; }
.modal-dialog {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(92vw, 1100px); max-height: 88vh; overflow-y: auto;
    border-radius: 16px; padding: 20px;
}
/* 閉じるボタン：ダイアログ右上に貼り付け、スクロールしても常に最前面 */
.modal-close {
    position: sticky; top: 10px; z-index: 30;
    margin-left: auto; margin-right: 0; margin-bottom: 10px; display: flex;
    align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    background: #efe9e2; color: #333; font-size: 18px; transition: background 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.modal-close:hover { background: #e2d9cf; }
/* スマホ：ダイアログの余白を詰めて中身の表示領域を広げる */
@media (max-width: 767px) {
    .modal-dialog { padding: 0; }
    /* 余白0でも端に張り付かないよう内側にずらす */
    .modal-close { margin-right: 10px; margin-bottom: 0; }
}
.modal-content .custom-example-box { margin-bottom: 0; }
.flow-guide-title {
    font-family: var(--f-sans); text-align: center;
    font-size: 28px; font-weight: 700; color: #222222; margin-bottom: 6px;
}
.flow-guide-note {
    text-align: center; font-size: 13px; color: var(--c-gray); margin-bottom: 34px;
}
.flow-guide-title .fg-marker {
    background: linear-gradient(transparent 62%, rgb(255 242 17 / 75%) 62%);
    padding: 0 2px;
}
.flow-guide-row { display: flex; align-items: stretch; justify-content: center; gap: 12px; }
.flow-guide-box {
    position: relative; flex: 1 1 0; max-width: 300px;
    background: #fff; border: 2px solid #f0dccb; border-radius: 16px; padding: 40px 18px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    text-align: center; overflow: hidden;
}
.flow-guide-box--result {
    background: #e07e19; color: #fff; border: none;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    /* PC：画像の上余白を左右（18px）と揃える */
    padding-top: 18px;
}
/* 画像は上寄せのまま、残りの余白でテキストを上下中央に */
.flow-guide-box--result .flow-guide-name { margin-top: auto; }
.flow-guide-box--result .fg-result-note { margin-bottom: auto; }
.flow-guide-box--result .flow-guide-name { color: #fff; }
.fg-result-note {
    font-size: 12px; font-weight: 600; color: #fff; line-height: 1.6; margin-top: 8px;
    padding-top: 8px; border-top: 1px dashed rgba(255,255,255,0.5);
}
.flow-guide-step {
    display: block; position: static; transform: none;
    margin: -40px -18px 20px;
    background: var(--c-bg-light); color: var(--c-main); border: none;
    border-radius: 14px 14px 0 0;
    text-align: center; padding: 8px 12px;
    font-size: 15px; font-weight: 700; letter-spacing: 0.1em; white-space: nowrap;
}
.flow-guide-step b { font-family: 'Roboto', var(--f-sans); font-size: 20px; line-height: 1; margin-left: 4px; }
.flow-guide-step em {
    font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0;
    background: var(--c-main); color: #fff; border-radius: 4px; padding: 1px 6px; margin-left: 2px;
}
.flow-guide-circle {
    width: 66px; height: 66px; margin: 0 auto 16px;
    border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: var(--c-main);
    box-shadow: 0 4px 12px rgba(191, 130, 60, 0.14);
}
.flow-guide-thumbs {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    margin-bottom: 16px; min-height: 72px;
}
.fg-thumb {
    position: relative; width: 100px; height: 130px; overflow: hidden;
}
.fg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-thumb--riuck img { object-fit: contain; padding: 4px; }
.fg-thumb span {
    position: absolute; bottom: 0; right: 0;
    background: #e65100; color: #fff; font-family: 'Roboto', var(--f-sans);
    font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 20px;
}
.fg-thumb--sm { width: 44px; height: 44px; border-radius: 9px; }
/* STEP1：防災家族×ココツナ特別セット（リュック＋自宅避難セット）の行 */
.fg-thumbs-label {
    width: fit-content; margin: 0 auto 8px; padding: 3px 12px;
    background: var(--c-bg-light); color: var(--c-main); border-radius: 20px;
    font-size: 11px; font-weight: 700; line-height: 1.5;
}
.flow-guide-thumbs:has(+ .fg-thumbs-label) { margin-bottom: 12px; }
.flow-guide-thumbs--special { min-height: 0; margin-bottom: 16px; }
.fg-thumb--set { width: 108px; height: 122px; }
.fg-thumb--set img { object-fit: contain; }
.fg-thumb--set span { font-size: 10px; padding: 3px 8px; }
.fg-special { position: relative; width: 100%; max-width: 300px; margin: 0 auto; }
.fg-special-img { width: 100%; height: auto; display: block; }
.fg-special span {
    position: absolute; bottom: 0; right: 0;
    background: #e65100; color: #fff; font-family: 'Roboto', var(--f-sans);
    font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px;
}
.flow-guide-opts {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 16px; min-height: 130px; justify-content: center;
}
/* STEP1・2：上のビジュアル部分を伸縮させて flow-guide-name の高さを揃える */
.flow-guide-box:not(.flow-guide-box--result) { display: flex; flex-direction: column; }
.flow-guide-thumbs, .flow-guide-opts { flex: 1 1 auto; }
.fg-opt {
    background: #fff; border: 1.5px solid #f3d5b5; border-radius: 8px;
    padding: 8px 10px; font-size: 13px; font-weight: 700; color: #222222;
    /* 各セットの「＋」とセット名の左端を揃える */
    display: flex; align-items: center; justify-content: flex-start; gap: 4px;
    box-shadow: 0 2px 6px rgba(191, 130, 60, 0.10);
}
.fg-opt-plus { color: var(--c-main); font-weight: 700; align-self: flex-start; line-height: 1.5; }
.fg-opt-body { display: flex; flex-direction: column; align-items: flex-start; }
.fg-opt-name { line-height: 1.5; }
.fg-opt-desc { font-size: 11px; font-weight: 500; color: #8a7a6a; line-height: 1.4; }
/* 特別セット併用時の補足。1行に収まるよう少し小さく */
.fg-opt-note { font-size: 10px; }
.flow-guide-box--result .flow-guide-circle {
    background: rgba(255,255,255,0.18); color: #fff; box-shadow: none;
}
.flow-guide-name { font-family: var(--f-sans); font-size: 18px; font-weight: 700; color: #222222; line-height: 1.5; }
.flow-guide-box--result .flow-guide-name { color: #fff; }
.flow-guide-box--result picture { display: block; width: 100%; }
.flow-guide-result-img {
    display: block; width: 100%; height: auto;
    margin: 0 auto 14px; background: #fff; border-radius: 8px;
}
.fg-result-note {
    font-size: 12px; font-weight: 600; color: #fff; line-height: 1.6; margin-top: 8px;
    padding-top: 8px; border-top: 1px dashed rgba(255,255,255,0.5);
}
.flow-guide-sub { font-size: 12.5px; line-height: 1.75; color: #8a7a6a; margin-top: 8px; }
.flow-guide-op {
    flex-shrink: 0; align-self: center; width: 0; height: 0;
    border-style: solid; border-width: 11px 0 11px 15px;
    border-color: transparent transparent transparent var(--c-main);
}
.step-head {
    display: flex; align-items: center; gap: 18px;
    max-width: 1000px; margin: 0 auto 52px;
}
.step-head--2 { margin-top: 56px; }
.step-badge {
    flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 2px;
    font-family: 'Roboto', var(--f-sans); color: var(--c-main);
    font-size: 20px; font-weight: 700; letter-spacing: 0.06em; line-height: 1;
}
.step-badge b { font-family: 'Roboto', var(--f-sans); font-size: 54px; font-weight: 700; letter-spacing: -0.02em; }
.step-title { font-size: 21px; font-weight: 500; color: #222222; line-height: 1.5; }
.step-opt { font-size: 14px; font-weight: 500; color: var(--c-gray); margin-left: 4px; }
.step-desc { font-size: 14px; line-height: 1.8; color: #555; margin-top: 4px; }
.price-cards {
    display: flex; flex-direction: column; gap: 46px;
    max-width: 1000px; margin: 0 auto;
}
.price-card {
    background: #fff; border: 2px solid #ed5e3b; border-radius: 0 18px 18px 18px;
    padding: 24px; position: relative;
    display: grid; grid-template-columns: 1fr 400px; gap: 26px; align-items: stretch;
}
.price-card--popular { border-color: #ed5e3b; }
.price-tab {
    position: absolute; bottom: 100%; left: -2px; margin-bottom: 0px;
    background: #ed5e3b; color: #fff;
    font-size: 16px; font-weight: 500; letter-spacing: 0.02em;
    padding: 1px 26px 3px; border-radius: 14px 14px 0 0;
}
.price-card--popular .price-tab { background: #ed5e3b; color: #fff; }
.price-card-img {
    width: 100%; height: 100%; min-height: 300px; border-radius: 10px;
    /* セット内容がひと目で分かる写真のため、cropせず全体を見せる。
       背景は商品写真の地色と同じ #efefef にして余白が目立たないようにする */
    background: #efefef; object-fit: contain; display: block;
}
/* 申込ボタン削除後、下端固定だとリストとの間が空きすぎるので中身を縦中央に寄せる */
.price-card-body { display: flex; flex-direction: column; justify-content: center; }
.price-card-catch { font-size: 13.5px; font-weight: 600; color: var(--c-gray); margin-bottom: 8px; line-height: 1.6; white-space: nowrap; letter-spacing: -0.01em; }
.price-card-name {
    font-size: 24px; font-weight: 700; color: #222222; margin-bottom: 10px;
}
.price-card-name span { color: var(--c-main); margin-left: 2px; }
.price-card-fee { color: var(--c-main); margin-bottom: 16px; line-height: 1; }
.price-card-name .cap {
    display: inline-block; margin-left: 8px; color: var(--c-gray);
    font-size: 14px; font-weight: 600; border: 1px solid #ddd; border-radius: 4px;
    padding: 1px 7px; vertical-align: middle;
}
.price-card-points {
    list-style: none; margin-bottom: 12px;
    padding-top: 12px; border-top: 1px dashed #e2d8cc;
}
.price-card-points li {
    position: relative; padding-left: 26px; margin-bottom: 7px;
    font-size: 14px; line-height: 1.7; color: #444;
}
.price-card-points li::before {
    content: '\f058'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; left: 0; top: 2px; font-size: 15px; color: #4CAF50;
}
.opt-cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    max-width: 1000px; margin: 20px auto 0;
}
.opt-card {
    position: relative;
    background: #fff; border: 2px solid #ed5d3b; border-radius: 14px;
}
.opt-tab {
    position: absolute; bottom: 100%; left: -2px; z-index: 2;
    background: #ed5e3b; color: #fff; white-space: nowrap;
    font-size: 15px; font-weight: 500; letter-spacing: 0.02em;
    padding: 1px 22px 3px; border-radius: 14px 14px 0 0;
}
.opt-card { border-radius: 0 14px 14px 14px; display: flex; flex-direction: column; }
.opt-card-img { border-radius: 0 12px 0 0; }
/* 商品写真の縦横比（5:4）に合わせて枠を取り、上下が切れないようにする */
.opt-card-img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; background: #efefef; display: block; }
.opt-card-body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.opt-card-name { font-size: 17px; font-weight: 700; color: #222222; margin-bottom: 6px; }
.opt-card-fee { color: var(--c-main); font-size: 24px; font-weight: 700; margin-bottom: 10px; line-height: 1.2; }
.opt-card-fee span { font-size: 13px; font-weight: 600; }
.opt-card-fee span:first-child { margin-right: 4px; }
.opt-card-fee span:last-child { color: var(--c-gray); margin-left: 4px; }
.opt-card-text { font-size: 13px; line-height: 1.8; color: #555; padding-top: 12px; margin-bottom: 16px; border-top: 1px dashed #e2d8cc; }
.opt-card-sub-btn {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 100%; margin-top: auto;
    background: #fff; border: 2px solid #ddd; border-radius: 999px; padding: 9px 28px;
    font-family: inherit; font-size: 14px; font-weight: 700; color: #555;
    cursor: pointer; transition: all 0.25s ease;
}
/* 矢印は右端に絶対配置：テキストがボタンの中心にくるようにする */
.opt-card-sub-btn::after {
    content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px;
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
}
.opt-card-sub-btn:hover { border-color: #f3c9a6; color: var(--c-main); background: #fdf0e6; }
.fee-label { font-size: 16px; font-weight: 700; margin-right: 4px; }
.fee-num { font-family: 'Roboto', var(--f-sans); font-size: 44px; font-weight: 700; letter-spacing: -0.01em; }
.fee-unit { font-size: 20px; font-weight: 700; margin-left: 2px; }
.fee-tax { font-size: 13px; color: var(--c-gray); font-weight: 600; margin-left: 6px; }
.price-card-sub-btn {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 100%; max-width: 320px; margin-top: 4px;
    background: #fff; border: 2px solid #ddd; border-radius: 999px; padding: 11px 30px;
    font-family: inherit; font-size: 15px; font-weight: 700; color: #555;
    cursor: pointer; transition: all 0.25s ease;
}
/* 矢印は右端に絶対配置：テキストがボタンの中心にくるようにする */
.price-card-sub-btn::after {
    content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px;
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
}
.price-card-sub-btn:hover { border-color: #f3c9a6; color: var(--c-main); background: #fdf0e6; }
.price-card-desc {
    font-size: 13px; line-height: 1.8; color: var(--c-gray);
    margin-bottom: 18px;
}
@media (max-width: 767px) {
    .price-sec { border-radius: 40px 40px 0 0; }
    .price-title { font-size: 26px; margin-bottom: 28px; }
    .eyebrow-inner { font-size: 17px; padding: 0 24px; }
    .price-komi span { font-size: 15px; padding: 7px 22px; }
    .eyebrow-inner::before, .eyebrow-inner::after { width: 16px; }
    /* 4項目を画面幅に収める（固定104px→可変） */
    .price-incl {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px; justify-items: center;
    }
    .price-incl-item { width: 100%; min-width: 0; }
    .price-incl-icon {
        width: 100%; max-width: 82px; height: auto; aspect-ratio: 1;
        margin-bottom: 8px; font-size: clamp(22px, 7.5vw, 30px);
    }
    .price-incl-name { font-size: 12px; overflow-wrap: anywhere; }
    .price-note-pill { font-size: 14px; padding: 8px 20px; }
    .price-cards { gap: 50px; }
    .price-card { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px; }
    .price-card > * { min-width: 0; }
    .price-card-img { width: 100%; height: auto; min-height: 0; object-fit: contain; }
    /* カード幅を超えないように：キャッチコピーの nowrap を解除して折り返す */
    .price-card-catch { white-space: normal; letter-spacing: 0; }
    .price-card-name,
    .price-card-fee,
    .price-card-points li,
    .price-card-desc { overflow-wrap: anywhere; }
    .price-card-sub-btn { white-space: normal; }
    .price-tab { max-width: calc(100% + 2px); white-space: normal; line-height: 1.4; }
    .price-card-sub-btn { max-width: none; }
    .opt-cards { grid-template-columns: 1fr; gap: 50px; }
    .flow-guide { padding: 28px 18px 32px; }
    .flow-guide-title { font-size: 21px; margin-bottom: 24px; }
    .flow-guide-row { flex-direction: column; align-items: stretch; gap: 26px; }
    .flow-guide-box { flex: none; max-width: none; padding: 30px 18px 22px; }
    .flow-guide-step { margin: -30px -18px 18px; }
    .flow-guide-result-img { margin-top: -10px; }
    .flow-guide-op { transform: rotate(90deg); margin: 0 auto; }
    .step-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .step-badge { font-size: 15px; }
    .step-badge b { font-size: 38px; }
    .step-title { font-size: 17px; }
    .step-desc { font-size: 13px; }
}

/* --- モニター様のお声 (Voice) --- */
.voice-sec {
    position: relative; overflow: hidden;
    background:
        radial-gradient(circle, rgba(197,114,32,0.07) 1.5px, transparent 1.7px) 0 0 / 22px 22px,
        #fcfaf1;
}
.voice-sec .container { position: relative; z-index: 1; }
.voice-eyebrow {
    text-align: center; font-size: 17px; font-weight: 700;
    color: var(--c-main); margin-bottom: 4px;
}
.voice-title {
    text-align: center; font-family: 'Source Han Serif JP', 'Noto Serif JP', serif;
    font-size: 36px; font-weight: 600; color: #222222; margin-bottom: 40px;
}
.voice-carousel { position: relative; margin: 0 auto; }
.voice-track {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px; scrollbar-width: none;
    /* overflow-x:auto だけだと縦にも数pxスクロールできてしまうため塞ぐ */
    overflow-y: hidden; overscroll-behavior-x: contain;
}
.voice-track::-webkit-scrollbar { display: none; }
.voice-card {
    flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start;
    background: #fff; border: 2px solid #c2966b; border-radius: 16px; padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.voice-user {
    font-size: 15px; font-weight: 700; color: #222222; margin-bottom: 14px;
    display: flex; flex-direction: column; gap: 2px;
}
.voice-order {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 600; color: var(--c-gray); margin-top: 4px;
}
.voice-set {
    border: 1px solid #d6d6d6; border-radius: 3px; padding: 0px 4px;
    background: #f9f9f9; color: #505050; font-weight: 500;
}
/* オプション（追加セット・自宅避難セット）の頭に付く＋ */
.voice-plus { color: #c2966b; font-weight: 700; }
.voice-img {
    width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;
    background: #ececec; margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center;
    color: #9a9a9a; font-size: 13px; letter-spacing: 0.1em;
}
/* お客様写真は縦位置のため、正方形枠に上寄せで収める */
.voice-img img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 25%;
    display: block;
}
.voice-text { font-size: 14px; line-height: 1.9; color: #444; }
.voice-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    background: #fff; border: 1px solid #ddd; color: var(--c-gray);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
    transition: all 0.25s ease;
}
.voice-arrow:hover { border-color: var(--c-main); color: var(--c-main); }
.voice-arrow--prev { left: -23px; }
.voice-arrow--next { right: -23px; }
.voice-note {
    text-align: center; font-size: 12px; color: var(--c-gray); margin-top: 26px;
}
@media (max-width: 1023px) {
    /* コンテナ幅で切れると中途半端に見えるため、スクロール領域を画面幅いっぱいに広げる
       （カード幅・左右の余白は従来どおり。覗いているカードが画面の端で切れるようになる） */
    .voice-carousel { margin-left: -5.5556%; margin-right: -5.5556%; }
    .voice-track { padding: 4px 5%; scroll-padding: 0 5%; }
    .voice-card { flex: 0 0 calc((100% - 32px) / 2 - 12px); }
}
@media (max-width: 767px) {
    .voice-title { font-size: 24px; margin-bottom: 26px; }
    /* 矢印を廃止したぶん、次のカードを少し覗かせてスワイプできると示す */
    .voice-card { flex: 0 0 88%; }
}


/* --- 料金セクション下部CTA --- */
.plans-cta { text-align: center; margin-top: 56px; }
.plans-cta-lead {
    position: relative; display: table; margin: 0 auto 16px; padding: 0 34px;
    font-size: 19px; font-weight: 700; color: #222222;
}
.camp-sec .plans-cta-lead { margin: 35px auto 0px; }
.plans-cta-lead::before, .plans-cta-lead::after {
    content: ''; position: absolute; top: 50%; width: 2px; height: 20px;
    background: #222222; border-radius: 2px;
}
.plans-cta-lead::before { left: 10px; transform: translateY(-50%) rotate(-24deg); }
.plans-cta-lead::after { right: 10px; transform: translateY(-50%) rotate(24deg); }
.plans-cta-lead .accent { color: var(--c-main); }
.plans-cta-btn {
    display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 360px; padding: 14px 56px;
}
.plans-cta-btn::after { right: 28px; }
/* CTAボタン：ふわっと光るグロー＋斜めの光沢が流れる */
.plans-cta-btn { animation: ctaGlow 2.4s ease-in-out infinite; }
@keyframes ctaGlow {
    0%, 100% { box-shadow: 0 6px 20px rgba(230, 81, 0, 0.30); }
    50%      { box-shadow: 0 8px 26px rgba(230, 81, 0, 0.55), 0 0 0 6px rgba(255, 143, 0, 0.16); }
}
.plans-cta-btn::before {
    content: ''; position: absolute; top: -50%; left: -60%;
    width: 38%; height: 200%; pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(12deg);
    animation: ctaShine 3.6s ease-in-out infinite;
}
@keyframes ctaShine {
    0%        { left: -60%; }
    55%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    .plans-cta-btn { animation: none; }
    .plans-cta-btn::before { display: none; }
}
.plans-cta-sub { font-size: 13px; font-weight: 500; line-height: 1.4; }
.plans-cta-main { font-size: 22px; font-weight: 700; line-height: 1.4; }
@media (max-width: 767px) {
    .plans-cta-btn { min-width: 0; width: 90%; padding: 13px 40px; }
    .plans-cta-main { font-size: 19px; }
}

/* --- 基本のセット (Basic Set) --- */
.basic-set-sec { background: #fff; }
.basic-set-lead {
    text-align: center; font-size: 27px; font-weight: 500; line-height: 1.7;
    color: #222222; margin: -20px auto 40px; max-width: 860px;
}
.basic-set-band {
    display: block; max-width: 1000px; margin: 0 auto 6px;
    background: #4399a5; color: #fff; border-radius: 6px;
    font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
    padding: 7px 16px; text-align: center;
}
.basic-set-note {
    max-width: 1000px; margin: 0 auto 24px;
    font-size: 14px; color: #333; text-align: left;
}
.basic-set-note .note-accent { color: #C0392B; }
.basic-set-cta { margin-top: 48px; }
.basic-set-cta .btn-main { box-shadow: none; }
.basic-set-cta .btn-main:hover { box-shadow: none; }
.basic-set-band--opt { margin-top: 56px; }
.basic-set-lead2 {
    max-width: 1000px; margin: 0 auto 24px; text-align: center;
    font-size: 15px; line-height: 1.9; color: #555;
}
.basic-set-sub {
    max-width: 1000px; margin: 48px auto 18px;
    font-size: 20px; font-weight: 700; color: #222222;
    padding-left: 14px; border-left: 5px solid var(--c-main);
}
.basic-set-sub span { font-size: 14px; font-weight: 500; color: var(--c-gray); margin-left: 6px; }
.option-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    max-width: 1000px; margin: 0 auto;
}
.option-item { text-align: center; }
.option-img {
    width: 100%; aspect-ratio: 1 / 1; display: block;
    border-radius: 12px; object-fit: contain; background: #fafafa;
}
.option-img--placeholder {
    background: #d8d8d8;
    display: flex; align-items: center; justify-content: center;
    color: #8a8a8a; font-size: 14px; letter-spacing: 0.1em;
}
.option-name { margin-top: 12px; font-size: 17px; font-weight: 700; color: #222222; }
@media (max-width: 767px) {
    .option-grid { grid-template-columns: 1fr; gap: 20px; }
}
/* コード化した基本セットのパネル */
.bs-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
    max-width: 1000px; margin: 0 auto;
}
/* --- セット内容一覧モーダル（アコーディオン） --- */
.set-modal-content { background: #f2ece3; border-radius: 14px; padding: 22px 18px; }
.set-modal-title { font-family: var(--f-serif); text-align: center; font-size: 28px; font-weight: 700; color: #3a2a12; margin-bottom: 18px; }
/* セット内容：カテゴリ別の箇条書き一覧 */
.set-cat-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    align-items: start;
}
/* カテゴリ数が4未満のセット（追加セット等）は中央寄せで間延びを防ぐ */
.set-cat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 780px; margin-inline: auto; }
.set-cat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; margin-inline: auto; }
/* カテゴリごとに白枠のカード */
.set-cat {
    background: #fff; border-radius: 0; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.set-cat-head {
    font-family: var(--f-sans);
    text-align: center; color: #fff; font-size: 17px; font-weight: 700;
    padding: 4px 8px; margin-bottom: 0; letter-spacing: 0.04em;
}
.set-cat .set-cat-list { padding: 16px 16px 18px; }
.set-cat-head--emergency { background: #db000e; }
.set-cat-head--hygiene   { background: #1485a7; }
.set-cat-head--food      { background: #d25e23; }
.set-cat-head--work      { background: #4f9d80; }
.set-cat-head--place     { background: #4f9d80; }
.set-cat-inner-note {
    font-size: 11px; line-height: 1.6; color: #6b5b45;
    padding: 0 16px 16px; margin-top: -6px;
}
.set-cat-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.set-cat-list li {
    position: relative; padding-left: 16px;
    font-size: 14px; font-weight: 500; line-height: 1.6; color: #222;
}
.set-cat-list li::before {
    content: '・'; position: absolute; left: 0; top: 0;
}
.set-cat-note {
    font-size: 12px; color: #5a4a2e; line-height: 1.7; margin-top: 14px;
}
@media (max-width: 900px) {
    .set-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 560px) {
    .set-cat-grid { grid-template-columns: 1fr; }
    .set-cat-head { font-size: 15px; padding: 9px 8px; }
    .set-cat .set-cat-list { padding: 13px 14px 15px; }
    .set-cat-list li { font-size: 13px; }
}
/* セット内容：内容物紹介パネル */
.set-intro { margin-top: 30px; }
.set-intro-band { text-align: center; padding: 6px 0 2px; }
.set-intro-band-en {
    display: block;
    font-family: 'Roboto', var(--f-sans);
    font-size: 10px; font-weight: 700; letter-spacing: 0.42em;
    color: #a8987f; text-indent: 0.42em;
    margin-bottom: 10px;
}
.set-intro-band-ja {
    display: flex; align-items: center; justify-content: center; gap: 20px;
    font-family: var(--f-serif);
    font-size: 28px; font-weight: 700; color: #2b2419;
    letter-spacing: 0.16em; text-indent: 0.16em;
}
.set-intro-band-ja::before,
.set-intro-band-ja::after {
    content: ''; flex: 1; max-width: 130px; height: 1px;
    background: #cbbda4;
}
.set-intro-cat {
    color: #fff; text-align: center;
    font-size: 18px; font-weight: 700; letter-spacing: 0.2em;
    padding: 7px 10px; margin-top: 22px; text-indent: 0.2em;
}
.set-intro-cat--emergency { background: #db000e; }
.set-intro-cat--hygiene   { background: #1485a7; }
.set-intro-cat--food      { background: #d25e23; }
.set-intro-cat--place     { background: #4f9d80; }
.set-intro-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 20px 18px; margin-top: 22px;
    align-items: stretch;
    /* カテゴリごとのアクセント色 */
    --cat-accent: var(--c-main);
}
.set-intro-grid--emergency { --cat-accent: #db000e; }
.set-intro-grid--hygiene   { --cat-accent: #1485a7; }
.set-intro-grid--food      { --cat-accent: #d25e23; }
.set-intro-grid--place     { --cat-accent: #4f9d80; }
.intro-panel {
    display: flex; flex-direction: column;
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(60, 45, 25, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.intro-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(60, 45, 25, 0.15);
}
.intro-panel-img {
    position: relative; aspect-ratio: 9 / 6; overflow: hidden;
    background: #f4efe6; color: #c2b6a1;
    display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.intro-panel-img img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    padding: 8px;
    transition: transform 0.5s ease;
}
/* 商品写真は白背景のため、画像がある場合は下地も白に */
.intro-panel-img:has(img) { background: #fff; }
/* 引きの写真（ガイドブック等）は枠いっぱいにトリミング */
.intro-panel-img--cover img { object-fit: cover; padding: 0; }

/* --- パネル内 画像スライダー --- */
.ipg { display: block; background: #fff; }
.ipg-track {
    display: flex; width: 100%; height: 100%;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
}
.ipg-track::-webkit-scrollbar { display: none; }
.ipg-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; }
/* 前後ボタン：ホバーで濃く、タッチ環境では常時薄く表示 */
.ipg-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.86); color: #6a6157; font-size: 11px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    opacity: 0; transition: opacity 0.2s ease, background 0.2s ease;
}
.ipg-nav--prev { left: 6px; }
.ipg-nav--next { right: 6px; }
.intro-panel:hover .ipg-nav, .ipg-nav:focus-visible { opacity: 1; }
.ipg-nav:hover { background: #fff; color: var(--cat-accent); }
.ipg-nav[disabled] { opacity: 0 !important; pointer-events: none; }
/* インジケーター */
.ipg-dots {
    position: absolute; left: 0; right: 0; bottom: 6px; z-index: 2;
    display: flex; justify-content: center; gap: 5px; pointer-events: none;
}
.ipg-dot {
    width: 6px; height: 6px; padding: 0; border: none; border-radius: 50%;
    background: rgba(0, 0, 0, 0.22); cursor: pointer; pointer-events: auto;
    transition: background 0.2s ease, transform 0.2s ease;
}
.ipg-dot.is-active { background: var(--cat-accent); transform: scale(1.35); }
@media (hover: none) {
    .ipg-nav { opacity: 0.9; }
}
@media (max-width: 767px) {
    /* SPは画像枠が小さいため矢印は出さず、スワイプ＋ドットで操作する */
    .ipg-nav { display: none; }
    .ipg-dots { bottom: 4px; gap: 4px; }
    .ipg-dot { width: 5px; height: 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .ipg-track { scroll-behavior: auto; }
}
.intro-panel:hover .intro-panel-img img { transform: scale(1.05); }
.intro-panel-body {
    flex: 1; display: flex; flex-direction: column;
    padding: 16px 16px 18px;
}
.intro-panel-title {
    position: relative;
    font-family: var(--f-serif);
    font-size: 16px; font-weight: 700; color: #2b2419;
    line-height: 1.5; letter-spacing: 0.02em;
    padding-bottom: 11px; margin-bottom: 10px;
}
.intro-panel-title::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 28px; height: 2px; border-radius: 2px;
    background: var(--cat-accent);
}
.intro-panel-desc { font-size: 12.5px; line-height: 1.9; color: #6a6157; }
.intro-panel-cap {
    font-size: 11px; color: #9a9187; line-height: 1.6;
    margin-top: auto; padding-top: 8px;
}
@media (max-width: 900px) {
    .set-intro-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .set-intro-band-ja { font-size: 21px; gap: 12px; }
    .set-intro-band-ja::before, .set-intro-band-ja::after { max-width: 60px; }
    .set-intro-cat { font-size: 15px; }
    .set-intro-grid { grid-template-columns: 1fr; gap: 14px; }
    .intro-panel { flex-direction: row; align-items: stretch; }
    .intro-panel-img { flex: 0 0 38%; aspect-ratio: 1 / 1; }
    /* cover指定の画像はスマホでもPCと同じ9:6を維持（横並びでも縦に伸ばさない） */
    .intro-panel-img--cover { aspect-ratio: 9 / 6; align-self: center; }
    .intro-panel-body { padding: 12px 14px; }
    .intro-panel-title { font-size: 14px; padding-bottom: 8px; margin-bottom: 8px; }
    .intro-panel-desc { font-size: 12px; line-height: 1.8; }
}
@media (prefers-reduced-motion: reduce) {
    .intro-panel, .intro-panel-img img { transition: none; }
    .intro-panel:hover { transform: none; }
    .intro-panel:hover .intro-panel-img img { transform: none; }
}
.set-accordion { display: flex; flex-direction: column; gap: 14px; }
.set-acc-item { background: #fff; border-radius: 12px; overflow: hidden; }
.set-acc-head {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 0 14px 18px; position: relative;
    font-size: 17px; font-weight: 700; color: #222;
}
.set-acc-head::-webkit-details-marker { display: none; }
.set-acc-badge {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; background: #1a1a1a; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1.1; text-align: center;
}
.set-acc-name { flex: 1 1 auto; }
.set-acc-caret {
    flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; justify-content: center;
    width: 56px; background: #1a1a1a; color: #fff; font-size: 15px;
    border-radius: 0 12px 12px 0; transition: transform 0.25s ease;
}
.set-acc-item[open] .set-acc-caret i { transform: rotate(180deg); }
.set-acc-caret i { transition: transform 0.25s ease; }
.set-acc-body { padding: 16px 16px 20px; }
.set-acc-placeholder { font-size: 14px; line-height: 1.8; color: #555; text-align: center; }
.set-item-list {
    list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 20px;
}
.set-item-list li {
    position: relative; padding-left: 18px; font-size: 14px; line-height: 1.7; color: #333;
}
.set-item-list li::before {
    content: ''; position: absolute; left: 2px; top: 10px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--c-main);
}
@media (max-width: 767px) {
    .set-modal-title { font-size: 18px; }
    .set-modal-content { padding: 16px 12px; }
    .set-acc-head { font-size: 14px; gap: 8px; padding-left: 12px; }
    .set-acc-caret { width: 44px; }
    .set-item-list { grid-template-columns: 1fr; }
}
.bs-item {
    background: #fcfaf8; border: 1px solid #ece7e1; border-radius: 14px;
    padding: 14px 10px 12px; text-align: center;
    display: flex; flex-direction: column; align-items: center;
}
.bs-thumb {
    width: 100%; aspect-ratio: 1 / 1; display: flex;
    align-items: center; justify-content: center;
}
.bs-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bs-name {
    margin-top: 4px; font-size: 13px; font-weight: 700; line-height: 1.35;
    color: #333333; flex-grow: 1;
}
.bs-name-sub { display: block; font-size: 11px; font-weight: 500; color: #777; margin-top: 2px; }
.bs-qty {
    display: inline-block; margin-top: 8px;
    background: #2b2b2b; color: #fff; border-radius: 5px;
    font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
    padding: 2px 12px; min-width: 40px;
}
/* 注記付きの特別枠（救急セット＋ラジオ） */
.bs-note-box {
    max-width: 1000px; margin: 20px auto 0;
    background: #fdf3ee; border: 1px solid #f4d9cc; border-radius: 16px;
    padding: 22px 20px;
}
.bs-note-title {
    text-align: center; color: #d35b3e; font-size: 18px; font-weight: 700;
    margin: 0 0 12px;
}
.bs-note-items {
    display: flex; align-items: center; justify-content: center; gap: 24px;
}
.bs-note-item { text-align: center; width: 180px; }
.bs-note-item .bs-thumb { width: 130px; margin: 0 auto; }
.bs-note-item .bs-name { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
.bs-note-item .bs-qty { margin-top: 0; }
.bs-plus { font-size: 28px; font-weight: 700; color: #555; }

@media (max-width: 900px) {
    .bs-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
    .basic-set-lead { font-size: 19px; margin-bottom: 24px; }
    .basic-set-band { font-size: 12px; padding: 6px 12px; }
    .basic-set-note { font-size: 12px; }
    .bs-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .bs-item { padding: 10px 6px 10px; border-radius: 10px; }
    .bs-name { font-size: 11px; }
    .bs-name-sub { font-size: 9px; }
    .bs-qty { font-size: 11px; padding: 2px 9px; min-width: 32px; }
    .bs-note-items { gap: 12px; }
    .bs-note-item { width: auto; }
    .bs-note-item .bs-thumb { width: 90px; }
    .bs-note-title { font-size: 14px; }
    .bs-plus { font-size: 20px; }
}

/* --- 悩み喚起 (Problems) --- */
.problems { background: #f4f4f4; position: relative; }
.problems::after {
    content: ''; position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
    border-width: 30px 30px 0; border-style: solid;
    border-color: #f4f4f4 transparent transparent transparent;
    z-index: 10;
}
.prob-lead { text-align: center; font-size: 2rem; font-weight: bold; margin-bottom: 1.5rem; line-height: 1.4; letter-spacing: 0.05em; }
/* font-size: 1.05rem -> 1.15rem */
.prob-sub-lead { text-align: center; font-size: 1.15rem; font-weight: 500; margin-bottom: 2.5rem; line-height: 1.8; color: var(--c-text); }
.prob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.prob-item {
    background: #fff; padding: 2rem 1.5rem; border-radius: 12px; text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); position: relative;
}
.prob-icon { font-size: 3rem; color: #999; margin-bottom: 1rem; }
.prob-text { font-weight: bold; font-size: 1.15rem; line-height: 1.5; }
.prob-summary-box {
    background: #fff; padding: 2rem; border-radius: 12px; margin-top: 2.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); text-align: center; line-height: 1.8;
    font-weight: bold; border: 2px solid var(--c-main-light); font-size: 1.15rem;
}
.prob-solution { text-align: center; margin-top: 3rem; font-size: 1.6rem; font-weight: 900; color: var(--c-main); }

/* --- 特徴 (Features) --- */
.features { background: var(--c-base); }
.reason-list { display: grid; gap: 2rem; }
.reason-item {
    background: #fff; border-radius: 16px; overflow: hidden; display: flex;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); border: 1px solid #eee;
}
.reason-num {
    background: var(--c-main); color: #fff; width: 80px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; font-family: var(--f-serif);
    flex-shrink: 0;
}
.reason-num span { font-size: 0.8rem; font-weight: bold; }
.reason-num strong { font-size: 2.5rem; line-height: 1; }
.reason-body { padding: 2rem; flex: 1; display: flex; align-items: center; gap: 2rem; }
.reason-icon { font-size: 4rem; color: var(--c-accent); opacity: 0.8; width: 80px; text-align: center; flex-shrink: 0; }
.reason-text h3 { font-size: 1.4rem; margin-bottom: 0.8rem; color: var(--c-text); font-weight: 700; }
.reason-text p { font-size: 1.15rem; color: var(--c-gray); }
.reason-item.plus-card {
    border: 2px solid var(--c-accent);
    background: linear-gradient(to right, #fff, #fffdf5);
}
.reason-item.plus-card .reason-num { background: var(--c-accent); }

.emg-flow { display: flex; gap: 1rem; margin-top: 1.5rem; background: var(--c-bg-light); padding: 1rem; border-radius: 8px; }
.emg-step { flex: 1; text-align: center; font-size: 1.15rem; font-weight: bold; position: relative; }
.emg-step:not(:last-child)::after { content: '→'; position: absolute; right: -15px; color: var(--c-main); pointer-events: none; }
.emg-step i { display: block; font-size: 1.5rem; color: var(--c-main); margin-bottom: 0.5rem; }

/* --- 商品 (Products) --- */
.products { background: var(--c-white); }
.prod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 2rem; }
.prod-card {
    border: 2px solid #eee; border-radius: 12px; overflow: hidden;
    transition: 0.3s; background: #fff; display: flex; flex-direction: column; position: relative;
}
.prod-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); border-color: var(--c-main-light); }
.prod-img { height: 240px; object-fit: cover; background: #f0f0f0; width: 100%; }
.prod-body { padding: 2rem 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.prod-tag {
    position: absolute; top: 15px; left: 15px;
    background: var(--c-main); color: #fff; font-size: 1.15rem; font-weight: bold;
    padding: 8px 20px; border-radius: 50px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.prod-tag.sub { background: var(--c-accent); }
.prod-catch {
    font-size: 1.15rem; color: var(--c-main); font-weight: 900;
    margin-bottom: 0.2rem; display: block; letter-spacing: 0.05em;
}
.prod-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.prod-price {
    font-size: 1.8rem; color: var(--c-main); font-weight: 900; margin-bottom: 1rem;
    border-bottom: 1px dashed #ccc; padding-bottom: 1rem;
}
.prod-price span { font-size: 1.15rem; font-weight: normal; color: var(--c-gray); }
.prod-desc { color: var(--c-text); font-size: 1.15rem; margin-bottom: 1.5rem; flex-grow: 1; font-weight: 500; }
.prod-points { background: var(--c-bg-light); padding: 1.2rem; border-radius: 8px; margin-bottom: 1.5rem; font-size: 1.15rem; }
.prod-points ul { list-style: none; }
.prod-points li { margin-bottom: 0.5rem; display: flex; align-items: flex-start; gap: 0.5rem; }
.prod-points li i { color: var(--c-main); margin-top: 3px; }

/* 詳細アコーディオン */
.prod-details-accordion { margin-bottom: 1.5rem; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fff; }
.prod-details-summary {
    padding: 1rem; background: #f9f9f9; font-weight: bold; font-size: 1.15rem;
    cursor: pointer; display: flex; justify-content: space-between; align-items: center;
}
.prod-details-summary::after {
    content: '\f078'; font-family: "Font Awesome 6 Free"; font-weight: 900;
    transition: transform 0.3s ease; color: var(--c-gray);
}
details[open] > .prod-details-summary::after { transform: rotate(180deg); }
.prod-details-content {
    padding: 1rem; font-size: 1.15rem; border-top: 1px solid #ddd;
    color: var(--c-text); background: #fff;
}
.prod-details-list { list-style: none; padding: 0; margin: 0; }
.prod-details-list li {
    margin-bottom: 0.4rem; padding-left: 1em; position: relative; line-height: 1.4;
}
.prod-details-list li::before {
    content: '・'; position: absolute; left: 0; color: var(--c-main); font-weight: bold;
}
.prod-details-note { font-size: 1.15rem; color: var(--c-main); margin-top: 1rem; font-weight: bold; line-height: 1.4; }

/* --- カスタマイズ例 --- */
.custom-example-box {
    background: #fff; border: 2px solid var(--c-main-light); border-radius: 12px;
    margin-bottom: 4rem; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.example-title {
    background: var(--c-main-light); color: #fff; padding: 1.2rem; text-align: center;
    font-weight: bold; font-size: 1.4rem; letter-spacing: 0.05em;
}
.example-body { padding: 2rem; }
.example-scenario { font-size: 1.5rem; text-align: center; margin-bottom: 1.5rem; color: var(--c-text); line-height: 1.6; }
.example-items { display: flex; justify-content: center; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.ex-item {
    background: var(--c-bg-light); border-radius: 8px; padding: 1.5rem 1rem; text-align: center;
    flex: 1; min-width: 280px; max-width: 320px; border: 1px dashed var(--c-main);
}
.ex-person {
    font-weight: bold; margin-bottom: 1rem; color: var(--c-main);
    background-color: #fff; border: 2px solid var(--c-main);
    padding: 0.5rem 1.2rem; border-radius: 50px; display: inline-block; font-size: 1.15rem;
}
.ex-person i { color: var(--c-main); font-size: 1.15rem; margin-right: 5px; }
.ex-img-square {
    width: 100%; max-width: 200px; height: auto; object-fit: contain;
    margin: 0.5rem auto 1rem; display: block;
}
.ex-img-square-small {
    width: 100%; max-width: 160px; height: auto; object-fit: contain;
    margin: 0 auto; display: block;
}
.ex-plan { font-family: var(--f-serif); font-size: 1.4rem; font-weight: 900; color: var(--c-main); margin-bottom: 0.5rem; }
.ex-plus { font-size: 1.15rem; font-weight: bold; color: var(--c-accent); line-height: 1.4; margin-top: 15px; background: #fff; padding: 15px; border-radius: 8px; }
.example-note { text-align: center; font-size: 1.15rem; color: var(--c-gray); background: #f9f9f9; padding: 1.5rem; border-radius: 8px; margin-top: 1rem; font-weight: 500; }

/* --- ご利用の流れ (Flow) --- */
.flow { background-color: #f7f1e5; padding: 80px 0; }
.flow-head { text-align: center; margin-bottom: 56px; }
.flow-eyebrow {
    position: relative; display: inline-block;
    font-size: 21px; font-weight: 700; color: #222222; margin-bottom: 10px; padding: 0 34px;
}
.flow-eyebrow::before, .flow-eyebrow::after {
    content: ''; position: absolute; top: 50%; width: 2px; height: 22px;
    background: var(--c-main); border-radius: 2px;
}
.flow-eyebrow::before { left: 8px; transform: translateY(-50%) rotate(-24deg); }
.flow-eyebrow::after { right: 8px; transform: translateY(-50%) rotate(24deg); }
.flow-heading {
    font-family: 'Source Han Serif JP', 'Noto Serif JP', serif;
    font-size: 40px; font-weight: 600; color: #222222; line-height: 1.4;
    padding-bottom: 30px; margin-bottom: 30px;
    border-bottom: 1px solid #e6ddd3;
}
.flow-head-lead {
    display: inline-flex; align-items: center; gap: 22px;
}
.flow-head-icon { font-size: 44px; color: var(--c-main); }
.flow-head-checks { list-style: none; text-align: left; }
.flow-head-checks li {
    position: relative; padding-left: 30px; font-size: 19px; font-weight: 500; color: #222222;
    line-height: 2;
}
.flow-head-checks li::before {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; left: 0; top: 3px; font-size: 16px; color: var(--c-main);
}
.fstep-list {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
    max-width: 1080px; margin: 0 auto; align-items: start;
}
.fstep { position: relative; }
.fstep:not(:last-child)::after {
    content: ''; position: absolute; top: 130px; right: -28px; z-index: 2;
    border-width: 12px 0 12px 16px; border-style: solid;
    border-color: transparent transparent transparent var(--c-main-light);
}
.fstep {
    background: #fff; border: 2px solid #f0dccb; border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.fstep-head {
    background: var(--c-bg-light); border-radius: 14px 14px 0 0;
    text-align: center; padding: 0 12px; color: var(--c-main);
    font-size: 15px; font-weight: 700; letter-spacing: 0.1em;
}
.fstep-head b { font-family: 'Roboto', var(--f-sans); font-size: 20px; margin-left: 4px; }
.fstep-body { padding: 15px; }
.fstep-title {
    font-family: var(--f-sans);
    text-align: center; font-size: 24px; font-weight: 500; color: #222222;
    padding-bottom: 15px; margin-bottom: 15px; border-bottom: 2px solid #f0dccb;
}
.fstep-row { display: flex; flex-direction: column; gap: 18px; }
.fstep-img {
    width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; background: #ececec;
    display: flex; align-items: center; justify-content: center;
    color: #9a9a9a; font-size: 13px; letter-spacing: 0.1em;
    overflow: hidden;
    border: 1px solid #e0d8cc;
}
.fstep-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.fstep-detail { flex: 1; }
.fstep-lead { font-size: 17px; font-weight: 700; color: var(--c-main); margin-bottom: 12px; text-align: center; }
.fstep-list-ul { list-style: none; }
.fstep-list-ul li {
    position: relative; padding-left: 20px; margin-bottom: 8px;
    font-size: 15px; line-height: 1.7; color: #444;
}
.fstep-list-ul li::before {
    content: ''; position: absolute; left: 0; top: 9px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--c-main-light);
}
.fstep-arrow { display: none; }
@media (max-width: 1023px) {
    .flow-heading { font-size: 26px; }
    .flow-eyebrow { font-size: 17px; }
    .flow-head-lead { flex-direction: column; gap: 12px; }
    .flow-head-checks li { font-size: 16px; }
    .fstep-list { grid-template-columns: 1fr; gap: 0; max-width: 560px; }
    .fstep:not(:last-child)::after { display: none; }
    .fstep-arrow { display: block; text-align: center; color: var(--c-main-light); font-size: 30px; padding: 6px 0; }
    .fstep-body { padding: 22px 20px 24px; }
    .fstep-title { font-size: 22px; }
    .fstep-row { gap: 16px; }
    .fstep-img { max-width: 260px; margin: 0 auto; }
    .fstep-list-ul { text-align: left; display: inline-block; }
    .fstep-detail { text-align: center; }
    .flow-icon { width: 104px; height: 104px; font-size: 36px; }
}

/* --- FAQ --- */
.faq { background-color: #f1eae1; position: relative; overflow: hidden; }
.faq > .container { position: relative; z-index: 2; }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { background: var(--c-base); border: 1px solid #e4ddd0; border-radius: 8px; margin-bottom: 1rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.faq-summary { display: flex; align-items: center; padding: 1.5rem; cursor: pointer; position: relative; font-weight: 500; transition: 0.3s; font-size: 1.3rem; }
.faq-q-mark { color: var(--c-main); font-family: var(--f-serif); font-size: 1.5rem; margin-right: 1rem; flex-shrink: 0; }
.faq-summary::after { content: '+'; position: absolute; right: 1.5rem; font-size: 1.5rem; color: var(--c-main); font-weight: 400; transition: 0.3s; }
details[open] .faq-summary { background-color: rgba(230, 81, 0, 0.05); }
details[open] .faq-summary::after { transform: rotate(45deg); }
.faq-answer { padding: 1.5rem 1.5rem 1.5rem 4rem; border-top: 1px solid #e0e0e0; color: var(--c-gray); font-size: 16px; line-height: 1.8; }

/* --- もしもの時もココツナ (Emergency) --- */
.emergency-sec { background-color: var(--c-base); }
.emg-lead { text-align: center; font-size: 1.15rem; margin-bottom: 3rem; line-height: 1.6; font-weight: bold; }
.emg-flow-list {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1rem;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}
.emg-item {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 2px solid var(--c-main-light);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.emg-item:not(:last-child)::after {
    content: '\f054';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: -1.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-main);
    font-size: 1.5rem;
    opacity: 0.5;
    z-index: 2;
}
.emg-img-box {
    width: 100%;
    max-width: 120px;
    margin: 0 auto 1rem;
}
.emg-img-box img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #eee;
}
.emg-title {
    font-weight: bold;
    color: var(--c-main);
    font-size: 1.2rem;
}

/* --- Banner Section --- */
.banner-section { padding-bottom: 80px; padding-top: 80px; background-color: #ffeecb; }
.banner-container { max-width: 1000px; margin: 0 auto; width: 90%; }
/* 法人バナーは少し小さめに */
.banner-section--corp .banner-container { max-width: 930px; }
.banner-link { display: block; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: 0.3s; }
.banner-link:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
.banner-link picture { display: block; }
.banner-link img { width: 100%; height: auto; display: block; }
/* バナー下の注釈 */
.banner-notes { list-style: none; margin-top: 14px; }
.banner-notes li {
    position: relative; padding-left: 1.2em;
    font-size: 12px; line-height: 1.8; color: #6b5b45;
}
.banner-notes li::before { content: '※'; position: absolute; left: 0; top: 0; }
/* 注釈内の強調（キャンペーン条件など） */
.banner-notes .note-accent { color: #f45126; font-weight: 700; }
/* セクション内の注釈：文章は左揃えのまま、ブロックごと中央に置く */
.camp-notes,
.step-notes {
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 1080px; margin: 16px auto 0;
    text-align: left;
}
.camp-notes li { color: #6b4a1f; }
/* STEP1（リュックを選ぶ）の下に置く注釈：左端をリュックカードに揃える */
.step-notes {
    width: auto; max-width: 1000px;   /* .price-cards と同じ幅で中央寄せ＝左端が揃う */
    margin: 18px auto 0;
}
/* STEP1：申込画面で選ぶキャンペーン用パネルの見本 */
.camp-select-guide {
    max-width: 1000px; margin: 24px auto 0;
    background: #fff; border: 2px solid #f3c9a6; border-radius: 14px;
    padding: 18px 22px 20px;
}
.camp-select-guide-title {
    margin-bottom: 14px; text-align: center; line-height: 1.7;
    font-size: 16px; font-weight: 700; color: #222222;
}
.camp-select-guide-title i { color: #f45126; font-size: 18px; margin-right: 6px; }
.camp-select-guide-panels {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px; max-width: 720px; margin: 0 auto;
}
.camp-select-panel { margin: 0; }
.camp-select-panel img {
    width: 100%; height: auto; display: block;
    border: 1px solid #e2d8cc; border-radius: 8px; background: #fff;
}
.camp-select-panel figcaption {
    margin-top: 8px; text-align: center; line-height: 1.5;
    font-size: 13px; font-weight: 600; color: #6b5b45;
}
/* M／L だけ大きくすると和文より上に浮いて見えるので、字面に合わせて少し下げる */
.camp-select-panel figcaption b {
    color: var(--c-main); font-size: 1.15em;
    position: relative; top: 0.08em;
}
@media (max-width: 767px) {
    .banner-notes li { font-size: 11px; }
    .camp-select-guide { padding: 16px 14px 18px; border-radius: 12px; }
    .camp-select-guide-title { font-size: 14px; }
    .camp-select-guide-panels { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 340px; }
    /* スマホ：キャンペーンバナーは影を強めて浮かせる */
    .banner-section:not(.banner-section--corp) .banner-link {
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12);
    }
}

/* --- 公式SNSアカウント --- */
.sns-sec { background: #fafafa; padding: 26px 0; }
.sns-inner {
    display: flex; align-items: center; justify-content: center;
    gap: 28px; flex-wrap: wrap;
}
.sns-label {
    font-size: 15px; font-weight: 500; color: #555; letter-spacing: 0.04em;
}
.sns-list { list-style: none; display: flex; align-items: center; gap: 22px; }
.sns-link {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; font-size: 32px; line-height: 1;
    text-decoration: none; transition: transform 0.25s ease, opacity 0.25s ease;
}
.sns-link:hover { transform: translateY(-3px); opacity: 0.75; }
.sns-link--tiktok { color: #111; }
.sns-link--youtube { color: #ff0000; }
/* Instagram はブランドのグラデーションを文字に適用 */
.sns-link--instagram i {
    background: linear-gradient(45deg, #f9ce34 8%, #ee2a7b 50%, #6228d7 92%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
@media (max-width: 767px) {
    .sns-sec { padding: 20px 0; }
    .sns-inner { gap: 16px; }
    .sns-label { font-size: 13px; }
    .sns-list { gap: 18px; }
    .sns-link { width: 36px; height: 36px; font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
    .sns-link { transition: none; }
    .sns-link:hover { transform: none; }
}

/* --- Footer --- */
.footer { background: var(--c-base); padding: 50px 0 30px; text-align: center; border-top: 1px solid #e0e0e0; }
.footer-nav { margin-bottom: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.footer-nav a { margin: 0 10px; color: var(--c-text); font-size: 1.15rem; font-weight: 500; }
.footer-nav a:hover { color: var(--c-main); }
.copyright { font-size: 1.15rem; color: var(--c-gray); }

/* --- 最終CTA --- */
.final-cta-section {
    background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('../images/top/philosophy-v2.webp') center/cover no-repeat;
    background-attachment: scroll; /* iOS Safari互換: fixedは非対応 */
    text-align: center; color: #fff;
}
@supports (-webkit-overflow-scrolling: touch) {
    .final-cta-section { background-attachment: scroll; }
}
@media (min-width: 1024px) {
    .final-cta-section { background-attachment: fixed; }
}

/* --- Floating CTA --- */
.floating-cta {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(5px);
    padding: 10px; box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 9998; text-align: center;
}
.tv-card {
    position: relative;
    background: #fff; border-radius: 20px;
    padding: 12px 12px 16px;
    width: 100%; max-width: 320px; margin: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    text-align: left;
}
.tv-card-img { width: 100%; border-radius: 12px; display: block; }
.tv-card-close {
    position: absolute; top: -12px; right: -12px; z-index: 2;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(0,0,0,0.4); color: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; cursor: pointer;
    transition: background 0.2s;
}
.tv-card-close:hover { background: rgba(0,0,0,0.6); }
.tv-card-title {
    font-size: 18px; font-weight: 700; color: #222222;
    margin: 12px 4px 6px; line-height: 1.4;
}
.tv-card-text {
    font-size: 12px; line-height: 1.7; color: #555;
    margin: 0 4px 14px;
}
.tv-card-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #1F1F1F;
    color: var(--c-white);
    font-size: 17px; font-weight: 700;
    padding: 12px 16px; border-radius: 12px;
    transition: transform 0.3s;
}
.tv-card-btn:hover { transform: translateY(-3px); color: var(--c-white); }
.tv-card-btn .sub-text { font-size: 12px; font-weight: 500; line-height: 1.4; }
.tv-card-btn .main-text { font-size: 18px; font-weight: 700; line-height: 1.4; }

@media (min-width: 768px) {
    .floating-cta {
        position: absolute; width: auto; left: auto; right: 30px; bottom: 30px; top: auto;
        background: transparent; padding: 0; box-shadow: none; backdrop-filter: none;
    }
}
@media (max-width: 767px) {
    /* SPは従来どおりボタンのみの下部バー表示 */
    .tv-card { background: transparent; box-shadow: none; padding: 0; }
    .tv-card-img, .tv-card-title, .tv-card-text { display: none; }
    .tv-card-close { top: -14px; right: 4px; }
}

/* --- Animation --- */
@keyframes floatAnim {
    0% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}
@keyframes stepWave {
    0%, 100% { transform: translateY(0); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
    10% { transform: translateY(-12px); box-shadow: 0 15px 30px rgba(230,81,0,0.2); }
    20% { transform: translateY(0); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
}

/* --- Media Queries (PC: 1024px以上) --- */
@media (min-width: 1024px) {
    /* ハンバーガーボタンはDetails/Summaryに統合済み */
    .hero-title { font-size: 3.5rem; }
    .hero-content { padding: 2rem; }
    .prob-lead { font-size: 2.2rem; }
    .prob-item { animation: floatAnim 4s ease-in-out infinite; }
    .prob-item:nth-child(1) { animation-delay: 0s; }
    .prob-item:nth-child(2) { animation-delay: 0.8s; }
    .prob-item:nth-child(3) { animation-delay: 1.6s; }
    /* ご利用の流れのウェーブアニメーション(PCのみ) */
}

@media (min-width: 1140px) {
    .hidden-pc { display: none; }
    .hidden-sp {
        display: block !important;
    }
    .nav-pc.hidden-sp { display: flex !important; } /* PC時のdisplay:block上書き対策 */
}

/* --- Media Queries (SP: 1023px以下) --- */
@media (max-width: 1023px) {
    .br-sp { display: inline; }
    /* スマホでは非表示にするインラインテキスト */
    .txt-pc { display: none; }
    .header .container { width: 100%; max-width: 1600px; padding: 5px 15px; }
    /* --- FV：スマホは縦積みレイアウト --- */
    .hero {
        display: flex; flex-direction: column; align-items: center;
        height: auto; min-height: auto; padding: 100px 0 0;
        background:
            url('../images/top/fv-bg-sp.webp') center center / auto 100% no-repeat,
            repeating-linear-gradient(110deg, #ffeac6 0 44px, #ffefd4 44px 88px);
    }
    /* hero-contentはPCの文字サイズ比率(48:25:24)を保ったまま中央揃え（一律×0.83で縮小） */
    .hero .container { order: 1; width: 100%; padding: 0 16px; }
    .hero-content { transform: none; max-width: 100%; margin: 0 auto; text-align: center; }
    .hero-top { display: flex; flex-direction: column; align-items: center; }
    /* 背景に重なるため白いシャドウで浮かせる。
       filter:drop-shadow は合成レイヤーを作り、隣のバッジのアニメーションのたびに
       再ラスタライズされてチラつくため、レイヤーを作らない box-shadow で実装する */
    .hero-catch .catch-box,
    .hero-ribbon {
        box-shadow: 0 0 9px 5px rgba(255, 255, 255, 0.95);
    }
    /* マーカーは上60%が透明なため、box-shadowだと白い枠に見えてしまう。文字側に白フチを付ける */
    .hero-catch .catch-marker {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 14px rgba(255, 255, 255, 0.9);
    }
    .hero-catch { justify-content: center; flex-wrap: wrap; font-size: 23px; margin-bottom: 12px; gap: 8px; }
    .hero-ribbon { font-size: 15px; padding: 17px 20px 4px; margin-bottom: 12px; white-space: nowrap; }
    .hero-title { font-size: 36px; }
    .hero-bene { display: none; }
    /* hero-content：SPは各パーツを縮小 */
    .hero-content::before { width: 116%; height: 104%; }
    .hero-price-img { max-width: 300px; }

    .hero-backpacks--pc { display: none; }
    .hero-backpacks--sp {
        order: 2; position: static; transform: none; display: block;
        /* margin-top の負の値を小さくするほどリュックが下がる（0 で重なりなし） */
        width: 88%; max-width: 400px; height: auto; margin: -35px auto 0;
    }
    .hero-badge {
        order: 3; position: static; display: block; align-self: flex-end;
        width: 460px; max-width: 85%; margin: -80px 6% 0 0;
    }
    .hero-characters {
        order: 4; position: static; transform: none; display: block;
        width: 100%; max-width: 190px; height: auto; margin: -30px 0 0 0; align-self: flex-end;
    }
    .hero-usp-bar {
        order: 5; position: static; width: 100%; align-self: stretch;
        flex-direction: row; align-items: stretch; gap: 5px; padding: 5px 5px;
        margin-top: 0px;
    }
    .hero-usp-badge {
        flex-direction: column; gap: 2px; padding: 6px 12px; font-size: 16px;
        width: auto; height: auto; align-self: stretch; margin: 0px 0 0px 0px;
    }
    /* バッジを除いた残り幅に収める（min-width:0 がないと中身が右にはみ出す） */
    .hero-usp-list { flex: 1 1 auto; min-width: 0; }
    .hero-usp-row { width: 100%; }
    .hero-usp-pill { max-width: 100%; }
    /* 長文ピルは折り返して幅内に収める */
    .hero-usp-pill--wide {
        display: block; /* inline-flex のままだと文字と<em>が別々に折り返される */
        white-space: normal; height: auto;
        padding: 6px 14px; line-height: 1.35; text-align: left;
    }
    .hero-lead { font-size: 1.15rem; padding: 1rem; }
    .prob-lead { font-size: 1.5rem; }
    .prob-grid { grid-template-columns: 1fr; }
    .prob-summary-box { padding: 1.5rem 1rem; font-size: 1.15rem; }
    .example-items { flex-direction: column; align-items: center; }
    .ex-item { width: 100%; max-width: 100%; }
    .example-body { padding: 1.5rem 1rem; }
    .example-scenario { font-size: 1.15rem; }
    .reason-item { flex-direction: column; }
    .reason-num { width: 100%; padding: 0.5rem 0; flex-direction: row; gap: 10px; }
    .reason-body { flex-direction: column; text-align: center; gap: 1rem; padding: 1.5rem; }
    .emg-flow { flex-wrap: wrap; overflow: hidden; }
    .emg-step:not(:last-child)::after { display: none; }
    .flow-list { flex-direction: column; gap: 3rem; }
    .flow-item:not(:last-child)::after { content: '\f078'; right: auto; left: 50%; top: auto; bottom: -2rem; transform: translateX(-50%); }
    .faq-summary { padding: 10px 30px 10px 10px; font-size: 15px; }
    .faq-answer { padding-left: 1.5rem; font-size: 14px; }
    /* 高さ固定だと狭い端末でハンバーガーに当たるため、幅基準で可変にする */
    .logo img { height: auto; width: min(72vw, 277px); max-width: none; }
    /* SP メニューの位置は overlay-menu.css で制御 */
    .footer-nav { flex-direction: column; gap: 1.5rem; }

    /* もしもの時もココツナ (Emergency) 縦並び調整 */
    .emg-flow-list { flex-direction: column; gap: 2.5rem; }
    .emg-item { width: 100%; max-width: 400px; margin: 0 auto; }
    .emg-item:not(:last-child)::after {
        content: '\f078';
        right: auto;
        left: 50%;
        top: auto;
        bottom: -2rem;
        transform: translateX(-50%);
    }

    /* 修正2: prod-titleテキスト溢れ防止（320px「基本セット（プラスOne）」6px超過対策） */
    .prod-title {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* 修正4: タッチターゲット44dp確保（footer-nav a 23px, menu-trigger 21×38px 対策） */
    .footer-nav a {
        padding: 0.5rem 0 !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* タッチターゲット44dpはoverlay-menu.css の summary.hamburger-trigger で確保済み */
}

/* 極小端末(360px未満)の調整 */
@media (max-width: 360px) {
    .hero-title { font-size: 1.7rem; }
    .btn-final-cta { padding: 1rem 2rem; font-size: 1.1rem; }
}

/* 480px以下: メニュー1カラム化は overlay-menu.css で制御 */

/* 修正1: MASEフレームワークによるスクロール問題の包括対応 */
/* - min-width 350px による水平スクロール防止 */
/* - MASEのgrid-templateが固定高でコンテンツをはみ出させる問題の対策 */
/* - display: block でgridレイアウトを無効化し、コンテンツに自然に追従させる */
._z._sitetop._index {
    display: block !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
}

/* ベーステンプレートのフッター（_k container）を非表示 — 独自フッターを使用 */
._z._sitetop._index ._k._container { display: none !important; }

/* ==========================================
   お問い合わせページ (.e-inquiryGuide) → custom.css へ移管
   ※ sitetop.css は非ログインTOPページのみ読込のため
   ========================================== */

/* --- 補完: 元サイトではcustom.css(共通CSS)由来のリンク色 --- */
.faq-more-link { color: var(--c-main); }

/* --- スクロール連動フェードイン（控えめ） --- */
.anim { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; will-change: opacity, transform; }
.anim.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .anim { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- 画面右下の追尾バナー（料金セクション以降でフェードイン） --- */
.sticky-banner {
    /* 画面高さに対する上限（ここの数値だけ変えれば大きさを調整できる） */
    --banner-max-h: 25vh;
    /* バナー画像の縦横比（2000 / 1027）※画像を差し替えたら要更新 */
    --banner-ratio: 1.947;
    position: fixed; right: 20px; bottom: 20px; left: auto; z-index: 900;
    display: block;
    /* 幅の上限に「画面高さの25%に収まる幅」を加えて、高さが25vhを超えないようにする */
    width: min(340px, calc(100vw - 32px), calc(var(--banner-max-h) * var(--banner-ratio)));
    max-height: var(--banner-max-h);
    line-height: 0; text-decoration: none;
    border-radius: 8px; overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
    opacity: 0; visibility: hidden; transform: translateY(16px);
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
    pointer-events: none;
}
.sticky-banner.is-visible {
    opacity: 1; visibility: visible; transform: translateY(0);
    pointer-events: auto;
}
.sticky-banner picture { display: block; }
.sticky-banner img {
    width: 100%; height: auto; display: block;
}
/* 「きらん」と光沢が斜めに走る */
.sticky-banner::before {
    content: ''; position: absolute; z-index: 1; pointer-events: none;
    top: -50%; left: -60%; width: 26%; height: 200%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(14deg);
    animation: bannerShine 3.4s ease-in-out infinite;
}
@keyframes bannerShine {
    0%        { left: -60%; }
    45%, 100% { left: 135%; }
}
@media (max-width: 1023px) {
    .sticky-banner {
        right: 12px; bottom: 12px;
        width: min(calc(100vw - 24px), calc(var(--banner-max-h) * var(--banner-ratio)));
    }
}
@media (max-width: 767px) {
    /* SP画像は横長なので比率を差し替え（1366 / 424） */
    .sticky-banner { --banner-ratio: 3.222; }
}
/* 横向き・低い画面ではさらに控えめに */
@media (max-height: 480px) {
    .sticky-banner { --banner-max-h: 34vh; }
}
@media (prefers-reduced-motion: reduce) {
    .sticky-banner { transition: opacity 0.2s ease, visibility 0.2s; transform: none; }
    .sticky-banner.is-visible { transform: none; }
    .sticky-banner::before { display: none; }
}
/* 監修者の経歴モーダル（PDFのキャプチャ画像を掲載） */
.modal-dialog--pdf { width: min(94vw, 900px); }
.pdf-modal-content { background: #fff; border-radius: 12px; padding: 20px 20px 14px; }
.doc-pages { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.doc-pages img {
    display: block; width: 100%; height: auto;
    border: 1px solid #e2d8cc; border-radius: 8px;
}
.pdf-modal-note { margin-top: 12px; text-align: center; font-size: 13px; }
.pdf-modal-note a { color: var(--c-main); font-weight: 700; text-decoration: underline; }
.pdf-modal-note i { margin-left: 6px; font-size: 0.9em; }
@media (max-width: 767px) {
    .pdf-modal-content { padding: 16px 12px 12px; }
    .doc-pages { gap: 10px; }
}