/* ===================================================== Y&A商事合同会社 公式サイト V6（デザイン基盤） ─ カラー方式 ─ ・:root ＝ 案A｜爽やか清潔型（清掃 = index.html / legal.html） ・body.lodge / body.lodge-theme ＝ 案B｜和モダン温もり型（民泊 = yahouse.html） → 全コンポーネントは var() 経由で参照するため、bodyクラス1つで全波及する。 ─ コントラスト方針（WCAG AA）─ ・オレンジ #F5923E ×白文字は約2.4:1でNG → 主要CTA（.btn-primary）はトラストブルー #1E6FA8 ×白（約5.4:1） → オレンジは補助アクセント（kari-badge / Afterラベル / fixbar）とし 文字は濃色 --accent-ink:#4A2508（約5.8:1）を組み合わせる ・テラコッタ #C46A4A ×白は約3.8:1でNG寄り → 宿テーマのCTA・バッジ地は #A9502F に濃色化して白文字（約5.4:1） #C46A4A は装飾（罫・図形）用の --terra として残す ・本文 --muted / --ink-2 は白・--paper-2 上で4.5:1以上を確認済み ===================================================== */ /* ---- デザイントークン（案A｜爽やか清潔型） ---- */ :root{ /* ベース・面 */ --base:#F7F9FB; /* ページ背景（オフホワイト） */ --paper:#FFFFFF; /* カード・表の面 */ --paper-2:#EDF3F8; /* 交互リズム用の淡ブルーグレー */ /* キーカラー（トラストブルー） */ --key:#1E6FA8; --key-d:#175A88; /* 文字用の濃色（白地で6.9:1） */ --key-t:#E1EEF7; /* 淡色帯 */ --sub:#7FC5E3; /* 水色（装飾専用・文字には使わない） */ /* フレッシュグリーン（チェック・補助） */ --green:#5CA88A; /* 装飾用 */ --green-d:#357A5E; /* 文字にも使える濃緑（白地5.1:1） */ /* ステータス色（成功/エラー通知の地・枠・文字。社内ツール系ページ共通） */ --ok-bg:#EAF6EE; --ok-border:#BFE6CB; --err-bg:#FDEDED; --err-border:#F3B9B9; --err-ink:#8A2020; /* エラー文字（白地・淡色地とも4.5:1以上を確認済み） */ /* 暖色アクセント（オレンジ＝補助。地にする時は文字を--accent-inkに） */ --accent:#F5923E; --accent-d:#D97C25; --accent-ink:#4A2508; /* オレンジ地の文字色（5.8:1） */ /* 主要CTA（ブルー×白） */ --cta:#1E6FA8; --cta-d:#155178; --cta-ink:#FFFFFF; --cta-rgb:30,111,168; /* テキスト・罫線 */ --ink:#16303F; --ink-2:#3D5260; --muted:#5A6E7A; --line:#DFE9F0; --label-b:#55666E; /* Beforeラベル地（白文字6:1） */ /* 濃色帯（ヒーロー・バッジ帯・フッター） */ --dark:#10293C; --dark-2:#0B1D2C; --dark-rgb:11,29,44; /* スクリム用RGB */ --on-dark:#EAF2F7; --on-dark-2:#B7CBD6; --hl:#FFD9A0; /* 濃色地上の強調（クリーム） */ /* 宿ページの淡色帯（yahouse.htmlのinline指定が参照） */ --lodge-t:#ECE5D5; --terra:#C46A4A; /* 影・寸法・書体 */ --shadow:0 12px 36px rgba(11,29,44,.08); --shadow-lg:0 26px 64px rgba(11,29,44,.16); --maxw:1160px; --measure:720px; --header-h:74px; --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif; --sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic","Meiryo",system-ui,-apple-system,sans-serif; } /* ---- 案B｜和モダン温もり型（宿）: body.lodge（互換で .lodge-theme も可） ---- */ body.lodge,body.lodge-theme{ --base:#F3EFE7; /* 生成り */ --paper:#FFFDF7; --paper-2:#ECE5D5; --key:#26426B; /* 藍色・紺 */ --key-d:#1C3354; --key-t:#E7EAF0; --sub:#C4A77D; /* 木目・ベージュ（装飾専用） */ --green:#C4A77D; --green-d:#7C6135; /* ベージュの文字用濃色 */ --accent:#A9502F; /* テラコッタ濃色（白文字5.4:1） */ --accent-d:#8C3F24; --accent-ink:#FFFFFF; --cta:#A9502F; --cta-d:#8C3F24; --cta-ink:#FFFFFF; --cta-rgb:169,80,47; --ink:#2E2A26; /* 墨チャコール */ --ink-2:#4B443B; --muted:#6E6355; --line:#E3DBC9; --label-b:#6A6157; --dark:#22334E; --dark-2:#182640; --dark-rgb:24,38,64; --on-dark:#F1ECE1; --on-dark-2:#C6BFAE; --hl:#E9D3A5; --shadow:0 12px 36px rgba(46,42,38,.09); --shadow-lg:0 26px 64px rgba(46,42,38,.17); } /* ---- リセット・ベース ---- */ *{box-sizing:border-box} html,body{margin:0;padding:0} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} [id]{scroll-margin-top:calc(var(--header-h) + 12px)} body{font-family:var(--sans);color:var(--ink);background:var(--base);line-height:1.9;font-size:16px;-webkit-font-smoothing:antialiased;letter-spacing:.015em;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* A/Bテスト基盤: に応じて .ab-a / .ab-b の片方だけ表示。 display:contents なので中の要素は本来のdisplayを保ち、要素種別を問わずフリッカー無し。 JS無効/失敗時は A（コントロール）を表示するフォールバック付き。 */ .ab-a,.ab-b{display:none} [data-ab="A"] .ab-a,:root:not([data-ab]) .ab-a{display:contents} [data-ab="B"] .ab-b{display:contents} ::selection{background:var(--key);color:#fff} :focus-visible{outline:2px solid var(--key);outline-offset:2px} .hero :focus-visible,.hero-split :focus-visible,.photoband :focus-visible,.cta :focus-visible,.creds-band :focus-visible,footer.site :focus-visible{outline-color:#fff} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .narrow{max-width:var(--measure);margin-left:auto;margin-right:auto} section{padding:clamp(64px,9vw,120px) 0} .center{text-align:center} .bg-soft{background:var(--paper-2)} .sr-only{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{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--cta);color:var(--cta-ink,#fff);padding:10px 16px;border-radius:0 0 6px 0;font-weight:700} .skip-link:focus{left:0} /* ---- 見出し・共通タイポ（日本語向け palt 詰め） ---- */ h1,h2,h3,h4{font-feature-settings:"palt" 1} .kicker{display:inline-block;font-family:var(--serif);font-size:12.5px;font-weight:700;letter-spacing:.32em;color:var(--key-d);text-transform:uppercase;margin-bottom:16px} .kicker::before{content:"";display:inline-block;width:24px;height:1px;background:var(--key);vertical-align:middle;margin-right:10px} h2.head{font-size:clamp(26px,4vw,42px);font-weight:800;line-height:1.32;letter-spacing:.035em;margin:0 0 14px;color:var(--ink)} /* 1ルールのブランド装飾：見出し頭文字をキーカラーに（spanで包まず ::first-letter で） */ h2.brandmark::first-letter{color:var(--key)} .subhead{color:var(--muted);font-size:clamp(15px,1.9vw,17px);line-height:2;max-width:var(--measure);margin:6px auto 0} .serif{font-family:var(--serif)} /* ---- ボタン ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:800;border:0;cursor:pointer;transition:transform .18s,box-shadow .22s,background .2s,color .2s,border-color .2s;text-align:center;line-height:1.35;border-radius:3px;letter-spacing:.04em;font-family:inherit} /* 主要CTA＝トラストブルー×白（オレンジ×白はコントラスト不足のため不採用） */ .btn-primary{background:var(--cta);color:var(--cta-ink);padding:16px 32px;font-size:15px;box-shadow:0 10px 26px rgba(var(--cta-rgb),.32),inset 0 0 0 1px rgba(255,255,255,.18)} .btn-primary:hover{background:var(--cta-d);transform:translateY(-2px);box-shadow:0 14px 32px rgba(var(--cta-rgb),.42),inset 0 0 0 1px rgba(255,255,255,.18)} .btn-line{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.62);padding:14px 28px;font-size:14.5px} .btn-line:hover{background:#fff;color:var(--ink);border-color:#fff} /* LINE公式アカウントへの誘導ボタン。LINEブランドカラー(#06C755)を使用（オーナー指定・ブランド認知優先）。 白文字×LINE緑はWCAG AA未満だが、LINE公式ボタンの標準配色に合わせる（太字で実用視認性を確保） */ .btn-line-app{background:#06C755;color:#fff;border:1.5px solid #06C755;padding:14px 28px;font-size:14.5px;font-weight:800} .btn-line-app:hover{background:#05b34c;border-color:#05b34c;color:#fff} .btn-key{background:var(--key);color:#fff;padding:14px 28px;font-size:15px} .btn-key:hover{background:var(--key-d);transform:translateY(-2px)} .btn-ghost{background:var(--paper);color:var(--ink);border:1.5px solid var(--line);padding:13px 26px;font-size:14px} .btn-ghost:hover{border-color:var(--key);color:var(--key-d)} .btn-lg{padding:18px 40px;font-size:16px} .btn-block{width:100%} .btn[aria-disabled="true"]{opacity:.75;cursor:default;transform:none} /* ---- 状態通知バー ---- */ .demobar{background:var(--ink);color:var(--on-dark-2);font-size:12.5px;text-align:center;padding:8px 14px;line-height:1.6} .demobar b{color:#fff} /* ---- 未確定値マーカー「仮」（no-fabrication装置・維持必須） 案A: オレンジ地×濃茶文字 ／ 案B: 濃テラコッタ地×白文字 ---- */ .kari-badge{display:inline-block;font-size:10.5px;font-weight:800;line-height:1.7;color:var(--accent-ink);background:var(--accent);padding:1px 8px;border-radius:3px;margin-left:5px;vertical-align:middle;letter-spacing:.06em} /* ---- ヘッダー（2段ナビ：EN主＋JP副） ---- */ header.site{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} @supports not (background:color-mix(in srgb,#fff 92%,transparent)){header.site{background:var(--paper)}} .hb{display:flex;align-items:center;gap:22px;height:var(--header-h)} .brand{display:inline-flex;align-items:center;gap:12px;min-height:44px} /* min-height:44px=タップターゲット確保 */ .brand img{height:40px;width:auto} .brand .bt{font-weight:800;font-size:18px;letter-spacing:.04em;color:var(--ink);line-height:1.15} .brand .bt small{display:block;font-family:var(--serif);font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.16em;margin-top:2px} nav.main{margin-left:auto;display:flex;gap:26px;align-items:center} nav.main a{text-align:center;padding:6px 0;position:relative} nav.main a .en{display:block;font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--ink)} nav.main a .ja{display:block;font-size:9.5px;font-weight:600;color:var(--muted);letter-spacing:.06em;margin-top:2px} nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--key);transform:scaleX(0);transition:transform .25s} nav.main a:hover::after{transform:scaleX(1)} .lang-menu{position:relative} .lang-menu summary{list-style:none;text-align:center;padding:6px 0;position:relative;cursor:pointer;user-select:none} .lang-menu summary::-webkit-details-marker{display:none} .lang-menu summary .en{display:block;font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--ink)} .lang-menu summary .ja{display:block;font-size:9.5px;font-weight:600;color:var(--muted);letter-spacing:.06em;margin-top:2px} .lang-menu summary::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--key);transform:scaleX(0);transition:transform .25s} .lang-menu summary:hover::after,.lang-menu[open] summary::after{transform:scaleX(1)} .lang-menu summary:focus-visible{outline:2px solid var(--key);outline-offset:4px;border-radius:3px} .lang-options{position:absolute;right:0;top:calc(100% + 12px);width:188px;background:var(--paper);border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow-lg);padding:8px;z-index:80} .lang-options::before{content:"";position:absolute;right:24px;top:-7px;width:12px;height:12px;background:var(--paper);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)} nav.main .lang-options a{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;padding:11px 12px;border-radius:3px;font-size:13px;font-weight:800;color:var(--ink);letter-spacing:.02em} nav.main .lang-options a::after{display:none} nav.main .lang-options a:hover{background:var(--key-t);color:var(--key-d)} .lang-options a span{font-size:10px;font-weight:700;color:var(--muted)} .lang-options a.is-current{background:var(--key);color:#fff} .lang-options a.is-current span{color:rgba(255,255,255,.78)} .hd-tel{text-align:right;white-space:nowrap;padding-left:14px;border-left:1px solid var(--line)} .hd-tel .num{font-weight:800;color:var(--ink);font-size:16px;letter-spacing:.02em} .hd-tel small{display:block;font-size:9.5px;color:var(--muted)} .navtoggle{display:none;margin-left:auto;background:none;border:0;cursor:pointer;width:44px;height:44px} .navtoggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px auto;border-radius:2px;transition:transform .25s,opacity .2s} .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0} .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---- フルワイド写真ヒーロー（宿トップ等） ---- */ .hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--dark-2)} .hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero .bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1} .hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(var(--dark-rgb),.16) 0%,rgba(var(--dark-rgb),.38) 45%,rgba(var(--dark-rgb),.84) 100%)} .hero .wrap{position:relative;z-index:2;padding-bottom:clamp(48px,7vw,88px);padding-top:130px} .hero .area{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-size:13px;font-weight:700;letter-spacing:.16em;color:#fff;border:1px solid rgba(255,255,255,.5);padding:6px 16px;border-radius:2px;margin-bottom:22px} .hero h1{font-size:clamp(30px,6vw,58px);font-weight:900;line-height:1.28;letter-spacing:.03em;margin:0 0 18px;text-shadow:0 2px 24px rgba(0,0,0,.35)} .hero h1 em{font-style:normal;color:var(--hl)} .hero p.sub{font-size:clamp(15px,2vw,19px);max-width:600px;margin:0 0 30px;font-weight:500;color:var(--on-dark);text-shadow:0 1px 12px rgba(0,0,0,.4)} .hero .cta-row{display:flex;gap:14px;flex-wrap:wrap} .hero .creds{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.22)} .hero .creds .c{font-size:13px;font-weight:700;color:var(--on-dark);display:flex;align-items:center;gap:7px} .hero .creds .c b{color:var(--hl)} /* ---- 分割ヒーロー（左:テキスト／右:写真枠。テキストと写真を重ねない） ---- */ .hero-split{display:grid;grid-template-columns:1.02fr .98fr;min-height:min(84vh,700px);background:linear-gradient(135deg,var(--key-d) 0%,var(--dark) 58%,var(--dark-2) 100%);overflow:hidden} .hero-split .tx{color:#fff;display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,80px);position:relative;z-index:2} .hero-split .area{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font-family:var(--serif);font-size:12.5px;font-weight:700;letter-spacing:.16em;color:#fff;border:1px solid rgba(255,255,255,.45);padding:6px 15px;border-radius:2px;margin-bottom:22px} .hero-split h1{font-size:clamp(28px,4.4vw,50px);font-weight:900;line-height:1.3;letter-spacing:.03em;margin:0 0 18px} .hero-split h1 em{font-style:normal;color:var(--hl)} .hero-split p.sub{font-size:clamp(14.5px,1.7vw,17px);max-width:520px;margin:0 0 28px;color:var(--on-dark);font-weight:500} .hero-split .cta-row{display:flex;gap:12px;flex-wrap:wrap} .hero-split .creds{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.2)} .hero-split .creds .c{font-size:12.5px;font-weight:700;color:var(--on-dark);display:flex;align-items:center;gap:6px} .hero-split .creds .c b{color:var(--hl)} .hero-split .ph{position:relative;overflow:hidden;background:var(--dark-2)} .hero-split .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%} .hero-split .ph .cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(var(--dark-rgb),.92));color:#fff;font-size:13px;font-weight:800;letter-spacing:.02em;padding:44px 20px 16px;z-index:2} .hero-split .ph .cap span{display:block;font-family:var(--serif);font-size:11px;font-weight:600;color:var(--hl);letter-spacing:.16em;margin-bottom:3px} @media(max-width:860px){ .hero-split{grid-template-columns:1fr;min-height:0} .hero-split .ph{order:-1;min-height:min(52vh,420px)} .hero-split .ph img{object-position:center 20%} .hero-split .tx{padding:34px 24px 44px} } /* ---- 結論ブロック（定義文・AI引用の的） ---- */ /* 代表のモットー帯: ヒーロー直下の濃紺リボン。オーナーの言葉をファーストビュー直後に見せる */ .motto-band{background:var(--dark-2);border-top:1px solid rgba(255,255,255,.12)} .motto-band .wrap{max-width:1040px;padding:22px 24px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 28px} .motto-band .m-lines{display:flex;flex-wrap:wrap;gap:4px 26px} .motto-band .m-line{margin:0;font-family:var(--serif);font-size:clamp(13.5px,1.6vw,16px);font-weight:600;letter-spacing:.06em;color:var(--hl)} .motto-band .m-sign{margin:0;font-family:var(--serif);font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.72)} .definition{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .definition .wrap{padding:clamp(32px,4.5vw,52px) 24px;display:flex;gap:26px;align-items:flex-start;max-width:960px} .definition .lead-mark{font-family:var(--serif);font-size:56px;line-height:.8;color:var(--key);flex:none} .definition p{margin:0;font-size:clamp(15px,1.9vw,18px);line-height:2;color:var(--ink-2)} .definition p b{color:var(--ink)} /* ---- 2分岐ハブ（写真タイル） ---- */ .hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .hubcard{position:relative;min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;padding:34px;color:#fff;overflow:hidden;border-radius:3px;box-shadow:var(--shadow)} .hubcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .hubcard:hover img{transform:scale(1.05)} .hubcard .sc{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--dark-rgb),.14),rgba(var(--dark-rgb),.82))} .hubcard>*{position:relative;z-index:2} .hubcard .tag{font-family:var(--serif);font-size:12px;letter-spacing:.22em;color:var(--hl);margin-bottom:10px} .hubcard h3{font-size:clamp(20px,2.6vw,26px);font-weight:900;margin:0 0 8px;line-height:1.4} .hubcard p{font-size:13.5px;opacity:.95;margin:0 0 16px} .hubcard .go{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px;color:#fff;transition:gap .2s} .hubcard:hover .go{gap:14px} /* ---- フルワイド写真帯（白ブロックと交互のリズム） ---- */ .photoband{position:relative;min-height:clamp(320px,42vw,520px);display:flex;align-items:center;color:#fff;overflow:hidden;background:var(--dark-2)} .photoband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .photoband .sc{position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--dark-rgb),.8) 0%,rgba(var(--dark-rgb),.46) 55%,rgba(var(--dark-rgb),.18) 100%)} .photoband .wrap{position:relative;z-index:2} .photoband .inner{max-width:520px;padding:clamp(56px,8vw,90px) 0} .photoband .kicker{color:var(--hl)} .photoband .kicker::before{background:var(--hl)} .photoband h2{font-size:clamp(23px,3.4vw,36px);font-weight:800;margin:0 0 14px;line-height:1.42;text-shadow:0 2px 18px rgba(0,0,0,.4)} .photoband p{font-size:15px;color:var(--on-dark);margin:0 0 22px;text-shadow:0 1px 10px rgba(0,0,0,.4)} /* ---- 信頼バッジ（濃色帯） ---- */ .creds-band{background:var(--dark);color:var(--on-dark)} .creds-band .wrap{padding:36px 24px} .cred-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} .cred{display:flex;align-items:center;gap:12px;padding:14px 20px;border:1px solid rgba(255,255,255,.15);border-radius:3px;background:rgba(255,255,255,.05)} .cred .ic{width:34px;height:34px;display:grid;place-items:center;background:var(--key);color:#fff;font-size:16px;flex:none;border-radius:3px} .cred b{display:block;font-size:14px;font-weight:800} .cred small{display:block;font-size:11px;color:var(--on-dark-2)} .creds-note{text-align:center;color:var(--on-dark-2);font-size:11.5px;margin:18px 0 0} /* ---- Before/After（白枠カード＋目地グリッド） ---- */ .balist{max-width:920px;margin:44px auto 0;display:grid;gap:32px} /* 室内ギャラリー: 写真は元比率のまま、高さのズレはマソンリーの余白で吸収 */ .yh-gallery{max-width:1000px;margin:40px auto 0;column-count:3;column-gap:14px} .yh-gallery figure{margin:0 0 14px;break-inside:avoid;-webkit-column-break-inside:avoid} .yh-gallery img{width:100%;height:auto;display:block;border-radius:4px;box-shadow:var(--shadow)} @media(max-width:820px){.yh-gallery{column-count:2}} @media(max-width:430px){.yh-gallery{column-gap:10px}.yh-gallery figure{margin-bottom:10px}} .bacase{background:var(--paper);border:1px solid var(--line);border-radius:3px;overflow:hidden;box-shadow:var(--shadow)} .bacase .bahead{padding:16px 20px;font-weight:800;color:var(--ink);font-size:16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px} .bacase .bahead::before{content:"";width:8px;height:20px;background:var(--key);flex:none;border-radius:1px} .ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--line);position:relative} .ba-pair-top{align-items:start} /* 左右の縦横比が違う場合は上揃え（白い隙間を防ぐ） */ .ba-pair figure{margin:0;position:relative;background:var(--paper)} .ba-pair img{width:100%;height:auto} .ba-pair-showcase img{aspect-ratio:3/4;object-fit:cover} .ba-pair-showcase.ba-focus-floor img{object-position:center 62%} .ba-pair figcaption{position:absolute;top:12px;left:12px;font-size:11.5px;font-weight:900;letter-spacing:.05em;padding:4px 12px;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.3)} .ba-pair figcaption.b{background:var(--label-b);color:#fff} .ba-pair figcaption.a{background:var(--accent);color:var(--accent-ink)} .ba-pair::after{content:"→";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;background:#fff;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:18px;color:var(--accent-d);box-shadow:0 2px 14px rgba(0,0,0,.3);z-index:2} .ba-note{text-align:center;font-size:12px;color:var(--muted);margin-top:22px} /* ---- 料金 ---- */ .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--paper)} .price-grid-4{grid-template-columns:repeat(4,1fr)} .price-grid-4 .pcard .pval{font-size:clamp(26px,3.4vw,36px)} .pcard{padding:36px 26px;text-align:center;border-right:1px solid var(--line);position:relative;background:var(--paper)} .pcard:last-child{border-right:0} .pcard.feat{background:var(--key-t);box-shadow:inset 0 3px 0 var(--key)} .pcard .tag{display:inline-block;font-family:var(--serif);font-size:11px;letter-spacing:.18em;color:var(--key-d);margin-bottom:8px} .pcard .pname{font-size:15px;font-weight:800;color:var(--ink)} .pcard .pnote{font-size:12px;color:var(--muted);min-height:34px;margin-top:5px;line-height:1.8} .pcard .pval{font-family:var(--serif);font-size:clamp(30px,4.4vw,42px);font-weight:700;color:var(--key-d);line-height:1.1;margin:14px 0 2px;font-feature-settings:"palt" 1} .pcard .pval span{font-size:15px;color:var(--ink);font-weight:700} .set-prices{list-style:none;padding:0;margin:16px 0 0;text-align:left;font-size:12px;line-height:1.65;color:var(--ink)} .set-prices li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line)} .set-prices b{white-space:nowrap;color:var(--key-d)} .incl{max-width:680px;margin:30px auto 0;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:center} .incl .i{font-size:13.5px;font-weight:700;color:var(--key-d);display:flex;align-items:center;gap:7px} .incl .i::before{content:"✓";color:var(--green-d);font-weight:900} .disc{text-align:center;font-size:12px;color:var(--muted);margin-top:22px;line-height:1.9} /* ---- 比較表（不安→当社の対応） ---- */ .cmp{max-width:780px;margin:0 auto;border:1px solid var(--line);border-radius:3px;overflow:hidden;box-shadow:var(--shadow)} .cmp table{width:100%;border-collapse:collapse;background:var(--paper)} .cmp th,.cmp td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px} .cmp tr:last-child td{border-bottom:0} .cmp thead th{font-weight:800;font-family:var(--serif);letter-spacing:.05em} .cmp thead th:nth-child(2){background:var(--key);color:#fff;text-align:center} .cmp tbody td:nth-child(1){color:var(--muted)} .cmp tbody td:nth-child(2){background:var(--key-t);font-weight:800;color:var(--key-d);text-align:center} /* ---- 代表・ストーリー（E-E-A-T） ---- */ .story{display:grid;grid-template-columns:.85fr 1fr;gap:0;max-width:1000px;margin:0 auto;border-radius:3px;overflow:hidden;box-shadow:var(--shadow);background:var(--paper)} .story .ph{position:relative;overflow:hidden;min-height:380px} .story .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .story .ph .cap{position:absolute;bottom:0;left:0;right:0;background:rgba(var(--dark-rgb),.9);color:#fff;font-size:12px;font-weight:700;padding:9px 14px} .story .tx{padding:clamp(32px,4vw,56px)} .story .role{font-family:var(--serif);font-size:12.5px;letter-spacing:.16em;color:var(--key-d);margin-bottom:10px} .story h3{font-size:clamp(19px,2.6vw,25px);color:var(--ink);margin:0 0 16px;line-height:1.55;font-weight:800} .story p{font-size:14.5px;line-height:2;margin:0 0 14px;color:var(--ink-2)} .story .cert{margin-top:16px;display:inline-flex;gap:12px;align-items:center;background:var(--paper-2);border:1px solid var(--line);border-radius:3px;padding:10px 14px} .story .cert img{width:54px;height:auto;border:1px solid var(--line)} .story .cert span{font-size:12px;color:var(--muted);font-weight:700;line-height:1.7} /* ---- サービス一覧 ---- */ .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--paper);margin-top:40px} .svc{padding:32px 30px;border-right:1px solid var(--line);background:var(--paper)} .svc:nth-child(2n){border-right:0} .svc h3{display:flex;align-items:center;gap:11px;font-size:18px;color:var(--ink);margin:0 0 16px;font-weight:800} .svc h3 .si{width:40px;height:40px;display:grid;place-items:center;color:#fff;font-size:18px;flex:none;border-radius:3px;background:var(--key)} .svc ul{list-style:none;padding:0;margin:0} .svc li{padding:10px 0 10px 24px;position:relative;font-size:14.5px;border-bottom:1px dashed var(--line)} .svc li:last-child{border-bottom:0} .svc li::before{content:"—";position:absolute;left:0;color:var(--key)} .svc li .p{float:right;color:var(--key-d);font-weight:800;font-size:13.5px} /* ---- お知らせ（News） ---- */ .news-list{max-width:760px;margin:36px auto 0;border-top:1px solid var(--line)} .news-item{display:flex;gap:20px;padding:18px 4px;border-bottom:1px solid var(--line);align-items:baseline} .news-item time{font-family:var(--serif);font-size:13px;color:var(--muted);white-space:nowrap;flex:none;width:96px} .news-item .cat{font-size:10.5px;font-weight:800;color:var(--key-d);background:var(--key-t);border-radius:2px;padding:2px 9px;flex:none} .news-item p{margin:0;font-size:14.5px} .news-empty{text-align:center;color:var(--muted);font-size:13px;margin-top:14px} /* ---- 会社情報・アクセス ---- */ .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--paper)} .info-grid .box{padding:clamp(26px,3vw,40px)} .info-grid .box:first-child{border-right:1px solid var(--line)} .infotbl{width:100%;border-collapse:collapse} .infotbl th,.infotbl td{text-align:left;padding:13px 4px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top;line-height:1.85} .infotbl th{width:96px;color:var(--muted);font-weight:800;white-space:nowrap;font-family:var(--serif);letter-spacing:.05em} .mapph{background:repeating-linear-gradient(45deg,var(--paper-2),var(--paper-2) 18px,var(--base) 18px,var(--base) 36px);min-height:280px;display:grid;place-items:center;border:1px solid var(--line);border-radius:3px;text-align:center;padding:20px} .mapph .pin{width:48px;height:48px;border-radius:50% 50% 50% 0;background:var(--accent);transform:rotate(-45deg);margin:0 auto 16px;box-shadow:var(--shadow);position:relative} .mapph .pin::after{content:"";position:absolute;inset:14px;background:#fff;border-radius:50%} .mapph b{color:var(--ink);font-size:14px} .mapph small{display:block;color:var(--muted);font-size:11.5px;margin-top:6px;line-height:1.8} .gbp-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;justify-content:center} .gbp-row a,.gbp-row .gbp-pending{font-size:12.5px;font-weight:700;color:var(--key-d);border:1px solid var(--line);border-radius:3px;padding:11px 16px;min-height:44px;display:inline-flex;gap:6px;align-items:center;background:var(--paper);transition:border-color .2s} /* min-height:44px=タップターゲット確保 */ .gbp-row a:hover{border-color:var(--key)} .gbp-row .gbp-pending{opacity:.75;cursor:default} /* URL確定前のプレースホルダ（非フォーカス・非遷移） */ /* ---- FAQ（純HTML details。FAQPage構造化データは付けない＝規約リスク回避） ---- */ .faq{max-width:800px;margin:36px auto 0} .faq details{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;padding:20px 4px;font-weight:800;font-size:15.5px;color:var(--ink);list-style:none;display:flex;align-items:baseline;gap:14px;transition:color .2s} .faq summary:hover{color:var(--key-d)} .faq summary::-webkit-details-marker{display:none} .faq summary .q{font-family:var(--serif);color:var(--key);font-size:18px;font-weight:700;flex:none} .faq summary .arw{margin-left:auto;transition:transform .25s;color:var(--muted);font-size:13px;flex:none} .faq details[open] summary .arw{transform:rotate(180deg)} .faq .a{padding:0 4px 22px 34px;font-size:14.5px;color:var(--ink-2);line-height:1.95} /* ---- 最終CTA ---- */ .cta{position:relative;color:#fff;overflow:hidden;background:var(--dark-2)} .cta img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34} .cta .sc{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--dark-rgb),.72),rgba(var(--dark-rgb),.92))} .cta .wrap{position:relative;z-index:2} .cta h2{font-size:clamp(24px,3.6vw,38px);font-weight:900;text-align:center;margin:0 0 12px;letter-spacing:.03em} .cta .subhead{color:var(--on-dark-2)} .cta-box{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;margin-top:44px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:3px;padding:40px} .cta-left label{display:block;font-size:12.5px;font-weight:700;color:var(--on-dark)} .cta-left .telbig{font-family:var(--serif);font-size:clamp(30px,4vw,44px);font-weight:700;letter-spacing:.02em;color:#fff;display:block;margin:8px 0;line-height:1.3} .cta-left .telbig small{font-size:14px;color:var(--on-dark-2);font-weight:600;font-family:var(--sans)} .cta-left .hours{font-size:13.5px;color:var(--on-dark-2)} .cta-left .or{margin:20px 0 10px;color:var(--on-dark-2);font-size:12px;font-weight:800;letter-spacing:.14em} .form label{display:block;font-size:12.5px;font-weight:700;color:var(--on-dark);margin:0 0 5px} .form .row{margin-bottom:13px} .form input,.form textarea{width:100%;border:0;border-radius:3px;padding:13px 15px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink)} .form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--hl);outline-offset:1px} .form textarea{min-height:80px;resize:vertical} .form-status{min-height:1.5em;color:#fff;font-size:13px;line-height:1.6;margin:10px 0 0} .assure{font-size:12px;color:var(--on-dark-2);text-align:center;margin-top:12px} /* ---- YouTubeファサード（クリックで埋め込みiframeへ置換） ---- マークアップ例: クリック後は js/site.js が div.yt-facade.is-playing > iframe に置換する。 */ .yt-facade{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0;padding:0;border:0;border-radius:3px;overflow:hidden;background:var(--dark-2);cursor:pointer;box-shadow:var(--shadow);font-family:inherit;text-align:left} .yt-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .yt-facade:hover img,.yt-facade:focus-visible img{transform:scale(1.03)} .yt-facade-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:52px;border-radius:14px;background:rgba(var(--dark-rgb),.78);display:grid;place-items:center;z-index:2;transition:background .2s,transform .2s;box-shadow:0 6px 22px rgba(0,0,0,.35)} .yt-facade-play::after{content:"";width:0;height:0;border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff;margin-left:4px} .yt-facade:hover .yt-facade-play,.yt-facade:focus-visible .yt-facade-play{background:var(--cta);transform:translate(-50%,-50%) scale(1.08)} .yt-facade-title{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:28px 16px 12px;font-size:13.5px;font-weight:800;letter-spacing:.02em;color:#fff;background:linear-gradient(180deg,transparent,rgba(var(--dark-rgb),.86));text-shadow:0 1px 8px rgba(0,0,0,.35)} .yt-facade:focus-visible{outline:3px solid var(--key);outline-offset:3px} .yt-facade.is-playing{cursor:default} .yt-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* ---- 自社ホストの施工後動画（クリック時のみ読み込み） ---- */ .media-heading{font-size:16.5px;font-weight:800;color:var(--ink);margin:0 0 14px;display:flex;align-items:center;gap:11px} .media-heading::before{content:"";width:8px;height:20px;background:var(--key);border-radius:1px;flex:none} .local-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} .local-video-grid figure{margin:0;text-align:center} .local-video-grid video{display:block;width:100%;max-height:620px;aspect-ratio:9/16;object-fit:contain;background:var(--dark-2);border-radius:3px;box-shadow:var(--shadow)} .local-video-grid figcaption{font-size:13px;font-weight:800;color:var(--ink);margin-top:10px} /* ---- フッター（NAP完備・全ページ共通） ---- */ footer.site{background:var(--dark-2);color:var(--on-dark-2);padding:56px 0 40px;font-size:13.5px} .f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:32px;margin-bottom:22px} .f-grid h2,.f-grid h4{color:#fff;font-size:13px;font-family:var(--serif);letter-spacing:.12em;margin:0 0 14px;font-weight:700} /* 見出し階層維持のためh2を使用（見た目は従来のh4と同一） */ .f-brand img{height:38px;width:auto;margin-bottom:12px} /* width:auto必須（HTML属性値で横伸びしないように） */ .f-nap{font-style:normal;line-height:2} .f-nap b{color:var(--on-dark)} .f-links{display:flex;flex-direction:column;gap:9px} .f-links a{color:var(--on-dark-2);transition:color .2s;display:inline-flex;align-items:center;min-height:44px} /* min-height:44px=タップターゲット確保 */ .f-links a:hover{color:#fff} .f-ext{display:flex;flex-wrap:wrap;gap:8px} .f-ext a{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:3px;padding:11px 16px;min-height:44px;display:inline-flex;align-items:center;font-size:12px;font-weight:700;color:var(--on-dark);transition:background .2s,border-color .2s} /* min-height:44px=タップターゲット確保 */ .f-ext a:hover{background:var(--key);border-color:var(--key);color:#fff} .f-ext a.f-primary{background:var(--key);border-color:var(--key);color:#fff} /* メール/YouTube等の主要リンクを副リンクより強調 */ .f-note{font-size:11px;color:var(--on-dark-2);margin-top:10px;line-height:1.6;max-width:36ch} /* 各メディアの補足注記 */ .f-legal a{text-decoration:underline;color:var(--on-dark);margin-right:14px;font-size:12.5px;display:inline-flex;align-items:center;min-height:44px;vertical-align:middle} /* min-height:44px=タップターゲット確保 */ .copy{text-align:center;font-size:11.5px;color:var(--on-dark-2);margin-top:8px} /* ---- モバイル固定CTA（≤860pxで表示） ---- */ .fixbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;grid-template-columns:1fr 1fr;box-shadow:0 -6px 20px rgba(0,0,0,.2)} .fixbar a{display:flex;align-items:center;justify-content:center;gap:7px;padding:15px 8px;font-weight:800;font-size:15px} .fixbar .tel{background:var(--ink);color:#fff} .fixbar .est{background:var(--accent);color:var(--accent-ink)} /* フォーカスリング（WCAG 1.4.11: 隣接色と3:1以上） .tel: 白 vs --ink(#16303F=12.6:1 / 宿#2E2A26=13.2:1) .est: --accent-ink vs --accent(案A #4A2508 vs #F5923E=5.8:1 / 案B #FFF vs #A9502F=5.4:1) ※.fixbar全体を白アウトラインにするのはNG（白 vs オレンジ#F5923Eは約2.4:1） */ .fixbar .tel:focus-visible{outline-color:#fff} .fixbar .est:focus-visible{outline-color:var(--accent-ink)} /* ---- reveal（js/site.js のIntersectionObserverと連動） ---- */ .js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease} .js .reveal.in{opacity:1;transform:none} .js .reveal.d1{transition-delay:.1s}.js .reveal.d2{transition-delay:.2s}.js .reveal.d3{transition-delay:.3s} /* ---- 夜のイルミネーション ショーケース ---- */ .illumi{background:linear-gradient(180deg,var(--dark) 0%,var(--dark-2) 100%);color:#fff} .illumi .kicker{color:var(--hl)} .illumi .head,.illumi .subhead{color:#fff} .illumi .subhead{color:var(--on-dark)} .illumi-grid{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:clamp(24px,4vw,48px);align-items:center;max-width:900px;margin:32px auto 0} .illumi-video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:6px;background:var(--dark-2);box-shadow:0 12px 40px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12)} .illumi-copy h3{font-size:clamp(20px,2.6vw,26px);font-weight:900;color:#fff;margin:0 0 14px;letter-spacing:.02em} .illumi-copy p{font-size:clamp(14.5px,1.7vw,16px);color:var(--on-dark);line-height:1.85;margin:0 0 18px} .illumi-list{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:10px} .illumi-list li{font-size:15px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px} .illumi .disc{color:var(--on-dark-2);text-align:center;margin-top:22px} @media(max-width:720px){ .illumi-grid{grid-template-columns:1fr;max-width:420px;gap:24px} .illumi-video{max-width:300px;margin:0 auto} .illumi-copy{text-align:center} .illumi-list{align-items:center} } @media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1;transform:none;transition:none} .hubcard img,.yt-facade img,.yt-facade-play,.btn{transition:none} .hero .bg-video{display:none} /* モーション低減時は動画を隠し、下の静止画にフォールバック */ .illumi-video{object-fit:contain} /* 自動再生されても最初のポスターが破綻せず収まるように */ } /* ---- レスポンシブ ---- */ @media(max-width:920px){ .story{grid-template-columns:1fr} .story .ph{min-height:300px} .svc-grid{grid-template-columns:1fr} .svc{border-right:0;border-bottom:1px solid var(--line)} .svc:last-child{border-bottom:0} } @media(max-width:860px){ nav.main,.hd-tel{display:none} .navtoggle{display:block} nav.main.open{display:flex;position:absolute;top:var(--header-h);left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:6px 0;box-shadow:var(--shadow)} nav.main.open a{padding:14px 24px;border-bottom:1px solid var(--line);width:100%;text-align:left} nav.main.open a:last-child{border-bottom:0} nav.main.open a::after{display:none} nav.main.open a .en{display:inline;font-size:15px} nav.main.open a .ja{display:inline;margin-left:8px;font-size:11px} nav.main.open .lang-menu{width:100%;border-bottom:1px solid var(--line)} nav.main.open .lang-menu summary{padding:14px 24px;text-align:left} nav.main.open .lang-menu summary::after{display:none} nav.main.open .lang-menu summary .en{display:inline;font-size:15px} nav.main.open .lang-menu summary .ja{display:inline;margin-left:8px;font-size:11px} nav.main.open .lang-options{position:static;width:100%;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;padding:6px 24px 12px;background:color-mix(in srgb,var(--paper-2) 58%,var(--paper))} nav.main.open .lang-options::before{display:none} nav.main.open .lang-options a{border-bottom:0;padding:12px 14px;width:100%} .hub-grid,.price-grid,.price-grid-4,.info-grid,.cta-box{grid-template-columns:1fr} .pcard{border-right:0;border-bottom:1px solid var(--line)} .pcard:last-child{border-bottom:0} .info-grid .box:first-child{border-right:0;border-bottom:1px solid var(--line)} .f-grid{grid-template-columns:1fr} .fixbar{display:grid} footer.site{padding-bottom:132px} /* fixbarに隠れない余白 */ } @media(max-width:560px){ .ba-pair{grid-template-columns:1fr} .ba-pair::after{transform:translate(-50%,-50%) rotate(90deg)} /* 縦積み時は「↓」向き */ .local-video-grid{grid-template-columns:1fr} .definition .wrap{flex-direction:column;gap:10px} .definition .lead-mark{font-size:40px} .cta-box{padding:26px 20px} } /* ===== Cookie同意バナー（Consent Mode v2 / GDPR。js/consent.jsがDOM生成） ===== */ .ya-consent{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:var(--dark-2,#0e1620);color:#fff;box-shadow:0 -4px 20px rgba(0,0,0,.28);animation:yaConsentUp .3s ease} @keyframes yaConsentUp{from{transform:translateY(100%)}to{transform:translateY(0)}} @media (prefers-reduced-motion:reduce){.ya-consent{animation:none}} /* モーション低減設定時はスライドインを無効化 */ .ya-consent__in{max-width:1080px;margin:0 auto;padding:14px 18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap} .ya-consent__txt{font-size:13px;line-height:1.7;margin:0;flex:1 1 320px} .ya-consent__txt span{opacity:.72;margin:0 8px} .ya-consent__txt a{color:var(--hl,#ffe1b0);text-decoration:underline} .ya-consent__btns{display:flex;gap:10px;flex:0 0 auto} .ya-consent__btn{font-size:13px;font-weight:700;padding:9px 16px;min-height:44px;border-radius:6px;border:0;cursor:pointer;white-space:nowrap;font-family:inherit} /* min-height:44px=タップターゲット確保 */ .ya-consent :focus-visible{outline-color:#fff} /* 濃色バナー上のフォーカスリング（白 vs #0B1D2C=17.1:1 / 宿 #182640=約14:1） */ .ya-consent__btn--ghost{background:transparent;color:#e6edf2;border:1px solid rgba(255,255,255,.4)} .ya-consent__btn--ok{background:var(--cta,#1E6FA8);color:var(--cta-ink,#fff)} .ya-consent-reopen{position:fixed;left:14px;bottom:14px;z-index:9998;background:#fff;color:#333;border:1px solid rgba(0,0,0,.15);border-radius:22px;padding:7px 15px;min-height:44px;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.15);font-family:inherit} /* min-height:44px=タップターゲット確保 */ @media(max-width:640px){.ya-consent__in{padding:12px 14px}.ya-consent__btns{flex:1 1 100%}.ya-consent__btn{flex:1}.ya-consent-reopen{bottom:76px}} /* fixbarと重ならない位置 */