@charset "UTF-8";
/* ============================================================
Tokens
============================================================ */
:root {
/* colors */
--c-green: #008941; /* primary/green/primary */
--c-pink: #f35f82;
--c-teal: #36b496;
--c-blue: #3290c0;
--c-yellow: #ffff00;
--c-text: #222; /* neutral/text/dark */
--c-white: #fff; /* neutral/bg/white */
--c-black: #000; /* neutral/text/black */
--c-ink: #202124; /* 黒 */
--c-gold-dark: #6c560f;
--c-gold: #b68b00;
--c-tab1: #a26262;
--c-tab2: #008989;
--c-tab3: #890077;
--c-shadow: #dfdfdf;
/* fonts */
--ff-sans: "Noto Sans JP", sans-serif;
--ff-serif: "Noto Serif JP", serif;
--ff-oswald: "Oswald", sans-serif;
}
/* ============================================================
Responsive scale
1rem = 10px at the design base width.
PC base 1440px / SP base 375px — 以下の数値はすべて
「Figma px ÷ 10」の rem なので、幅に応じて比例縮小する。
============================================================ */
html { font-size: calc(100vw / 144); } /* 768–1440px : PCデザイン 可変 */
@media (min-width: 1441px) { html { font-size: 10px; } } /* 1441px– : PCデザイン 固定 */
@media (max-width: 767px) { /* –767px : SPデザイン 可変 */
html { font-size: min(calc(100vw / 37.5), 12.8px); } /* 480px相当で頭打ち */
}
/* ============================================================
ページ内リンク（ヘッダーのナビ）
ページ下部から上のセクションへ飛ぶと上方向のスクロールになり、
ヘッダーが出てきて着地点に被る。そのため着地位置を
ヘッダーの高さ（PC 15.2rem / SP 5.3rem）ぶん下げる。
remなので、1440px未満で全体が縮小してもヘッダーの高さに追従する。
下方向へ飛ぶときはヘッダーが引っ込むので、その分だけ余分に空いて見える
============================================================ */
html {
scroll-behavior: smooth;
scroll-padding-top: 15.2rem;
}
@media (max-width: 767px) {
html { scroll-padding-top: 5.3rem; }
}
/* OS側で「視差効果を減らす」にしている環境では即時ジャンプにする */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* ============================================================
Reset
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--ff-sans);
color: var(--c-text);
background: var(--c-white);
-webkit-text-size-adjust: 100%;
}
h1, h2, h3, p, ul, li { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
/* max-width は付けない。本デザインの画像はすべて幅・高さを明示指定しており、
枠より大きく配置する画像（ヒーロー背景・装飾、リースSVG）が
max-width:100% で親幅に潰されるため */
img { display: block; }
picture { display: contents; }
/* ------------------------------------------------------------
共通の書き方（メンテ用メモ）
・PCの値を素で宣言し、SPの差分だけ最後の
@media (max-width: 767px) 内で上書きする。値の定義箇所は
常にこの2箇所のみ。
・入れ子テキストは 大小。
CSSは親要素に「大」のフォントサイズを、.s に「小」を指定する
（.l は親から継承するため個別指定なし）。親を「大」にするのは
cap トリムの基準を最大サイズに合わせる必要があるため。
・cap トリム定数（Figma の text-box-trim = cap上端〜ベースライン）
いずれも ascent 1.16em / descent .288em（Oswaldのみ別）。
line-height を L としたとき
margin-top = -((L - 1.448)/2 + 1.16 - cap) / margin-bottom = -(L/2 - .436)
⇒ 1行あたりの高さは常に cap になる。
Noto Serif JP cap .729em
L=1 : line-height:1; margin: -.207em 0 -.064em;
Noto Sans JP cap .733em
L=1 : line-height:1; margin: -.203em 0 -.064em;
L=1.25 : line-height:1.25; margin: -.328em 0 -.189em;
L=1.5 : line-height:1.5; margin: -.453em 0 -.314em;
Oswald cap .81em（ascent 1.193em / descent .289em）
※ascent/descentがNotoと違うので定数も別。
margin-top = -((L-1.482)/2 + 1.193 - .81) / margin-bottom = -(L/2 - .452)
L=1 : line-height:1; margin: -.142em 0 -.048em;
L=1.5 : line-height:1.5; margin: -.392em 0 -.298em;
Zen Maru Gothic cap .714286em（Figma 4:231 が 28px→20px で報告）
L=1.3 : line-height:1.3; margin: -.3717em 0 -.214em;
Playball cap .7em（ascent .95em / descent .3em）
L=1 : line-height:1; margin: -.125em 0 -.175em;
------------------------------------------------------------ */
/* ============================================================
Header Figma: PC 4:39 / SP 4:7466
============================================================ */
/* 上スクロールで出し、下スクロールで引っ込める（制御は script.js）。
position: sticky なら流し込みの高さが残るので、ヒーロー以降の
Figma座標をそのまま使える（fixed のように下がずり上がらない）。
z-index は期間限定バッジ（z=120）より下。拡大したバッジが
ヘッダーに隠れないようにするため */
.hdr {
position: sticky;
top: 0;
z-index: 110;
background: var(--c-white);
padding: 2rem 0;
transition: transform .3s ease;
}
.hdr.is-hidden { transform: translateY(-100%); }
.hdr-inner {
width: 98rem;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.6rem;
}
/* --- 上段：ロゴ ＋ 連絡先 (4:41) --- */
.hdr-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.hdr-logo {
display: flex;
align-items: flex-end;
gap: 2.6rem;
font-family: var(--ff-serif);
font-weight: 700;
white-space: nowrap;
}
.hdr-logo p {
line-height: 1;
margin: -.207em 0 -.064em;
}
.hdr-logo-brand { font-size: 3.6rem; color: var(--c-green); }
.hdr-logo-place { font-size: 3.6rem; color: var(--c-pink); }
.hdr-logo .s { font-size: 2.4rem; }
.hdr-logo-stack .hdr-logo-brand { font-size: 5.2rem; }
.hdr-logo-stack .hdr-logo-brand .s { font-size: inherit; }
.hdr-logo-stack .hdr-logo-place {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
margin: 0;
font-size: 3.5rem;
}
.hdr-logo-stack .hdr-logo-place .s {
font-size: 1.6rem;
margin: -.207em 0 -.064em;
}
.hdr-logo-stack .hdr-logo-place .l { margin: -.207em 0 -.064em; }
/* --- 連絡先（SPでは非表示） (4:45) --- */
.hdr-contact {
width: 41.9rem;
display: flex;
flex-direction: column;
gap: .4rem;
}
.hdr-phone-row {
display: flex;
align-items: center;
gap: .8rem;
}
.hdr-phone-number {
display: flex;
align-items: center;
gap: .4rem;
}
.hdr-phone-icon {
position: relative;
flex-shrink: 0;
width: 3.8rem;
height: 3.8rem;
overflow: hidden;
}
/* 内側グリフは Figma の inset（7.77% / 7.89% / 9.04% / -0.47%）を保持 */
.hdr-phone-icon img {
position: absolute;
left: .2953rem;
top: .2998rem;
width: 3.161rem;
height: 3.518rem;
}
.hdr-phone-text {
font-family: var(--ff-oswald);
font-weight: 500;
font-size: 4rem;
line-height: 1;
margin: -.142em 0 -.048em;
color: var(--c-teal);
white-space: nowrap;
}
.hdr-badges {
display: flex;
align-items: center;
gap: .4rem;
}
.hdr-badge {
display: flex;
align-items: center;
justify-content: center;
padding: .6rem;
border: .2rem solid var(--c-teal);
border-radius: .4rem;
font-weight: 700;
font-size: 1.4rem;
line-height: 1.7rem;
color: var(--c-teal);
white-space: nowrap;
}
.hdr-hours {
display: flex;
align-items: center;
gap: 1.2rem;
font-weight: 500;
font-size: 1.6rem;
line-height: 1.9rem;
white-space: nowrap;
}
/* --- 下段：ナビ ＋ CTA (4:59) --- */
.hdr-nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.hdr-nav-links {
display: flex;
align-items: center;
gap: 3.6rem;
font-weight: 700;
font-size: 1.6rem;
line-height: 1.9rem;
white-space: nowrap;
}
.hdr-nav-cta {
display: flex;
align-items: center;
gap: 1.5rem;
}
.hdr-btn {
display: flex;
align-items: center;
justify-content: center;
width: 13.6rem;
padding: .8rem 2rem;
border-radius: 2.4rem;
font-weight: 700;
font-size: 1.6rem;
line-height: 1.9rem;
white-space: nowrap;
}
.hdr-btn-visit { background: var(--c-pink); color: var(--c-yellow); }
.hdr-btn-request { background: var(--c-blue); color: var(--c-white); }
/* ============================================================
Hero Figma: PC 4:36 / 4:37 / 4:7259
SP 4:7408 / 4:7409 / 4:7418 / 4:7410 / 4:7414
/ 4:7424 / 4:7452
============================================================ */
/* width は 100% / max-width でフレーム幅を上限にする。
100vw は縦スクロールバー幅を含むため、rem 基準の固定幅にすると
表示領域を超えて右端が見切れる */
.hero {
position: relative;
width: 100%;
height: 65.4rem; /* Figma y152〜806 */
overflow: hidden; /* 画面の外へ出た装飾をクリップ */
}
/* 中身の基準になる1440の枠。切り取りはしないので、右の装飾（右端1547）は
枠の外へはみ出して、画面幅が足りる分だけ全形が見える */
.hero-frame {
position: relative;
width: 100%;
max-width: 144rem;
height: 100%;
margin: 0 auto;
}
.hero-bg,
.hero-deco,
.hero-badges,
.hero-title-row,
.hero-features,
.hero-price { position: absolute; }
.hero-bg { /* 4:36 HeroBackground : y=151 */
left: 0;
top: -.1rem;
width: 115.2rem;
height: 64.7rem;
}
.hero-deco { /* 4:37 HeroDecoration : y=124（ヘッダー下に潜る） */
left: 75.7rem;
top: -2.8rem;
width: 79rem;
height: 68.2rem;
}
/* 1440より広い画面で、写真の左に空く余白を埋める。
Photoshopで左へ描き足した画像（Figma 523:78 / assets/hero-background-wide.jpg）を
写真の左隣にぴったり重なる位置・倍率で敷く。値は元の写真と照合して算出（一致度.947）。
元の写真は左端が白79%なので、拡張側も opacity .21 でその濃さに合わせる。
継ぎ目は写真側の左8remを透過させてなじませる。
背景画像なので、1441px未満では読み込みも発生しない */
@media (min-width: 1441px) {
.hero-frame::before {
content: "";
position: absolute;
left: -104.35rem;
top: -.1rem;
/* 写真側を8rem透過させるので、その下に拡張画像が続くよう10rem多く敷く。
透過が終わる8remより2rem余分に出しておき、端の1pxが薄くなるのを防ぐ。
余分は完全に不透明な写真の下に隠れるので見た目には出ない */
width: 114.35rem;
height: 64.7rem;
background: url("assets/hero-background-wide.jpg") 0 -11.825rem / 249.55rem 81.764rem no-repeat;
opacity: .21;
/* 画像の左端が白100%になるよう、左40remかけて消していく。
画像が尽きた先（ブラウザ幅3527px超）はそのまま白なので、境目が出ない */
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 40rem);
mask-image: linear-gradient(to right, transparent 0, #000 40rem);
}
/* さらに、画面の左端から「1440の外側の余白ぶん」だけ白をかぶせて印象を弱める。
50% はヒーロー（＝画面幅）の半分なので、50% - 72rem が左の余白そのもの。
100vw と違いスクロールバーの影響を受けない。中央1440には一切かからない */
.hero::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: calc(50% - 72rem);
height: 65.4rem;
background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff);
}
/* 写真の左端8remを、白ではなく不透明度で徐々に消して拡張画像へつなぐ */
.hero-bg {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 8rem);
mask-image: linear-gradient(to right, transparent 0, #000 8rem);
}
}
/* --- アクセスバッジ (4:7262) --- */
.hero-badges {
left: 23rem;
top: 3.7rem;
display: flex;
align-items: center;
gap: 1.2rem;
}
.hero-badge-access {
padding: .8rem 1.2rem;
border-radius: .4rem;
background: var(--c-green);
}
.hero-badge-access p {
font-weight: 700;
font-size: 2.8rem;
line-height: 3.4rem;
color: var(--c-yellow);
white-space: nowrap;
}
.hero-badge-access .m { font-size: 2.2rem; }
.hero-badge-access .s { font-size: 1.7rem; }
/* 白フチと光彩。フチは text-shadow を8方向に置いて作る。
-webkit-text-stroke を背面に回す paint-order は Chrome 123 より前で効かず、
フチが文字の上に乗って文字が白く欠けるため使わない。
光彩は同じ影を重ねて濃くしている。描画のみなので寸法・折り返しには影響しない */
.hero-badge-open {
display: flex;
align-items: baseline;
font-weight: 700;
color: var(--c-pink);
text-shadow:
.3rem 0 .15rem var(--c-white), .2121rem .2121rem .15rem var(--c-white),
0 .3rem .15rem var(--c-white), -.2121rem .2121rem .15rem var(--c-white),
-.3rem 0 .15rem var(--c-white), -.2121rem -.2121rem .15rem var(--c-white),
0 -.3rem .15rem var(--c-white), .2121rem -.2121rem .15rem var(--c-white),
0 0 .8rem var(--c-white), 0 0 .8rem var(--c-white),
0 0 .8rem var(--c-white), 0 0 .8rem var(--c-white),
0 0 .8rem var(--c-white);
white-space: nowrap;
}
.hero-badge-open .s { font-size: 2.4rem; line-height: 2.9rem; }
.hero-badge-open .l { font-size: 4rem; line-height: 4.8rem; }
/* --- タイトル (4:7269 / 4:7273) --- */
.hero-title {
font-family: var(--ff-serif);
font-weight: 700;
color: var(--c-green);
text-shadow:
.15rem 0 .075rem var(--c-white), .1061rem .1061rem .075rem var(--c-white),
0 .15rem .075rem var(--c-white), -.1061rem .1061rem .075rem var(--c-white),
-.15rem 0 .075rem var(--c-white), -.1061rem -.1061rem .075rem var(--c-white),
0 -.15rem .075rem var(--c-white), .1061rem -.1061rem .075rem var(--c-white),
0 0 1.6rem var(--c-white), 0 0 1.6rem var(--c-white),
0 0 1.6rem var(--c-white), 0 0 1.6rem var(--c-white),
0 0 1.6rem var(--c-white),
0 0 1rem var(--c-white), 0 0 1rem var(--c-white);
white-space: nowrap;
}
.hero-title-row {
display: flex;
align-items: flex-end;
}
.hero-title-row1 { left: 23rem; top: 12.7rem; }
.hero-title-row2 { left: 30.6rem; top: 22.2rem; }
.hero-title-row span {
line-height: 1;
margin: -.207em 0 -.064em;
font-size: 7.6rem;
}
.hero-title-row .s { font-size: 5.6rem; }
/* --- 特徴カード (4:7277) --- */
.hero-features {
left: 23rem;
top: 30.9rem;
display: flex;
align-items: center;
gap: .4rem;
}
.hero-feature {
position: relative;
width: 17.0871rem;
height: 15.8855rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hero-feature-wreath { /* Figma inset -3.88% / -6.95% → 181.101 角 */
position: absolute;
left: -.663rem;
top: -1.104rem;
width: 18.1101rem;
height: 18.1101rem;
}
.hero-feature-text {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
font-family: var(--ff-serif);
font-weight: 700;
white-space: nowrap;
}
.hero-feature-text span {
line-height: 1;
margin: -.207em 0 -.064em;
}
.hero-feature-text .s { font-size: 2rem; color: var(--c-gold-dark); text-align: center; }
.hero-feature-text .l { font-size: 4rem; color: var(--c-gold); }
/* --- 価格 (4:7281) --- */
.hero-price {
left: 23rem;
top: 50.785rem;
display: flex;
align-items: flex-end;
gap: 1.6rem;
font-family: var(--ff-serif);
font-weight: 700;
white-space: nowrap;
}
.hero-price-label {
width: 15rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
.hero-price-label-main {
font-size: 5rem;
line-height: 1;
margin: -.207em 0 -.064em;
color: var(--c-green);
}
.hero-price-tag {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 1.2rem 2rem;
border-radius: .8rem;
background: var(--c-pink);
}
.hero-price-tag span {
font-size: 3.4rem;
line-height: 1;
margin: -.207em 0 -.064em;
color: var(--c-white);
}
.hero-price-amount {
display: flex;
align-items: flex-end;
color: var(--c-pink);
/* フチは text-shadow、光彩は drop-shadow の重ねがけ。
drop-shadow は前段の結果にさらに掛かるので、同じ回数でも text-shadow より濃く出る */
text-shadow:
.1rem 0 .05rem var(--c-white), .0707rem .0707rem .05rem var(--c-white),
0 .1rem .05rem var(--c-white), -.0707rem .0707rem .05rem var(--c-white),
-.1rem 0 .05rem var(--c-white), -.0707rem -.0707rem .05rem var(--c-white),
0 -.1rem .05rem var(--c-white), .0707rem -.0707rem .05rem var(--c-white);
filter:
drop-shadow(0 0 .7rem var(--c-white))
drop-shadow(0 0 .7rem var(--c-white))
drop-shadow(0 0 .7rem var(--c-white))
drop-shadow(0 0 .7rem var(--c-white))
drop-shadow(0 0 .7rem var(--c-white));
}
.hero-price-num {
font-size: 14.4rem;
line-height: 1;
margin: -.207em 0 -.064em;
text-align: center;
}
.hero-price-num .s { font-size: 11rem; }
.hero-price-unit {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: 2.3544rem;
}
.hero-price-tax {
font-size: 3.2rem;
line-height: 1;
margin: -.207em 0 -.064em;
}
.hero-price-man {
display: flex;
align-items: center;
}
.hero-price-man p {
line-height: 1;
margin: -.207em 0 -.064em;
}
.hero-price-man .l { font-size: 7rem; }
.hero-price-man .s { font-size: 4.8rem; }
/* ============================================================
GraveInfo Figma: PC 4:69 / SP 4:7611
============================================================ */
.ginfo {
position: relative; /* ヒーロー（position:relative）より後ろに描画されて
しまうのを防ぐ。SPでは44px重なるため必須 */
width: 100%;
max-width: 144rem;
margin: 2.4rem auto 0; /* ヒーロー下端 y806 → セクション上端 y830 */
}
.ginfo-card {
width: 97rem;
margin: 0 auto;
display: flex;
align-items: center;
gap: 2.8rem;
padding: 4.4rem 5.2rem;
border-radius: 1.2rem;
background: var(--c-white);
/* Figmaは drop-shadow 0 0 6px #dfdfdf。同値のbox-shadowだと
可視幅3px・カード際の明度241（#dfdfdf=223に対して濃度4割）しか出ずFigmaより薄い。
spread .2rem を足して可視幅5px・明度233（濃度7割）にする */
box-shadow: 0 0 .6rem .2rem var(--c-shadow);
}
.ginfo-details { /* 4:70 / 4:7612 */
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2rem;
}
.ginfo-content { /* 4:71 / 4:7613 */
width: 44.9rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.6rem;
}
/* --- タイトル ＋ 墓種タブ (4:72 / 4:7614) --- */
.ginfo-titlerow {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 1.6rem;
}
.ginfo-title {
display: flex;
align-items: flex-end;
gap: 1.2rem;
font-weight: 700;
white-space: nowrap;
}
.ginfo-title-brand { /* Noto Serif JP */
font-family: var(--ff-serif);
font-size: 2.8rem;
line-height: 1;
margin: -.207em 0 -.064em;
color: var(--c-green);
}
.ginfo-title-place { /* Noto Sans JP */
font-size: 2.8rem;
line-height: 1;
margin: -.203em 0 -.064em;
color: var(--c-ink);
}
.ginfo-title .s { font-size: 2rem; }
.ginfo-title-stack {
flex-direction: column;
align-items: flex-start;
gap: 1.3rem;
}
.ginfo-title-stack .ginfo-title-brand { font-size: 1.8rem; }
.ginfo-title-stack .ginfo-title-place { font-size: 2.7rem; }
.ginfo-title-stack p .s { font-size: inherit; }
.ginfo-tabs {
display: flex;
align-items: center;
gap: 1rem;
}
.ginfo-tab { /* トリムなし（Figmaは leading 1.5 のまま） */
display: flex;
align-items: center;
justify-content: center;
padding: .4rem 1.6rem;
border-radius: 2.4rem;
font-weight: 700;
font-size: 1.6rem;
line-height: 1.5;
color: var(--c-white);
white-space: nowrap;
}
.ginfo-tab1 { background: var(--c-tab1); }
.ginfo-tab2 { background: var(--c-tab2); }
.ginfo-tab3 { background: var(--c-tab3); }
/* --- 住所・アクセス (4:80 / 4:7625) --- */
.ginfo-address {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.6rem;
font-size: 1.6rem;
}
.ginfo-address p {
line-height: 1.5;
margin: -.453em 0 -.314em;
}
.ginfo-label { white-space: pre; }
.ginfo-address-rows {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.6rem;
color: var(--c-ink);
}
.ginfo-address-row {
display: flex;
align-items: center;
gap: .4rem;
white-space: nowrap;
}
.ginfo-access {
display: flex;
align-items: flex-start;
color: var(--c-ink);
}
.ginfo-access .ginfo-label { flex-shrink: 0; }
.ginfo-access-lines {
flex-shrink: 0;
width: 37.4rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.2rem;
color: var(--c-black);
}
/* Figmaは nowrap で2行目がコンテナ外にはみ出すが、折り返す指示のため
本文を flex:1 にして枠内で改行させる */
.ginfo-access-line {
display: flex;
align-items: flex-start;
gap: .4rem;
width: 100%;
}
.ginfo-access-line p {
flex: 1 0 0;
min-width: 0;
}
/* 枠の幅は3行そろえる。Figmaはアイコンごとに送り幅が違う（14/16/18px）が、
正方形の絵を中央に置くと下の行ほど右へずれて見えるため。
枠の高さは文字のcap高さに合わせたままにして、絵だけを上下対称にはみ出させる。
こうすると絵を大きくしても文字との縦位置の関係が変わらない */
.ginfo-access-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 1.8rem;
height: 1.3rem;
}
.ginfo-access-icon svg {
display: block;
width: 1.8rem;
height: 1.8rem;
}
/* --- 特徴タグ (4:97 / 4:7642) --- */
/* 3個ごとに自動で折り返す。項目が増減しても行を作り直す必要がない */
.ginfo-tags {
width: 39.1rem;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: .8rem;
}
/* Figmaは stroke #008941 が塗りと同色のため枠線は視認されない → 省略 */
.ginfo-tag {
width: 12.5rem;
display: flex;
align-items: center;
justify-content: center;
padding: 1.2rem;
border-radius: .4rem;
background: var(--c-green);
font-weight: 700;
font-size: 1.4rem;
color: var(--c-white);
white-space: nowrap;
}
.ginfo-tag > span {
line-height: 1;
margin: -.203em 0 -.064em;
}
/* --- 詳しいアクセスはこちら (4:106 / 4:7657) --- */
.ginfo-accesslink {
display: flex;
align-items: center;
gap: .4rem;
color: var(--c-black);
}
.ginfo-accesslink-text {
font-weight: 700;
font-size: 1.6rem;
line-height: 1;
margin: -.203em 0 -.064em;
text-decoration: underline;
text-underline-position: from-font;
text-decoration-skip-ink: none;
white-space: nowrap;
}
.ginfo-accesslink-icon {
flex-shrink: 0;
width: 1.2rem;
height: 1.2rem;
}
.ginfo-accesslink-icon svg {
display: block;
width: 100%;
height: 100%;
}
/* --- 地図（PCのみ） (4:110) --- */
.ginfo-map {
position: relative;
flex-shrink: 0;
width: 38.9rem;
align-self: stretch;
overflow: hidden;
}
/* Figmaはダミー画像（松戸の地図）だが、Google Maps 埋め込みに差し替え */
.ginfo-map iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* ============================================================
期間限定キャンペーン
Figma: PC 4:7220（追従／拡大時 4:252 相当）
SP 4:14601 + 4:14615
============================================================ */
/* バッジ内部の寸法はすべて em で指定し、基準の文字サイズを「拡大時」に合わせている。
通常時はそこから transform で縮小して見せる作り。
拡大方向に transform を使うと、拡大前の大きさで描いた絵を引き伸ばすため文字が滲む。
逆に縮小方向なら元より細かい絵を縮めるので滲まず、拡大時は transform が無くなるので
最も鮮明になる。動かすのは transform だけなので、拡大の動きも滑らかになる
（font-size を動かすと毎フレーム再計算が入ってガクつく）。
top は「拡大時の箱の上端」。通常時は縮小されてヘッダー下端に揃って見える */
.cpn {
position: fixed;
right: 4rem;
top: 6.216rem;
transform-origin: 100% 50%;
transform: scale(.7342); /* 1 ÷ 1.362 */
transition: transform .3s ease, opacity .15s ease;
z-index: 120;
font-size: 1.362rem;
width: 21.4em;
}
.cpn.is-enlarged { transform: scale(1); }
/* --- リボン (4:7221 / 4:14601)：PC/SP共通。バーは左右2.3emで可変 --- */
.cpn-ribbon {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 4.8258em;
z-index: 2;
}
.cpn-wing {
position: absolute;
top: 1em;
width: 4.6em;
height: 3.8em;
}
.cpn-wing-l { left: 0; }
.cpn-wing-r { right: 0; transform: scaleX(-1); }
.cpn-seam { /* リボン折り返しの三角（Polygon 1 / 2） */
position: absolute;
top: 4.1em;
width: 2.3em;
height: .726em;
background: #814352;
z-index: 3;
}
.cpn-seam-l { left: 2.3em; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.cpn-seam-r { right: 2.3em; clip-path: polygon(0 0, 100% 0, 0 100%); }
.cpn-wline { /* 羽根の白い折り線（Line 3〜6） */
position: absolute;
height: .1em;
background: var(--c-white);
transform: scaleY(.5);
z-index: 1;
}
.cpn-wline-lt { left: .3em; top: 1.4em; width: 2.3em; }
.cpn-wline-lb { left: .3em; top: 4.5em; width: 3.9em; }
.cpn-wline-rt { right: .3em; top: 1.4em; width: 2.3em; }
.cpn-wline-rb { right: .3em; top: 4.5em; width: 3.9em; }
.cpn-bar {
position: absolute;
left: 2.3em;
right: 2.3em;
top: 0;
height: 4.1em;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to right, #df6682, #ff86a0 50%, #df6682);
}
.cpn-bar::before,
.cpn-bar::after { /* バー上下の白い線（Line 1 / 2） */
content: "";
position: absolute;
left: 0;
width: 100%;
height: .1em;
background: var(--c-white);
transform: scaleY(.5);
}
.cpn-bar::before { top: .5em; }
.cpn-bar::after { top: 3.7em; }
.cpn-bar-text {
font-weight: 700;
font-size: 2.2em;
line-height: 1;
margin: -.1403em 0 -.1267em;
letter-spacing: .2em;
text-indent: .2em; /* letter-spacing の末尾分を打ち消して中央に見せる */
color: var(--c-white);
white-space: nowrap;
}
/* --- カード (4:7235 / 4:14615) --- */
.cpn-card {
position: relative;
z-index: 1;
width: 18.3em;
margin: 2.426em auto 0;
padding: 4.4em .8em 1.8em;
border-radius: .8em .8em 0 0;
background: var(--c-white);
box-shadow: 0 0 .6em #a4a4a4;
display: flex;
flex-direction: column;
align-items: center;
gap: 2em;
font-family: var(--ff-serif);
font-weight: 700;
text-align: center;
}
.cpn-head {
font-size: 2em;
line-height: 1;
margin: -.207em 0 -.064em;
color: var(--c-black);
}
.cpn-visit { /* 4:7236 gap 16 */
width: 14.4em;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6em;
}
.cpn-visit-body { /* 4:7238 gap 8 */
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: .8em;
}
.cpn-visit-text { /* 4:7239 */
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.4em;
}
.cpn-visit-quo { /* 4:7240 */
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: .9em;
}
.cpn-tag { /* ピンク帯（高さ = padding 8 + cap 13.1 + 8） */
width: 100%;
height: 1.6111em; /* 29px ÷ 自身の文字サイズ18px */
display: flex;
align-items: center;
justify-content: center;
background: var(--c-pink);
font-size: 1.8em;
line-height: 1;
color: var(--c-white);
}
.cpn-tag-sm { /* 偶数月。Amazonギフトカードを1行に収める */
height: 1.9541em; /* 25.5px（padding 8 + cap 9.5 + 8）÷ 自身の文字サイズ13.06px */
font-size: 1.306em;
}
.cpn-amount,
.cpn-amount2 {
display: flex;
align-items: flex-end;
justify-content: center;
}
.cpn-amount .l {
font-size: 4em;
line-height: 1;
margin: -.207em 0 -.064em;
background: linear-gradient(to bottom, #ff9863, #f35f82);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.cpn-amount .s {
font-size: 2em;
line-height: 1;
margin: -.207em 0 -.064em;
background: linear-gradient(to bottom, #f6a277, #d86881);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.cpn-amount2 .l {
font-size: 4em;
line-height: 1;
margin: -.207em 0 -.064em;
background: linear-gradient(to bottom, #ff9863, #f35f82);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.cpn-amount2 .s {
font-size: 2em;
line-height: 1;
margin: -.207em 0 -.064em;
background: linear-gradient(to bottom, #f6a277, #d86881);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.cpn-present {
font-size: 2em;
line-height: 1;
margin: -.207em 0 -.064em;
color: #397021;
}
.cpn-quoimg { /* 偶数月の素材は横長なので、上下を空けて収める */
position: relative;
width: 11.5em;
height: 7.8em;
overflow: hidden;
}
.cpn-quoimg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.cpn-divider {
width: 15.4em;
height: .1em;
background: #d9d9d9;
}
.cpn-contract { /* 4:7249 */
width: 16.7em;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.4em;
}
.cpn-contract-quo { /* 4:7253 */
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: .9em;
margin-top: .2em;
}
.cpn-tag2 {
font-size: 1.8em;
line-height: 1;
margin: -.207em 0 -.064em;
color: var(--c-pink);
}
.cpn-note {
font-size: .99em;
font-weight: 500;
line-height: 1;
/* margin 後半は、親の gap を見た目 8px まで詰める分 */
margin: calc(-.207em - .8em / .99) 0 -.064em;
color: var(--c-black);
}
/* 行は左揃え、ブロックごと中央（親の align-items: center に任せる）。
margin 後半は、親の gap を見た目 12px まで詰める分 */
.cpn-note-swap {
line-height: 1.2;
margin: calc(-.307em - .2em / .99) 0 -.164em;
text-align: left;
white-space: nowrap;
}
.cpn-note-swap span { display: block; }
/* ============================================================
期間限定キャンペーン / SP Figma: 4:14601 + 4:14615
PC追従バッジ（.cpn）とはDOMを分離
============================================================ */
.spcpn { display: none; }
/* ============================================================
CTA Figma: PC 4:111 + 4:156 + 4:112 / SP 4:7473 + 4:7474
============================================================ */
.cta {
width: 100%;
margin-top: 3.1rem;
background: linear-gradient(to right, #7adbb8 25%, #3290c0 74.519%);
}
/* 中身を入れる1440の枠。背景だけがセクション側で画面幅いっぱいに広がる */
.cta-frame {
position: relative;
width: 100%;
max-width: 144rem;
height: 51rem;
margin: 0 auto;
overflow: hidden;
}
/* 2回目のCTA（4:1095系）。1回目と同じスタイルを流用し、
直前のセクション（樹木葬・一般墓のご紹介）との間隔だけ詰める */
.cta2 { margin-top: 0; }
/* 3回目のCTA（4:1189系）。Figmaは背景上端 y10913 で、
見学･ご契約までの流れ（y8368〜10915）に2pxだけ重なる */
.cta3 { margin-top: -.2rem; }
.cta-model { /* 4:156 model1 1（PCのみ） */
position: absolute;
left: 5.1rem;
top: 12.1rem;
width: 37.1rem;
height: 38.9rem;
overflow: hidden;
}
.cta-model img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 181.84%;
}
.cta-inner {
position: relative;
width: 80.4rem;
margin: 8.1rem auto 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4.8rem;
}
.cta-top {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.4rem;
}
/* --- 見出し (4:114 / 4:7477) --- */
.cta-title {
width: 66.4rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.4rem;
font-weight: 700;
color: var(--c-white);
}
.cta-title-main {
width: 100%;
font-size: 3.6rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
}
.cta-title-sub {
width: 100%;
font-size: 2rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
text-align: center;
}
/* PCではモデル画像・丸写真を持たず、サブ見出しだけを見出し列に流す */
.cta-lead-row,
.cta-media,
.cta-media-body { display: contents; }
.cta-media-model,
.cta-media-photos { display: none; }
/* --- CTAボタン2つ (4:117 / 4:7486) --- */
.cta-btns {
width: 100%;
display: flex;
align-items: center;
gap: 3.2rem;
}
.cta-btn {
width: 38.6rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 2.4rem 3.6rem;
border-radius: 6.4rem;
font-weight: 700;
}
.cta-btn-visit {
background: var(--c-pink);
box-shadow: 0 .4rem 0 #a02945;
}
.cta-btn-request {
background: var(--c-white);
box-shadow: 0 .4rem 0 #215a65;
}
.cta-btn-inner {
display: flex;
align-items: flex-start;
gap: .4rem;
}
.cta-btn-icon {
position: relative;
flex-shrink: 0;
width: 3rem;
height: 3rem;
}
.cta-btn-icon-schedule img { width: 100%; height: 100%; }
/* icon-file.svg は viewBox 22×27。Figmaのinsetどおりの位置・実寸で置く */
.cta-btn-icon-file img {
position: absolute;
left: .4rem;
top: .15rem;
width: 2.2rem;
height: 2.7rem;
}
.cta-btn-labels {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .4rem;
white-space: nowrap;
}
.cta-btn-main { font-size: 2.4rem; line-height: 2.9rem; }
.cta-btn-sub { font-size: 1.6rem; line-height: 1.9rem; }
.cta-btn-visit .cta-btn-main { color: var(--c-yellow); }
.cta-btn-visit .cta-btn-sub { color: var(--c-white); }
.cta-btn-request .cta-btn-main,
.cta-btn-request .cta-btn-sub { color: var(--c-blue); }
.cta-btn-arrow {
flex-shrink: 0;
width: 1.6rem;
height: 1.6rem;
}
.cta-btn-arrow img { width: 100%; height: 100%; }
/* --- 電話エリア (4:138 / 4:7507) --- */
.cta-phone {
width: 60.4303rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.cta-phone-lead {
width: 100%;
font-weight: 700;
font-size: 2.8rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
color: var(--c-white);
text-align: center;
}
.cta-phone-pc {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: .5642rem;
}
.cta-phone-row {
width: 100%;
display: flex;
align-items: center;
gap: 1.1284rem;
}
.cta-phone-number {
display: flex;
align-items: center;
gap: .5642rem;
}
.cta-phone-icon {
position: relative;
flex-shrink: 0;
width: 5.3599rem;
height: 5.3599rem;
overflow: hidden;
}
.cta-phone-icon img {
position: absolute;
left: 7.77%;
top: 7.9%;
width: 83.19%;
height: 92.57%;
}
.cta-phone-text {
font-family: var(--ff-oswald);
font-weight: 500;
font-size: 6rem;
line-height: 1;
margin: -.142em 0 -.048em;
color: #ffec73;
white-space: nowrap;
}
.cta-phone-badges {
display: flex;
align-items: center;
gap: .5642rem;
}
/* Figmaは stroke 外側のため、border分を padding から差し引いて実寸を合わせる */
.cta-phone-badge {
display: flex;
align-items: center;
justify-content: center;
padding: .8463rem;
border: .2821rem solid #ffec73;
border-radius: .5642rem;
font-weight: 700;
font-size: 2rem;
line-height: 2.4rem;
color: #ffec73;
white-space: nowrap;
}
.cta-hours {
display: flex;
align-items: center;
gap: 1.6rem;
font-weight: 500;
font-size: 2rem;
line-height: 2.4rem;
color: var(--c-white);
white-space: nowrap;
}
.cta-phone-sp { display: none; }
/* ============================================================
こんなお悩みありませんか？
Figma: PC 4:157 / SP 4:7465
各ブロックは PC / SP ともに絶対配置（Figma座標をそのまま使用）
============================================================ */
.worry {
width: 100%;
background: #f7f7f7;
}
.worry-frame {
position: relative;
width: 100%;
max-width: 144rem;
height: 72.8rem; /* Figma y1787〜2515 */
margin: 0 auto;
}
/* --- 見出し (4:159 / 4:7661) --- */
.worry-header {
position: absolute;
left: 43.4rem;
top: 6.1rem;
width: 57.2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.4rem;
font-family: var(--ff-serif);
font-weight: 700;
}
.worry-badge {
display: flex;
align-items: center;
justify-content: center;
padding: 1.6rem 2.4rem;
border-radius: 5rem;
background: #1a4796;
color: var(--c-white);
white-space: nowrap;
}
.worry-badge > span {
font-size: 2.8rem;
line-height: 1;
margin: -.207em 0 -.064em;
}
.worry-heading {
font-size: 4.4rem;
line-height: 1;
margin: -.207em 0 -.064em;
color: #1a4796;
text-align: center;
}
.worry-subtitle {
position: absolute;
left: 34.7rem;
top: 19.3rem;
width: 73.9rem;
font-size: 2rem;
line-height: 1;
margin: -.203em 0 -.064em;
color: var(--c-black);
text-align: center;
}
/* --- 背景のブロブ (4:163 / 4:164 / 4:165)：PCのみ --- */
.worry-blob {
position: absolute;
z-index: 0;
pointer-events: none;
}
.worry-blob1 { left: 24.4rem; top: 25.8rem; width: 33.5rem; height: 27.3rem; }
/* 4:164 は89°回転ノード。メタデータの x=888.7 は回転前の原点で、
描画左端は左へ 332.69px ずれた 556.01 になる */
.worry-blob2 { left: 55.601rem; top: 23.9rem; width: 33.73rem; height: 27.033rem; }
.worry-blob3 { left: 87.2rem; top: 29.4rem; width: 33.3rem; height: 26.4rem; }
/* --- 3つの悩みカード (4:166 / 4:171 / 4:176 / SP 4:8796) --- */
.worry-cards { display: contents; } /* PCは各カードを個別に絶対配置 */
.worry-card {
position: absolute;
z-index: 1;
width: 23.7rem;
}
.worry-card1 { left: 29.3rem; top: 32.7rem; }
.worry-card2 { left: 61rem; top: 30.14rem; }
.worry-card3 { left: 92rem; top: 35.4rem; }
.worry-card-body {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.4rem;
}
.worry-card-title {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.2rem;
font-weight: 700;
font-size: 2.4rem;
color: #1a4796;
text-align: center;
white-space: nowrap;
}
.worry-card-title p {
line-height: 1.5;
margin: -.453em 0 -.314em;
}
/* Figmaは高さ87px固定。トリムのマイナス分を足して外形を87pxに合わせる */
.worry-card-text {
width: 100%;
height: 9.9272rem;
font-size: 1.6rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
color: var(--c-black);
}
/* --- 人物写真 (4:181)：PCはカード基準で絶対配置 --- */
.worry-person {
position: absolute;
z-index: 2;
display: block;
overflow: hidden;
}
.worry-person img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.worry-person1 {
left: 19.8rem;
top: 17.2rem;
width: 16.5rem;
height: 23.1rem;
}
.worry-person1 img { /* Figma 4:183 は内側にインセット */
left: 2.88%;
width: 94.24%;
object-fit: fill;
}
.worry-person2 {
left: 4.6rem;
top: 19.76rem;
width: 13.5rem;
height: 23.1rem;
}
.worry-person3 {
left: -12.9rem;
top: 14.5rem;
width: 16.1rem;
height: 22.6rem;
}
/* ============================================================
仙和の樹木葬なら樹木葬ですべて解決
Figma: PC 4:158 / SP 4:7665
============================================================ */
.reason {
position: relative;
width: 100%;
overflow: hidden; /* 画面幅より外へ出た装飾を切る */
background: rgba(241, 247, 225, .6);
}
.reason-frame {
position: relative;
width: 100%;
max-width: 144rem;
height: 147.1rem; /* Figma y2515〜3901 ＋ 枠内に足した文言の分 */
margin: 0 auto;
}
/* --- 装飾イラスト (PC 4:2362/4:3381/4:4504/4:2002/4:1533/4:5037/4:6006) ---
装飾だけを載せる層。画面幅いっぱいに広げ、下限を1440にそろえる。
1440超 → 装飾が画面の左右端へ。1440以下 → このLPは全体が縮小する作りなので
144rem = 画面幅 となり、今までと同じ位置になる（SPだけ下限を外す）
Figmaでは装飾がセクション内の最前面。transform で重なりの文脈ができ
.reason-deco の z-index が層の中に閉じるため、層そのものに z-index を持たせて
写真・カードより上に出す（期間限定バッジ z=100 より下） */
.reason-decos {
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
min-width: 144rem;
pointer-events: none; /* 下の中身をクリックできるようにする */
}
.reason-deco {
position: absolute;
z-index: 2;
display: block;
pointer-events: none;
}
.reason-deco img {
display: block;
width: 100%;
height: 100%;
}
.reason-deco-flower { left: 0; top: 5.1rem; width: 26.4rem; height: 48.7rem; }
.reason-deco-lavender { right: 0; top: 2rem; width: 34.2rem; height: 53.8rem; }
.reason-deco-peony { left: 0; top: 46.9rem; width: 26.4rem; height: 46.9rem; }
.reason-deco-leaf2 { right: 6.5rem; top: 51.1rem; width: 16.2rem; height: 9.9rem; }
.reason-deco-leaf1 { right: 7.7rem; top: 64.4rem; width: 12.1rem; height: 10.7rem; }
.reason-deco-anemone { left: 0; top: 99.5rem; width: 30.2rem; height: 30.8rem; }
.reason-deco-tulip { right: 0; top: 107.9rem; width: 31.4rem; height: 52.2rem; }
/* --- 見出し (4:185 + 4:251 / 4:8819) --- */
.reason-head {
position: absolute;
left: 50%;
top: 7.3rem;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 2.7rem;
text-align: center;
}
.reason-head-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 2.4rem;
font-family: var(--ff-serif);
font-weight: 700;
white-space: nowrap;
}
.reason-head-sub {
font-size: 2.8rem;
line-height: 1;
margin: -.207em 0 -.064em;
color: var(--c-gold);
}
.reason-head-main {
display: flex;
align-items: flex-end;
justify-content: center;
color: var(--c-green);
}
.reason-head-main span {
font-size: 4.4rem;
line-height: 1;
margin: -.207em 0 -.064em;
}
.reason-head-main .s { font-size: 3.2rem; }
.reason-lead {
font-size: 2rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
color: var(--c-black);
}
.reason-lead span { display: block; }
/* --- 3つの理由カード (4:191 / 4:8827) --- */
.reason-cards {
position: absolute;
left: 23rem;
top: 26.2rem;
width: 98rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.reason-card {
flex: 1 0 0;
min-width: 0;
padding: 0 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.reason-photo {
flex-shrink: 0;
width: 21.2rem;
height: 21.2rem;
border-radius: 50%;
object-fit: cover;
}
.reason-card-body {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.4rem;
}
.reason-card-head {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.2rem;
}
/* ピンクのマーカー（Vector 188×36）の上にラベル文字を重ねる。
Figmaの ml 値はいずれもマーカー幅に対する中央寄せなので中央配置で再現できる */
.reason-label {
position: relative;
width: 18.86rem;
height: 4.1486rem;
}
.reason-label img {
position: absolute;
left: 0;
top: .221rem;
width: 18.9rem;
height: 3.7rem;
transform: rotate(-1deg);
}
.reason-label span {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1.6019rem;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(2deg);
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 700;
font-size: 1.6rem;
line-height: 1.5;
color: var(--c-pink);
white-space: nowrap;
}
.reason-title {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6rem;
font-weight: 700;
font-size: 2.8rem;
color: var(--c-black);
text-align: center;
white-space: nowrap;
}
.reason-title span {
line-height: 1.5;
margin: -.453em 0 -.314em;
}
.reason-text {
width: 100%;
font-size: 1.6rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
color: var(--c-black);
}
/* --- 樹木葬はこんな方に選ばれています (PC 4:230 / SP 4:8863) ---
Figmaは stroke 外側。border分を padding から差し引いて外形をFigma実寸に合わせる */
.chosen {
position: absolute;
left: 25rem;
top: 71.9rem;
width: 94.2rem;
height: 31.7rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.4rem;
padding: 4.2rem 0;
border: .2rem solid var(--c-pink);
border-radius: 1.2rem;
background: #fffdfe;
}
.chosen-heading {
width: 100%;
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 700;
font-size: 2.8rem;
line-height: 1.3;
margin: -.3717em 0 -.214em;
color: var(--c-pink);
text-align: center;
}
.chosen-list {
display: flex;
align-items: center;
gap: 2.8rem;
}
.chosen-item {
display: flex;
align-items: center;
gap: 1.2rem;
}
.chosen-photo {
position: relative;
flex-shrink: 0;
width: 10rem;
height: 10rem;
border-radius: .4rem;
overflow: hidden;
}
.chosen-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Figma 4:234 だけ中央ではなく右寄りにトリミングされている */
.chosen-photo1 img {
left: -17.36%;
width: 150%;
object-fit: fill;
}
.chosen-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.6rem;
font-weight: 700;
font-size: 2rem;
color: var(--c-black);
white-space: nowrap;
}
.chosen-text span {
line-height: 1.5;
margin: -.453em 0 -.314em;
}
/* Figmaのテキスト枠は 180 / 140 / 140。3つ目は文字幅120に対して枠が140で
余白が右に出るため、内容任せにせず幅を明示する */
.chosen-item1 .chosen-text { width: 18rem; }
.chosen-item2 .chosen-text { width: 14rem; }
.chosen-item3 .chosen-text { width: 14rem; }
/* Figmaの区切り線は太さ0のラインに2pxのstroke。負マージンで
線の太さ分がレイアウトを押し広げないようにする */
.chosen-divider {
flex: none;
width: .2rem;
height: 9.9rem;
margin: 0 -.1rem;
background: #cecece;
}
/* 区切り線の幅は、サムネ画像と枠の余白（17rem相当）を左右に残した幅 */
.chosen-note {
box-sizing: border-box;
width: 90.8rem;
margin-top: 1.2rem;
padding-top: 3.6rem;
border-top: .1rem solid #e6d3da;
}
.chosen-note-text {
font-size: 1.6rem;
line-height: 1.6;
margin: -.503em 0 -.364em;
color: var(--c-black);
text-align: center;
}
.chosen-note-br { display: none; } /* 改行はSPだけ */
/* --- 写真3枚 (PC 4:227/4:228/4:229 / SP 4:8789) ---
PCはブロブ型に切り抜き済みのPNGをFigma座標にそのまま置く */
.rgallery { display: contents; }
.rgallery-item {
position: absolute;
overflow: hidden;
}
.rgallery-item img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.rgallery-couple { left: 22.3rem; top: 104.7rem; width: 49.835rem; height: 34.205rem; }
.rgallery-flowers { left: 95.155rem; top: 103.7rem; width: 25.646rem; height: 23.074rem; }
/* Figmaでは参拝の写真が最前面。DOM順はSP優先なのでPCだけ持ち上げる */
.rgallery-visit { left: 71.77rem; top: 112.732rem; width: 31.013rem; height: 28.665rem; z-index: 1; }
/* 区切り線（Figma: #008941 / 2px / 破線 6-6） */
.reason-divider {
position: absolute;
top: 3.474rem;
width: .2rem;
height: 35.8rem;
background: repeating-linear-gradient(to bottom, #008941 0 .6rem, transparent .6rem 1.2rem);
}
.reason-divider1 { left: 32.7rem; }
.reason-divider2 { left: 65.35rem; }
/* ============================================================
3つの樹木葬プラン
Figma: PC 4:291/4:296/4:297/4:656/4:305 → セクション原点は y3901
SP 4:8883/4:8893/4:8894/4:8902/4:8906/4:9228 → 原点は y5398
============================================================ */
.plan {
position: relative;
width: 100%;
}
.plan-frame {
position: relative;
width: 100%;
max-width: 144rem;
height: 153rem; /* Figma y3901〜5431 */
margin: 0 auto;
overflow: hidden;
}
/* --- 見出し (4:291 / 4:8883) --- */
.plan-head {
position: absolute;
left: 27.05rem;
top: 7.3rem;
width: 89.8rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.4rem;
text-align: center;
}
.plan-head-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 2.4rem;
}
.plan-head-en {
font-family: "Playball", cursive;
font-size: 4rem;
line-height: 1;
margin: -.125em 0 -.175em;
color: var(--c-gold);
}
.plan-head-main {
font-family: var(--ff-serif);
font-weight: 700;
font-size: 4.4rem;
line-height: 1;
margin: -.207em 0 -.064em;
color: var(--c-green);
white-space: nowrap;
}
.plan-head-lead {
font-size: 2rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
color: var(--c-black);
white-space: nowrap;
}
/* --- 写真帯 + 0円バッジ (4:296 / 4:297) --- */
.plan-band {
position: absolute;
left: 0;
top: 24.8rem;
width: 100%;
height: 41.9rem;
overflow: hidden;
}
/* 両脇の埋め。同じ画像を全幅に伸ばしてぼかし、薄く敷く。
ぼかすと箱の縁で色が抜けるので、ぼかし半径より大きく外へはみ出させる */
.plan-band-blur {
position: absolute;
inset: -8rem;
filter: blur(1rem);
opacity: .25;
}
.plan-band-blur img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 中央の1440。切り取り位置はFigmaのまま。
picture は display: contents にリセットしているので、ここでは箱に戻す */
.plan-band-front {
display: block;
position: absolute;
left: 50%;
top: 0;
width: 144rem;
height: 100%;
margin-left: -72rem;
overflow: hidden;
}
/* Figmaのトリミング率をそのまま再現する（素材 1200×720、Figma 379:887 w100% h206.21% y-47.7%） */
.plan-band-front img {
position: absolute;
left: 0;
top: -19.986rem;
width: 144rem;
height: 86.4rem;
}
.plan-free {
position: absolute;
left: 25.7rem;
top: 30.2rem;
width: 17.2rem;
height: 17.2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--c-pink);
font-family: var(--ff-serif);
font-weight: 700;
}
.plan-free-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.6rem;
width: 7.9rem;
}
.plan-free-labels {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.1rem;
font-size: 2.4rem;
color: var(--c-white);
}
.plan-free-labels p {
line-height: 1;
margin: -.207em 0 -.064em;
}
.plan-free-price {
width: 100%;
display: flex;
align-items: flex-end;
font-size: 7.2rem;
line-height: 1;
margin: -.207em 0 -.064em;
color: #ffec73;
white-space: nowrap;
}
.plan-free-price .s { font-size: 3.6rem; }
/* --- リード (4:656 / 4:8902) --- */
.plan-lead {
position: absolute;
left: 34.5rem;
top: 70.4rem;
width: 80.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.plan-lead-badge {
display: flex;
align-items: center;
justify-content: center;
padding: 1.6rem 2.4rem;
border-radius: 8rem;
background: var(--c-pink);
font-weight: 700;
color: var(--c-white);
white-space: nowrap;
}
.plan-lead-badge > span {
font-size: 2.8rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
}
.plan-lead-text {
font-weight: 700;
font-size: 2.8rem;
line-height: 1.3;
margin: -.353em 0 -.214em;
color: var(--c-black);
text-align: center;
white-space: nowrap;
}
/* --- 3つのプランカード (4:306 / 4:8906) --- */
.plan-cards {
position: absolute;
left: 25.1rem;
top: 82.9rem;
width: 93.5rem;
display: flex;
align-items: center;
gap: 2.8rem;
}
.plan-card {
flex: 1 0 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6rem;
padding: 2.8rem 3.2rem;
border-radius: 2rem;
background: var(--c-white);
box-shadow: 0 0 .7rem rgba(0, 0, 0, .25);
}
.plan-card-head {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/* Figmaはアイコンに mb -2px。タグを2px持ち上げる */
.plan-icons {
display: flex;
align-items: flex-end;
margin-bottom: -.2rem;
}
.plan-icons img {
flex-shrink: 0;
height: 5.2rem;
width: auto;
}
/* capトリムの負マージンは内側のspanに当てる。
padding を持つ帯そのものに当てると border box が膨らんで
上のアイコンに被る（PCで10.9px食い込んでいた） */
.plan-tag {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 1.2rem 2rem;
border-radius: 1.2rem;
font-weight: 700;
color: var(--c-white);
white-space: nowrap;
}
.plan-tag > span {
font-size: 2.4rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
}
.plan-card1 .plan-tag { background: var(--c-tab1); }
.plan-card2 .plan-tag { background: var(--c-tab2); }
.plan-card3 .plan-tag { background: var(--c-tab3); }
/* Figmaはカードごとに本文の寄せが違う（1枚目=左 / 2枚目=右 / 3枚目=中央） */
.plan-card-body {
width: 21.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 3.2rem;
font-family: var(--ff-serif);
font-weight: 700;
white-space: nowrap;
}
.plan-card1 .plan-card-body { align-self: flex-start; }
.plan-card2 .plan-card-body { align-self: flex-end; }
.plan-card3 .plan-card-body { align-self: center; }
.plan-name {
width: 100%;
display: flex;
align-items: flex-end;
font-size: 4.4rem;
line-height: 1;
margin: -.207em 0 -.064em;
color: var(--c-black);
}
.plan-name .s { font-size: 3.6rem; }
.plan-price {
display: flex;
align-items: flex-end;
color: var(--c-pink);
}
.plan-price-num {
font-size: 7.2rem;
line-height: 1;
margin: -.207em 0 -.064em;
}
.plan-price-num .s { font-size: 5.5rem; }
.plan-price-unit {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 1.2rem;
}
.plan-price-tax {
font-size: 1.6rem;
line-height: 1;
margin: -.207em 0 -.064em;
}
.plan-price-man {
font-size: 3.6rem;
line-height: 1;
margin: -.207em 0 -.064em;
}
/* --- すべてのプランに含まれる項目 (4:628 / 4:9228) ---
Figmaは stroke 外側。border分を padding から差し引いて外形を合わせる */
.plan-incl {
position: absolute;
left: 25.1rem;
top: 114.1rem;
width: 93.5rem;
height: 34.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2.8rem;
padding: 3.3rem 0;
border: .3rem solid var(--c-pink);
border-radius: 2rem;
background: var(--c-white);
}
.plan-incl-head {
width: 100%;
font-weight: 700;
font-size: 2.8rem;
line-height: 1.3;
margin: -.353em 0 -.214em;
color: var(--c-pink);
text-align: center;
}
.plan-incl-list {
display: flex;
align-items: flex-start;
gap: 2.8rem;
}
.plan-incl-item {
width: 18.3rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6rem;
}
.plan-incl-photo {
flex-shrink: 0;
width: 11.7rem;
height: 11.7rem;
border-radius: 50%;
object-fit: cover;
}
.plan-incl-body {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6rem;
color: var(--c-black);
}
.plan-incl-title {
font-weight: 700;
font-size: 2rem;
line-height: 1;
margin: -.203em 0 -.064em;
white-space: nowrap;
}
.plan-incl-texts {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.2rem;
font-size: 1.6rem;
line-height: 1.5;
text-align: center;
}
.plan-incl-texts p {
width: 100%;
line-height: 1.5;
margin: -.453em 0 -.314em;
}
.plan-incl-note { font-size: 1.4rem; }
/* ============================================================
お客様の声
Figma: PC 4:660 + 4:665 + 4:738 → セクション原点は y5431
SP 4:9256 + 4:9264 + 4:9259 → 原点は y7101
カードは4枚。PCは2枚ずつ2段で、横スクロールもドットも使わない
声の文言は今後差し替わるので、高さはどこも固定しない。
Figmaの高さは min-height（下限）として持ち、文字が増えた分だけ
カード → 段 → セクション → 以降のページが順に伸びる
============================================================ */
.voice {
position: relative;
width: 100%;
max-width: 144rem;
min-height: 98rem; /* Figma y5431〜6411（カード2段ぶん） */
padding-top: 13rem; /* 見出しからカード1段目まで（Figma y5431〜5561） */
margin: 0 auto;
}
.voice-head {
position: absolute;
left: 60.9rem;
top: 0;
width: 22rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.4rem;
text-align: center;
}
.voice-head-en {
font-family: "Playball", cursive;
font-size: 4rem;
line-height: 1;
margin: -.125em 0 -.175em;
color: var(--c-gold);
}
.voice-head-main {
font-family: var(--ff-serif);
font-weight: 700;
font-size: 4.4rem;
line-height: 1;
margin: -.207em 0 -.064em;
color: var(--c-green);
white-space: nowrap;
}
/* 座標で置くのをやめて流れに乗せる。カードが伸びた分だけ .voice が伸びる。
左は auto（＝25.25rem）では0.5pxずれるので Figma の252pxを直接指定する */
.voice-scroll {
width: 93.5rem;
margin-left: 25.2rem;
}
/* PCは2枚で幅93.5remが埋まるので、3枚目から自動で次の段へ折り返す。
段の間隔はFigmaの1段目下端5971〜2段目上端6001 */
.voice-track {
display: flex;
flex-wrap: wrap;
row-gap: 3rem;
align-items: stretch;
justify-content: space-between;
}
/* 高さは下限だけ。同じ段の2枚は align-items:stretch で背の高い方に揃う */
.voice-card {
flex-shrink: 0;
width: 43.8rem;
min-height: 41rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6rem;
padding: 2.8rem 3.2rem;
border-radius: 2rem;
background: var(--c-white);
box-shadow: 0 0 .7rem rgba(0, 0, 0, .25);
}
.voice-avatar {
flex-shrink: 0;
width: 16rem;
height: 16rem;
}
.voice-body {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2.4rem;
color: var(--c-black);
}
.voice-headline {
width: 100%;
font-weight: 700;
font-size: 2rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
}
.voice-text {
width: 100%;
font-size: 1.6rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
}
.voice-dots { display: none; } /* ドットはSPのみ */
/* ============================================================
樹木葬・一般墓のご紹介
Figma: PC 4:994/4:999/4:1083/4:1007/4:1018/4:1059 → 原点 y6519
SP 4:8888/4:9604/4:9592/4:9614/4:9626/4:9668 → 原点 y7711
写真スライダーはFigmaのドットが11個だが素材は3枚なので3枚で実装
============================================================ */
.intro {
position: relative;
width: 100%;
max-width: 144rem;
/* 施設の特徴の項目が増えると .intro-lower が伸びるので、高さは下限だけを決める。
項目が今の数なら 151.7rem のまま（Figma y5971〜7858 の144.7rem ＋ 地図を1.2倍にした7rem） */
min-height: 151.7rem;
padding-bottom: 1.4rem; /* Figmaがブロック下端に取っている余白 */
margin: 0 auto;
overflow: hidden;
}
/* 「基本情報＋施設の特徴」と「地図＋各アクセス」の入れ物。
座標で置くのをやめて縦に積むことで、上のブロックが伸びた分だけ地図が下がる。
上の絶対配置ブロックとの間隔は margin-top で確保する */
.intro-lower {
position: relative;
width: 98rem;
margin: 79.4rem auto 0;
display: flex;
flex-direction: column;
gap: 2.83rem;
}
/* --- 見出し (4:994 / 4:8888) --- */
.intro-head {
position: absolute;
left: 24.45rem;
top: 10.8rem;
width: 95rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.4rem;
text-align: center;
white-space: nowrap;
}
.intro-head-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 2.4rem;
font-family: var(--ff-serif);
font-weight: 700;
}
.intro-head-eyebrow {
font-size: 2.8rem;
line-height: 1;
margin: -.207em 0 -.064em;
color: var(--c-gold);
}
.intro-head-main {
font-size: 4.4rem;
line-height: 1;
margin: -.207em 0 -.064em;
color: var(--c-green);
}
.intro-head-lead {
font-size: 2rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
color: var(--c-black);
}
/* --- 写真スライダー (4:999 / 4:9604) --- */
/* 写真を横一列に並べた帯（.intro-track）を動かして送る。
枠からはみ出した左右が「覗かせ」になる。
touch-action: pan-y で横だけを拾い、縦のページスクロールは妨げない。
カーソルは掴める合図として grab にする（script.js） */
.intro-slider {
position: absolute;
left: 23rem;
top: 25.6rem;
width: 98rem;
height: 39.7rem;
overflow: hidden;
touch-action: pan-y;
cursor: grab;
-webkit-user-select: none;
user-select: none;
}
.intro-slider.is-grabbing { cursor: grabbing; }
/* 写真をドラッグして持ち上げられないようにする（実際の抑止は script.js の dragstart） */
.intro-slider img { -webkit-user-drag: none; }
/* 帯。静止位置は script.js が算出して transform で当てる。
1コマ＝スライド幅74rem＋間隔2rem＝76rem */
.intro-track {
height: 100%;
display: flex;
align-items: center;
gap: 2rem;
will-change: transform;
}
.intro-track.is-animating { transition: transform .3s ease; }
.intro-slide {
flex-shrink: 0;
width: 74rem;
height: 39.7rem;
overflow: hidden;
}
.intro-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 矢印は帯の上に重ねる。覗かせ部分の全体が当たり判定 */
.intro-nav {
position: absolute;
top: 0;
width: 10rem;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: none;
cursor: pointer;
z-index: 1;
}
.intro-nav-prev { left: 0; }
.intro-nav-next { right: 0; }
.intro-nav-arrow {
position: relative;
width: 4rem;
height: 4rem;
}
.intro-dots {
position: absolute;
left: 0;
top: 67.4rem;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 1.65rem;
}
.intro-dot {
width: 1rem;
height: 1rem;
padding: 0;
border: 0;
border-radius: 50%;
background: #d1d1d1;
cursor: pointer;
appearance: none;
}
.intro-dot.is-active { background: var(--c-green); }
/* --- 霊園名 + 区画タグ (4:1007 / 4:9614) --- */
.intro-titlerow {
position: absolute;
left: 23.7rem;
top: 73.2rem;
/* 「詳しいアクセスはこちら」のリンク先。上端ぴったりだと窮屈なので余白を取る。
remなのでSPでも比例して効く */
scroll-margin-top: 4rem;
width: 95.8rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1.6rem;
}
.intro-title {
display: flex;
align-items: flex-end;
gap: 1.2rem;
font-weight: 700;
white-space: nowrap;
}
.intro-title-brand {
font-family: var(--ff-serif);
font-size: 3.8rem;
line-height: 1;
margin: -.207em 0 -.064em;
color: var(--c-green);
}
.intro-title-brand .s { font-size: 2.8rem; }
.intro-title-name {
font-size: 3.8rem;
line-height: 1;
margin: -.203em 0 -.064em;
color: var(--c-ink);
}
.intro-title-name .s { font-size: 2.8rem; }
.intro-title-stack .intro-title-brand { font-size: 3.7rem; }
.intro-title-stack .intro-title-brand .s { font-size: inherit; }
.intro-title-stack .intro-title-name {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .63rem;
margin: 0;
font-size: 2.4rem;
}
.intro-title-stack .intro-title-name .s {
font-size: 1.1rem;
margin: -.203em 0 -.064em;
}
.intro-title-stack .intro-title-name .l { margin: -.203em 0 -.064em; }
.intro-tags {
display: flex;
align-items: center;
gap: 1rem;
}
/* タグの文字はFigmaでトリムされていないので line-height をそのまま使う */
.intro-tag {
display: flex;
align-items: center;
justify-content: center;
padding: .4rem 1.6rem;
border-radius: 2.4rem;
font-size: 1.2rem;
line-height: 1.5;
color: var(--c-white);
white-space: nowrap;
}
.intro-tag1 { background: var(--c-tab1); }
.intro-tag2 { background: var(--c-tab2); }
.intro-tag3 { background: var(--c-tab3); }
/* --- 基本情報 / 施設の特徴･仕様 (4:1018 / 4:9626) --- */
.intro-info {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.intro-info-col {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2rem;
}
/* 見出しは緑の4pxバー＋文字。バーは文字のcap高さに合わせる */
.intro-info-head {
display: flex;
align-items: stretch;
gap: .8rem;
font-weight: 700;
color: var(--c-black);
white-space: nowrap;
}
.intro-info-head::before {
content: "";
flex-shrink: 0;
width: .4rem;
background: var(--c-green);
}
.intro-info-head > span {
font-size: 2rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
}
.intro-info-list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.6rem;
font-size: 1.6rem;
color: var(--c-black);
white-space: nowrap;
}
.intro-info-row {
display: flex;
align-items: center;
gap: .4rem;
}
.intro-info-row p {
line-height: 1.5;
margin: -.453em 0 -.314em;
}
.intro-info-label { white-space: pre; }
.intro-features {
width: 52.4rem;
display: flex;
flex-wrap: wrap;
gap: .8rem;
}
.intro-features li {
width: 12.5rem;
display: flex;
align-items: center;
justify-content: center;
padding: 1.2rem;
border-radius: .4rem;
background: var(--c-green);
}
.intro-features span {
font-weight: 700;
font-size: 1.4rem;
line-height: 1;
margin: -.203em 0 -.064em;
color: var(--c-white);
white-space: nowrap;
}
/* --- 地図 + 各アクセス (4:1059 / 4:9668) --- */
.intro-access {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2rem;
}
.intro-map {
width: 100%;
height: 42rem; /* Figmaの35remを1.2倍 */
overflow: hidden;
}
.intro-map iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.intro-access-body {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2rem;
}
/* 本文が2行の項目と1行の項目が混在するので、上端でそろえる。
中央揃えにすると行数の少ない項目だけ下がって見出しの高さがばらつく */
.intro-access-list {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.intro-access-item {
width: 30rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.2rem;
}
.intro-access-label {
display: flex;
align-items: center;
gap: .4rem;
font-weight: 700;
font-size: 1.6rem;
line-height: 1;
margin: -.203em 0 -.064em;
color: var(--c-green);
white-space: nowrap;
}
.intro-access-icon {
flex-shrink: 0;
width: 1.6rem;
height: 1.3rem;
display: flex;
align-items: center;
justify-content: center;
}
.intro-access-icon svg {
width: 1.6rem;
height: 1.6rem;
}
.intro-access-text {
width: 100%;
font-size: 1.4rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
color: var(--c-black);
}
/* Figmaは太さ0のラインに1pxストローク */
.intro-access-divider {
flex-shrink: 0;
align-self: center; /* 項目は上端そろえだが、区切り線だけは中央に置く */
width: .1rem;
height: 5.6rem;
margin: 0 -.05rem;
background: #cecece;
}
/* ============================================================
見学･ご契約までの流れ
Figma: PC 4:1175（背景）+ 4:1176 → 原点 y8368
SP 4:9692（背景）+ 4:9693 → 原点 y10138
============================================================ */
.flow {
width: 100%;
background: rgba(242, 242, 242, .6);
}
.flow-frame {
position: relative;
width: 100%;
max-width: 144rem;
height: 257.9rem; /* Figma y8368〜10915 ＋STEP2の枠を伸ばした3.2rem */
margin: 0 auto;
overflow: hidden;
}
.flow-head {
position: absolute;
left: 50.05rem;
top: 7.9rem;
width: 43.8rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 2.4rem;
text-align: center;
}
.flow-head-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 2.4rem;
}
.flow-head-en {
font-family: "Playball", cursive;
font-size: 4rem;
line-height: 1;
margin: -.125em 0 -.175em;
color: var(--c-gold);
}
/* 「までの」だけ小さい入れ子。親に大サイズを指定して .s で小サイズ */
.flow-head-main {
display: flex;
align-items: flex-end;
justify-content: center;
font-family: var(--ff-serif);
font-weight: 700;
font-size: 4.4rem;
line-height: 1;
margin: -.207em 0 -.064em;
color: var(--c-green);
white-space: nowrap;
}
.flow-head-main .s { font-size: 3.6rem; }
.flow-head-lead {
font-size: 2rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
color: var(--c-black);
white-space: nowrap;
}
/* --- STEP1〜5 のカード
PC 4:1268 / 4:1269 / 4:1270 / 4:1271 / 4:1276
SP 4:9708 / 4:9707 / 4:9709 / 4:9710 / 4:9711
STEP2〜5は同型（PC 980×291 / SP 335×492 or 458） --- */
.flow-step {
position: absolute;
left: 22.9rem;
width: 98rem;
background: var(--c-white);
}
/* STEP2は無料送迎の注記が入る分、下余白をSTEP3と揃うところまで伸ばし、
以降のステップと点線を同じ分だけ下げる */
.flow-step1 { top: 26.1rem; height: 51.7rem; } /* Figma y8629 */
.flow-step2 { top: 104.8rem; height: 32.3rem; } /* Figma y9416 / 枠+32 */
.flow-step3 { top: 144.4rem; height: 29.1rem; } /* Figma y9780 +32 */
.flow-step4 { top: 180.8rem; height: 29.1rem; } /* Figma y10144 +32 */
.flow-step5 { top: 217.2rem; height: 29.1rem; } /* Figma y10508 +32 */
/* カード上端をまたぐラベル。幅はFigmaの実寸で固定し中央寄せ */
.flow-step-badge {
position: absolute;
left: 4.4rem;
top: -2.4rem;
width: 21rem;
height: 4.7rem;
display: flex;
align-items: center;
justify-content: center;
gap: .4rem;
border-radius: 8rem;
background: var(--c-green);
font-weight: 700;
font-size: 2rem;
color: var(--c-white);
white-space: nowrap;
}
.flow-step-badge span { line-height: 1; margin: -.203em 0 -.064em; }
/* FigmaはSTEP3〜5だけ x266（他はx273）だが、ユーザー指示で全ステップ x273（left 4.4rem）に統一。
幅はhugのため「お見積り」だけ230 */
.flow-step1 .flow-step-badge { top: -2.2rem; }
.flow-step3 .flow-step-badge { width: 23rem; }
.flow-step-photo {
position: absolute;
left: 55.9rem;
top: 4.4rem;
width: 39.1rem;
height: 21.2rem;
border-radius: 1.2rem;
overflow: hidden;
}
.flow-step1 .flow-step-photo { top: 5rem; height: 31.3rem; }
.flow-step-photo img { width: 100%; height: 100%; object-fit: cover; }
/* STEP2はFigmaが独自クロップ（coverではない。PC 379:1463 / SP 379:12264）。STEP5はPC・SPともcover */
.flow-step2 .flow-step-photo img {
position: absolute;
object-fit: fill;
}
.flow-step2 .flow-step-photo img { left: -8.91%; top: -68.88%; width: 150.34%; height: 186.53%; }
/* PCは2行（2行目は2spanを同一行に流す）／SPは3行 */
.flow-step-title {
position: absolute;
left: 4.4rem;
top: 5rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.6rem;
font-weight: 700;
font-size: 2.8rem;
line-height: 1;
color: var(--c-black);
white-space: nowrap;
}
.flow-step-title > p { margin: -.203em 0 -.064em; }
.flow-step-desc {
position: absolute;
left: 4.4rem;
top: 13.5rem;
width: 48.5rem;
font-size: 1.6rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
color: var(--c-black);
}
/* STEP2の無料送迎の注記（PC 4:1298 / SP 4:9753）。
2行組みなのでcapトリムの負マージンは親に持たせ、中のpは素のまま流す */
.flow-step-shuttle {
position: absolute;
left: 4.4rem;
top: 23.9rem;
width: 48.5rem;
font-size: 1.6rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
color: var(--c-black);
}
.flow-step-shuttle-main {
font-weight: 700;
color: #36b496;
}
/* QUO訴求（4:1367）。両端の斜線は 20px / 太さ2.11px を ±65度 回転 */
.flow-step-note {
position: absolute;
left: 7.5rem;
top: 25.7rem;
width: 42.6905rem;
height: 2rem;
display: flex;
align-items: flex-end;
justify-content: center;
gap: .4rem;
}
.flow-step-note-tick {
position: relative;
flex-shrink: 0;
width: .8452rem;
height: 1.8126rem;
}
.flow-step-note-tick::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 2rem;
height: .2111rem;
background: var(--c-green);
transform: translate(-50%, -50%) rotate(65deg);
}
.flow-step-note-tick-r::before { transform: translate(-50%, -50%) rotate(-65deg); }
/* サイズ違いをベースライン揃えにする。capトリムの負マージンが
font-size に比例するため、Figmaのcap上端差がそのまま再現される */
.flow-step-note-text {
display: flex;
align-items: baseline;
font-family: var(--ff-serif);
font-weight: 700;
color: #397021;
white-space: nowrap;
}
.flow-step-note-text > span {
font-size: 2rem;
line-height: 1;
margin: -.207em 0 -.064em;
}
.flow-step-note-text .fsn-quo { font-size: 2.4rem; }
.flow-step-note-text .fsn-num { font-size: 2.8rem; }
/* 特典名が長い月（Amazonギフトカード）。1行が上下のブロックの幅に収まるまで下げる */
.flow-step-note-text .fsn-sm { font-size: 1.7rem; }
.flow-step-note-text .fsn-ga,
.flow-step-note-text .fsn-gb {
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.flow-step-note-text .fsn-ga { background-image: linear-gradient(to bottom, #f6a277, #d86881); }
.flow-step-note-text .fsn-gb { background-image: linear-gradient(to bottom, #ff9863, #f35f82); }
/* ------------------------------------------------------------
グラデーションを文字で切り抜いた要素（background-clip: text）の
下端が欠けるのを防ぐ。
切り抜きの背景はボックス内にしか描かれないが、capトリムは
「cap上端〜ベースライン」を箱にするため、ベースラインより下に出る
カンマや漢字の下端が塗られず消える。実測でカンマは .1375em はみ出す
（箱が確保しているのは .064em ぶんだけ）。
padding-bottom で背景箱を .15em 下に伸ばし、同じ分 margin-bottom を
足して外寸（＝capトリム済みの高さ）は変えない。
------------------------------------------------------------ */
.cpn-amount .l, .cpn-amount .s,
.cpn-amount2 .l, .cpn-amount2 .s,
.flow-step-note-text .fsn-ga,
.flow-step-note-text .fsn-gb {
padding-bottom: .15em;
margin-bottom: -.214em;
}
/* 電話エリア。CTAの部品を流用し、サイズ（CTAの1/1.25）と色だけ上書きする */
.flow-step-phone {
position: absolute;
left: 4.4rem;
top: 30rem;
width: 48.5rem;
}
.flow-step-phone .cta-phone-row { gap: .9056rem; }
.flow-step-phone .cta-phone-number { gap: .4528rem; }
.flow-step-phone .cta-phone-icon { width: 4.3017rem; height: 4.3017rem; }
.flow-step-phone .cta-phone-text {
font-size: 4.8rem;
color: var(--c-teal);
}
.flow-step-phone .cta-phone-badges { gap: .4528rem; }
.flow-step-phone .cta-phone-badge {
padding: .6792rem;
border-width: .2264rem;
border-color: var(--c-teal);
border-radius: .4528rem;
font-size: 1.6rem;
line-height: 1.9rem;
color: var(--c-teal);
}
/* 見学予約ボタン。PCは補足文なし＋矢印あり（SPで反転させる） */
.flow-step-cta {
position: absolute;
left: 4.4rem;
top: 36.27rem;
width: 48.5rem;
}
.flow-step-cta .cta-btn-inner { align-items: flex-end; }
.flow-step-cta .cta-btn-sub { display: none; }
/* --- 資料請求バナー (PC 4:1389 / SP 4:9851) --- */
.flow-request {
position: absolute;
left: 40.2rem;
top: 83.9rem; /* Figma y9207 */
width: 80.7rem;
height: 13.6rem;
border-radius: 1.2rem;
background: var(--c-blue);
}
/* 左に飛び出す吹き出しの尖り（4:1391 の三角を90度回転した形）。
4:1391 の metadata の外接矩形（y9287 / 24.5×25.44）は回転ノードのためズレている。
Union 4:1389 の等倍キャプチャ実測では
「頂点が帯の左19px・底辺の見え幅20px・帯の上下中央」なので、
底辺（幅24.5rem分）を帯に5.5px食い込ませて隙間が出ないようにする */
.flow-request::before {
content: "";
position: absolute;
left: -1.9rem;
top: 5.528rem; /* 頂点が帯の上下中央 y66.5 に来る位置 */
width: 0;
height: 0;
border-top: 1.27225rem solid transparent;
border-bottom: 1.27225rem solid transparent;
border-right: 2.45rem solid var(--c-blue);
}
.flow-request-model {
position: absolute;
left: 1rem;
top: -1.9rem; /* 帯の上にはみ出す */
width: 12rem;
height: 15.5rem;
overflow: hidden;
}
.flow-request-model img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 147.13%;
}
.flow-request-text {
position: absolute;
left: 13.7rem;
top: 3.9rem;
width: 35.9rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .4rem;
font-weight: 700;
}
/* トリム指定のないテキストなので Figma の高さをそのまま line-height に入れる */
.flow-request-lead {
font-size: 2rem;
line-height: 2.4rem;
color: #ffec73;
}
/* PCは2spanを1行に並べ、SPは縦2行にする */
.flow-request-main {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
font-size: 2.4rem;
line-height: 2.9rem;
color: var(--c-white);
text-shadow: 0 0 .4rem #7b7b7b;
white-space: nowrap;
}
/* CTAのボタン部品を流用。PCは「無料資料請求」1行、SPは「無料で資料請求する」＋補足文 */
.flow-request-btn {
position: absolute;
left: 51rem;
top: 3.2rem;
width: 27.4rem;
height: 7.2rem;
padding: 0;
}
.flow-request-btn .cta-btn-inner { align-items: flex-end; }
.flow-request-btn .cta-btn-icon { width: 2.4rem; height: 2.4rem; }
/* flow-icon-file.svg は viewBox 18×22 */
.flow-request-btn .cta-btn-icon-file img {
left: .3rem;
top: .1rem;
width: 1.8rem;
height: 2.2rem;
}
.flow-request-btn .cta-btn-main { font-size: 2rem; line-height: 2.4rem; }
.flow-request-btn .cta-btn-sub { display: none; }
.flow-request-btn-sp { display: none; }
/* ステップ間の点線（4:1325〜4:1328 stroke 3 / dash 6 6）。
STEP2〜4はカード下端から次のラベル上端までの49px。
STEP1だけ資料請求バナーをまたぐので6px下から240px */
.flow-step-line {
position: absolute;
left: 12.3rem;
top: 29.1rem; /* カード下端 */
width: .3rem;
height: 4.9rem;
background: repeating-linear-gradient(to bottom, var(--c-green) 0 .6rem, transparent .6rem 1.2rem);
}
.flow-step1 .flow-step-line { top: 52.3rem; height: 24rem; } /* Figma y9152 */
.flow-step2 .flow-step-line { top: 32.3rem; } /* 伸ばしたカード下端 */
/* ============================================================
一般墓ラインナップ
Figma: PC 616:115 / SP 616:178
掲載位置が変わる想定なので、Figmaのキャンバス座標は使わない。
中身は縦に積むだけで、前後との間隔はこのセクションの上下padding、
ブロック同士の間隔は各ブロックの margin-top で持つ。
文字量が増えてもカードが崩れないよう、高さはどこも固定しない
============================================================ */
.ippan {
width: 100%;
padding: 10rem 0 12.13rem;
background: rgba(225, 233, 247, .6);
}
.ippan-frame {
width: 100%;
max-width: 144rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
/* --- 見出し＋リード --- */
.ippan-head {
display: flex;
flex-direction: column;
align-items: center;
gap: 2.5rem;
}
.ippan-head-main {
font-family: var(--ff-serif);
font-weight: 700;
font-size: 4.4rem;
line-height: 1;
margin: -.207em 0 -.064em;
color: #2215b4;
white-space: nowrap;
}
.ippan-head-lead {
font-size: 2rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
color: var(--c-black);
text-align: center;
}
/* --- 3つのプラン --- */
.ippan-plans-head {
margin-top: 5.6rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 3.6rem;
}
/* capトリムの基準を最大サイズ（44px）に合わせるため、親に「大」を置く */
.ippan-plans-title {
display: flex;
align-items: baseline;
justify-content: center;
font-family: var(--ff-serif);
font-weight: 700;
font-size: 4.4rem;
line-height: 1;
margin: -.207em 0 -.064em;
color: var(--c-black);
white-space: nowrap;
}
.ippan-plans-title .s { font-size: 3.2rem; }
.ippan-plans-num { color: #d90000; }
.ippan-plans-pill {
padding: 1.6rem 2.4rem;
border-radius: 10rem;
background: #2215b4;
}
/* 箱にpaddingがあるので、capトリムの負マージンは内側の文字に持たせる */
.ippan-plans-pill span {
display: block;
font-weight: 700;
font-size: 2.8rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
color: var(--c-white);
white-space: nowrap;
}
/* --- カード3枚 --- */
.ippan-cards {
width: 100%;
margin-top: 6.055rem;
display: flex;
align-items: stretch;
justify-content: center;
gap: 2.8909rem;
}
.ippan-card {
flex-shrink: 0;
width: 36.1366rem;
min-height: 52.9659rem;
padding: 5.472rem 0 3.649rem;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 2rem;
background: var(--c-white);
box-shadow: 0 0 .413rem rgba(0, 0, 0, .25);
}
.ippan-card-photo {
flex-shrink: 0;
width: 25.0891rem;
height: 25.0891rem;
border-radius: 50%;
overflow: hidden;
}
.ippan-card-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ippan-card-body {
display: flex;
flex-direction: column;
align-items: center;
}
/* 見出しの下に敷くマーカー。文字より左右 .65rem ずつ広い */
/* margin-top は「写真の下端 → 文字のcap上端」の距離から、capトリムの
上ぶんを引いた値。数値を変えたいときは 3.15rem だけ触ればよい */
.ippan-card-title {
position: relative;
margin: calc(3.15rem - .203em) 0 -.064em;
padding: 0 .65rem;
font-weight: 700;
font-size: 2.2714rem;
line-height: 1;
color: var(--c-black);
white-space: nowrap;
}
.ippan-card-title::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 1.695rem;
height: 1.2rem;
background: rgba(57, 115, 222, .3);
}
/* 位置指定を持たせて、マーカーより後ろ（＝上）に描かせる */
.ippan-card-title span {
position: relative;
display: inline-block;
}
.ippan-card-price {
margin-top: 4.28rem;
display: flex;
align-items: flex-end;
justify-content: center;
font-family: var(--ff-serif);
font-weight: 700;
color: #d0211e;
white-space: nowrap;
}
.ippan-card-price-num {
font-size: 7.4338rem;
line-height: 1;
margin: -.207em 0 -.064em;
}
.ippan-card-price-num .s { font-size: 1em; } /* PCは小数点以下も同じ大きさ */
.ippan-card-price-unit {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.239rem;
}
.ippan-card-price-tax {
font-size: 1.652rem;
line-height: 1;
margin: -.207em 0 -.064em;
}
.ippan-card-price-man {
font-size: 3.7169rem;
line-height: 1;
margin: -.207em 0 -.064em;
}
/* Figmaは Noto Serif Regular だが、当LPは Noto Serif JP の700しか読んで
いないため（400を足すとCJKの書体が丸ごと増える）Noto Sans JP で代用 */
.ippan-card-tax {
margin: calc(3.046rem - .203em) 0 -.064em;
font-size: 1.652rem;
line-height: 1;
color: #8d837d;
white-space: nowrap;
}
/* --- 補足文。改行位置がPC/SPで違うので br を出し分ける --- */
.ippan-note {
margin-top: 3.479rem;
font-size: 2.3rem;
line-height: 1.5;
color: var(--c-black);
text-align: center;
}
.ippan-br-sp { display: none; }
/* --- 特徴バッジ --- */
.ippan-badges {
margin-top: 4.05rem;
display: flex;
justify-content: center;
gap: 1.496rem;
}
.ippan-badge {
flex-shrink: 0;
width: 27.4279rem;
padding: 1.8rem 3.4908rem;
border-radius: 1.2rem;
background: #2215b4;
}
.ippan-badge span {
display: block;
font-weight: 700;
font-size: 3.2rem;
line-height: 1.3;
margin: -.353em 0 -.214em; /* Noto Sans JP / L=1.3 のcapトリム */
color: var(--c-white);
text-align: center;
}
/* --- 締め --- */
.ippan-closing {
margin-top: 3.3rem;
font-weight: 700;
font-size: 3.7169rem;
line-height: 5.4721rem;
color: #2215b4;
text-align: center;
white-space: nowrap;
}
.ippan-closing span + span { margin-left: 1em; }
/* ============================================================
見学予約･資料請求フォーム
Figma: PC 見出し 4:1184 + フォーム 4:1420 / SP フォーム 4:9923
フォームは項目の増減に耐えるよう、絶対配置ではなく通常フローで組む
============================================================ */
.rsv {
position: relative; /* .rsv-anchor の基準 */
width: 100%;
max-width: 144rem;
margin: 0 auto;
padding-top: 10.6rem; /* CTA3下端 y11423 → 見出し y11529 */
/* 最終セクションなので、追従するフッターバーに送信ボタンが隠れないよう
下に逃げを作る。バー10.44rem＋女性の頭2.104rem＝12.544rem を超える値。
.ffm は position:fixed なのでバー側を下げると画面外に切れるため、
ここで確保する（ユーザー指示 2026-08-04）。
SPもバーは10.4remなので同じ値で足りる */
padding-bottom: 15rem;
}
/* #reservation / #reservation-visit / #reservation-request の3つが
同じ位置（セクション上端）に着地するようにする */
.rsv-anchor {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
}
/* 見出しは「見学･ご契約までの流れ」と同一仕様（Playball40 / serif44 / sans20） */
.rsv-head {
display: flex;
flex-direction: column;
align-items: center;
gap: 2.4rem;
text-align: center;
}
.rsv-head-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 2.4rem;
}
.rsv-head-en {
font-family: "Playball", cursive;
font-size: 4rem;
line-height: 1;
margin: -.125em 0 -.175em;
color: var(--c-gold);
}
.rsv-head-main {
font-family: var(--ff-serif);
font-weight: 700;
font-size: 4.4rem;
line-height: 1;
margin: -.207em 0 -.064em;
color: var(--c-green);
white-space: nowrap;
}
.rsv-head-lead {
font-size: 2rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
color: var(--c-black);
white-space: nowrap;
}
/* --- 電話でも受付 (PC 4:1407 / SP 4:9910) --- */
.rsv-phone {
width: 62.9rem;
margin: 2.6rem auto 0; /* 見出し下端 y11652 → y11678 */
/* Figmaは stroke 外側で枠の高さ99に線が含まれないため、border分を padding から引く */
padding: 1.9rem 1.1rem;
border: .1rem dashed #e45353;
border-radius: .8rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.2rem;
}
.rsv-phone-lead {
display: flex;
align-items: center;
gap: .4rem;
font-weight: 700;
font-size: 2rem;
letter-spacing: .1rem;
color: var(--c-pink);
white-space: nowrap;
}
/* 素材は受話器が上向きなので上下反転する（Figmaも -scale-y-100） */
.rsv-phone-icon {
flex-shrink: 0;
width: 2.3rem;
height: 2.4rem;
transform: scaleY(-1);
}
.rsv-phone-icon img { width: 100%; height: 100%; }
.rsv-phone-lead-text {
line-height: 1;
margin: -.203em 0 -.064em;
}
.rsv-phone-body {
display: flex;
flex-direction: column;
align-items: center;
}
.rsv-phone-row {
display: flex;
align-items: flex-end;
gap: .4rem;
margin-bottom: -.4rem; /* 蛍光マーカーを文字に4px重ねる */
position: relative;
z-index: 1;
}
.rsv-phone-label {
font-weight: 700;
font-size: 1.6rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
color: #444;
white-space: nowrap;
}
.rsv-phone-number {
width: 13.6rem;
font-family: var(--ff-oswald);
font-weight: 500;
font-size: 2.4rem;
line-height: 1.5;
margin: -.392em 0 -.298em; /* Oswald L=1.5 のcapトリム */
color: var(--c-teal);
text-align: center;
}
.rsv-phone-marker {
width: 100%;
height: .8rem;
background: #f6ff00;
mix-blend-mode: multiply;
}
.rsv-body {
width: 98rem;
margin: 5.2rem auto 0; /* 電話ブロック下端 y11777 → フォーム y11829 */
}
.rsv-form {
width: 86.1rem;
margin: 0 auto;
}
.p-country-name { display: none; } /* yubinbango用 */
.rsv-fields {
display: flex;
flex-direction: column;
gap: 3.1rem; /* 区切り線(2px)を挟んで上下31pxずつ */
}
/* 区切り線 4:1437（stroke 2 / dash 4 4 / #d1d1d1） */
.rsv-divider {
height: .2rem;
background: repeating-linear-gradient(to right, #d1d1d1 0 .4rem, transparent .4rem .8rem);
}
/* 郵便番号＋ご住所は区切り線なしで12px空ける */
.rsv-group {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
/* --- 1行の枠組み：PCは左にラベル・右に入力 --- */
.rsv-row {
display: flex;
align-items: flex-start;
gap: 2rem;
}
.rsv-row-mid { align-items: center; }
.rsv-label {
flex-shrink: 0;
width: 23.9rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.rsv-label-text {
font-weight: 700;
font-size: 1.6rem;
line-height: 1.5;
color: var(--c-black);
white-space: nowrap;
}
/* 和文は字面がベースラインより上に寄っているため、行box中央に置くと
文字が下がって見える（実測1.34px）。上下paddingを .053em ずつ振り分けて
字面の中心を枠の中心に合わせる。枠の高さは .4rem + 1.5em のまま変わらない */
.rsv-badge {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: calc(.2rem - .053em) .8rem calc(.2rem + .053em);
border-radius: .4rem;
font-weight: 700;
font-size: 1.2rem;
line-height: 1.5;
color: var(--c-white);
white-space: nowrap;
}
.rsv-badge-req { background: var(--c-pink); }
.rsv-badge-opt { background: var(--c-blue); }
/* --- 見学希望日の開閉（「資料請求をする」を選んでいるあいだ閉じる） ---
display は中間値を持たずアニメーションできないため、
グリッドの行サイズを 1fr ⇄ 0fr で変化させて高さを動かす。
親（.rsv-fields）の gap は高さ0でも残るので、同じ量を margin-bottom で打ち消す。
閉じているあいだ Tabキーで隠れた入力欄に入らないよう visibility も落とし、
閉じ切ってから効かせるために遅延させる（.ffm と同じ書き方）。
入力値のクリアと必須判定の解除は script.js の applyType() が行う */
/* capトリムの文字は自分のボックスより上にはみ出すため、overflow の境界が
そこに重なると「第一希望」の上端が欠ける。中身を .6rem 下げ、同じ量だけ
ラッパーを引き上げて表示位置を保つ（閉じたときの打ち消し量にも織り込む） */
.rsv-collapse {
display: grid;
grid-template-rows: 1fr;
margin-top: -.6rem;
}
.rsv-collapse-inner {
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 3.1rem; /* 見学希望日と区切り線の間。元は .rsv-fields の gap */
}
.rsv-collapse-inner > .rsv-row { margin-top: .6rem; }
.rsv-collapse.is-request {
grid-template-rows: 0fr;
margin-bottom: -2.5rem; /* 親のgap 3.1rem − 上の引き上げ .6rem */
visibility: hidden;
}
/* 動かすのは利用者が選び直したときだけ。読み込み直後とリセット時は
script.js が .is-animated を一旦外すので再生されない */
.rsv-collapse.is-animated {
transition: grid-template-rows .3s ease, margin-bottom .3s ease, visibility 0s;
}
.rsv-collapse.is-animated.is-request {
transition: grid-template-rows .3s ease, margin-bottom .3s ease, visibility 0s linear .3s;
}
/* OS側で「視差効果を減らす」にしている環境では即時切替に戻す */
@media (prefers-reduced-motion: reduce) {
.rsv-collapse.is-animated,
.rsv-collapse.is-animated.is-request { transition: none; }
}
.rsv-field {
flex: 1 0 0;
min-width: 0;
}
/* --- 入力欄の共通見た目（4:1474 系） --- */
.rsv-input,
.rsv-textarea,
.rsv-date input,
.rsv-select select {
width: 100%;
border: .1rem solid var(--c-black);
border-radius: .4rem;
background: var(--c-white);
font-family: inherit;
font-size: 1.6rem;
line-height: 1.5;
color: var(--c-black);
}
.rsv-input,
.rsv-date input,
.rsv-select select {
height: 4.8rem;
padding: 0 1.6rem;
}
.rsv-textarea {
display: block; /* inline-blockだと下に行の余白が3px出る */
height: 23.3rem;
padding: 1.6rem;
resize: vertical;
}
.rsv-input::placeholder,
.rsv-textarea::placeholder { color: #a9a9a9; opacity: 1; }
/* --- ラジオ（Figmaのアイコンをそのまま背景画像で使う） --- */
.rsv-radios {
display: flex;
align-items: center;
gap: 2.8rem;
}
.rsv-radio {
display: flex;
align-items: center;
gap: .8rem;
cursor: pointer;
}
.rsv-radio input {
flex-shrink: 0;
width: 2rem;
height: 2rem;
margin: 0;
appearance: none;
-webkit-appearance: none;
background: url("assets/form-radio-empty.svg") center / 2rem 2rem no-repeat;
}
.rsv-radio input:checked { background-image: url("assets/form-radio-fill.svg"); }
.rsv-radio-text {
font-weight: 700;
font-size: 1.6rem;
line-height: 1;
margin: -.203em 0 -.064em;
color: var(--c-black);
white-space: nowrap;
}
/* --- 見学希望日 --- */
#rsvVisitDateRow .rsv-field {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2.8rem;
}
.rsv-dates {
display: flex;
flex-direction: column;
gap: 4rem;
}
.rsv-date-row {
display: flex;
align-items: flex-start;
gap: 2.2rem;
}
.rsv-date-sub {
flex-shrink: 0;
font-weight: 700;
font-size: 1.6rem;
line-height: 1.5;
/* capトリムに加え、漢字の字面がcapより .117em 上に出るぶんと、
見た目を合わせるための3px（PCのみ）を下げる */
margin: calc(-.453em + .117em + .1875em) 0 calc(-.314em - .117em - .1875em);
color: var(--c-black);
white-space: nowrap;
}
.rsv-date-inputs {
display: flex;
align-items: center;
gap: 2.8rem;
}
.rsv-date,
.rsv-select {
position: relative;
flex-shrink: 0;
height: 4.8rem;
}
.rsv-date { width: 23.5rem; }
.rsv-select { width: 13.9rem; }
.rsv-select select {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
/* 未選択のあいだはプレースホルダ色にする（Figmaの「午前」グレー表示） */
.rsv-select.is-empty select { color: #a9a9a9; }
/* Figmaは下向きの矢印。素材は右向きなので90度回転させる */
.rsv-arrow {
position: absolute;
right: 1.6rem;
top: 50%;
width: 1.6rem;
height: 1.6rem;
transform: translateY(-50%) rotate(90deg);
pointer-events: none;
}
.rsv-arrow img { width: 100%; height: 100%; }
/* input[type=date] はブラウザ既定のアイコンを隠して上の矢印に揃える。
未入力のときは「年／月／日」を疑似要素で出す（既存LPと同じ手法） */
.rsv-date input::-webkit-calendar-picker-indicator {
opacity: 0;
width: 1.6rem;
cursor: pointer;
}
/* iOSは input[type=date] を独自の見た目で描くため、指定した幅を超えて右端が
はみ出し、値も中央寄せになる。見た目の指定を解除して枠内に収め、左揃えに戻す。
日付を選ぶ画面は script.js の showPicker とタップの既定動作で開くので、
見た目を解除しても操作性は変わらない */
.rsv-date input {
appearance: none;
-webkit-appearance: none;
min-width: 0;
}
.rsv-date input::-webkit-date-and-time-value {
text-align: left;
margin: 0;
}
.rsv-date input::-webkit-datetime-edit { padding: 0; }
.rsv-date.is-empty input::-webkit-datetime-edit { color: transparent; }
.rsv-date.is-empty::before {
content: "年／月／日";
position: absolute;
left: 1.6rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.6rem;
line-height: 1.5;
color: #a9a9a9;
pointer-events: none;
}
.rsv-note {
width: 58rem;
font-size: 1.6rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
color: var(--c-black);
}
/* --- 郵便番号 --- */
.rsv-zip {
display: flex;
align-items: center;
gap: 1.2rem;
}
.rsv-zip-mark {
flex-shrink: 0;
font-size: 2rem;
line-height: 1.5;
color: var(--c-black);
}
.rsv-input-zip {
flex-shrink: 0;
width: 9.5rem;
}
/* --- 個人情報の取り扱い（枠はFigma / 文言と太字・行間は既存LPに合わせる） --- */
.rsv-privacy {
display: flex;
flex-direction: column;
align-items: center;
gap: .4rem;
margin-top: 4rem;
}
.rsv-privacy-title {
font-weight: 700;
font-size: 1.6rem;
line-height: 1.5;
color: var(--c-black);
}
.rsv-privacy-box {
width: 100%;
height: 17.2rem;
padding: 1.6rem;
border: .1rem solid var(--c-black);
border-radius: .4rem;
background: var(--c-white);
overflow-y: auto;
font-size: 1.6rem;
line-height: 1.8; /* 既存LPの行間 */
color: var(--c-black);
text-align: justify;
}
.rsv-privacy-head { font-weight: 600; }
.rsv-privacy-txt { margin-top: 1rem; }
.rsv-privacy-name { font-weight: 600; margin-top: 1rem; }
.rsv-consent {
display: flex;
align-items: center;
gap: .4rem;
margin-top: .8rem; /* 枠との間隔 合計1.2rem */
cursor: pointer;
}
.rsv-consent input {
flex-shrink: 0;
width: 1.6rem;
height: 1.6rem;
margin: 0;
appearance: none;
-webkit-appearance: none;
border: .1rem solid var(--c-black);
background: var(--c-white);
}
.rsv-consent input:checked {
border-color: transparent;
background: url("assets/form-checkbox.svg") center / 100% 100% no-repeat;
}
.rsv-consent-text {
font-size: 1.6rem;
line-height: 1.5;
color: var(--c-black);
white-space: nowrap;
}
.rsv-consent .rsv-badge { margin-left: .3rem; }
/* --- 送信ボタン (4:1531) --- */
.rsv-submit {
display: flex;
align-items: center;
justify-content: center;
width: 42.6rem;
margin: 2.4rem auto 0;
padding: 2.9rem 2.6rem 2.8rem 3.3rem;
border: 0;
border-radius: .4rem;
background: var(--c-pink);
box-shadow: 0 .4rem 0 #a02945;
font-family: inherit;
font-weight: 700;
font-size: 2.4rem;
line-height: 1.5;
color: var(--c-white);
white-space: nowrap;
cursor: pointer;
}
/* --- 入力エラー --- */
.rsv-error {
margin-top: .4rem;
font-size: 1.4rem;
line-height: 1.5;
color: #dc3232;
}
.rsv-invalid {
border-color: #dc3232;
background: #fff5f5;
}
/* ============================================================
フッターフロートメニュー
Figma: PC 616:270（1440×147）/ SP 4:14718（375×104）
下スクロールで .is-shown が付いて出てくる（script.js）
PCはバーの高さを既存の10.44remに保つため、Figmaの147pxを
基準に全要素を 104.4 ÷ 147 = 0.7102 倍で縮小して配置する
============================================================ */
.ffm {
position: fixed;
left: 0;
bottom: 0;
z-index: 90;
width: 100%;
background: rgba(3, 50, 0, .9);
/* 女性がバー上端から飛び出す分も含めて隠す */
transform: translateY(calc(100% + 2.5rem));
visibility: hidden;
transition: transform .4s ease, visibility 0s linear .4s;
}
.ffm.is-shown {
transform: translateY(0);
visibility: visible;
transition: transform .4s ease, visibility 0s;
}
/* 背景は画面幅いっぱい、中身は1440で中央寄せ */
.ffm-inner {
position: relative;
width: 100%;
max-width: 144rem;
height: 10.44rem;
margin: 0 auto;
}
/* Figmaは153×187だが、はみ出し量を従来どおりに保つため縦横比のまま
従来のサイズに戻している（下端はバー下端に接地） */
.ffm-woman {
position: absolute;
left: 29.85rem;
top: -2.10396rem;
z-index: 1; /* 吹き出しより前面（Figmaの重なり順） */
width: 10.26324rem;
height: 12.54396rem;
object-fit: cover;
}
/* 女性の右の吹き出し（PCのみ）。左向きの三角は ::before で作る */
.ffm-catch {
position: absolute;
left: 39rem;
top: 1.5624rem;
width: 10.511rem;
height: 7.4571rem;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: .55rem;
padding-left: 1.918rem;
background: #e9e9e9;
border-radius: .8522rem;
font-size: 1.4204rem;
/* 3行の余白を等しく見せるため、行の箱を文字の高さに合わせて gap で空ける */
line-height: 1;
font-weight: 700;
color: var(--c-black);
white-space: nowrap;
}
.ffm-catch::before {
content: "";
position: absolute;
left: -1.4225rem;
top: 1.27rem;
z-index: 2; /* 女性より前面（Figmaの重なり順） */
width: 1.6335rem;
height: 1.0653rem;
background: #e9e9e9;
clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.ffm-catch .s { font-size: 1.1363rem; }
.ffm-catch-limit {
font-size: 1.5624rem;
color: #3b7eb9;
}
.ffm-catch-limit .s { font-size: 1.1363rem; }
/* --- 上段のリード。PCでは非表示にし、SPのみ表示する（各値はSP側で上書き） --- */
.ffm-lead {
position: absolute;
left: 62.5086rem;
top: .48rem;
display: none;
align-items: center;
gap: .5625rem;
font-weight: 700;
color: var(--c-white);
white-space: nowrap;
}
/* トリム指定なし。line-height は比率で持つ
（remで固定すると小さい文字の行boxも同じ高さになり、
ベースライン揃えの結果 行全体が膨らむ） */
.ffm-lead-text {
line-height: 1.2;
font-size: 1.575rem;
}
.ffm-lead-text .y { color: #f6ff00; }
.ffm-lead-text .num { font-size: 2.25rem; }
.ffm-lead-text .yen { font-size: 1.8rem; }
/* 両端の斜線（±65度に倒す） */
.ffm-tick {
position: relative;
flex-shrink: 0;
width: .76074rem;
height: 1.63134rem;
}
.ffm-tick::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 1.8rem;
height: .225rem;
background: var(--c-white);
transform: translate(-50%, -50%) rotate(65deg);
}
.ffm-tick-r::before { transform: translate(-50%, -50%) rotate(-65deg); }
/* --- 下段のボタン2つ --- */
.ffm-btns {
position: absolute;
/* 右端を基準にする（ボタンの幅を変えても右端は動かない） */
right: 31.1rem;
bottom: 1.483rem;
display: flex;
align-items: flex-end;
gap: 1.937rem;
}
.ffm-btn {
flex-shrink: 0;
height: 7.7412rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: .2967rem;
font-weight: 700;
}
/* 電話はPCではパネルを持たず、バーの地の上に直接置く。
既存LP同様、PCではクリックさせない（tel:はPCで意味がないため） */
.ffm-btn-tel {
position: relative;
width: 30.6rem;
height: 7.271rem;
display: block;
border-radius: 0;
pointer-events: none;
}
/* SP用の中身はPCでは出さない */
.ffm-btn-tel .ffm-btn-avatar,
.ffm-btn-tel .ffm-btn-labels { display: none; }
.ffm-tel-top {
position: absolute;
left: .213rem;
top: .1rem;
display: flex;
align-items: center;
gap: .213rem;
}
/* 幅はFigmaのテキストフレーム。実際の文字より広く、右の枠の位置を決める */
.ffm-tel-accent {
width: 16rem;
font-size: 1.1rem;
line-height: 1;
color: var(--c-white);
white-space: nowrap;
}
.ffm-tel-hours {
flex-shrink: 0;
width: 13.2rem;
height: 1.8465rem;
display: flex;
align-items: center;
justify-content: center;
gap: .869rem;
border: .1245rem solid var(--c-yellow);
border-radius: .0993rem;
font-size: 1.1rem;
line-height: 1;
color: #f6ff00;
white-space: nowrap;
}
.ffm-tel-body {
position: absolute;
left: 0;
bottom: .2rem;
display: flex;
align-items: center;
}
.ffm-tel-number {
display: flex;
align-items: center;
gap: .323rem;
color: var(--c-white);
}
.ffm-tel-icon {
flex-shrink: 0;
width: 2.9505rem;
height: 4.0668rem;
}
/* FigmaはAlumni Sans Bold 101.125px。当LPは Oswald で代用するため、
Figmaの番号ブロック幅 30.7957rem に収まる 5.563rem にする */
.ffm-tel-num {
font-family: var(--ff-oswald);
font-weight: 500;
font-size: 4.8rem;
line-height: 1;
margin: -.142em 0 -.048em;
}
.ffm-btn-doc {
width: 28.4082rem;
background: #3b7eb9;
box-shadow: 0 .2967rem 0 #28567e;
}
.ffm-btn-avatar {
flex-shrink: 0;
width: 6.2161rem;
height: 6.2161rem;
border-radius: 50%;
overflow: hidden;
}
.ffm-btn-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* PCでは資料請求ボタンだけがこのラベルを使う（電話ボタン側は非表示） */
.ffm-btn-labels {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .2967rem;
}
.ffm-btn-sub {
font-size: 1.5731rem;
line-height: 1.2;
color: #f6ff00;
white-space: nowrap;
}
.ffm-btn-main {
display: flex;
align-items: baseline;
font-size: 2.4147rem;
line-height: 1.2;
color: var(--c-white);
white-space: nowrap;
}
/* Figma同様、大きい文字に負の右マージンをかけて（無料）を詰める */
.ffm-btn-main .l { margin-right: -.5934rem; }
.ffm-btn-main .s { font-size: 1.1869rem; }
/* パンフレット2冊。Figmaは少し傾けて重ねている */
.ffm-btn-pamph {
position: relative;
flex-shrink: 0;
width: 5.504rem;
height: 5.701rem;
margin-right: .5934rem;
}
.ffm-btn-pamph img { position: absolute; object-fit: cover; }
.ffm-pamph1 { left: .2876rem; top: .1948rem; width: 3.754rem; height: 5.31rem; transform: rotate(-6.48deg); }
.ffm-pamph2 { left: 1.4675rem; top: .1599rem; width: 3.805rem; height: 5.379rem; transform: rotate(5.1deg); }
.ffm-btn-arrow {
flex-shrink: 0;
width: 2.077rem;
height: 2.077rem;
}
.ffm-btn-arrow img { width: 100%; height: 100%; }
/* ============================================================
SP overrides (–767px)
============================================================ */
@media (max-width: 767px) {
/* ---------- Header : SP 4:7466 ---------- */
.hdr {
padding: 1.2rem 0 .8rem;
box-shadow: 0 .2rem .1rem rgba(0, 0, 0, .25);
}
/* SPは「ロゴ ＋ 見学予約」の1行。ラッパーを display:contents で
透過させ、.hdr-inner 直下の flex 行に2要素だけを並べる */
.hdr-inner {
width: auto;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1.8rem;
}
.hdr-top,
.hdr-nav,
.hdr-nav-cta { display: contents; }
.hdr-contact,
.hdr-nav-links,
.hdr-btn-request { display: none; }
.hdr-logo { gap: .4406rem; }
.hdr-logo-brand { font-size: 1.8rem; }
.hdr-logo-place { font-size: 1.8rem; }
.hdr-logo .s { font-size: 1.2rem; }
.hdr-logo-stack .hdr-logo-brand { font-size: 2.8rem; }
.hdr-logo-stack .hdr-logo-place {
gap: .4477rem;
font-size: 1.9rem;
}
.hdr-logo-stack .hdr-logo-place .s { font-size: .85rem; }
.hdr-btn-visit {
width: 8.1rem;
padding: .8rem 0;
border-radius: .4rem;
font-size: 1.4rem;
line-height: 1.7rem;
}
/* ---------- Hero : SP ---------- */
.hero { height: 63.7rem; } /* Figma y53〜690 */
/* SPはFigmaどおり枠の幅で装飾を切る（PCのようにはみ出させない） */
.hero-frame {
max-width: 37.5rem;
overflow: hidden;
}
.hero-bg { /* 4:7408 Rectangle 10 : x=-20 y=53 */
left: -2rem;
top: 0;
width: 41.5rem;
height: 63.7rem;
}
.hero-deco { /* 431:286 Vector : x=25 y=288.08 */
left: 2.5rem;
top: 23.508rem;
width: 43.1rem;
height: 33.081rem;
}
/* アクセスバッジ (4:7418) */
.hero-badges {
left: .85rem;
top: 2.1rem;
gap: .8rem;
}
.hero-badge-access p {
font-size: 1.5rem;
line-height: 1.8rem;
}
.hero-badge-access .m { font-size: 1.3rem; }
.hero-badge-access .s { font-size: 1rem; }
/* 光彩は実機で見比べて決めた値。細い白フチで輪郭の濃さを確保し、
半径の小さい影を重ねて文字の近くに白を集めている。
gap は「に」と「OPEN」が別要素で、後に描かれる「OPEN」の光彩が
「に」に重なってしまうため、その分だけ離している */
.hero-badge-open {
gap: .2rem;
text-shadow:
.1rem 0 .05rem var(--c-white), .0707rem .0707rem .05rem var(--c-white),
0 .1rem .05rem var(--c-white), -.0707rem .0707rem .05rem var(--c-white),
-.1rem 0 .05rem var(--c-white), -.0707rem -.0707rem .05rem var(--c-white),
0 -.1rem .05rem var(--c-white), .0707rem -.0707rem .05rem var(--c-white),
0 0 .3rem var(--c-white), 0 0 .3rem var(--c-white),
0 0 .3rem var(--c-white), 0 0 .3rem var(--c-white),
0 0 .3rem var(--c-white), 0 0 .3rem var(--c-white),
0 0 .3rem var(--c-white), 0 0 .3rem var(--c-white),
0 0 .3rem var(--c-white), 0 0 .3rem var(--c-white);
}
.hero-badge-open .s { font-size: 1.8rem; line-height: 2.2rem; }
.hero-badge-open .l { font-size: 2.2rem; line-height: 2.6rem; }
/* タイトル (4:7410 / 4:7414) */
.hero-title {
text-shadow:
.1rem 0 .05rem var(--c-white), .0707rem .0707rem .05rem var(--c-white),
0 .1rem .05rem var(--c-white), -.0707rem .0707rem .05rem var(--c-white),
-.1rem 0 .05rem var(--c-white), -.0707rem -.0707rem .05rem var(--c-white),
0 -.1rem .05rem var(--c-white), .0707rem -.0707rem .05rem var(--c-white),
0 0 1rem var(--c-white), 0 0 1rem var(--c-white),
0 0 1rem var(--c-white), 0 0 1rem var(--c-white),
0 0 1rem var(--c-white), 0 0 1rem var(--c-white),
0 0 1rem var(--c-white),
0 0 .6rem var(--c-white), 0 0 .6rem var(--c-white);
}
.hero-title-row1 { left: 3.4rem; top: 7.8rem; }
.hero-title-row2 { left: 5.7rem; top: 13.3rem; }
.hero-title-row span { font-size: 4.6rem; }
.hero-title-row .s { font-size: 3.4rem; }
/* 特徴カード (4:7424) */
.hero-features {
left: 2rem;
top: 17.8rem;
gap: .2574rem;
}
.hero-feature {
width: 10.9951rem;
height: 10.2219rem;
}
.hero-feature-wreath { /* Figma inset -3.88% / -6.95% → 116.533 角 */
left: -.4266rem;
top: -.7104rem;
width: 11.6533rem;
height: 11.6533rem;
}
.hero-feature-text { gap: 1.2869rem; }
.hero-feature-text .s { font-size: 1.4rem; }
.hero-feature-text .l { font-size: 2.6rem; }
/* 価格 (4:7452) */
.hero-price {
left: 2.1rem;
top: 49.5rem;
gap: .9374rem;
}
.hero-price-label {
width: 8.7884rem;
gap: .8788rem;
}
/* 光彩は実機で見比べて決めた値。ぼかし影は高精細画面で薄れるため、
細い白フチで輪郭の濃さを確保し、半径の小さい影を重ねて文字の近くに白を集めている。
（PCはFigmaに光彩指定がないのでSPのみ） */
.hero-price-label-main {
font-size: 3rem;
text-shadow:
.1rem 0 .05rem var(--c-white), .0707rem .0707rem .05rem var(--c-white),
0 .1rem .05rem var(--c-white), -.0707rem .0707rem .05rem var(--c-white),
-.1rem 0 .05rem var(--c-white), -.0707rem -.0707rem .05rem var(--c-white),
0 -.1rem .05rem var(--c-white), .0707rem -.0707rem .05rem var(--c-white),
0 0 .5rem var(--c-white), 0 0 .5rem var(--c-white),
0 0 .5rem var(--c-white), 0 0 .5rem var(--c-white),
0 0 .5rem var(--c-white), 0 0 .5rem var(--c-white),
0 0 .5rem var(--c-white), 0 0 .5rem var(--c-white),
0 0 .5rem var(--c-white), 0 0 .5rem var(--c-white);
}
.hero-price-tag {
padding: .7031rem 1.1718rem;
border-radius: .4687rem;
}
.hero-price-tag span { font-size: 2rem; }
/* 光彩は実機で見比べて決めた値。白フチはPCの .2rem を引き継ぐ。
PCで使っている filter による光彩は iOS ではほとんど描かれないため、
SPでは打ち消して text-shadow を重ねる方式にしている */
.hero-price-amount {
filter: none;
text-shadow:
0 0 .5rem var(--c-white), 0 0 .5rem var(--c-white),
0 0 .5rem var(--c-white), 0 0 .5rem var(--c-white),
0 0 .5rem var(--c-white), 0 0 .5rem var(--c-white),
0 0 .5rem var(--c-white), 0 0 .5rem var(--c-white),
0 0 .5rem var(--c-white), 0 0 .5rem var(--c-white);
}
.hero-price-num { font-size: 8.6rem; }
.hero-price-num .s { font-size: 4.8rem; }
/* 「29」だけ光彩を個別に指定する。文字が大きいぶん上の指定では白フチが細く見えるため、
フチを太くしたうえで、影は半透明の1枚にしてにじみを抑えている。
半透明にするため色は var(--c-white) ではなく rgba で書いている */
.hero-price-num .l {
text-shadow:
.4rem 0 .2rem var(--c-white), .2828rem .2828rem .2rem var(--c-white),
0 .4rem .2rem var(--c-white), -.2828rem .2828rem .2rem var(--c-white),
-.4rem 0 .2rem var(--c-white), -.2828rem -.2828rem .2rem var(--c-white),
0 -.4rem .2rem var(--c-white), .2828rem -.2828rem .2rem var(--c-white),
0 0 .7rem rgba(255, 255, 255, .75);
}
.hero-price-unit { gap: 1.3795rem; }
.hero-price-tax { font-size: 1.8749rem; }
.hero-price-man .l { font-size: 3.8rem; }
.hero-price-man .s { font-size: 3rem; }
/* ---------- GraveInfo : SP 4:7611 ---------- */
.ginfo {
max-width: 37.5rem;
margin-top: -4.4rem; /* ヒーロー下端 y690 に対しカード上端 y646 */
}
.ginfo-card {
width: 33.5rem;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 2.4rem 2rem;
}
.ginfo-details {
width: 100%;
gap: 1.6rem;
}
.ginfo-content { width: 100%; }
.ginfo-titlerow { width: 100%; }
.ginfo-title-brand { font-size: 1.8rem; }
.ginfo-title-place { font-size: 1.8rem; }
.ginfo-title .s { font-size: 1.3rem; } /* Figma 4:7616/4:7617 */
.ginfo-title-stack { gap: 1rem; }
.ginfo-title-stack .ginfo-title-place { font-size: 2.2rem; }
.ginfo-tabs { width: 100%; }
.ginfo-tab {
flex: 1 0 0;
min-width: 0;
font-size: 1.2rem;
}
.ginfo-address { font-size: 1.4rem; }
.ginfo-access { width: 100%; }
/* 行数が変わっても余りが出ないよう、高さは中身に合わせる */
.ginfo-access-lines {
flex: 1 0 0;
min-width: 0;
width: auto;
}
.ginfo-access-icon {
width: 1.6rem;
height: 1.2rem;
}
.ginfo-access-icon svg {
width: 1.6rem;
height: 1.6rem;
}
.ginfo-tags { width: 100%; }
/* 折り返し方式にしたので、3個で1行になる幅を明示する。
flex: 1 0 0 のままだと項目数が増えても全部1行に詰め込まれてしまう */
.ginfo-tag {
flex: 0 0 calc((100% - 1.6rem) / 3);
min-width: 0;
width: auto;
padding: 1rem 1.2rem;
font-size: 1.2rem;
}
.ginfo-accesslink-text { font-size: 1.4rem; }
.ginfo-map { display: none; }
/* ---------- 期間限定キャンペーン : SP 4:14601 + 4:14615 ---------- */
.cpn { display: none; }
.spcpn {
display: block;
position: relative; /* リボンの絶対配置の基準。z-indexにも必要 */
z-index: 2; /* CTA背景に重なるため */
width: 33.5rem;
/* リボン上端の位置。Figmaで Frame 6502 がフレーム外に移動しており
正しいy座標が未確定のため、GraveInfoカードに重ならない暫定値 */
margin: 1.6rem auto 0;
/* カードの margin-top が親と相殺して潰れるのを防ぐため padding で持つ */
padding-top: 2.6rem; /* リボン上端 → カード上端（Figma 4:14615 y=26） */
}
.spcpn-card {
position: relative;
z-index: 1;
width: 29.5rem;
margin: 0 auto;
padding: 3.2rem 2rem 2rem;
border-radius: .8rem;
background: var(--c-white);
box-shadow: 0 0 .7rem #a4a4a4;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6rem;
font-family: var(--ff-serif);
font-weight: 700;
text-align: center;
}
.spcpn-head,
.spcpn-head2 {
line-height: 1;
margin: -.207em 0 -.064em;
color: var(--c-black);
}
.spcpn-head { font-size: 2.2rem; }
.spcpn-head2 { font-size: 1.8rem; }
.spcpn .cpn-bar-text { margin: -.203em 0 -.064em; }
.spcpn-visit { /* 4:14616 gap 12 */
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.2rem;
}
.spcpn-visit-row { /* 4:14618 gap 12 */
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 1.2rem;
}
.spcpn-quoimg { /* 4:14619 */
position: relative;
flex: 1 0 0;
min-width: 0;
aspect-ratio: 120 / 80.9677;
overflow: hidden;
}
.spcpn-quoimg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.spcpn-visit-body { /* 4:14620 gap 12 */
display: flex;
flex-direction: column;
align-items: center;
gap: 1.2rem;
}
.spcpn-visit-quo { /* 4:14621 gap 8 */
display: flex;
flex-direction: column;
align-items: center;
gap: .8rem;
}
.spcpn-tag {
width: 100%;
height: 2.9rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--c-pink);
font-size: 1.8rem;
line-height: 1;
color: var(--c-white);
}
.spcpn-tag-sm { /* 偶数月。Amazonギフトカードを2行で入れる */
height: 3.8rem;
font-size: 1.4rem;
line-height: 1.1;
white-space: pre-line;
}
.spcpn-amount,
.spcpn-amount2 {
display: flex;
align-items: flex-end;
justify-content: center;
}
.spcpn-amount .l,
.spcpn-amount2 .l {
line-height: 1;
margin: -.207em 0 -.064em;
background: linear-gradient(to bottom, #ff9863, #f35f82);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.spcpn-amount .s,
.spcpn-amount2 .s {
line-height: 1;
margin: -.207em 0 -.064em;
background: linear-gradient(to bottom, #f6a277, #d86881);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.spcpn-amount .l { font-size: 3rem; }
.spcpn-amount .s { font-size: 1.8rem; }
.spcpn-amount2 .l { font-size: 2.2rem; }
.spcpn-amount2 .s { font-size: 1.4rem; }
/* PC側と同じくカンマ・漢字の下端が切り抜きで欠けるのを防ぐ（上部の解説を参照） */
.spcpn-amount .l, .spcpn-amount .s,
.spcpn-amount2 .l, .spcpn-amount2 .s {
padding-bottom: .15em;
margin-bottom: -.214em;
}
.spcpn-present,
.spcpn-present2 {
line-height: 1;
margin: -.207em 0 -.064em;
color: #397021;
}
.spcpn-present { font-size: 1.8rem; }
.spcpn-present2 { font-size: 2.2rem; }
.spcpn-divider {
width: 100%;
height: 1px;
background: #d9d9d9;
}
.spcpn-contract { /* 4:14629 gap 8 */
display: flex;
flex-direction: column;
align-items: center;
gap: .8rem;
}
.spcpn-contract-row { /* 4:14632 gap 4 */
display: flex;
align-items: center;
justify-content: center;
gap: .4rem;
}
/* 丸に切り出さず、カード全体を見せる。枠は従来どおり幅4.8rem。
カードは枠の80%の大きさにして中央に置く */
.spcpn-dot {
flex-shrink: 0;
width: 4.8rem;
aspect-ratio: 460 / 312; /* 素材の比率 */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.spcpn-dot img {
width: 80%;
height: 80%;
object-fit: contain;
}
.spcpn-dot-sq { /* 偶数月。正方形の枠に合わせて切り出す */
aspect-ratio: 1;
}
.spcpn-dot-sq img { object-fit: cover; }
/* Figma 4:14634 は幅230でカードのpadding領域より広く、nowrap指定。
折り返さずにカード内側へはみ出す挙動を再現する */
.spcpn-contract-body { /* 4:14634 items-end */
display: flex;
align-items: flex-end;
white-space: nowrap;
}
.spcpn-contract-quo { /* 4:14635 gap 9 */
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .9rem;
}
.spcpn-tag2 {
font-size: 1.4rem;
line-height: 1;
margin: -.207em 0 -.064em;
color: var(--c-pink);
}
.spcpn-note {
font-size: 1.2rem;
font-weight: 500;
line-height: 1;
margin: -.207em 0 -.064em;
white-space: nowrap;
color: var(--c-black);
}
/* ---------- CTA : SP 4:7473 + 4:7474 ---------- */
.spcpn2 { margin-top: 0; } /* Figma 4:9758 は紹介セクション直後 */
/* 一般墓セクションの下の余白にバッジを重ねる。
.spcpn は z-index:2 なのでセクションの地の上に乗る。
この値は「49px（CTAの食い込み）− バッジの高さ」で決まり、
これでCTAの上端がセクションの下端に一致して間の白帯が出ない。
偶数月は帯が2行・アイコンが正方形になるぶんバッジが1.9rem高い。
バッジの重なり量を変えるときは .ippan の padding-bottom で調整する */
.spcpn3 { margin-top: -27.14rem; }
.is-even-month .spcpn3 { margin-top: -28.98rem; }
.cta {
/* 期間限定カードがCTA背景に食い込む量。Figmaの2回目（カード下端 y9353 /
背景上端 y9304）に合わせて1回目・2回目とも49pxに揃える */
margin-top: -4.9rem;
background: linear-gradient(-20.3117deg, #7adbb8 0%, #3290c0 74.519%);
}
.cta-frame { height: 83rem; }
.cta-model { display: none; }
.cta-inner {
width: 37.5rem;
margin-top: 7.4rem;
gap: 4rem;
}
.cta-top { gap: 0; }
.cta-title {
width: 100%;
gap: 1.2rem;
}
.cta-title-main {
font-size: 2.6rem;
line-height: 1.3;
margin: -.353em 0 -.214em;
color: #ffec73;
text-align: center;
}
.cta-title-main span { display: block; }
.cta-lead-row {
display: block;
width: 100%;
}
.cta-media {
display: flex;
align-items: center;
width: 33.5rem;
margin: 0 auto;
}
.cta-media-model {
display: block;
position: relative;
flex-shrink: 0;
width: 15.4rem;
height: 16.1rem;
margin-right: -.4rem;
overflow: hidden;
}
/* Figmaのトリミング率で切り出す（素材はPCと同じ 383×731） */
.cta-media-model img {
position: absolute;
left: -4.32%;
top: 0;
width: 104.32%;
height: 189.69%;
}
.cta-media-body {
display: flex;
flex: 1 0 0;
min-width: 0;
flex-direction: column;
align-items: flex-start;
gap: 1.2rem;
}
.cta-title-sub {
font-size: 1.4rem;
line-height: 1.3;
margin: -.353em 0 -.214em;
}
.cta-title-sub span { display: block; }
.cta-media-photos {
display: flex;
justify-content: center;
gap: 1.2rem;
width: 100%;
}
.cta-media-photos img {
flex: 1 0 0;
min-width: 0;
aspect-ratio: 1;
}
.cta-btns {
flex-direction: column;
justify-content: center;
gap: 2rem;
}
.cta-btn {
width: 33.5rem;
padding: 3.2rem 3.6rem;
border-radius: .4rem;
}
.cta-btn-request { box-shadow: 0 .4rem 0 #006599; }
.cta-btn-icon { width: 2.6rem; height: 2.6rem; }
.cta-btn-icon-file img {
left: .3333rem;
top: .1167rem;
width: 1.9333rem;
height: 2.3667rem;
}
.cta-btn-main { font-size: 2.2rem; line-height: 2.6rem; }
.cta-btn-sub { font-size: 1.4rem; line-height: 1.7rem; }
.cta-phone {
width: 100%;
gap: 2rem;
}
.cta-phone-lead {
font-size: 2.6rem;
line-height: 1.3;
margin: -.353em 0 -.214em;
}
.cta-phone-lead span { display: block; }
.cta-phone-pc { display: none; }
.cta-phone-sp {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.2rem;
}
.cta-call {
width: 33.5rem;
height: 11.6rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1.2rem;
border-radius: .4rem;
background: #f39025;
box-shadow: 0 .4rem 0 #c06b10;
font-weight: 700;
}
.cta-call-photo {
position: relative;
flex-shrink: 0;
width: 7.7rem;
height: 8rem;
border-radius: 8rem;
background: var(--c-white);
overflow: hidden;
}
.cta-call-photo img {
position: absolute;
left: -10.02%;
top: 4.97%;
width: 155.54%;
height: 282.84%;
}
.cta-call-labels {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 1.6rem;
white-space: nowrap;
}
.cta-call-group {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.2rem;
color: var(--c-yellow);
}
.cta-call-sub {
font-size: 1.8rem;
line-height: 1;
margin: -.203em 0 -.064em;
}
.cta-call-main {
font-size: 3rem;
line-height: 1;
margin: -.203em 0 -.064em;
}
.cta-call-note {
font-size: 1.4rem;
line-height: 1;
margin: -.203em 0 -.064em;
color: var(--c-white);
}
.cta-sp-hours {
font-weight: 700;
font-size: 1.8rem;
line-height: 2.2rem;
color: var(--c-white);
white-space: nowrap;
}
/* ---------- こんなお悩みありませんか？ : SP 4:7465 ---------- */
.worry-frame { height: 79.9rem; } /* Figma y2083〜2882 */
.worry-header {
left: 2.1rem;
top: 4.7rem;
width: 33.8rem;
gap: 1.6rem;
}
.worry-badge { padding: 1.2rem 2rem; }
.worry-badge > span { font-size: 1.8rem; }
.worry-heading {
font-size: 2.6rem;
white-space: nowrap;
}
.worry-subtitle {
left: 2.1rem;
top: 13.8rem;
width: 33.4rem;
font-size: 1.4rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
}
.worry-blob { display: none; } /* ブロブはPCのみ */
.worry-cards {
display: flex;
position: absolute;
left: 2rem;
top: 18.8rem;
width: 33.5rem;
flex-direction: column;
gap: 2rem;
}
/* Figmaは stroke 外側。border分を padding から差し引いて実寸335×172に合わせる */
.worry-card {
position: static;
width: 100%;
display: flex;
align-items: center;
gap: 1.6rem;
padding: 1.3rem 1.7rem;
border: .3rem solid #b2c5e0;
border-radius: .8rem;
background: #e9f1fd;
}
.worry-card-body {
flex: 1 0 0;
min-width: 0;
width: auto;
align-items: flex-start;
gap: 1.6rem;
}
.worry-card-title {
align-items: flex-start;
gap: 1.2rem;
font-size: 1.8rem;
}
.worry-card-text {
height: auto;
font-size: 1.4rem;
}
/* static にすると内部の絶対配置画像が基準を失うため relative を維持する。
PC用に指定した left / top は relative だとズレとして効くので必ず打ち消す */
.worry-person {
position: relative;
left: auto;
top: auto;
flex-shrink: 0;
width: 8.8rem;
height: 14rem;
}
.worry-person1 img { /* 4:8798 */
left: -3.54%;
width: 107.09%;
object-fit: fill;
}
.worry-person2 img { /* 4:8805 */
top: -.24%;
height: 107.43%;
object-fit: fill;
}
/* ---------- 仙和の樹木葬なら : SP 4:7665 ---------- */
.reason-frame { height: 260.4rem; } /* Figma y2882〜5398 ＋ 枠内に足した文言の分 */
/* 装飾イラストはSP専用のSVGに差し替わる（ の source 側）。
Figmaのノード座標(get_metadata)は外接矩形が膨らんでいて実際の描画枠と一致しないため、
カード枠 4:8828 / 4:8840 / 4:8852 の等倍キャプチャから実測した値を使う。
葉2点だけは外接矩形＝素材実寸で一致するのでノード座標をそのまま使用 */
/* 枠の右上を固定して拡大する。右端は 9.06rem・上端は 23rem のまま */
/* SPは装飾レイヤーを画面幅に戻す（PCの下限1440を打ち消す）。
位置もFigmaのSP座標なので、右端基準にしたものは left に戻す */
.reason-decos { min-width: 0; }
.reason-deco-flower { left: -3.6rem; top: 23rem; width: 12.3rem; height: 20.45rem; transform: rotate(33.55deg); }
.reason-deco-leaf2 { left: 29.9rem; right: auto; top: 26.9rem; width: 5.99914rem; height: 3.69955rem; }
.reason-deco-leaf1 { left: 31.2rem; right: auto; top: 31.6rem; width: 5.70001rem; height: 5.10007rem; }
.reason-deco-peony { left: -2.62rem; top: 58.5rem; width: 9.58rem; height: 16.65rem; transform: rotate(40.94deg); }
.reason-deco-lavender { left: 31.6rem; right: auto; top: 61.5rem; width: 10.22rem; height: 19.3rem; transform: rotate(-44.05deg); }
.reason-deco-tulip { left: 32.5rem; right: auto; top: 94rem; width: 9.6rem; height: 19.47rem; transform: rotate(-49.66deg); }
.reason-deco-anemone { left: -1.3rem; top: 101.5rem; width: 9.38rem; height: 12.91rem; transform: rotate(73.17deg); }
.reason-head {
left: 2.1rem;
top: 4.4rem;
width: 33.4rem;
transform: none;
gap: 2rem;
}
.reason-head-group { gap: 2rem; }
.reason-head-sub { font-size: 2.2rem; }
.reason-head-main span { font-size: 3rem; }
.reason-head-main .s { font-size: 2.4rem; }
/* 2行目は文字の幅が枠と同じで余白がなく、描画がわずかに広い端末では
最後の1文字が3行目に落ちてしまう。1行1文とわかっている文章なので折り返しを止める */
.reason-lead { font-size: 1.4rem; }
.reason-lead span { white-space: nowrap; }
.reason-cards {
left: 2rem;
top: 16.8rem;
width: 33.5rem;
flex-direction: column;
align-items: stretch;
}
.reason-card {
flex: 0 0 auto;
padding: 2.4rem 2rem;
}
.reason-photo { width: 17.1rem; height: 17.1rem; }
.reason-card-body { gap: 2rem; }
/* 文字18pxだと吹き出しの中で下寄りに見えるので、SPだけ3.5px上げる */
.reason-label span {
top: -.35rem;
height: 1.8646rem;
font-size: 1.8rem;
}
.reason-title {
width: 100%;
flex-direction: row;
align-items: flex-start;
justify-content: center;
gap: 0;
font-size: 2.2rem;
}
.reason-text { font-size: 1.4rem; }
/* ---------- 樹木葬はこんな方に選ばれています : SP 4:8863 ---------- */
.chosen {
left: 2rem;
top: 129.6rem;
width: 33.5rem;
height: 59.6rem;
justify-content: center;
padding: 3rem 1.8rem;
}
.chosen-heading span { display: block; }
.chosen-list {
flex-direction: column;
align-items: flex-start;
gap: 1.6rem;
}
.chosen-photo { border-radius: .8rem; }
.chosen-divider {
width: 100%;
height: .2rem;
margin: -.1rem 0;
}
.chosen-note {
width: 100%;
margin-top: .8rem;
padding-top: 2.4rem;
}
.chosen-note-text { font-size: 1.3rem; }
.chosen-note-br { display: inline; }
/* ---------- 写真3枚 : SP 4:8789 ---------- */
.rgallery {
display: flex;
position: absolute;
left: 0;
top: 192.7rem;
width: 37.5rem;
flex-direction: column;
align-items: flex-start;
gap: 2.4rem;
}
.rgallery-item {
position: relative;
left: auto;
top: auto;
z-index: auto;
flex-shrink: 0;
}
.rgallery-couple { width: 30rem; height: 22.9rem; border-radius: 0 2rem 2rem 0; }
.rgallery-visit { width: 30.8rem; height: 18rem; border-radius: 2rem 0 0 2rem; align-self: flex-end; }
.rgallery-flowers { width: 30rem; height: 18rem; border-radius: 0 2rem 2rem 0; }
/* Figmaのトリミング率をそのまま再現する（3枚目だけ cover） */
.rgallery-couple img { left: 0; top: -5.778rem; width: 54.888rem; height: 36.565rem; }
.rgallery-visit img { left: -10.213rem; top: -11.659rem; width: 45.815rem; height: 30.955rem; }
.rgallery-flowers img { object-fit: cover; }
.reason-divider {
position: relative;
left: auto;
top: auto;
width: 100%;
height: .2rem;
background: repeating-linear-gradient(to right, #008941 0 .6rem, transparent .6rem 1.2rem);
}
/* ---------- 3つの樹木葬プラン : SP 4:8883〜4:9228 ---------- */
/* Figmaの背景 4:7464 は「プラン」と「お客様の声」で1枚。
DOMは2セクションに分けて同じ色を敷く */
.plan { background: #f7f7f7; }
.plan-frame { height: 170.3rem; } /* Figma y5398〜7101 */
.plan-head {
left: 0;
top: 3.5rem;
width: 37.5rem;
gap: 2rem;
}
.plan-head-group { gap: 2rem; }
.plan-head-en { font-size: 2.2rem; }
.plan-head-main { font-size: 3rem; }
.plan-head-lead {
width: 33.5rem;
margin-left: auto;
margin-right: auto;
font-size: 1.4rem;
white-space: normal;
}
/* 2行目は文字の幅が枠とほぼ同じで余白がなく、描画がわずかに広い端末では
最後の1文字が3行目に落ちてしまう。1行1文とわかっている文章なので折り返しを止める */
.plan-head-lead span {
display: block;
white-space: nowrap;
}
.plan-band {
top: 16.2rem;
width: 37.5rem;
height: 34.3rem;
}
/* SPは帯が画面幅そのものなので、ぼかした背面は完全に隠れる。描画させない */
.plan-band-blur { display: none; }
.plan-band-front {
left: 0;
width: 100%;
margin-left: 0;
}
/* Figmaのトリミング率をそのまま再現する（素材 1200×720、Figma 379:9259）。
37.5rem×34.3rem の枠に対し w153.21% / h100% / x-36.87% / y0 */
.plan-band-front img {
left: -13.8263rem;
top: 0;
width: 57.4538rem;
height: 34.3rem;
}
/* Figmaの値を左上（left/top）を基準に1.25倍。円・文字・間隔をすべて同率で拡大 */
.plan-free {
left: 1.4rem;
top: 18rem;
width: 12.5rem;
height: 12.5rem;
}
.plan-free-inner {
align-items: center;
gap: 1rem;
width: auto;
}
.plan-free-labels {
width: 5.25rem;
gap: 1rem;
font-size: 1.75rem;
}
.plan-free-price { font-size: 5.25rem; }
.plan-free-price .s { font-size: 2.25rem; }
.plan-lead {
left: 0;
top: 53rem;
width: 37.5rem;
}
.plan-lead-badge > span { font-size: 2.2rem; }
.plan-lead-text { font-size: 2.2rem; }
.plan-lead-text span { display: block; }
.plan-cards {
left: 0;
top: 66.6rem;
width: 37.5rem;
flex-direction: column;
gap: 2.4rem;
}
/* SPは横並び（アイコン＋区画数／プラン名＋価格） */
.plan-card {
flex: 0 0 auto;
width: 33.5rem;
margin: 0 auto;
flex-direction: row;
justify-content: center;
padding: 2.4rem 2rem;
border-radius: .8rem;
}
.plan-card-head {
flex: 1 0 0;
min-width: 0;
width: auto;
justify-content: center;
}
.plan-tag {
padding: .8rem 4rem;
border-radius: .4rem;
}
.plan-tag > span { font-size: 1.8rem; }
/* 4人墓だけアイコン列を縮小して重ねる（Figma 4:9066 は127幅に4つ） */
/* 4人は下端で揃えて重ねる。Figmaでは1人ずつ高さが違い、一律にすると
4人目が縦に伸びて横幅まで広がるため、それぞれの高さを指定する */
.plan-card3 .plan-icons img:nth-child(1) { height: 4.2634rem; }
.plan-card3 .plan-icons img:nth-child(2) { height: 4.2801rem; }
.plan-card3 .plan-icons img:nth-child(3) { height: 4.2495rem; }
.plan-card3 .plan-icons img:nth-child(4) { height: 4.0928rem; }
.plan-card3 .plan-icons img + img { margin-left: -1.311rem; }
.plan-card-body,
.plan-card1 .plan-card-body,
.plan-card2 .plan-card-body,
.plan-card3 .plan-card-body {
align-self: center;
width: 15.2rem;
gap: 1.6rem;
}
.plan-name { font-size: 3.4rem; }
.plan-name .s { font-size: 2.6rem; }
.plan-price-num { font-size: 5.8rem; }
.plan-price-num .m,
.plan-price-num .s { font-size: 3.8rem; }
.plan-price-unit { gap: .8rem; }
.plan-price-tax { font-size: 1.4rem; }
.plan-price-man { font-size: 2.6rem; }
.plan-incl {
left: 2rem;
top: 113.2rem;
width: 33.5rem;
height: 55.6rem;
gap: 2rem;
padding: 2.5rem 1.7rem;
border-radius: .8rem;
}
.plan-incl-head { font-size: 2.2rem; }
.plan-incl-head span { display: block; }
/* 2列ぶんの幅に固定して左詰めにする。
項目が奇数のとき、最後の1つが中央に寄らず1個目の左端に揃う */
.plan-incl-list {
width: 29.4rem; /* 14.1rem × 2 ＋ 列間 1.2rem */
flex-wrap: wrap;
justify-content: flex-start;
gap: 2.4rem 1.2rem;
}
.plan-incl-item { width: 14.1rem; }
.plan-incl-body { gap: 1.2rem; }
.plan-incl-title { font-size: 1.8rem; }
.plan-incl-texts {
gap: 1.2rem;
font-size: 1.4rem;
}
.plan-incl-texts p {
line-height: 1.3;
margin: -.353em 0 -.214em;
}
.plan-incl-note {
font-size: 1.2rem;
line-height: 1.5;
margin: -.453em 0 -.314em;
}
/* ---------- お客様の声 : SP 4:9256 + 4:9264 + 4:9259 ---------- */
.voice {
min-height: 57.1rem; /* Figma y7101〜7672。文字が増えたらここから伸びる */
padding: 7.4rem 0 4rem; /* 上＝見出しからカードまで / 下＝ドットの下の余白 */
background: #f7f7f7; /* 背景 4:7464 はプランと共有だが2セクションに分けて敷く */
}
.voice-head {
left: 10.9rem; /* Figma 4:9256 は中央より3.5px左 */
top: 0;
width: 15rem;
gap: 2rem;
}
.voice-head-en { font-size: 2.2rem; }
.voice-head-main { font-size: 3rem; }
/* 横スクロール＋スナップ。ドットは script.js で同期する */
/* overflow-x:auto は縦も auto になりカードの影が切れる。
上下に影の分（blur 4px）の余白を持たせ、その分 top を戻す */
.voice-scroll {
width: 37.5rem;
margin-left: 0;
padding: .8rem 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
/* トラックの左余白27pxを差し引かないと、スナップで1枚目が左端に貼り付く */
scroll-padding-left: 2.7rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.voice-scroll::-webkit-scrollbar { display: none; }
/* SPは4枚を1列に並べて横スクロールさせるので折り返さない */
.voice-track {
flex-wrap: nowrap;
justify-content: flex-start;
gap: 1.2rem;
padding: 0 2.7rem;
}
.voice-card {
scroll-snap-align: start;
width: 29rem;
min-height: 41.9rem; /* Figma 4:9265 の419px。4枚は stretch で揃う */
padding: 2.8rem 2rem;
}
.voice-avatar { width: 12rem; height: 12rem; }
.voice-headline { font-size: 1.8rem; }
.voice-text { font-size: 1.4rem; }
/* ドットも流れに乗せる。カードが伸びたら一緒に下がる
（Figma 4:9259 y7622 ＝ スクロール枠の下端から1.15rem） */
.voice-dots {
width: 37.5rem;
margin-top: 1.15rem;
display: flex;
align-items: center;
justify-content: center;
gap: 2.1rem;
}
.voice-dot {
width: 1rem;
height: 1rem;
padding: 0;
border: 0;
border-radius: 50%;
background: #d1d1d1;
cursor: pointer;
appearance: none;
}
.voice-dot.is-active { background: var(--c-green); }
/* ---------- 樹木葬・一般墓のご紹介 : SP 4:8888〜4:9668 ---------- */
/* Figma y7672〜9087（141.5rem・上に39pxの余白を含む）だが、アクセス見出しを
2行に折り返している分（後述の .intro-access-body > .intro-info-head）
アクセスブロックが25.78px高くなる。Figmaがブロック下端に取っている
14pxの余白を保つため、その分セクションを伸ばす。
伸ばさないと overflow:hidden で「バスをご利用の方」が切れ、
直後の期間限定リボンと重なって見える（ユーザー指摘 2026-08-04） */
.intro { min-height: 149.42rem; } /* 144.1rem ＋ 地図を1.2倍にした5.32rem */
.intro-head {
left: 0;
top: 3.9rem;
width: 37.5rem;
gap: 2rem;
}
.intro-head-group { gap: 2rem; }
.intro-head-eyebrow { font-size: 2.2rem; }
.intro-head-main { font-size: 3rem; }
/* Figmaは34.5rem（2行）だが、文字量686pxに対して2行分が690pxという限界値で
Chromeの行分割だと3行になる。2行に収めるため35.5remに広げる */
.intro-head-lead {
width: 35.5rem;
margin-left: auto;
margin-right: auto;
font-size: 1.4rem;
white-space: normal;
}
.intro-slider {
left: 0;
top: 17rem;
width: 37.5rem;
height: 27.2rem;
}
/* 1コマ＝スライド幅31.9rem＋間隔.8rem＝32.7rem */
.intro-track { gap: .8rem; }
.intro-slide {
width: 31.9rem;
height: 27.2rem;
}
/* SPは覗かせ幅20px */
.intro-nav { width: 2rem; }
.intro-nav-arrow {
position: absolute;
width: 3rem;
height: 3rem;
}
/* 矢印30pxの中心を、覗かせと本体写真の間の余白の中心（24 / 351）に合わせる */
.intro-nav-prev .intro-nav-arrow { left: .9rem; }
.intro-nav-next .intro-nav-arrow { right: .9rem; }
.intro-dots {
top: 45.5rem;
gap: 1.29rem;
}
.intro-titlerow {
position: static;
margin: 50.4rem 0 0 2rem;
width: auto;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 1.2rem;
}
.intro-title-brand { font-size: 2rem; }
.intro-title-brand .s { font-size: 1.5rem; }
.intro-title-name { font-size: 2rem; }
.intro-title-name .s { font-size: 1.5rem; }
.intro-title-stack {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.intro-title-stack .intro-title-brand { font-size: 2rem; }
.intro-title-stack .intro-title-name {
display: block;
margin: -.203em 0 -.064em;
font-size: 2.2rem;
}
.intro-title-stack .intro-title-name .s { font-size: inherit; margin: 0; }
.intro-title-stack .intro-title-name .l { margin: 0; }
.intro-tags { gap: 1rem; }
.intro-lower {
width: 33.5rem;
margin-top: 3rem;
gap: 2.5rem;
}
.intro-info {
flex-direction: column;
justify-content: flex-start;
gap: 2.8rem;
}
.intro-info-col { gap: 1.2rem; }
.intro-info-head::before { width: .4rem; }
.intro-info-head > span { font-size: 1.8rem; }
.intro-info-list { font-size: 1.4rem; }
.intro-features {
width: 33.5rem;
gap: .8rem 1rem;
}
.intro-features li { width: 10.5rem; }
.intro-features span { font-size: 1.2rem; }
/* 位置は .intro-lower が決めるので、ここでは幅だけ揃える */
.intro-map { height: 31.92rem; } /* Figmaの26.6remを1.2倍 */
/* SPは1行に収まらないので折り返す（Figmaは枠外にはみ出したまま）。
緑のバーは stretch なので2行分の高さに伸びる */
.intro-access-body > .intro-info-head {
width: 100%;
white-space: normal;
}
/* 2行になるので行間を詰める（L=1.25 のトリム値） */
.intro-access-body > .intro-info-head > span {
font-size: 2rem;
line-height: 1.25;
margin: -.328em 0 -.189em;
}
/* SPは3件を縦に積み、区切り線は横線 */
.intro-access-list {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 1.6rem;
}
.intro-access-divider {
width: 100%;
height: .1rem;
margin: -.05rem 0;
}
/* ---------- 見学･ご契約までの流れ : SP 4:9693 ---------- */
.flow-frame { height: 387.2rem; } /* Figma y10138〜13882 ＋STEP2の枠を伸ばした6.9rem */
.flow-head {
left: 2.1rem;
top: 4rem;
width: 33.4rem;
gap: 2rem;
}
.flow-head-group { gap: 2rem; }
.flow-head-en { font-size: 2.2rem; }
.flow-head-main { font-size: 3rem; }
.flow-head-main .s { font-size: 2.4rem; }
.flow-head-lead { font-size: 1.4rem; }
/* --- STEP1〜5 : SP 4:9708 / 4:9707 / 4:9709 / 4:9710 / 4:9711 ---
STEP2以降はSTEP1カードを30px伸ばした分だけ Figma座標より下げる */
.flow-step {
left: 2rem;
width: 33.5rem;
box-shadow: 0 0 .4rem rgba(0, 0, 0, .25);
}
/* Figmaは107.2rem。カード内の期間限定カードは1回目（4:14615）のブロックを
流用しており 4:9869 より高いため、下余白を保つ分だけ伸ばす。
注意書きを足して更に高くなったので 110.2rem → 116.1rem。
高さは月によらず、背の高い偶数月に合わせる */
/* STEP2はFigmaの枠（49.2rem）に無料送迎の注記が収まらないため4.2rem伸ばし、
以降のステップと点線を同じ分だけ下げる */
.flow-step1 { top: 18.5rem; height: 116.1rem; } /* Figma y10323 */
.flow-step2 { top: 166.2rem; height: 56.1rem; } /* Figma y11711 +30 / 枠+69 */
.flow-step3 { top: 229.8rem; height: 49.2rem; } /* Figma y12278 +30 +69 */
.flow-step4 { top: 286.5rem; height: 45.8rem; } /* Figma y12845 +30 +69 */
.flow-step5 { top: 339.6rem; height: 45.8rem; } /* Figma y13376 +30 +69 */
.flow-step-badge {
left: 2rem;
top: -2.4rem;
width: 18rem;
height: 4.5rem;
font-size: 1.8rem;
}
/* SPはラベルの上位置・幅が全ステップ共通なのでPCの個別値を戻す */
.flow-step1 .flow-step-badge { top: -2.4rem; }
.flow-step3 .flow-step-badge { width: 18rem; }
.flow-step-photo {
left: 2rem;
top: 3.7rem;
width: 29.5rem;
height: 21.2rem;
}
.flow-step1 .flow-step-photo { top: 3.7rem; height: 21.2rem; }
/* SPのSTEP2もFigmaの独自クロップ（379:12264） */
.flow-step2 .flow-step-photo img { left: -32.98%; top: -77.6%; width: 205.56%; height: 216.68%; }
/* Figmaは2.2rem。STEP3の2行目「費用についてご説明いたします。」が22pxだと
327pxでカード幅335pxをはみ出すため、ユーザー指示で全ステップ共通2.1remにする */
.flow-step-title {
left: 2rem;
top: 26.5rem;
font-size: 2.1rem;
}
.flow-step1 .flow-step-title { top: 27rem; }
/* SPは3行組み。2行目のpを縦並びにしてcapトリムをspanへ移す */
.flow-step-title > p {
margin: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.6rem;
}
.flow-step-title > p > span { margin: -.203em 0 -.064em; }
/* 枠はFigmaでは29.5remだが、1行がちょうど21文字（294px）で埋まり余白が1pxしかないため、
描画がわずかに広い端末では1文字あふれて行数が増え、下のボタンに重なってしまう。
22文字は入らない30.5remまで広げて余裕を作る。行の折り返し位置は変わらない
（最も長い行が294pxのままなので、見た目にも影響しない） */
.flow-step-desc {
left: 2rem;
top: 33.3rem;
width: 30.5rem;
font-size: 1.4rem;
}
.flow-step1 .flow-step-desc { top: 37rem; }
.flow-step-shuttle {
left: 2rem;
top: 48.6rem;
width: 29.5rem;
font-size: 1.4rem;
}
.flow-step-note { display: none; } /* SPは期間限定カードが代わりに入る */
.flow-step-phone {
left: 0;
top: 48.5rem;
width: 33.5rem;
}
.flow-step-phone .cta-call { width: 29.5rem; }
.flow-step-phone .cta-sp-hours { color: var(--c-black); } /* 白カード上なので黒 */
.flow-step-cta {
left: 2.1rem;
top: 65.1rem;
width: 29.5rem;
padding: 3.2rem 0;
}
.flow-step-cta .cta-btn-inner { align-items: flex-start; }
.flow-step-cta .cta-btn-sub { display: block; }
.flow-step-cta .cta-btn-arrow { display: none; }
/* STEP1カード内の期間限定カード（4:9869） */
.spcpn-step {
position: absolute;
left: 0;
top: 79.1rem;
margin: 0;
}
/* SPの点線は 4:9907 / 4:9908 / 4:9909（x76・h49・stroke3・dash 6 6 でPCと同じ）。
STEP1→資料請求バナー間には無いのでSTEP1だけ非表示 */
.flow-step-line {
left: 5.6rem;
top: 49.4rem; /* カード下端(49.2rem)＋2 */
}
.flow-step1 .flow-step-line { display: none; }
.flow-step2 .flow-step-line { top: 56.3rem; } /* 伸ばしたカード下端(56.1rem)＋2 */
.flow-step4 .flow-step-line { top: 45.8rem; } /* Figmaはこれだけカード下端ぴったり */
/* --- 資料請求バナー : SP 4:9851 --- */
.flow-request {
left: 2rem;
/* Figma y11429（=129.1rem）。STEP1カードを30px伸ばした分だけ下げて
カードとの間隔34pxを保つ */
top: 138rem;
width: 33.5rem;
height: 21.7rem;
border-radius: .4rem;
}
.flow-request::before { display: none; } /* SPは尖りなし */
.flow-request-model {
left: 2.1rem;
top: -1.4rem;
width: 10.4rem;
height: 11.7rem;
}
.flow-request-model img { height: 170.24%; }
.flow-request-text {
left: 13.6rem;
top: 1.8rem;
width: 17.6rem;
}
.flow-request-lead { font-size: 1.4rem; line-height: 1.7rem; }
.flow-request-main {
flex-direction: column;
align-items: center;
justify-content: flex-start;
font-size: 2.2rem;
line-height: 2.6rem;
}
.flow-request-btn {
left: 2rem;
top: 10.3rem;
width: 29.5rem;
height: 8.6rem;
padding: 0;
}
.flow-request-btn .cta-btn-inner { align-items: flex-start; }
.flow-request-btn .cta-btn-icon { width: 2.6rem; height: 2.6rem; }
.flow-request-btn .cta-btn-icon-file img {
left: .3333rem;
top: .1167rem;
width: 1.9333rem;
height: 2.3667rem;
}
.flow-request-btn .cta-btn-main { font-size: 2.2rem; line-height: 2.6rem; }
.flow-request-btn .cta-btn-sub { display: block; }
.flow-request-btn-pc { display: none; }
.flow-request-btn-sp { display: inline; }
/* ---------- 見学予約･資料請求フォーム : SP 見出し4:9701 / 電話4:9910 / 本体4:9923 ---------- */
.rsv { padding-top: 1.7rem; } /* CTA3下端 y14959 → 見出し y14976 */
.rsv-head { gap: 2rem; }
.rsv-head-group { gap: 2rem; }
.rsv-head-en { font-size: 2.2rem; }
/* SPは「見学予約･資料請求 / フォーム」の2行組み（4:9704 は 255×58） */
.rsv-head-main {
font-size: 3rem;
line-height: 1.2;
margin: -.307em 0 -.164em;
}
.rsv-head-main span { display: block; }
.rsv-head-lead { font-size: 1.4rem; }
/* --- 電話でも受付 : SP 4:9910 --- */
.rsv-phone {
width: 33.5rem;
margin-top: 1.7rem; /* 見出し下端 y15100 → y15117 */
padding: 1.5rem 1.1rem; /* Figma 16/12 − border 1 */
}
/* SPは2行組み。アイコンは28px */
.rsv-phone-lead { font-size: 1.4rem; letter-spacing: .07rem; }
.rsv-phone-icon { width: 2.8rem; height: 2.8rem; }
.rsv-phone-lead-text {
line-height: 1.3;
margin: -.353em 0 -.214em;
}
.rsv-phone-lead-text span { display: block; }
.rsv-phone-number { width: 14.4rem; }
.rsv-body {
width: 37.5rem;
margin-top: 3.4rem; /* 電話ブロック下端 y15212 → フォーム y15246 */
}
.rsv-form { width: 33.5rem; }
.rsv-fields { gap: 1.9rem; } /* 区切り線を挟んで上下19pxずつ */
.rsv-collapse-inner { gap: 1.9rem; }
.rsv-collapse.is-request { margin-bottom: -1.3rem; } /* 1.9rem − 上の引き上げ .6rem */
/* SPはラベルを入力の上に積む */
.rsv-row {
flex-direction: column;
align-items: stretch;
gap: .8rem;
}
.rsv-row-mid { align-items: stretch; }
/* SPはバッジを項目名の右隣に置く（同意チェックと同じ組み方） */
.rsv-label {
width: 100%;
justify-content: flex-start;
gap: .6rem;
}
.rsv-label-text { font-size: 1.4rem; }
/* --- 見学希望日 --- */
.rsv-dates { gap: 2.4rem; }
.rsv-date-row { gap: 2rem; }
/* PCの3pxは打ち消し、SPは見た目を合わせるぶんとして1px下げる */
.rsv-date-sub {
font-size: 1.4rem;
margin: calc(-.453em + .117em + .0714em) 0 calc(-.314em - .117em - .0714em);
}
/* SPは日付と時間帯を縦積み */
.rsv-date-inputs {
flex-direction: column;
align-items: flex-start;
gap: 1.2rem;
}
.rsv-date { width: 25.9rem; }
.rsv-note {
width: 33.5rem;
font-size: 1.4rem;
}
/* --- 郵便番号 --- */
.rsv-zip-mark { font-size: 1.6rem; }
/* --- 個人情報の取り扱い --- */
.rsv-privacy { margin-top: 2.4rem; }
.rsv-privacy-title { font-size: 1.4rem; }
.rsv-privacy-box {
font-size: 1.5rem; /* 既存LPのSP値 */
line-height: 1.5;
}
.rsv-consent-text {
font-size: 1.4rem;
white-space: normal;
}
/* 項目名とバッジの間隔を .rsv-label と揃える */
.rsv-consent .rsv-badge { margin-left: .6rem; }
/* --- 送信ボタン (4:10034) --- */
.rsv-submit { width: 33.5rem; }
/* ---------- 一般墓ラインナップ : SP 616:178 ---------- */
/* 下の余白に .spcpn3 が食い込む。食い込み量（27.14rem / 偶数月28.98rem）＋
一般墓の本文とバッジの間隔4rem */
.ippan { padding: 4rem 0 31.14rem; }
.is-even-month .ippan { padding-bottom: 32.98rem; }
.ippan-frame { max-width: 37.5rem; }
.ippan-head {
width: 33.4rem;
gap: 2rem;
}
.ippan-head-main { font-size: 3rem; }
/* SPは左揃え（Figmaは枠いっぱいの3行） */
.ippan-head-lead {
font-size: 1.4rem;
text-align: left;
}
.ippan-plans-head {
margin-top: 4.3rem;
gap: 1.97rem;
}
/* SPは「仙和のわかりやすい／3つのプランをご用意」の2行 */
/* L=47/44 なので、その行間に合わせたcapトリムを使う */
.ippan-plans-title {
display: block;
line-height: 4.7rem;
margin: -.2411em 0 -.0981em;
text-align: center;
}
/* 小さい方の文字は行の高さに影響させない（行の箱を47pxに保つため）。
1行目だけは自分で行を作るので行間を戻す */
.ippan-plans-title .s {
font-size: 2.8rem;
line-height: 0;
}
.ippan-plans-title span { display: inline; }
/* 1行目の行間を詰めて、2行目との余白をFigmaの11pxに合わせる */
.ippan-plans-title span:first-child {
display: block;
line-height: 3.6rem;
}
.ippan-plans-pill { padding: 1.6rem 2.4rem; border-radius: 8rem; }
.ippan-plans-pill span { font-size: 2.2rem; }
/* カードは縦積み。写真が左、文字が右 */
.ippan-cards {
margin-top: 4rem;
flex-direction: column;
align-items: center;
gap: 1.8rem;
}
.ippan-card {
width: 33.5rem;
min-height: 16.1rem;
padding: 1.6rem 1.5rem;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 1.6rem;
border-radius: .8rem;
box-shadow: 0 0 .4rem rgba(0, 0, 0, .25);
}
/* SPは丸くせず、Figmaのトリミングで見せる。数値はカードごとに調整できる */
.ippan-card-photo {
position: relative;
width: 11.4rem;
height: 12.9rem;
border-radius: 0;
}
.ippan-card-photo img {
position: absolute;
max-width: none;
object-fit: fill;
}
.ippan-card1 .ippan-card-photo img { width: 121.15%; height: 107.06%; left: -14.64%; top: -5.23%; }
.ippan-card2 .ippan-card-photo img { width: 127.99%; height: 113.11%; left: -17.03%; top: -2.24%; }
.ippan-card3 .ippan-card-photo img { width: 148.64%; height: 131.36%; left: -27.71%; top: -9.69%; }
.ippan-card-body { align-items: flex-start; }
.ippan-card-title {
margin: 0 0 -.064em;
padding: 0 .2rem;
font-size: 1.4rem;
}
.ippan-card3 .ippan-card-title { font-size: 1.5rem; }
.ippan-card-title::before {
top: 1.05rem;
height: .7rem;
}
.ippan-card-price { margin-top: 1.6rem; }
.ippan-card-tax { margin-top: calc(1.5rem - .203em); }
.ippan-card-price-num { font-size: 5.4475rem; }
.ippan-card-price-num .s { font-size: .6207em; }
.ippan-card-price-unit { gap: .7514rem; }
.ippan-card-price-tax { font-size: 1.3149rem; }
.ippan-card-price-man { font-size: 2.442rem; }
/* 3枚目は桁が1つ多いので、価格まわりだけ0.9倍にして枠に収める */
.ippan-card3 .ippan-card-price-num { font-size: 4.9028rem; }
.ippan-card3 .ippan-card-price-unit { gap: .6762rem; }
.ippan-card3 .ippan-card-price-tax { font-size: 1.1834rem; }
.ippan-card3 .ippan-card-price-man { font-size: 2.1978rem; }
.ippan-card-tax { font-size: 1.4rem; }
/* SPはFigmaでトリムが効いているので、capトリムを入れる */
.ippan-note {
margin: calc(2.8rem - .453em) 0 -.314em;
font-size: 1.2rem;
}
.ippan-br-pc { display: none; }
.ippan-br-sp { display: inline; }
.ippan-badges {
width: 33.528rem;
margin-top: 2.82rem;
flex-wrap: wrap;
gap: .892rem .889rem;
}
.ippan-badge {
width: 16.3051rem;
padding: 1.07rem 2.0752rem;
border-radius: .7134rem;
}
.ippan-badge span { font-size: 1.9023rem; }
.ippan-closing {
margin-top: 2rem;
font-size: 1.9rem;
line-height: 2.35rem;
}
.ippan-closing span { display: block; }
.ippan-closing span + span { margin-left: 0; }
/* ---------- フッターフロートメニュー : SP 4:14718 ---------- */
/* SPは女性なし。上下paddingで組む素直な縦積み */
.ffm { transform: translateY(100%); }
.ffm-inner {
max-width: 37.5rem;
height: 10.4rem;
padding: .8rem 0 1.6rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .4rem;
}
.ffm-woman,
.ffm-catch { display: none; }
/* 絶対配置をやめて縦積みの流れに乗せる（position:static は使わない） */
.ffm-lead,
.ffm-btns {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
}
/* PCでは非表示にしているので、SPだけ表示に戻す */
.ffm-lead {
display: flex;
gap: .5rem;
}
.ffm-lead-text { font-size: 1.4rem; } /* line-height 1.2 は継承（20px×1.2=24） */
.ffm-lead-text .num { font-size: 2rem; }
.ffm-lead-text .yen { font-size: 1.6rem; }
.ffm-tick {
width: .6762rem;
height: 1.4501rem;
}
.ffm-tick::before {
width: 1.6rem;
height: .2rem;
}
/* 特典名が長い月。文字と斜線をまとめて0.85倍にして画面幅1行に収める */
.ffm-lead-sm { gap: .425rem; }
.ffm-lead-sm .ffm-lead-text { font-size: 1.19rem; }
.ffm-lead-sm .ffm-lead-text .num { font-size: 1.7rem; }
.ffm-lead-sm .ffm-lead-text .yen { font-size: 1.36rem; }
.ffm-lead-sm .ffm-tick {
width: .5748rem;
height: 1.2326rem;
}
.ffm-lead-sm .ffm-tick::before {
width: 1.36rem;
height: .17rem;
}
.ffm-btns {
align-items: center;
justify-content: center;
gap: .9rem;
}
.ffm-btn {
height: 5.2rem;
border-radius: .2rem;
}
/* SPはFigma 4:14724 のオレンジのボタン（CTAの「電話をかける」と同じ配色）。
PC用の指定を打ち消す */
.ffm-btn-tel {
position: relative;
width: 16.3rem;
height: 5.2rem;
display: flex;
flex-direction: row;
justify-content: center;
gap: .4rem;
background: #f39025;
border: 0;
border-radius: .2rem;
box-shadow: 0 .2rem 0 #c06b10;
pointer-events: auto;
}
.ffm-btn-tel .ffm-btn-avatar,
.ffm-btn-tel .ffm-btn-labels { display: flex; }
.ffm-tel-top,
.ffm-tel-body { display: none; }
.ffm-btn-doc {
width: 16.3rem;
box-shadow: 0 .2rem 0 #28567e;
}
.ffm-btn-avatar {
width: 3.3153rem;
height: 3.3153rem;
}
.ffm-btn-labels {
align-self: center;
margin-top: 0;
gap: .2rem;
}
.ffm-btn-sub { font-size: 1rem; }
.ffm-btn-main { font-size: 1.4rem; }
.ffm-btn-main .l { margin-right: -.4rem; }
.ffm-btn-main .s { font-size: .8rem; }
.ffm-btn-pamph {
width: 3.7099rem;
height: 3.8421rem;
margin-right: .4rem;
}
.ffm-pamph1 { left: .1939rem; top: .1313rem; width: 2.5301rem; height: 3.5795rem; }
.ffm-pamph2 { left: .9891rem; top: .1076rem; width: 2.5648rem; height: 3.6256rem; }
.ffm-btn-arrow {
width: 1.4rem;
height: 1.4rem;
margin-left: 0;
}
}
/* ============================================================
ボタンのホバー（PCのみ）
対象のボタンは下向きの影で厚みを出しているので、
影の高さぶん下げて影を消し、押し込まれた状態を作る。
hover: hover でマウスのある環境に限定する。これが無いと
スマホでタップ後にホバー状態が残り続ける。
min-width も併せてSP幅では効かないようにする。
transform はレイアウト計算に影響しないため、絶対配置で
組んだ本デザインの寸法・重なり順は変わらない。
ボタン内の絶対配置の子（アイコン画像・パンフレット画像）は
.cta-btn-icon / .ffm-btn-pamph が position: relative を
持っているのでそちらが基準のまま動かない。
============================================================ */
@media (hover: hover) and (min-width: 768px) {
.cta-btn-visit,
.cta-btn-request,
.rsv-submit,
.ffm-btn-doc {
transition: transform .1s ease, box-shadow .1s ease;
}
.cta-btn-visit:hover,
.rsv-submit:hover {
transform: translateY(.4rem);
box-shadow: 0 0 0 #a02945;
}
.cta-btn-request:hover {
transform: translateY(.4rem);
box-shadow: 0 0 0 #215a65;
}
.ffm-btn-doc:hover {
transform: translateY(.2967rem);
box-shadow: 0 0 0 #28567e;
}
/* 期間限定バッジはCTA接近で拡大する transform を使っているので、
沈ませるホバーだと拡大と競合する。不透明度だけで反応を示す */
.cpn:hover { opacity: .85; }
}
/* ===== senwa-ohara 追記 ===== */
/* プランが4つ（樹木葬合葬墓・2人墓・4人墓・個別集合墓）になったための追記。
既存ルールは書き換えず、ここで上書きする */
:root {
--c-tab4: #b0781e;
--c-tab5: #3d6fa8;
--c-tab6: #5f8a3a;
}
/* Figma 379:1344 では4つ目（永代供養付個別集合墓）も 4人墓と同じ紫 #890077 */
.ginfo-tab4 { background: var(--c-tab3); }
.intro-tag4 { background: var(--c-tab3); }
/* 4プランのタグは1行に収まらない幅の場合に備えて折り返す */
.intro-tags { flex-wrap: wrap; }
/* ===== senwa-ohara 追記（Figma 379:786 照合） =====
Figmaはテンプレートと構成が違うため、以下を追記で合わせる。
・「こんな方に」の下の注記なし（PC 379:1983 / SP 379:14706）
・プランは樹木葬3枚＋別枠の個別集合墓1枚（見出し・帯・リード・カード・含まれる項目を2組）。
0円バッジなし。含まれる項目は各4つ（PC 379:881〜379:1232 / SP 379:9249〜379:19322）
PC用に上書きした値はSPのテンプレート値より後ろに来るので、SP側で必要な値は下の @media で戻している */
/* --- なら樹木葬ですべて解決（PC 379:1948 高さ1386。注記を削った分だけ詰める） --- */
.reason-frame { height: 138.6rem; }
.chosen { top: 70.1rem; height: 23.2rem; }
.rgallery-couple { top: 96.2rem; }
.rgallery-flowers { top: 95.2rem; }
.rgallery-visit { top: 104.232rem; }
/* --- プラン（PC 原点 y3901。Figma 高さは y7157 のお客様の声まで） --- */
.plan-frame { height: 325.6rem; }
.plan-lead { left: 31.7rem; top: 72rem; } /* y4621 */
.plan-cards { left: 23.7rem; top: 86.7rem; } /* y4768 */
/* Figmaは3枚とも本文が中央寄せ。「樹木葬合葬墓」は36px×6字＝216px */
.plan-card1 .plan-card-body,
.plan-card2 .plan-card-body { align-self: center; }
.plan-card1 .plan-card-body { width: 21.6rem; }
/* 含まれる項目は4つ（1つ目の説明が4行）。y5080 / 高さ369 */
.plan-incl {
left: 23.7rem;
top: 117.9rem;
height: 36.9rem;
}
/* 2組目（個別集合墓）。色は --c-tab3（#890077） */
.plan-head2 { top: 158rem; } /* y5481 */
.plan-band2 { top: 176.1rem; } /* y5662 */
/* 2本目の写真は 1440×419 の素材をそのまま（Figma 379:1167 object-cover） */
.plan-band2 .plan-band-front img { top: 0; height: 41.9rem; object-fit: cover; }
.plan-lead2 { left: 31.75rem; top: 221.2rem; } /* y6113 */
.plan-lead2 .plan-lead-badge { background: var(--c-tab3); }
.plan-br-sp { display: none; }
.plan-cards2 {
left: 33.3rem; /* x333 / y6262 / 幅774 */
top: 236.1rem;
width: 77.4rem;
}
/* カードは 写真 404×218 → タグ 190幅 → 名前 → 価格（各間隔16） */
.plan-card4 .plan-card-head { gap: 1.6rem; }
.plan-photo {
display: block;
flex-shrink: 0;
width: 40.4rem;
height: 21.8rem;
object-fit: cover;
}
.plan-card4 .plan-tag {
width: 19rem;
background: var(--c-tab3);
}
.plan-card4 .plan-card-body {
align-self: center;
width: 36.8rem;
}
/* 「永代供養付 個別集合墓」PCは36pxの1行（語間は半角スペース相当） */
.plan-card4 .plan-name {
justify-content: center;
gap: .9rem;
}
.plan-card4 .plan-price { color: var(--c-tab3); }
.plan-incl2 {
left: 28rem; /* x280 / y6776 / 884×343 */
top: 287.5rem;
width: 88.4rem;
height: 34.3rem;
border-color: var(--c-tab3);
}
.plan-incl2 .plan-incl-head { color: var(--c-tab3); }
/* --- CTA見出し（PC 379:839）。1行・中央。
2026-10-08 文言を飯塚と同じ「樹木葬のご見学･ご相談を承っております」にした（枠664pxに収まる） --- */
.cta-title-main {
width: auto;
white-space: nowrap;
}
/* --- 流れ STEP5（PC 379:1467）。見出しが3行になり、説明文は y+170 --- */
.flow-t-sp { display: none; }
.flow-step5 .flow-step-desc { top: 17rem; }
@media (max-width: 767px) {
/* STEP5 の見出しはSPも3行（テンプレートは2行）。1行分（3.14rem）だけ説明文・枠・セクションを伸ばす */
.flow-t-pc { display: none; }
.flow-t-sp { display: inline; }
.flow-step5 { height: 48.9rem; }
.flow-step5 .flow-step-desc { top: 36.4rem; }
.flow-frame { height: 390.3rem; }
/* なら樹木葬ですべて解決（SP 原点 y2958。プランの見出しが y5492 なので 249.9rem で切る） */
.reason-frame { height: 249.9rem; }
.chosen { top: 129.6rem; height: 50.8rem; }
/* 2026-10-08 見出しを飯塚と同じ「樹木葬はこんな方に／選ばれています」にしたので、28px（テンプレート）のまま2行に収まる。
以前の22pxへの縮小は外した */
.rgallery { top: 183.9rem; }
.rgallery-couple,
.rgallery-flowers,
.rgallery-visit { top: auto; }
/* CTA見出し。2026-10-08 文言を飯塚と同じにしたので、文字サイズも飯塚（テンプレート）の26pxに戻す */
.cta-title-main {
width: 100%;
}
/* 霊園紹介の見出し（SP 16px / 20px。Figma 379:9255） */
.intro-head-eyebrow { font-size: 1.6rem; }
.intro-head-main { font-size: 2rem; }
/* プラン（SP 原点 y5457。お客様の声 y8714 まで。
2組目のリードの帯がPCの文言で2行になる分 3.3rem 伸ばす） */
.plan-frame { height: 329rem; }
.plan-lead { left: 0; top: 53rem; }
.plan-cards { left: 0; top: 69.5rem; } /* y6152 */
.plan-card1 .plan-card-body { width: 15.6rem; } /* 「樹木葬合葬墓」26px×6字 */
.plan-incl {
left: 2rem;
top: 116.3rem; /* y6620 / 高さ574 */
height: 57.4rem;
}
.plan-head2 { top: 177.4rem; } /* y7231 */
.plan-band2 { top: 190.6rem; } /* y7363 */
/* SPは正方形の素材（Figma 379:9440 w100% h109.33% y-9.44%） */
.plan-band2 .plan-band-front img { left: 0; top: -3.2379rem; width: 37.5rem; height: 37.5rem; }
.plan-lead2 { left: 0; top: 227.4rem; } /* y7731 */
.plan-br-sp { display: inline; } /* PCの1行を2行に（Figma SPの帯幅356に収める） */
.plan-cards2 {
left: 0;
top: 244.3rem; /* y7867 ＋帯2行化の3.3rem（リード下端から23pxはFigmaどおり） */
width: 37.5rem;
}
/* SPのカードは 左=写真121×137＋タグ / 右=名前2行＋価格（Figma 379:9446） */
.plan-card4 {
justify-content: flex-start;
gap: 1.55rem;
padding: 2.7rem 1.15rem 2.4rem 1.2rem;
}
.plan-card4 .plan-card-head {
flex: 0 0 12.1rem;
gap: 1.2rem;
}
.plan-photo {
width: 12.1rem;
height: 13.7rem;
}
.plan-card4 .plan-tag {
width: 100%;
min-height: 4.2rem; /* Figmaのタグ高さ42（2行の文言分）に合わせる */
padding: .8rem 0;
}
.plan-card4 .plan-card-body { width: 17.5rem; }
/* 名前は26px・行間30pxの2行 */
.plan-card4 .plan-name {
flex-direction: column;
align-items: center;
gap: 0;
font-size: 2.6rem;
line-height: 1.1538;
margin: -.2839em 0 -.1409em;
}
.plan-card4 .plan-name .s { display: block; }
.plan-incl2 {
left: 2rem;
top: 270.9rem; /* y8133 ＋3.3rem / 高さ556 */
width: 33.5rem;
height: 55.6rem;
}
/* 住所が長く1行では画面外に出るため、ラベルの右で折り返す */
.intro-info-col:first-child,
.intro-info-list,
.intro-info-row { width: 100%; }
.intro-info-list { white-space: normal; }
.intro-info-row { align-items: flex-start; }
.intro-info-row p:not(.intro-info-label) { flex: 1 0 0; min-width: 0; }
/* 住所「宮城県牡鹿郡女川町大原大原226（大原墓地内）」が長く1行では画面外に出るため、
ラベルの右で折り返す（ラベルは既存どおり1行のまま） */
.ginfo-address-rows { width: 100%; }
.ginfo-address-row {
width: 100%;
align-items: flex-start;
white-space: normal;
}
.ginfo-address-row p:not(.ginfo-label) { flex: 1 0 0; min-width: 0; }
}
/* ===== 2026-10-08 修正 ===== */
/* 個別集合墓のリードの帯（SP）。「ご家族やお一人で安心して／ご利用いただける供養のかたち」の2行が
左揃えになっていたので中央揃えにする */
@media (max-width: 767px) {
.plan-lead2 .plan-lead-badge > span { text-align: center; }
}
/* 個別集合墓のカード（1枚だけ, PC）は、全ページ towas-myokyoji と同じ幅54.5remで中央に置く（元は77.4rem） */
@media (min-width: 768px) {
.plan-cards2 { left: 44.75rem; width: 54.5rem; }
}
/* ===== 2026-10-12 修正 ===== */
/* メイン下・スライダー下のタイトル（PC）: 1行で、緑（ブランド名）は「の樹木葬」まで20px、黒（霊園名）は28pxにそろえる。
スライダー下もメイン下と同じ大きさにする。SPは変更しない */
@media (min-width: 768px) {
.ginfo-title .ginfo-title-brand { font-size: 2rem; }
.ginfo-title .ginfo-title-place { font-size: 2.8rem; }
.ginfo-title p .s { font-size: inherit; }
.intro-title-stack .intro-title-brand { font-size: 2rem; }
.intro-title-stack .intro-title-name {
display: block;
margin: -.203em 0 -.064em;
font-size: 2.8rem;
}
.intro-title-stack .intro-title-name .s,
.intro-title-stack .intro-title-name .l { font-size: inherit; margin: 0; }
}
/* SP（2026-10-12 修正表）: メイン下は「仙和」を「の樹木葬」と同じ13pxに、「メモリアル」を「大原」と同じ18pxにする。
スライダー下もメイン下と同じ横並び・同じ大きさにする */
@media (max-width: 767px) {
.ginfo-title .ginfo-title-brand { font-size: 1.3rem; }
.ginfo-title p .s { font-size: inherit; }
.intro-title-stack {
flex-direction: row;
align-items: flex-end;
gap: 1.2rem;
}
.intro-title-stack .intro-title-brand { font-size: 1.3rem; }
.intro-title-stack .intro-title-name { font-size: 1.8rem; }
}
/* ===== 2026-10-13 プランカードの文字をセンターに（PC） =====
テンプレートは本文枠をカード1が左寄せ・カード2が右寄せにしていて、プラン名と金額がカードごとに左右へずれていた。
全カードとも本文枠とプラン名をカード中央に置く（SPは既存の配置のまま） */
@media (min-width: 768px) {
.plan-card .plan-card-body { align-self: center; }
.plan-card .plan-name { justify-content: center; }
}