/* global.css - CSS変数・リセット・共通レイアウト基盤 / 抽出元: トップページ/assets/css/style.css */ /* ════════════════════════════════════════════════════════════ スタジオおだしま style.css — Final Version WordPress移行時: wp_enqueue_style() で読み込む CSS変数（:root）は wp_add_inline_style() でACFから上書き可能 ════════════════════════════════════════════════════════════ */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SELECTION — テキスト選択時にブランドカラーを演出 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ ::selection { background: var(--gold-lt); color: #fff; } ::-moz-selection { background: var(--gold-lt); color: #fff; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DESIGN TOKENS — CSS Variables WordPress移行後は wp_add_inline_style() で動的上書き可 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ :root { /* ─ ブランドカラー（ACF: brand_color_* / カスタマイザー上書き可） ─ */ --cream: #F9F6F1; /* ACF: color_cream */ --warm-white: #FDFBF8; /* 補助白 */ --charcoal: #1C1C1C; /* ACF: color_charcoal */ --warm-gray: #6B6560; /* テキスト補助色 */ --light-gray: #E8E4DF; /* ボーダー・区切り線 */ --gold: #B8975A; /* ACF: color_gold */ --gold-lt: #D4B07A; /* ゴールドライト */ --gold-dk: #7A6136; /* ゴールドダーク（旧#8A6E3E cream4.45:1→#7A6136 cream5.43:1/白文字5.85:1・WCAG AA・2026-07-09） */ --indigo: #1E2D5A; /* アクセント */ --line: #04802f; /* ACF: color_line（旧#05a040=白3.44:1→#04802f 白5.08:1/cream4.71:1・WCAG AA・2026-07-09） */ --text: #1C1C1C; /* 本文色 */ --text2: #5A5550; /* 補助テキスト色 */ /* ─ タイポグラフィ（ACF: font_* で将来的にGoogle Fonts URLごと変更可） ─ */ --en: 'Cormorant Garamond', Georgia, serif; --jp: 'Noto Serif JP', serif; --sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; /* ─ アニメーション ─ */ --ease: cubic-bezier(.25, .46, .45, .94); --t: .38s var(--ease); /* ─ スペーシング（ACF: spacing_* / カスタマイザー上書き可） ─ */ --sp: 16px; /* ACF: spacing_sp ページ左右パディング SP */ --sp-m: 40px; /* ACF: spacing_sp_m ページ左右パディング PC */ /* ─ セクション縦パディング（ACF: spacing_section_*） ─ */ --sec-sp: 52px; /* ACF: spacing_section_sp */ --sec-pc: 96px; /* ACF: spacing_section_pc */ } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ RESET ━━ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: #111; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* 横はみ出しのクリップは html（＝ルートスクローラ）側に置く。 body{overflow-x:hidden} だと overflow-y が auto に強制されがスクロールコンテナ化し、 Android Chrome のアドレスバー伸縮処理と position:fixed ヘッダーがデシンクして揺れる（2026-06-16 確定）。 html 側なら overflow-x:hidden でも root が viewport のまま＝デシンクしない。 clip 非対応の旧ブラウザ向けに hidden を先に置きフォールバック（clip 対応ブラウザは後勝ちで clip）。 */ overflow-x: hidden; overflow-x: clip; } body { background: #111; color: var(--text); font-family: var(--sans); /* 本文ゴシックの基底ウェイト。300(Light)はSP等の高精細・小サイズで細く読みづらいため 400(Regular)に。p,li,span… はweight未指定でこの値を継承（2026-07-06）。 ※見出し(--jp=明朝)や各ページCSSで明示300指定のリードは別系統ゆえ不変。 Noto Sans JP 400 は header.php の共通preloadで読込済＝faux boldにならない。 */ font-weight: 400; line-height: 1.8; /* CLS対策: フォントが読み込まれるまでの高さ確保 */ font-synthesis: none; /* 日本語の折り返し（サイト全域）。text-wrap:pretty で最終行に1〜2文字や「。」だけ残る孤立行を避ける（未対応ブラウザは通常折返しにフォールバック）。 ※ word-break:auto-phrase（文節折り）は撤去（2026-06-16・オーナー判断）。理由＝ Chromium限定で iOS Safari/Firefox は元々 normal＝ブラウザ間で折り方が不揃い／日本語の min-content を最長文節幅まで膨らませ多段グリッドで「最小幅の床」を作りはみ出しの一因になる（続き4 Galaxy「選ばれる理由」幅ズレ）。normal に統一して全環境を揃える。 */ text-wrap: pretty; } main { background: var(--cream); } img { max-width: 100%; height: auto; display: block; } .art-picture { display: block; width: 100%; height: 100%; } .art-picture > img { display: block; width: 100%; height: 100%; } .img-cover { width: 100%; height: 100%; object-fit: cover; } .svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } a { text-decoration: none; color: inherit; font-family: inherit; } ul { list-style: none; } button, input, select, textarea { cursor: pointer; background: none; border: none; font-family: var(--sans); /* ブラウザデフォルトフォント混入を完全防止 */ color: inherit; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ サイト全域フォント統制（ブラウザデフォルト混入を防止） ─ 情緒（明朝）：見出し・引用・約束タイトル → Noto Serif JP ─ 機能（ゴシック）：本文・ナビ・ボタン・リスト → Noto Sans JP ─ 数字（英字）：実績・日付・英字見出し → Cormorant Garamond ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ p, li, span, label, dt, dd, address, figcaption, summary, details, nav, ul, ol { font-family: var(--sans); } h1, h2, h3, h4, h5, h6, blockquote, .promise-title { font-family: var(--jp); } time, code, kbd, samp, .num, .en, .ft-copy, .ft-navh, .tcard-num, .tcard-num span, .lc-num, .lc-num span, .n-date, .rv-date, .lbl, .tp-num, .mi-en { font-family: var(--en); } /* ━━ 見出し内インライン要素のフォント継承（罠対策） ━━ 上記「全 span にゴシック適用」ルールにより、見出し（h1〜h6・blockquote）の中に・・・・・・を書くと、親（明朝）を継承せずゴシック化してしまう。各見出しで font-family を毎回書き直さなくて済むよう、見出し内インライン要素は親フォントを継承させる。 ※詳細度（0,0,2）が「span 単独ルール」（0,0,1）より強いため確実に上書き可能。 ※意図的に別フォントを当てたい場合はクラス指定（.en など、詳細度 0,1,0）で上書きする。 */ h1 span, h1 a, h1 em, h1 strong, h1 small, h1 b, h1 i, h2 span, h2 a, h2 em, h2 strong, h2 small, h2 b, h2 i, h3 span, h3 a, h3 em, h3 strong, h3 small, h3 b, h3 i, h4 span, h4 a, h4 em, h4 strong, h4 small, h4 b, h4 i, h5 span, h5 a, h5 em, h5 strong, h5 small, h5 b, h5 i, h6 span, h6 a, h6 em, h6 strong, h6 small, h6 b, h6 i, blockquote span, blockquote a, blockquote em, blockquote strong, blockquote small, blockquote b, blockquote i, .promise-title span, .promise-title a, .promise-title em, .promise-title strong, .promise-title small { font-family: inherit; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SCROLL REVEAL ━━ */ .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; } .rv.on { opacity: 1; transform: translateY(0); } /* delay class は !important 必須： components.css 等で要素独自の transition shorthand が宣言されている場合（例：.line-cta-btn）、transition-delay も 0s にリセットされてしまうため */ .d1 { transition-delay: .10s !important; } .d2 { transition-delay: .20s !important; } .d3 { transition-delay: .30s !important; } .d4 { transition-delay: .40s !important; } .d5 { transition-delay: .50s !important; } .d6 { transition-delay: .60s !important; } .d7 { transition-delay: .70s !important; } .d8 { transition-delay: .80s !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LAYOUT UTILS ━━ */ .c { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--sp); } @media (min-width: 768px) { .c { padding: 0 var(--sp-m); } } .sec { padding: var(--sec-sp) 0; } @media (min-width: 768px) { .sec { padding: var(--sec-pc) 0; } } .u-text-center { text-align: center; } .u-mt-20 { margin-top: 20px; } .u-mt-22 { margin-top: 22px; } .u-mt-24 { margin-top: 24px; } .u-mt-28 { margin-top: 28px; } .u-mt-32 { margin-top: 32px; } .u-overflow-hidden { overflow: hidden; } .u-link-reset { text-decoration: none; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TYPOGRAPHY ━━ */ .lbl { font-family: var(--en); font-size: .6rem; letter-spacing: .44em; color: var(--gold-dk); /* 旧--gold=cream2.56:1でAA未達→gold-dk 5.43:1（2026-07-09） */ display: block; margin-bottom: 8px; text-transform: uppercase; } .lbl-gold { color: var(--gold-dk); } /* 明るい地の eyebrow は gold-dk（暗地は .contact-sec .lbl 等の局所上書きが担当・2026-07-09） */ .lbl-raw { text-transform: none; } .h2 { font-family: var(--jp); font-size: clamp(1.35rem, 4vw, 2.1rem); font-weight: 300; letter-spacing: .15em; color: var(--charcoal); line-height: 1.45; } .h2-lt { color: #fff; } .hdiv { width: 36px; height: 1px; background: var(--gold); margin: 12px 0 18px; } .hdiv-c { margin: 12px auto 18px; } .txt { font-size: .875rem; color: var(--text2); line-height: 2.05; letter-spacing: .04em; } .txt-lt-muted { color: rgba(255,255,255,.6); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HEADER WordPress: header.php ・site-logo → bloginfo('name') + bloginfo('description') ・pc-nav → wp_nav_menu(array('theme_location' => 'primary')) ・sp-nav → wp_nav_menu(array('theme_location' => 'sp-primary')) ・LINE URL → get_field('line_url', 'option') [ACF Options] ・TEL → get_field('tel', 'option') [ACF Options] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .site-hdr { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 10002; /* SPナビ(10000)・burg(10001)より上 */ background-color: rgba(249,246,241,.98); /* .94→.98（全ページ白寄せ・オーナー確定 2026-07-17＝ロゴ/文字の視認性優先） */ border-bottom: 1px solid rgba(184,151,90,.18); transform: translateZ(0); backface-visibility: hidden; transition: background-color .5s var(--ease), border-bottom-color .5s var(--ease), box-shadow .5s var(--ease); } /* スクロール時のリキッドグラス半透明化（.sc は common.js [3] が付与） - 擬似要素 ::before に静的なガラス層（linear-gradient + backdrop-filter）を持たせる - .sc 付与時：本体の background-color を transparent に、::before の opacity を 1 に - 両方が .5s でフェード補間されて滑らかに切り替わる - linear-gradient 同士の transition は CSS 仕様上アニメーションされない（即時切替）が、 background-color と opacity は補間可能。これが本方式の核心 - backdrop-filter は静的（値変化なし）、続き17 の Galaxy 系震え原則を維持 ※詳細仕様は docs/skills/sticky-glass-spec.md 参照（触る前に必読） */ .site-hdr::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.5) 100%); backdrop-filter: blur(18px) saturate(1.8) brightness(1.05); -webkit-backdrop-filter: blur(18px) saturate(1.8) brightness(1.05); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; z-index: 0; } .site-hdr.sc { background-color: transparent; /* 本体の不透明クリーム背景を消し、::before のガラス層だけ見える状態に */ border-bottom-color: transparent; /* アンカーナビ上端との1px隙間を解消 */ box-shadow: inset 0 1px 0 rgba(255,255,255,.55); /* 旧：0 8px 32px ... と inset 0 -1px 0 ... は削除（PC で1px隙間として見えるため） */ } .site-hdr.sc::before { opacity: 1; } /* 暗背景オーバーレイ（over-dark）───────────────────────────── 半透明ヘッダーの下に暗背景セクション（.hero/.nb__hero/.nb__flow-detail/ .line-cta-sec 等）が来ると、金ナビ文字(--gold-dk #7A6136)は黒地で 2.91:1＝AA未達で沈む。common.js [7] が暗背景セクションのヘッダー帯交差を IntersectionObserver で検知し .site-hdr に .over-dark を付与する（.sc とは独立クラス＝背景ロジックには一切触れない・凍結仕様 sticky-glass-spec 維持）。その時だけ文字を明るい金(--gold-lt #D4B07A・黒地8.35:1)へ切替＝金トーンを保つ。 ★発色は必ず「.sc（半透明化）とセット」＝ .site-hdr.sc.over-dark でゲートする。ヘッダーが不透明クリーム（ページ先頭・スクロール前）の間は暗背景が裏にあっても不可視＝通常の濃い金のままが正（.over-dark 単独で発色させるとページを開いた瞬間から白地に明るい金＋影が乗る誤表示になる＝2026-07-07 オーナー報告で修正）。 ★ロゴは SVG （fill 固定 #B8975A）＝ color では変わらないので filter で増光する（brightness(1.2)で ≒ --gold-lt 相当）。 ★ハンバーガーは暗背景上で charcoal 線が沈むため切替は残し、色はナビ文字と同じ金（--gold-lt）へ統一（2026-07-07 オーナー指示）。 ★状態クラスゆえ @media(hover:…) の外に置く（sticky-glass-spec.md「触ってはいけない」5）。 transition は .sc フェード(.5s)とテンポを揃える（背景系は不変更）（2026-07-06/07-07） */ .site-hdr .pc-nav-link, .site-hdr .pc-nav-cat { transition: color .5s var(--ease); } .site-hdr .site-logo-img { transition: filter .5s var(--ease); } .site-hdr .burg span { transition: transform .3s ease, opacity .3s ease, background-color .5s var(--ease); } .site-hdr.sc.over-dark .pc-nav-link, .site-hdr.sc.over-dark .pc-nav-cat { color: var(--gold-lt); text-shadow: 0 1px 2px rgba(0,0,0,.32); } .site-hdr.sc.over-dark .site-logo-img { filter: brightness(1.2); } .site-hdr.sc.over-dark .burg span { background: var(--gold-lt); } /* WordPress管理バー（32px / モバイル46px）との衝突回避 */ .admin-bar .site-hdr { top: 32px; } @media (max-width: 782px) { .admin-bar .site-hdr { top: 46px; } } .hdr-wrap { position: relative; z-index: 1; /* ::before（ガラス層）の上にコンテンツを置く */ display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 var(--sp); max-width: 1400px; margin: 0 auto; } @media (min-width: 768px) { .hdr-wrap { height: 72px; padding: 0 var(--sp-m); } } /* ロゴ */ .site-logo { font-family: var(--en); font-size: .88rem; font-weight: 400; letter-spacing: .14em; color: var(--charcoal); line-height: 1.15; display: flex; flex-direction: column; flex-shrink: 0; transition: filter var(--t); } .site-logo:hover { filter: brightness(.78) saturate(1.28); } .site-logo span { font-family: var(--jp); font-size: .56rem; letter-spacing: .16em; color: var(--warm-gray); font-weight: 300; } @media (min-width: 768px) { .site-logo { font-size: .98rem; } .site-logo span { font-size: .62rem; } } /* PCグローバルナビ（1024px以上で表示） */ .pc-nav { display: none; align-items: center; gap: 4px; flex: 1; justify-content: center; max-width: none; margin: 0 10px; min-width: 0; } @media (min-width: 1024px) { .pc-nav { display: flex; } } .pc-nav-group { position: relative; } .pc-nav-link, .pc-nav-cat { display: inline-flex; align-items: center; gap: 6px; /* PCヘッダーのメニュー＝機能ナビゆえゴシック(--sans)。フッター/SPナビと統一・ global統制ルール「ナビ＝ゴシック」に整合。色は薄い金(--gold 2.56:1)→濃い金 (--gold-dk 5.43:1)で金のトーンを残しつつ可読性を確保（2026-07-06・値は2026-07-09に#7A6136へ更新）。 */ font-family: var(--sans); font-size: .62rem; font-weight: 400; letter-spacing: .02em; color: var(--gold-dk); padding: 6px 5px; white-space: nowrap; background: transparent; border: 0; position: relative; transition: color var(--t); } .pc-nav-cat::after { content: ''; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); } .pc-nav-group:hover .pc-nav-cat, .pc-nav-group:focus-within .pc-nav-cat { color: var(--gold-lt); } .pc-nav-panel { position: absolute; top: calc(100% + 8px); left: 50%; z-index: 2; min-width: 190px; padding: 8px 0; background: #fff; /* 白色不透明（透明はやめる） */ border: 1px solid rgba(184,151,90,.18); box-shadow: 0 16px 36px rgba(28,28,28,.12); display: grid; grid-template-columns: 1fr; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -4px); transition: opacity var(--t), visibility var(--t), transform var(--t); } .pc-nav-panel::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } .pc-nav-group:hover .pc-nav-panel, .pc-nav-group:focus-within .pc-nav-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .pc-nav-group--menu .pc-nav-panel { min-width: 360px; grid-template-columns: repeat(2, minmax(150px, 1fr)); grid-template-rows: repeat(7, auto); grid-auto-flow: column; } .pc-nav-group--menu .pc-nav-panel::after { content: ''; grid-column: 2; grid-row: 1; min-height: 44px; pointer-events: none; } .pc-nav-panel a { display: flex; align-items: center; width: 100%; /* ドロップダウン内リンクもゴシックへ（トップレベルボタンと統一・2026-07-06）。色は補助テキスト --text2 のまま（メニュー項目リストは階層下＝据え置き）。 */ font-family: var(--sans); font-size: .72rem; font-weight: 400; letter-spacing: .04em; color: var(--text2); padding: 8px 18px; white-space: nowrap; position: relative; transition: color var(--t); } /* 1200px以上は余裕が出るので少し広げる */ @media (min-width: 1200px) { .pc-nav { gap: 8px; margin: 0 12px; } .pc-nav-link, .pc-nav-cat { font-size: .68rem; padding: 6px 8px; letter-spacing: .04em; } } .pc-nav-link::after, .pc-nav-panel a::after { content: ''; position: absolute; bottom: 6px; left: 18px; right: 18px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: center; transition: transform var(--t); } .pc-nav-link::after { bottom: 1px; left: 8px; right: 8px; } /* 装飾hoverのみタッチ残留ガード（開閉hoverはtap-hover開閉が機能要件のため素のまま＝意図的・監査2026-07-10） */ @media (hover: hover) and (pointer: fine) { .pc-nav-link:hover, .pc-nav-panel a:hover { color: var(--gold-lt); } .pc-nav-link:hover::after, .pc-nav-panel a:hover::after { transform: scaleX(1); } } /* ── フォトログメガメニュー（PCナビ・公開7軸×term 全展開）────────────── .pc-nav-mega は .pc-nav-panel を併用＝hover表示・中央寄せ・フェードは既存ルールを流用し、ここでは幅と内部レイアウト（トップリンク＋7軸グリッド＋term チップ）だけ上書きする。 ※ ヘッダーのガラス効果（.site-hdr）・アンカーナビ（sticky-glass-spec.md 凍結対象）には非干渉。 */ .pc-nav-mega { width: min(720px, 92vw); min-width: 0; display: block; padding: 16px 20px 18px; /* ビューポート縦が小さいと7軸フル展開が画面外にあふれ、hover を保ったまま下段の軸に到達できず操作不能になるため、メガメニュー内をスクロール可能にする（96px = 固定ヘッダー72px + top余白8px + 下マージン・2026-06-16）。 */ max-height: calc(100vh - 96px); overflow-y: auto; } /* ボタン⇄メガメニューの隙間を埋める「橋」。他ドロップダウンは .pc-nav-panel::before（パネル外 top:-10px）で橋渡しするが、メガは overflow-y:auto がその擬似要素をクリップしてしまい隙間で hover が切れて閉じる（2026-06-16 実機再現）。橋をパネルの外＝グループ側 ::after に置いてクリップを回避する。閉じている間は pointer-events:none で無害化（ボタン到達後のみ橋を有効化）。 */ .pc-nav-group--photolog::after { content: ''; position: absolute; top: 100%; left: 50%; width: min(720px, 92vw); height: 14px; /* 8px隙間＋パネル上端への重ね */ transform: translateX(-50%); pointer-events: none; } .pc-nav-group--photolog:hover::after, .pc-nav-group--photolog:focus-within::after { pointer-events: auto; } /* .pc-mega-top は＝ .pc-nav-panel a(詳細度0,1,1) に width/display/color/padding を奪われる。 .pc-nav-mega を前置(0,2,0)して確実に勝たせる（チップ .pc-mega-terms li a が効くのと同じ理屈）。 */ .pc-nav-mega .pc-mega-top { display: flex; /* block-level flex＝margin auto で中央寄せを効かせる（旧 .pc-nav-panel a の width:100% で左寄せに見えた） */ align-items: center; justify-content: center; width: fit-content; margin: 0 auto; /* パネル内で中央寄せ（オーナー指摘・左寄せ→中央） */ padding: 7px 15px; font-family: var(--sans); font-size: .68rem; font-weight: 400; /* ヘッダーナビ統一でゴシックへ（2026-07-06） */ letter-spacing: .04em; color: var(--gold-dk); /* タグ(.pc-mega-terms li a)と色を揃える（旧 charcoal→gold-dk・枠 .4→.45） */ border: 1px solid rgba(184, 151, 90, .45); border-radius: 999px; } .pc-mega-top::after { display: none; } .pc-nav-mega .pc-mega-top:hover { color: #fff; background: var(--gold-dk); border-color: var(--gold-dk); } /* 白文字×gold=2.76:1→gold-dk 5.85:1（2026-07-09） */ /* タグのhoverと統一・.pc-nav-panel a:hover(0,2,1)に勝たせる */ .pc-mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px 22px; margin-top: 14px; } .pc-mega-axis-ttl { /* フォトログメガメニューの軸見出しも他ヘッダーナビと統一＝ゴシック(--sans)＋濃い金(--gold-dk 5.43:1・旧 --gold 2.56:1 は薄すぎ)。weight は 400 （ヘッダー共通フォントは Noto Sans JP 300;400 のみ＝500 指定は faux bold で細く見えるため。色 gold-dk と字間で term チップと区別・2026-07-06）。 */ font-family: var(--sans); font-size: .62rem; font-weight: 400; letter-spacing: .06em; color: var(--gold-dk); margin: 0 0 8px; } .pc-mega-terms { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .pc-mega-terms li a { display: inline-flex; align-items: center; width: auto; min-height: 0; /* 既存 .pc-nav-panel a の min-height:44px 継承を打ち消す（チップは小型ピル） */ padding: 5px 11px; font-family: var(--sans); font-size: .66rem; font-weight: 400; /* ヘッダーナビ統一でゴシックへ・weight 300→400（共通フォント300;400ゆえfaux bold回避・他ナビと統一・2026-07-06） */ letter-spacing: .02em; color: var(--gold-dk); white-space: nowrap; background: transparent; /* フォトログのカテゴリタブのピル(.pl-chip)に色を合わせる（cream地→透明・文字 gold-dk・枠 .45・2026-06-16） */ border: 1px solid rgba(184, 151, 90, .45); border-radius: 999px; } .pc-mega-terms li a::after { display: none; } .pc-mega-terms li a:hover { color: #fff; background: var(--gold); border-color: var(--gold); } /* 成人式リンクだけ強調 */ /* ヘッダー右側アクション */ .hdr-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* LINEボタン（600px以上で表示） */ .hdr-line-btn { display: none; align-items: center; gap: 6px; font-size: .65rem; letter-spacing: .1em; font-family: var(--sans); padding: 8px 16px; white-space: nowrap; text-decoration: none; } @media (min-width: 600px) { .hdr-line-btn { display: inline-flex; } } .hdr-line-btn svg { width: 15px; height: 15px; } /* ハンバーガーボタン（1024px未満で表示） */ .burg { display: flex; flex-direction: column; gap: 5px; padding: 6px; background: none; border: none; cursor: pointer; position: relative; z-index: 10001; /* SPナビ(10000)より上 */ } @media (min-width: 1024px) { .burg { display: none; } } .burg span { display: block; width: 22px; height: 1.5px; background: var(--charcoal); transition: transform .3s ease, opacity .3s ease, background-color .3s ease; transform-origin: center; } .burg.op span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .burg.op span:nth-child(2) { opacity: 0; transform: scaleX(0); } .burg.op span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* SPナビ（ドロワー）わずかに透ける設定：ヘッダー・PCサブメニューと統一感を出しつつ、可読性も確保。メニュー本体は不透明寄り（92%）、blur で下のコンテンツをぼかして読みやすさを担保。 */ .sp-nav { display: flex; flex-direction: column; position: fixed; inset: 0; top: 60px; background: rgba(247,243,236,.92); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); z-index: 10000; overflow-y: auto; padding: 24px var(--sp) 48px; /* 初期状態: 非表示（フェードアウト位置） */ opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .32s var(--ease), visibility .32s var(--ease), transform .32s var(--ease); pointer-events: none; } @media (min-width: 768px) { .sp-nav { top: 72px; } } /* SPナビはモバイル専用のため1024px以上では非表示（PCナビが代替） */ @media (min-width: 1024px) { .sp-nav { display: none !important; } } .sp-nav.op { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ① メインメニュー: 段階的フェードイン + 装飾 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .sp-nav-list { list-style: none; margin: 0; padding: 0; } .sp-nav-list > li { /* 各項目を上から順にフェードイン（ナビ展開時にopクラスでトリガー） */ opacity: 0; transform: translateY(-6px); transition: opacity .28s var(--ease), transform .28s var(--ease); } .sp-nav.op .sp-nav-list > li { opacity: 1; transform: translateY(0); } /* 段階的にディレイをかける（リッチな段差感） */ .sp-nav.op .sp-nav-list > li:nth-child(1) { transition-delay: .035s; } .sp-nav.op .sp-nav-list > li:nth-child(2) { transition-delay: .07s; } .sp-nav.op .sp-nav-list > li:nth-child(3) { transition-delay: .105s; } .sp-nav.op .sp-nav-list > li:nth-child(4) { transition-delay: .14s; } .sp-nav.op .sp-nav-list > li:nth-child(5) { transition-delay: .175s; } .sp-nav.op .sp-nav-list > li:nth-child(6) { transition-delay: .21s; } .sp-nav.op .sp-nav-list > li:nth-child(7) { transition-delay: .245s; } .sp-nav.op .sp-nav-list > li:nth-child(8) { transition-delay: .28s; } .sp-nav.op .sp-nav-list > li:nth-child(9) { transition-delay: .315s; } .sp-nav.op .sp-nav-list > li:nth-child(10) { transition-delay: .35s; } .sp-nav.op .sp-nav-list > li:nth-child(11) { transition-delay: .385s; } .sp-nav.op .sp-nav-list > li:nth-child(12) { transition-delay: .42s; } .sp-nav.op .sp-nav-list > li:nth-child(13) { transition-delay: .455s; } .sp-nav-info-lbl { font-family: var(--sans); /* ナビ＝ゴシック（PCナビと統一・2026-07-07） */ font-size: 1rem; font-weight: 400; letter-spacing: .08em; color: var(--gold-dk); /* 旧--gold=2.4:1でAA未達→gold-dk 5.43:1（2026-07-08・値は2026-07-09更新） */ border-bottom: 1px solid rgba(184,151,90,.25); } /* メニュー項目本体 */ .sp-nav-list a, .sp-nav-menu-toggle { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 16px 4px 16px 16px; /* 極細のゴールド点線で項目を区切る（実線より上品） */ border-bottom: 1px dashed rgba(184,151,90,.25); color: var(--gold); text-decoration: none; transition: color var(--t), padding var(--t); } .sp-nav-list a::before, .sp-nav-menu-toggle::before { /* ホバー/タップ時に左から伸びるゴールドの縦線 */ content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: var(--gold); transform: translateY(-50%); transition: height .3s var(--ease); } .sp-nav-list a:hover, .sp-nav-list a:active, .sp-nav-menu-toggle:hover, .sp-nav-menu-toggle:active, .sp-menu-acc.is-open .sp-nav-menu-toggle { color: var(--gold); padding-left: 22px; } .sp-nav-list a:hover::before, .sp-nav-list a:active::before, .sp-nav-menu-toggle:hover::before, .sp-nav-menu-toggle:active::before, .sp-menu-acc.is-open .sp-nav-menu-toggle::before { height: 60%; } .sp-nav-toggle-main { display: inline-flex; align-items: baseline; gap: 7px; } .sp-menu-ic { display: inline-block; color: var(--gold-lt); font-size: .8rem; line-height: 1; transform-origin: center; transition: transform .29s var(--ease), color var(--t); } .sp-menu-acc.is-open .sp-menu-ic { color: var(--gold); transform: rotate(90deg); } .sp-menu-sub { max-height: 0; overflow: hidden; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: max-height .29s var(--ease), opacity .24s ease, transform .29s var(--ease), visibility 0s linear .29s; } .sp-menu-acc.is-open .sp-menu-sub { max-height: 760px; visibility: visible; opacity: 1; transform: translateY(0); transition: max-height .29s var(--ease), opacity .24s ease, transform .29s var(--ease), visibility 0s; } .sp-menu-sub li { opacity: 1; transform: none; transition: none; } .sp-menu-sub a { justify-content: space-between; gap: 12px; padding: 10px 4px 10px 34px; font-family: var(--sans); /* ナビ＝ゴシック（PCナビと統一・2026-07-07） */ font-size: 1rem; font-weight: 400; letter-spacing: .08em; color: var(--charcoal); border-bottom-color: rgba(184,151,90,.16); } .sp-menu-sub a::before { content: none; } .sp-menu-sub-jp { display: inline-flex; align-items: baseline; min-width: 0; font-family: var(--sans); /* ナビ＝ゴシック（PCナビと統一・2026-07-07） */ font-size: 1rem; font-weight: 400; letter-spacing: .08em; } .sp-menu-sub-jp::before { content: '・'; color: var(--gold); margin-right: 4px; } .sp-menu-sub-en { font-family: var(--en); font-size: .56rem; font-weight: 400; letter-spacing: .26em; color: var(--gold-lt); text-transform: uppercase; white-space: nowrap; opacity: .85; flex-shrink: 0; } .sp-menu-sub a:hover, .sp-menu-sub a:active { padding-left: 40px; } .sp-menu-sub a:hover .sp-menu-sub-en, .sp-menu-sub a:active .sp-menu-sub-en { color: var(--gold); opacity: 1; } /* 日本語ラベル（ナビ＝ゴシック。PCナビ・フッターと統一・2026-07-07） */ .sp-nav-jp { font-family: var(--sans); font-size: 1rem; font-weight: 400; letter-spacing: .08em; color: var(--charcoal); transition: color var(--t); } .sp-nav-list a:hover .sp-nav-jp, .sp-nav-list a:active .sp-nav-jp, .sp-nav-menu-toggle:hover .sp-nav-jp, .sp-nav-menu-toggle:active .sp-nav-jp, .sp-menu-acc.is-open .sp-nav-menu-toggle .sp-nav-jp { color: var(--gold-dk); /* 旧--gold=2.4:1でAA未達→gold-dk 5.43:1（開状態は持続表示ゆえAA必須・2026-07-08・値は2026-07-09更新） */ } /* 英字サブラベル（— Cormorant Garamond 装飾） */ .sp-nav-en { font-family: var(--en); font-size: .56rem; font-weight: 400; letter-spacing: .26em; color: var(--gold-lt); text-transform: uppercase; white-space: nowrap; opacity: .85; } .sp-nav-list a:hover .sp-nav-en, .sp-nav-list a:active .sp-nav-en, .sp-nav-menu-toggle:hover .sp-nav-en, .sp-nav-menu-toggle:active .sp-nav-en, .sp-menu-acc.is-open .sp-nav-menu-toggle .sp-nav-en { color: var(--gold); opacity: 1; } .sp-nav-info { margin-top: 28px; padding: 20px 0 8px; border-top: 1px solid rgba(184,151,90,.18); opacity: 0; transform: translateY(-6px); transition: opacity .4s var(--ease) .45s, transform .4s var(--ease) .45s; } .sp-nav.op .sp-nav-info { opacity: 1; transform: translateY(0); } .sp-nav-info-lbl { margin: 0 0 14px; padding: 0 4px 8px 16px; text-transform: none; opacity: 1; } .sp-info-grid { display: flex; flex-direction: column; } .sp-info-item { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px dashed rgba(184,151,90,.18); text-decoration: none; color: var(--gold); transition: color var(--t), transform var(--t), padding var(--t); position: relative; } .sp-info-item--primary { padding: 14px 4px; } .sp-info-item--quiet { padding: 12px 4px; color: var(--charcoal); } a.sp-info-item::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: var(--gold); transform: translateY(-50%); transition: height .3s var(--ease); } a.sp-info-item:hover, a.sp-info-item:active { color: var(--gold); padding-left: 12px; } a.sp-info-item:hover::before, a.sp-info-item:active::before { height: 60%; } .sp-info-item:last-child { border-bottom: none; } .sp-info-ic { width: 22px; height: 22px; flex-shrink: 0; color: var(--gold); stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; overflow: visible; } .sp-info-item--quiet .sp-info-ic { width: 22px; height: 22px; color: var(--gold); } .sp-info-val { font-family: var(--sans); /* ナビ＝ゴシック統一（2026-07-07）の取り残しを是正（旧--jp明朝・2026-07-08） */ font-size: .88rem; letter-spacing: .04em; line-height: 1.4; flex: 1; min-width: 0; /* flex子要素のはみ出し防止 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--t); } .sp-info-val--en { /* 旧: Cormorant(--en)＋サイズ増補正。住所内の数字(4-3)はゴシックなのにTEL/営業時間だけ明朝系で同一パネル内に数字書体が混在＝浮く（オーナー指摘）→パネル内ゴシック統一（2026-07-08）。等幅数字(tnum)は桁揃えのため維持 */ font-family: var(--sans) !important; letter-spacing: .04em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .sp-info-item--primary .sp-info-val { font-size: .95rem; color: var(--charcoal); } .sp-info-item--quiet .sp-info-val { font-size: .95rem; letter-spacing: .04em; color: var(--charcoal); } .sp-info-arr { font-family: var(--en); font-size: .7rem; color: var(--gold-lt); flex-shrink: 0; width: 18px; text-align: right; } .sp-info-arr--empty { color: transparent; } /* スペーサー */ .sp-info-grid a.sp-info-item:last-child { border-bottom: none; } .sp-info-grid a.sp-info-item:hover .sp-info-ic, .sp-info-grid a.sp-info-item:active .sp-info-ic { color: var(--gold-lt); } .sp-info-grid a.sp-info-item:hover .sp-info-val, .sp-info-grid a.sp-info-item:active .sp-info-val { color: var(--gold); } .sp-info-grid a.sp-info-item:hover .sp-info-arr, .sp-info-grid a.sp-info-item:active .sp-info-arr { color: var(--gold); } /* 狭い画面: 値フォント微縮小 */ @media (max-width: 380px) { .sp-info-item { gap: 10px; } .sp-info-grid a.sp-info-item { gap: 10px; } .sp-info-val { font-size: .8rem; } /* --en のサイズ増補正はゴシック統一で撤去（2026-07-08） */ } .sp-nav .sp-line-btn { margin-top: 24px; /* 最重要CTAは金の面で塗る（type-and-color【6】）。旧: 金文字×透明地=2.4:1でAA未達 → gold-dk面+白文字=5.85:1（/about/ map-open と同手法・2026-07-08）。hover=--gold面で増光 */ color: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 16px; font-family: var(--sans); font-size: .86rem; letter-spacing: .08em; font-weight: 400; background: var(--gold-dk); border: 1px solid var(--gold-dk); border-radius: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 4px 14px rgba(184,151,90,.08); opacity: 0; transform: translateY(-6px); transition: opacity .4s var(--ease) .55s, transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease); } .sp-nav.op .sp-line-btn { opacity: 1; transform: translateY(0); } .sp-nav .sp-line-btn svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; } .sp-nav .sp-line-btn:hover, .sp-nav .sp-line-btn:active { color: #fff; background: var(--gold); border-color: var(--gold); transform: translateY(0); box-shadow: none; transition: transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BREADCRUMB WordPress: Yoast → yoast_breadcrumb() / RankMath → rank_math_the_breadcrumbs() トップページはホームのみ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .breadcrumb { background: var(--warm-white); border-bottom: 1px solid var(--light-gray); padding-top: 60px; /* ヘッダー高さ分オフセット */ } @media (min-width: 768px) { .breadcrumb { padding-top: 72px; } } .breadcrumb-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; padding: 10px var(--sp); max-width: 1200px; margin: 0 auto; font-size: .66rem; letter-spacing: .07em; color: var(--warm-gray); } @media (min-width: 768px) { .breadcrumb-inner { padding: 11px var(--sp-m); } } .breadcrumb-inner a { color: var(--warm-gray); transition: color var(--t); } .breadcrumb-inner a:hover { color: var(--gold); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FOOTER WordPress: footer.php / wp_nav_menu() Footer navigation + Instagram + LINE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ footer { background: #111; color: rgba(255,255,255,.82); } body > footer { padding-bottom: 6px; } /* 軽量版マップ */ .ft-map-link { margin-top: 20px; position: relative; overflow: hidden; border: 1px solid rgba(184,151,90,.25); transition: box-shadow .4s ease; } .ft-map-link:hover { box-shadow: 0 4px 20px rgba(184,151,90,.18); } .ft-map-img-link { display: block; position: relative; text-decoration: none; overflow: hidden; height: 140px; border-radius: 4px; } .ft-map-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t); filter: brightness(.72) saturate(.6); } .ft-map-img-link:hover .ft-map-img { transform: scale(1.03); filter: brightness(.9) saturate(.85); } .ft-map-open { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(17,17,17,.88) 0%, transparent 100%); color: var(--gold-lt); font-family: var(--en); font-size: .6rem; letter-spacing: .18em; padding: 14px 12px 10px; display: flex; align-items: center; gap: 6px; } .ft-map-open svg { width: 11px; height: 11px; fill: var(--gold-lt); flex-shrink: 0; } .ft-inner { padding: 52px var(--sp) 36px; max-width: 1360px; margin: 0 auto; display: grid; gap: 28px; grid-template-columns: 1fr; } @media (min-width: 580px) { .ft-inner { gap: 34px; padding: 52px var(--sp-m) 36px; } } @media (min-width: 1024px) { .ft-inner { grid-template-columns: minmax(260px, .85fr) minmax(0, 2.4fr); gap: 64px; padding: 68px var(--sp-m) 50px; } } .ft-brand-logo { display: block; width: min(190px, 78vw); height: auto; } .ft-brand-logo-link { display: inline-block; margin-bottom: 7px; transition: filter var(--t); } .ft-brand-logo-link:hover { filter: brightness(.78) saturate(1.28); } .ft-brand-jp { font-family: var(--jp); font-size: .63rem; letter-spacing: .18em; color: rgba(255,255,255,.85); margin-bottom: 13px; } .ft-addr { font-size: .7rem; line-height: 2.15; font-style: normal; } .ft-addr a { color: rgba(255,255,255,.8); transition: color var(--t); } .ft-addr a:hover, .ft-addr a:active { color: var(--gold); } /* Local SEO 文言（住所の直下・商圏明示） */ .ft-local-seo { font-size: .65rem; color: rgba(255,255,255,.72); letter-spacing: .04em; line-height: 1.7; margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,.1); } /* フッターSNS（Instagram + LINE のみ） */ .ft-sns { display: flex; gap: 9px; margin-top: 13px; } .ft-sns a { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: border-color var(--t), background-color var(--t), transform var(--t); } .ft-sns a:hover { border-color: var(--gold); } .ft-sns svg { width: 15px; height: 15px; fill: rgba(255,255,255,.7); } .ft-sns a:hover svg { fill: var(--gold); } .ft-nav-area { display: grid; gap: 26px; } .ft-nav-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .ft-nav-stack { display: contents; } .ft-nav-group--photolog { grid-column: 1 / -1; } .ft-navh { font-family: var(--jp); font-size: .7rem; letter-spacing: .12em; color: var(--gold); margin-bottom: 12px; } .ft-nav li { margin-bottom: 8px; } .ft-nav a { font-size: .7rem; color: rgba(255,255,255,.78); letter-spacing: .04em; transition: color var(--t); } .ft-nav a:hover { color: var(--gold); } /* フォトログ＝親見出し配下のサブグループ（地域から探す／ロケ地から探す／ほかの切り口） */ .ft-photolog-sub { margin-bottom: 16px; } .ft-photolog-sub:last-child { margin-bottom: 0; } .ft-photolog-sublabel { font-family: var(--jp); font-size: .64rem; letter-spacing: .06em; color: rgba(255,255,255,.62); margin-bottom: 8px; } .ft-nav-group--photolog .ft-nav--photolog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; } /* 地域（市町村）＝見出しなしの裸リストがロケ地に溶け込むのを防ぐ薄い区切り線。フッター既存の区切り線（.ft-group-info 等）と同トーンで控えめに。 */ .ft-photolog-sub--divided { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 14px; } .ft-photolog-all-link { display: inline-block; font-size: .68rem; color: rgba(255,255,255,.5); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 1px; transition: color var(--t), border-color var(--t); } .ft-photolog-all-link:hover { color: var(--gold); border-color: var(--gold); } /* 生の「→」を文言に溶接せず擬似要素で付与（ai-tells-checklist.md 手癖12） */ .ft-photolog-all-link::after { content: "→"; margin-left: .35em; } .ft-nav-menu { display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(6, auto); gap: 8px 22px; } .ft-nav-menu li { margin-bottom: 0; } @media (min-width: 580px) { .ft-nav-area { gap: 28px; } .ft-nav-pair { gap: 28px; } .ft-nav-menu { gap: 8px 28px; } } @media (min-width: 1024px) { .ft-nav-area { /* フォトログ列（photolog）は地域5＋ロケ地7＋CTA で中身が突出するため、撮影メニュー列は維持しつつ photolog を最も広く取り、info/studio を少し詰める（1fr 一律だと photolog 列が ~136px で地名・CTA が折り返す＝2026-06-12 解消）。 */ grid-template-columns: 2fr 0.9fr 0.9fr 1.6fr; grid-template-areas: "menu info studio photolog"; align-items: start; gap: 36px; } .ft-nav-pair, .ft-nav-stack { display: contents; } .ft-nav-group--menu { grid-area: menu; } .ft-nav-group--info { grid-area: info; } .ft-nav-group--studio { grid-area: studio; } .ft-nav-group--photolog { grid-area: photolog; } .ft-navh { font-size: .78rem; margin-bottom: 16px; } .ft-nav { display: grid; gap: 10px 0; } .ft-nav li { margin-bottom: 0; } .ft-nav a { font-size: .78rem; line-height: 1.55; } .ft-nav-menu { grid-template-columns: repeat(2, max-content); gap: 10px 30px; } } /* グループ店舗（信頼補強）：ft-bottomの直前・主張しすぎない上品な佇まい */ .ft-group-info { border-top: 1px solid rgba(255,255,255,.07); padding: 24px var(--sp); max-width: 1200px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; box-sizing: border-box; } .ft-group-lbl { font-family: var(--en); /* Cormorant Garamond */ font-size: .55rem; letter-spacing: .22em; color: var(--gold); opacity: .75; } .ft-sister-link { font-family: var(--sans); /* Noto Sans JP */ font-size: .75rem; letter-spacing: .1em; color: rgba(255,255,255,.82); text-decoration: none; transition: color .3s ease, transform .3s ease; display: inline-block; } .ft-sister-link:hover { color: var(--gold); transform: translateY(-1px); } .ft-bottom { border-top: 1px solid rgba(255,255,255,.07); padding: 14px var(--sp); max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; box-sizing: border-box; } @media (min-width: 768px) { .ft-bottom { flex-direction: row; justify-content: space-between; padding: 14px var(--sp-m); } } .ft-copy { font-family: var(--en); font-size: .57rem; letter-spacing: .18em; color: rgba(255,255,255,.5); } .ft-policy { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .ft-policy a { font-size: .6rem; letter-spacing: .08em; color: rgba(255,255,255,.62); transition: color var(--t); } .ft-policy a:hover { color: var(--gold); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ACCESSIBILITY UTILITIES WordPress移行時: assets/css/common.css に移動 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* visually-hidden: SEO/スクリーンリーダー向け非表示パターン */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* skip link: キーボードユーザー・スクリーンリーダー向け */ .skip-link { position: absolute; top: -100%; left: 0; background: var(--gold-dk); /* キーボードフォーカス時のみ可視のa11y要素。--gold×白2.76:1→gold-dk×白5.85:1（2026-07-21） */ color: #fff; padding: 10px 20px; font-family: var(--jp); font-size: .84rem; letter-spacing: .06em; z-index: 10030; /* ヘッダー(10002)・ライトボックス(10010)より上＝フォーカス時に必ず視認できる */ transition: top .2s ease; } .skip-link:focus-visible { top: 0; } /* focus-visible: キーボードフォーカスの視認性 gold(#B8975A) は cream/白背景で 2.6:1 と非テキスト3:1未達のため gold-dk(#8A6E3E) に。 cream4.45:1・白4.79:1 で WCAG 2.4.11 をクリア（QA監査 2026-05-31）。 */ :focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 3px; } /* マウス操作時はfocus ringを非表示 */ :focus:not(:focus-visible) { outline: none; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CTA MINI バナー（料金・撮影の流れ直後のコンパクトCTA） WordPress移行時: assets/css/common.css に移動 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .cta-mini { padding: 28px 0; } .cta-mini--light { background: var(--warm-white); border-top: 1px solid var(--light-gray); border-bottom: 1px solid var(--light-gray); } /* cta-mini SP・PC共に中央寄せ統一 */ .cta-mini-inner { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; } @media (min-width: 640px) { /* PCではテキストとボタンを画面中央でバランスよく寄り添わせる - 両端泣き別れ（space-between）を回避 - gap 40px で適度な距離感、テキストは左揃えで読みやすく */ .cta-mini-inner { flex-direction: row; align-items: center; justify-content: center; text-align: left; gap: 40px; } .cta-mini-inner > .cta-mini-text > .cta-mini-lead, .cta-mini-inner > .cta-mini-text > .cta-mini-sub { text-align: left; } } /* SP専用改行ヘルパー（PC では非表示） */ .sp-only { display: inline; } @media (min-width: 640px) { .sp-only { display: none; } } .cta-mini--light .cta-mini-lead { color: var(--charcoal); } .cta-mini-lead { font-family: var(--sans); font-size: .9rem; font-weight: 500; letter-spacing: .06em; margin-bottom: 2px; /* 行間を詰める */ } .cta-mini-sub { font-family: var(--sans); /* 実用の案内文＝ゴシック（type-and-color） */ font-size: .8rem; letter-spacing: .05em; margin-bottom: 0; } .cta-mini--light .cta-mini-sub { color: var(--text2); } .cta-mini-btn { flex-shrink: 0; white-space: nowrap; } /* 安心の一言（ボタン直前に表示） */ .cta-reassure { font-family: var(--sans); font-size: .77rem; letter-spacing: .07em; margin-bottom: 8px; margin-top: 6px; } .cta-mini--light .cta-reassure { color: var(--warm-gray); } /* 料金後CTA専用（独立セクション・強調） */ .cta-price-block { background: linear-gradient(135deg, #1a2340 0%, var(--indigo) 100%); padding: 48px 0; position: relative; overflow: hidden; } .cta-price-block::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23B8975A' fill-opacity='0.05'%3E%3Ccircle cx='20' cy='20' r='1'/%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } @media (min-width: 768px) { .cta-price-block { padding: 64px 0; } } .cta-price-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; } .cta-price-label { font-family: var(--en); font-size: .58rem; letter-spacing: .38em; color: var(--gold-lt); display: block; margin-bottom: 4px; } /* 料金が気になる方へ（eyebrow） */ .cta-price-eyebrow { font-family: var(--jp); font-size: .82rem; font-weight: 400; letter-spacing: .12em; color: var(--gold-lt); margin-bottom: 12px; } /* 箇条書き（あなたに合うプラン etc.） */ .cta-price-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; text-align: left; } .cta-price-list li { font-family: var(--jp); font-size: .84rem; letter-spacing: .06em; color: rgba(255,255,255,.82); display: flex; align-items: center; gap: 8px; } .cta-price-list li::before { content: '✓'; color: var(--line); font-weight: 700; flex-shrink: 0; } .cta-price-lead { font-family: var(--jp); font-size: clamp(.95rem, 2.5vw, 1.15rem); font-weight: 400; letter-spacing: .08em; color: #fff; line-height: 1.7; margin-bottom: 4px; } .cta-price-sub { font-family: var(--jp); /* 情緒的UX強化：明朝体 */ font-size: .82rem; color: #fff; opacity: .9; letter-spacing: .06em; line-height: 1.85; margin-bottom: 20px; } .cta-price-reassure { font-family: var(--jp); font-size: .68rem; letter-spacing: .06em; color: #fff; opacity: .85; margin: 12px 0; line-height: 1.9; text-align: center; } .cta-price-reassure-muted { opacity: .6; } /* 料金後CTAのボタンはやや大きめ */ .cta-price-btn { gap: 10px; font-family: var(--jp); font-size: .95rem; letter-spacing: .1em; padding: 16px 36px; font-weight: 400; } @media (min-width: 480px) { .cta-price-btn { padding: 18px 48px; font-size: 1rem; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ KEYFRAMES ━━ */ @keyframes fup { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } } @keyframes fin { from { opacity:0; } to { opacity:1; } } @keyframes sl { 0% {opacity:0;transform:scaleY(0);transform-origin:top} 50%{opacity:1;transform:scaleY(1);transform-origin:top} 100%{opacity:0;transform:scaleY(1);transform-origin:bottom} } @keyframes mq { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } } /* ① prefers-reduced-motion: アニメーション軽減設定のユーザーへの対応 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .rv { opacity: 1; transform: none; } .gtrack { animation: none; } .scroll-line { animation: none; } } /* ② hero height: 100svhのfallback（svh非対応ブラウザ向け） */ .hero { height: 100vh; } /* fallback */ @supports (height: 100svh) { .hero { height: 100svh; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 3. モバイルタップターゲット強化 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* .btn以外のインタラクティブ要素にも最低タップ領域を確保 */ .pc-nav-link, .pc-nav-cat, .pc-nav-panel a { min-height: 44px; } .faq-q { min-height: 54px; } .ntb { min-height: 44px; } .sp-nav a, .sp-nav-menu-toggle { min-height: 52px; } /* SP navは余裕を持たせる */ .sp-menu-sub a { min-height: 42px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ロゴ SVG img 対応 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .site-logo-img { display: block; height: 36px; min-height: 42px; /* 画像読み込み前のレイアウト崩れ防止 */ width: auto; max-width: 180px; object-fit: contain; } @media (min-width: 768px) { .site-logo-img { height: 42px; } }