がそれぞれ独立した背景面を持つ。幅制限・左右余白は内側の .features-section__inner が担い、外側のsection自体には角丸・枠線・影を付けない。セクション同士は隙間なく隣接し、背景色の切り替えだけで区切りを作る（白い帯を残さない）。内側幅の計算式は about/first と同じ min(1080px, 96%)。 ============================================================= */ /* ---- ページ固有のブランドアクセント（body スコープ限定） ---- miokuri.svg / fururi.svg が内部に持つ固有色をCSSから参照できるようにするための、このページ限定の変数。:root や共通CSSへは追加しない。 --*-accent : SVG原色そのまま。矢印・細い枠線・下線など「小さな装飾」用。（白背景に対するコントラストは緑約3.09:1／橙約4.02:1 で、非テキストUI要素の基準3:1は満たすが、本文テキストの 4.5:1には届かないため、通常文字には使用しない） --*-text : 同系の濃色。通常サイズのリンク文字用。（白背景緑約5.46:1／橙約6.24:1、 --color-panel-soft 上でも緑約4.65:1／橙約5.31:1）緑・オレンジはこのページの制度名に直接結び付く箇所だけに限定し、通常配色へは広げない。 */ .page-features { --miokuri-accent: #1FA939; --miokuri-text: #147A28; --fururi-accent: #E15927; --fururi-text: #A64018; } .page-features main { background: var(--color-page); } .page-features .features-intro, .page-features .features-block { margin: 0; border: 0; border-radius: 0; box-shadow: none; } .page-features .features-intro { background: var(--color-panel-soft); } .page-features .features-block--miokuri { background: var(--color-page); } .page-features .features-block--fururi { background: var(--color-panel-soft); } .page-features .features-block--together{ background: var(--color-page); } .page-features .features-section__inner { box-sizing: border-box; width: min(1080px, 96%); margin-inline: auto; padding-block: 46px; } @media (max-width: 640px) { .page-features .features-section__inner { padding-block: 32px; padding-inline: 16px; } } /* ============================================================= 2. ページ内アンカーの位置補正 ------------------------------------------------------------- 本ページにはローカルナビが無いため、固定ヘッダー分のみを見込む。 PC（1025px以上）：.ph-header 実測128px（ロゴ92px＋padding18px×2）＋ .ph-gnav（sticky・自身の高さ概算63px）＝191px に、見出し上の余白15pxを加えて206pxとする。 1024px以下：.ph-gnav は常設ではなくなるため、app-core.js が実測して設定する --mobile-header-height ＋16px を用いる。いずれも本環境に実機測定手段がないための計算値であり、実機・実ブラウザでの最終確認を推奨する。 ============================================================= */ .page-features #miokuri, .page-features #fururi, .page-features #features-together { scroll-margin-top: 206px; } @media (max-width: 1024px) { .page-features #miokuri, .page-features #fururi, .page-features #features-together { scroll-margin-top: calc(var(--mobile-header-height, 96px) + 16px); } } /* ============================================================= 3. 導入部 ------------------------------------------------------------- 外側を大きな角丸カードにせず、ページ幅いっぱいの背景面＋内側の幅制限要素で構成する。小見出しはピル型にせず、 plan.html の .plan-intro__eyebrow と同じ情報階層で表示する。 ============================================================= */ .page-features .features-intro__eyebrow { display: block; margin: 0 0 10px; font-family: var(--font-headbtn); font-weight: 900; font-size: 19px; line-height: 1.4; letter-spacing: .03em; color: var(--color-brand-deep); text-align: center; } .page-features .features-intro__catch { margin: 0 0 18px; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, .9rem + 2vw, 2.4rem); line-height: 1.5; letter-spacing: .01em; color: var(--color-brown-deep); text-align: center; } .page-features .features-intro__desc { max-width: 42em; margin: 0 auto; font-size: 15px; line-height: 1.65; letter-spacing: 0; color: var(--color-text); word-break: normal; } /* ---- 導入部下のページ内リンク（2項目） ---- 大きなカード2枚にせず、背景面の中の「案内の行」として細い罫線だけで区切る。PC2列／モバイル縦並び。 */ .page-features .features-jumps { list-style: none; margin: 26px auto 0; padding: 0; max-width: 760px; border-top: 1px solid var(--color-border); display: grid; grid-template-columns: 1fr 1fr; } .page-features .features-jumps > li { border-bottom: 1px solid var(--color-border); } .page-features .features-jumps > li + li { border-left: 1px solid var(--color-border); } .page-features .features-jump { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 62px; padding: 14px 16px; color: var(--color-brown-deep); text-decoration: none; } /* 小ラベル（費用について／過ごし方について）は中立のmuted色にし、制度名の主リンクの色だけで2つを見分けられるようにする */ .page-features .features-jump__label { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--color-text-muted); } .page-features .features-jump__text { font-family: var(--font-headbtn); font-weight: 900; font-size: 15px; line-height: 1.4; } .page-features .features-jump__text::after { content: "→"; margin-left: .4em; color: var(--color-brand-deep); } .page-features .features-jump:hover .features-jump__text { text-decoration: underline; } /* ---- 制度名リンクのブランド色分け ---- 通常サイズの文字は濃色（--*-text）、矢印は小さな装飾のためロゴ原色（--*-accent）を使用する。ロゴSVG本体は変更しない。 */ .page-features .features-jump--miokuri .features-jump__text { color: var(--miokuri-text); } .page-features .features-jump--miokuri .features-jump__text::after { color: var(--miokuri-accent); } .page-features .features-jump--fururi .features-jump__text { color: var(--fururi-text); } .page-features .features-jump--fururi .features-jump__text::after { color: var(--fururi-accent); } .page-features .features-jump:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; } @media (max-width: 640px) { .page-features .features-intro__eyebrow { font-size: 16px; } .page-features .features-intro__catch { margin-bottom: 14px; } .page-features .features-jumps { grid-template-columns: 1fr; margin-top: 22px; } .page-features .features-jumps > li + li { border-left: 0; } } /* ============================================================= 4. ブランド見出し（miokuri.svg / fururi.svg） ------------------------------------------------------------- H2としての見出し構造を保ったまま、視覚表現に支給SVGをそのまま外部参照で使用する。自然な縦横比を保つため height:auto とし、PC・モバイルとも最大幅のみを制限する。 SVGへの色変更（filter等）は行わない。 ============================================================= */ .page-features .features-brand-heading { margin: 0 0 16px; text-align: center; } .page-features .features-brand-heading img { display: block; width: min(100%, 380px); height: auto; margin-inline: auto; } @media (max-width: 640px) { .page-features .features-brand-heading { margin-bottom: 14px; } .page-features .features-brand-heading img { width: min(100%, 300px); } } /* ============================================================= 5. 各ブロック共通の本文まわり ============================================================= */ .page-features .features-catch { margin: 0 0 20px; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, .8rem + 2vw, 2.2rem); line-height: 1.55; letter-spacing: .01em; color: var(--color-brown-deep); text-align: center; } .page-features .features-body { max-width: 42em; margin: 0 auto; } .page-features .features-body p { margin: 0 0 1.1em; font-size: 15px; line-height: 1.65; letter-spacing: 0; color: var(--color-text); word-break: normal; } .page-features .features-body p:last-child { margin-bottom: 0; } /* ---- 補助ラベル「特徴1」「特徴2」（2026-09-20 / r11） ---- ロゴ（H2の視覚表現）の上に添える小さなラベル。ロゴより小さく、muted色。背景・枠・ピル型にはしない。 */ .page-features .features-label { display: block; margin: 0 0 6px; font-family: var(--font-headbtn); font-weight: 700; font-size: 13px; line-height: 1.4; letter-spacing: .08em; color: var(--color-text-muted); } /* ---- 情報グループの見出し（2026-09-20 / r11） ---- 「みおくり総額　3つの安心基準」「選べる3つの式場」など、直後のカード群・リストが何のまとまりかを示す見出し。セクションのH2（ロゴ）より小さく、カード内の見出しより大きい。 r10までの .features-catch--define（定義文用の一段小さいキャッチ）は、定義が本文側へ移ったため定義ごと削除した。 */ .page-features .features-group-ttl { margin: 34px 0 14px; font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.5; letter-spacing: .01em; color: var(--color-brown-deep); text-align: center; word-break: normal; text-wrap: balance; } .page-features .features-note { max-width: 42em; margin: 16px auto 0; font-size: 13.5px; line-height: 1.7; color: var(--color-text-muted); } /* ---- 含む／含まない費用の短い注記（2026-09-20 / r11） ---- 本文のすぐ下に置き、詳細は下の条件ブロックへつなげる。「極端に小さく薄くしない」方針のため、本文色・14pxとする。 */ .page-features .features-note--scope { margin-top: 4px; margin-bottom: 0; font-size: 14px; color: var(--color-text); text-align: center; text-wrap: balance; } @media (max-width: 640px) { .page-features .features-note--scope { text-align: left; } .page-features .features-group-ttl { margin: 28px 0 12px; font-size: 17px; } } @media (max-width: 640px) { .page-features .features-catch { margin-bottom: 16px; } .page-features .features-body p { font-size: 14.5px; } } /* ============================================================= 6. 「みおくり総額」の3つの要点 ------------------------------------------------------------- 巨大な外側カードの中へ同格カードを重ねず、背景面の上へ小型の情報単位を直接並べる。影は使わず、白面と細い罫線の差だけで区切る。番号→見出し→本文の3行構成はPC・モバイル共通とする。 ============================================================= */ .page-features .features-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); /* r04: 最長の見出し03（17文字）を1行に収めるため、§10の調整順に従い ①カード内側paddingを 18px→13px ②列間gapを 16px→12px と詰めてから、 ③見出しを 17px→16px（1pxだけ）調整している。実測（1024px）：列内幅約294px に対し必要幅約283px。 1440px・1100pxでも1行。901〜990px の狭い帯だけは3列の列内幅が不足するため、text-wrap: balance で均等な2行に折り返す。 */ gap: 12px; } .page-features .features-point { box-sizing: border-box; padding: 20px 13px; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-small); box-shadow: none; } .page-features .features-point__no { display: block; margin: 0 0 6px; font-family: var(--font-headbtn); font-weight: 900; font-size: 20px; line-height: 1; letter-spacing: .06em; color: var(--color-brand-deep); } /* 見出しは plan.html の3項目と完全に統一している（r04）。最長の03「葬儀社都合の自動的な追加費用を抑制」（17文字）が PCで不自然に1文字だけ折り返さないよう word-break: normal を明示し、カード内の内側paddingを多重に重ねない（.features-point の padding 20px/18px だけで、見出しに追加のpaddingは持たせない）。 */ .page-features .features-point__ttl { margin: 0 0 8px; font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: .01em; color: var(--color-brown-deep); word-break: normal; /* 901〜999px のように3列の列内幅が足りない帯では折り返しが避けられないが、1文字だけが次行へ落ちる不自然な改行にならないようにする（未対応ブラウザでは無視される） */ text-wrap: balance; } /* 本文（r04で詳細化）。01は意味段落を2つに分け、句点のあとで視覚的に改行する（2つ目の段落へ上マージンを付ける）。 */ .page-features .features-point__text { margin: 0; font-size: 15px; line-height: 1.65; letter-spacing: 0; color: var(--color-text); word-break: normal; } .page-features .features-point__text + .features-point__text { margin-top: .85em; } /* 901〜999px：3列に戻る直後の帯だけ列内幅が約247〜290pxまで落ち、最長の見出し03（17文字・16px＝約283px）が収まらない。 §10の調整順（内側padding → 列間gap → 見出しサイズ）で、この帯に限って詰め、1行を確保する。1000px以上は16pxのまま。 */ @media (min-width: 901px) and (max-width: 999px) { .page-features .features-points { gap: 10px; } .page-features .features-point { padding: 20px 11px; } .page-features .features-point__ttl { font-size: 15px; } } @media (max-width: 900px) { .page-features .features-points { grid-template-columns: 1fr; gap: 12px; } } @media (max-width: 640px) { .page-features .features-point { padding: 16px 16px 18px; } .page-features .features-point__ttl { font-size: 16px; } /* モバイルでも見出し・本文は十分な横幅で表示する。外側カードを追加せず、3枚の縦幅が不必要に長くならないよう行送りだけ詰める。 */ .page-features .features-point__text { font-size: 14.5px; line-height: 1.7; } } /* 320〜360px：カード内の実効幅が約256pxとなり、17文字×16px＝272px が収まらないため、この幅だけ見出しを14.5pxへ下げて1行を確保する */ @media (max-width: 360px) { .page-features .features-point { padding: 16px 13px 18px; } .page-features .features-point__ttl { font-size: 13.5px; } } /* ============================================================= 6b. 当館の具体的な条件（.features-terms）とそのグループ ------------------------------------------------------------- 2026-09-20（r05）追加。「総額」という言葉の説明で終わらせず、当館が実際に何をどこまで含めているかを確認できるようにするブロック。・全22プランの品目は再掲載しない。式場の種別・直葬で条件が異なる点（会葬御礼品の数量、施設利用、ドライアイス）だけを示す・記載内容はすべて plan.html の各プラン仕様および「全プラン共通の料金について」（#price-scope）に基づく。資料で確認できない条件を「無料」「無制限」「追加なし」と書かないこと・新しい大きなカードは作らず、白面＋細い罫線の定義リストとする（3つの柱のカードと同じ強さにせず、一段落ち着いた面にする）・769px以上では dt／dd を2列に組み、みおくり総額セクションだけが縦に伸びて「ふるりひとへや」が付録のように見えるのを防ぐ（実測：PCでこのブロックは約541px→約300pxへ圧縮）・他社の個別料金・計算式・資料条件は公開しない（05Gへ内部記録）。公開側に残す出典への言及は、比較説明に添える短い1行だけとする ============================================================= */ .page-features .features-terms { box-sizing: border-box; max-width: 52em; /* 直前の3つの安心基準と一続きに読ませるため、間隔は控えめにする */ margin: 26px auto 0; padding: 18px 20px 16px; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-small); box-shadow: none; } .page-features .features-terms__ttl { margin: 0 0 12px; font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.5; letter-spacing: .01em; color: var(--color-brown-deep); word-break: normal; } .page-features .features-terms__list { margin: 0; padding: 0; } .page-features .features-terms__list dt { margin: 0; padding-top: 10px; border-top: 1px solid var(--color-border); font-family: var(--font-headbtn); font-weight: 700; font-size: 13.5px; line-height: 1.5; letter-spacing: .02em; color: var(--miokuri-text); } .page-features .features-terms__list dd { margin: 4px 0 12px; padding: 0; /* 2026-09-20(r06)：価格を比較するための重要本文のため15pxへ */ font-size: 15px; line-height: 1.65; letter-spacing: 0; color: var(--color-text); word-break: normal; } .page-features .features-terms__list dd:last-of-type { margin-bottom: 0; } /* 769px以上：項目名と内容を2列に組む。行数が減り、項目名の位置が揃うことで「どの条件の話か」も追いやすくなる。 */ @media (min-width: 769px) { .page-features .features-terms__list { display: grid; grid-template-columns: 8em 1fr; column-gap: 20px; } .page-features .features-terms__list dt { grid-column: 1; margin-bottom: 10px; } .page-features .features-terms__list dd { grid-column: 2; margin: 0 0 10px; padding-top: 10px; border-top: 1px solid var(--color-border); } .page-features .features-terms__list dt:first-of-type, .page-features .features-terms__list dd:first-of-type { padding-top: 0; border-top: 0; } .page-features .features-terms__list dd:last-of-type { margin-bottom: 0; } } .page-features .features-terms__link { margin: 14px 0 0; } .page-features .features-terms__link a { font-family: var(--font-headbtn); font-weight: 900; font-size: 13.5px; line-height: 1.5; color: var(--miokuri-text); border-bottom: 2px solid var(--miokuri-accent); padding-bottom: 1px; } .page-features .features-terms__link a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } /* ---- 条件ブロック内のグループ（2026-09-20 / r11） ---- 「含まれる主な内容」「含まれない費用」「条件によって追加になるもの」を、 1枚の情報面の中で見出しごとに分ける。外側へさらにカードは追加しない。 r09〜r10の .features-compare（「税込10万円を超える」の独立比較説明）は、今回の採用原稿に含まれないため定義ごと削除した。 plan冒頭の比較説明と、その根拠（05Gの非公開記録）は維持している。 r08までの .features-source（出典のdetails）も復活させない。 */ .page-features .features-terms__group + .features-terms__group { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--color-border); } /* 項目名と短い説明を同じ行で示す簡易リスト（dt/ddにするほどの分量がない群） */ .page-features .features-terms__plain { list-style: none; margin: 0; padding: 0; } .page-features .features-terms__plain li { position: relative; margin: 0 0 8px; padding-left: 1.1em; font-size: 15px; line-height: 1.65; letter-spacing: 0; color: var(--color-text); word-break: normal; } .page-features .features-terms__plain li:last-child { margin-bottom: 0; } .page-features .features-terms__plain li::before { content: "・"; position: absolute; left: 0; color: var(--color-text-muted); } .page-features .features-terms__plain b { font-family: var(--font-headbtn); font-weight: 700; color: var(--miokuri-text); } @media (max-width: 640px) { .page-features .features-terms { margin-top: 24px; padding: 16px 16px 16px; } .page-features .features-terms__ttl { font-size: 16px; } /* 本文（dd）はモバイルでも縮小しない（r06）。15px のPC指定を継承 */ } /* ============================================================= 7. 「ふるりひとへや」— 中式場の2つの使い方（本文＋写真） ------------------------------------------------------------- PCは本文と写真の横並び、モバイルは本文→写真の縦並び。写真は支給画像の構図（斜めの境界）をそのまま表示するためトリミングせず、自然な縦横比で表示する。強い装飾枠・過大な影は付けない（細い罫線と小さな角丸のみ）。 ============================================================= */ .page-features .features-split { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; margin-top: 36px; } .page-features .features-split__figure { margin: 0; } .page-features .features-split__figure img { display: block; width: 100%; height: auto; border: 1px solid var(--color-border-soft); border-radius: var(--radius-small); } .page-features .features-split__figure figcaption { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--color-text-muted); } /* 写真のみを置く場合（説明文は上の本文が担うため1カラムにする）。 r10までの .features-split__body / __ttl / __text は、新しい本文と内容が重複するためHTML・CSSとも廃止した。写真とキャプションは維持。 */ .page-features .features-split--figure-only { grid-template-columns: 1fr; } @media (max-width: 860px) { .page-features .features-split { grid-template-columns: 1fr; gap: 18px; margin-top: 30px; } } /* ============================================================= 8. 「ふるりひとへや」— 3つの式場 ------------------------------------------------------------- 写真・人数目安・短い特徴を持つ独立した情報単位のため、小型カードとして扱う。影は付けず、白面＋細い罫線のみ。モバイルは1列。写真は16/9へ抑え、不要に縦長にしない。 ============================================================= */ .page-features .features-halls { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .page-features .features-hall { display: flex; flex-direction: column; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-medium); box-shadow: none; } .page-features .features-hall__figure { margin: 0; } .page-features .features-hall__figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } /* 正方形の元画像から、各室の主要部分が切れないよう表示位置を調整（about.htmlのモバイル指定と同じ考え方。実機での目視確認は未実施） */ .page-features .features-hall:nth-child(1) img { object-position: center 62%; } .page-features .features-hall:nth-child(2) img { object-position: center 40%; } .page-features .features-hall:nth-child(3) img { object-position: center 42%; } .page-features .features-hall__body { padding: 16px 16px 18px; } .page-features .features-hall__ttl { margin: 0 0 4px; font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: 1.4; letter-spacing: .01em; color: var(--color-brown-deep); } .page-features .features-hall__cap { margin: 0 0 8px; font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: 0; color: var(--color-brand-deep); } .page-features .features-hall__text { margin: 0; font-size: 14.5px; line-height: 1.7; letter-spacing: 0; color: var(--color-text); word-break: normal; } @media (max-width: 900px) { .page-features .features-halls { grid-template-columns: 1fr; gap: 14px; } .page-features .features-hall__figure img { aspect-ratio: 16 / 9; } } @media (max-width: 640px) { .page-features .features-hall__body { padding: 14px 14px 16px; } } /* ============================================================= 9. 「ふるりひとへや」— 3つの要点 ------------------------------------------------------------- 式場カードと情報の粒度が違うため、カード化せず、 1本の細い罫線で区切った短い項目として並べる。 ============================================================= */ .page-features .features-merits { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--color-border); display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 26px; } .page-features .features-merit__ttl { margin: 0 0 6px; font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: .01em; color: var(--color-brown-deep); } .page-features .features-merit__text { margin: 0; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--color-text); word-break: normal; } @media (max-width: 900px) { .page-features .features-merits { grid-template-columns: 1fr; gap: 0; } .page-features .features-merit + .features-merit { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); } } @media (max-width: 640px) { .page-features .features-merits { padding-top: 18px; } } /* ============================================================= 10. CTA ------------------------------------------------------------- 形はすべてピル型に統一する（下線付きテキストリンクは使わない）。・主要　：--brown（ブラウン塗り。各制度セクションの左CTA）・補助　：--miokuri-outline ／ --fururi-outline （白地＋ブランド原色の細枠・同系濃色の文字。形・寸法は完全に共通で、違いは色だけ）・併記　：--brand（藤色塗り）。2026-08-26(r03)以降、これを使うのは最終セクション「費用だけでも、部屋だけでもなく。」だけ。同セクションのCTAは二つの制度をまとめたサイト全体の導線であり、特定のブランド固有色には寄せない。影・グラデーションは使用しない。十分なタップ領域を確保する。 ============================================================= */ .page-features .features-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 34px; } /* セクション末尾CTAの中央揃え。 2026-08-26(r02): 「みおくり総額」「ふるりひとへや」「費用だけでも、部屋だけでもなく。」の3セクションすべてでこの modifier を使用する（PCは中央配置＋一定のボタン間隔、モバイルは従来どおり縦並び・横幅いっぱい。中央揃えを理由にボタン幅は狭めない）。 */ .page-features .features-cta--center { justify-content: center; } .page-features .features-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 13px 26px; border-radius: var(--radius-pill); font-family: var(--font-headbtn); font-weight: 900; font-size: 15px; line-height: 1.4; color: var(--color-text-light); text-decoration: none; box-shadow: none; transition: opacity var(--dur) var(--ease-out); } .page-features .features-btn:hover { opacity: .88; } .page-features .features-btn--brown { background: var(--color-brown-deep); } .page-features .features-btn--brand { background: var(--color-cta-secondary); } .page-features .features-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } /* ---- 各制度セクションの補助CTA（アウトライン） ---- 2026-08-26(r02) みおくり総額セクションへ追加。 2026-08-26(r03) ふるりひとへやセクションの右CTAを藤色の塗りピルから同型のオレンジアウトラインへ変更し、左右CTAの情報階層をみおくり側と対称にした。主要CTA（--brown の塗りピル）より一段弱い、同じピル型のアウトラインボタン。白背景・ブランド原色の細い枠・同系濃色の文字とし、影は付けない。形をピル型に揃えることで、2つのCTAの「同じ種類の導線・強さが違う」関係が形状からも読めるようにする。 ★形・寸法は下の共通ルール1つで持つ。 font-size / font-weight / padding / min-height / border-width / hoverの動き / box-shadowの有無はすべて共通で、 .page-features .features-btn（塗りボタン）とも外形高さが揃う。ブランドごとに変えるのは色（文字・枠線・hover背景）だけ。旧 .features-textlink（下線付きテキストリンク）は features.html から無くなったため、r02で定義ごと削除している。 */ .page-features .features-btn--miokuri-outline, .page-features .features-btn--fururi-outline { background: var(--color-surface); /* 塗りボタンと同じ外形高さに揃える（border 1px 分を padding から差し引く） */ padding: 12px 25px; font-size: 14.5px; border-width: 1px; border-style: solid; } .page-features .features-btn--miokuri-outline:hover, .page-features .features-btn--fururi-outline:hover { opacity: 1; } /* みおくり総額：緑 */ .page-features .features-btn--miokuri-outline { color: var(--miokuri-text); border-color: var(--miokuri-accent); } .page-features .features-btn--miokuri-outline:hover { background: rgb(31 169 57 / 6%); } /* ふるりひとへや：オレンジ。 hover背景は、文字（--fururi-text #A64018）のコントラストを保てるよう、ごく淡い6%のティントに留める（hover時の背景は概ね #FBF0EC 相当で、コントラストは約6.0:1）。 */ .page-features .features-btn--fururi-outline { color: var(--fururi-text); border-color: var(--fururi-accent); } .page-features .features-btn--fururi-outline:hover { background: rgb(225 89 39 / 6%); } @media (max-width: 640px) { .page-features .features-cta { margin-top: 28px; gap: 12px 14px; } .page-features .features-btn { width: 100%; padding-inline: 18px; } } /* ============================================================= 11. 二つを組み合わせる意味 ------------------------------------------------------------- 2つのブランドマークは、上部のH2見出しの繰り返しであり情報としては本文が担うため、装飾として扱う（空alt＋ aria-hidden）。ページを圧迫しないよう小さめに配置する。 ============================================================= */ .page-features .features-together__ttl { margin: 0 0 20px; font-family: var(--font-display); font-weight: 500; font-size: clamp(2.0rem, 1.0rem + 2vw, 2.6rem); line-height: 1.5; letter-spacing: .02em; color: var(--color-brown-deep); text-align: center; } .page-features .features-together__lockup { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin: 0 0 24px; } .page-features .features-together__mark { display: block; width: min(38%, 230px); height: auto; } .page-features .features-together__x { font-family: var(--font-headbtn); font-weight: 900; font-size: 20px; line-height: 1; color: var(--color-greige); } .page-features .features-body--center p { text-align: left; } /* ---- 最終セクションの短い電話案内（2026-09-20 / r11） ---- 共通プリフッターCTA（.ph-footer-cta）と重複する大型バナーは作らない。 1行の案内＋既存と同じ tel リンクとし、過大な数字にはしない。 */ .page-features .features-together__contact { margin: 26px 0 0; text-align: center; } .page-features .features-together__contact-lead { display: block; margin-bottom: 4px; font-family: var(--font-headbtn); font-weight: 700; font-size: 13.5px; line-height: 1.5; letter-spacing: .02em; color: var(--color-text-muted); } .page-features .features-together__tel { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.3; letter-spacing: .02em; color: var(--color-brown-deep); } .page-features .features-together__tel:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } .page-features .features-together__note { margin: 8px 0 0; font-size: 13.5px; line-height: 1.65; letter-spacing: 0; color: var(--color-text-muted); text-align: center; word-break: normal; } @media (max-width: 640px) { .page-features .features-together__contact { margin-top: 22px; } .page-features .features-together__tel { font-size: 24px; } } @media (max-width: 640px) { .page-features .features-together__ttl { margin-bottom: 16px; } .page-features .features-together__lockup { gap: 8px; margin-bottom: 20px; } .page-features .features-together__mark { width: min(44%, 170px); } } /* ============================================================= 11b. モバイルのみ「上へ」ボタンを非表示（featuresページ限定） ------------------------------------------------------------- 2026-09-20(r06) 追加。375px の実機幅検証で、.ph-backtotop が「会葬御礼品・礼状」など条件ブロックの本文へ重なることを確認した。 contact / first / about と同じ扱いに揃え、640px以下でのみ隠す。共通CSS（.ph-backtotop 本体）と app-core.js は変更していない。 PCの表示は従来どおり維持する。 ============================================================= */ @media (max-width: 640px) { .page-features .ph-backtotop, .page-features .ph-backtotop.is-visible { display: none; } } /* ============================================================= 12. リンクのフォーカス表示（共通の打ち消しはしない） ============================================================= */ .page-features .features-hall a:focus-visible, .page-features .features-split a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }