/* ==========================================================
   kyusui.jp リニューアル用デザインシステム v2
   デザイントーン基準：2026.05 A4三つ折りリーフレット
   （濃紺ベース × 水色波モチーフ × 白抜きタイトル）
   ========================================================== */

:root {
    --navy: #1E4E9F;        /* リーフレット表紙の濃紺 */
    --navy-dark: #143A7E;
    --ink: #1F3A5F;         /* 本文テキスト */
    --aqua: #1FB4CE;        /* 内面のアクア */
    --aqua-deep: #0093B4;
    --aqua-pale: #E3F4FA;   /* 淡水色背景 */
    --paper: #F4F9FC;
    --yellow: #FFF100;
    --red: #E60012;
    --rakuten: #BF0000;
    --yahoo: #FF0033;
}

html { scroll-behavior: smooth; }

@media (max-width: 640px) {
    .v2 br.pc-only { display: none; }
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-weight: 500;
    line-height: 1.8;
}

img { max-width: 100%; height: auto; }
a { color: var(--aqua-deep); }

.v2 .container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- 見出し ---------- */
.v2 h1, .v2 h2, .v2 h3,
.v2 .hero-title {
    font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
    font-weight: 800;
    line-height: 1.4;
}

.v2 section { padding: 64px 0; }

.v2 h2.sec-title {
    margin: 0 0 40px 0;
    color: var(--navy);
    font-size: clamp(26px, 4.8vw, 40px);
    line-height: 1.35;
    text-align: center;
}
.v2 h2.sec-title .accent { color: var(--aqua-deep); }

/* 見出し上の英字ラベル（ジャンプ率アップ用） */
.v2 .sec-eyebrow {
    display: block;
    margin: 0 0 4px 0;
    color: var(--aqua-deep);
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .22em;
    text-align: center;
    text-transform: uppercase;
}
.v2 .bg-navy .sec-eyebrow, .v2 .cta-band .sec-eyebrow { color: var(--aqua); }
.v2 h2.sec-title::after {
    content: "";
    display: block;
    width: 120px;
    height: 10px;
    margin: 12px auto 0 auto;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 10"><path d="M0 5 Q7.5 0 15 5 T30 5 T45 5 T60 5 T75 5 T90 5 T105 5 T120 5" fill="none" stroke="%231FB4CE" stroke-width="3"/></svg>') no-repeat center / contain;
}

.v2 .lead {
    max-width: 760px;
    margin: 0 auto 32px auto;
    text-align: center;
}

.v2 .marker {
    background-image: linear-gradient(rgba(255,255,255,0) 68%, var(--yellow) 0%);
}

.v2 .notes {
    color: #7d8ca1;
    font-size: 13px;
    line-height: 1.6;
}

/* ---------- ヘッダー ---------- */
.v2header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 1px 6px rgba(20, 58, 126, .15);
}
.v2header .inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.v2header .brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--navy);
    font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
    font-weight: 800;
    font-size: 28px;
    text-decoration: none;
    line-height: 1.2;
}
.v2header .brand img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    background: #fff;
}
.v2header .brand small {
    display: block;
    color: var(--aqua-deep);
    font-size: 16px;
    font-weight: 700;
}
.v2header nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.v2header nav a {
    display: block;
    padding: 7px 12px;
    color: var(--navy);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 20px;
    background: var(--aqua-pale);
    white-space: nowrap;
}
.v2header nav a:hover { background: var(--aqua); color: #fff; }
.v2header nav a.now { background: var(--navy); color: #fff; }

/* ---------- ヒーロー ---------- */
.v2 .hero {
    position: relative;
    color: #fff;
    background: url(/img/top_bg.jpg) no-repeat;
    background-size: cover;
    background-clip: border-box;
    /* background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%); */
    padding: 56px 0 96px 0;
}
.v2 .hero .container {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 40px;
    align-items: center;
}
.v2 .hero-copy .eyebrow {
    display: inline-block;
    margin: 0 0 14px 0;
    padding: 4px 14px;
    color: var(--navy);
    background: var(--yellow);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
}
.v2 .hero-title {
    margin: 0 0 18px 0;
    font-size: clamp(32px, 5.6vw, 54px);
    line-height: 1.28;
    text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.v2 .hero-title .wave-line {
    display: block;
    height: 12px;
    margin: 10px 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 10"><path d="M0 5 Q7.5 0 15 5 T30 5 T45 5 T60 5 T75 5 T90 5 T105 5 T120 5" fill="none" stroke="%231FB4CE" stroke-width="4"/></svg>') repeat-x left center / 90px 10px;
}
.v2 .hero-sub {
    margin: 0 0 22px 0;
    font-size: clamp(15px, 2.2vw, 18px);
    font-weight: 700;
}
.v2 .hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 26px 0;
    padding: 0;
    list-style: none;
}
.v2 .hero-badges li {
    padding: 5px 14px;
    border: 2px solid rgba(255,255,255,.75);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

/* ヒーロー内の実績（社会的証明）バッジ：スペックチップより強い訴求力を持たせる */
.v2 .hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 26px 0;
    padding: 0;
    list-style: none;
}
.v2 .hero-trust li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: auto;
    flex: 0 0 auto;
    padding: 0;
    color: var(--navy);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.4;
}
.v2 .hero-trust li img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.v2 .hero-trust li small {
    display: block;
    color: var(--aqua-deep);
    font-size: 10.5px;
    font-weight: 700;
}

/* ヒーローの3画像ビジュアル（/pr/用：背負う姿→パッケージ→広告面 の視覚ストーリー） */
.v2 .hero-visual figure { margin: 0; }
.v2 .hero-visual .main img {
    display: block;
    width: 100%;
}
.v2 .hero-visual .main figcaption {
    margin-top: 8px;
    color: rgba(255,255,255,.92);
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
}
.v2 .hero-visual .subs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}
.v2 .hero-visual .subs figure {
    background: #fff;
    border-radius: 10px;
    padding: 8px 8px 6px 8px;
}
.v2 .hero-visual .subs img {
    display: block;
    width: 100%;
    height: 104px;
    object-fit: contain;
}
.v2 .hero-visual .subs figcaption {
    margin-top: 4px;
    color: var(--navy);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    line-height: 1.4;
}

/* トップページのヒーロー：右側の実写を下端に揃え、女性の脚が途切れる違和感を軽減 */
.v2 .hero-top .container { align-items: end; }
.v2 .hero-top .hero-img { position: relative; }

/* ヒーロー写真下のスペックチップ（控えめな補足情報として） */
.v2 .hero-img .chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: -17px 0 0 0;
    padding: 0;
    list-style: none;
}
/* トップページでは女性の下半身あたりに重ねて表示 */
.v2 .hero-top .hero-img .chips {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5%;
    margin: 0;
    z-index: 2;
}
.v2 .hero-img .chips li {
    padding: 3px 12px;
    color: #265d8e;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
}
.v2 .hero-img img {
    display: block;
    width: 100%;    margin-bottom: -95px;
    /* border-radius: 14px; */
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, .35); */
}
.v2 .hero .photo-note {
    margin-top: 8px;
    color: rgba(255,255,255,.6);
    font-size: 11px;
    text-align: center;
}

/* ヒーロー：写真背景タイプ（個人向けトップ用）
   ページ側で style="--hero-photo:url('...')" を指定。写真差し替えはURLを変えるだけ */
.v2 .hero.hero-photo {
    background-color: var(--navy-dark);
    background-image:
        linear-gradient(to bottom, rgba(20,58,126,.50) 0%, rgba(20,58,126,.60) 55%, #143A7E 96%),
        var(--hero-photo);
    background-size: cover;
    background-position: center;
    padding: 84px 0 110px 0;
}
.v2 .hero.hero-photo .container {
    grid-template-columns: 1fr;
    max-width: 880px;
}
.v2 .hero.hero-photo .hero-title { text-shadow: 0 2px 14px rgba(10,30,70,.55); }
.v2 .hero.hero-photo .hero-sub { text-shadow: 0 1px 8px rgba(10,30,70,.55); }
.v2 .hero.hero-photo .hero-badges li { background: rgba(20,58,126,.35); }

/* ヒーロー：明るいライトタイプ（行政・備蓄ケース販売用。信頼感・書類的な清潔感） */
.v2 .hero.hero-light {
    color: var(--ink);
    background: linear-gradient(160deg, #ffffff 0%, var(--aqua-pale) 100%);
}
.v2 .hero.hero-light .hero-title { color: var(--navy); text-shadow: none; }
.v2 .hero.hero-light .hero-sub { color: var(--ink); }
.v2 .hero.hero-light .hero-badges li { color: var(--navy); border-color: var(--navy); }
.v2 .hero.hero-light .hero-img img { box-shadow: 0 8px 22px rgba(20,58,126,.18); }
.v2 .hero.hero-light a.btn {
    color: #fff;
    background: var(--red);
    border-bottom: 4px solid rgba(0,0,0,.35);
}


@media (max-width: 590px) {
.v2 .hero-trust li {
    width: 30%;
}
}


/* 波の区切り */
.v2 .wave-sep {
    display: block;
    width: 100%;
    height: 48px;
    margin: -1px 0;
}

/* ---------- ボタン ---------- */
.v2 .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
.v2 .btn-row.center { justify-content: center; }
.v2 a.btn {
    display: inline-block;
    padding: 15px 34px;
    color: #fff;
    background: var(--red);
    border-radius: 999px;
    border-bottom: 4px solid rgba(0,0,0,.35);
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    transition: transform .1s;
}
.v2 a.btn:hover { transform: translateY(2px); border-bottom-width: 2px; }
.v2 a.btn.rakuten { background: var(--rakuten); }
.v2 a.btn.yahoo { background: var(--yahoo); }
.v2 a.btn.aqua { background: var(--aqua-deep); }
.v2 a.btn.ghost {
    color: var(--navy);
    background: #fff;
    border: 2px solid var(--navy);
    border-bottom: 4px solid var(--navy);
}
.v2 a.btn .small { display: block;     font-size: 14px; font-weight: 500; }

/* 暗い背景（ヒーロー・CTA帯）の上では赤×紺のハレーションを避け、
   黄色（メインCTA）／白ベース（モールボタン）に切り替える */
.v2 .hero a.btn,
.v2 .cta-band a.btn {
    color: var(--navy);
    background: var(--yellow);
    border-bottom: 4px solid rgba(0,0,0,.25);
}
.v2 .hero a.btn.rakuten,
.v2 .cta-band a.btn.rakuten {
    color: var(--rakuten);
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--rakuten);
}
.v2 .hero a.btn.yahoo,
.v2 .cta-band a.btn.yahoo {
    color: var(--yahoo);
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--yahoo);
}
.v2 .hero a.btn.ghost,
.v2 .cta-band a.btn.ghost {
    color: #fff;
    background: rgba(255,255,255,.12);
    border: 2px solid #fff;
    border-bottom: 4px solid #fff;
}

/* ショップボタン一覧（将来モール追加はliを増やすだけ） */
.v2 ul.shop-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.v2 ul.shop-buttons a.btn { min-width: 280px; }

/* ---------- カード ---------- */
.v2 .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.v2 .cards.cols2 { grid-template-columns: repeat(2, 1fr); }
.v2 .card {
    background: #fff;
    border-radius: 14px;
    padding: 26px 22px;
    box-shadow: 0 4px 14px rgba(20,58,126,.08);
}
.v2 .card .number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
    color: #fff;
    background: var(--aqua);
    border-radius: 50%;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 22px;
    font-weight: 800;
}
.v2 .card h3 {
    margin: 0 0 10px 0;
    color: var(--navy);
    font-size: 20px;
    text-align: center;
}
.v2 .card p { margin: 0; font-size: 14.5px; }
.v2 .card .illust {
    margin: 0 0 14px 0;
    text-align: center;
}
.v2 .card .illust img {    margin: 0 auto;
    height: 180px;
    width: auto;
    max-width: 100%;
    /* border-radius: 10px; */
}
.v2 .card .tag {
    display: inline-block;
    margin: 0 0 8px 0;
    padding: 2px 12px;
    color: #fff;
    background: var(--navy);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

/* ---------- チェックリスト（品質・特徴） ---------- */
.v2 .check-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.v2 .check-grid li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #fff;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 3px 10px rgba(20,58,126,.07);
}
.v2 .check-grid li::before {
    content: "✓";
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #fff;
    background: var(--aqua);
    border-radius: 50%;
    font-weight: 800;
}
.v2 .check-grid b { color: var(--navy); }
.v2 .check-grid p { margin: 2px 0 0 0; font-size: 13.5px; }

/* ---------- 画像＋テキストの2分割 ---------- */
.v2 .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: center;
}
.v2 .split .img img {
    display: block;
    width: 100%;
}
.v2 .split h3 {
    margin: 0 0 14px 0;
    color: var(--navy);
    font-size: 23px;
}

/* ---------- セクション背景バリエーション ---------- */
.v2 .bg-white { background: #fff; }
.v2 .bg-pale { background: var(--aqua-pale); }
.v2 .bg-navy { color: #fff; background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%); }
.v2 .bg-navy h2.sec-title { color: #fff; }

/* ---------- メディア・実績 ---------- */
.v2 .media-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.v2 .media-list li {
    background: #fff;
    border-top: 5px solid var(--aqua);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 14px rgba(20,58,126,.08);
    text-align: center;
}
.v2 .media-list .media-name {
    display: block;
    color: var(--navy);
    font-size: 17px;
    font-weight: 800;
}
.v2 .media-list p { margin: 6px 0 0 0; font-size: 13px; }

/* ---------- FAQ ---------- */
.v2 .faq { max-width: 820px; margin: 0 auto; }
.v2 .faq details {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 3px 10px rgba(20,58,126,.07);
    overflow: hidden;
}
.v2 .faq summary {
    padding: 16px 20px;
    color: var(--navy);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.v2 .faq summary::before { content: "Q. "; color: var(--aqua-deep); font-weight: 800; }
.v2 .faq details p {
    margin: 0;
    padding: 0 20px 18px 20px;
    font-size: 14.5px;
}
.v2 .faq details p::before { content: "A. "; color: var(--red); font-weight: 800; }

/* ---------- 商品定義バー（/pr/ ヒーロー直下：初見の人に「何の商品か」を数秒で伝える） ---------- */
.v2 .define-bar {
    background: #fff;
    border-bottom: 1px solid #dce9f2;
    padding: 26px 0;
}
.v2 .define-bar .define-label {
    display: block;
    margin: 0 0 8px 0;
    color: var(--aqua-deep);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}
.v2 .define-bar .define-text {
    max-width: 780px;
    margin: 0 auto;
    color: var(--navy);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.9;
    text-align: center;
}
.v2 .define-bar .notes { margin-top: 10px; text-align: center; }

/* 定義バー内の商品ミニ紹介（写真＋特徴3つ） */
.v2 .define-sampleimg {
    text-align: center;
}
.v2 .define-sampleimg img {
    margin: 0 auto;
}
.v2 .define-product {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    max-width: 780px;
    margin: 0 auto 0 auto;
    padding: 18px 22px;
    background: var(--aqua-pale);
    border-radius: 14px;
}
.v2 .define-product img {
    flex: 0 0 auto;
    width: 190px;
    border-radius: 10px;
}
.v2 .define-product ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.v2 .define-product li {
    position: relative;
    margin: 0 0 8px 0;
    padding: 0 0 0 26px;
    color: var(--navy);
    font-size: 14.5px;
    font-weight: 700;
}
.v2 .define-product li:last-child { margin-bottom: 0; }
.v2 .define-product li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--aqua-deep);
    font-weight: 800;
}
.v2 .define-product li.link { padding-left: 0; }
.v2 .define-product li.link::before { content: none; }
.v2 .define-product .more {
    display: inline-block;
    margin-top: 10px;
    color: var(--aqua-deep);
    font-size: 13px;
    font-weight: 800;
}
@media (max-width: 640px) {
    .v2 .define-product { flex-direction: column; gap: 14px; text-align: left; }
    .v2 .define-product img { width: 70%; max-width: 240px; }
}

/* 2段組の単価表：左右ブロックの区切り線 */
.v2 .table-scroll table.split-cols th:nth-child(3),
.v2 .table-scroll table.split-cols td:nth-child(3) {
    border-left: 4px solid var(--navy);
}

/* ---------- 誤解防止（✕→○） ---------- */
.v2 .myth-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 28px 0 0 0;
    padding: 0;
    list-style: none;
}
.v2 .myth-grid li {
    background: #fff;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 3px 10px rgba(20,58,126,.07);
}
.v2 .myth-grid .ng {
    display: block;
    color: #97a3b3;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: line-through;
}
.v2 .myth-grid .ng::before { content: "✕ "; color: #c0392b; text-decoration: none; font-weight: 800; }
.v2 .myth-grid .ok {
    display: block;
    margin-top: 6px;
    color: var(--navy);
    font-size: 15px;
    font-weight: 800;
}
.v2 .myth-grid .ok::before { content: "○ "; color: var(--aqua-deep); }
.v2 .myth-grid p { margin: 6px 0 0 0; font-size: 13px; }

/* ---------- 変換フロー（予算転換の縦フロー図） ---------- */
.v2 ol.flow-chain {
    max-width: 560px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: none;
    text-align: center;
}
.v2 ol.flow-chain li {
    position: relative;
    margin: 0 0 34px 0;
    padding: 14px 18px;
    background: #fff;
    border: 2px solid var(--aqua);
    border-radius: 12px;
    color: var(--navy);
    font-size: 15px;
    font-weight: 700;
}
.v2 ol.flow-chain li small { display: block; color: #7d8ca1; font-size: 12px; font-weight: 500; }
.v2 ol.flow-chain li:not(:last-child)::after {
    content: "▼";
    position: absolute;
    left: 50%;
    bottom: -27px;
    transform: translateX(-50%);
    color: var(--aqua-deep);
    font-size: 15px;
}
.v2 ol.flow-chain li.goal {
    color: #fff;
    background: var(--navy);
    border-color: var(--navy);
}

/* ---------- サンプル広告マーキー（横流れ。ホバーで停止／タッチ端末は手動スクロール） ---------- */
.v2 .ad-marquee {
    overflow: hidden;
    margin: 0 0 28px 0;
    padding: 14px 0;
}
.v2 .ad-marquee .track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: ad-scroll 45s linear infinite;
}
.v2 .ad-marquee:hover .track { animation-play-state: paused; }
@keyframes ad-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
    .v2 .ad-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .v2 .ad-marquee .track { animation: none; }
}
/* ハガキサイズ比率の広告台紙モック（デザイナー制作のサンプル画像に差し替え前提） */
.v2 .ad-mock {
    flex: 0 0 auto;
    width: 148px;
    height: 229px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #c8dcea;
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(20,58,126,.10);
    overflow: hidden;
}
.v2 .ad-mock .head {
    padding: 10px 8px;
    color: #fff;
    background: var(--navy);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    line-height: 1.4;
}
.v2 .ad-mock.c2 .head { background: var(--aqua-deep); }
.v2 .ad-mock.c3 .head { background: #2e7d32; }
.v2 .ad-mock.c4 .head { background: #b26a00; }
.v2 .ad-mock.c5 .head { background: #7b1fa2; }
.v2 .ad-mock .body {
    flex: 1;
    margin: 10px;
    background: repeating-linear-gradient(to bottom, #dde7ef 0 6px, transparent 6px 16px);
}
.v2 .ad-mock .foot {
    padding: 7px 8px;
    color: var(--navy);
    background: var(--aqua-pale);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

/* ---------- 目的別CTA（トップのヒーロー直下：迷わせない3つの入口） ---------- */
.v2 .purpose-nav {
    background: #fff;
    border-bottom: 1px solid #dce9f2;
    padding: 18px 0;
}
.v2 .purpose-nav .inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.v2 .purpose-nav a {
    display: block;
    padding: 8px 12px;
    color: var(--navy);
    background: #fff;
    border: 2px solid var(--aqua);
    border-radius: 12px;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    transition: background .12s;
}
.v2 .purpose-nav a small {
    display: block;
    margin-top: 0;
    color: var(--aqua-deep);
    font-size: 15px;
    font-weight: 700;
}
.v2 .purpose-nav a:hover { background: var(--aqua-pale); }
.v2 .purpose-nav a.primary {
    color: #fff;
    background: var(--red);
    border-color: var(--red);
}
.v2 .purpose-nav a.primary small { color: rgba(255,255,255,.85); }
.v2 .purpose-nav a.primary:hover { background: #c50010; }

/* ---------- 比較表（◎○△×マーク） ---------- */
.v2 .mk { font-weight: 800; font-size: 17px; }
.v2 .mk-yes { color: var(--aqua-deep); }
.v2 .mk-mid { color: #c98a00; }
.v2 .mk-no { color: #97a3b3; }
.v2 .table-scroll th.hl { background: var(--aqua-deep); }
.v2 .table-scroll td.hl {
    background: #EAF9FC;
    border-left: 2px solid var(--aqua);
    border-right: 2px solid var(--aqua);
    color: var(--navy);
    font-weight: 700;
}

/* ---------- 法人向け導線ストリップ（トップのヒーロー直下・控えめ） ---------- */
.v2 .biz-strip {
    background: #fff;
    border-bottom: 1px solid #dce9f2;
    padding: 14px 0;
}
.v2 .biz-strip .inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
}
.v2 .biz-strip .label {
    color: var(--navy);
    font-size: 13.5px;
    font-weight: 800;
    white-space: nowrap;
}
.v2 .biz-strip ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.v2 .biz-strip a {
    display: block;
    padding: 7px 16px;
    color: var(--navy);
    background: var(--aqua-pale);
    border: 1px solid #bcdcec;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.v2 .biz-strip a:hover { color: #fff; background: var(--aqua-deep); border-color: var(--aqua-deep); }
.v2 .biz-strip a::after { content: " ›"; color: var(--aqua-deep); font-weight: 800; }
.v2 .biz-strip a:hover::after { color: #fff; }

/* ---------- 誘導バナー ---------- */
.v2 .banner-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.v2 .banner-links a {
    display: block;
    height: 100%;
    box-sizing: border-box;
    padding: 24px 22px;
    color: #fff;
    border-radius: 14px;
    text-decoration: none;
    background: linear-gradient(150deg, var(--aqua-deep), var(--navy));
    box-shadow: 0 6px 16px rgba(20,58,126,.25);
    transition: transform .12s;
}
.v2 .banner-links a:hover { transform: translateY(-3px); }
.v2 .banner-links .who {
    display: inline-block;
    margin: 0 0 10px 0;
    padding: 3px 12px;
    color: var(--navy);
    background: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}
.v2 .banner-links .title {
    display: block;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.4;
}
.v2 .banner-links .desc {
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
    opacity: .9;
}
.v2 .banner-links .arrow { display: block; margin-top: 10px; font-weight: 800; }
.v2 .banner-links.cols2 { grid-template-columns: repeat(2, 1fr); }

/* ---------- 料金表（/pr/） ---------- */
.v2 .table-scroll { overflow-x: auto; }
.v2 .table-scroll table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    background: #fff;
}
.v2 .table-scroll th, .v2 .table-scroll td {
    padding: 12px 14px;
    border: 1px solid #c8dcea;
    text-align: center;
}
.v2 .table-scroll th { color: #fff; background: var(--navy); }
.v2 .table-scroll tr:nth-child(even) td { background: var(--aqua-pale); }

.v2 .siki {
    margin: 24px auto;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}
.v2 .siki .waku {
    display: inline-block;
    padding: 8px 20px;
    background: #fff;
    border: 2px solid var(--navy);
    border-radius: 10px;
    color: var(--navy);
}

/* 主要数量の単価タイル */
.v2 .price-tiles {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin: 0 0 28px 0;
    padding: 0;
    list-style: none;
}
.v2 .price-tiles li {
    position: relative;
    background: #fff;
    border: 2px solid var(--aqua);
    border-radius: 12px;
    padding: 14px 8px;
    text-align: center;
}
.v2 .price-tiles li.popular { border-color: var(--red); }
.v2 .price-tiles li.best::before {
    content: "売れ筋";
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 10px;
    color: #fff;
    background: var(--red);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}
.v2 .price-tiles .qty {
    display: block;
    color: var(--aqua-deep);
    font-size: 13px;
    font-weight: 800;
}
.v2 .price-tiles .unit {
    display: block;
    color: var(--navy);
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
}
.v2 .price-tiles .unit small { font-size: 12px; font-weight: 700; }

/* 概算シミュレーション */
.v2 .calc {
    max-width: 720px;
    margin: 0 auto 32px auto;
    background: #fff;
    border: 3px solid var(--navy);
    border-radius: 16px;
    padding: 28px 26px;
}
.v2 .calc h3 {
    margin: 0 0 18px 0;
    color: var(--navy);
    font-size: 21px;
    text-align: center;
}
.v2 .calc .calc-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 24px;
    margin-bottom: 18px;
}
.v2 .calc label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
}
.v2 .calc select {
    padding: 10px 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    border: 2px solid var(--aqua);
    border-radius: 8px;
    background: #fff;
}
.v2 .calc .calc-result {
    margin: 0;
    padding: 16px;
    background: var(--aqua-pale);
    border-radius: 10px;
    text-align: center;
    font-size: 15px;
}
.v2 .calc .calc-result .total {
    display: inline-block;
    margin: 4px 6px 0 6px;
    color: var(--red);
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.2;
}
.v2 .calc .notes { margin-top: 12px; text-align: center; }

/* 全単価表などの折りたたみ */
.v2 details.fold {
    max-width: 820px;
    margin: 0 auto 20px auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(20,58,126,.07);
    overflow: hidden;
}
.v2 details.fold summary {
    padding: 15px 20px;
    color: var(--navy);
    font-weight: 800;
    cursor: pointer;
    text-align: center;
}
.v2 details.fold summary::after { content: "（タップで開く）"; font-size: 12px; font-weight: 500; color: #7d8ca1; }
.v2 details.fold[open] summary::after { content: "（閉じる）"; }
.v2 details.fold .fold-body { padding: 0 20px 20px 20px; }

/* プラン */
.v2 .plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 0 20px 0;
    padding: 0;
    list-style: none;
}
.v2 .plan {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid var(--aqua);
    border-radius: 14px;
    overflow: hidden;
}
.v2 .plan .plan-head {
    padding: 12px;
    color: #fff;
    background: var(--aqua-deep);
    text-align: center;
    font-weight: 800;
}
.v2 .plan .plan-body { padding: 18px; }
.v2 .plan .price {
    margin: 0 0 8px 0;
    color: var(--red);
    font-size: 30px;
    font-weight: 800;
    text-align: center;
}
.v2 .plan .price span { font-size: 15px; }
.v2 .plan p { margin: 0; font-size: 13.5px; }
.v2 .plan .for {
    margin: 0 0 12px 0;
    padding: 8px 12px;
    color: var(--navy);
    background: var(--aqua-pale);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}
.v2 .plan ul.feats {
    margin: 0 0 12px 0;
    padding: 0;
    list-style: none;
}
.v2 .plan ul.feats li {
    position: relative;
    margin: 0 0 6px 0;
    padding: 0 0 0 24px;
    font-size: 13.5px;
}
.v2 .plan ul.feats li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--aqua-deep);
    font-weight: 800;
}
.v2 .plan details {
    margin-top: 12px;
    border-top: 1px dashed #c8dcea;
    padding-top: 10px;
}
.v2 .plan details summary {
    color: var(--aqua-deep);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.v2 .plan details p { margin: 8px 0 0 0; }

/* ---------- 仕様表 ---------- */
.v2 .spec-table table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
.v2 .spec-table th, .v2 .spec-table td {
    padding: 13px 16px;
    border: 1px solid #c8dcea;
    font-size: 14.5px;
    text-align: left;
}
.v2 .spec-table th {
    width: 30%;
    color: var(--navy);
    background: var(--aqua-pale);
}

/* ---------- STEP（使い方・スタートまでの流れ） ---------- */
.v2 .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}
.v2 .steps li {
    position: relative;
    counter-increment: step;
    background: #fff;
    border-radius: 14px;
    padding: 58px 22px 24px 22px;
    box-shadow: 0 4px 14px rgba(20,58,126,.08);
    text-align: center;
}
.v2 .steps li::before {
    content: "STEP " counter(step);
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 16px;
    color: #fff;
    background: var(--aqua);
    border-radius: 999px;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;
}
.v2 .steps h3 {
    margin: 0 0 8px 0;
    color: var(--navy);
    font-size: 18px;
}
.v2 .steps p { margin: 0; font-size: 13.5px; text-align: left; }
.v2 .steps .illust {
    margin: 0 0 12px 0;
    text-align: center;
}
.v2 .steps .illust img {
    height: 130px;
    width: auto;
    max-width: 100%;
    border-radius: 10px;
}

/* ---------- ご注文の流れ ---------- */
.v2 .flow { max-width: 820px; margin: 0 auto; }
.v2 .flow dl {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    margin: 0 0 12px 0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(20,58,126,.07);
}
.v2 .flow dt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    color: #fff;
    background: var(--navy);
    font-weight: 800;
}
.v2 .flow dt span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    color: var(--navy);
    background: #fff;
    border-radius: 50%;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 800;
}
.v2 .flow dd { margin: 0; padding: 14px 18px; }
.v2 .flow dd p { margin: 0; font-size: 14.5px; }
.v2 .flow .note { color: #7d8ca1; font-size: 12.5px; }

/* ---------- 事例 ---------- */
.v2 .jirei-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.v2 .jirei {
    background: #fff;
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 3px 10px rgba(20,58,126,.07);
}
.v2 .jirei h3 {
    margin: 0;
    color: var(--aqua-deep);
    font-size: 15px;
}
.v2 .jirei h4 {
    margin: 4px 0 10px 0;
    color: var(--navy);
    font-size: 17px;
    line-height: 1.5;
}
.v2 .jirei p { margin: 0; font-size: 13.5px; }

/* ---------- CTAセクション ---------- */
.v2 .cta-band {
    color: #fff;
    background: linear-gradient(150deg, var(--aqua-deep), var(--navy));
    text-align: center;
    padding: 56px 0;
}
.v2 .cta-band h2 {
    margin: 0 0 16px 0;
    font-size: clamp(22px, 3.6vw, 30px);
}
.v2 .cta-band p { margin: 0 0 24px 0; }

/* ---------- フッター ---------- */
.v2footer {
    color: #fff;
    background: var(--navy-dark);
    padding: 40px 0 20px 0;
}
.v2footer .cols {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 24px;
}
.v2footer h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--aqua);
}
.v2footer ul { margin: 0; padding: 0; list-style: none; }
.v2footer li { margin: 0 0 8px 0; }
.v2footer a { color: #fff; font-size: 13.5px; text-decoration: none; }
.v2footer a:hover { text-decoration: underline; }
.v2footer .brandline {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 800;
    font-size: 18px;
}
.v2footer .brandline img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
}
.v2footer .copy {
    margin: 32px 0 0 0;
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,.6);
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 860px) {
    .v2 section { padding: 44px 0; }
    .v2 .hero { padding: 36px 0 72px 0; }
    .v2 .hero .container { grid-template-columns: 1fr; }
    .v2 .hero-img { max-width: 420px; margin: 0 auto; }
    .v2 .cards, .v2 .media-list, .v2 .plans, .v2 .banner-links { grid-template-columns: 1fr; }
    .v2 .cards.cols2, .v2 .banner-links.cols2 { grid-template-columns: 1fr; }
    .v2 .price-tiles { grid-template-columns: repeat(3, 1fr); }
    .v2 .check-grid { grid-template-columns: 1fr; }
    .v2 .split { grid-template-columns: 1fr; }
    .v2 .split .img { max-width: 460px; margin: 0 auto; }
    .v2 .jirei-grid { grid-template-columns: 1fr; }
    .v2 .flow dl { grid-template-columns: 1fr; }
    .v2 .steps { grid-template-columns: 1fr; }
    .v2 ul.shop-buttons { flex-direction: column; align-items: stretch; }

    /* ヘッダーナビは折り返さず横スクロールに（縦に積んで画面を圧迫しない） */
    .v2header .inner { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 12px; }
    .v2header .brand { justify-content: center; width: 100%; box-sizing: border-box; }
    .v2header nav { width: 100%; min-width: 0; box-sizing: border-box; }
    .v2header nav ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        justify-content: flex-start;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .v2footer .cols { grid-template-columns: 1fr; }

    /* トップページのヒーロー：スマホでは女性の実写を右上に小さく配置し、
       コピーやバッジの背景として見せる（縦積みでヒーローが間延びするのを防ぐ） */
    .v2 .hero-top .container { position: relative; display: block; }
    .v2 .hero-top .hero-copy { position: relative; z-index: 1; }
    .v2 .hero-top .hero-img {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        max-width: 230px;
        margin: 0;
        z-index: 0;
    }
    .v2 .hero-top .hero-img img {
        -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
        mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
    }
    .v2 .hero-top .hero-img .chips { display: none; }
}

/* スマホ（縦持ち）向けの微調整 */
@media (max-width: 480px) {
    .v2 section { padding: 36px 0; }
    .v2 .container { padding: 0 16px; }
    .v2 h2.sec-title { margin-bottom: 28px; }
    .v2 a.btn {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 15px 16px;
        font-size: 15.5px;
    }
    .v2 .btn-row { flex-direction: column; align-items: stretch; }
    .v2 ul.shop-buttons a.btn { min-width: 0; }
    .v2 .hero { padding: 28px 0 64px 0; }
    .v2 .hero-badges li { font-size: 12px; padding: 4px 11px; }
    .v2 .card { padding: 22px 18px; }
    .v2 .card .illust img { height: 120px; }
    .v2 .split { gap: 20px; }
    .v2 .table-scroll th, .v2 .table-scroll td { padding: 10px 8px; font-size: 13px; }
    .v2 .spec-table th, .v2 .spec-table td { padding: 10px 12px; font-size: 13.5px; }
    .v2 .spec-table th { width: 34%; }
    .v2 .siki { font-size: 15px; }
    .v2 .siki .waku { padding: 6px 12px; }
    .v2 .price-tiles { grid-template-columns: repeat(2, 1fr); }
    .v2 .calc { padding: 20px 16px; }
    .v2 .calc .calc-row { flex-direction: column; align-items: stretch; }
    .v2 .calc select { width: 100%; box-sizing: border-box; }
    .v2 .banner-links.cols2 { grid-template-columns: 1fr; }
    .v2 .hero.hero-photo { padding: 64px 0 96px 0; }
    .v2 .purpose-nav .inner { grid-template-columns: 1fr; gap: 8px; }
    .v2 .myth-grid { grid-template-columns: 1fr; }
    .v2 .define-bar .define-text { font-size: 15px; }
    .v2 .biz-strip .inner { flex-direction: column; gap: 8px; }
    .v2 .biz-strip ul { width: 100%; flex-direction: column; }
    .v2 .biz-strip a { text-align: center; }
    .v2 .banner-links a { padding: 20px 18px; }
    .v2footer .cols { grid-template-columns: 1fr; }
    .v2 .flow dt { padding: 12px 14px; }
    .v2 .flow dd { padding: 12px 14px; }
}