@charset "UTF-8";
/* ============================================================================
* イザマチLP v4 — cocoro の構造 × イザマチのカラートークン
* 対象: /izamachi/index.html のみ。main.css の後に読み込む。
*
* 構造の出典: ~/design-docs/cocoro-guideline/（https://musashinitta-cocoro.com/ の実測）
* 色の出典 : イザマチ原版の既存トークン（izamachi/assets/renewal.css と main.css）
* **新しい色をひとつも作っていない。** 出典は §1 のコメントに行番号で記す。
* ガイドラインの §9（既知の欠陥）A-01〜A-08 は直して当てている。該当箇所に ※A-xx。
* ========================================================================== */
/* ---------------------------------------------------------------------------
* 0. rem のはしご（GUIDELINE 1.2）
* 原典は 62.5 / 56.5 / 40.5 / 30.5% の4段だが、下2段は本文が 10.4px / 7.8px に
* なるため 56.5% で止め、1023px 以下は SP レイアウトへ落とす ※A-01
* ------------------------------------------------------------------------- */
html:has(body.izamachi-v4) { font-size: 62.5%; }
@media screen and (min-width: 1024px) and (max-width: 1439px) {
html:has(body.izamachi-v4) { font-size: 56.5%; }
}
@media screen and (max-width: 1023px) {
html:has(body.izamachi-v4) { font-size: 62.5%; }
}
/* ---------------------------------------------------------------------------
* 1. トークン
*
* cocoro の役割 → イザマチのトークン への割り当て。括弧内は実測コントラスト。
*
* | cocoro | v4 | 値 | 原版での出典 |
* |-------------------|-----------|---------|--------------------------------------|
* | navy #395CA3 | ink | #3A2B00 | renewal.css L148 .izmt-start の文字色 |
* | sky #77AFD9 | gold | #F5C842 | renewal.css L9 --izy |
* | （hover） | gold-deep | #F0B400 | renewal.css L10 --izy-d |
* | sky-strong #3A79AE| gold-dark | #7A5B00 | renewal.css L81/L600 強調文字 |
* | page #DDEBF3 | page | #FDF4D6 | renewal.css L578 #izmt-steps-sec 地 |
* | section#EEF5F9 | section | #FAF7EF | renewal.css L324 #izmt-ui-sec 地 |
* | circle #E9F2F7 | circle | #FFFBEF | main.css .cta-tel 地 |
* | line #C9DFF0 | line | #E3DCC4 | renewal.css L797 sticky の枠 |
* | yellow #FFE100 | （無し） | — | ※下の「立たせる役」を参照 |
*
* ■ 青→金で構造が変わる唯一の点
* cocoro は「淡い青の地」に「黄」を置いて、色相差で立たせていた。
* 単一色相のゴールド系では色相差が使えず、gold は地からほとんど立たない
* （#F5C842 on #FDF4D6 = 1.44、on 白 = 1.59）。
* そこで「立たせる役」は濃色 ink #3A2B00 が担う（on #FDF4D6 = 12.51）。
* ただし ink は本文色でもあるので、cocoro の黄のように「2箇所まで」とは縛れない。
* 縛れるのは**大きな ink の面**のほうで、ここでは 2 つに絞った
* （ヒーローの主 CTA 円 と SOLUTION のパネル）。
* 結果として、cocoro より濃色の露出が増える。これは色相差が使えないことの帰結。
*
* ■ トークンが1つ減った点
* cocoro の sky は白文字 2.35 / 濃文字 2.76 でどちらも載らず、
* 文字を載せるための追加色 #3A79AE が要った（A-02）。
* gold は暗文字で 8.67 出るので、装飾と「文字を載せる面」を1色で兼ねられる。
* ------------------------------------------------------------------------- */
body.izamachi-v4 {
--ink: #3A2B00; /* 本文・見出し・濃い面。淡地で 12.51〜13.77:1 */
--gold: #F5C842; /* 面と装飾。ink 文字で 8.67:1 */
--gold-deep: #F0B400; /* hover と装飾の点。ink 文字で 7.36:1 */
--gold-dark: #7A5B00; /* 淡地に置くゴールド系の文字。5.74〜6.32:1 */
--page: #FDF4D6; /* ページの地。白比 1.10 */
--section: #FAF7EF; /* セクションの地。白比 1.07 */
--circle: #FFFBEF; /* 背後の巨大な円。白比 1.03 */
--cream: #FBEBB8; /* 特長の面。ink 文字で 11.94:1（Figma の #fbebb8） */
--line: #E3DCC4; /* 罫 */
--white: #FFFFFF;
/* 角丸。極小か極大しかない（GUIDELINE 0-3 / 5） */
--r-hair: 4px; /* 面をつなぐ内側 */
--r-sm: 16px; /* 写真・小さい器 */
--r-lg: 64px; /* 面の外周。cocoro の様式の核なので DESIGN.md のスケール外だが残す */
--r-pill: 9999px; /* ボタン・チップ */
/* 文字。apple.com/jp の活字規則をそのまま採る（実測: overview.built.css）。
規則は4つ。
(1) 寸法は段の目しか使わない … 80 64 56 48 40 32 28 24 21 19 17 14 12 px
(2) 太さは2つだけ … 見出し・ラベル 600 / 本文 400（500・700 は使わない）
(3) 和文の字間は 0em … Apple も :lang(ja) で letter-spacing を 0 に戻している
(4) 行間は寸法で決まる … 大きいほど詰める（64px→1.109 … 12px→1.417）
可変は clamp ではなく 1068 / 734 / 480 の段で落とす（Apple の折り返し点）。
素の vw を使わなくなるので DESIGN.md 4-11 にも合う */
--f-display: 6.4rem; /* 64 */
--f-h1: 4.8rem; /* 48 */
--f-h2: 4rem; /* 40。カードの見出しを一回り大きく（2026-09-28） */
--f-h3: 2.8rem; /* 28。同上 */
--f-h4: 2.1rem; /* 21 */
--f-body: 1.7rem; /* 17 */
--f-small: 1.4rem; /* 14 */
--f-label: 1.2rem; /* 12 */
/* 端末モックの幅（画面の幅）。HERO と特長で同じ値を使う */
--phoneW: 44rem;
/* 行間は全段 2.0。Apple の和文は 1.109〜1.417 だが、
「全体的に line-height を 2 に」の指示でこちらを採る（GUIDELINE 3.4 とも一致） */
--lh-display: 2;
--lh-h1: 2;
--lh-h2: 2;
--lh-h3: 2;
--lh-h4: 2;
--lh-body: 2;
--lh-small: 2;
--lh-label: 2;
/* 行長。和文は 1em = 1字。上限40字・狙い30〜38字（DESIGN.md 2-4） */
--measure: 36em;
--measure-lead: 24em;
/* セクション間。等間隔をやめ、内容の切れ目の強さで3段階にする（DESIGN.md 2-2）
96 → 160 → 224 は 1.67 / 1.4 倍の階差。すべて 32 の倍数 */
--gap-tight: 96px;
--gap-mid: 160px;
--gap-wide: 224px;
/* 動き。上限 400ms（DESIGN.md 4-6）。cocoro の 0.5s は超過していた */
--dur: 0.3s;
--dur-hover: 0.1s;
/* 矢印バッジの中身。バッジの地は gold なので矢印は ink */
--arrow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M0 0l9 5-9 5z' fill='%233A2B00'/%3E%3C/svg%3E");
}
/* 段の落とし方。Apple は 1068 / 734 / 480 で一段ずつ下げる。
寸法を下げたら行間は必ず上げる（小さい活字ほど行を空ける） */
@media (max-width: 1068px) {
body.izamachi-v4 {
--f-display: 5.6rem;
--f-h1: 4rem;
--f-h2: 3.2rem;
--f-h4: 1.9rem;
}
}
@media (max-width: 734px) {
body.izamachi-v4 {
--f-display: 4rem;
--f-h1: 3.2rem;
--f-h2: 2.8rem;
--f-h3: 2.4rem;
}
}
@media (max-width: 480px) {
body.izamachi-v4 {
--f-display: 3.2rem;
--f-h1: 2.8rem;
}
}
/* ---------------------------------------------------------------------------
* 2. 土台
* ------------------------------------------------------------------------- */
body.izamachi-v4 {
background-color: var(--page);
color: var(--ink);
font-family: "Zen Kaku Gothic New", 'Hiragino Kaku Gothic ProN', sans-serif;
/* Apple の太さは 400 と 600 の2つだけ。本文は 400 */
font-weight: 400;
font-size: var(--f-body);
line-height: var(--lh-body); /* 17px の行間 1.353（Apple の和文本文） */
letter-spacing: 0; /* 和文の字間は 0（Apple も ja で 0 に戻す） */
padding-bottom: 0;
}
body.izamachi-v4 .container { padding: 0; }
body.izamachi-v4 .section { padding: 0; background: none; }
body.izamachi-v4 .section__inner { width: auto; max-width: none; padding: 0; gap: 0; display: block; }
body.izamachi-v4 a { color: var(--ink); transition: all var(--dur) ease; }
body.izamachi-v4 .mont {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
}
/* 固定ヘッダの下にアンカー先が潜らないように */
html:has(body.izamachi-v4) { scroll-padding-top: 108px; }
@media screen and (max-width: 959px) { html:has(body.izamachi-v4) { scroll-padding-top: 92px; } }
/* 原典はフォーカスリングの定義が0件だった ※A-04 */
body.izamachi-v4 :is(a, button, input, textarea, select, [tabindex]):focus-visible {
outline: 0.2rem solid transparent;
outline-offset: 0.2rem;
box-shadow: 0 0 0 0.2rem var(--white), 0 0 0 0.4rem var(--ink);
border-radius: var(--r-hair);
}
/* ---------------------------------------------------------------------------
* 3. コンテナ（GUIDELINE 4.1）
* 1800px のカンバスに対する比率。原典は max-width を持たないが、
* 1800px 超で器も文字も伸び続けるため上限を置いた ※A-08
* ------------------------------------------------------------------------- */
/* cocoro は 1440/1280/1080 の3種の器を使い分けるが、実測すると左端が 22 種に散り、
DESIGN.md 2-3「どこにも揃っていない辺をゼロに」を満たせなかった。
器は1種に統一し、内容の幅は --measure（36字）で決める。
1800px カンバスの比率（80vw）はそのまま残している。 */
body.izamachi-v4 .wrapbox01,
body.izamachi-v4 .wrapbox02,
body.izamachi-v4 .wrapbox03 { width: calc(1440 / 1800 * 100vw); max-width: 144rem; margin: 0 auto; }
/* ---------------------------------------------------------------------------
* 4. 見出し（GUIDELINE 6.2）
* マークを上に置き、和文の下に英字を 0.15em で添える
* ------------------------------------------------------------------------- */
body.izamachi-v4 .subtitle01 {
position: relative;
display: flex;
flex-direction: column;
text-align: center;
font-size: var(--f-h1);
font-weight: 600;
line-height: var(--lh-h4);
letter-spacing: 0;
padding-top: 0;
box-sizing: border-box;
margin: 0 0 5rem;
color: var(--ink);
}
/* 英字は「帯」として置く。淡地の上なので gold-dark（5.74:1） */
body.izamachi-v4 .subtitle01 .en {
font-size: var(--f-small);
letter-spacing: 0.01em;
font-weight: 600;
color: var(--gold-dark);
order: 2;
}
body.izamachi-v4 .subtitle02 {
position: relative;
font-size: var(--f-h2);
font-weight: 600;
letter-spacing: 0;
line-height: var(--lh-h4);
padding-left: 2.5rem;
box-sizing: border-box;
margin: 0 0 2rem;
}
body.izamachi-v4 .subtitle02::before {
content: "";
position: absolute;
top: 1.9rem;
left: 0;
width: 1.2rem;
height: 1.2rem;
background-color: var(--gold);
border-radius: 50%;
}
/* 左組み・英字が主役の見出し */
body.izamachi-v4 .main_title {
display: flex;
flex-direction: column-reverse;
padding-top: 0;
box-sizing: border-box;
letter-spacing: 0;
margin: 0 0 2.5rem;
}
body.izamachi-v4 .main_title .en {
font-size: var(--f-h1);
line-height: 1;
letter-spacing: 0.01em;
font-weight: 600;
color: var(--gold-dark);
}
body.izamachi-v4 .main_title .jp { font-size: var(--f-body); letter-spacing: 0; }
/* ink の面に載る見出し。英字は gold（8.67:1） */
body.izamachi-v4 .ink_title .en { color: var(--gold-dark); }
body.izamachi-v4 .ink_title .jp { color: var(--ink); }
/* ink の面に載る subtitle01 */
body.izamachi-v4 .ink_panel .subtitle01 { color: var(--ink); }
body.izamachi-v4 .ink_panel .subtitle01 .en { color: var(--gold-dark); }
/* ---------------------------------------------------------------------------
* 5. ボタン（GUIDELINE 6.1）
* 左に矢印バッジ、hover で塗りが右へ伸びて飲み込む。
* cocoro は hover で文字を白に反転させるが、ゴールドの塗りに白は載らない
* （1.59:1）ので、文字は ink のままにした。
* ------------------------------------------------------------------------- */
body.izamachi-v4 .btn01 {
display: inline-block;
position: relative;
z-index: 0;
background-color: var(--white);
color: var(--ink);
border-radius: var(--r-pill);
letter-spacing: 0;
font-size: var(--f-h4);
font-weight: 600;
line-height: var(--lh-small);
text-align: center;
padding: 2.1rem 3.4rem 2.1rem 8rem;
box-sizing: border-box;
text-decoration: none;
min-height: 44px; /* テキストを含む箱に固定高さを使わない ※A-05 */
}
body.izamachi-v4 .btn01::before {
content: "";
position: absolute;
top: 50%;
left: 3.1rem;
margin-top: -1.2rem;
width: 3.6rem;
height: 2.4rem;
border-radius: var(--r-sm);
background-color: var(--gold);
background-image: var(--arrow);
background-position: center center;
background-repeat: no-repeat;
background-size: 0.9rem auto;
transition: left var(--dur) ease, background-color var(--dur) ease;
}
body.izamachi-v4 .btn01::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 7.4rem;
height: 100%;
background-color: var(--white);
border-radius: var(--r-pill);
z-index: -1;
transition: width var(--dur) ease, background-color var(--dur) ease;
}
body.izamachi-v4 .btn01:hover { color: var(--ink); }
body.izamachi-v4 .btn01:hover::before { left: 3.6rem; }
body.izamachi-v4 .btn01:hover::after { width: 100%; background-color: var(--gold); }
/* ゴールドの面のボタン。hover で白に戻る */
body.izamachi-v4 .btn01.gold { background-color: var(--gold); }
body.izamachi-v4 .btn01.gold::before { background-color: var(--white); }
body.izamachi-v4 .btn01.gold::after { background-color: var(--gold); }
body.izamachi-v4 .btn01.gold:hover::after { background-color: var(--white); }
/* 濃い面のボタン。cocoro の navy ボタンに相当 */
body.izamachi-v4 .btn01.ink { background-color: var(--ink); color: var(--white); font-size: var(--f-h4); padding: 3.2rem 8rem 3.2rem 12rem; }
body.izamachi-v4 .btn01.ink::before { background-color: var(--gold); }
body.izamachi-v4 .btn01.ink::after { width: 10rem; background-color: var(--ink); }
body.izamachi-v4 .btn01.ink:hover { color: var(--ink); }
body.izamachi-v4 .btn01.ink:hover::after { width: 100%; background-color: var(--gold); }
/* 淡い黄の面の上では gold のボタンが立たない（白比 1.36）。ink に置き換える */
body.izamachi-v4 .ink_panel .btn01.gold { background-color: var(--ink); color: var(--page); }
body.izamachi-v4 .ink_panel .btn01.gold::before { background-color: var(--gold); }
body.izamachi-v4 .ink_panel .btn01.gold::after { background-color: var(--ink); }
body.izamachi-v4 .ink_panel .btn01.gold:hover { color: var(--ink); }
body.izamachi-v4 .ink_panel .btn01.gold:hover::after { background-color: var(--gold); }
body.izamachi-v4 .btn_list { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-start; }
body.izamachi-v4 .btn_list.center { justify-content: center; }
/* 鉤括弧でくくった語は途中で折らない */
body.izamachi-v4 .nw { white-space: nowrap; }
/* ---------------------------------------------------------------------------
* 6. ヒーロー（Figma: izamachi_app_local_community 9719:24405 / 2026-09-19 改訂）
*
* 見出し・リード・円の CTA を中央に積み、その下に黄色の大円と端末を置く。
* 大円と端末の下端は、この節の底で切る（原版のフレームと同じ切れ方）。
*
* 見出しだけ 6.4rem で、活字の段（--f-display 上限 5.2rem）を超えている。
* ページで1つだけの「顔」なので、--r-lg と同じ扱いで段の外に置いた
* ------------------------------------------------------------------------- */
/* HERO は角丸の面（カード）にして、地の白をその外にだけ覗かせる。
umanodesign.studio と同じ作り: スクロール 0→150px で左右 1rem・
下の角丸 0→--r-lg。中の端末と大円はカードの縁で切れる。
--hf（0→1）は motion.js が入れる */
body.izamachi-v4 #hero {
position: relative;
padding: 0 0 calc(var(--hf, 0) * 1rem);
/* 枠の外に覗く地。次の節（MESSAGE）と同じ白にして、面の角丸が読めるようにする */
background-color: var(--white);
overflow: clip; /* hidden は sticky を殺すので使わない（26章） */
box-sizing: border-box;
/* 大円は次の節へ抜けさせる（切らない）。MESSAGE の淡い円と重ねて、
黄の下端が弧のまま淡い円へ受け渡されるようにする。
横のはみ出しは .wrap の overflow: clip が受け持つ */
overflow: visible;
/* 円は次の節の本文の**下**に潜らせる。DOM 順で MESSAGE が後に塗られるので、
ここは 0 のままにしておく */
z-index: 0;
}
body.izamachi-v4 .hero_card {
position: relative;
padding: 12.7rem 0 0;
box-sizing: border-box;
/* HERO の面はページの地の色（クリーム）に戻す */
background-color: var(--page);
margin-inline: calc(var(--hf, 0) * 1rem);
/* 下の角は左右とも常に丸い。JS が動かなくても丸みは残る */
border-bottom-left-radius: var(--r-lg);
border-bottom-right-radius: var(--r-lg);
overflow: hidden;
}
/* 白がこの先へ続かないよう、次の節は自分で地を持つ */
/* 節の地はクリームと白を交互に。帯に角丸は付けない（2026-09-26 指示）。
HERO の面（クリーム）の外に覗く白だけが枠として残る */
body.izamachi-v4 #message {
position: relative;
z-index: 1;
background-color: var(--white); /* HERO の枠の白からそのまま続く */
}
/* 共有の main.css が .worry の下に黄色い三角を描いている。この版では出さない */
body.izamachi-v4 .worry::after { display: none; }
/* WORRY は白い帯。カードはクリーム（地の反対色）。地は下の #worry で指定 */
body.izamachi-v4 #worry .joined > li { background-color: var(--page); }
body.izamachi-v4 #hero .hero_head {
position: relative;
z-index: 1;
width: calc(1440 / 1800 * 100vw);
max-width: 144rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 4rem;
}
body.izamachi-v4 #hero .hero_catch {
margin: 0;
font-size: var(--f-display);
font-weight: 600;
line-height: var(--lh-display);
letter-spacing: 0;
/* 字間は文字の右に付く。1字ぶんの半分だけ左へ戻して光学的に中央へ置く */
text-indent: 0.08em;
}
/* 全角スペースで区切った句の途中で折れないよう、句ごとに塊にする */
body.izamachi-v4 #hero .hero_lead > span { display: inline-block; }
body.izamachi-v4 #hero .hero_lead {
margin: 0;
max-inline-size: none;
font-size: var(--f-h3);
line-height: var(--lh-small);
}
/* CTA は円。主＝ink の面に page の文字、副＝地の色の面に ink の輪郭（Figma と同じ） */
body.izamachi-v4 #hero .circle_cta {
display: flex;
gap: 2.4rem;
margin: 0;
}
body.izamachi-v4 #hero .circle_cta a {
width: 18rem;
height: 18rem;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
text-align: center;
text-decoration: none;
line-height: var(--lh-small);
font-weight: 600;
font-size: var(--f-h4);
letter-spacing: 0;
box-sizing: border-box;
transition: transform var(--dur) cubic-bezier(.34, 1.56, .64, 1);
}
body.izamachi-v4 #hero .circle_cta .en {
font-size: 1.2rem;
letter-spacing: 0.01em;
font-weight: 600;
margin: 0;
/* 字間ぶん右に空くので、半分戻す */
text-indent: 0.3em;
}
body.izamachi-v4 #hero .circle_cta .start { background-color: var(--ink); color: var(--page); }
body.izamachi-v4 #hero .circle_cta .start .en { color: var(--gold); }
body.izamachi-v4 #hero .circle_cta .inquiry { background-color: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
body.izamachi-v4 #hero .circle_cta .inquiry .en { color: var(--gold-dark); }
body.izamachi-v4 #hero .circle_cta a:hover { transform: translateY(-4px); }
/* 6-2. 大円と端末 ----------------------------------------------------------- */
body.izamachi-v4 #hero .hero_stage {
position: relative;
margin-top: 11.5rem;
/* 端末の下 1/4 ぶんを詰めて、カードの縁で切る。
端末の高さは幅×(800/360) なので、その 1/4 は幅×0.5556 */
padding: 7.9rem 0 0;
margin-bottom: calc(var(--heroPhoneW, 36rem) * -0.5556);
display: flex;
flex-direction: column;
align-items: center;
}
/* Figma: 直径 1200 / 1440 の幅。中心はページの中心 */
body.izamachi-v4 #hero .hero_stage::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: min(83.34vw, 120rem);
aspect-ratio: 1 / 1;
border-radius: 50%;
background-color: var(--gold);
/* ページを通して円はこれ1つ。motion.js が2つの値を入れる。
--orbY: スクロール量の 35% だけ下に置き去りにする。画面の中では
スクロールの 65% の速さで上がる＝ゆっくり上へ動いて見える。
そのぶん円が次の節まで付いてきて、MESSAGE の地になる。
--q : MESSAGE が画面下から上端へ来るまでの 0→1。黄から淡色へ連続的に抜ける。
color-mix が無い環境では上の background-color（黄のまま）が残る */
transform: translate(-50%, var(--orbY, 0px));
background-color: color-mix(in srgb, var(--gold) calc((1 - var(--q, 0)) * 100%), var(--circle));
}
/* 端末の中は自動で動く。止める手段を必ず置く（WCAG 2.2.2）。
ファーストビューの見た目を汚さないよう、普段は伏せておき、
端末にポインタが乗っている間は**カーソルそのものを記号に差し替える**。
カーソルの輪と点は data-cursor-hide で消し、その場所にこの記号を重ねる。
記号はクリックを受けない（pointer-events: none）。押されるのは端末そのもの。
キーボードで辿り着いたときだけ、端末の下に置いて押せるようにする */
body.izamachi-v4 #hero .hero_pause {
position: fixed;
left: 0;
top: 0;
/* --px / --py は motion.js が入れる。カーソルの少し下に置く */
transform: translate3d(var(--px, -300px), var(--py, -300px), 0) translate(-50%, -50%);
z-index: 99999;
pointer-events: none;
/* 文字は置かず、記号だけ。読み上げには aria-label が付いている。
44px はタップの下限（DESIGN.md 4-5）。装飾は地色＋影の2つまで（同 2-6）*/
width: 44px;
height: 44px;
padding: 0;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background-color: var(--white);
color: var(--ink);
box-shadow: 0 0.6rem 1.8rem rgba(58, 43, 0, 0.18);
cursor: pointer;
opacity: 0;
transition: opacity 0.2s ease;
will-change: transform;
}
body.izamachi-v4 #hero .hero_pause .material-icons { font-size: 20px; }
/* 記号がカーソルの代わりになるので、端末の上では既定のカーソルも消す
（カスタムカーソルが動かない環境でも二重に出ない） */
@media (hover: hover) and (pointer: fine) {
body.izamachi-v4 .hero_phone { cursor: none; }
}
body.izamachi-v4 #hero .hero_pause.is-near,
body.izamachi-v4 #hero .hero_pause.is-flash { opacity: 1; }
/* キーボードのときは端末の下に置いて、そのまま押せるようにする */
body.izamachi-v4 #hero .hero_pause:focus-visible {
position: absolute;
left: 50%;
top: auto;
bottom: 2rem;
transform: translateX(-50%);
pointer-events: auto;
opacity: 1;
}
/* 指で操作する環境は、端末を叩くと止まる（札はその合図に一瞬だけ出す） */
/* 指で操作する環境にはホバーが無い。カーソルに付いてくる札にできないので、
端末の下に小さく出したままにする。止める手段に届かないと WCAG 2.2.2 を満たせない */
@media (hover: none), screen and (max-width: 1023px) {
body.izamachi-v4 #hero .hero_pause {
position: absolute;
left: 50%;
top: auto;
bottom: 1.2rem;
transform: translateX(-50%);
opacity: 1;
}
}
body.izamachi-v4 #hero .hero_en {
position: relative;
font-size: 1.2rem;
letter-spacing: 0.01em;
text-indent: 0.25em;
line-height: 1;
color: var(--gold-dark);
font-weight: 600;
margin: 0 0 2.5rem;
}
/* ---------------------------------------------------------------------------
* 6-3. 端末の中身（アプリ画面）
*
* 画像ではなく HTML で組む。ページを送ると中の画面が入れ替わる（motion.js の app()）。
* 端末まるごとで1枚の図なので、中の要素は読み上げの対象にしない（role="img"）。
* 寸法は Figma の 360 × 800 をそのまま。幅が足りない画面では器ごと縮め、
* 中は割合で組んであるので崩れない
* ------------------------------------------------------------------------- */
body.izamachi-v4 .hero_phone {
--app-bg: #FDF8EC;
/* 枠線をやめた入力欄・リンク欄の塗り。地よりわずかに濃くして、線なしでも器と分かるようにする */
--app-fill: #F2EBD9;
z-index: 1;
--app-line: #EFE7D2;
--app-sub: #8A7F62;
position: relative;
width: min(var(--heroPhoneW, 36rem), calc(100vw - 4.8rem));
aspect-ratio: 360 / 800;
padding: 0.9rem;
box-sizing: border-box;
border-radius: 4.8rem;
background-color: #1D1A14;
box-shadow: 0 2.4rem 4.8rem rgba(58, 43, 0, 0.18);
}
body.izamachi-v4 .hero_phone .app {
position: relative;
width: 100%;
height: 100%;
border-radius: 4rem;
overflow: hidden;
background-color: var(--app-bg);
display: flex;
flex-direction: column;
font-size: 1.2rem;
line-height: 1.5;
color: var(--ink);
}
/* 上の帯 */
body.izamachi-v4 .hero_phone .app_status {
flex: none;
height: 3.8rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.8rem;
font-size: 1.1rem;
font-weight: 700;
}
body.izamachi-v4 .hero_phone .app_status .island {
width: 9rem;
height: 2.4rem;
border-radius: var(--r-pill);
background-color: #1D1A14;
}
body.izamachi-v4 .hero_phone .app_status .sig { display: flex; align-items: flex-end; gap: 2px; height: 1rem; }
body.izamachi-v4 .hero_phone .app_status .sig i { width: 3px; background-color: var(--ink); border-radius: 1px; }
body.izamachi-v4 .hero_phone .app_status .sig .b1 { height: 30%; }
body.izamachi-v4 .hero_phone .app_status .sig .b2 { height: 55%; }
body.izamachi-v4 .hero_phone .app_status .sig .b3 { height: 80%; }
body.izamachi-v4 .hero_phone .app_status .sig .b4 { height: 100%; }
body.izamachi-v4 .hero_phone .app_top {
flex: none;
display: flex;
align-items: center;
gap: 0.8rem;
padding: 1.2rem 2rem 1.4rem;
font-size: 1.7rem;
font-weight: 700;
letter-spacing: 0.02em;
}
body.izamachi-v4 .hero_phone .app_top .chev {
font-size: 16px;
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
background-color: var(--gold);
display: grid;
place-items: center;
}
/* 画面の器。3枚を同じマスに重ねる */
body.izamachi-v4 .hero_phone .app_body {
flex: 1;
position: relative;
display: grid;
overflow: hidden;
padding: 0 1.6rem;
}
body.izamachi-v4 .hero_phone .app_screen {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
gap: 1rem;
align-content: start;
opacity: 0;
transform: translateY(16px);
transition: opacity .32s ease, transform .42s cubic-bezier(.16, 1, .3, 1);
pointer-events: none;
}
body.izamachi-v4 .hero_phone .app_screen.is-on { opacity: 1; transform: none; }
/* 指で送ったぶん。いちばん上の画面だけ動かす */
body.izamachi-v4 .hero_phone .app_screen.is-on.is-scrolled { transform: translateY(-5.6rem); transition-duration: .7s; }
/* 差し込まれる1件。高さごと開いて、上から降りてくる */
body.izamachi-v4 .hero_phone .ac.app_new {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
overflow: hidden;
transition: max-height .5s cubic-bezier(.16, 1, .3, 1), opacity .4s ease,
padding-top .5s ease, padding-bottom .5s ease, margin-bottom .5s ease;
margin-bottom: -1rem; /* 閉じている間は gap のぶんを打ち消す */
}
body.izamachi-v4 .hero_phone .ac.app_new.is-on {
max-height: 16rem;
padding-top: 1.2rem;
padding-bottom: 1.2rem;
opacity: 1;
margin-bottom: 0;
}
/* 打ち込まれる文字 */
body.izamachi-v4 .hero_phone .af .in .tw {
display: inline-block;
overflow: hidden;
white-space: nowrap;
vertical-align: bottom;
max-width: 0;
transition: max-width 1s steps(8, end);
}
body.izamachi-v4 .hero_phone .af .in .tw.is-on { max-width: 16em; }
body.izamachi-v4 .hero_phone .af .in .cur { animation: izmtCaret 1s steps(1, end) infinite; }
@keyframes izmtCaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
/* タップの波紋 */
body.izamachi-v4 .hero_phone .app_tap {
position: absolute;
width: 5.6rem;
height: 5.6rem;
margin: -2.8rem 0 0 -2.8rem;
border-radius: 50%;
background-color: var(--ink);
opacity: 0;
transform: scale(0.3);
pointer-events: none;
z-index: 3;
}
body.izamachi-v4 .hero_phone .app_tap.is-on { animation: izmtTap .55s ease-out; }
@keyframes izmtTap {
0% { opacity: 0.28; transform: scale(0.3); }
100% { opacity: 0; transform: scale(1.15); }
}
/* 押された先を一瞬沈ませる */
body.izamachi-v4 .hero_phone .is-press { transform: scale(0.94); transition: transform .18s ease; }
/* 1: タイムライン */
body.izamachi-v4 .hero_phone .ac {
display: flex;
flex-direction: column;
background-color: var(--white);
border-radius: 1.2rem;
padding: 1.2rem 1.4rem;
}
body.izamachi-v4 .hero_phone .ac .d { font-size: 1rem; color: var(--app-sub); }
body.izamachi-v4 .hero_phone .ac .t { font-size: 1.4rem; font-weight: 700; margin-top: 0.4rem; }
body.izamachi-v4 .hero_phone .ac .c {
font-size: 1.1rem;
color: #6B6250;
margin-top: 0.4rem;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
body.izamachi-v4 .hero_phone .ph { display: flex; gap: 0.8rem; margin-top: 0.8rem; }
body.izamachi-v4 .hero_phone .ph i {
flex: 1;
height: 5.6rem;
border-radius: 0.6rem;
background-color: var(--app-line);
background-size: cover;
background-position: center;
}
body.izamachi-v4 .hero_phone .tg { display: flex; gap: 0.6rem; margin-top: 0.9rem; }
body.izamachi-v4 .hero_phone .tg b {
font-size: 1rem;
font-weight: 600;
padding: 0.4rem 0.9rem;
border-radius: 0.6rem;
background-color: #F4ECD5;
color: #6B5A2A;
}
body.izamachi-v4 .hero_phone .tg b.on { background-color: var(--gold); color: var(--ink); }
/* 2: お知らせを作成 */
body.izamachi-v4 .hero_phone .af { display: flex; flex-direction: column; gap: 0.5rem; }
body.izamachi-v4 .hero_phone .af .lb { font-size: 1rem; color: var(--app-sub); font-weight: 600; }
body.izamachi-v4 .hero_phone .af .in {
background-color: var(--app-fill);
border: 0;
border-radius: 0.8rem;
padding: 0.9rem 1rem;
font-size: 1.2rem;
display: flex;
align-items: center;
gap: 2px;
}
body.izamachi-v4 .hero_phone .af .in.tall { flex-direction: column; align-items: stretch; gap: 0.7rem; padding: 1.1rem 1rem; }
body.izamachi-v4 .hero_phone .af .in .ln { height: 0.7rem; border-radius: 0.35rem; background-color: var(--app-line); }
body.izamachi-v4 .hero_phone .af .in .ln.w2 { width: 60%; }
body.izamachi-v4 .hero_phone .af .in .cur { width: 2px; height: 1.4rem; background-color: var(--gold-deep); }
body.izamachi-v4 .hero_phone .af .ph i.add {
flex: none;
width: 5.6rem;
display: grid;
place-items: center;
font-size: 20px;
color: var(--app-sub);
border: 0;
background-color: var(--app-fill);
}
body.izamachi-v4 .hero_phone .asend {
margin-top: 0.4rem;
text-align: center;
background-color: var(--ink);
color: var(--page);
font-size: 1.3rem;
font-weight: 700;
padding: 1.2rem;
border-radius: var(--r-pill);
}
/* 3: QRで招待 */
body.izamachi-v4 .hero_phone .aqr {
background-color: var(--white);
border-radius: 1.2rem;
padding: 1.6rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
body.izamachi-v4 .hero_phone .aqr svg { width: 12rem; height: 12rem; display: block; }
body.izamachi-v4 .hero_phone .aqr .c { font-size: 1rem; color: var(--app-sub); text-align: center; }
body.izamachi-v4 .hero_phone .alink {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
background-color: var(--app-fill);
border: 0;
border-radius: 0.8rem;
padding: 0.9rem 1rem;
font-size: 1.1rem;
}
body.izamachi-v4 .hero_phone .alink .cp {
flex: none;
font-size: 1rem;
font-weight: 700;
background-color: var(--gold);
color: var(--ink);
border-radius: 0.6rem;
padding: 0.4rem 0.9rem;
}
body.izamachi-v4 .hero_phone .amem {
background-color: var(--white);
border-radius: 1.2rem;
padding: 1.2rem 1.4rem;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
body.izamachi-v4 .hero_phone .amem .hd { font-size: 1.1rem; font-weight: 700; display: flex; gap: 0.6rem; }
body.izamachi-v4 .hero_phone .amem .hd b { color: var(--gold-dark); }
body.izamachi-v4 .hero_phone .amem .rw { display: flex; align-items: center; gap: 0.8rem; font-size: 1.1rem; }
body.izamachi-v4 .hero_phone .amem .rw i {
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
background-color: #C9D6DE;
}
body.izamachi-v4 .hero_phone .amem .rw i.c2 { background-color: #E3D6B8; }
body.izamachi-v4 .hero_phone .amem .rw i.c3 { background-color: #D5DFC9; }
/* 投稿ボタンとタブ */
body.izamachi-v4 .hero_phone .app_fab {
position: absolute;
right: 1.6rem;
bottom: 8.6rem;
width: 6rem;
height: 6rem;
border-radius: 50%;
background-color: var(--gold);
color: var(--ink);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.2rem;
font-size: 1.1rem;
font-weight: 700;
box-shadow: 0 0.4rem 1.2rem rgba(58, 43, 0, 0.22);
}
body.izamachi-v4 .hero_phone .app_fab i { font-size: 18px; }
body.izamachi-v4 .hero_phone .app_tab {
flex: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
background-color: var(--white);
border-top: 1px solid var(--app-line);
padding: 0.8rem 0 2.4rem;
}
body.izamachi-v4 .hero_phone .app_tab span {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
font-size: 0.9rem;
color: var(--app-sub);
}
body.izamachi-v4 .hero_phone .app_tab i { font-size: 20px; }
body.izamachi-v4 .hero_phone .app_tab .on { color: var(--ink); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
body.izamachi-v4 .hero_phone .app_screen { transition: opacity .2s ease; transform: none; }
body.izamachi-v4 #hero .circle_cta a { transition: none; }
body.izamachi-v4 #hero .circle_cta a:hover { transform: none; }
}
/* 注記チップ。gold は淡地から立たない（1.44）ので ink の面に gold の文字を置く */
body.izamachi-v4 .note_chip {
display: inline-block;
font-size: var(--f-label);
letter-spacing: 0;
line-height: var(--lh-label);
background-color: var(--ink);
color: var(--gold);
border-radius: var(--r-pill);
padding: 0 1.2rem;
box-sizing: border-box;
}
/* ---------------------------------------------------------------------------
* 7. セクションの縦リズム（GUIDELINE 4.3）
* セクション間 170〜285px、部品間 20〜100px。桁をひとつ変えて区別する
* ------------------------------------------------------------------------- */
/* 下の #worry（01/02/03 の3枚）と1つの塊にするため、間を --gap-mid 160px → 48px に詰めた。
3枚は MESSAGE の本文の続き（挙げた課題の内訳）なので、章の切れ目の間隔を取らない */
body.izamachi-v4 #message { position: relative; padding: var(--gap-wide) 0 4.8rem; z-index: 0; }
/* 本文のかたまりは中央揃えにしない（DESIGN.md 2-3・Butterick）。
ブロックの位置だけ中央に置き、行は左で揃える。
幅は 36em = 36字（同 2-4。上限40字・狙い30〜38字） */
body.izamachi-v4 .prose {
max-inline-size: var(--measure);
margin: 0 auto;
text-align: left;
font-size: var(--f-body);
line-height: var(--lh-body);
}
body.izamachi-v4 .prose p { margin: 0 0 2rem; }
body.izamachi-v4 .prose p:last-child { margin-bottom: 0; }
/* リードは1〜2行の見出し的コピーなので中央のまま（DESIGN.md 2-3 の「短い見出し」） */
body.izamachi-v4 .lead {
max-inline-size: var(--measure-lead);
margin-inline: auto;
text-align: center;
font-size: var(--f-h2);
font-weight: 600;
line-height: var(--lh-h4);
letter-spacing: 0;
margin: 0 0 4rem;
}
/* ---------------------------------------------------------------------------
* 8. 「面をつなぐ」グリッド（GUIDELINE 4.4）
* 外枠 6rem・gap 0.4rem・中のカードは 0.3rem。1枚の面が割れて見える
* ------------------------------------------------------------------------- */
body.izamachi-v4 .joined {
display: grid;
gap: 0.4rem;
border-radius: var(--r-lg);
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
counter-reset: item;
}
body.izamachi-v4 .joined.col2 { grid-template-columns: repeat(2, 1fr); }
body.izamachi-v4 .joined.col3 { grid-template-columns: repeat(3, 1fr); }
body.izamachi-v4 .joined > li {
background-color: var(--white);
border-radius: var(--r-hair);
counter-increment: item;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 64px 40px;
box-sizing: border-box;
}
/* 番号。cocoro は sky（白地 2.35:1）だったが、淡地に置く文字なので gold-dark */
/* 番号は黄の円チップ。ページを縦断する黄のリズムを作る（DESIGN.md 第1部9） */
body.izamachi-v4 .joined > li .num {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--gold);
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--f-small);
line-height: 1;
margin: 0 0 20px;
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 600;
}
body.izamachi-v4 .joined > li .num::before { content: "0" counter(item); }
body.izamachi-v4 .joined > li h3 {
text-align: left;
width: 100%;
font-size: var(--f-h3);
font-weight: 600;
letter-spacing: 0;
line-height: var(--lh-h3);
margin: 0 0 1.2rem;
}
/* 図版の器。図は自分の地を持たず、カードの白がそのまま図の地になるので、
カードの左右パディング（40px）を打ち消して横幅いっぱいに置く */
body.izamachi-v4 .joined > li .image {
min-height: 0;
display: block;
align-self: stretch;
margin: 24px -40px 32px;
width: auto;
}
body.izamachi-v4 .joined > li .image img { max-width: 100%; max-height: 200px; width: auto; height: auto; }
/* 図版は器の幅いっぱい。width:100% だと内容ボックス基準になって余白が残る */
body.izamachi-v4 #worry .joined > li .image { width: auto; align-self: stretch; }
body.izamachi-v4 .joined > li .text {
text-align: left;
line-height: var(--lh-body);
font-size: var(--f-small);
max-inline-size: var(--measure);
margin: 0 0 3rem;
width: 100%;
}
body.izamachi-v4 .joined > li .text:last-child { margin-bottom: 0; }
/* タグ。gold の面に ink の文字（8.67:1）。cocoro のように追加色が要らない */
body.izamachi-v4 .tag_list { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1rem; margin: 0; padding: 0; list-style: none; }
body.izamachi-v4 .tag_list li {
background-color: var(--gold);
color: var(--ink);
font-size: var(--f-label);
font-weight: 600;
line-height: var(--lh-label);
letter-spacing: 0;
border-radius: var(--r-pill);
padding: 1.3rem 2.4rem;
box-sizing: border-box;
}
/* 写真カード（特長）。角丸は 2rem の矩形（GUIDELINE 8） */
body.izamachi-v4 .joined.photo_cards > li { padding: 0 0 4rem; }
body.izamachi-v4 .joined.photo_cards .ph { width: 100%; line-height: 0; margin-bottom: 3rem; }
body.izamachi-v4 .joined.photo_cards .ph img { width: 100%; height: auto; display: block; }
body.izamachi-v4 .joined.photo_cards h3,
body.izamachi-v4 .joined.photo_cards .text { padding: 0 3rem; box-sizing: border-box; }
/* ---------------------------------------------------------------------------
* 9. 濃い面（GUIDELINE 4.5「information の面」）
* 角丸 8rem の矩形を器からはみ出させる。
* **ink の面はページに2箇所まで**（cocoro の「黄は2箇所まで」の移し替え）
* ------------------------------------------------------------------------- */
body.izamachi-v4 .ink_panel {
position: relative;
z-index: 0;
color: var(--ink);
padding: 11rem min(4.45vw, 8rem);
box-sizing: border-box;
}
body.izamachi-v4 .ink_panel::before {
content: "";
position: absolute;
top: 0;
left: -6rem;
width: calc(100% + 12rem);
height: 100%;
background-color: var(--cream);
border-radius: var(--r-lg);
z-index: -1;
}
body.izamachi-v4 .ink_panel .prose,
body.izamachi-v4 .ink_panel .lead { color: var(--ink); }
/* 濃い面の中身は左組み。見出し・リード・本文・ボタンが同じ左端に立つ */
body.izamachi-v4 .ink_panel .prose,
body.izamachi-v4 .ink_panel .lead { margin-inline: 0; text-align: left; }
/* 濃い面は「文 ＋ 画面キャプチャ」の2列。キャプチャは端末の画面（縦長）を想定 */
body.izamachi-v4 .ink_panel {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
gap: min(4.45vw, 8rem);
align-items: center;
}
body.izamachi-v4 .ink_panel_body { min-width: 0; }
/* 面の左右の余白をそろえるため、右端に寄せる（面は器より 6rem ずつ外へ出ている） */
body.izamachi-v4 .ink_panel_shot { justify-self: end; width: min(100%, 24rem); }
/* 器。中身がどんな比率でも同じ見えになるよう、枠で受けて切る */
body.izamachi-v4 .shot_frame {
border-radius: var(--r-sm);
overflow: hidden;
background-color: var(--white);
line-height: 0;
}
body.izamachi-v4 .shot_frame img { display: block; width: 100%; height: auto; }
/* 3枚を同じマスに重ねて入れ替える。器の幅で高さが決まる（画像は 440:957） */
body.izamachi-v4 .shot_show { display: grid; width: 100%; }
body.izamachi-v4 .shot_img {
grid-area: 1 / 1;
display: block;
width: 100%;
height: auto;
opacity: 0;
transition: opacity 0.6s ease;
}
body.izamachi-v4 .shot_img.is-on { opacity: 1; }
/* 操作。濃い面の上なので白い線で描く。普段は伏せ、ホバーとフォーカスで出す */
body.izamachi-v4 .shot_ctrl {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 1.6rem;
opacity: 0;
transition: opacity var(--dur) ease;
}
body.izamachi-v4 .ink_panel_shot:hover .shot_ctrl,
body.izamachi-v4 .shot_ctrl:focus-within { opacity: 1; }
/* 指で操作する環境にはホバーが無い。伏せたままだと止める手段に届かない */
@media (hover: none), screen and (max-width: 1023px) {
body.izamachi-v4 .shot_ctrl { opacity: 1; }
}
body.izamachi-v4 .shot_dot {
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
display: grid;
place-items: center;
}
body.izamachi-v4 .shot_dot::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--ink);
opacity: 0.35;
transition: opacity var(--dur-hover) ease, transform var(--dur) ease;
}
body.izamachi-v4 .shot_dot.is-on::before { opacity: 1; transform: scale(1.4); }
body.izamachi-v4 .shot_pause {
min-height: 44px;
padding: 0 1.4rem;
border: 1px solid var(--ink);
border-radius: var(--r-pill);
background: none;
color: var(--ink);
font-size: var(--f-label);
font-weight: 600;
letter-spacing: 0;
cursor: pointer;
}
/* ---------------------------------------------------------------------------
* 10. 行の一覧（GUIDELINE 6.3 info_list / news_list）
* ------------------------------------------------------------------------- */
body.izamachi-v4 .row_list {
display: grid;
gap: 0.4rem;
/* 面の外周は他の塊（.joined）と同じ大角丸。中のカードは --r-hair のまま */
border-radius: var(--r-lg);
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
body.izamachi-v4 .row_list > li {
background-color: var(--white);
border-radius: var(--r-hair);
display: flex;
align-items: center;
gap: 2rem;
min-height: 8rem; /* 原典は height 固定 ※A-05 */
padding: 20px 40px;
box-sizing: border-box;
}
body.izamachi-v4 .row_list > li .dt {
position: relative;
width: 24rem;
flex: 0 0 24rem;
letter-spacing: 0;
font-weight: 600;
box-sizing: border-box;
}
body.izamachi-v4 .row_list > li .dt .n {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--gold);
color: var(--ink);
font-size: var(--f-label);
margin-right: 12px;
vertical-align: middle;
}
/* 番号チップが役割を持つので、点は置かない（意味を運ばない装飾。DESIGN.md 第1部2） */
body.izamachi-v4 .row_list > li .dd { flex: 1; font-size: var(--f-small); letter-spacing: 0; line-height: var(--lh-small); max-inline-size: var(--measure); }
/* FAQ。news_list の作り（gap 0.2rem / 外枠 1rem） */
body.izamachi-v4 .qa_list {
display: grid;
gap: 0.2rem;
border-radius: var(--r-lg);
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
body.izamachi-v4 .qa_list > li {
background-color: var(--white);
border-radius: var(--r-hair);
padding: 4rem 5rem;
box-sizing: border-box;
/* 質問と答えを1本の列にして、面の中央に置く。
左端に寄せると右が大きく空いて、面だけが広く見える。
列にしているので、問いと答えの左端は揃ったまま */
display: grid;
justify-content: center;
grid-template-columns: minmax(0, calc(var(--measure) + 3rem));
}
body.izamachi-v4 .qa_list h3 {
position: relative;
font-size: var(--f-h4);
font-weight: 600;
letter-spacing: 0;
line-height: var(--lh-body);
padding-left: 3rem;
margin: 0 0 2rem;
}
body.izamachi-v4 .qa_list h3::before {
content: "";
position: absolute;
top: 1.5rem;
left: 0;
width: 1.2rem;
height: 1.2rem;
background-color: var(--gold);
border-radius: 50%;
}
body.izamachi-v4 .qa_list p { margin: 0; font-size: var(--f-small); line-height: var(--lh-body); padding-left: 3rem; max-inline-size: calc(var(--measure) + 3rem); }
/* CONTACT。ステップ・FAQ と同じ扱いにする（2026-09-19）。
器の幅・白い面・大角丸・内側の余白を3つで揃え、
フォームと電話は 0.4rem の隙間で「つないだ1枚の面」に見せる（4.4） */
body.izamachi-v4 .form_box {
background-color: var(--white);
border-radius: var(--r-lg) var(--r-lg) var(--r-hair) var(--r-hair);
padding: 4.8rem 5rem;
box-sizing: border-box;
overflow: hidden;
}
body.izamachi-v4 .tel_box {
margin-top: 0.4rem;
background-color: var(--white);
border-radius: var(--r-hair) var(--r-hair) var(--r-lg) var(--r-lg);
padding: 4.8rem 5rem;
box-sizing: border-box;
/* 番号と注記を間を空けずに2段。面の中央に寄せる */
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
text-align: center;
}
/* 電話は掛ける導線にしない（tel リンクは外してある）。文字として置く */
body.izamachi-v4 .tel_box .tel_number {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 16px; /* #46 で本人指定。Apple の段（17px）には載せない */
font-weight: 700; /* 同上「16px bold」。Apple の2段階（400/600）の例外 */
letter-spacing: 0;
}
body.izamachi-v4 .tel_box .tel_number .material-icons {
font-size: 24px;
width: 24px;
height: 24px;
}
body.izamachi-v4 .tel_box .note {
margin: 0;
font-size: 12px;
line-height: var(--lh-label);
opacity: 0.5;
max-inline-size: none;
}
/* ---------------------------------------------------------------------------
* 12. セクションの地と大角丸（GUIDELINE 4.5）
* ------------------------------------------------------------------------- */
/* 読む順に「なぜ → 問題 → 答え → 詳細 → 別の切り口 → 行動 → 不安 → 結び」。
章が変わるところを wide、同じ章の続きを tight にして、近接に意味を持たせる。
すべて 32 の倍数で、階差は 1.4〜1.67 倍（DESIGN.md 2-2） */
/* 2026-09-19: #worry の面を外した。見出しを削って MESSAGE と1つの塊にしたので、
ここで地の色と大角丸が変わると、繋げたいものが逆に切り離される。
淡い面と大角丸は #solution（＝答え）の側へ移した。
「問題は地のまま／答えから面が変わる」で、章の切れ目と面の切れ目が一致する */
body.izamachi-v4 #worry {
background-color: var(--white); /* 交互配色の白い帯 */
border-radius: 0;
padding: 0 0 var(--gap-tight);
margin-top: 0;
}
/* 端末の真下からは白い面。STEPS まで白でつながるので、
間に淡い帯を挟まず、角丸も付けない（2026-09-24） */
body.izamachi-v4 #solution {
padding: var(--gap-tight) 0 0;
background-color: var(--white);
border-radius: 0;
}
body.izamachi-v4 #feature { padding: var(--gap-wide) 0 var(--gap-tight); }
body.izamachi-v4 #comparison { padding: var(--gap-wide) 0 var(--gap-mid); }
/* STEPS は白い面。中のカードを淡い黄にして、地とカードの関係を他の節と逆にする
（2026-09-24）。手順は「作業する場所」なので、面を白くして紙に近づける */
body.izamachi-v4 #izmt-steps-sec {
background-color: var(--white);
border-radius: 0;
padding: var(--gap-mid) 0;
}
body.izamachi-v4 #izmt-steps-sec .row_list > li { background-color: var(--page); }
/* FAQ はクリームの地に白いカード */
body.izamachi-v4 #faq {
padding: var(--gap-tight) 0 var(--gap-wide);
background-color: transparent;
border-radius: 0;
}
/* お問い合わせは白い帯。フォームは地を持たない（2026-09-26 指示） */
body.izamachi-v4 #cta { background-color: var(--white); }
body.izamachi-v4 #cta .form_box,
body.izamachi-v4 #cta .tel_box {
background-color: transparent;
/* 入力欄が横に伸びすぎるので、器より狭くして中央に置く */
max-width: 64rem;
margin-inline: auto;
}
/* ステップとFAQは、器を1段狭くして中央に寄せる。
1440 の器いっぱいに置くと、中身に対して面だけが広く見えた */
body.izamachi-v4 #izmt-steps-sec .wrapbox02,
body.izamachi-v4 #faq .wrapbox02,
body.izamachi-v4 #cta .wrapbox02 { max-width: 104rem; }
body.izamachi-v4 #cta { padding: var(--gap-tight) 0 var(--gap-mid); }
/* ---------------------------------------------------------------------------
* 13. SP（1023px 以下。原典は 767px で切り替えるが、その上の 768-1023 は
* rem 30.5% を前提にした設計で、はしごを止めると破綻する。切替点を上げた ※A-01
* ------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
body.izamachi-v4 .wrapbox01,
body.izamachi-v4 .wrapbox02 { width: 89.5%; max-width: none; }
body.izamachi-v4 .wrapbox03 { width: 84.3%; max-width: none; }
/* Apple は節の見出しをスマホでも半分までしか下げない（80→40px）。
--f-h4（19px）まで落とすと 48px の 4 割になるので、--f-h1 の段（48→40→32→28）に乗せる */
body.izamachi-v4 .subtitle01 { font-size: var(--f-h1); letter-spacing: 0; margin-bottom: 3rem; }
body.izamachi-v4 .subtitle01 .en { font-size: 1.2rem; }
body.izamachi-v4 .subtitle02 { font-size: var(--f-h4); text-align: center; padding-left: 0; }
body.izamachi-v4 .subtitle02::before { display: none; }
body.izamachi-v4 .main_title .en { font-size: 2.8rem; }
body.izamachi-v4 .lead { font-size: var(--f-h4); }
/* Apple は CTA の字を 17px より下げない */
body.izamachi-v4 .btn01 { display: block; width: 100%; font-size: var(--f-body); padding: 1.6rem 3.4rem 1.6rem 6rem; }
body.izamachi-v4 .btn01::before { left: 1.7rem; }
body.izamachi-v4 .btn01.ink { font-size: var(--f-body); padding: 2rem 3.4rem 2rem 6rem; }
body.izamachi-v4 .btn_list { display: block; }
body.izamachi-v4 .btn_list > * + * { margin-top: 1.5rem; }
/* 上の余白は白い #hero ではなくクリームのカードの内側に置く。
#hero に置くと、白い地がカードの上に帯として出る（2026-09-26） */
body.izamachi-v4 #hero { padding: 0 0 calc(var(--hf, 0) * 1rem); }
body.izamachi-v4 .hero_card { padding-top: 4.8rem; }
body.izamachi-v4 #hero .hero_head { width: 89.5%; gap: 2.8rem; }
body.izamachi-v4 #hero .hero_catch { font-size: var(--f-display); }
body.izamachi-v4 #hero .hero_lead { font-size: 1.4rem; }
/* 見出しは
の位置だけで折る。字間を詰めて1行に収める。
word-break: auto-phrase は句ごとに細かく割れてしまうので使わない */
body.izamachi-v4 .subtitle01 { font-size: var(--f-h1); letter-spacing: 0; }
/* 操作の字は 17px より下げない */
body.izamachi-v4 #hero .circle_cta a { width: 15rem; height: 15rem; font-size: 1.7rem; }
/* 大円は SP では画面幅いっぱい。端末は器ごと縮み、中は割合で組んであるので崩れない */
body.izamachi-v4 #hero .hero_stage { margin-top: 6rem; padding: 4.8rem 0 5.6rem; }
body.izamachi-v4 #hero .hero_stage::before { width: min(124vw, 92rem); }
body.izamachi-v4 #hero .hero_en { font-size: 1.2rem; margin-bottom: 2rem; }
body.izamachi-v4 #message { padding: 8rem 0 3.2rem; }
body.izamachi-v4 #message::before { width: 60rem; height: 60rem; }
body.izamachi-v4 #worry { padding: 0 0 6rem; }
body.izamachi-v4 #solution { padding-top: 6rem; border-radius: 0; }
body.izamachi-v4 #solution,
body.izamachi-v4 #faq { padding-bottom: 9rem; }
body.izamachi-v4 #izmt-steps-sec { padding: 8rem 0 9rem; border-radius: 0; }
body.izamachi-v4 #feature,
body.izamachi-v4 #comparison { padding: 8rem 0 9rem; }
body.izamachi-v4 #cta { padding-bottom: 8rem; }
body.izamachi-v4 .joined { border-radius: var(--r-sm); }
body.izamachi-v4 .joined.col2,
body.izamachi-v4 .joined.col3 { grid-template-columns: 1fr; gap: 0.6rem; }
body.izamachi-v4 .joined > li { padding: 4rem 2.5rem 4.5rem; }
body.izamachi-v4 .joined.photo_cards > li { padding: 0 0 3rem; }
body.izamachi-v4 .joined.photo_cards h3,
body.izamachi-v4 .joined.photo_cards .text { padding: 0 2.5rem; }
body.izamachi-v4 .ink_panel { padding: 6rem 2.5rem; }
body.izamachi-v4 .ink_panel::before { left: 0; width: 100%; border-radius: var(--r-sm); }
body.izamachi-v4 .row_list > li { display: block; padding: 2rem; min-height: 0; }
body.izamachi-v4 .row_list > li .dt { width: auto; flex: none; padding-left: 1.5rem; margin-bottom: 0.5rem; }
body.izamachi-v4 .row_list > li .dt::before { top: 1rem; width: 0.6rem; height: 0.6rem; }
body.izamachi-v4 .row_list,
body.izamachi-v4 .qa_list { border-radius: var(--r-sm); }
body.izamachi-v4 .qa_list > li { padding: 2rem; }
body.izamachi-v4 .qa_list h3 { font-size: 1.7rem; padding-left: 2rem; margin-bottom: 1rem; }
body.izamachi-v4 .qa_list h3::before { top: 1.2rem; width: 0.8rem; height: 0.8rem; }
body.izamachi-v4 .qa_list p { padding-left: 2rem; }
body.izamachi-v4 .ink_panel { display: block; }
body.izamachi-v4 .ink_panel_shot { margin-top: 4rem; display: block; }
body.izamachi-v4 .ink_panel_shot { width: min(100%, 22rem); margin-inline: auto; }
/* SP では4列に割ると1列あたり 8〜9 文字になって読めない。2列で止める */
body.izamachi-v4 #izmt-steps-sec .row_list { grid-template-columns: repeat(2, 1fr); }
body.izamachi-v4 #izmt-steps-sec .row_list > li { padding: 3.6rem 2.8rem 4rem; }
/* 番号チップは見出しの上に置く。横に並べると見出しがチップの下に回り込む */
body.izamachi-v4 #izmt-steps-sec .row_list > li .dt { padding-left: 0; margin-bottom: 0.8rem; }
body.izamachi-v4 #izmt-steps-sec .row_list > li .dt .n { display: flex; margin: 0 0 0.8rem; }
/* 2行に折り返すので、1本の線では順序を示せない。線は引かない */
body.izamachi-v4 #izmt-steps-sec .row_list::before,
body.izamachi-v4 #izmt-steps-sec .row_list.started::before { display: none; }
body.izamachi-v4 .form_box { padding: 2.4rem; border-radius: var(--r-sm) var(--r-sm) var(--r-hair) var(--r-hair); }
body.izamachi-v4 .tel_box { padding: 2.8rem 2rem; border-radius: var(--r-hair) var(--r-hair) var(--r-sm) var(--r-sm); }
}
/* ---------------------------------------------------------------------------
* 14. 動きを減らす設定。原典は未対応 ※A-07
* ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
body.izamachi-v4 .btn01::before,
body.izamachi-v4 .btn01::after { transition-property: background-color, opacity; }
body.izamachi-v4 [data-delighter] { transform: none; }
}
/* ---------------------------------------------------------------------------
* 15. main.css 側のモーションへの上書き
* テーマの出現アニメは 0.5s。DESIGN.md 4-6 の上限 400ms に収める
* ------------------------------------------------------------------------- */
body.izamachi-v4 .section,
body.izamachi-v4 .section *,
body.izamachi-v4 .delighter,
body.izamachi-v4 [data-delighter] { transition-duration: 0.4s; }
/* ボタンの塗りが伸びる動きは「大きい面」ではないので 0.3s、色は 0.1s */
body.izamachi-v4 .btn01,
body.izamachi-v4 .btn01::before,
body.izamachi-v4 .btn01::after { transition-duration: var(--dur); }
body.izamachi-v4 .circle_cta a,
body.izamachi-v4 .tag_list li { transition-duration: var(--dur-hover); }
/* ---------------------------------------------------------------------------
* 16. 図版の差し替えにともなう組み直し（2026-09-18）
*
* ・お悩みの線画3点は、比率が 1.82 / 0.87 / 1.80 とバラバラで並べても揃わなかった。
* 同じ 120×120 の器・同じ線幅・ink の線＋gold の面だけ、で描き直した
* （DESIGN.md 第1部1「同じ役割のものが同じ形」/ 5「N個あるなら同じブロックをN個」）
* ・特長の写真6枚は、内容と噛み合っていたのが2枚だけで、1枚には LINE のロゴが
* そのまま写っていた。「消してもページの読み取り方が変わらないなら消す」
* （同 第1部2）に従い、線画アイコンに置き換えて横組みにした。
* お悩み（3列・縦組み）と形が変わるので、section の見分けもつく（同 2-1）
* ・写真は「実在感が要る1箇所」＝防災にだけ、大きく残した
* ------------------------------------------------------------------------- */
/* 横並びは 1024px 以上だけ。13章（SP）より後ろに書いてあるので、
囲わないと SP でも4列のままになる（2026-09-24 に発覚） */
@media screen and (min-width: 1024px) {
/* ステップ: 4つを横に並べる（2026-09-19）。縦に積むと右側の余白が目立った。
カードの中は「番号チップ → 見出し → 説明」の縦組み */
body.izamachi-v4 #izmt-steps-sec .row_list { grid-template-columns: repeat(4, 1fr); }
body.izamachi-v4 #izmt-steps-sec .row_list > li {
flex-direction: column;
align-items: flex-start;
gap: 0;
min-height: 0;
padding: 4.8rem 3.2rem 5.2rem;
/* 17章は li に z-index を置いている。そのままだと重なりの文脈ができて、
中の番号チップ（z-index 4）が線（3）より後ろに閉じ込められる */
z-index: auto;
}
body.izamachi-v4 #izmt-steps-sec .row_list > li .dt { width: auto; flex: none; }
body.izamachi-v4 #izmt-steps-sec .row_list > li .dt .n { display: flex; margin: 0 0 1.2rem; }
body.izamachi-v4 #izmt-steps-sec .row_list > li .dd { flex: none; max-inline-size: none; margin-top: 0.8rem; }
}
/* 線は引かない（2026-09-24）。番号チップだけで順序は読めるので、
17章の縦線も横線もこの節では出さない */
body.izamachi-v4 #izmt-steps-sec .row_list::before,
body.izamachi-v4 #izmt-steps-sec .row_list.started::before { display: none; }
/* 画面: 3枚を大きく。440px 幅の画像を 200px で出すと文字が読めなかった
（DESIGN.md 第1部6「収まっている」/ 7「素材に無理をさせない」） */
/* ヒーロー: 端末1枚を大きく。2枚並べると中身が読めなかった */
/* ヒーローの図は端末の SVG に置き換えたので、画像への指定は不要になった */
/* 防災の図版の幅は §12 に統合した。ここに素の（メディアクエリの外の）宣言を置くと
SP の 100% 指定より後ろに来てしまい、375px でも 46% のまま縮んでいた */
/* ---------------------------------------------------------------------------
* 17. 動き
* DESIGN.md 4-6 が動きを正当化する4つのうち「因果を示す」に当たるものだけ足す。
* ステップ 01→04 の縦線が一度だけ伸びて、順序があることを示す。
* 無限ループ・パララックスは足さない（cocoro の fuwafuwa は同 4-6 で禁止側）
* ------------------------------------------------------------------------- */
body.izamachi-v4 .row_list { position: relative; }
body.izamachi-v4 .row_list::before {
content: "";
position: absolute;
left: 56px;
top: 40px;
width: 2px;
height: 0;
background-color: var(--gold);
transition: height 0.4s cubic-bezier(.16,1,.3,1);
z-index: 1;
}
body.izamachi-v4 .row_list.started::before { height: calc(100% - 80px); }
body.izamachi-v4 .row_list::before { z-index: 3; }
body.izamachi-v4 .row_list > li { position: relative; z-index: 2; }
body.izamachi-v4 .row_list > li .dt .n { position: relative; z-index: 4; }
@media (prefers-reduced-motion: reduce) {
/* 前庭系を刺激する動きではないが、線が伸びる演出は外し、最初から引いておく */
body.izamachi-v4 .row_list::before { transition: none; height: calc(100% - 80px); }
}
/* ---------------------------------------------------------------------------
* 18. sp（図版の差し替えぶん）
* ------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
body.izamachi-v4 .joined > li .image { margin: 20px -2.5rem 28px; }
body.izamachi-v4 .row_list::before { left: 36px; top: 30px; }
body.izamachi-v4 .row_list.started::before { height: calc(100% - 60px); }
}
/* ---------------------------------------------------------------------------
* 19. 見出しのマークを外す（2026-09-18）
* 吹き出しの絵は情報を運んでいなかった（DESIGN.md 第1部2）。
* 代わりに 32px の細い罫と英字ラベルだけにする。
* mono は足さない。書体は2ファミリーまで（同 2-4）なので Montserrat を使い、
* 数字だけ tabular-nums にして技術図らしい並びにする
* ------------------------------------------------------------------------- */
body.izamachi-v4 .subtitle01 { align-items: center; }
body.izamachi-v4 .subtitle01::before {
content: "";
width: 32px;
height: 1px;
background-color: var(--ink);
opacity: .22;
margin-bottom: 24px;
}
body.izamachi-v4 .subtitle01 .en {
order: -1;
margin-bottom: 16px;
font-variant-numeric: tabular-nums;
}
body.izamachi-v4 .main_title .en { font-variant-numeric: tabular-nums; }
/* ---------------------------------------------------------------------------
* 20. 図版（等角・2026-09-18 に全面改訂）
*
* 人物は Figma の vacan > service_site のイラスト群（node 2129:94862）をそのまま使う。
* 小物（家・端末・掲示板・硬貨）はその様式に合わせて等角で描き起こした（assets/iso.py）。
*
* ・輪郭線は引かない。1つの立体につき上＝明 / 左＝中 / 右＝暗 の3面
* ・色は人物群から採る。主役は黄 #FFD500 系
* ・人物の定義はページ先頭の .ill_defs に1つだけ置き、各図は