@charset "UTF-8";
/* ==========================================================================
さくら葬祭 / 斎場別ランディングページ 共通スタイル
saijyo-lp.css
--------------------------------------------------------------------------
・浦和斎場ページをモデルケースとして設計した、斎場別LPの共通コンポーネント集。
・他斎場（ひかり会館 / 思い出の里会館 / つつじ苑 …）へは本CSSをそのまま流用し、
HTML側のテキスト・画像・数値のみ差し替えて使用する想定。
--------------------------------------------------------------------------
デザインの下敷き： https://rct.tobila.com/
・左端に連番レール＋縦ヘアライン
・セクション見出しの前に小さな英字ラベル
・1pxヘアラインで区切る、角丸・影を使わないフラットな面
・大きく太い日本語見出し ＋ 右側に小さめのリード文（2カラム）
・左寄せ・フルブリード基調のレイアウト
配色のみ、さくら葬祭の白＋ピンク（#e40077）を維持しています。
========================================================================== */
/* --------------------------------------------------------------------------
01. デザイントークン
-------------------------------------------------------------------------- */
:root {
/* ブランドカラー（本サイト https://sakurasousai.jp/ の #e40077 を基準） */
--sj-brand: #e40077;
--sj-brand-dark: #b30060;
--sj-brand-deep: #7d0042;
--sj-brand-tint: #fdf2f7;
--sj-brand-tint-2: #f9e3ee;
/* ニュートラル（参照サイトの #0f1524 / #e5e7eb を、ピンクに寄せた色味で） */
--sj-ink: #464646; /* 基本の文字色（真っ黒は使わない） */
--sj-ink-2: #5b535e;
--sj-ink-3: #8e858f;
--sj-line: #e4e1e6; /* ヘアライン */
--sj-line-2: #efedf1;
--sj-bg: #ffffff;
--sj-surface: #f7f6f8; /* 極薄グレー面 */
--sj-surface-2:#faf9fb;
/* 補助色（事実情報・注記など、CTAと混同させない用途に限定） */
--sj-info: #35566e;
--sj-info-tint: #f1f5f8;
--sj-note: #8a6d1f;
--sj-note-tint: #fdf8e9;
/* タイポグラフィ（3書体で構成）
Noto Sans JP … 本文・UI・カード見出し
Noto Serif JP … 大見出し（H1 / H2 / H3 / 最終CTA）
Inter … 英字ラベル・連番・金額・電話番号など、ラテン文字と数字
いずれも読み込みに失敗した場合は端末内蔵フォントにフォールバックする */
--sj-font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
"Helvetica Neue", "Hiragino Kaku Gothic ProN",
"游ゴシック Medium", YuGothic, YuGothicM, Meiryo, sans-serif;
--sj-font-serif: "Noto Serif JP", "Hiragino Mincho ProN",
"ヒラギノ明朝 ProN W3", "游明朝", YuMincho, serif;
--sj-font-en: "Inter", -apple-system, BlinkMacSystemFont,
"Helvetica Neue", Arial, sans-serif;
/* 見出し・本文スケール
SP（375px）の最小値は見やすさ優先で据え置き、PC（1440px）側を引き上げている。
可変部は「Xvw + Yrem」で375→1440pxを直線で結ぶ形にそろえた
（vwのみだと1440px付近で最小値に張り付いてしまうため） */
--sj-fs-display: clamp(2rem, 3.756vw + 1.119rem, 4.5rem); /* FV見出し 32→72px */
--sj-fs-h2: clamp(1.5625rem, 2.16vw + 1.056rem, 3rem); /* セクション見出し 25→48px */
--sj-fs-h2-sm: clamp(1.4rem, 1.277vw + 1.1rem, 2.25rem); /* 従属的な見出し 22→36px */
--sj-fs-h3: clamp(1.125rem, .714vw + .958rem, 1.6rem); /* 18→26px */
--sj-fs-lead: clamp(.875rem, .263vw + .813rem, 1.05rem); /* 本文パラグラフ 14→16.8px */
--sj-fs-body: clamp(.844rem, .188vw + .8rem, .969rem); /* カード内の本文 13.5→15.5px */
--sj-fs-sm: clamp(.78rem, .178vw + .74rem, .9rem); /* 注記・出典 12.5→14px */
--sj-fs-label: clamp(11px, .85vw, 12.5px); /* 英字ラベル */
/* レイアウト
セクションは画面幅いっぱい。左右の余白は画面幅に対する割合で取る */
--sj-gutter: 5%; /* コンテンツの左右余白 */
--sj-gutter-section: 10%; /* 本文セクションの左右余白（ヘッダー・FV・フッターは --sj-gutter のまま） */
/* 角丸・影は使わない（フラットな面とヘアラインで構成する） */
--sj-radius: 0px;
/* 上下余白（セクションごとに大小をつけてスクロールのリズムを作る） */
--sj-section-y: clamp(64px, 10vw, 176px);
--sj-section-y-lg: clamp(80px, 11.5vw, 216px);
--sj-section-y-sm: clamp(48px, 6.6vw, 120px);
/* 追従ヘッダーの高さ（ページ内アンカーの着地位置補正に使用）
グローバルナビをドロワーに収めたため、全幅で1段 */
--sj-header-h: 98px;
/* 画面下部に固定するCTAバーの高さ（body の下余白と共有する） */
--sj-cta-h: 96px;
}
@media (max-width: 767px) {
:root { --sj-header-h: 86px; }
}
@media (max-width: 899px) {
:root { --sj-cta-h: 68px; }
}
/* --------------------------------------------------------------------------
02. ベース
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* 追従ヘッダーに見出しが隠れないようにする */
scroll-padding-top: calc(var(--sj-header-h) + 12px);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
margin: 0;
font-family: var(--sj-font-sans);
font-size: 15px;
font-weight: 400;
line-height: 1.9;
color: var(--sj-ink);
background: var(--sj-bg);
-webkit-font-smoothing: antialiased;
font-feature-settings: "palt" 1;
text-rendering: optimizeLegibility;
overflow-wrap: break-word;
/* 画面下部の固定CTAに隠れないよう、ページ全体の下に余白を確保する
（+1px はバー上辺の罫線ぶん） */
padding-bottom: calc(var(--sj-cta-h) + 1px);
}
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: var(--sj-brand-dark); }
a:hover { color: var(--sj-brand); }
h1, h2, h3, h4 { margin: 0; line-height: 1.6; font-weight: 700; }
button { color: inherit; } /* ブラウザ既定の黒（#000）を使わない */
p { margin: 0 0 1.4em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.4em; padding-left: 1.4em; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--sj-brand); outline-offset: 2px; }
.sj-visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip: rect(0 0 0 0); clip-path: inset(50%);
overflow: hidden; white-space: nowrap;
}
/* セクションの内容領域。幅は常に100%、左右の余白は10%で統一する。
（幅の出し分けは行わないため --narrow / --wide の修飾は用意していない。
文章の行長を抑えたい箇所は .sj-faq のように個別に max-width を指定する） */
.sj-container {
width: 100%;
max-width: none;
margin-inline: 0;
padding-inline: var(--sj-gutter);
}
/* 本文セクション（02以降〜最終CTA・関連リンク）は左右10%。
ヘッダー・パンくず・FV・固定CTA・フッターは対象外 */
.sj-section > .sj-container,
.sj-finalcta > .sj-container { padding-inline: var(--sj-gutter-section); }
/* スマホでは10%だと本文幅が狭くなりすぎるため、共通の5%に戻す */
@media (max-width: 767px) {
.sj-section > .sj-container,
.sj-finalcta > .sj-container { padding-inline: var(--sj-gutter); }
}
/* --------------------------------------------------------------------------
03. セクション（左端の連番レール ＋ ヘアライン）
-------------------------------------------------------------------------- */
/* セクションは上辺のヘアラインだけで区切る
（各セクションの data-num 属性は残してあるので、連番表示を復活させたい場合は
ここで ::before { content: attr(data-num) } を書けばよい） */
.sj-section {
padding-block: var(--sj-section-y);
border-top: 1px solid var(--sj-line);
}
.sj-section--lg { padding-block: var(--sj-section-y-lg); }
/* 上の罫線を消す（FV直下のセクションなど） */
.sj-section--noline { border-top: 0; }
/* 前後のセクションとの間隔を詰める（「浦和斎場とは」→「基本情報」で約100px） */
.sj-section--flush-bottom { padding-bottom: 0; }
.sj-section--tight-top { padding-top: clamp(40px, 5.3vw, 76px); } /* 見出しの上マージンと合わせて約100px */
.sj-section--sm { padding-block: var(--sj-section-y-sm); }
.sj-section--tint { background-color: var(--sj-surface); }
.sj-section--warm { background-color: var(--sj-surface-2); }
.sj-section--brand { background-color: var(--sj-brand-tint); }
/* --------------------------------------------------------------------------
04. セクション見出し
参照サイトにならい、見出しは左寄せで大きく、リード文は右側に小さく置く
-------------------------------------------------------------------------- */
.sj-section-head { margin-bottom: clamp(36px, 5.5vw, 100px); }
/* リード文があるときは 見出し左 / リード右 の2カラムにする */
@media (min-width: 1024px) {
.sj-section-head:has(.sj-lead) {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 23em);
column-gap: clamp(40px, 5.9vw, 133.12px);
align-items: end;
}
.sj-section-head:has(.sj-lead) .sj-eyebrow { grid-column: 1; grid-row: 1; }
.sj-section-head:has(.sj-lead) .sj-h2,
.sj-section-head:has(.sj-lead) .sj-h3 { grid-column: 1; grid-row: 2; }
.sj-section-head:has(.sj-lead) .sj-lead {
grid-column: 2; grid-row: 1 / span 2;
align-self: end;
margin-top: 0;
padding-bottom: .6em;
}
}
/* リード文を見出しの下に置く版（2カラムにしない・1行で流す） */
.sj-section-head.sj-section-head--stack { display: block; }
.sj-section-head.sj-section-head--stack .sj-lead { max-width: none; margin-top: clamp(32px, 3.6vw, 50px); padding-bottom: 0; } /* PCで約50px */
/* 見出し（とリード）を中央寄せにする版。下線のピンクも中央に置く */
.sj-section-head.sj-section-head--center { text-align: center; }
.sj-section-head--center .sj-h2 { margin-inline: auto; padding-inline: .7em; }
.sj-section-head--center .sj-h2::after { left: 50%; transform: translateX(-50%); }
.sj-section-head--center .sj-lead { margin-inline: auto; }
/* 英字ラベル（参照サイトのコードタグ風ラベルの位置・サイズを踏襲） */
.sj-eyebrow {
display: inline-block;
padding: 5px 11px;
background: var(--sj-surface);
font-family: var(--sj-font-en);
font-size: var(--sj-fs-label);
font-weight: 700;
line-height: 1;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--sj-brand);
}
.sj-section--tint .sj-eyebrow,
.sj-section--warm .sj-eyebrow { background: #fff; }
.sj-h2 {
position: relative;
width: fit-content;
max-width: 100%;
margin-top: clamp(1rem, 1.89vw, 2.18rem);
/* 下線：文字幅より少し長いグレーの線＋左端にピンクの短い線 */
padding: 0 1.4em .3em 0;
border-bottom: 1px solid var(--sj-line);
font-family: var(--sj-font-serif);
font-size: var(--sj-fs-h2);
font-weight: 500;
line-height: 1.55;
letter-spacing: .03em;
}
.sj-h2::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: min(3em, 34%);
height: 2px;
background: var(--sj-brand);
}
.sj-h2--sm { font-size: var(--sj-fs-h2-sm); }
.sj-h2 em { font-style: normal; color: var(--sj-brand); }
.sj-h3 {
font-family: var(--sj-font-serif);
font-size: var(--sj-fs-h3);
font-weight: 600;
line-height: 1.6;
letter-spacing: .03em;
}
.sj-lead {
margin-top: clamp(1rem, 1.89vw, 2.18rem);
max-width: 34em;
font-size: var(--sj-fs-lead);
line-height: 2;
color: var(--sj-ink-2);
}
/* 注記・出典表示 */
.sj-note {
margin-top: 24px;
padding: 16px 20px;
border: 1px solid var(--sj-note);
border-left-width: 3px;
background: var(--sj-note-tint);
font-size: var(--sj-fs-sm);
line-height: 1.85;
color: #6b551a;
}
.sj-note strong { color: #5a4715; }
.sj-note p { margin-bottom: .6em; }
.sj-source {
margin-top: 18px;
font-size: var(--sj-fs-sm);
line-height: 1.85;
color: var(--sj-ink-3);
}
.sj-source--xs { font-size: clamp(.75rem, .094vw + .715rem, .8125rem); } /* 12→13px。料金表まわりの長い注記用 */
/* --------------------------------------------------------------------------
05. ボタン
面はフラット。主要CTAのみピル型（参照サイトのヘッダーCTAに準拠）
-------------------------------------------------------------------------- */
.sj-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: clamp(56px, 1.5vw + 50px, 66px);
padding: 12px clamp(28px, 1.3vw + 23px, 36px);
border: 1px solid transparent;
border-radius: 999px;
font-family: var(--sj-font-sans);
font-size: clamp(.875rem, .263vw + .813rem, 1rem);
font-weight: 700;
letter-spacing: .08em;
line-height: 1.5;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color .2s, color .2s, border-color .2s;
}
.sj-btn::after {
content: "";
flex: none;
width: 15px; height: 7px;
background: currentColor;
clip-path: polygon(0 40%, 68% 40%, 68% 0, 100% 50%, 68% 100%, 68% 60%, 0 60%);
transition: transform .2s;
}
.sj-btn:hover::after { transform: translateX(3px); }
.sj-btn--primary {
background: var(--sj-brand);
border-color: var(--sj-brand);
color: #fff;
}
.sj-btn--primary:hover { background: var(--sj-brand-dark); border-color: var(--sj-brand-dark); color: #fff; }
.sj-btn--tel,
.sj-btn--ghost {
background: transparent;
border-color: var(--sj-brand);
color: var(--sj-brand-dark);
}
.sj-btn--tel:hover,
.sj-btn--ghost:hover { background: var(--sj-brand); border-color: var(--sj-brand); color: #fff; }
.sj-btn--light {
background: #fff;
border-color: #fff;
color: var(--sj-brand-dark);
}
.sj-btn--light:hover { background: var(--sj-brand-tint); color: var(--sj-brand-deep); }
.sj-btn--sm { min-height: 48px; padding: 8px 22px; font-size: clamp(.8rem, .188vw + .73rem, .9rem); }
.sj-btn--lg { min-height: 72px; padding-inline: 38px; font-size: clamp(.95rem, .282vw + .879rem, 1.1rem); }
.sj-btn--block { width: 100%; }
.sj-btn--r6 { border-radius: 6px; } /* 角丸6pxのボタン */
/* カード内の従属ボタンは角のあるフラットな面にする */
.sj-btn--flat { border-radius: 0; border-color: var(--sj-line); color: var(--sj-ink); }
.sj-btn--flat:hover { border-color: var(--sj-brand); background: var(--sj-brand); color: #fff; }
/* プランカードのボタン（白地・角丸6px。全カード共通） */
.sj-btn--plan {
border-radius: 6px;
border-color: var(--sj-line);
background: #fff;
color: var(--sj-ink);
}
.sj-btn--plan:hover { border-color: var(--sj-brand); background: #fff; color: var(--sj-brand); }
/* テキストリンク（→付き） */
.sj-textlink {
display: inline-flex;
align-items: center;
gap: 10px;
padding-bottom: 5px;
border-bottom: 1px solid var(--sj-brand);
font-size: .9rem;
font-weight: 700;
letter-spacing: .04em;
text-decoration: none;
color: var(--sj-brand-dark);
}
.sj-textlink::after {
content: "";
width: 16px; height: 7px;
background: currentColor;
clip-path: polygon(0 40%, 68% 40%, 68% 0, 100% 50%, 68% 100%, 68% 60%, 0 60%);
transition: transform .2s;
}
.sj-textlink:hover::after { transform: translateX(3px); }
/* 大きめのテキストリンク。矢印を丸囲みにして目立たせる */
.sj-textlink--lg {
gap: 14px;
padding-bottom: 8px;
font-size: clamp(1rem, .28vw + .93rem, 1.2rem); /* 16→19px */
}
.sj-textlink--lg::after { content: none; }
.sj-textlink__arrow {
flex: none;
display: grid;
place-items: center;
width: 36px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--sj-brand);
transition: transform .2s, background-color .2s;
}
.sj-textlink__arrow::before {
content: "";
width: 14px; height: 7px;
background: #fff;
clip-path: polygon(0 40%, 68% 40%, 68% 0, 100% 50%, 68% 100%, 68% 60%, 0 60%);
}
.sj-textlink--lg:hover .sj-textlink__arrow { transform: translateX(3px); background: var(--sj-brand-dark); }
/* --------------------------------------------------------------------------
06. ヘッダー
-------------------------------------------------------------------------- */
.sj-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, .97);
backdrop-filter: saturate(150%) blur(6px);
}
.sj-header__inner {
display: flex;
align-items: center;
gap: 20px;
min-height: 98px;
padding-block: 24px;
max-width: none;
}
.sj-header__logo { flex: none; line-height: 0; }
.sj-header__logo img { width: 260px; }
/* サイト説明文は現在非表示（再表示する場合は display の行を削除する） */
.sj-header__site-desc {
display: none;
flex: 1 1 auto;
min-width: 0;
margin: 0;
font-size: 13px;
font-weight: 400;
line-height: 1.75;
color: var(--sj-ink-3);
}
/* ハンバーガーは常に右端に置く */
.sj-header__actions {
flex: none;
display: flex;
align-items: center;
gap: 14px;
margin-left: auto;
}
/* 電話番号・お問い合わせボタンは現在非表示
（再表示する場合はこの2行を削除する。問い合わせ導線はSP固定CTAと各セクションのCTAが担う） */
.sj-header__tel { display: none; }
.sj-header__actions .sj-btn { display: none; }
.sj-header__tel-label {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
color: var(--sj-brand);
}
.sj-header__tel-num {
display: block;
font-family: var(--sj-font-en);
font-size: 25px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .01em;
color: var(--sj-ink);
}
/* --- ハンバーガーボタン（全幅で表示） --- */
.sj-navtoggle {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
/* 枠線は出さないが、タップしやすいよう当たり判定は46px角を確保する */
width: 46px; height: 46px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.sj-navtoggle span {
display: block;
width: 24px; height: 1.5px;
background: var(--sj-ink);
transition: transform .2s, opacity .2s, background-color .2s;
}
.sj-navtoggle:hover span { background: var(--sj-brand); }
.sj-navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.sj-navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sj-navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* --- ドロワーメニュー（右からスライドするパネル＋背景の暗幕） --- */
.sj-drawer {
position: fixed;
inset: 0;
z-index: 200;
visibility: hidden;
transition: visibility 0s linear .45s; /* 閉じるアニメーションが終わってから隠す */
}
.sj-drawer.is-open { visibility: visible; transition-delay: 0s; }
html.is-nav-open { overflow: hidden; } /* 開いている間は背面をスクロールさせない */
.sj-drawer__overlay {
position: absolute;
inset: 0;
background: rgba(23, 20, 26, .45);
opacity: 0;
cursor: pointer;
transition: opacity .45s ease;
}
.sj-drawer.is-open .sj-drawer__overlay { opacity: 1; }
.sj-gnav {
position: absolute;
top: 0; right: 0; bottom: 0;
display: flex;
flex-direction: column;
width: min(440px, 88vw);
overflow-y: auto;
overscroll-behavior: contain;
padding: 0 clamp(24px, 3vw, 44px) clamp(28px, 3vw, 40px);
background: #fff;
box-shadow: -12px 0 40px rgba(23, 20, 26, .12);
/* スクロールバーは細く・薄く */
scrollbar-width: thin;
scrollbar-color: rgba(23, 20, 26, .14) transparent;
transform: translateX(100%);
transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
/* 上辺にブランドカラーの細い帯 */
.sj-gnav::before {
content: "";
position: sticky;
top: 0;
display: block;
flex: none;
height: 4px;
margin-inline: calc(clamp(24px, 3vw, 44px) * -1);
background: linear-gradient(90deg, var(--sj-brand), #f06aa8);
}
.sj-drawer.is-open .sj-gnav { transform: none; }
/* Safari など scrollbar-width 非対応のブラウザ向け */
.sj-gnav::-webkit-scrollbar { width: 4px; }
.sj-gnav::-webkit-scrollbar-track { background: transparent; }
.sj-gnav::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(23, 20, 26, .14); }
.sj-gnav__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 0 26px;
}
.sj-gnav__logo { width: 170px; }
/* 閉じるボタン（×） */
.sj-gnav__close {
position: relative;
flex: none;
width: 44px; height: 44px;
padding: 0;
border: 1px solid var(--sj-line);
border-radius: 50%;
background: #fff;
cursor: pointer;
transition: border-color .2s, background-color .2s;
}
.sj-gnav__close::before,
.sj-gnav__close::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 16px; height: 1.5px;
background: var(--sj-ink);
transition: background-color .2s;
}
.sj-gnav__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.sj-gnav__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.sj-gnav__close:hover { border-color: var(--sj-brand); background: var(--sj-brand); }
.sj-gnav__close:hover::before,
.sj-gnav__close:hover::after { background: #fff; }
.sj-gnav__list {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--sj-line);
}
.sj-gnav__list li {
border-bottom: 1px solid var(--sj-line);
opacity: 0;
transform: translateX(16px);
transition: opacity .35s ease, transform .35s ease;
}
/* 開いたとき、上から順にふわっと出す */
.sj-drawer.is-open .sj-gnav__list li {
opacity: 1;
transform: none;
transition-delay: calc(.12s + var(--i, 0) * .04s);
}
.sj-gnav__list a {
position: relative;
display: flex;
align-items: baseline;
gap: 16px;
padding: 17px 32px 17px 2px;
text-decoration: none;
color: var(--sj-ink);
transition: color .2s, padding-left .25s;
}
.sj-gnav__num {
flex: none;
font-family: var(--sj-font-en);
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
color: var(--sj-brand);
}
.sj-gnav__label {
font-family: var(--sj-font-serif);
font-size: 17px;
font-weight: 500;
letter-spacing: .06em;
}
/* 右端の小さな矢印 */
.sj-gnav__list a::after {
content: "";
position: absolute;
right: 6px; top: 50%;
width: 7px; height: 7px;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
color: var(--sj-ink-3);
transform: translateY(-50%) rotate(45deg);
transition: right .25s, color .2s;
}
.sj-gnav__list a:hover { color: var(--sj-brand); padding-left: 8px; }
.sj-gnav__list a:hover::after { right: 2px; color: var(--sj-brand); }
/* 下部の電話・お見積り */
.sj-gnav__contact {
margin-top: auto;
padding-top: 28px;
text-align: center;
}
.sj-gnav__tel {
display: block;
margin-bottom: 14px;
padding: 16px;
border: 1px solid var(--sj-line);
border-radius: 6px;
background: #fff;
text-decoration: none;
color: var(--sj-ink);
}
.sj-gnav__tel-label {
display: block;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .1em;
color: var(--sj-brand);
}
.sj-gnav__tel-num {
display: block;
margin-top: 2px;
font-family: var(--sj-font-en);
font-size: 28px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .02em;
}
@media (max-width: 767px) {
.sj-header__inner { min-height: 86px; padding-block: 20px; }
}
@media (max-width: 480px) {
.sj-header__logo img { width: 205px; }
}
/* --------------------------------------------------------------------------
07. パンくず
-------------------------------------------------------------------------- */
/* パンくずは現在非表示。BreadcrumbList の構造化データは残すため、
マークアップは削除せず CSS で隠している（再表示するときは display を戻す） */
.sj-breadcrumb { display: none; border-bottom: 1px solid var(--sj-line); }
.sj-breadcrumb ol {
display: flex;
flex-wrap: wrap;
gap: 0 8px;
margin: 0;
padding-block: 12px;
list-style: none;
max-width: none;
font-family: var(--sj-font-en);
font-size: 11px;
letter-spacing: .06em;
color: var(--sj-ink-3);
}
.sj-breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--sj-line); }
.sj-breadcrumb a { color: var(--sj-ink-2); text-decoration: none; }
.sj-breadcrumb a:hover { color: var(--sj-brand); }
/* --------------------------------------------------------------------------
08. ファーストビュー
参照サイトにならい、白地に大きな見出しを置き、写真は直下の帯で見せる
-------------------------------------------------------------------------- */
.sj-hero {
padding-block: clamp(10px, 1.3vw, 24px) clamp(40px, 5.9vw, 112.64px);
background: #fff;
}
/* 左：コピー ／ 右：キービジュアル。画像側を少し広く取る */
.sj-hero__inner {
display: grid;
grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
gap: clamp(32px, 5.31vw, 102.4px);
align-items: center;
}
.sj-hero__figure { margin: 0; }
.sj-hero__figure img {
width: 100%;
aspect-ratio: 5 / 4.25;
object-fit: cover;
}
.sj-hero__body { min-width: 0; }
/* 現在 FV では未使用。必要になったら を戻せば使える */
.sj-hero__eyebrow {
display: inline-block;
padding: 5px 11px;
background: var(--sj-surface);
font-family: var(--sj-font-en);
font-size: var(--sj-fs-label);
font-weight: 700;
line-height: 1;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--sj-brand);
}
.sj-hero__title {
margin-top: clamp(1.1rem, 2.12vw, 2.43rem);
font-family: var(--sj-font-serif);
font-size: var(--sj-fs-display);
font-weight: 500;
line-height: 1.28;
letter-spacing: .03em;
color: var(--sj-ink);
}
.sj-hero__title-s { font-size: .68em; }
/* 3行目「お考えの方へ」は独立ブロック。2行目との間を少しあけて下げている */
.sj-hero__title-s--block {
display: block;
line-height: 1.2;
margin-top: .15em;
}
.sj-hero__title small {
display: block;
font-family: var(--sj-font-sans);
margin-bottom: .9em;
font-size: .34em;
font-weight: 700;
letter-spacing: .1em;
line-height: 1.6;
color: var(--sj-brand);
}
/* FVの導入文は現在非表示（再表示する場合は display の行を削除する） */
.sj-hero__text {
display: none;
margin-top: clamp(1.4rem, 2.36vw, 2.82rem);
max-width: none; /* カラム幅いっぱいに流す */
font-size: var(--sj-fs-lead);
line-height: 2.05;
color: var(--sj-ink-2);
}
/* 特徴ブロック（2×2）。背景なし・グレーの罫線・角丸なし */
.sj-hero__badges {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: clamp(26px, 3.54vw, 56.32px) 0 0;
padding: 0;
list-style: none;
}
.sj-hero__badges li {
display: flex;
align-items: center;
gap: clamp(10px, 1vw, 16px);
padding: clamp(14px, 1.65vw, 25.6px) clamp(16px, 1.89vw, 28.16px);
border: 1px solid var(--sj-line);
background: transparent;
}
/* 左のアイコン（装飾なので alt は空）。画像の白地は multiply で背景になじませる */
.sj-hero__badge-icon {
flex: none;
width: clamp(34px, 2.6vw, 42px);
height: auto;
aspect-ratio: 1;
mix-blend-mode: multiply;
}
.sj-hero__badge-title {
margin: 0;
font-size: 1rem;
font-weight: 700;
line-height: 1.5;
letter-spacing: .02em;
color: var(--sj-ink);
/* アイコン横で2行になるとき、語の途中（「公|営斎場」「10|基」）で折れないように */
word-break: auto-phrase;
text-wrap: balance;
}
/* 数字だけ大きくブランドカラーで強調する */
.sj-hero__badge-title b {
font-family: var(--sj-font-en);
font-size: 1.65em;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
color: var(--sj-brand);
}
@media (max-width: 479px) {
.sj-hero__badges { grid-template-columns: 1fr; }
}
@media (max-width: 899px) {
.sj-hero__inner { grid-template-columns: 1fr; gap: clamp(28px, 4.72vw, 56.32px); }
}
/* FV直下の写真帯（現在は未使用。全幅のキービジュアル帯が必要になったら
![]()