/* ============================================================ style.css ============================================================ */ :root{ --bg:#f6f5f2; --panel:#ffffff; --ink:#1d1c1a; --muted:#63605a; /* 背景 #f6f5f2 に対して 5.3:1。AA を確実に満たす */ --line:#e2ded7; --accent:#1c6b52; /* 最短巡旅＝サイト内で操作するもの */ --accent-ink:#0f4634; --accent-bg:#eaf2ee; --story:#8a4a2b; /* Story Travel＝読み物の面 */ --story-ink:#6e3a21; --story-bg:#f6efe9; --aff:#bf4b1e; /* 押すと外部の予約サイトへ出るものだけ */ --warn:#8a5a00; --err:#a3271c; --radius:12px; --shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.05); } *{box-sizing:border-box} /* ★hidden 属性は必ず効かせる。 display:flex/grid を持つ要素に JS で hidden を付けても、 display 指定のほうが強いので消えない。実際に・結果欄（#results）……何も計算していないのに空の地図が出ていた・日ごとの時刻（.day-times）……中身のない灰色の帯が出ていた・宿の3択（.field）……宿が決まっているのに選択肢が残って押せたが起きている。個別に打ち消すと必ず書き忘れるので、ここで一括で効かせる。 */ [hidden]{display:none !important} html,body{margin:0} body{ background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI", "Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Noto Sans JP", Meiryo,sans-serif; line-height:1.75; font-size:16px; letter-spacing:.02em; -webkit-text-size-adjust:100%; } a{color:var(--accent-ink)} h1,h2,h3{line-height:1.4; margin:0 0 .5em; font-feature-settings:"palt" 1} .wrap{max-width:960px; margin:0 auto; padding:0 20px} .small{font-size:.85em} .muted{color:var(--muted)} .note{color:var(--muted); font-size:.85em; margin:.8em 0 0} .hint{color:var(--muted); font-size:.85em; margin:.4em 0 0} /* 開発用プリフィルの警告帯（DEV_PREFILL が true のときだけ出る） */ .dev-banner{ background:#ffe9a8; color:#6b4f00; font-size:.85em; font-weight:600; text-align:center; padding:8px 16px; border-bottom:1px solid #e3ca7a; } .dev-banner code{ background:rgba(0,0,0,.07); border-radius:4px; padding:1px 5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.95em; } /* ============================================================ ブランド（Waka Travel シリーズ）最短巡旅 … 順番を決めるツール Waka Story Travel … 物語で旅する読み物 ============================================================ */ .brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit} .brand-mark{ width:38px; height:38px; flex:none; border-radius:11px; background:var(--accent); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(28,107,82,.28); } .brand-mark svg{width:22px; height:22px; display:block} .brand-text{display:flex; flex-direction:column; line-height:1.15} .brand-series{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; } .brand-name{font-size:1.16rem; font-weight:700; letter-spacing:.02em} .brand-name .en{font-size:.92rem; letter-spacing:.01em} /* ストーリー側は色を変えて別サービスだと分かるようにする */ /* ストーリーページはで面ごと茶に切り替える。埋め込んだ最短巡旅は別ドキュメントなので緑のまま＝意図どおり。 */ body.story{--accent:var(--story); --accent-ink:var(--story-ink); --accent-bg:var(--story-bg)} .brand.story .brand-mark{background:var(--story); box-shadow:0 2px 8px rgba(138,74,43,.28)} .brand.story .brand-name{color:var(--story-ink)} @media (max-width:520px){ .brand-mark{width:32px; height:32px; border-radius:9px} .brand-mark svg{width:18px; height:18px} .brand-name{font-size:1rem} .brand-name .en{font-size:.82rem} } /* ---- header / footer ---- */ .site-head{background:var(--panel); border-bottom:1px solid var(--line)} .site-head .wrap{display:flex; align-items:center; justify-content:space-between; height:58px} .logo{font-weight:700; text-decoration:none; color:var(--ink)} .site-head nav a{font-size:.9em; color:var(--muted); text-decoration:none} .site-head nav a:hover{color:var(--accent-ink)} .site-foot{margin-top:36px; padding:18px 0 28px; border-top:1px solid var(--line); color:var(--muted); font-size:.85em} .site-foot p{margin:.2em 0} /* ---- hero ---- */ .hero{padding:34px 0 20px; text-align:center} .hero h1{ font-size:clamp(1.55rem,5.4vw,2.35rem); letter-spacing:.01em; line-height:1.4; margin-bottom:.4em; word-break:auto-phrase; /* 和文を文節で折る。単語の途中で切らない */ text-wrap:balance; } .hero h1 strong{ color:var(--accent); background:linear-gradient(transparent 66%, #cfe6dc 66%); -webkit-box-decoration-break:clone; box-decoration-break:clone; } .hero p{color:var(--muted); font-size:1.02em; margin:0} /* ---- form ---- */ .panel{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:8px 26px 26px; box-shadow:var(--shadow); } .block{padding:22px 0; border-top:1px solid var(--line)} .block:first-child{border-top:0} .block-head{display:flex; align-items:center; gap:11px; margin-bottom:16px} .block-head h2{font-size:1.06rem; margin:0; letter-spacing:.01em} .step{ width:25px; height:25px; flex:none; border-radius:50%; background:var(--accent); color:#fff; font-size:.8rem; font-weight:700; display:flex; align-items:center; justify-content:center; } .grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px} .field{display:flex; flex-direction:column; gap:6px; min-width:0} .field.span2{grid-column:1 / -1} label,.label{font-weight:600; font-size:.92em} label small,.field small{font-weight:400; color:var(--muted)} input[type=text],input[type=number],input[type=time],select,textarea{ font:inherit; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); width:100%; } /* 矢印は環境によって別の文字（↑など）で描かれてしまうことがあるので、 OS任せをやめて自前のSVGを背景に置く。 */ select{ cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right:30px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236b6862' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; background-size:11px 8px; } select::-ms-expand{display:none} textarea{resize:vertical; line-height:1.7} input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent} /* ---- スポットの枠（1スポット＝1行） ---- */ .spot-head{ display:grid; grid-template-columns:1fr 150px 34px; gap:8px; font-size:.78em; color:var(--muted); padding:0 2px 2px; } .spot-list{display:flex; flex-direction:column; gap:8px} .spot-row{ display:grid; grid-template-columns:1fr auto 132px 34px; gap:8px; align-items:start; grid-template-areas:"name label stay del"; } .namebox{grid-area:name} .spot-row .spot-stay{grid-area:stay} .spot-row .del{grid-area:del} /* 見出し行（場所／滞在時間）はやめ、行の中に小さく「滞在」を出す */ .stay-label{grid-area:label; align-self:center; font-size:.82em; color:var(--muted); white-space:nowrap} /* 場所の候補リスト */ .namebox{position:relative; min-width:0} .nameline{display:flex; gap:6px; align-items:stretch} .nameline .spot-name{flex:1 1 auto; min-width:0} .find{ flex:none; font:inherit; font-size:.85em; font-weight:600; color:var(--accent-ink); background:#eef4f1; border:1px solid #cfe0d8; border-radius:8px; padding:0 12px; cursor:pointer; white-space:nowrap; } .find:hover{background:var(--accent); border-color:var(--accent); color:#fff} .find:disabled{opacity:.6; cursor:progress} .picked.nohit{color:var(--warn)} .picked.nohit::before{content:'! '; color:var(--warn)} .spot-row.confirmed .spot-name{border-color:var(--accent); background:#f7fbf9} .picked{ margin:4px 2px 0; font-size:.78em; color:var(--muted); line-height:1.45; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .picked::before{content:'✓ '; color:var(--accent); font-weight:700} .ac{ position:absolute; z-index:800; top:calc(100% + 4px); left:0; right:0; list-style:none; margin:0; padding:4px; max-height:270px; overflow-y:auto; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 26px rgba(0,0,0,.14); } .ac li{padding:8px 10px; border-radius:7px; cursor:pointer} .ac li:hover,.ac li.on{background:#eef4f1} .ac li b{display:block; font-size:.93em} .ac li span{ display:block; font-size:.78em; color:var(--muted); line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .spot-row .del{ font:inherit; font-size:1.15rem; line-height:1; color:var(--muted); background:transparent; border:1px solid transparent; border-radius:8px; width:34px; height:34px; cursor:pointer; } .spot-row .del:hover{background:#f7ecea; color:var(--err); border-color:#f0d9d5} .add{ font:inherit; font-size:.92em; font-weight:600; color:var(--accent); background:#fff; border:1.5px dashed #bcd4c9; border-radius:9px; padding:10px; margin-top:10px; cursor:pointer; width:100%; } .add:hover{background:#f3f8f6; border-color:var(--accent)} /* ---- 日ごとの時刻 ---- */ .check.sub{font-weight:400; font-size:.9em; color:var(--muted); margin-top:10px} .day-times[hidden]{display:none} .day-times{ display:flex; flex-direction:column; gap:8px; margin-top:10px; padding:12px 14px; background:#f7f6f3; border-radius:10px; } .day-time{display:flex; align-items:center; gap:12px; flex-wrap:wrap} .day-time label{font-weight:400; font-size:.88em; display:flex; align-items:center; gap:5px} .day-time input[type=time]{width:auto} .dt-label{font-weight:700; font-size:.88em; width:4.2em; flex:none} .radios{display:flex; gap:8px; flex-wrap:wrap} .chip{position:relative; font-weight:500} .chip input{position:absolute; opacity:0; inset:0; cursor:pointer} .chip span{ display:inline-block; padding:7px 14px; border:1px solid var(--line); border-radius:999px; background:#fff; cursor:pointer; font-size:.92em; } .chip input:checked + span{background:var(--accent); border-color:var(--accent); color:#fff} .chip input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px} .check{display:flex; align-items:center; gap:8px; font-weight:600} .inline{display:flex; gap:16px; flex-wrap:wrap; margin-top:6px; align-items:center} .inline label{font-weight:400; display:flex; align-items:center; gap:6px} .inline input[type=time]{width:auto} .inline select{width:auto} .inline input[type=number]{width:88px} .actions{padding:22px 0 4px; border-top:1px solid var(--line); text-align:center} button.primary{ font:inherit; font-weight:700; font-size:1.05em; background:var(--accent); color:#fff; border:0; padding:15px 44px; border-radius:10px; cursor:pointer; box-shadow:0 2px 10px rgba(28,107,82,.25); } button.primary:hover{background:var(--accent-ink)} button.primary:disabled{opacity:.55; cursor:progress} .status{margin:16px 0 0; padding:11px 14px; border-radius:8px; font-size:.92em; background:#eef2f0} .status.warn{background:#fdf3dd; color:var(--warn)} .status.error{background:#fbe9e7; color:var(--err)} /* ---- results ---- */ /* display 指定は hidden 属性より強い。これを書き忘れていたため、まだ何も計算していないのに空の地図（日本全図）がフォームの下に出ていた。 hidden を使う要素には、必ずこの1行を対にして書くこと。 */ #results[hidden]{display:none} #results{margin-top:22px; display:flex; flex-direction:column; gap:14px} .card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:15px 18px; box-shadow:var(--shadow); } .card h3{margin-bottom:.4em} .lead{color:#3c3a36; font-size:.94em; margin-top:0} .warnline{color:var(--warn); font-size:.9em} .slackline{ font-size:.9em; color:#3c3a36; background:#eef4f1; border-left:3px solid var(--accent); border-radius:0 8px 8px 0; padding:10px 14px; margin:12px 0 0; } /* 認識した場所の確認 */ .check-card summary{cursor:pointer; font-weight:600; font-size:.95em} .spot-check{list-style:none; margin:.8em 0 0; padding:0; font-size:.88em} .spot-check li{padding:7px 0; border-top:1px solid var(--line)} .spot-check li:first-child{border-top:0} .spot-check span{display:block; color:var(--muted); font-size:.92em} .spot-check i{ font-style:normal; font-size:.75em; border-radius:4px; padding:1px 7px; margin-left:6px; vertical-align:1px; } .spot-check i.ok{background:#e4f0eb; color:var(--accent-ink)} .spot-check i.guess{background:#fdf0d8; color:var(--warn)} /* 結果のまとめ。数字の箱4つは縦に場所をとるので1行にした */ .sumline{margin:0; font-size:1.05rem; color:var(--muted)} .sumline b{color:var(--ink)} /* 移動時間の断り書き。大きな数字のすぐ下に置く。結果の一番下にだけ書いていたときは、数字だけ見て信じてしまう作りだった。 */ .stats-note{ margin:8px 2px 0; font-size:13px; color:var(--muted); line-height:1.6; } .stats-note b{color:var(--ink); font-weight:600} /* 宿エリア */ /* 広告表示（ステマ規制）。見出しの横に必ず出す。 */ .pr{ display:inline-block; vertical-align:3px; margin-left:8px; background:#eceae5; color:var(--muted); border-radius:3px; padding:2px 7px; font-size:11px; font-weight:700; letter-spacing:.04em; } /* 宿カードを詰める */ .card.lodging{padding-top:16px} .card.lodging h3{margin-bottom:.5em} .compare-wrap{margin:10px 0 4px} .compare-wrap summary{ cursor:pointer; font-size:.88em; color:var(--muted); padding:6px 0; list-style:none; } .compare-wrap summary::before{content:'▸ '; } .compare-wrap[open] summary::before{content:'▾ '; } .compare-wrap summary:hover{color:var(--accent-ink)} .lodging .area:first-of-type{border-top:0; padding-top:4px} .lodging .compare{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0} .opt{ position:relative; border:1.5px solid var(--line); border-radius:10px; padding:13px 15px; cursor:pointer; display:block; font-weight:400; background:#fff; } .opt.on{border-color:var(--accent); background:#f3f8f6} .opt input{position:absolute; opacity:0} .opt b{display:block; font-size:1.02em} .opt span{display:block; color:var(--muted); font-size:.87em} .opt .tag{ display:inline-block; margin-top:5px; font-style:normal; font-size:.75em; background:var(--accent); color:#fff; border-radius:4px; padding:1px 7px; } .area{border-top:1px solid var(--line); padding-top:16px; margin-top:16px} .area-head{display:flex; align-items:center; gap:9px; flex-wrap:wrap} .area-head b{font-size:1.12em} .badge{ background:#eceae5; color:var(--muted); font-size:.76em; border-radius:5px; padding:2px 9px; font-weight:600; } .why{margin:.5em 0; font-size:.9em; color:#3c3a36} .links{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px} .links a, .btn-aff{ display:inline-block; background:var(--aff); color:#fff; text-decoration:none; padding:11px 18px; border-radius:8px; font-weight:700; font-size:.93em; } .links a:hover,.btn-aff:hover{filter:brightness(.92)} .btn-aff.sub{background:#fff; color:var(--aff); border:1.5px solid var(--aff)} .alts{margin-top:10px; font-size:.88em} .alts summary{cursor:pointer; color:var(--muted)} .alts ul{margin:.5em 0; padding-left:1.2em} .alts a{margin-left:6px} /* 地図 */ .map-card{padding:12px} #map{height:340px; border-radius:9px; border:1px solid var(--line); background:#e8e6e1} .pin{ width:26px; height:26px; border-radius:50%; color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.4); border:2px solid #fff; } .pin-alt{background:#fff; border:2.5px solid; font-size:11px} /* タイムライン */ .days{display:flex; flex-direction:column; gap:12px} .day{ background:var(--panel); border:1px solid var(--line); border-left:5px solid var(--c,#333); border-radius:var(--radius); padding:13px 18px; box-shadow:var(--shadow); } .day h3{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:.3em} .day h3 small{font-weight:400; color:var(--muted); font-size:.68em} .day h3 .over{color:var(--err)} .daynum{ display:inline-flex; width:28px; height:28px; border-radius:50%; background:var(--c,#333); color:#fff; align-items:center; justify-content:center; font-size:.85em; } .rows{list-style:none; margin:.5em 0 0; padding:0} .row{display:flex; gap:14px; padding:4px 0; border-top:1px dashed var(--line)} .row:first-child{border-top:0} .row .t{font-variant-numeric:tabular-nums; color:var(--muted); font-size:.9em; width:3.4em; flex:none} .row .c{min-width:0} .row em{font-style:normal; color:var(--muted); font-size:.86em; display:block} .row.move .c{color:var(--muted); font-size:.92em} .row.lunch .c{color:#8a5a00} .row.spot .c b{font-size:1.03em} /* 出発地点と宿泊地点は行程の「端」として区別する */ .row.edge .c b{font-size:1.03em} .row.edge .c{position:relative} .row.edge em{color:var(--accent); font-weight:600} .row.lodging em{color:var(--muted)} .row.finish em{color:var(--ink)} .stay-link{ display:inline-block; text-decoration:none; color:inherit; border-bottom:1.5px solid var(--aff); padding-bottom:1px; } .stay-link em{color:var(--aff); text-decoration:underline} .stay-link:hover b{color:var(--aff)} .effect{ font-size:.9em; background:#f3f8f6; border-radius:8px; padding:9px 13px; margin:.7em 0 .2em; color:#2c3a34; } /* 地名ページへの導線 */ .examples{margin-top:30px} .examples h2{font-size:1.25rem} .ex-list{list-style:none; margin:0; padding:0; columns:250px 3; column-gap:20px} /* about */ .about{margin-top:48px; color:#3c3a36} .about h2{font-size:1.25rem} .about h3{font-size:1.12rem; margin:1.6em 0 .4em; color:var(--accent-ink)} .about p{margin:.4em 0; max-width:38em; line-height:1.85} .about ol{padding-left:1.3em} .about li{margin:.35em 0} .about .model{border-collapse:collapse; font-size:.9em; margin:1em 0; max-width:100%; width:100%} .about .model th,.about .model td{border:1px solid var(--line); padding:7px 11px; text-align:left} .about .model th{background:#f1efea; white-space:nowrap} /* 2列の表（用途→エリア）は左列を固定幅に。3列以上の表には効かせない。 */ .about .model tr:not(:has(td:nth-child(3))) th{width:7em} /* simple 表示：入力欄を隠して結果だけ見せる（ストーリーページ用） */ body.simple #form, body.simple .hero, body.simple .examples{display:none} body.simple #results{margin-top:0} .simple-cta{border:1.5px solid var(--accent); background:#f3f8f6} .simple-cta b{display:block; font-size:1.05em; margin-bottom:.2em} .simple-cta .btn-aff{margin-top:10px} /* 埋め込み表示（地名ページの iframe 用） */ body.embed .site-head, body.embed .site-foot, body.embed .hero, body.embed .examples, body.embed .stories-nav, body.embed .share-card, body.embed .about{display:none} body.embed .wrap{padding:0} body.embed{background:transparent} @media (max-width:720px){ /* 狭い画面のほうが余白が広い、という逆転が起きていた（hero 36px > PC 34px）。画面が小さいほど余白は詰める。 */ .wrap{padding:0 16px} .grid{grid-template-columns:1fr} .lodging .compare{grid-template-columns:1fr} #map{height:280px} .panel{padding:4px 14px 16px} .hero{padding:18px 0 14px} .examples,.stories-nav{margin-top:24px} .site-foot{margin-top:28px; padding:16px 0 24px} /* 狭い画面では場所の入力欄を1行使う。候補リストは入力欄の幅に合わせて出るので、細いままだと住所が読めない。 */ .spot-head{display:none} /* name は1〜2列にまたがり、滞在の選択欄は2〜3列にまたがる。以前は選択欄を削除ボタン用の34px列に入れてしまい、潰れて矢印も読めなかった。 */ button.primary{width:100%} .day-time{gap:8px} .dt-label{width:100%} } /* ストーリーで旅する（トップの一覧） */ .stories-nav{margin-top:30px} .stories-nav h2{font-size:1.25rem} .stories-nav .lead{color:var(--muted); font-size:.94em; max-width:60ch} .story-list{list-style:none; margin:0; padding:0; columns:280px 3; column-gap:20px} .ex-list .area-group,.story-list .area-group{ break-inside:avoid; -webkit-column-break-inside:avoid; display:inline-block; vertical-align:top; width:100%; margin:0 0 16px; } /* 旅程の共有（使った人が配ってくれるのが一番安い集客） */ .share-card h3{margin-bottom:.2em} .share-row{display:flex; gap:8px; margin-top:10px} .share-row input{ flex:1 1 auto; min-width:0; font-size:.85em; color:var(--muted); background:#faf9f7; } .share-row button{ flex:none; font:inherit; font-size:.9em; font-weight:600; color:#fff; background:var(--accent); border:0; border-radius:8px; padding:0 18px; cursor:pointer; white-space:nowrap; } .share-row button:hover{background:var(--accent-ink)} @media (max-width:520px){ .share-row{flex-direction:column} .share-row button{padding:11px} } /* 地名ページの表から宿検索へ（ツールを動かさない読者向けの入口） */ .area-link{color:var(--aff); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(191,75,30,.35)} .area-link:hover{border-bottom-color:var(--aff)} /* スポットごとの日時指定（使う行だけ開く） */ .spot-cond{grid-column:1 / -1; display:flex; align-items:center; gap:10px; margin-top:2px} .cond-toggle{ font:inherit; font-size:.82em; color:var(--muted); background:transparent; border:0; padding:8px 0; min-height:36px; cursor:pointer; text-decoration:underline dotted; } .cond-toggle:hover{color:var(--accent-ink)} /* 要約はボタンの文字として出すので、横の欄は使わない */ .cond-summary{display:none} .spot-row.has-cond .cond-toggle{color:var(--accent-ink); font-weight:600; text-decoration:none} .cond-toggle{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%} .spot-extra{ grid-column:1 / -1; display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:4px; padding:10px 12px; background:#f7f6f3; border-radius:8px; } .spot-extra[hidden]{display:none} .spot-extra label{font-weight:400; font-size:.85em; display:flex; align-items:center; gap:6px} .spot-extra select,.spot-extra input[type=time]{width:auto; padding:5px 9px; font-size:.95em} .spot-extra select{padding-right:26px; background-position:right 8px center} .hint-inline{color:var(--muted); font-size:.9em} .cond-clear{ font:inherit; font-size:.8em; color:var(--muted); background:transparent; border:0; cursor:pointer; text-decoration:underline; } .cond-clear:hover{color:var(--err)} @media (max-width:720px){ .spot-extra{flex-direction:column; align-items:flex-start; gap:8px} } /* 時刻指定が守れたか／ずれたか */ .row.spot i{ font-style:normal; font-size:.72em; border-radius:4px; padding:1px 7px; margin-left:6px; vertical-align:1px; } .row.spot i.ok{background:#e4f0eb; color:var(--accent-ink)} .row.spot i.ng{background:#fdf0d8; color:var(--warn)} .row.spot.meal .c b{color:#8a5a00} @media (max-width:720px){ body.advanced .spot-extra{grid-area:auto; flex-direction:column; align-items:flex-start; gap:8px} } .row.wait .c{color:var(--muted); font-size:.92em} .row.wait .c em{color:var(--muted)} /* 地方ごとにまとめた一覧 */ .area-group{margin:0 0 14px} .area-group h3{ font-size:12px; letter-spacing:.1em; font-weight:700; color:var(--muted); margin:0 0 6px; padding-bottom:4px; border-bottom:1px solid var(--line); } .ex-cards,.story-cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:6px; } .ex-cards a,.story-cards a{ display:block; text-decoration:none; color:inherit; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:7px 10px; line-height:1.4; } .ex-cards a:hover,.story-cards a:hover{border-color:var(--accent)} .ex-cards b,.story-cards b{display:inline; font-size:.94em; color:var(--accent-ink); font-weight:700} .ex-cards i{ font-style:normal; font-size:12px; color:var(--muted); margin-left:7px; background:#f1efea; border-radius:4px; padding:1px 6px; vertical-align:1px; } .ex-cards span{ display:block; font-size:12px; color:var(--muted); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .story-cards span{display:block; font-size:12px; color:var(--muted); margin-top:2px} /* キーボード操作の枠がカード類で欠けていた */ .ex-cards a:focus-visible,.story-cards a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .story-cards a{border-left:3px solid var(--story)} .story-cards a:hover{border-color:var(--story)} .story-cards b{color:var(--story-ink)} .story-cards span{white-space:normal} /* ストーリーの位置関係の図（文字だけの画面を割る役目も兼ねる） */ .story-map{margin:1.6em 0 2em; padding:0} .story-map img{ width:100%; height:auto; display:block; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow); } .story-map figcaption{ font-size:.8em; color:var(--muted); margin-top:8px; text-align:center; } /* ストーリーの各場所の写真（出典表示はライセンス条件。消さないこと） */ .meaning{margin:1.1em 0; padding-left:0; border-left:0} .meaning::after{content:""; display:block; clear:both} .meaning h3{ display:flex; align-items:center; gap:9px; margin:0 0 .4em; font-size:1.06rem; color:var(--story-ink); } .meaning-no{ width:24px; height:24px; flex:none; border-radius:50%; background:var(--story); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; } /* 写真は主役ではなく文章の裏付け。本文の脇に添える。 */ .meaning-photo{float:right; width:240px; margin:2px 0 10px 18px; padding:0} .meaning-photo img{ width:100%; height:auto; display:block; border-radius:8px; aspect-ratio:4/3; object-fit:cover; /* 元画像の縦横比のばらつきを吸収する */ border:1px solid var(--line); } .meaning-photo figcaption{ font-size:12px; color:var(--muted); margin-top:5px; line-height:1.45; opacity:.85; } .meaning-photo figcaption a{color:var(--muted)} .meaning p{margin:0; color:#3c3a36} /* 場所の候補リスト：種類の札と「閉じる」 */ .ac-kind{ font-style:normal; font-size:11px; color:var(--muted); background:#f1efea; border-radius:4px; padding:1px 6px; margin-left:6px; } .ac-close{ text-align:center; font-size:12px; color:var(--muted); border-top:1px solid var(--line); padding:7px 0; cursor:pointer; } .ac-close:hover{background:#f4f2ee; color:var(--ink)} .picked.searching{color:var(--muted)} .picked.searching::before{content:'… '; color:var(--muted)} /* まとめの数字に添える補足（「1件は除外」） */ .stat-sub{font-size:13px; color:var(--warn); margin-left:4px} /* 交通の手配。カードにすると場所をとるので1行のリンクにする */ .extra-links{margin:14px 2px; font-size:.9em} .extra-links a{color:var(--aff)} @media (max-width:600px){ /* 240pxの回り込みは、375pxの画面だと本文が数文字幅になって読めない */ .meaning-photo{float:none; width:100%; margin:0 0 10px} .meaning-photo img{aspect-ratio:16/9} } /* 読み物からツールへの入口。小さい下線リンクだと読み飛ばされる */ .story-cta{margin:1.6em 0} .story-cta a{ display:inline-block; background:var(--accent); color:#fff; font-weight:700; text-decoration:none; border-radius:10px; padding:13px 22px; font-size:1rem; box-shadow:var(--shadow); } .story-cta a:hover{filter:brightness(1.08)} /* 結果の中から日数を変えて組み直すボタン */ button.redo{ font:inherit; font-size:13px; font-weight:600; margin-left:8px; background:#fff; color:var(--accent-ink); border:1px solid var(--accent); border-radius:8px; padding:4px 12px; cursor:pointer; white-space:nowrap; } button.redo:hover{background:var(--accent); color:#fff} /* ★サイト内の無料機能のボタン。楽天へ飛ぶ .btn-aff（橙）とは別の色にする。同じ色だと「これも広告か」と見えて、一番押してほしいボタンが押されない。 */ .btn-tool{ display:inline-block; background:var(--accent); color:#fff; font-weight:700; text-decoration:none; border-radius:10px; padding:13px 22px; margin-top:10px; box-shadow:var(--shadow); } .btn-tool:hover{background:var(--accent-ink); color:#fff} .free-note{margin:8px 0 0; font-size:12px; color:var(--muted)} .free-note::before{content:'✓ '; color:var(--accent); font-weight:700} .cta{margin:1.4em 0 0} /* ============================================================ 静的な旅程（地名ページ） ★これはJavaScriptではなくHTMLとして出す。以前は iframe の中で作っていたため、検索エンジンには本文622字の「ほぼ空のページ」に見えていた。 ============================================================ */ .plandays{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin:1.2em 0} .planday{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow); } .planday h3{ margin:0 0 8px; font-size:1rem; color:var(--accent-ink); display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; } .pd-sub{font-size:12px; font-weight:400; color:var(--muted)} .plantable{border-collapse:collapse; width:100%; font-size:.9em} .plantable td{padding:4px 0; vertical-align:top; border:0} .plantable td:first-child{ width:4.2em; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; } .plantable tr.mv td{color:var(--muted); font-size:.92em} .plantable tr.stayrow td{border-top:1px dashed var(--line); padding-top:7px} .plantable .stay{color:var(--muted); font-size:.86em; margin-left:4px} .plan-stay{ background:var(--accent-bg); border-left:3px solid var(--accent); border-radius:0 8px 8px 0; padding:11px 14px; margin:1em 0; } /* トップの信頼バッジと実例 */ .trust{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px; margin:14px 0 0; padding:0; font-size:12px; color:var(--muted); } .trust li::before{content:'✓ '; color:var(--accent); font-weight:700} /* ヒーロー下の実例リンク。トップの主役は入力フォームなので、完成した旅程そのものは置かない（それは地名ページの役割）。 */ .hero-ex{margin:12px 0 0; font-size:.92em; color:var(--muted)} /* ============================================================ 畳んだ条件（1日の時間・昼食・宿）既定のままで計算できるので、要約1行だけ見せる。 ============================================================ */ .more-opts{margin-top:14px; border:1px solid var(--line); border-radius:10px; background:#faf9f7} .more-opts > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:11px 14px; font-size:.9em; min-height:44px; } .more-opts > summary::-webkit-details-marker{display:none} .mo-label{font-weight:700; flex:none} .mo-sum{color:var(--muted); flex:1 1 auto; min-width:0} .mo-edit{flex:none; color:var(--accent-ink); font-weight:600; font-size:.92em} .mo-edit::after{content:' ▸'} .more-opts[open] .mo-edit::after{content:' ▾'} .more-opts[open] > summary{border-bottom:1px solid var(--line)} .mo-body{padding:14px} @media (max-width:720px){ .spot-row .stay-label{grid-area:label} .more-opts > summary{flex-wrap:wrap} .mo-sum{flex-basis:100%; order:3; font-size:.92em} /* ヘッダー右のリンクは短く。ロゴとぶつかっていた */ .site-head nav a{font-size:.82em} } /* トップ下の一覧：地名だけのチップ。1行説明つきのカードはスマホで長すぎた */ .ex-list,.story-list{columns:auto; display:flex; flex-direction:column; gap:10px} .ex-list .area-group,.story-list .area-group{display:flex; align-items:baseline; gap:12px; margin:0} .ex-list .area-group h3,.story-list .area-group h3{ flex:none; width:3.6em; margin:0; padding:0; border:0; font-size:12px; } .ex-cards,.story-cards{display:flex; flex-wrap:wrap; gap:6px} .ex-cards a,.story-cards a{ display:inline-block; padding:5px 12px; border-radius:999px; font-size:.9em; border-left-width:1px; line-height:1.4; } .ex-cards i{margin-left:5px} .stories-nav h2 small,.examples h2 small{font-weight:400; color:var(--muted); font-size:.7em; margin-left:6px} /* 地名ページから物語ページへの1行リンク */ .story-link{margin:1.8em 0 0; font-weight:600} /* ============================================================ 旅行予約サイトの定石に合わせた調整（UXレビュー） ============================================================ */ /* iPhone は16px未満の入力欄を押すと画面を拡大する。拡大されると入力のたびに画面が揺れ、素人っぽく見える。スマホでは必ず16px以上にする。 */ @media (max-width:720px){ input, select, textarea{font-size:16px !important} } /* 日程と移動手段はスマホでも2列のまま（縦に積むと場所をとる） */ @media (max-width:720px){ .grid.g2{grid-template-columns:1fr 1fr} } #days{width:100%} /* 実行ボタンをスマホでは画面下に固定する。フォームを過ぎれば固定は外れる。 */ @media (max-width:720px){ .actions{ position:sticky; bottom:0; z-index:500; background:var(--panel); margin:0 -14px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -6px 14px rgba(0,0,0,.06); } } /* ファーストビューを詰める。スマホでは名前を1つだけ見せる */ .trust .trust-ex::before{content:''} .trust a{color:var(--accent-ink)} @media (max-width:520px){ .brand-series, .brand-name .en{display:none} .hero{padding:12px 0 8px} .hero h1{font-size:1.35rem} .trust{margin-top:8px} } /* ---- 日程表：時刻・点・縦線（乗換案内の見せ方） ---- */ .row{border-top:0; padding:0; gap:10px; line-height:1.5} .row .t{width:3.2em; padding:6px 0} .row .c{flex:1 1 auto; padding:6px 0 6px 16px; border-left:2px solid var(--c,#999); position:relative} .row:first-child .c{border-image:linear-gradient(transparent 14px, var(--c,#999) 14px) 1} .row:last-child .c{border-image:linear-gradient(var(--c,#999) 14px, transparent 14px) 1} .row.spot .c::before, .row.edge .c::before{ content:''; position:absolute; left:-7px; top:10px; width:12px; height:12px; border-radius:50%; background:var(--c,#999); box-shadow:0 0 0 2px #fff; } .row.edge .c::before{background:#fff; border:2.5px solid var(--c,#999); width:7px; height:7px} .row.move .t{visibility:hidden} .row.move .c, .row.lunch .c, .row.wait .c{font-size:.86em; color:var(--muted); padding-top:2px; padding-bottom:2px} .row.lunch .c{color:var(--muted)} .row em{display:inline; margin-left:6px} .row.edge em{display:block; margin-left:0} /* 日ごとのタブ */ .day-nav{ position:sticky; top:0; z-index:450; display:flex; gap:6px; overflow-x:auto; padding:8px 0; background:var(--bg); } .day-nav a{ flex:none; padding:7px 16px; border-radius:999px; border:1.5px solid var(--c); background:#fff; color:var(--ink); text-decoration:none; font-size:.9em; font-weight:600; } .day{scroll-margin-top:56px} /* 宿のボタン：何のサイトで何を見るかを2段で。スマホでは全幅 */ /* .links a（inline-block）より強く指定しないと、2段にならない */ .links a.btn-aff, .btn-aff{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; min-height:48px; line-height:1.35; text-align:center; } .btn-aff b{display:block} .btn-aff small{display:block; font-weight:400; font-size:.8em; opacity:.92} @media (max-width:720px){ .links a, .links .btn-aff{flex:1 1 100%} } /* 結果の先頭：条件の要約・条件を変える・送る */ .sum-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); } .sumstay{margin:.35em 0 0; font-size:.92em} .sumstay a{color:var(--accent-ink); font-weight:600} .sum-actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap} button.ghost{ font:inherit; font-size:.9em; font-weight:600; cursor:pointer; color:var(--accent-ink); background:#fff; border:1.5px solid #cfe0d8; border-radius:9px; padding:8px 14px; min-height:40px; } button.ghost:hover{border-color:var(--accent)} @media (max-width:520px){ .sum-actions button{flex:1 1 0} } /* 地名ページ冒頭の要点 */ .plan-facts{ list-style:none; padding:0; margin:1em 0 0; display:flex; flex-wrap:wrap; gap:6px 8px; } .plan-facts li{ background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:4px 12px; font-size:.88em; } .plan-facts b{color:var(--accent-ink)} .plan-stay .btn-aff{display:flex; margin-top:10px} .plan-stay .pr{margin:0 8px 0 0} .plan-stay p{margin:0} /* ============================================================ 旅行アプリ風の入力画面（トップ）参考：Airbnb・Booking.com・じゃらん・Google Travel の検索画面。・何ができるかを最初に言う（見出し＋「回る順番／着く時刻／泊まるエリア」）・入力は2枚のカードだけ：検索カード（アイコン＋小さなラベル＋値の1行）と場所のリスト・枠付きの入力欄と番号付きの見出しをやめる（役所の申込書に見えていた）・入力の下に「こんな旅程ができます」の見本を置き、押すと何が出るかを先に見せる ============================================================ */ :root{ --bg:#f4f6f7; --line:#e3e7ea; --ink:#15191d; --muted:#5b6670; /* 背景 #f4f6f7 に対して 5.4:1 */ --radius:16px; --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06); } /* ---- 見出し ---- */ .hero{padding:26px 0 6px; text-align:center} .eyebrow{ display:inline-block; margin:0 0 10px; padding:3px 12px; border-radius:999px; background:var(--accent-bg); color:var(--accent-ink); font-size:12px; font-weight:700; letter-spacing:.06em; } .hero h1{font-size:clamp(1.4rem, 5.6vw, 2.1rem); line-height:1.5; margin:0; letter-spacing:.01em} .hero h1 strong{color:var(--accent); background:none} .hero-points{list-style:none; display:flex; justify-content:center; flex-wrap:wrap; gap:8px; padding:0; margin:14px 0 0} .hero-points li{ display:flex; align-items:center; gap:6px; padding:5px 12px 5px 9px; background:#fff; border:1px solid var(--line); border-radius:999px; font-size:13px; font-weight:600; } .hero-points .ico{width:18px; height:18px; color:var(--accent)} /* ---- カード ---- */ .planner{max-width:560px; margin:0 auto} .pcard{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid rgba(16,24,40,.05); margin-top:14px; } /* 検索カード：アイコン＋小さなラベル＋値 */ .search-card{padding:4px 0} .tile{ position:relative; display:flex; align-items:center; gap:14px; min-height:64px; padding:10px 16px; font-weight:400; cursor:text; } .search-card > .tile + .tile::before{ content:''; position:absolute; top:0; left:52px; right:16px; border-top:1px solid var(--line); } .tile:focus-within{background:#f6faf8} .tile .ico{width:22px; height:22px; flex:none; color:var(--accent)} .tile-body{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px} .tile-label{font-size:12px; font-weight:600; color:var(--muted); line-height:1.3} .tile-label small{font-weight:400} .tile input[type=text], .tile select{ border:0; border-radius:0; background-color:transparent; width:100%; padding:2px 0; font-size:17px; font-weight:600; line-height:1.5; } .tile select{padding-right:24px; background-position:right 2px center} .tile input:focus, .tile select:focus{outline:none} .tile input::placeholder{color:#a4adb5; font-weight:400} /* 2択の切り替え（iOS の segmented control） */ .planner .seg{ display:inline-flex; width:max-content; gap:2px; padding:3px; margin-top:4px; background:#eef1f3; border-radius:10px; border:0; height:auto; } .planner .seg .chip{display:block} .planner .seg .chip span{ display:block; padding:5px 16px; border:0; border-radius:8px; background:transparent; font-size:15px; font-weight:600; color:var(--muted); white-space:nowrap; } .planner .seg .chip input:checked + span{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(16,24,40,.14)} .planner .seg .chip input:focus-visible + span{outline:2px solid var(--accent); outline-offset:1px} .tile-sub{padding:0 16px 12px 52px} .tile-sub .check.sub{margin:0; font-size:14px; gap:8px; min-height:32px; font-weight:400} .tile-sub #sameAsStart{width:18px; height:18px; margin:0; accent-color:var(--accent)} .tile-sub #finishPlace{margin-top:6px; height:44px} /* 場所のリスト：番号＋名前（枠なし）＋滞在＋× */ .card-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:14px 16px 2px} .card-head h2{font-size:16px; margin:0} .card-hint{font-size:12px; color:var(--muted)} #spotList{counter-reset:spot; display:block} #spotList .spot-row{ counter-increment:spot; position:relative; display:grid; grid-template-columns:24px minmax(0,1fr) auto 36px; grid-template-areas:"num name stay del" ". cond cond cond" ". extra extra extra"; align-items:center; gap:0 10px; padding:6px 8px 6px 16px; background:none; border:0; border-radius:0; margin:0; } #spotList .spot-row + .spot-row::after{ content:''; position:absolute; top:0; left:50px; right:16px; border-top:1px solid var(--line); } #spotList .spot-row::before{ content:counter(spot); grid-area:num; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#eef1f3; color:var(--muted); font-size:12px; font-weight:700; } #spotList .spot-row.confirmed::before{background:var(--accent); color:#fff} #spotList .spot-row:focus-within{background:#f6faf8} #spotList .namebox{grid-area:name; min-width:0; position:static} #spotList .nameline{display:flex; align-items:center; gap:6px} #spotList .spot-name{ flex:1 1 auto; min-width:0; height:auto; border:0; border-radius:0; background:transparent; padding:9px 0; font-size:16px; font-weight:600; } #spotList .spot-name:focus{outline:none} #spotList .spot-name::placeholder{color:#a4adb5; font-weight:400} /* 「探す」は入力中の行だけに出す（欄を離れたときも自動で探すので、常に出す必要はない） */ #spotList .find{ flex:none; height:32px; min-width:0; padding:0 12px; border-radius:999px; border:1px solid #cfe0d8; background:#fff; font-size:13px; } #spotList .spot-row:not(:focus-within) .find{display:none} #spotList .spot-stay{ grid-area:stay; width:auto; height:34px; padding:0 26px 0 12px; border:0; border-radius:999px; background-color:#eef1f3; background-position:right 10px center; font-size:16px; font-weight:600; color:var(--ink); } #spotList .stay-label{display:none} #spotList .del{ grid-area:del; width:36px; height:36px; border:0; border-radius:50%; background:none; color:#9aa4ad; font-size:1.1rem; } #spotList .del:hover{background:#f6ecea; color:var(--err)} #spotList .picked{margin:-4px 0 4px; font-size:12px} #spotList .ac{top:calc(100% - 2px); left:12px; right:12px} #spotList .spot-cond{grid-area:cond; margin:-4px 0 4px; min-width:0} #spotList .cond-toggle{min-height:28px; padding:2px 0; font-size:12.5px} #spotList .spot-extra{grid-area:extra; flex-direction:row; align-items:center; gap:8px 12px; margin:2px 0 8px; padding:8px 10px} #spotList .spot-extra select, #spotList .spot-extra input[type=time]{width:auto; font-size:16px} /* 名前を入れる前は「＋日時・食事」を出さない */ #spotList .spot-row:has(.spot-name:placeholder-shown):not(.has-cond):not(:has(.spot-extra:not([hidden]))) .spot-cond{display:none} .planner .add{ display:flex; align-items:center; gap:12px; width:100%; margin:0; padding:12px 16px 14px; border:0; border-top:1px solid var(--line); border-radius:0 0 var(--radius) var(--radius); background:none; color:var(--accent-ink); font-weight:700; font-size:15px; text-align:left; } .planner .add:hover{background:#f6faf8} .add-plus{ width:24px; height:24px; flex:none; border-radius:50%; border:1.5px dashed var(--accent); display:flex; align-items:center; justify-content:center; font-size:13px; } /* 条件（畳んだまま） */ .planner .more-opts{margin-top:14px; background:#fff; border:1px solid rgba(16,24,40,.05); border-radius:var(--radius); box-shadow:var(--shadow)} .planner .more-opts > summary{padding:12px 16px; min-height:56px; font-size:14px; flex-wrap:wrap; row-gap:0} .planner .mo-label{font-weight:700} .planner .mo-sum{flex-basis:100%; order:3; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .planner .mo-edit{margin-left:auto} /* 実行ボタン */ .planner .actions{border:0; padding:18px 0 0; text-align:center} .planner button.primary{ width:100%; height:54px; border-radius:14px; font-size:17px; font-weight:700; letter-spacing:.05em; box-shadow:0 6px 16px rgba(28,107,82,.26); } .free-line{margin:8px 0 0; font-size:12px; color:var(--muted)} @media (max-width:720px){ .hero{padding:18px 0 2px} .planner .actions{ position:sticky; bottom:0; z-index:500; box-shadow:none; border:0; margin:0 -16px; padding:16px 16px calc(10px + env(safe-area-inset-bottom)); background:linear-gradient(rgba(244,246,247,0), var(--bg) 26%); } } /* 結果の見本 */ .sample{max-width:560px; margin:30px auto 0} .sample-h{font-size:15px; margin:0 0 8px} .sample-card{ display:block; padding:14px 16px; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); border:1px solid rgba(16,24,40,.05); color:var(--ink); text-decoration:none; } .sample-card:hover{border-color:var(--accent)} .sample-card > span{display:block} .sample-card > .sample-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:6px} .sample-top b{font-size:16px} .sample-top span{font-size:12px; color:var(--muted)} .sample-day{font-size:12px; font-weight:700; color:var(--accent-ink); margin:2px 0 4px} .sample-line{position:relative; font-size:14px; padding:3px 0 3px 18px; border-left:2px solid var(--accent-bg); margin-left:5px} .sample-line::before{content:''; position:absolute; left:-6px; top:10px; width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px #fff} .sample-line.more::before{background:#c9d2d9} .sample-line i{font-style:normal; color:var(--muted); display:inline-block; width:3.3em; font-variant-numeric:tabular-nums} .sample-line.more{color:var(--muted); font-size:13px} .sample-card > .sample-stay{display:flex; align-items:center; gap:6px; margin-top:10px; font-size:13px; font-weight:600} .ico-s{width:16px; height:16px; flex:none; color:var(--accent)} .sample-link{margin-top:8px; font-size:13px; font-weight:700; color:var(--accent-ink)} #spotList .spot-row{scroll-margin-top:12px} /* モデルコース・物語の一覧も同じ見た目にそろえる（白いチップ＋うすい影） */ .examples, .stories-nav{max-width:560px; margin-left:auto; margin-right:auto} .examples h2, .stories-nav h2{font-size:17px} .ex-cards a, .story-cards a{border-color:rgba(16,24,40,.08); box-shadow:0 1px 2px rgba(16,24,40,.05)} .ex-cards i{background:#eef1f3} /* 1枚目＝行き先＋行きたい場所。行き先の行と場所のリストを線で分ける */ .spots-card > .tile{border-bottom:1px solid var(--line)} .pcard > .tile:first-child{border-radius:var(--radius) var(--radius) 0 0} .spots-card .card-head{padding-top:12px} @media (max-width:720px){ /* スマホは見出しを詰め、開いてすぐ場所の欄が見えるようにする */ .eyebrow{display:none} .hero{padding:14px 0 0} .hero h1{font-size:min(21px, 5.4vw)} .hero-points{margin-top:10px; gap:6px} .hero-points li{padding:4px 10px 4px 8px; font-size:12.5px} .pcard{margin-top:12px} } /* ============================================================ 仕上げ：大見出し型のトップ（近代的なアプリのデザイナーの設計）・ヘッダーとヒーローを一体にする（白い帯と下線をやめ、背景と同じ色に）・見出しは1行、サブテキスト1行。3つのチップは1行の説明に置き換え・緑は「押せるもの」と「確定したもの」だけ。項目のアイコンは入力中だけ緑・カードは角丸20・枠線なし・ごく薄い影。ボタンは丸い形＋矢印行き先の欄が 190px → 約116px に上がる。 ============================================================ */ /* 背景：上だけ薄い緑から背景色へ。埋め込み表示（body.embed）の透明は壊さない */ body.home:not(.embed){background:linear-gradient(180deg,#e7f1ec 0,rgba(231,241,236,0) 280px) no-repeat,var(--bg)} .app-head{background:transparent; border-bottom:0} .app-head .wrap{height:60px} .app-head .brand-mark{width:30px; height:30px; border-radius:9px; box-shadow:none} .app-head .brand-mark svg{width:18px; height:18px} .app-head .brand-name{font-size:17px; font-weight:800; letter-spacing:.01em} .brand-badge{ padding:2px 8px; border-radius:999px; background:rgba(28,107,82,.1); color:var(--accent-ink); font-size:11px; font-weight:700; line-height:1.5; white-space:nowrap; } .app-head nav a{ position:relative; display:inline-flex; align-items:center; height:36px; padding:0 12px; border-radius:999px; background:rgba(16,24,40,.05); color:var(--ink); font-size:13px; font-weight:600; } /* 見た目は36pxでも、押せる範囲は44pxにする */ .app-head nav a::after{content:""; position:absolute; inset:-4px 0} .app-hero{max-width:560px; margin:0 auto; padding:36px 0 8px; text-align:center} .app-hero h1{ font-size:32px; font-weight:800; line-height:1.3; letter-spacing:.01em; margin:0; word-break:auto-phrase; text-wrap:balance; } .app-hero h1 strong{color:var(--accent); background:none} .app-hero .hero-sub{margin:8px 0 0; font-size:16px; line-height:1.55; color:var(--muted)} .planner{--radius:20px; --line:#eaedf0} .planner .pcard, .planner .more-opts{border:0; box-shadow:0 0 0 1px rgba(16,24,40,.05), 0 2px 8px rgba(16,24,40,.04)} .pcard, .planner .more-opts{margin-top:12px} .search-card{padding:2px 0} .tile{min-height:60px; padding:8px 16px} .planner .tile .ico{color:#5b6670; stroke-width:1.7} .planner .tile:focus-within .ico{color:var(--accent)} .tile-label{font-size:12px; line-height:1.2; letter-spacing:.03em} .tile input[type=text], .tile select{font-size:17px; line-height:1.4; padding:1px 0} .planner .seg .chip span{line-height:1.4} .tile-sub{padding:0 16px 8px 52px} .spots-card .card-head{padding:10px 16px 0} .card-head h2{font-size:15px; font-weight:700; line-height:1.4} #spotList .spot-row{grid-template-columns:24px minmax(0,1fr) auto 40px; padding:4px 4px 4px 16px} #spotList .spot-name{padding:10px 0; line-height:1.5} #spotList .spot-stay{height:32px; background-color:#f0f2f4} #spotList .del{width:40px; height:44px; border-radius:12px; color:#aab2b9} .planner .add{padding:10px 16px 12px; gap:10px; line-height:1.6} /* 点線の丸は古く見えるので、薄い緑の丸に */ .add-plus{border:0; background:var(--accent-bg); color:var(--accent); font-weight:800} .planner .more-opts > summary{min-height:52px; padding:10px 16px} .planner button.primary{ display:flex; align-items:center; justify-content:center; gap:8px; height:52px; border-radius:999px; letter-spacing:.04em; box-shadow:0 4px 14px rgba(28,107,82,.24); } /* 矢印は ::after で描く（計算中はボタンの文字を textContent で書き換えるため） */ .planner button.primary::after{ content:""; width:18px; height:18px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; } .planner button.primary:disabled::after{display:none} .planner button.primary:active{transform:scale(.985)} /* ==== スマホ ==== */ @media (max-width:720px){ .app-head .wrap{height:48px} .app-head .brand{gap:8px} .app-head .brand-mark{width:28px; height:28px; border-radius:8px} .app-head .brand-mark svg{width:16px; height:16px} .app-hero{padding:4px 0 0; text-align:left} .app-hero h1{font-size:min(22px, 6vw); line-height:1.35} .app-hero .hero-sub{margin-top:2px; font-size:13px; letter-spacing:0} /* 「無料・登録なし」はヘッダーのバッジで出しているので、ボタンの下では繰り返さない */ .free-line{display:none} /* 実行ボタンの帯はすりガラス風に（110px → 72px） */ .planner .actions{ margin:0 -16px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(244,246,247,.82); -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px); border-top:1px solid rgba(16,24,40,.06); } } @media (max-width:360px){ .brand-badge{display:none} } /* ポリシーページの連絡先 */ .contact{font-size:1.05em; font-weight:600; margin:.4em 0} /* トップの一覧の上に置く、読み物への1行リンク */ .ex-lead{margin:0 0 10px; font-size:.92em} /* モデルコースの「この順番のポイント」、物語ページの旅程の要約 */ .points{padding-left:1.2em; margin:.6em 0 0} .points li{margin:.45em 0; line-height:1.75} .story-route{list-style:none; padding:0; margin:.6em 0} .story-route li{padding:6px 0; border-bottom:1px solid var(--line); font-size:.95em}