/* ==========================================================================
   四神組織診断 診断前LP ── PC（1920基準）／SP（375基準）
   デザイン: ラヴィゴット村田さん XD「20260710 先方OK」。数値は XD の実測値（1920幅）。
   ========================================================================== */

:root {
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:  "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ink: #2e2e2e; --ink-2: #131311;
  --blue: #3f62a8;
  --navy: #333847; --navy-2: #2e3240;
  /* 村田さん実測（1920幅）: 左端は#f8f7f9→200pxで#e9e9f8、中央#faf8fa、右は1500pxまで#faf1f1、右端#f8e5e5。桃色は右の2割だけ */
  /* 正本（1845幅）の実測: 左端から青 #e9e9f8、400pxで #f4f4fa、中央 #faf8f9、1200pxで #faf2f2、1500pxで #f3e4e4、右端 #f7e5e5。青も桃も端から広く入る */
  --grad: linear-gradient(90deg, #e9e9f8 0%, #ececf9 5%, #efeff9 11%, #f4f4fa 22%, #f8f7fa 34%, #faf8f9 46%, #fbf6f6 56%, #faf2f2 65%, #f6ebeb 73%, #f3e4e4 81%, #f5e4e4 90%, #f7e5e5 100%);
  --mark: #c3d5f2; /* 洋一さん指示 9/18: 灰色寄りから青寄りへ */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; text-spacing-trim: space-all; color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.8; background: #f8f7f9; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
/* ハイライトは全面塗りではなく下だけ（アンダーライン型）。洋一さん指示 9/18 */
mark { background: linear-gradient(transparent 62%, var(--mark) 62%); color: inherit; }
b { font-weight: 700; }
.page { position: relative; overflow: hidden; }
.sp, .sp-br { display: none; } /* スマホ専用の改行・文言 */
.pc { display: inline; }
br.pc { display: inline; }
/* 背景の飾り線: 村田さん正本と同じ「束になった曲線」を SVG で描く。どちらも左上から右下へ流れる */
.deco { position: absolute; width: 900px; height: 1050px; background: url("../img/deco_arcs.svg") no-repeat center / contain; pointer-events: none; z-index: 2; }
.top { position: relative; overflow: hidden; background: var(--grad); }
.sec { overflow: hidden; }
.deco--1 { left: calc(50% + 280px); top: 380px; }
.deco--2 { left: calc(50% - 1330px); top: 60px; }
.deco--3 { left: calc(50% + 330px); top: -120px; }
.deco--4 { left: calc(50% - 1330px); top: 700px; }

/* ---------- 共通 ---------- */
.sec { position: relative; background: var(--grad); text-align: center; }
.h2 { font-family: var(--serif); font-weight: 600; font-size: 33px; line-height: 48px; letter-spacing: .08em; color: var(--ink-2); }
.h3 { font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 30px; letter-spacing: .04em; color: var(--ink-2); }
.h3--lines { font-size: 20px; line-height: 31px; }
.lead { font-size: 16.5px; font-weight: 500; line-height: 33px; letter-spacing: .08em; color: var(--ink-2); }
.body { font-size: 16px; font-weight: 400; line-height: 34.5px; letter-spacing: .1em; color: var(--ink); }

/* CTAボタン */
.cta { display: inline-block; text-align: center; }
.cta--center { display: block; }
.cta__btn { position: relative; display: block; width: 422px; height: 81px; margin: 0 auto; padding-top: 12px; border-radius: 6px; color: #fff; text-align: center;
  background: linear-gradient(180deg, #4f73af 0%, #33548d 100%); box-shadow: 0 4px 10px rgba(30, 50, 100, .30), inset 0 1px 0 rgba(255,255,255,.18); }
.cta__sub { display: block; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: .04em; }
.cta__main { display: block; font-size: 22px; font-weight: 700; line-height: 32px; letter-spacing: .06em; }
.cta__btn i { position: absolute; right: 24px; top: 50%; width: 0; height: 0; margin-top: -11px; border-style: solid; border-width: 11px 0 11px 13px; border-color: transparent transparent transparent #fff; }
.cta__note { margin-top: 10px; font-size: 13px; font-weight: 700; line-height: 18px; letter-spacing: .02em; color: var(--ink-2); }

/* ---------- ファーストビュー ---------- */
.fv { position: relative; height: 700px; background: var(--grad); }
.fv__inner { position: relative; width: 1051px; height: 100%; margin: 0 auto; left: 33px; }
.fv__logo { position: absolute; left: -31px; top: 34px; }
.fv__logo img { height: 30px; width: auto; }
.fv__text { position: absolute; left: 0; top: 125px; width: 560px; text-align: left; }
.fv__label { display: inline-block; height: 33px; padding: 0 12px; border: 1px solid var(--ink); font-size: 14px; font-weight: 700; line-height: 31px; letter-spacing: .04em; color: var(--ink-2); }
.fv__title { margin-top: 16px; font-family: var(--serif); font-weight: 600; font-size: 33px; line-height: 47px; letter-spacing: .03em; color: var(--ink-2); white-space: nowrap; }
.fv__title em { font-style: normal; background: linear-gradient(transparent 62%, var(--mark) 62%); }
.fv__lead { margin-top: 24px; font-size: 15.5px; font-weight: 400; line-height: 29.3px; letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
.fv .cta { margin-top: 33px; }
.fv .cta__btn { margin: 0; }
/* ひし形: 白いタイル4枚（回転した正方形）＋X字の細線＋四神の絵（大きなひし形で切り抜き）。中心は inner 基準 (631,341) */
.fv__art { position: absolute; left: 812px; top: 203px; width: 0; height: 0; }
.fv__tile { position: absolute; width: 175px; height: 175px; margin: -87.5px 0 0 -87.5px; background: #faf6f7; transform: rotate(45deg); }
.fv__tile--n { left: 0; top: -125px; } .fv__tile--e { left: 125px; top: 0; } .fv__tile--s { left: 0; top: 125px; } .fv__tile--w { left: -125px; top: 0; }
.fv__x { position: absolute; left: -240px; top: -1px; width: 480px; height: 2px; background: rgba(255,255,255,.95); }
.fv__x--a { transform: rotate(45deg); } .fv__x--b { transform: rotate(-45deg); }
/* 白虎のタイルだけ元画像が真っ白なので、他3枚と同じ灰色の陰影を乗算で乗せる（洋一さん指示 9/18） */
.fv__shade { position: absolute; left: -125px; top: 0; width: 175px; height: 175px; margin: -87.5px 0 0 -87.5px; transform: rotate(45deg); z-index: 2; mix-blend-mode: multiply; pointer-events: none;
  background: radial-gradient(circle at 62% 50%, #ffffff 0%, #f6f6f6 35%, #e4e3e4 70%, #cfcccf 100%); }
.fv__gods { position: absolute; left: -256.5px; top: -288.8px; width: 520.3px; height: 551.5px; max-width: none; clip-path: polygon(256.5px 42px, 503px 288.8px, 256.5px 535.6px, 10px 288.8px); }

/* ---------- 次の成長で詰まる、本当の理由 ---------- */
.sec--reason { padding-top: 20px; }
.sec--reason .lead { margin-top: 32px; }
.symptoms { display: flex; justify-content: center; gap: 17px; margin-top: 30px; }
.symptoms li { width: 231px; height: 177px; border: 1px solid #c9cdd8; border-radius: 3px; background: #fff; text-align: center; }
.symptoms__top { height: 118px; border-bottom: 1px solid #c9cdd8; padding-top: 17px; }
.symptoms__top p { font-size: 15.5px; font-weight: 500; line-height: 30px; letter-spacing: .04em; color: #555; }
.symptoms__top img { width: 62px; height: 62px; margin: 4px auto 0; object-fit: contain; }
.symptoms__but { display: flex; align-items: center; justify-content: center; height: 57px; font-size: 16px; font-weight: 700; line-height: 24px; color: var(--ink-2); }
.lead--after { margin-top: 26px; line-height: 42px; font-size: 18px; font-weight: 500; letter-spacing: .16em; }
.lead--after mark { font-weight: 700; }

/* ---------- 組織を動かす4つの力 ---------- */
.sec--forces { padding-top: 110px; padding-bottom: 115px; }
.sec--forces .h3 { margin-top: 39px; }
.sec--forces .body { margin-top: 20px; }
.c-kakushin { color: #2c2c7e; } .c-kyoso { color: #b72e2e; } .c-seika { color: #7a6f9b; } .c-kozo { color: #314737; }
.gods { display: grid; grid-template-columns: 372px 372px; gap: 47px 42px; width: 786px; margin: 67px auto 0; }
.gods__card { position: relative; width: 372px; padding: 29px 47px 0; border-radius: 4px; text-align: left; }
.gods__card::before { content: ""; position: absolute; left: 0; top: 0; width: 94px; height: 5px; }
.gods__card--seiryu { background: #e3f2f5; } .gods__card--seiryu::before { background: #2c2c7e; } .gods__card--seiryu .gods__title { color: #2c2c7e; }
.gods__card--suzaku { background: #f6eaea; } .gods__card--suzaku::before { background: #b72e2e; } .gods__card--suzaku .gods__title { color: #b72e2e; }
.gods__card--byakko { background: #e3e8f2; } .gods__card--byakko::before { background: #a798d4; } .gods__card--byakko .gods__title { color: #7a6f9b; } /* 白虎: 灰色は読めないので紫グレー（洋一さん 9/19） */
.gods__card--genbu  { background: #e4f5ec; } .gods__card--genbu::before  { background: #314737; } .gods__card--genbu .gods__title  { color: #1d2a22; }
.gods__img { width: 202px; height: 200px; margin: 0 auto; background: #fff; display: flex; align-items: center; justify-content: center; }
.gods__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gods__title { display: flex; align-items: center; margin-top: 34px; font-family: var(--sans); font-size: 21px; font-weight: 700; line-height: 32px; letter-spacing: .18em; }
.gods__title i { display: inline-block; width: 1px; height: 22px; margin: 0 12px 0 6px; background: #9a9aa0; }
.gods__card--suzaku .gods__img { width: 205px; height: 199px; }
.gods__card--byakko .gods__img { width: 207px; height: 199px; }
.gods__card--byakko, .gods__card--genbu { padding-top: 36px; }
/* 玄武の絵は元データが横長。洋一さん指示（9/18）で他の3枚と同じ正方形の白箱に収める */
.gods__card--genbu .gods__img { width: 207px; height: 199px; overflow: hidden; }
.gods__card--genbu .gods__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 45%; }
.gods__card--byakko .gods__title, .gods__card--genbu .gods__title { margin-top: 41px; }
.gods__desc { margin-top: 15px; font-size: 15.5px; font-weight: 500; line-height: 27px; letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
.gods__caveat { margin-top: 15px; padding-top: 15px; padding-bottom: 42px; border-top: 1px solid #6f6f74; font-size: 15.5px; font-weight: 500; line-height: 27px; letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
.gods__card--suzaku .gods__caveat { padding-bottom: 27px; }

/* ---------- 濃紺の帯 ---------- */
.band { position: relative; margin-top: 0; padding: 173px 0 0; height: 676px; text-align: center; color: #fff;
  /* 村田さん実測: 上端は生成り→紺へ約130pxでなだらか、下端は紺→生成りへ約130px。地は #333847 で、文字の後ろの光は弱い。両脇の輪はうっすら */
  /* 村田さん正本の実測: 地 #333847、文字の後ろだけ中心で約+80明るい楕円の光。両脇の輪は明暗差1〜2%でほぼ見えない */
  background:
    radial-gradient(ellipse 430px 165px at 50% 46%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 100%),
    /* 同心円はCTAを中心に外へ広がる（村田さん正本と同じ向き） */
    radial-gradient(circle at 50% 60%, rgba(255,255,255,0) 0 520px, rgba(255,255,255,.03) 590px 680px, rgba(255,255,255,0) 750px 820px, rgba(255,255,255,.028) 890px 980px, rgba(255,255,255,0) 1050px),
    /* 両脇の大きな暗い楕円（正本: 地より5〜6段暗く、縁がわずかに明るい） */
    radial-gradient(ellipse 430px 640px at 1% 55%, rgba(0,0,0,.15) 0 78%, rgba(0,0,0,.05) 92%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse 430px 640px at 99% 55%, rgba(0,0,0,.15) 0 78%, rgba(0,0,0,.05) 92%, rgba(0,0,0,0) 100%),
    var(--navy); }
.band::before, .band::after { content: ""; position: absolute; left: 0; right: 0; }
/* 上端: 村田さん実測に合わせた曲線（最初はゆっくり、最後に一気に紺へ）。上の節の地色 #ececf9 から始める */
.band::before { top: 0; height: 125px; background: var(--grad); -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.99) 16%, rgba(0,0,0,.95) 32%, rgba(0,0,0,.85) 48%, rgba(0,0,0,.68) 62%, rgba(0,0,0,.5) 74%, rgba(0,0,0,.3) 86%, rgba(0,0,0,.1) 95%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.99) 16%, rgba(0,0,0,.95) 32%, rgba(0,0,0,.85) 48%, rgba(0,0,0,.68) 62%, rgba(0,0,0,.5) 74%, rgba(0,0,0,.3) 86%, rgba(0,0,0,.1) 95%, transparent 100%); }
.band::after { bottom: 0; height: 125px; background: var(--grad); -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.99) 16%, rgba(0,0,0,.95) 32%, rgba(0,0,0,.85) 48%, rgba(0,0,0,.68) 62%, rgba(0,0,0,.5) 74%, rgba(0,0,0,.3) 86%, rgba(0,0,0,.1) 95%, transparent 100%); mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.99) 16%, rgba(0,0,0,.95) 32%, rgba(0,0,0,.85) 48%, rgba(0,0,0,.68) 62%, rgba(0,0,0,.5) 74%, rgba(0,0,0,.3) 86%, rgba(0,0,0,.1) 95%, transparent 100%); }
.band > * { position: relative; z-index: 1; }
.band__text { font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 37px; letter-spacing: .1em; }
.band .cta { margin-top: 47px; }
.band .cta__note { margin-top: 17px; color: #fff; font-weight: 500; }
.band--2 { margin-top: 0; height: 644px; padding-top: 194px;
  background:
    radial-gradient(ellipse 480px 190px at 50% 45%, rgba(255,255,255,.20) 0%, rgba(255,255,255,.11) 40%, rgba(255,255,255,.04) 70%, rgba(255,255,255,0) 100%),
    radial-gradient(circle at 50% 62%, rgba(255,255,255,0) 0 520px, rgba(255,255,255,.03) 590px 680px, rgba(255,255,255,0) 750px 820px, rgba(255,255,255,.028) 890px 980px, rgba(255,255,255,0) 1050px),
    var(--navy); }
.band--2::after { background: #eef2f9; }
.band--2 .band__text { line-height: 42px; }
.band--2 .cta { margin-top: 28px; }

/* ---------- 診断で見える3つのこと ---------- */
.sec--three { padding-top: 61px; padding-bottom: 79px; }
.sec--three .h3 { margin-top: 42px; }
.sec--three .body { margin-top: 20px; }
.three__note { margin-top: 36px; font-size: 13px; font-weight: 500; letter-spacing: .12em; color: #7a7f8c; }
/* 3つのこと（PC）: 3列のまま、カードを低くして窓を小さく。窓の下端はぼかして「切れた画面」に見せない（洋一さん 9/20） */
.three { display: flex; justify-content: center; gap: 28px; margin-top: 14px; }
.three li { width: 344px; padding: 0 26px 30px; border-radius: 6px; background: #fff; box-shadow: 0 2px 10px rgba(60, 70, 110, .08); text-align: left; }
.three__head { display: flex; align-items: center; height: 58px; border-bottom: 1px solid #8a90a8; }
.three__num { font-family: var(--sans); font-size: 32px; font-weight: 400; line-height: 1; letter-spacing: .06em; color: var(--ink-2); }
.three__name { display: flex; align-items: center; height: 40px; margin-left: 22px; padding-left: 22px; border-left: 1px solid #8a90a8; font-size: 20px; font-weight: 700; line-height: 30px; letter-spacing: .12em; color: var(--ink-2); }
.three__title { display: flex; align-items: center; justify-content: center; height: 78px; text-align: center; font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: .04em; color: var(--ink-2); }
/* 3枚のスクショは完成した Part1 から実際に撮ったもの（洋一さん指示 9/18）。375幅×500 を2倍で撮影 */
/* 窓の3枚: Part1 の実物を同じ高さで。01 は丸を小さくしてタイプ名まで収めた組み（_work/shot1）。02・03 は続きがあるので下端 44px だけぼかす */
.three__shot { width: 240px; height: 358px; margin: 0 auto; object-fit: cover; object-position: top; border-radius: 6px; }
.three li:not(:first-child) .three__shot { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent 100%); }
/* 02 は白い画面を白いカードに置くので、上辺に薄い線を入れて画像の縁を出す（GPT指摘・洋一さん 9/20） */
.three li:nth-child(2) .three__shot { border-top: 1px solid #d5d9e3; border-left: 1px solid #e6e8ee; border-right: 1px solid #e6e8ee; border-radius: 4px 4px 0 0; }
.three { align-items: stretch; }
.three li { display: flex; flex-direction: column; }
.three li .three__shot { margin-top: 0; }

/* ---------- 診断をおすすめする会社 ---------- */
.sec--recommend { background: #eef2f9; padding: 94px 0 168px; }
.sec--recommend .h3 { margin-top: 39px; }
.sec--recommend .body { margin-top: 20px; }
/* 兆し5つ（PC）: 3枚＋2枚の箱をやめ、幅800の横長の行を5つ縦に並べる。読み流して当てはめる項目なので（GPT評価・洋一さん 9/20） */
/* 兆し5つ（PC）: 1枚の白い面に5行、細い線で区切る。箱5つに見せない（GPT評価・洋一さん 9/20） */
.signs { display: flex; flex-direction: column; width: 640px; margin: 40px auto 0; border: 1px solid #c9cdd8; border-radius: 4px; background: #fff; overflow: hidden; }
.signs li { width: 100%; height: 62px; padding: 0 26px; display: flex; align-items: center; gap: 20px; text-align: left; }
.signs li + li { border-top: 1px solid #e3e6ee; }
.signs li img { flex: 0 0 30px; width: 30px; height: 30px; margin: 0; object-fit: contain; }
.signs li p { margin: 0; font-size: 17px; font-weight: 700; line-height: 28px; letter-spacing: .04em; color: var(--ink-2); }
.signs li p br { display: none; }
.c-blue { color: var(--blue); }
.recommend__body { margin-top: 40px; font-size: 16.5px; font-weight: 400; line-height: 36px; letter-spacing: .1em; color: var(--ink); }
.recommend__body p + p { margin-top: 28px; }

/* ---------- 診断はかんたん3ステップ ---------- */
.sec--steps { padding: 116px 0 127px; }
.sec--steps .h3 { margin-top: 39px; }
.sec--steps .body { margin-top: 22px; line-height: 36px; }
.pills { display: flex; justify-content: center; gap: 16px; margin-top: 24px; }
.pills li { position: relative; height: 52px; padding: 0 31px 0 66px; border: 1px solid #8a90a8; border-radius: 26px; background: #fff; font-size: 18px; font-weight: 600; line-height: 50px; letter-spacing: .11em; color: var(--ink-2); }
.pills li::before { content: ""; position: absolute; left: 31px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M2 3.5h9M2 3.5v12.5h13V8' fill='none' stroke='%232f3a63' stroke-width='1.3'/><path d='M5.5 8.5l3.2 3.2L16.5 3.5' fill='none' stroke='%232f3a63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat; background-size: contain; }
.steps { position: relative; width: 208px; margin: 53px 0 0 calc(50% - 88px); padding-left: 0; text-align: left; }
.steps::before { content: ""; position: absolute; left: 20px; top: 20px; bottom: 20px; width: 1px; background: #8a90a8; }
.steps li { position: relative; display: flex; align-items: center; height: 42px; }
.steps li + li { margin-top: 20px; }
.steps__num { flex: 0 0 42px; height: 42px; border: 1px solid #8a90a8; background: #fff; font-size: 16px; font-weight: 500; line-height: 40px; letter-spacing: .06em; text-align: center; color: var(--ink-2); }
.steps__label { margin-left: 22px; font-size: 16.5px; font-weight: 700; line-height: 1; letter-spacing: .12em; color: var(--ink-2); }

/* ---------- クロージング ---------- */
.closing { position: relative; padding: 130px 0 51px; text-align: center; color: #fff;
  background:
    radial-gradient(ellipse 640px 440px at 50% 33%, rgba(120,124,140,.6) 0%, rgba(120,124,140,0) 100%),
    radial-gradient(ellipse 520px 260px at 50% 90%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 820px 460px at 50% 92%, rgba(255,255,255,0) 0 74%, rgba(255,255,255,.03) 82% 94%, rgba(255,255,255,0) 100%),
    var(--navy-2); }
.closing__lines { font-family: var(--serif); font-weight: 700; font-size: 31px; line-height: 55px; letter-spacing: .06em; }
.closing__lines--2 { margin-top: 74px; }
.closing__arrow { position: relative; width: 1px; height: 89px; margin: 108px auto 0; background: #fff; }
.closing__arrow::after { content: ""; position: absolute; left: -6px; bottom: 0; width: 12px; height: 12px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: translateY(-1px) rotate(45deg); transform-origin: center; }
.closing__box { width: 984px; height: 307px; margin: 83px auto 0; padding-top: 55px; background: linear-gradient(90deg, #e7e7f9 0%, #fff 45%, #fff 55%, #f9e8e8 100%); color: var(--ink-2); }
.closing__box-title { font-family: var(--serif); font-weight: 700; font-size: 36px; line-height: 46px; letter-spacing: .2em; }
.closing__box-text { margin-top: 24px; font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 37.5px; letter-spacing: .1em; }
.closing__step { margin-top: 53px; font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 30px; letter-spacing: .1em; }
.closing__ask { margin-top: 125px; font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 32px; letter-spacing: .1em; }
.closing__sub { margin-top: 35px; font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 24px; letter-spacing: .08em; }
.closing .cta { margin-top: 48px; }
.closing .cta__note { margin-top: 15px; color: #fff; font-weight: 500; }

/* ---------- フッター ---------- */
.footer { background: #fff; text-align: center; }
.footer__inner { padding: 26px 0 30px; background: #edf1f0; }
.footer__copy { height: 48px; font-family: Arial, var(--sans); font-size: 12px; line-height: 48px; color: #999; }
.footer__title { font-size: 14px; font-weight: 500; line-height: 22px; letter-spacing: .12em; color: #777; }
.footer__list { display: table; margin: 10px auto 0; text-align: left; }
.footer__list div { display: flex; justify-content: flex-start; font-size: 13px; font-weight: 400; line-height: 24px; letter-spacing: .02em; color: #777; }
.footer__list dt { width: 70px; }
.footer__list dt::after { content: "："; margin-left: auto; }
.footer__list dd { margin-left: 6px; }
.footer__list dt { display: flex; }

/* 中間幅: 1100px までは等倍。768〜1099px だけ少し縮めて収める（本文が小さくなりすぎないよう最小 .82） */
@media (min-width: 900px) and (max-width: 1099px) { .page { zoom: .9; } }
@media (min-width: 768px) and (max-width: 899px) { .page { zoom: .82; } }

/* ==========================================================================
   スマホ（〜767px）── Part1 と同じ文法（375基準、1列、余白24）
   ========================================================================== */
@media (max-width: 767px) {
  body { font-size: 15px; }
  .h2 { font-size: 24px; line-height: 36px; letter-spacing: .04em; }
  .h3 { font-size: 17px; line-height: 27px; }
  .h3--lines { font-size: 16px; line-height: 27px; }
  .lead { font-size: 15px; line-height: 27px; }
  .body { font-size: 15px; line-height: 27px; }
  /* スマホの改行は「PCの改行＋スマホ専用の改行」で行を決める（ブラウザ任せにしない）。四神カードの説明だけは流す */
  .gods__desc, .gods__caveat { white-space: normal; }
  .gods__desc br.pc, .gods__caveat br.pc { display: none; }
  .sp { display: inline; }
  .pc { display: none; }
  /* スマホでは村田さんのPC用の広い字間をやめ、本文をふつうの字間・一段太くする（洋一さん 9/19） */
  .body, .lead, .recommend__body, .fv__lead, .gods__desc, .gods__caveat, .symptoms__but { letter-spacing: .02em; }
  .body, .recommend__body, .fv__lead { font-weight: 500; }
  .sec { padding-left: 24px; padding-right: 24px; }

  .cta__btn { width: 100%; max-width: 327px; height: 72px; padding-top: 10px; }
  .cta__sub { font-size: 12px; line-height: 18px; }
  .cta__main { font-size: 19px; line-height: 28px; }
  .cta__btn i { right: 18px; border-width: 9px 0 9px 11px; margin-top: -9px; }
  .cta__note { font-size: 12px; }

  .fv { height: auto; padding: 0 24px 28px; }
  /* FV: ひし形を見出しの上に置く（洋一さん 9/19「文字がごちゃごちゃ」→ 先に絵で目を止める） */
  .fv__inner { width: auto; left: 0; height: auto; padding-top: 78px; }
  .fv__text { display: flex; flex-direction: column; }
  .fv__label { align-self: flex-start; order: 1; }
  .fv__title { order: 2; }
  .fv__lead { order: 4; }
  .fv .cta { order: 5; }
  .fv__art { order: 3; }
  .fv__logo { left: 0; top: 22px; }
  .fv__logo img { height: 24px; }
  .fv__text { position: static; width: auto; }
  .fv__label { font-size: 12px; height: 28px; line-height: 26px; padding: 0 10px; }
  .fv__title { margin-top: 12px; font-size: 20px; line-height: 34px; letter-spacing: 0; white-space: normal; }
  .fv__lead { margin-top: 0; font-size: 15px; line-height: 27px; white-space: normal; text-align: center; }
  .fv .cta { display: block; margin-top: 22px; }
  .fv .cta__btn { margin: 0 auto; }
  .fv__art { position: relative; left: 50%; top: 0; width: 0; height: 0; margin: 160px 0 150px; transform: scale(.56); z-index: 2; }
  .fv__gods { clip-path: polygon(256.5px 42px, 503px 288.8px, 256.5px 535.6px, 10px 288.8px); }

  .sec--reason { padding-top: 64px; }
  .sec--reason .lead { margin-top: 28px; }
  .symptoms { flex-direction: column; align-items: center; gap: 16px; margin-top: 36px; }
  .symptoms li { width: 100%; max-width: 327px; height: auto; }
  .symptoms__top { height: auto; padding: 14px 0 12px; }
  .symptoms__but { padding: 10px 0 12px; }
  .lead--after { margin-top: 36px; font-size: 15.5px; line-height: 30px; letter-spacing: .04em; }

  .sec--forces { padding-top: 72px; }
  .sec--forces .h3 { margin-top: 28px; }
  /* 4つの力の本文: 中央揃えの不揃いをやめて左揃え、4つの名前は1行に */
  .sec--forces .body { margin-top: 24px; }
  .sec--forces .body.sp { display: block; margin-top: 20px; }
  /* 4つの名前は1行の札にして、文から切り離す */
  .names { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
  .names li { min-width: 62px; height: 40px; border: 1px solid currentColor; border-radius: 4px; font-size: 16px; font-weight: 700; line-height: 38px; letter-spacing: .1em; text-align: center; background: rgba(255,255,255,.7); }
  .gods { width: 100%; grid-template-columns: 1fr; justify-items: center; gap: 20px; margin-top: 44px; }
  .gods__card { width: 100%; max-width: 327px; padding: 28px 24px 0; }
  .gods__img { width: 200px; height: 190px; }
  .gods__title { margin-top: 24px; font-size: 19px; }
  /* 四神の説明: 初めて四神が出る場面なので一番読ませる文。太く大きく（洋一さん 9/19） */
  .gods__desc { margin-top: 12px; font-size: 16px; font-weight: 600; line-height: 27px; letter-spacing: .02em; color: var(--ink-2); white-space: normal; }
  .gods__caveat { margin-top: 14px; padding: 14px 0 26px; font-size: 14.5px; font-weight: 500; line-height: 25px; white-space: normal; }
  .gods__card--suzaku .gods__caveat { padding-bottom: 26px; }

  /* 玄武のカードと帯の間の白は要らない（洋一さん 9/19） */
  .band { margin-top: 0; height: auto; padding: 56px 24px 72px; background: radial-gradient(ellipse 300px 200px at 50% 55%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 100%), var(--navy); }
  .band::before { height: 56px; } .band::after { height: 56px; }
  .sec--forces { padding-bottom: 40px; }
  .band__text { font-size: 17px; line-height: 31px; letter-spacing: .06em; }
  /* 帯1（SP）: PCと同じ明朝の中央揃え。折り返しはスマホ用の改行で固定（9/20） */
  .band__text.sp { display: block; }
  .band__text--q { line-height: 28px; }
  .band__text--q + .band__text--q { margin-top: 14px; }
  .band__text--a { margin-top: 28px; }
  .band__a { display: block; margin-top: 0; font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 34px; letter-spacing: .06em; color: #fff; }
  .band { background: radial-gradient(ellipse 330px 230px at 50% 78%, rgba(255,255,255,.30) 0%, rgba(255,255,255,.10) 55%, rgba(255,255,255,0) 100%), var(--navy); }
  .band::after { height: 40px; }
  .band .cta { margin-top: 32px; }
  .band--2 { margin-top: 0; padding: 64px 24px 72px; }
  .band--2 .band__a { margin-top: 0; }
  .sec--three { padding-bottom: 56px; }
  .band--2 .band__text { line-height: 30px; }
  .band--2 .cta { margin-top: 36px; }

  .sec--three { padding-top: 64px; }
  .sec--three .h3 { margin-top: 28px; }
  .sec--three .body { margin-top: 20px; }
  /* 3つのこと（スマホ）: 窓の中を読ませるため、幅いっぱいに縦積み（洋一さん 9/20。横並びは何も読めなかった） */
  .three { flex-direction: column; align-items: center; gap: 16px; margin-top: 28px; }
  .three li { width: 100%; max-width: 327px; height: auto; padding: 14px 18px 16px; display: block; }
  .three__head { height: 40px; }
  .three__num { font-size: 28px; }
  .three__name { height: 30px; font-size: 17px; margin-left: 14px; padding-left: 14px; letter-spacing: .08em; }
  .three__title { display: block; margin-top: 0; padding: 10px 0 12px; text-align: center; font-size: 18px; line-height: 28px; letter-spacing: .02em; }
  .three__shot { width: 240px; height: 358px; margin: 0 auto; object-fit: cover; object-position: top; border-radius: 6px; }
  .three li:not(:first-child) .three__shot { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent 100%); }
  .three li:first-child .three__shot { -webkit-mask-image: none; mask-image: none; }

  .sec--recommend { padding: 64px 24px 72px; }
  .sec--recommend .h3 { margin-top: 28px; }
  .sec--recommend .body { margin-top: 20px; }
  .signs { width: 100%; gap: 10px; margin-top: 36px; }
  /* 兆しカード: スマホはアイコン左・文右の横長にして、同じ形の縦積みで間延びしないようにする（洋一さん 9/19） */
  .signs li { max-width: 327px; height: auto; padding: 16px 16px 16px 18px; gap: 16px; }
  .signs li img { flex: 0 0 40px; width: 40px; height: 40px; }
  .signs li p { font-size: 15.5px; line-height: 25px; letter-spacing: .02em; white-space: nowrap; }
  .signs li p br { display: inline; }
  /* 締めの4段落: 一番読ませたい所なので大きく太く。最後の段落はさらに一段（洋一さん 9/19） */
  .recommend__body { margin-top: 44px; font-size: 17px; font-weight: 600; line-height: 31px; text-align: center; color: var(--ink-2); }
  .recommend__body p + p { margin-top: 24px; }
  .recommend__body p:last-child { font-size: 18px; font-weight: 700; line-height: 33px; }

  .sec--steps { padding: 64px 24px 72px; }
  .sec--steps .h3 { margin-top: 28px; font-size: 16px; }
  .sec--steps .body { margin-top: 20px; line-height: 27px; }
  .pills { flex-wrap: wrap; gap: 10px; margin-top: 36px; }
  .pills li { height: 42px; padding: 0 18px 0 42px; font-size: 14px; line-height: 40px; }
  .pills li::before { left: 16px; width: 16px; height: 16px; }
  .steps { width: 220px; margin-top: 40px; }
  .steps li + li { margin-top: 16px; }
  .steps__label { font-size: 15px; }

  .closing { padding: 80px 24px 56px; background: radial-gradient(ellipse 320px 300px at 50% 30%, rgba(120,124,140,.55) 0%, rgba(120,124,140,0) 100%), radial-gradient(ellipse 300px 160px at 50% 90%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 100%), var(--navy-2); }
  .closing__lines { font-size: 19px; line-height: 38px; letter-spacing: .04em; }
  .closing__step, .closing__ask, .closing__sub { letter-spacing: .03em; }
  .closing__lines--2 { margin-top: 40px; }
  .closing__arrow { height: 56px; margin-top: 48px; }
  .closing__box { width: 100%; max-width: 327px; height: auto; margin-top: 44px; padding: 32px 16px 36px; }
  .closing__box-title { font-size: 27px; line-height: 38px; }
  .closing__box-text { margin-top: 16px; font-size: 16px; line-height: 30px; }
  .closing__step { margin-top: 36px; font-size: 16px; line-height: 27px; }
  .closing__ask { margin-top: 64px; font-size: 17px; line-height: 29px; letter-spacing: .02em; }
  .closing__sub { margin-top: 20px; font-size: 14px; line-height: 24px; }
  .closing .cta { margin-top: 36px; }
  .cta__note { margin-top: 14px; }

  .footer__inner { padding: 28px 24px 40px; }
  .footer__copy { height: 48px; line-height: 48px; font-size: 12px; }
  .footer__title { font-size: 18px; }
  .footer__list { display: block; width: auto; margin: 20px 0 0; }
  .footer__list div { display: block; font-size: 14px; line-height: 24px; }
  .footer__list div + div { margin-top: 8px; }
  .footer__list dt { display: block; width: auto; font-weight: 700; }
  .footer__list dt::after { content: ""; }
  .footer__list dd { margin-left: 0; }
  .deco { display: none; }
  .top { background: var(--grad); }
}