@charset "UTF-8"; /* ============================================================ 3) 下層ページ専用（旧 pages.css） ============================================================ */ /* ========================================================= pages.css おおさきさくら花陵下層ページ（樹木墓 / 古墳墓）本デザイン TOP（style.css）の編集的デザイン言語を下層へ展開読み込み順: style.css → pages.css 有効化: / ピンク = 樹木墓 / グリーン = 古墳墓（TOP「2つの供養のかたち」配色に準拠） 1440px 固定幅前提（レスポンシブは後日） ========================================================= */ :root { --color-pink: #e04f7b; --color-pink-light: #e3728d; --color-pink-soft: #ffa8c3; --color-green: #518126; --color-green-light: #6fa03a; --color-cream: #fffced; --color-ink: #333333; --color-text: #333333; --color-text-sub: #6b626f; --gradient-pink: linear-gradient(90deg, #e04f7b 0%, #e3728d 100%); --gradient-green: linear-gradient(90deg, #518126 0%, #6fa03a 100%); --font-serif: "Noto Serif JP", "游明朝", "Yu Mincho", serif; --font-sans: "Noto Sans JP", "ヒラギノ角ゴ ProN", sans-serif; } /* ページごとのアクセント切替（樹木墓=ピンク / 古墳墓=グリーン） */ body.color.page-sakura { --accent: #EA6094; --accent-deep: #EA6094; --accent-soft: #ffa8c3; --accent-grad: linear-gradient(120deg, #e04f7b 0%, #e3728d 100%); --accent-bg: #fff4f8; --accent-bg-2: #fde9f0; --cream: #fffaf3; } body.color.page-kofun { --accent: #4f7d27; --accent-deep: #3c6019; --accent-soft: #a7c884; --accent-grad: linear-gradient(120deg, #4f7d27 0%, #74a23e 100%); --accent-bg: #f3f8ec; --accent-bg-2: #e7f1da; --cream: #fbfaf2; } /* ユーティリティ系ページ（news/contact等）のデフォルトはブランド色＝ピンク */ body.color { --accent: #EA6094; --accent-deep: #EA6094; --accent-soft: #ffa8c3; --accent-grad: linear-gradient(120deg, #e04f7b 0%, #e3728d 100%); --accent-bg: #fff4f8; --accent-bg-2: #fde9f0; --cream: #fffaf3; } body.color { font-family: var(--font-serif); color: var(--color-text); background: #fff; line-height: 1.7; } body.color .frame { width: 100%; max-width: none; margin: 0; padding: 0; } /* ========================================================= セクション共通リズム＋見出し ========================================================= */ body.color section { position: relative; padding: 110px 0; overflow: hidden; } body.color .section-inner { position: relative; max-width: 1080px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; z-index: 2; } /* 交互背景：白 / クリーム */ body.color .alt-bg { padding: 200px 0 50px 0; background: #fff; } /* セクション上下余白の個別調整 */ body.color #point { padding-top: 150px; padding-bottom: 50px; } /* 樹木墓 3つの特徴上150 */ body.color .gallery-section { padding-top: 50px; } /* 特徴↔施設イメージ＝50+50=100 */ body.color section:has(.tour-banner-wrap) { padding-bottom: 150px; } /* 現地見学バナー下150 */ body.color #lineup { padding-top: 150px; } /* 供養のかたち上150 */ /* 見出し（EN ラベル + 明朝大見出し + アクセント短線） */ body.color .section-title-en { display: block; text-align: center; font-family: var(--font-serif); font-size: 12px; font-weight: 500; letter-spacing: 4px; color: var(--accent-soft); margin: 0 0 15px; border: none; } body.color .section-title { position: relative; text-align: center; font-family: var(--font-serif); font-weight: 400; font-size: 30px; line-height: 1.5; letter-spacing: 3px; color: var(--color-ink); border: none; padding: 0 0 24px; margin: 0 auto; } body.color .section-title::before { display: none; } /* 標準見出しの点線アクセント（CONTACT見出しと統一） */ body.color .section-title::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 50px; height: 2px; background: radial-gradient(circle, var(--accent-soft) 1px, transparent 1.5px); background-size: 7px 2px; background-repeat: repeat-x; } body.color .section-desc { text-align: center; font-size: 15px; line-height: 2; color: var(--color-text-sub); margin: 22px auto 0; max-width: 720px; } /* お問い合わせ等フォーム導入文：PCではフォームとの間に余白を確保（共通section-descには波及させない） */ @media (min-width: 1025px) { body.color .form-section .section-desc { margin-bottom: 70px; } } /* 本文中の強調 span（前方後円墳 / 永久埋葬等） */ body.color .section-desc span, body.color .lineup-card-v2-desc span, body.color .faq-a span, body.color .kofun-intro-body p span, body.color .concept-sub2-text p span { color: var(--accent); font-weight: 600; } /* ========================================================= 下層ヒーロー（透過白ヘッダーがフロート） ========================================================= */ body.color .kofun-hero { height: 70vh; background: var(--color-ink); display: flex; align-items: center; justify-content: center; position: relative; padding: 0; overflow: hidden; } body.color .kofun-hero::before { content: ""; position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; } body.color.page-sakura .kofun-hero::before { background-image: linear-gradient(rgba(30,15,25,0.04), rgba(30,15,25,0.16)), url("../images/slider12.jpg"); } body.color.page-sakura .kofun-hero-content { text-shadow: 0 2px 14px rgba(0,0,0,0.4); } body.color.page-kofun .kofun-hero::before { background-image: linear-gradient(rgba(20,30,15,0.06), rgba(20,30,15,0.22)), url("../images/top-color/kofun-hero.png"); } body.color.page-kofun .kofun-hero-content { text-shadow: 0 2px 14px rgba(0,0,0,0.45); } /* ヒーロー下地を各写真の平均色に＝読込前の暗転（#333フラッシュ）防止。樹木墓 slider12.jpg=#868C79／古墳墓 kofun-hero.png=#A3AA98（PILで実測） */ body.color.page-sakura .kofun-hero { background-color: #868C79; } body.color.page-kofun .kofun-hero { background-color: #A3AA98; } /* 桜枝（左右上） */ body.color .kofun-hero .hero-deco { position: absolute; /* top: 0px; */ width: 380px; height: auto; z-index: 1; pointer-events: none; opacity: 0.92; } body.color .kofun-hero .hero-deco-tl { left: 0; } body.color .kofun-hero .hero-deco-tr { right: 0; } /* 下端の波（次セクションへの繋ぎ） */ body.color .kofun-hero .hero-wave-img { position: absolute; left: 0; bottom: -60px; width: 100%; height: auto; z-index: 2; pointer-events: none; } /* sub系ヒーロー（お知らせ/お問い合わせ/詳細/404）の白波は端がフェードしたPNGのため、全幅(width:100%)だと左右端でピンクが透ける。画面より広げて中央寄せしフェードを画面外へ逃がす。 ※メインヒーロー(sakura/古墳)の波に波及しないよう .hero-sub にスコープ。 */ body.color .kofun-hero.hero-sub .hero-wave-img { width: 116%; max-width: none; /* グローバル img{max-width:100%} のクランプを解除（これが無いと116%が100%に潰れる） */ left: 50%; transform: translateX(-50%); /* 波PNGは下30%が透明。波高は幅に比例(≒15vw)するため、白帯が常にヒーロー下端へ届くよう bottom をvwで追従させる（固定pxだとワイド画面で白帯が上にズレてピンクが覗く）。 */ bottom: -5vw; } body.color .kofun-hero-content { position: relative; z-index: 3; text-align: center; } body.color .kofun-hero-content .hero-en { display: block; font-family: var(--font-serif); font-size: 12px; letter-spacing: 7px; color: rgba(255,255,255,0.88); margin-bottom: 18px; } body.color .kofun-hero-content h1 { font-family: var(--font-serif); font-weight: 500; font-size: 48px; letter-spacing: 12px; color: #fff; margin: 0 0 22px; text-shadow: 0 2px 20px rgba(0,0,0,0.35); } body.color .kofun-hero-content p { font-family: var(--font-serif); font-size: 16px; line-height: 2.1; letter-spacing: 1.5px; color: rgba(255,255,255,0.96); text-shadow: 0 1px 12px rgba(0,0,0,0.3); } /* ===== 樹木墓・古墳墓メインヒーロー：タイトル背後に白いぼかし円＋文字をテーマ色に ===== */ /* 影は不要に（白円の上にテーマ色文字を置くため） */ body.color.page-sakura .kofun-hero-content, body.color.page-kofun .kofun-hero-content { text-shadow: none; } /* 白いぼかし円（タイトル背後のハロー＝可読性確保） */ body.color.page-sakura .kofun-hero-content::before, body.color.page-kofun .kofun-hero-content::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* デスクトップは固定幅、狭い画面ではビューポート内に収める（min） */ width: min(820px, 92vw); height: 460px; background: radial-gradient(ellipse at center, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.93) 34%, rgba(255,255,255,0.6) 58%, rgba(255,255,255,0) 80%); filter: blur(3px); z-index: -1; pointer-events: none; } /* 古墳墓はタイトルが横長なので円を横に広げる */ body.color.page-kofun .kofun-hero-content::before { width: min(1120px, 95vw); height: 500px; } /* SP：縦長になり視認性が落ちるので、横長の楕円にして幅いっぱい＋白を効かせる（タイトル＋サブタイトルを覆う） */ @media (max-width: 600px) { body.color.page-sakura .kofun-hero-content::before, body.color.page-kofun .kofun-hero-content::before { width: 140vw; height: 340px; /* closest-side で楕円を箱にフィットさせ、上下端で確実に透明までフェード（farthest-cornerだと四隅まで伸びて上下が不透明のまま箱で切れ＝見切れる）。横はサブタイトル全幅(中心±175px)を白で覆うため不透明域を64%まで広げる。 */ background: radial-gradient(ellipse closest-side at center, #ffffff 0%, rgba(255,255,255,0.96) 64%, rgba(255,255,255,0.55) 86%, rgba(255,255,255,0) 100%); } /* SP：サブタイトルが長く白円の端まで届いて窮屈なので少し小さく（白円内に収める） */ body.color.page-sakura .kofun-hero-content p, body.color.page-kofun .kofun-hero-content p { font-size: 14px; letter-spacing: 0.8px; line-height: 1.9; } } /* 文字色：テーマ色タイトル＋ラベル、濃色サブタイトル */ body.color.page-sakura .kofun-hero-content .hero-en { color: #EA6094; } body.color.page-sakura .kofun-hero-content h1 { color: #EA6094; text-shadow: none; } body.color.page-kofun .kofun-hero-content .hero-en { color: #4f7d27; } body.color.page-kofun .kofun-hero-content h1 { color: #4f7d27; text-shadow: none; } body.color.page-sakura .kofun-hero-content p, body.color.page-kofun .kofun-hero-content p { color: #4a4a4a; text-shadow: none; } /* ========================================================= パンくず ========================================================= */ body.color .breadcrumb { background: #fff; border-bottom: none; text-align: left; color: #9a8f93; font-size: 12px; letter-spacing: 0.5px; padding: 16px max(40px, calc((100% - 1080px) / 2 + 40px)); } body.color .breadcrumb a { color: var(--accent); text-decoration: none; } body.color .breadcrumb a:hover { text-decoration: underline; } /* ========================================================= CONCEPT 上段：テキスト左 / 全景画像右（右端まで全幅） ========================================================= */ body.color .concept-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 100%; column-gap: 0; } body.color .concept-split-text { padding-left: max(40px, calc((100vw - 1000px) / 2 + 40px)); padding-right: 64px; } /* 左寄せ見出し（下線バーは出さない） */ body.color .concept-split .section-title-en { text-align: left; margin-bottom: 16px; } body.color .concept-split .section-title { text-align: left; padding-bottom: 0; margin: 0; } body.color .concept-split .section-title::after { display: block; content: ""; position: static; transform: none; margin: 18px 0 0; width: 100%; height: 2px; background: radial-gradient(circle, var(--accent-soft) 1px, transparent 1.5px); background-size: 7px 2px; background-repeat: repeat-x; } body.color .concept-split-lead { font-family: var(--font-serif); font-size: 23px; font-weight: 600; line-height: 1.7; color: var(--color-ink); margin: 52px 0 22px; } body.color .concept-split-text p { font-size: 15px; line-height: 2.25; color: var(--color-text-sub); margin: 0; } body.color .concept-split-img { align-self: stretch; padding-right: max(40px, calc((100vw - 1000px) / 2 + 40px)); } body.color .concept-split-img img { display: block; width: 450px; max-width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 16px; margin-left: auto; } /* ========================================================= CONCEPT / イントロ（編集的レイアウト） ========================================================= */ /* セクション背景にふんわり花びら（透かし） */ body.color .kofun-intro-img.img-placeholder { transform: none; } body.color .kofun-intro-body h3 { font-family: var(--font-serif) !important; font-size: 26px !important; font-weight: 500; line-height: 1.8 !important; color: var(--color-ink); margin-bottom: 22px !important; } body.color .kofun-intro-body p { font-size: 15px; line-height: 2.3; color: var(--color-text-sub); } body.color .kofun-intro-body strong, body.color .concept-sub2-text strong { color: var(--accent); font-weight: 700; } /* 「樹木墓とは / 古墳墓とは」テキスト左 / 写真コラージュ右 */ body.color .concept-row-sub2 { display: flex; flex-direction: row-reverse; gap: 64px; align-items: center; margin-top: 96px; } /* 旧インライン margin-top:96px の置き換え（PCは96px・SPは0で concept-row-sub2 の40pxのみ効かせる） */ body.color .concept-sub-inner { margin-top: 96px; } body.color .concept-sub2-text { flex: 1; } body.color .concept-sub2-text h3 { font-family: var(--font-serif) !important; font-size: 26px !important; font-weight: 500; line-height: 1.8 !important; color: var(--color-ink); margin-bottom: 22px !important; } body.color .concept-sub2-text p { font-size: 15px; line-height: 2.3; color: var(--color-text-sub); } body.color .concept-photos-stack { flex-shrink: 0; width: 44%; position: relative; } body.color .concept-photo-lg { width: 350px; max-width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 16px; display: block; margin-left: auto; } body.color.page-kofun .concept-photo-lg{ box-shadow: none; } /* 実写真未支給（プレースホルダー）は重ねず素直に縦積み */ body.color .concept-photo-lg.img-placeholder { transform: none; height: 260px; } body.color .concept-photo-sm.img-placeholder { transform: none; width: 100%; height: 150px; margin: 16px 0 0; border: none; } body.color .concept-photo-lg.img-placeholder, body.color .concept-photo-sm.img-placeholder { background: var(--accent-bg); color: var(--accent); } /* ========================================================= FOR YOU（チェックリスト） ========================================================= */ body.color .for-you-grid-3col { max-width: 880px; margin: 44px auto 0; gap: 16px; } body.color .for-you-item { background: #fff; border: none; border-radius: 8px; box-shadow: none; color: var(--color-text); font-size: 15px; padding: 16px 22px 16px 20px; display: flex; align-items: center; gap: 12px; } body.color.page-kofun .for-you-item { box-shadow: 0 4px 16px rgba(50,70,30,0.06); } body.color .for-you-item:hover { box-shadow: 0 8px 22px rgba(80,40,60,0.12); transform: translateY(-2px); } body.color .for-you-item .for-you-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; } /* ========================================================= FEATURES（3つの特徴）— 透かし数字の編集的ブロック ========================================================= */ body.color .kofun-features { grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 56px 0 0; } body.color .kofun-feature { background: none; border: none; border-radius: 0; box-shadow: none; padding: 0; text-align: left; position: relative; overflow: visible; } body.color.page-kofun .kofun-feature { box-shadow: none; } body.color .kofun-feature:hover { transform: none; box-shadow: none; } /* ビジュアル：画像＋ピンク円バッジ＋桜 */ body.color .feature-visual { position: relative; margin-bottom: 24px; } body.color .feature-image { width: 100%; height: 210px; background: #d9d9d9; background-size: cover; background-position: center; border-radius: 16px; } body.color .kofun-feature:nth-child(1) .feature-image { background-image: url("../images/top-color/feat-01.png"); } body.color .kofun-feature:nth-child(2) .feature-image { background-image: url("../images/top-color/feat-02.png"); } body.color .kofun-feature:nth-child(3) .feature-image { background-image: url("../images/top-color/feat-03.png"); } body.color .feature-badge { position: absolute; top: -20px; left: -15px; z-index: 3; width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, #FFA5C2 0%, #FF5A98 100%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-serif); } body.color .feature-badge small { font-size: 12px; letter-spacing: 2px; margin-bottom: 0; } body.color .feature-badge b { font-size: 30px; font-weight: 500; line-height: 1; letter-spacing: 1px; } body.color .feature-sakura { position: absolute; top: 30px; left: -30px; width: 60px; height: auto; z-index: 4; pointer-events: none; } body.color .kofun-feature h4 { font-family: var(--font-serif); font-size: 18px; font-weight: 400; line-height: 1.6; color: #EA6094; margin-bottom: 12px; } body.color.page-kofun .kofun-feature h4 { color: var(--accent); } body.color .kofun-feature p { font-size: 14px; line-height: 1.95; color: var(--color-text-sub); } /* ========================================================= GALLERY（4枚グリッド / マーキー） ========================================================= */ body.color .gallery-marquee { margin-top: 48px; } body.color .gallery-marquee-item { border-radius: 14px; box-shadow: 0 10px 26px rgba(50,70,30,0.10); } /* GALLERY（施設イメージ）：全幅・縦長カードの横ループ */ body.color .gallery-section .gallery-marquee { margin-left: -50px; margin-right: -50px; width: calc(100% + 100px); } body.color .gallery-section .gallery-marquee-item { width: 280px; height: 380px; border-radius: 18px; box-shadow: 0 12px 30px rgba(80,40,60,0.10); } body.color .kofun-gallery-item.img-placeholder, body.color .gallery-marquee-item.img-placeholder { background: var(--accent-bg); color: var(--accent); } /* ========================================================= 見学バナー（フルアクセントグラデの帯） ========================================================= */ body.color .tour-banner-img { width: 260px; height: 180px; border-radius: 14px; box-shadow: 0 10px 26px rgba(0,0,0,0.18); } body.color .tour-banner-img.img-placeholder { background: rgba(255,255,255,0.18); color: #fff; } body.color .tour-banner-body h3 { color: #fff; font-size: 26px; } body.color .tour-banner-body p, body.color .tour-banner-list li { color: rgba(255,255,255,0.95); } body.color .tour-banner-list li::marker { color: rgba(255,255,255,0.8); } body.color .tour-banner-highlight .btn-primary { background: #fff; color: var(--accent); border: none; font-weight: 700; } body.color .tour-banner-highlight .btn-primary:hover { background: #fff; filter: brightness(0.97); } body.color .tour-banner-highlight .btn-outline { border: 1.5px solid rgba(255,255,255,0.9); color: #fff; background: transparent; } body.color .tour-banner-highlight .btn-outline:hover { background: rgba(255,255,255,0.12); } /* ========================================================= 料金プラン lineup-card-v2（写真前面・余白広め） ========================================================= */ /* lineup（供養のかたち）セクション：ピンク背景＋上下の波 */ body.color #lineup { background: #FFF1F6; overflow: visible; } /* このセクションの透かし桜は削除 */ body.color #lineup::before, body.color #lineup::after { display: none !important; } /* 波は隣接の白セクションに重ねて自然な境目に */ body.color .section-wave-top, body.color .section-wave-bottom { position: absolute; left: 0; width: 100%; height: auto; z-index: 1; pointer-events: none; display: block; } body.color .section-wave-top { top: -60px; } body.color .section-wave-bottom { bottom: -100px; } body.color .lineup-grid-v2 { gap: 34px; margin-top: 50px; } body.color .lineup-card-v2 { border: none; border-radius: 18px; box-shadow: 0 12px 34px rgba(80,40,60,0.07); overflow: hidden; } body.color.page-kofun .lineup-card-v2 { box-shadow: 0 12px 34px rgba(50,70,30,0.07); } body.color .lineup-card-v2:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(80,40,60,0.13); } body.color .lineup-card-v2-img.img-placeholder { background: var(--accent-bg); color: var(--accent); } body.color .lineup-card-v2-body { padding: 28px 28px 26px; } body.color .lineup-card-v2-title { font-family: var(--font-serif); font-size: 28px; font-weight: 400; color: #EA6094; margin-bottom: 10px; } body.color.page-kofun .lineup-card-v2-title { color: var(--accent); } /* タイトル＋バッジ横並びヘッダー */ body.color .lineup-card-v2-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } body.color .lineup-card-v2-head .lineup-card-v2-title { margin-bottom: 0; } body.color .lineup-card-v2-head .lineup-card-v2-badges { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; } body.color .lineup-card-v2-desc { font-size: 13px; line-height: 1.9; color: var(--color-text-sub); margin-bottom: 16px; } body.color .lineup-card-v2-prices { border-top: 2px dashed var(--accent-bg-2); padding-top: 16px; } body.color .lineup-card-v2-prices > div { margin-bottom: 6px; } body.color .lineup-card-v2-prices > div > span { color: var(--color-text-sub); font-size: 13px; } body.color .lineup-card-v2-prices strong { color: #EA6094; font-family: var(--font-serif); font-size: 20px; font-weight: 700; } body.color.page-kofun .lineup-card-v2-prices strong { color: var(--accent); } /* バッジ */ body.color .lineup-badge { font-family: var(--font-serif); font-size: 12px; font-weight: 500; padding: 5px 14px; border-radius: 999px; white-space: nowrap; background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-soft); } body.color .lineup-badge.badge-eien { background: linear-gradient(90deg, #FFA5C2 0%, #FF5A98 100%); color: #fff; border: none; } body.color.page-kofun .lineup-badge.badge-eien { background: var(--accent-grad); } body.color .lineup-badge.badge-pet { background: var(--accent-soft); color: #fff; border: none; } body.color.page-sakura .lineup-badge.badge-pet { background: #fff; color: #EA6094; border: 1px solid #EA6094; } body.color.page-kofun .lineup-badge.badge-pet { background: #fff; color: #4f7d27; border: 1px solid #4f7d27; } /* おすすめボックス */ body.color .lineup-card-v2-recommend { margin-top: 18px; padding: 16px 18px; background: #FFFCED; border-radius: 12px; } body.color .lineup-card-v2-recommend .r-label { background: linear-gradient(90deg, #FFA5C2 0%, #FF5A98 100%); color: #fff; } body.color.page-kofun .lineup-card-v2-recommend .r-label { background: var(--accent-grad); } body.color .lineup-card-v2-recommend p { color: var(--color-text-sub); } /* 内訳表示（detailed） */ body.color .lineup-card-v2-prices.detailed .price-block-head strong { color: var(--accent); font-family: var(--font-serif); } /* オプション（墓誌彫刻）：料金ブロック下部に淡いアクセント背景で掲載 */ body.color .lineup-card-v2-option .opt-rows > div { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 3px; } body.color .lineup-card-v2-option .opt-rows > div:last-child { margin-bottom: 0; } /* ========================================================= 比較表 compare-table（角丸・グラデヘッダ・淡い罫線） ========================================================= */ body.color #compare{ margin-top: 64px; } /* 古墳墓との違い：独立セクション（白背景ボックス） */ body.color .compare-section { background: #fff; } body.color .compare-section .section-inner { max-width: 1100px; } body.color #compare { background: #fff; border-radius: 20px; padding: 48px 40px; } /* 樹木墓ページ：比較表は樹木墓列をピンクグラデで強調・他列は薄ピンク */ body.color.page-sakura .compare-table thead th { background: var(--accent-bg-2); color: var(--accent-deep); } body.color.page-sakura .compare-table thead th.highlight-col { background: linear-gradient(135deg, #FFA5C2 0%, #FF5A98 100%); color: #fff; } body.color.page-sakura .compare-table tbody th { background: #f7f7f7; } body.color.page-sakura .compare-table tbody td { background: #fff; } body.color.page-sakura .compare-table thead th:first-child { background: #fff; } body.color.page-sakura .compare-table .highlight-col { background: #FFF1F6; color: var(--accent-deep); } /* 樹木墓列を枠で囲って目立たせる */ body.color.page-sakura .compare-table thead th.highlight-col, body.color.page-sakura .compare-table tbody td.highlight-col { border-left: 2px solid #FF5A98; border-right: 2px solid #FF5A98; } body.color.page-sakura .compare-table tbody tr:last-child td.highlight-col { border-bottom: 2px solid #FF5A98; } /* ご入陵までの流れ／こんな方におすすめ：背景クリーム＋上下の波（隣接セクションに重ねる） */ body.color .flow-section, body.color .foryou-section { background: #FFFCED; overflow: visible; } body.color .compare-table { border-collapse: separate; border-spacing: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 34px rgba(80,40,60,0.07); font-size: 15px; } body.color.page-kofun .compare-table { box-shadow: 0 12px 34px rgba(50,70,30,0.07); } body.color .compare-table th, body.color .compare-table td { border: none; border-bottom: 1px solid #f0e6ea; padding: 16px 18px; } body.color.page-kofun .compare-table th, body.color.page-kofun .compare-table td { border-bottom-color: #e6efda; } body.color .compare-table thead th { background: var(--accent-grad); color: #fff; font-size: 14px; letter-spacing: 1px; } body.color .compare-table tbody th { background: var(--cream); color: var(--color-ink); font-weight: 600; } body.color .compare-table .highlight-col { background: var(--accent-bg); color: var(--color-text); font-weight: 600; } body.color .compare-table tbody tr:last-child th, body.color .compare-table tbody tr:last-child td { border-bottom: none; } /* ========================================================= ご入陵までの流れ entry-flow（縦タイムライン） ========================================================= */ body.color .entry-flow-body h4 { color: var(--color-ink); font-size: 18px; } body.color .entry-flow-options { grid-template-columns: repeat(2, 1fr); } body.color .entry-flow-option { background: var(--accent-bg); border-color: var(--accent-bg-2); border-radius: 12px; } /* フローカード内：入金内訳は1行に収め崩れ防止 */ body.color .entry-flow-pay { flex-wrap: nowrap; align-items: stretch; } body.color .entry-flow-pay-table { min-width: 200px; } body.color .entry-flow-option strong { color: var(--accent-deep); } body.color .entry-flow-pay-base { background: var(--accent-bg); color: var(--accent-deep); } body.color .entry-flow-pay-table caption { background: var(--accent); color: #fff; } body.color .entry-flow-pay-table thead th { background: var(--cream); color: var(--color-ink); } body.color .entry-flow-branch-label { background: linear-gradient(90deg, #FFA5C2 0%, #FF5A98 100%); color: #fff; } body.color.page-kofun .entry-flow-branch-label { background: var(--accent-grad); } body.color .entry-flow-branch-result { background: #fff; color: var(--accent-deep); } body.color .entry-flow-branch-period { color: var(--accent); } body.color .entry-flow-branch-arrow { color: var(--accent-soft); } /* コンテンツ幅を拡大 */ /* ご入陵フロー改：左インデックス＋右カード（画像付き） */ body.color .flow-section .section-inner { max-width: 1100px; } body.color .flow-layout { display: grid; grid-template-columns: 210px 1fr; gap: 48px; margin-top: 54px; align-items: start; } /* 左インデックス */ body.color .flow-index { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 20px; } body.color .flow-index-item { position: relative; display: flex; align-items: center; gap: 12px; text-decoration: none; color: #b0a8ab; font-size: 14px; font-family: var(--font-serif); transition: color 0.2s; } /* インデックス項目の間に下向き三角 */ body.color .flow-index-item:not(:last-child)::after { content: ""; position: absolute; left: 15px; bottom: -14px; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #e7c4d2; } body.color .flow-index-no { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: #ecd9e1; color: #fff; } body.color .flow-index-item.is-active { color: #333; font-weight: 600; } body.color .flow-index-item.is-active .flow-index-no { background: linear-gradient(135deg, #FFA5C2 0%, #FF5A98 100%); } body.color .flow-index-item:hover { color: #EA6094; } body.color .flow-index-item:hover .flow-index-no { background: linear-gradient(135deg, #FFA5C2 0%, #FF5A98 100%); } /* 右カード */ body.color .flow-cards { display: flex; flex-direction: column; gap: 24px; } body.color .flow-card { display: flex; align-items: center; gap: 28px; background: #fff; border-radius: 16px; box-shadow: 0 5px 18px rgba(0, 0, 0, 0.05); padding: 30px 34px; scroll-margin-top: 110px; } body.color .flow-card-body { flex: 1; min-width: 0; } body.color .flow-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } body.color .flow-card-no { flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #FFA5C2 0%, #FF5A98 100%); color: #fff; font-family: var(--font-serif); font-size: 16px; font-weight: 700; } body.color .flow-card-head h4 { margin: 0; font-family: var(--font-serif); font-size: 20px; font-weight: 500; color: #333; } body.color .flow-card-body > p { font-size: 14px; line-height: 1.9; color: var(--color-text-sub); margin: 0; } body.color .flow-card-body > p.note { font-size: 12px; color: #aaa; margin-top: 10px; } body.color .flow-card-img { flex: none; width: 210px; height: 140px; border-radius: 10px; background: #d9d9d9; background-size: cover; background-position: center; align-self: center; } body.color #flow-01 .flow-card-img { background-image: url("../images/top-color/flow-01.png"); } body.color #flow-02 .flow-card-img { background-image: url("../images/top-color/flow-02.png"); } body.color #flow-03 .flow-card-img { background-image: url("../images/top-color/flow-03.png"); } body.color #flow-04 .flow-card-img { background-image: url("../images/top-color/flow-04.png"); } body.color #flow-05 .flow-card-img { background-image: url("../images/top-color/flow-05.png"); } body.color #flow-06 .flow-card-img { background-image: url("../images/top-color/flow-06.png"); } body.color #flow-07 .flow-card-img { background-image: url("../images/top-color/flow-07.png"); } body.color #flow-08 .flow-card-img { background-image: url("../images/top-color/flow-08.png"); } /* 古墳ページは緑テーマ */ body.color.page-kofun .flow-index-item.is-active .flow-index-no, body.color.page-kofun .flow-index-item:hover .flow-index-no, body.color.page-kofun .flow-card-no { background: var(--accent-grad); } body.color.page-kofun .flow-index-item:hover { color: var(--accent); } /* 各ステップにイラスト（ダミー画像）を追加 — 詳細は維持 */ /* ========================================================= FAQ（Q丸バッジ + 細い区切り） ========================================================= */ /* FAQ アコーディオン（details/summary） */ body.color details.faq-item { border-bottom: 1px solid var(--accent-bg-2); padding: 0; } body.color summary.faq-q { color: #333; font-size: 17px; position: relative; list-style: none; cursor: pointer; padding: 26px 46px 26px 40px; margin: 0; } body.color summary.faq-q::-webkit-details-marker { display: none; } body.color .faq-q::before { content: "Q"; position: absolute; left: 0; top: 24px; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(90deg, #FFA5C2 0%, #FF5A98 100%); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); } body.color summary.faq-q::after { content: ""; position: absolute; right: 12px; top: 30px; width: 9px; height: 9px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform 0.25s; } body.color details.faq-item[open] summary.faq-q::after { transform: rotate(-135deg); } body.color .faq-a { color: var(--color-text-sub); padding: 0 40px 28px 40px; } body.color .faq-a a { color: var(--accent) !important; border-bottom: 1px solid var(--accent) !important; } /* ========================================================= クロス送客 cross-promo（送客先の色でアクセント） ========================================================= */ body.color .cross-promo { border: none; border-radius: 22px; box-shadow: 0 16px 44px rgba(80,40,60,0.08); padding: 44px; gap: 48px; margin-top: 50px; background: linear-gradient(135deg, #FFFFFF 60%, #EEF5DD 100%); } body.color .cross-promo-img { width: 380px; height: 280px; border-radius: 16px; position: relative; } /* 古墳バナー左上の緑円バッジ＋桜 */ body.color .cp-badge { position: absolute; top: -60px; left: -60px; width: 130px; height: 130px; background: url("../images/top-color/cross-promo-circle.png") center/contain no-repeat; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-serif); font-size: 15px; line-height: 1.8; letter-spacing: 0.04em; z-index: 3; } body.color .cp-badge-sakura { position: absolute; top: 20px; left: -70px; width: 64px; height: auto; z-index: 4; pointer-events: none; } body.color .cross-promo-body h3 { font-size: 26px; font-weight: 400; color: var(--color-green); position: relative; padding-bottom: 18px; } body.color .cross-promo-body h3 .cp-sub { display: block; color: #333; font-size: 20px; font-weight: 400; margin-top: 8px; } body.color .cross-promo-body h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 80px; height: 2px; background: radial-gradient(circle, var(--color-green) 1px, transparent 1.5px); background-size: 7px 2px; background-repeat: repeat-x; } body.color .cross-promo-body p { color: var(--color-text-sub); } body.color .cross-promo-links a, body.color .cross-promo-links .primary { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 32px; border-radius: 4px; font-family: var(--font-serif); font-weight: 600; } body.color a.cross-promo { text-decoration: none; color: inherit; display: flex; cursor: pointer; } /* sakura→古墳=グリーン / kofun→樹木=ピンク */ body.color.page-sakura .cross-promo-img.img-placeholder { background: #eef4e4; color: var(--color-green); } body.color.page-sakura .cross-promo-body h3 span, body.color.page-sakura .cross-promo-body p span { color: var(--color-green); } body.color.page-sakura .cross-promo-body h3 .cp-sub { color: #333; } body.color.page-sakura .cross-promo-links a.primary, body.color.page-sakura .cross-promo-links .primary { background: var(--gradient-green); color: #fff; border: none; } body.color.page-kofun .cross-promo-img.img-placeholder { background: #fde9f0; color: var(--color-pink); } body.color.page-kofun .cross-promo-body h3 span, body.color.page-kofun .cross-promo-body p span { color: var(--color-pink); } body.color.page-kofun .cross-promo-links a.primary, body.color.page-kofun .cross-promo-links .primary { background: var(--gradient-pink); color: #fff; border: none; } /* ========================================================= 最終CTA（TOPと統一） ========================================================= */ body.color .contact-section { background: linear-gradient(180deg, var(--accent-bg) 0%, var(--cream) 100%); } body.color .contact-section .section-title-en { color: var(--accent) !important; } body.color .contact-section .section-title { color: var(--color-ink); } body.color .cta-box h3 { color: var(--color-ink); } body.color .cta-box .cta-icon svg { stroke: var(--accent); } body.color .cta-box-highlight h3 { color: #fff; } body.color .cta-box-highlight p { color: rgba(255,255,255,0.92); } body.color .cta-box-highlight .cta-icon svg { stroke: #fff; } body.color .cta-box-highlight .btn-primary { background: #fff; color: var(--accent); } body.color .cta-box-highlight .btn-primary:hover { background: #fff; filter: brightness(0.97); } /* ボタン共通（アクセント） */ body.color .btn-primary { background: var(--accent-grad); border: none; color: #fff; } body.color .btn-primary:hover { filter: brightness(1.04); transform: translateY(-1px); } body.color .btn-outline { border: 1.5px solid var(--accent); color: var(--accent); background: #fff; } body.color .btn-outline:hover { background: var(--accent); color: #fff; } /* ========================================================= セクション装飾：ふんわり花びら（透かし）コンテンツHTMLを変えずに背景演出を追加 ========================================================= */ body.color #point::before, body.color #lineup::before { content: ""; position: absolute; top: -150px; left: 0px; width: 420px; height: 420px; background: url("../images/top-color/petal-blur-large.png") center/contain no-repeat; opacity: 0.5; pointer-events: none; z-index: 1; } body.color #point::after, body.color #lineup::after { content: ""; position: absolute; bottom: -90px; right: -60px; width: 300px; height: 300px; background: url("../images/top-color/petal-blur-large.png") center/contain no-repeat; transform: scaleX(-1) rotate(12deg); opacity: 0.45; pointer-events: none; z-index: 1; } body.color .contact-section::before { content: ""; position: absolute; top: -40px; left: 50%; width: 280px; height: 280px; background: url("../images/top-color/petal-blur-large.png") center/contain no-repeat; opacity: 0.4; pointer-events: none; transform: translateX(-60%); } /* 古墳ページはピンク花びらの主張を控えめに */ body.color.page-kofun #point::before, body.color.page-kofun #point::after, body.color.page-kofun #lineup::before, body.color.page-kofun #lineup::after, body.color.page-kofun .contact-section::before { opacity: 0.28; } /* ========================================================= 残置プレースホルダー（実写真未支給）を世界観に馴染ませる ========================================================= */ body.color .img-placeholder { background: var(--accent-bg); color: var(--accent); } body.color .kofun-intro-img.img-placeholder { box-shadow: none; transform: none; } /* ========================================================= ========================================================= ユーティリティ系ページ（news / news-detail / contact / confirm / thanks / 404）共通 ========================================================= ========================================================= */ /* --------------------------------------------------------- 共通ヘッダー = TOP の透過ヘッダー（style.css）をそのまま使用全下層ページが上部にヒーロー / 見出しバンドを持つことで、透過ヘッダーの白ロゴ・白ナビが常に濃色背景の上に乗り可読となる。 ※ TOP は pages.css を読み込まないため影響なし --------------------------------------------------------- */ /* ナビのホバー白ラインは style.css に一本化（TOP・全下層で共通） */ /* お知らせ・お知らせ詳細・お問い合わせ・404 のヒーロー統一：ピンクグラデ（#FFA5C2→#FFB8D3）＋白波・文字38px白・hero-sub 400px・桜枝top:0 */ body.color.page-sub .kofun-hero, body.color.page-hero .kofun-hero, body.color.page-article .kofun-hero { background: linear-gradient(135deg, #FFA5C2 0%, #FFB8D3 100%); } body.color.page-sub .kofun-hero::before, body.color.page-hero .kofun-hero::before, body.color.page-article .kofun-hero::before { display: none; } body.color.page-sub .kofun-hero-content, body.color.page-hero .kofun-hero-content, body.color.page-article .kofun-hero-content { text-shadow: none; } body.color.page-sub .kofun-hero-content h1, body.color.page-hero .kofun-hero-content h1, body.color.page-article .kofun-hero-content h1 { font-size: 38px; color: #fff; letter-spacing: 2px; line-height: 1.5; max-width: 1000px; margin: 0 auto; } body.color.page-article .kofun-hero-content .hero-en { color: rgba(255,255,255,0.9); } /* 見出しバンド（400px に統一） */ body.color .kofun-hero.hero-sub { height: 70vh; } /* 桜枝の位置：全下層ヒーロー（news/contact/news-detail等）を base の top:auto に統一。 */ /* 見出しバンドを足したフォーム系ページでは本文先頭の重複見出しを抑制 */ body.color.page-sub .form-section > .section-inner > .section-title-en, body.color.page-sub .form-section > .section-inner > .section-title { display: none; } /* 404 はヒーローと同名の見出しを重複させない（大きな 404 数字は残す） */ body.color.page-sub .error-content h2 { display: none; } /* --------------------------------------------------------- フォーム（contact） --------------------------------------------------------- */ body.color .form-section { padding: 90px 0; } body.color .form-group { margin-bottom: 30px; } body.color .form-label { color: var(--color-ink); font-weight: 600; } body.color .form-label .required { background: var(--accent-grad); color: #fff; border-radius: 6px; } body.color .form-label .optional { background: #c8bcc2; color: #fff; border-radius: 6px; } body.color .form-input, body.color .form-textarea { border: 1.5px solid #ece0e6; border-radius: 10px; background: #fff; color: var(--color-ink); transition: border-color 0.2s, box-shadow 0.2s; } body.color .form-input::placeholder, body.color .form-textarea::placeholder { color: #9a8f93; opacity: 1; } body.color.page-kofun .form-input, body.color.page-kofun .form-textarea { border-color: #e2ecd6; } body.color .form-input:hover, body.color .form-textarea:hover { border-color: var(--accent-soft); } body.color .form-input:focus, body.color .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } body.color .form-radio { color: var(--color-text); } body.color .form-radio .radio-dot { border: 2px solid #d8c8d0; } body.color .form-radio input:checked ~ .form-radio-txt { color: var(--accent-deep); font-weight: 600; } body.color .form-radio input:checked + .radio-dot { border-color: var(--accent); } body.color .form-radio input:checked + .radio-dot::after { background: var(--accent); } /* プライバシーポリシー同意（送信ボタンの直前） */ body.color .form-privacy { text-align: center; margin-top: 36px; } body.color .privacy-agree { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; color: var(--color-text); } body.color .privacy-checkbox { position: absolute; width: 1px; height: 1px; opacity: 0; } body.color .privacy-box { width: 22px; height: 22px; flex: none; border: 2px solid #d8c8d0; border-radius: 4px; background: #fff; position: relative; transition: border-color .2s, background .2s; } body.color .privacy-checkbox:checked + .privacy-box { border-color: var(--accent); background: var(--accent); } body.color .privacy-checkbox:checked + .privacy-box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } body.color .privacy-checkbox:focus-visible + .privacy-box { outline: 2px solid var(--accent); outline-offset: 2px; } body.color .privacy-agree a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } body.color .privacy-agree a:hover { opacity: .75; } /* --------------------------------------------------------- 入力確認テーブル（confirm） --------------------------------------------------------- */ body.color .confirm-table { border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px rgba(80,40,60,0.06); } body.color .confirm-table th, body.color .confirm-table td { border: none; border-bottom: 1px solid #f1e7ec; } body.color .confirm-table th { background: var(--accent-bg); color: var(--color-ink); } body.color .confirm-table td { color: var(--color-text); } body.color .confirm-table tr:last-child th, body.color .confirm-table tr:last-child td { border-bottom: none; } /* --------------------------------------------------------- お知らせ一覧（news） --------------------------------------------------------- */ body.color .news-list { max-width: 880px; margin: 48px auto 0; } body.color .news-item { border-bottom: 1px solid var(--accent-bg-2); padding: 24px 18px; border-radius: 0px; transition: background 0.2s, transform 0.2s; } body.color .news-item:hover { opacity: 1; background: var(--accent-bg); transform: translateX(4px); } body.color .news-date { color: var(--accent); font-family: var(--font-serif); font-weight: 600; } body.color .news-category { background: var(--accent-bg); color: var(--accent-deep); border-radius: 4px; font-size: 11px; padding: 3px 12px; } /* お知らせ一覧：上の余白を詰める */ body.color section:has(.news-list) { padding-top: 40px; } body.color .news-content h3 { color: var(--color-ink); font-family: var(--font-serif); } body.color .news-pagination a, body.color .news-pagination span { border-radius: 8px; } body.color .news-pagination a { color: var(--color-text); border: 1px solid var(--accent-bg-2); } body.color .news-pagination a:hover { background: var(--accent-grad); color: #fff; border-color: transparent; } body.color .news-pagination .current { background: var(--accent-grad); color: #fff; border: none; } /* --------------------------------------------------------- お知らせ詳細（news-detail） --------------------------------------------------------- */ body.color .news-detail-header h1 { color: var(--color-ink); } /* 記事ヒーロー内のメタ（日付・カテゴリ）を中央に */ body.color.page-article .kofun-hero-content .news-detail-meta { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; } /* 記事ヒーロー内の日付はピンク背景上で読めるよう白に（一覧の日付は従来のテーマ色のまま） */ body.color.page-article .kofun-hero-content .news-date { color: #fff; } /* 前後記事をボタンに */ body.color .news-detail-nav .news-nav-btn { display: inline-flex; align-items: center; padding: 12px 24px; border: 1.5px solid var(--accent-soft); border-radius: 4px; color: var(--accent); font-size: 14px; text-decoration: none; transition: all 0.2s; } body.color .news-detail-nav .news-nav-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); } body.color .news-detail-body h2 { color: var(--color-ink); border-bottom: 2px solid var(--accent); padding-bottom: 12px; } body.color .news-detail-body h3 { color: var(--accent-deep); } body.color .news-detail-img { box-shadow: none; } body.color .news-detail-img.img-placeholder { background: var(--accent-bg); color: var(--accent); } body.color .news-detail-nav a:hover { color: var(--accent); } /* --------------------------------------------------------- 404 --------------------------------------------------------- */ body.color .error-num { font-family: var(--font-serif); color: transparent; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; opacity: 0.9; } body.color .error-content h2 { color: var(--color-ink); } /* ========================================================= 現地見学・随時受付中バナー（tour-banner-v2） ========================================================= */ body.color .tour-banner-wrap { position: relative; } body.color .tour-banner-v2 { position: relative; display: flex; align-items: stretch; background: linear-gradient(135deg, #f7a8c4 0%, #ef6fa0 100%); border-radius: 28px; overflow: hidden; height: 350px; padding: 0; } body.color .tour-banner-v2 .tour-banner-img { width: 46%; height: 100%; flex: none; background-size: cover; background-position: center; border-radius: 0 10% 10% 0 / 0 50% 50% 0; box-shadow: none; } /* CONCEPTセクション下に余白（樹木墓とは画像とFOR YOUの波が被らないように） */ body.color section:has(.concept-split) { padding-bottom: 220px; } body.color .tour-banner-v2 .tour-banner-body { flex: 1; padding: 50px 60px; color: #fff; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; } body.color .tour-banner-v2 h3 { font-family: var(--font-serif); font-size: 32px; font-weight: 400; color: #fff; letter-spacing: 0.06em; margin: 0; } body.color .tour-divider { width: 100%; height: 2px; margin: 22px 0; background: radial-gradient(circle, #fff 1px, transparent 1.5px); background-size: 8px 2px; background-repeat: repeat-x; opacity: 0.9; } body.color .tour-lead { font-family: var(--font-serif); font-size: 16px; color: #fff; line-height: 1.8; } body.color .tour-lead span { font-size: 15px; } body.color .tour-banner-ctas { display: flex; gap: 18px; margin-top: 10px; flex-wrap: nowrap; } /* 桜あしらい（バナーからはみ出して配置） */ body.color .tour-sakura { position: absolute; z-index: 3; height: auto; pointer-events: none; } body.color .tour-sakura-tr { top: -28px; right: -24px; width: 200px; } body.color .tour-sakura-bl { bottom: -28px; left: -24px; width: 190px; } /* ========================================================= CONTACT セクション改修版（contact-section-v2） ========================================================= */ body.color .contact-section-v2 { position: relative; background: #FFFCED; padding: 200px 20px 150px; overflow: hidden; } /* 上端の白い波 */ body.color .contact-section-v2 .contact-wave { position: absolute; top: -1px; left: 0; width: 100%; line-height: 0; z-index: 1; pointer-events: none; } body.color .contact-section-v2 .contact-wave svg { display: block; width: 100%; height: 110px; } /* 桜装飾：白×クリームの境目（波線）に重ねて配置 */ body.color .contact-section-v2 .contact-deco-sakura { position: absolute; top: -20px; left: 0; width: 320px; height: auto; z-index: 2; pointer-events: none; } body.color .contact-section-v2 .contact-deco-petals { position: absolute; top: 10px; right: 50px; width: 200px; height: auto; z-index: 2; pointer-events: none; } /* 既存の中央透かし花びらは非表示（新装飾に置き換え） */ body.color .contact-section-v2::before { display: none; } body.color .contact-section-v2 .contact-inner { position: relative; z-index: 3; max-width: 1080px; margin: 0 auto; text-align: center; } /* 見出しブロック */ body.color .contact-head-en { font-family: 'Noto Serif JP', serif; font-size: 12px; color: #FFA8C3; letter-spacing: 0.22em; font-weight: 600; } body.color .contact-head-title { font-weight: 400; font-family: 'Noto Serif JP', serif; font-size: 30px; color: #333333; margin-top: 15px; line-height: 1.4; letter-spacing: 0.04em; } body.color .contact-head-divider { margin-top: 18px; line-height: 0; } body.color .contact-head-desc { font-family: var(--font-serif); font-size: 16px; color: #555555; margin-top: 25px; line-height: 1.9; } /* カードグリッド */ body.color .contact-cards { justify-content: center; margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; align-items: stretch; } /* カード */ body.color .contact-section-v2 .cta-card { background: linear-gradient(135deg, #FFFFFF 60%, #FFF0F5 100%); border-radius: 20px; padding: 40px; text-align: center; box-shadow: 0 5px 15px rgb(0 0 0 / 5%); display: flex; flex-direction: column; align-items: center; } body.color .cta-card-title { font-weight: 400; font-family: 'Noto Serif JP', serif; font-size: 24px; color: #333333; letter-spacing: 0.05em; } body.color .cta-card-line { display: block; width: 100%; max-width: 230px; height: 0; border-top: 1px dashed #f1c9d7; margin: 15px 0 20px; } body.color .cta-card-tel { font-family: 'Noto Serif JP', serif; font-size: 40px; font-weight: 500; color: #333333; letter-spacing: 0.04em; line-height: 1; } body.color .cta-card-hours { font-family: var(--font-serif); font-size: 14px; color: #888888; margin-top: 16px; } body.color .cta-card-desc { font-family: var(--font-serif); font-size: 16px; color: #555555; line-height: 1.9; } body.color .cta-card-note { font-family: var(--font-serif); font-size: 13px; color: #aaaaaa; margin-top: 8px; } /* カード内ボタン（280×50） */ /* 本文とボタンの最小余白（カードは grid で等高化・ボタンは下揃え） */ body.color .cta-card-hours, body.color .cta-card-desc { margin-bottom: 20px; } body.color .cta-card-note { margin-top: 8px; margin-bottom: 20px; } body.color .cta-card-desc:has(+ .cta-card-note) { margin-bottom: 0; } /* ========================================================= 古墳墓ページ（page-kofun）：緑テーマ用の上書き ========================================================= */ /* 見学バナーは樹木墓と共通（ピンク）＝ page-kofun の上書きなし */ /* 特徴バッジ（緑）＋特徴画像 */ body.color.page-kofun .feature-badge { background: linear-gradient(135deg, #B5E08F 0%, #63A726 100%); } body.color.page-kofun .kofun-feature .feature-image { background-image: none !important; background-color: #d9d9d9; } body.color.page-kofun .kofun-feature:nth-child(1) .feature-image { background-image: url("../images/top-color/feat-kofun-01.png") !important; } body.color.page-kofun .kofun-feature:nth-child(2) .feature-image { background-image: url("../images/top-color/feat-kofun-02.png") !important; } body.color.page-kofun .kofun-feature:nth-child(3) .feature-image { background-image: url("../images/top-color/feat-kofun-03.png") !important; } body.color.page-kofun .kofun-feature:nth-child(4) .feature-image { background-image: url("../images/top-color/feat-kofun-04.png") !important; } body.color.page-kofun .kofun-feature:nth-child(5) .feature-image { background-image: url("../images/top-color/feat-kofun-05.png") !important; } /* FOR YOU カード・施設イメージの影なし */ body.color.page-kofun .for-you-item { box-shadow: none; } body.color.page-kofun .gallery-section .gallery-marquee-item { box-shadow: none; } /* FAQ Qバッジ（緑） */ body.color.page-kofun summary.faq-q::before { background: linear-gradient(90deg, #B5E08F 0%, #63A726 100%); } /* 料金セクション背景を淡い緑に */ body.color.page-kofun #lineup { background: #EFF6E0; } /* フロー画像：既定はプレースホルダー。内容が一致するステップのみ樹木墓の写真を流用 */ body.color.page-kofun .flow-card-img { background-image: none !important; background-color: #d9d9d9; } body.color.page-kofun #flow-01 .flow-card-img { background-image: url("../images/top-color/flow-01.png") !important; } body.color.page-kofun #flow-02 .flow-card-img { background-image: url("../images/top-color/flow-02.png") !important; } body.color.page-kofun #flow-03 .flow-card-img { background-image: url("../images/top-color/flow-04.png") !important; } body.color.page-kofun #flow-04 .flow-card-img { background-image: url("../images/top-color/flow-05.png") !important; } body.color.page-kofun #flow-05 .flow-card-img { background-image: url("../images/top-color/flow-kofun-05.png") !important; } body.color.page-kofun #flow-06 .flow-card-img { background-image: url("../images/top-color/flow-kofun-06.png") !important; } body.color.page-kofun #flow-07 .flow-card-img { background-image: url("../images/top-color/flow-kofun-07.png") !important; } /* クロス送客（古墳→樹木）の円バッジはピンク */ body.color.page-kofun .cp-badge { background: url("../images/top-color/cross-promo-circle-pink.png") center/contain no-repeat; } /* クロス送客（古墳→樹木＝ピンク） */ body.color.page-kofun .cross-promo { background: linear-gradient(135deg, #FFFFFF 60%, #FFF0F5 100%); } body.color.page-kofun .cross-promo-body h3 { color: #EA6094; } body.color.page-kofun .cross-promo-body h3::after { background: radial-gradient(circle, #EA6094 1px, transparent 1.5px); background-size: 7px 2px; background-repeat: repeat-x; } /* 比較表：古墳墓列を緑グラデで強調・他列は淡い緑/グレー */ body.color.page-kofun .compare-table thead th { background: var(--accent-bg-2); color: var(--accent-deep); } body.color.page-kofun .compare-table thead th.highlight-col { background: linear-gradient(135deg, #B5E08F 0%, #63A726 100%); color: #fff; } body.color.page-kofun .compare-table thead th:first-child { background: #fff; } body.color.page-kofun .compare-table tbody th { background: #f7f7f7; } body.color.page-kofun .compare-table tbody td { background: #fff; } body.color.page-kofun .compare-table .highlight-col { background: #f1f7e3; color: var(--accent-deep); } body.color.page-kofun .compare-table thead th.highlight-col, body.color.page-kofun .compare-table tbody td.highlight-col { border-left: 2px solid #63A726; border-right: 2px solid #63A726; } body.color.page-kofun .compare-table tbody tr:last-child td.highlight-col { border-bottom: 2px solid #63A726; }