@charset "UTF-8"; /* ========================================================= Travel Hub Namba — 店舗サイト共通スタイルブランド: OnCarry 和モダン（生成り × 朱 × 墨／駅サイン風の日英併記） 5言語で共有。言語ごとの差分は各HTML側ので吸収。 ========================================================= */ :root{ --paper:#F4EFE4; --card:#FCFAF4; --ink:#211C17; --muted:#6E665A; --shu:#DC3A21; --gold:#E8B04B; --line:#E2D9C7; --navy:#1B2A4A; --bg:var(--paper); --surface:var(--card); --fg:var(--ink); --fg-muted:var(--muted); --accent:var(--shu); --hair:var(--line); --sun:#DC3A21; --band:#EDE6D6; --dark-bg:#16233D; --dark-fg:#F4EFE4; --ok:#2F7A5B; --font-jp:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,"Noto Sans JP",sans-serif; --font-mn:ui-monospace,"SF Mono","JetBrains Mono",Menlo,"DejaVu Sans Mono",monospace; --wrap:1080px; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#16233D; --surface:#1E2C48; --fg:#F4EFE4; --fg-muted:#AFBACC; --accent:#EF6047; --hair:#2C3B5A; --sun:#EF6047; --band:#1A2740; --dark-bg:#101B30; --ok:#5FBF95; } } :root[data-theme="dark"]{ --bg:#16233D; --surface:#1E2C48; --fg:#F4EFE4; --fg-muted:#AFBACC; --accent:#EF6047; --hair:#2C3B5A; --sun:#EF6047; --band:#1A2740; --dark-bg:#101B30; --ok:#5FBF95; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-jp); -webkit-font-smoothing:antialiased; line-height:1.75; font-feature-settings:"palt" 1; overflow-x:hidden; } img,svg,iframe{max-width:100%;} .wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px;} h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:.01em; line-height:1.3; text-wrap:balance;} p{margin:0;} a{color:inherit;} /* ---- 共通パーツ ---- */ .ey{ font-family:var(--font-mn); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:600; display:inline-flex; align-items:center; gap:.7em; } .ey::before{content:""; width:24px; height:1px; background:var(--accent); display:inline-block;} .en{font-family:var(--font-mn); letter-spacing:.04em; color:var(--fg-muted);} .btn{ font-family:var(--font-jp); font-weight:700; font-size:.95rem; text-decoration:none; padding:14px 22px; border-radius:2px; display:inline-flex; align-items:center; justify-content:center; gap:.5em; background:var(--accent); color:#FFF6F1; border:1px solid var(--accent); transition:transform .15s ease, background .2s ease; text-align:center; } .btn:hover{transform:translateY(-1px);} .btn.ghost{background:transparent; color:var(--fg); border-color:var(--hair);} .btn.ghost:hover{border-color:var(--accent); color:var(--accent);} .btn svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; flex:none;} /* 未確定＝公開前に必ず埋める箇所。公開前チェックで目視できるよう明示する */ .todo{ background:repeating-linear-gradient(45deg,#FFE9A8,#FFE9A8 6px,#FFF3CC 6px,#FFF3CC 12px); color:#6A4E00; padding:0 .35em; border-radius:2px; font-weight:700; } /* ---- ヘッダー ---- */ .top{ position:sticky; top:0; z-index:30; backdrop-filter:blur(8px); background:color-mix(in srgb, var(--bg) 88%, transparent); border-bottom:1px solid var(--hair); } .top .wrap{display:flex; align-items:center; justify-content:space-between; gap:14px; height:62px;} .brand{display:flex; align-items:center; gap:.55em; font-weight:800; letter-spacing:.02em; text-decoration:none; font-size:1rem;} .brand .dot{width:11px; height:11px; border-radius:50%; background:var(--accent); flex:none;} .brand small{display:block; font-family:var(--font-mn); font-weight:600; font-size:.6rem; letter-spacing:.16em; color:var(--fg-muted); text-transform:uppercase; line-height:1.2;} .top-right{display:flex; align-items:center; gap:10px;} .top .btn{padding:9px 15px; font-size:.85rem;} /* 言語切替 */ .lang{position:relative;} .lang summary{ list-style:none; cursor:pointer; font-family:var(--font-mn); font-size:.78rem; letter-spacing:.08em; color:var(--fg-muted); border:1px solid var(--hair); border-radius:2px; padding:8px 12px; display:flex; align-items:center; gap:.45em; white-space:nowrap; } .lang summary::-webkit-details-marker{display:none;} .lang summary:hover{color:var(--fg); border-color:var(--accent);} .lang[open] summary{color:var(--fg); border-color:var(--accent);} .lang ul{ position:absolute; right:0; top:calc(100% + 6px); margin:0; padding:6px; list-style:none; background:var(--surface); border:1px solid var(--hair); border-radius:3px; min-width:172px; box-shadow:0 10px 28px rgba(0,0,0,.14); z-index:40; } .lang li a{display:block; padding:8px 12px; text-decoration:none; font-size:.9rem; border-radius:2px; color:var(--fg);} .lang li a:hover{background:var(--band);} .lang li a[aria-current="true"]{color:var(--accent); font-weight:700;} /* ---- ヒーロー ---- */ .hero{padding:52px 0 8px; position:relative; overflow:hidden;} .sun{ position:absolute; top:-140px; right:-110px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--sun) 22%,transparent), transparent 62%); pointer-events:none; } .hero .wrap{position:relative;} .hero h1{font-size:clamp(2.05rem,5.6vw,3.5rem); line-height:1.18;} .hero h1 .accent{color:var(--accent);} .hero .lead-en{margin-top:14px; font-family:var(--font-mn); font-weight:500; font-size:clamp(.92rem,1.9vw,1.15rem); letter-spacing:.05em; color:var(--fg);} .hero p.sub{margin:20px 0 0; max-width:33em; color:var(--fg-muted); font-size:1.02rem;} .cta-row{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap;} .cta-row .btn{flex:0 1 auto;} @media (max-width:560px){ .cta-row .btn{flex:1 1 100%;} } .rating{display:flex; align-items:center; gap:.6em; margin-top:20px; font-size:.9rem; color:var(--fg-muted); flex-wrap:wrap;} .rating .stars{ /* 実際の評価ぶんだけ塗る（4.8なら96%）。5つ塗ると事実と違う表示になる */ letter-spacing:.1em; font-size:1rem; background:linear-gradient(90deg, var(--gold) var(--fill,100%), rgba(255,255,255,.18) var(--fill,100%)); -webkit-background-clip:text; background-clip:text; color:transparent; } .rating b{color:var(--fg); font-family:var(--font-mn); font-size:1.02rem;} /* ---- 即答ボックス（AEO：結論を先に置く） ---- */ .answer{margin-top:34px; border:1px solid var(--hair); background:var(--surface); border-radius:3px; overflow:hidden;} .answer .row{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair);} .answer .cellbox{background:var(--surface); padding:20px 18px;} .answer .k{font-family:var(--font-mn); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600;} .answer .v{margin-top:8px; font-size:1.06rem; font-weight:700; line-height:1.5;} .answer .n{margin-top:5px; font-size:.82rem; color:var(--fg-muted); font-weight:400; line-height:1.55;} @media (max-width:820px){ .answer .row{grid-template-columns:1fr 1fr;} } @media (max-width:430px){ .answer .row{grid-template-columns:1fr;} } /* ---- セクション ---- */ .sec{padding:64px 0;} .sec.band{background:var(--band);} .sec-head h2{font-size:clamp(1.5rem,3.4vw,2.2rem);} .sec-head h2 .accent{color:var(--accent);} .sec-head p{color:var(--fg-muted); margin:14px 0 0; font-size:1rem; max-width:40em;} .sec-head .ey{margin-bottom:14px;} /* ---- 料金表 ---- */ .tablewrap{margin-top:28px; overflow-x:auto; border:1px solid var(--hair); border-radius:3px; background:var(--surface);} table.price{border-collapse:collapse; width:100%; min-width:520px;} table.price th, table.price td{padding:16px 18px; text-align:left; border-bottom:1px solid var(--hair); font-size:.97rem; vertical-align:top;} table.price thead th{ background:var(--band); font-family:var(--font-mn); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-muted); font-weight:600; white-space:nowrap; } table.price tbody tr:last-child th, table.price tbody tr:last-child td{border-bottom:none;} table.price tbody th{font-weight:700; white-space:nowrap;} table.price tbody th span{display:block; font-family:var(--font-mn); font-size:.72rem; letter-spacing:.06em; color:var(--fg-muted); font-weight:500; margin-top:3px;} table.price td.amount{font-family:var(--font-mn); font-weight:700; font-size:1.05rem; color:var(--accent); white-space:nowrap;} .note{margin-top:14px; font-size:.86rem; color:var(--fg-muted);} .note li{margin-top:5px;} ul.note{padding-left:1.2em;} /* ---- ステップ ---- */ .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:34px;} .step{padding-top:20px; border-top:2px solid var(--fg);} .step .no{font-family:var(--font-mn); font-size:.74rem; letter-spacing:.14em; color:var(--accent); font-weight:700;} .step h3{font-size:1.2rem; margin-top:10px;} .step h3 .en{display:block; font-size:.72rem; letter-spacing:.1em; margin-top:5px; text-transform:uppercase; font-weight:600;} .step p{color:var(--fg-muted); margin-top:10px; font-size:.94rem;} @media (max-width:760px){ .steps{grid-template-columns:1fr; gap:0;} .step{border-top:none; border-left:2px solid var(--fg); padding:18px 0 18px 20px;} } /* ---- 比較 ---- */ .compare{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px;} .compare .col{background:var(--surface); border:1px solid var(--hair); border-radius:3px; padding:24px 22px;} .compare .col.hi{border-color:color-mix(in srgb,var(--accent) 45%,var(--hair));} .compare h3{font-size:1.08rem; display:flex; align-items:center; gap:.5em;} .compare h3 .tag{font-family:var(--font-mn); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; padding:3px 8px; border-radius:2px; background:var(--band); color:var(--fg-muted); font-weight:600;} .compare .col.hi h3 .tag{background:var(--accent); color:#FFF6F1;} .compare ul{margin:16px 0 0; padding-left:0; list-style:none;} .compare li{display:flex; gap:.6em; font-size:.94rem; color:var(--fg-muted); margin-top:11px; line-height:1.6;} .compare li .m{flex:none; font-weight:800; width:1.1em; text-align:center;} .compare .col.hi li .m{color:var(--ok);} .compare .col:not(.hi) li .m{color:var(--fg-muted); opacity:.7;} @media (max-width:700px){ .compare{grid-template-columns:1fr;} } /* ---- 特長カード ---- */ .feat{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px;} .card{background:var(--surface); border:1px solid var(--hair); border-radius:3px; padding:24px 22px;} .card .ic{width:30px; height:30px; margin-bottom:13px; stroke:var(--accent); fill:none; stroke-width:1.6;} .card h3{font-size:1.06rem;} .card h3 .en{display:block; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; margin-top:5px; font-weight:600;} .card p{color:var(--fg-muted); margin-top:10px; font-size:.93rem;} @media (max-width:820px){ .feat{grid-template-columns:1fr 1fr;} } @media (max-width:520px){ .feat{grid-template-columns:1fr;} } /* ---- アクセス ---- */ .access{display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:30px; align-items:start;} @media (max-width:820px){ .access{grid-template-columns:1fr; gap:26px;} } .nap{list-style:none; margin:0; padding:0;} .nap li{display:grid; grid-template-columns:104px minmax(0,1fr); gap:14px; padding:14px 0; border-bottom:1px solid var(--hair); font-size:.98rem; align-items:baseline;} .nap li:last-child{border-bottom:none;} .nap .k{font-family:var(--font-mn); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-muted); font-weight:600;} .nap .v{font-weight:600; line-height:1.6;} .nap .v small{display:block; font-weight:400; color:var(--fg-muted); font-size:.85rem; margin-top:3px;} .nap .v a{color:var(--accent); text-decoration:none; font-family:var(--font-mn); font-weight:700;} .mapbox{border:1px solid var(--hair); border-radius:3px; overflow:hidden; background:var(--surface);} .mapbox iframe{display:block; width:100%; height:340px; border:0; filter:saturate(.92);} @media (max-width:820px){ .mapbox iframe{height:260px;} } /* ---- FAQ ---- */ .faq{margin-top:28px; border-top:1px solid var(--hair);} .faq details{border-bottom:1px solid var(--hair);} .faq summary{ list-style:none; cursor:pointer; padding:20px 40px 20px 0; font-weight:700; font-size:1.02rem; position:relative; line-height:1.6; } .faq summary::-webkit-details-marker{display:none;} .faq summary::after{ content:""; position:absolute; right:8px; top:28px; width:11px; height:11px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); transition:transform .2s ease; } .faq details[open] summary::after{transform:rotate(-135deg); top:31px;} .faq .a{padding:0 0 22px; color:var(--fg-muted); font-size:.96rem; max-width:46em;} /* ---- 口コミ ---- */ .reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px;} /* 掲載できる実物のクチコミが2件しかない言語（日本語）でも列が空かないようにする */ .reviews[data-n="2"]{grid-template-columns:repeat(2,1fr);} .reviews[data-n="1"]{grid-template-columns:1fr; max-width:560px;} .review{background:var(--surface); border:1px solid var(--hair); border-radius:3px; padding:22px 20px; display:flex; flex-direction:column;} .review .stars{color:var(--gold); letter-spacing:.1em; font-size:.95rem;} .review p{margin-top:11px; font-size:.94rem; color:var(--fg); line-height:1.75;} .review .who{margin-top:auto; padding-top:13px; font-family:var(--font-mn); font-size:.72rem; letter-spacing:.08em; color:var(--fg-muted);} @media (max-width:820px){ .reviews, .reviews[data-n="1"], .reviews[data-n="2"]{grid-template-columns:1fr; max-width:none;} } /* ---- 最終CTA ---- */ .cta{background:var(--dark-bg); color:var(--dark-fg); padding:64px 0; position:relative; overflow:hidden;} .cta .sun{top:auto; bottom:-180px; right:-120px;} .cta .wrap{position:relative;} .cta h2{font-size:clamp(1.6rem,3.8vw,2.5rem); color:var(--dark-fg);} .cta h2 .accent{color:var(--sun);} .cta p{margin-top:16px; color:#C8BEAC; max-width:34em; font-size:1rem;} .cta .cta-row{margin-top:28px;} .cta .btn.ghost{color:var(--dark-fg); border-color:#48403A;} .cta .btn.ghost:hover{border-color:var(--sun); color:var(--sun);} /* ---- フッター ---- */ footer{background:var(--dark-bg); color:#C8BEAC; padding:40px 0; border-top:1px solid #322B25; font-size:.88rem;} footer .fwrap{display:flex; justify-content:space-between; gap:26px; flex-wrap:wrap; align-items:flex-start;} footer .fbrand{color:var(--dark-fg); font-weight:800; font-size:1rem;} footer .fbrand small{display:block; font-family:var(--font-mn); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:#8A8075; margin-top:4px; font-weight:600;} footer address{font-style:normal; margin-top:10px; line-height:1.8;} footer a{color:#C8BEAC;} footer .flangs{display:flex; gap:14px; flex-wrap:wrap; font-family:var(--font-mn); font-size:.78rem; letter-spacing:.06em;} footer .flangs a{text-decoration:none;} footer .flangs a:hover{color:var(--sun);} footer .copy{margin-top:26px; padding-top:18px; border-top:1px solid #322B25; font-size:.76rem; color:#8A8075; font-family:var(--font-mn); letter-spacing:.04em;} /* ---- スマホ固定CTA（電話／地図） ---- */ .sticky{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:none; gap:1px; background:var(--hair); border-top:1px solid var(--hair); } .sticky a{ flex:1; display:flex; align-items:center; justify-content:center; gap:.45em; padding:15px 8px; text-decoration:none; font-weight:700; font-size:.94rem; background:var(--surface); color:var(--fg); } .sticky a.main{background:var(--accent); color:#FFF6F1;} .sticky svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8;} @media (max-width:760px){ .sticky{display:flex;} body{padding-bottom:56px;} } /* 言語別：日本語以外は本文の字送りを少し広げる */ body.lang-en, body.lang-ko{font-feature-settings:normal;} body.lang-en{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;} body.lang-ko{font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;} body.lang-zh-hant{font-family:"PingFang TC","Heiti TC","Microsoft JhengHei","Noto Sans TC",sans-serif;} body.lang-zh-hans{font-family:"PingFang SC","Heiti SC","Microsoft YaHei","Noto Sans SC",sans-serif;} /* ========================================================= スマホ（〜560px）の補正・ヘッダーは店名を1行で見せる（電話は下部の固定バーにあるため重複を消す）・料金表は横スクロールをやめ、1件ずつのカードに組み替える（料金が最初から見える）・住所などのラベル付きリストは縦積みにする ========================================================= */ @media (max-width:560px){ .top .btn{display:none;} .brand{font-size:.95rem; white-space:nowrap;} .brand small{letter-spacing:.12em;} .tablewrap{overflow-x:visible;} table.price{display:block; min-width:0; width:100%;} table.price thead{display:none;} table.price tbody{display:block;} table.price tbody tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 14px; padding:18px; border-bottom:1px solid var(--hair); align-items:start; } table.price tbody tr:last-child{border-bottom:none;} table.price tbody th, table.price tbody td{display:block; border:none; padding:0;} table.price tbody th{grid-column:1; grid-row:1;} table.price tbody td:not(.amount){grid-column:1; grid-row:2; font-size:.9rem; color:var(--fg-muted);} table.price tbody td.amount{grid-column:2; font-size:1.15rem; text-align:right;} table.price tbody td.amount:nth-of-type(2){grid-row:1;} table.price tbody td.amount:nth-of-type(3){grid-row:2;} table.price tbody td.amount::before{ content:attr(data-l); display:block; font-family:var(--font-mn); font-size:.62rem; letter-spacing:.06em; color:var(--fg-muted); font-weight:500; margin-bottom:1px; } .nap li{grid-template-columns:1fr; gap:5px; padding:15px 0;} .nap .k{font-size:.64rem;} } /* ========================================================= 対応言語バッジその言語の来訪者に「ここは自分の言葉が通じる」と最初に伝えるためのもの。 ※ 店頭で実際に対応できる言語だけ出すこと。書いてあるのに通じないと、期待して来た客が失望し、その言語の口コミに残る（施策として逆に働く）。 ========================================================= */ .badge-lang{ display:inline-flex; align-items:center; gap:.6em; margin-top:20px; padding:13px 22px 13px 18px; border-radius:2px; border:1.5px solid var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); font-weight:800; font-size:clamp(1.18rem,2.8vw,1.45rem); line-height:1.35; color:var(--fg); } .badge-lang .mark{ width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } .badge-lang small{ display:block; font-family:var(--font-mn); font-weight:600; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-muted); margin-top:3px; } .badge-note{margin-top:8px; font-size:.84rem; color:var(--fg-muted);} @media (max-width:560px){ .badge-lang{width:100%; justify-content:center; text-align:center;} } /* ---- 料金の主表示（サイズ別の内訳が確定するまではこれ1本で出す） ---- */ .price-lead{ display:flex; align-items:baseline; gap:.8em; margin-top:26px; padding:26px 30px; background:var(--surface); border:1px solid var(--hair); border-radius:3px; } .price-lead .amount{ font-size:clamp(2.1rem,5.6vw,3.1rem); font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1.1; letter-spacing:.005em; } .price-lead .cap{ font-family:var(--font-mn); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-muted); font-weight:600; } @media (max-width:520px){ .price-lead{flex-direction:column; align-items:flex-start; gap:.35em; padding:22px;} } /* 料金改定の告知（9/1に切り替わったら出力されなくなる） */ .price-notice{ margin:18px 0 0; padding:16px 20px; border-radius:6px; background:rgba(232,176,75,.10); border:1px solid rgba(232,176,75,.42); color:var(--fg); font-size:.95rem; line-height:1.85; } .price-notice strong{color:var(--gold);} @media (max-width:640px){ .price-notice{padding:14px 16px; font-size:.9rem;} } /* ロゴマーク（丸紋＋ピン＋暖簾の垂れ）。色は親から currentColor で受ける */ .brand .mark, .fbrand .mark{width:1.9em; height:1.9em; flex:0 0 auto; color:var(--accent);} .brand{display:flex; align-items:center; gap:.6em;} .mark-hole{fill:var(--bg);} .fbrand{display:flex; align-items:center; gap:.6em;} .fbrand .mark{width:2.1em; height:2.1em;} @media (max-width:640px){ .brand .mark{width:1.7em;height:1.7em;} } /* 写真（img/ にあるものだけ出る） */ .ph{margin:0 0 26px; border-radius:6px; overflow:hidden; background:var(--surface);} .ph img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;} /* 縦長の写真は 4:3 に切らない（上下が落ちて主題が消えるため） */ .ph-tall img{aspect-ratio:3/4;} .ph figcaption{padding:11px 14px; font-size:.85rem; color:var(--fg-muted); line-height:1.7;} @media (max-width:640px){ .ph figcaption{font-size:.8rem; padding:10px 12px;} } /* 写真2枚並び */ .phduo{display:grid; grid-template-columns:1fr 1fr; gap:20px;} .phduo .ph{margin-bottom:0;} @media (max-width:720px){ .phduo{grid-template-columns:1fr; gap:16px;} } /* 運営者情報と法的ページ */ .fcompany{font-size:.76rem; line-height:1.85; color:var(--fg-muted); padding-top:16px; opacity:.85;} .copy{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;} .copy a{color:var(--fg-muted); text-decoration:underline; text-underline-offset:3px;} .copy a:hover{color:var(--accent);} .legalpage main.legal{padding:56px 0 72px; max-width:760px;} .legal h1{font-size:1.7rem; line-height:1.4; margin-bottom:10px;} .legal-intro{font-size:.85rem; color:var(--fg-muted); margin-bottom:40px;} .legal-sec{margin-bottom:46px;} .legal-sec h2{font-size:1.2rem; padding-bottom:10px; border-bottom:1px solid var(--hair); margin-bottom:22px;} .legal-item{margin-bottom:24px;} .legal-item h3{font-size:.95rem; margin-bottom:7px;} .legal-item p{font-size:.9rem; line-height:1.95; color:var(--fg-muted);} .legal-back{margin-top:40px; padding-top:24px; border-top:1px solid var(--hair);} .legal-back a{color:var(--accent); text-decoration:none; font-size:.9rem;} .legalpage .foot{border-top:1px solid var(--hair); padding:30px 0;} .legalpage .foot .fcompany{padding-top:12px;} @media (max-width:640px){ .legalpage main.legal{padding:36px 0 52px;} .legal h1{font-size:1.4rem;} } /* 道順の図 */ .routemap{margin:0 0 30px; max-width:860px;} .routemap svg{width:100%; height:auto; display:block; border-radius:6px;} .rm-bg{fill:#F4EFE4} .rm-road{stroke:#E2D9C7; stroke-width:16; stroke-linecap:square} .rm-rail{fill:#DED4C0}.rm-pier{fill:#CDBFA6}.rm-bld{fill:#E8E0D0}.rm-park{fill:#DAE1D2} .rm-ttl{fill:#211C17; font-size:14px; font-weight:700} .rm-sub{fill:#8D8172; font-size:11.5px} .rm-sub2{fill:#6B6055; font-size:12px} .rm-usttl{fill:#211C17; font-size:15.5px; font-weight:700} .rm-us{fill:#DC3A21}.rm-usring{fill:none; stroke:#DC3A21; stroke-width:2; opacity:.35} .rm-route{fill:none; stroke:#DC3A21; stroke-width:3.2; stroke-dasharray:8 6; stroke-linecap:round} .rm-arrow{fill:#DC3A21} .rm-min{fill:#DC3A21; font-size:13px; font-weight:700} .rm-pill{fill:#FCFAF4; stroke:#E2D9C7; stroke-width:1} .rm-note{fill:#6B6055; font-size:11.5px} .rm-exit{fill:#211C17}.rm-exitlab{fill:#211C17; font-size:11.5px; font-weight:700} .rm-start{fill:#8A9A7B} /* ---- スマホのタップしやすさ（実機375pxで実測して調整） ---- */ @media (max-width:760px){ /* 固定バーはホームバーの下に潜らせない */ .sticky{padding-bottom:env(safe-area-inset-bottom);} body{padding-bottom:calc(60px + env(safe-area-inset-bottom));} /* 規約・ポリシーには固定バーが無いので余白も要らない */ body.legalpage{padding-bottom:0;} /* アクセス欄のテキストリンク（地図・WhatsApp）を指で押せる高さに */ .nap .v a{display:inline-flex; align-items:center; min-height:44px; padding:2px 0;} /* フッターの言語切替 */ footer .flangs{gap:6px;} footer .flangs a{display:inline-flex; align-items:center; min-height:44px; padding:0 10px;} /* 言語メニューの各行 */ .lang li a{padding:12px; font-size:.95rem;} .lang summary{padding:11px 14px;} /* FAQ回答の末尾リンク（経路）は独立行にして押しやすく */ .faq .a a{display:inline-flex; align-items:center; min-height:44px; margin-top:6px;} /* フッターの連絡先・規約リンク */ footer address a{display:inline-flex; align-items:center; min-height:44px;} footer .copy a{display:inline-flex; align-items:center; min-height:44px;} .legal-back a{display:inline-flex; align-items:center; min-height:44px;} } /* ---- Googleの評価（スコアと件数の事実表示＋実物への導線） ---- */ .gscore{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; border:1px solid var(--hair); border-radius:3px; padding:26px 28px; background:var(--surface);} .gscore-num{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;} .gscore-num .stars{ /* 実際の評価ぶんだけ塗る。background ショートハンドは background-clip より前に書く */ font-size:1.5rem; letter-spacing:.12em; line-height:1.2; background:linear-gradient(90deg, var(--gold) var(--fill,100%), rgba(255,255,255,.18) var(--fill,100%)); -webkit-background-clip:text; background-clip:text; color:transparent; } .gscore-num strong{font-size:2.1rem; font-weight:800; line-height:1;} .gscore-num span{color:var(--fg-muted); font-size:.95rem;} .gscore .btn{white-space:nowrap;} @media (max-width:560px){ .gscore{flex-direction:column; align-items:flex-start; gap:18px; padding:22px 20px;} .gscore .btn{width:100%; justify-content:center;} } /* ---- 言語の案内バー（ブラウザ言語がページと違うときだけ出る） ---- */ #langbar{display:flex; align-items:stretch; background:var(--accent); color:#FFF6F1;} #langbar[hidden]{display:none;} #langbar a{flex:1; display:flex; align-items:center; justify-content:center; gap:.5em; min-height:46px; padding:10px 14px; color:inherit; text-decoration:none; font-weight:700; font-size:.95rem; letter-spacing:.01em;} #langbar svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex:none;} #langbar button{flex:none; width:46px; min-height:46px; border:0; background:transparent; color:inherit; font-size:1.3rem; line-height:1; cursor:pointer; opacity:.75;} #langbar button:hover{opacity:1;} /* ---- ヘッダーの電話ボタン（PCでは固定バーが出ないので、ここが常時の電話導線） ---- */ .head-tel{background:transparent; border:1px solid var(--hair); color:var(--fg); font-family:var(--font-mn); letter-spacing:.02em;} .head-tel:hover{border-color:var(--accent); color:var(--accent);} .head-tel svg{width:15px; height:15px; fill:currentColor;} @media (max-width:860px){ .head-tel{display:none;} } /* 狭い画面は固定バーに任せる */ /* 臨時休業の告知（build.py の CLOSURE_ON で出し入れ） */ .closure{background:#7A1E12;color:#FFF3EE;border-bottom:3px solid #C4402A;} .closure .wrap{padding:14px 20px;} .closure b{display:block;font-size:1.02rem;font-weight:800;line-height:1.5;} .closure p{margin:6px 0 0;font-size:.88rem;line-height:1.75;color:#FBDDD3;} .closure strong{color:#FFF;font-weight:700;} @media(max-width:640px){ .closure .wrap{padding:12px 16px;} .closure b{font-size:.96rem;} .closure p{font-size:.82rem;} }