/* もどりば（架空の見本）。スマホ390pxを先に組み、PCは中央560pxの縦1列＋左右の固定帯。 */
:root {
  --sky: #E6F5FE;      /* 地：うすい空色（採用した絵から測った） */
  --pink: #FBE3E6;     /* 地：淡い桜色 */
  --white: #FFFFFF;
  --ink: #1E2F45;      /* 文字 */
  --ink2: #4A5A6E;     /* 説明の文字 */
  --salmon: #F4958F;   /* 大きな円 */
  --chip: #F8D3D7;     /* 札の丸 */
  --coral: #FD7456;    /* ボタンだけ */
  --band: #79474C;     /* いちばん上の帯 */
  --line: #1E2F45;     /* 格子の線 */
  --gx: 7%;            /* 格子の縦線の位置（左右の余白。最初の画面と同じ） */
  --pad: 40px;         /* 本文の左右の余白（格子の線より内側） */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { word-break: auto-phrase; line-break: strict; margin: 0; background: var(--sky); color: var(--ink); font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  font-size: 15px; line-height: 1.85; letter-spacing: .02em; }
img { max-width: 100%; display: block; }
p, h1, h2, h3, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }

/* ページの中央の列 */
.page { position: relative; max-width: 560px; margin: 0 auto; background: var(--sky); overflow: hidden; }
.grid-lines { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line));
  background-size: 1px 100%, 1px 100%; background-position: var(--gx) 0, calc(100% - var(--gx)) 0; background-repeat: no-repeat; opacity: .55; }

/* 節：背景は .sec-bg（選べる専用の要素）、中身は .sec-in */
.sec { position: relative; }
.sec-bg { position: absolute; inset: 0; z-index: 0; }
.sec-in { position: relative; z-index: 3; padding: 64px var(--pad) 72px; }
.g-sky > .sec-bg { background: var(--sky); }
.g-pink > .sec-bg { background: linear-gradient(180deg, #FCE7EA, var(--pink) 30%, #F9DCE0); }
.g-white > .sec-bg { background: linear-gradient(180deg, #FFFFFF, #F9FCFF); }
/* 境目：格子の横線 */
.edge-line > .sec-bg::before { content: none; }
.edge-line { border-top: 1px solid rgba(30, 47, 69, .55); }
/* 境目：大きなゆるい弧（上の節の地を、この節の上の端に少し残す） */
.edge-arc > .sec-bg { top: -36px; border-radius: 50% 50% 0 0 / 36px 36px 0 0; }
.edge-arc { margin-top: 36px; }

/* 飾りの円（通し図で決めた3か所だけ） */
.deco { position: absolute; z-index: 1; pointer-events: none; }
.deco-s04 { width: 62%; left: -30%; top: -90px; }
.deco-s07 { width: 46%; right: -16%; top: -40px; }
.deco-s11 { width: 58%; right: -22%; top: -60px; }

/* 文字 */
.eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .08em; color: var(--ink2); margin-bottom: 10px; }
.h2 { font-size: 25px; line-height: 1.42; font-weight: 700; letter-spacing: .03em; margin-bottom: 30px; }
.h2-big { font-size: 34px; line-height: 1.35; }
.h3 { font-size: 16.5px; line-height: 1.6; font-weight: 700; }
.body { font-size: 15px; color: var(--ink2); text-wrap: pretty; }
.body.sm { font-size: 13.5px; line-height: 1.75; }
.note { text-wrap: pretty; font-size: 13px; color: var(--ink2); line-height: 1.8; margin-top: 8px; }
.center { text-align: center; }
.bridge { margin-top: 30px; font-size: 15px; font-weight: 500; }
.num { font-size: 38px; font-weight: 700; line-height: 1; min-width: 1.4em; }

/* 主役：格子の線を越えて、画面の端まで */
.break { margin-right: calc(-1 * var(--pad)); position: relative; z-index: 4; }

/* 札（淡い桜色の平らな丸） */
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.chips.center { justify-content: center; margin-top: 26px; }
.chips.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; justify-items: center; }
.chip { width: 104px; height: 104px; border-radius: 50%; background: var(--chip); display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 10px; box-shadow: 0 6px 14px rgba(180, 110, 110, .18); flex: none; }
.chip-ic { width: 34px; height: 34px; object-fit: contain; margin-bottom: 4px; }
.chip-t { font-size: 13px; line-height: 1.35; font-weight: 700; }
.chip-sm { width: 88px; height: 88px; }
.chip-sm .chip-ic { width: 28px; height: 28px; }
.chip-sm .chip-t { font-size: 13px; }
.chip-lg { width: 128px; height: 128px; }
.chip-lg .chip-ic { width: 44px; height: 44px; }
.chip-lg .chip-t { font-size: 16px; }

/* 円で切り抜いた写真 */
.photo-c { border-radius: 50%; overflow: hidden; aspect-ratio: 1 / 1; box-shadow: 0 10px 26px rgba(30, 47, 69, .12); }
.photo-c img { width: 100%; height: 100%; object-fit: cover; }
.photo-c.big { width: 96%; margin-left: auto; margin-bottom: 30px; }
.photo-c.big.break { width: calc(96% + var(--pad)); }
.photo-c.small { width: 128px; flex: none; }
.photo-c.tiny { width: 84px; flex: none; }

/* 悩み：輪の上の4つの札 */
.ring { position: relative; width: 100%; aspect-ratio: 1 / 1; margin: 0 0 24px; }
.ring-img { position: absolute; inset: 9%; width: 82%; }
.ring-items li { position: absolute; transform: translate(-50%, -50%); }
.ring-0 { left: 50%; top: 9%; } .ring-1 { left: 88%; top: 50%; } .ring-2 { left: 50%; top: 91%; } .ring-3 { left: 12%; top: 50%; }
.morning { display: flex; gap: 18px; align-items: center; }

/* 番号つきの一覧 */
.reasons li, .steps > li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-top: 1px solid rgba(30, 47, 69, .18); }
.reasons li:first-child, .steps > li:first-child { border-top: 0; }

/* 比べる2列 */
.cmp { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; align-items: start; margin-left: -12px; }
.cmp-col { padding: 18px 10px; } .cmp-col ul li { text-wrap: pretty; }
.cmp-col ul li { padding: 12px 0; border-top: 1px solid rgba(30, 47, 69, .2); font-size: 14.5px; line-height: 1.7; }
.cmp-col.mine { background: #fff; border-radius: 4px; box-shadow: 0 12px 28px rgba(180, 110, 110, .18); padding: 20px 16px; }
.cmp-col.mine .h3 { font-size: 22px; }
.cmp-col.mine.break { margin-right: calc(-1 * var(--pad)); }
.with-photo { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } .with-photo .photo-c.tiny { width: 96px; }
#s08 .cmp { grid-template-columns: 1fr 1fr; }
#s08 .cmp-col { background: rgba(255, 255, 255, .65); }

/* 初回の90分：円をまん中に、名札を上下に分け、引き出し線で区切りを指す */
.pie { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 100 / 162; margin-bottom: 8px; }
.pie-img { position: absolute; width: 60cqw; left: 20cqw; top: 46cqw; }
.pie-lab { position: absolute; width: 46cqw; }
.pie-lab .min { font-size: 30px; line-height: 1.1; display: block; }
.pie-lab .h3 { font-size: 15px; } .pie-lab .body.sm { font-size: 13px; line-height: 1.65; }
.p-tl { left: 0; top: 0; } .p-tr { left: 54cqw; top: 0; }
.p-bl { left: 0; top: 112cqw; } .p-br { left: 54cqw; top: 112cqw; }
.p-bl .min { color: #D9574A; }
.ld { position: absolute; height: 1.5px; background: var(--ink); transform-origin: 0 50%; z-index: 2; }
.ld-dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--ink); z-index: 2; }
/* 囲み */
.box { margin-top: 26px; padding: 20px 16px 24px; background: #F4FAFF; border-radius: 4px; }
.box .h3 { margin-bottom: 8px; }

/* やらないこと */
.maker { display: flex; gap: 16px; align-items: center; margin-bottom: 26px; }
.pairs li { display: flex; gap: 16px; align-items: center; padding: 10px 0; }

/* 料金 */
.price-board { background: #fff; padding: 22px 20px; border-radius: 4px; box-shadow: 0 12px 28px rgba(30, 47, 69, .12); margin-bottom: 22px; }
.pr + .pr { border-top: 1px solid rgba(30, 47, 69, .15); padding-top: 10px; margin-top: 8px; }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price b { font-size: 50px; line-height: 1.15; letter-spacing: 0; }
.unit { font-size: 15px; font-weight: 700; }
.prefix { font-size: 14px; font-weight: 700; background: var(--chip); border-radius: 999px; padding: 4px 14px; }
.block { padding: 18px 0; border-top: 1px solid rgba(30, 47, 69, .2); }
.row { font-size: 16px; font-weight: 700; }
.cancel { display: flex; gap: 14px; align-items: center; }

/* 質問 */
.qa { padding: 16px 0; border-top: 1px solid rgba(30, 47, 69, .18); }
.qa dt { font-size: 16px; font-weight: 700; line-height: 1.6; display: flex; gap: 10px; }
.q { font-size: 18px; color: #D9574A; }
.qa dd { font-size: 14.5px; color: var(--ink2); margin-top: 6px; }

/* 予約 */
.hours li { font-size: 14px; color: var(--ink2); line-height: 1.8; }
.price.end { margin: 26px 0 16px; }

/* ボタン（ボタンだけ、コーラル） */
.btn { display: block; text-align: center; text-decoration: none; color: #fff; font-weight: 700; font-size: 19px; letter-spacing: .04em;
  background: linear-gradient(180deg, #FF8E73, var(--coral)); border-radius: 6px; padding: 17px 12px; min-height: 58px;
  box-shadow: 0 8px 18px rgba(253, 116, 86, .32); margin-top: 22px; }

/* 最初の画面：採用した見本（1024×1792）の位置を測って、縦の比を固定する */
.fv { container-type: inline-size; }
.fv > .sec-bg { background: var(--sky); }
.fv-box { position: relative; z-index: 3; width: 100%; aspect-ratio: 1024 / 1792; overflow: hidden; }
.fv-box > * { position: absolute; margin: 0; }
.fv-circle { width: 58cqw; left: 68cqw; top: -16cqw; }
.fv-photo-win { left: 0; right: 0; top: 43.75cqw; height: 86cqw; overflow: hidden; }
.fv-photo { position: absolute; width: 108cqw; left: -2cqw; top: -22.5cqw; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; }
.fv-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 62%; transform: scale(1.3); transform-origin: 46% 64%; }
.fv-band { left: 0; right: 0; top: 0; height: 7cqw; background: var(--band); color: #fff; font-size: 3.4cqw; font-weight: 500; line-height: 7cqw; padding-left: 6.5cqw; letter-spacing: .04em; }
.fv-logo { left: 7cqw; top: 10.2cqw; display: flex; align-items: center; gap: 2.4cqw; }
.fv-logo b { font-size: 4.4cqw; font-weight: 700; }
.fv-logo span { font-size: 2.3cqw; font-weight: 500; border-left: 1px solid var(--ink); padding-left: 2.4cqw; line-height: 1.4; }
.fv-h1t { left: 7cqw; top: 19.5cqw; font-size: 7.3cqw; line-height: 1.52; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.fv-gridline { background: var(--line); opacity: .8; }
.fv-v { left: 7cqw; top: 17cqw; width: 1px; bottom: 0; }
.fv-h1 { left: 0; width: 11cqw; top: 18cqw; height: 1px; }
.fv-h2 { left: 0; width: 10cqw; top: 45cqw; height: 1px; }
.fv-h3 { left: 7cqw; right: 0; top: 131cqw; height: 1px; }
.fv-chips { inset: 0; pointer-events: none; }
.fv-chip { position: absolute; width: 25cqw; height: 25cqw; transform: translate(-50%, -50%); padding: 1cqw; box-shadow: 0 1.2cqw 2.6cqw rgba(160, 90, 90, .22); }
.fv-chip .chip-ic { width: 9cqw; height: 8cqw; margin-bottom: 1.2cqw; object-fit: contain; }
.fv-chip .chip-t { white-space: nowrap; letter-spacing: 0; font-size: 3cqw; line-height: 1.32; min-height: 7.9cqw; display: flex; align-items: center; justify-content: center; }
.c1 { left: 23cqw; top: 111cqw; } .c2 { left: 50cqw; top: 111cqw; } .c3 { left: 77cqw; top: 111cqw; }
.fv-lead { left: 11cqw; right: 6cqw; top: 134.5cqw; font-size: 2.65cqw; font-weight: 500; line-height: 1.6; }
.fv-price { left: 10.5cqw; top: 141.5cqw; display: flex; align-items: center; gap: 2.4cqw; }
.fv-price .prefix { font-size: 2.6cqw; padding: .9cqw 3cqw; }
.fv-price b { font-size: 12cqw; line-height: 1; font-weight: 700; letter-spacing: 0; }
.fv-price .unit { font-size: 3.2cqw; }
.fv-btn { left: 10cqw; right: 10cqw; top: 156.5cqw; height: 10.4cqw; min-height: 0; padding: 0; margin: 0; line-height: 10.4cqw; font-size: 5cqw; border-radius: 1cqw; }
.fv-note { left: 0; right: 0; top: 168.8cqw; text-align: center; font-size: 2.3cqw; color: var(--ink2); }

/* PC：中央560pxの縦1列＋左右の固定帯（帯は動かない） */
.band { display: none; }
@media (min-width: 900px) {
  body { background: #F1F8FD; }
  .page { box-shadow: 0 0 40px rgba(30, 47, 69, .08); }
  .band { display: block; position: fixed; top: 0; bottom: 0; width: calc((100vw - 560px) / 2); overflow: hidden; z-index: 0; }
  .band-l { left: 0; } .band-r { right: 0; }
  .band img { position: absolute; }
  .band-c1 { width: 340px; left: -120px; top: 8vh; opacity: .85; }
  .band-c2 { width: 300px; right: -90px; top: 52vh; }
  .band-c3 { width: 170px; left: 8%; top: 68vh; }
  .band-photo { position: absolute; width: min(240px, 70%); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; box-shadow: 0 12px 30px rgba(30, 47, 69, .14); }
  .band-l .band-photo { right: 12%; bottom: 14vh; }
  .band-r .band-photo { left: 12%; top: 20vh; }
  .band-photo img { width: 100%; height: 100%; object-fit: cover; }
  .page { z-index: 1; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

.note.center { text-wrap: balance; }
#s07 .pairs .chip { width: 100px; height: 100px; } #s07 .pairs .chip-t { font-size: 13px; white-space: normal; word-break: keep-all; }
#s09 .block .chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#s09 .block .chips .chip { width: 100%; height: auto; aspect-ratio: 1 / 1; padding: 6px; }
#s09 .block .chips .chip-ic { width: 24px; height: 24px; }
.price { flex-wrap: nowrap; } .price.end b { font-size: 44px; } .price.end { gap: 6px; } .price.end .prefix { white-space: nowrap; font-size: 13px; padding: 4px 10px; }
#s07 .pairs .chip { width: 108px; height: 108px; }
#s09 .block .chips .chip-t { font-size: 13px; }
/* お支払い：丸を付けず、しるしと語だけを横1列に（利用者「ここ丸イラン」） */
#s09 .block .chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pay { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0; }
.pay .chip-ic { width: 30px; height: 30px; object-fit: contain; margin: 0; }
.pay .chip-t { font-size: 13px; font-weight: 700; line-height: 1.3; }