/* わんとこ 公開ページの見た目 ───────────────────────────────────────────── 色はロゴの2色（わんとこブラウン #572C0D・わんとこオレンジ #FC9829。背景はクリーム #FFF7EE）が基本です。 オレンジは白地の文字には使いません（読みにくいため）。面・印・下線に使います。 3本柱の色は、アイコンと細い線にだけ使います。 ◯△×？ は、色だけでなく記号と言葉で見分けられるようにしています。 Webフォントは読みません（端末に入っている文字を使います）。 260911_07：探しやすさの作り直し（トップのさがす箱・一覧の固定の帯・全画面の絞り込み・カードの形・パソコンの左の列）。 押す場所は 44px 以上、本文は 16px 以上（入力欄も 16px。iPhone で拡大されないように）。 */ :root { --bg: #FFF7EE; --card: #FFFFFF; --ink: #33261C; --ink-2: #6B5B4E; --ink-3: #8F7F72; --brown: #572C0D; --orange: #FC9829; --orange-2: #F58A1F; --orange-soft: #FFF2E2; --orange-line: #F3C089; --line: #EADFD2; --line-2: #F4EDE4; --stay: #3A57A0; --stay-soft: #EEF1F9; --eat: #9C5F0E; --eat-soft: #F8F0E4; --play: #35773F; --play-soft: #EAF3EB; --ok: #1F6A52; --ok-bg: #E4F2EB; --ok-line: #3F8B70; --cond: #74420A; --cond-bg: #FFF0DA; --cond-line: #E39A45; --ng: #922E28; --ng-bg: #FAE6E3; --ng-line: #B8433C; --unk: #5B5149; --unk-bg: #F1EDE9; --unk-line: #9A8D82; --r: 14px; --r-s: 10px; --shadow: 0 1px 2px rgba(87, 44, 13, .06), 0 4px 14px rgba(87, 44, 13, .05); --hd-h: 64px; --f-body: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif; --f-head: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; } body.lock { overflow: hidden; } img { max-width: 100%; height: auto; } a { color: var(--brown); text-underline-offset: .2em; text-decoration-thickness: 1px; } a:hover { color: #7A4318; } h1, h2, h3 { font-family: var(--f-head); color: var(--brown); line-height: 1.4; font-weight: 700; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--orange-line); outline-offset: 2px; } [hidden] { display: none !important; } .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } html:not(.js) .js-only { display: none !important; } .skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; z-index: 50; } .skip:focus { left: 8px; } .ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; } .ic-lg { width: 1.7em; height: 1.7em; } /* 柱と うちの子 の記号（WebP）。線の絵より少し大きめに出すと、同じ大きさに見えます（260912_07） */ .ic-pl { width: 1.45em; height: 1.45em; object-fit: contain; } .ic-pl.ic-lg { width: 2em; height: 2em; } /* ── 帯（デモ・プレビュー）── */ .band { font-size: 13px; line-height: 1.5; padding: 7px 16px; text-align: center; } .band-demo { background: var(--brown); color: #FFF7EE; } .band-demo b { color: var(--orange); } .band-preview { background: var(--cond-bg); color: var(--cond); border-bottom: 1px solid var(--cond-line); } /* ── ヘッダー ── */ .hd { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.2) blur(6px); } .hd-in { max-width: 1240px; margin: 0 auto; padding: 0 10px 0 14px; height: var(--hd-h); display: flex; align-items: center; gap: 8px; } .logo { display: flex; align-items: center; flex: none; } .logo img { height: 52px; width: auto; display: block; } /* ロゴの絵には、まわりの余白（クリアスペース）が入っています */ .hd-pl, .hd-q { display: none; } .hd-sp { flex: 1; } .dogchip, .hd-search { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--brown); font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; } .hd-search { width: 44px; padding: 0; justify-content: center; } .dogchip { max-width: calc(100vw - 244px); min-width: 0; } @media (max-width: 420px) { .dc-s { display: none; } /* せまい画面は、顔と頭数だけ（大きさは顔で分かる） */ .dogchip, .hd-search { padding: 0 10px; } /* 「うちの子」の文字が切れないように、少しつめる */ .hd-in { gap: 6px; padding: 0 8px 0 10px; } } .dogchip span { overflow: hidden; text-overflow: ellipsis; } .dogchip.has-dogs { background: var(--orange-soft); border-color: var(--orange-line); padding-left: 6px; } .dogchip.has-dogs .ic { display: none; } .dogface-chip { display: block; flex: none; } .hd-search:hover, .dogchip:hover { border-color: var(--orange-line); color: var(--brown); } /* 保存（♡と数。260912_02） */ .savechip { position: relative; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--brown); text-decoration: none; } .savechip:hover { border-color: var(--orange-line); } .savechip.has .ic { fill: var(--orange-2); stroke: var(--orange-2); } .savechip .cnt { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--brown); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 19px; text-align: center; } /* ── パンくず ── */ .crumbs { max-width: 1240px; margin: 0 auto; padding: 8px 16px 0; font-size: 12.5px; color: var(--ink-2); } .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 0; } .crumbs li + li::before { content: "›"; margin: 0 .5em; color: var(--ink-3); } .crumbs a { color: var(--ink-2); } main { display: block; max-width: 1240px; margin: 0 auto; padding: 0 16px 40px; } /* ── ボタンと入力 ── */ .btn, .btn-sub, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer; font-weight: 700; text-decoration: none; line-height: 1.3; } .btn { background: var(--orange); color: var(--brown); border: 1px solid var(--orange); } .btn:hover { background: var(--orange-2); border-color: var(--orange-2); color: var(--brown); } .btn-sub { background: var(--card); color: var(--brown); border: 1px solid var(--line); font-size: 14px; min-height: 44px; padding: 0 14px; } .btn-sub:hover { border-color: var(--orange-line); color: var(--brown); } .btn-ghost { background: transparent; border: 0; color: var(--ink-2); text-decoration: underline; padding: 0 10px; font-weight: 400; } .btn-wide { width: 100%; } .fld { display: block; margin: 0 0 12px; } .fld > span { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 4px; } .fld em { font-style: normal; color: var(--ng); font-size: 12px; margin-left: 4px; } select, input[type="text"], input[type="url"], input[type="search"], input[type="email"], textarea { width: 100%; min-height: 44px; padding: 9px 12px; background: var(--card); border: 1px solid #DCCFBF; border-radius: var(--r-s); font-size: 16px; } input[type="search"] { -webkit-appearance: none; appearance: none; } input[type="search"]::-webkit-search-cancel-button { display: none; } textarea { line-height: 1.6; } select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; } /* 1行の欄の「全部消す ✕」（clear.js が差し込みます）。 input[type=…] の指定に負けないよう、[type] を付けて同じ強さにしています */ .clr { position: relative; display: block; } .clr > input[type] { padding-right: 2.8em; } .clr > .x { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); font-size: 15px; line-height: 1; cursor: pointer; } .clr > .x:hover { background: var(--line-2); color: var(--ink); } /* ── 見出し・文 ── */ .sec { margin: 30px 0; } .sec > h2 { font-size: 1.25rem; margin: 0 0 10px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; } .sec > h2 small { font-size: 13px; color: var(--ink-2); font-family: var(--f-body); font-weight: 400; } .sub { font-size: 1rem; color: var(--ink-2); margin: 18px 0 8px; } .sub a { text-decoration: none; } .lead { color: var(--ink-2); margin: 6px 0 12px; } .note { font-size: 13px; color: var(--ink-2); line-height: 1.6; } .empty { color: var(--ink-3); padding: 12px 0; } .more-link { font-size: 14px; margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; } .err { background: var(--ng-bg); color: var(--ng); border: 1px solid var(--ng-line); padding: 10px 14px; border-radius: var(--r-s); } .ph-note { font-size: 11.5px; color: var(--ink-3); margin: 4px 0 0; text-align: right; } .phead { padding: 18px 0 4px; } .phead h1 { font-size: 1.55rem; margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .phead h1 span { font-size: .95rem; color: var(--ink-2); font-weight: 700; } /* 特集の見出し：写真（16:9）と文。スマホは写真が上、タブレット・パソコンは右に写真 */ .phead-ph { display: grid; grid-template-areas: "im" "tx"; gap: 10px; } .phead-im { grid-area: im; min-width: 0; } .phead-tx { grid-area: tx; min-width: 0; } @media (min-width: 760px) { .phead-ph { grid-template-columns: minmax(0, 1fr) 40%; grid-template-areas: "tx im"; gap: 24px; align-items: start; } } .empty-art { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; } .empty-img { width: 150px; height: auto; } .phead-stay h1 .ic { color: var(--stay); } .phead-eat h1 .ic { color: var(--eat); } .phead-play h1 .ic { color: var(--play); } .tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; } .intro { background: var(--card); border-left: 4px solid var(--orange); padding: 12px 16px; border-radius: 0 var(--r-s) var(--r-s) 0; margin: 10px 0; } /* ── 飾りの写真（260912_02）── 枠は写真と同じ 16:9（写真はどれも 16:9）。枠で人の顔や犬が切れないように、細長い枠にはしません。 260912_19：トップと柱の入口だけ、見出しを写真の上にのせます（本人の指示）。 それ以外の飾りの写真には、今までどおり文字も箱も重ねません。 */ .photo { margin: 0; } .photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--line-2); } .ph-cap { display: block; margin: 3px 2px 0; text-align: right; font-size: 11px; line-height: 1.4; color: var(--ink-3); } .banner-photo img { border-radius: var(--r); } .dogart { display: block; height: auto; } /* ── トップ・柱の入口：写真（16:9）→ ひとこと → さがす箱（260912_02）。さがす箱は最初の画面に入れる ── */ /* 260912_19：見出しとひとことを、写真の上にのせます（本人の指示）。 写真は 16:9 のまま、細長い枠に切りぬきません。文字は下半分に、上へ向かって薄くなる帯の上に置きます。 260913_06：写真の上には「写真はイメージです」の札をのせません（本人の指示）。 */ .top { margin: 0 -16px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "ph" "box" "lead"; } .top-ph { grid-area: ph; min-width: 0; position: relative; } .top-tx { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 52px 16px 14px; background: linear-gradient(to top, rgba(38, 24, 12, .88) 10%, rgba(38, 24, 12, .58) 48%, rgba(38, 24, 12, 0) 100%); } .top-ph .ph-cap { position: absolute; right: 8px; top: 8px; z-index: 3; margin: 0; color: #fff; background: rgba(38, 24, 12, .5); border-radius: 999px; padding: 2px 9px; } .top-h { margin: 0 0 6px; color: #fff; font-size: clamp(1.3rem, 5.6vw, 1.9rem); line-height: 1.32; display: flex; align-items: center; gap: 8px; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); } .in-stay .top-h .ic, .in-eat .top-h .ic, .in-play .top-h .ic { color: #fff; } .top-pl .top-h { font-size: clamp(1.25rem, 5.2vw, 1.8rem); margin: 0; } .top-sub { margin: 0; color: #F3E3D1; font-size: 13.5px; line-height: 1.6; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); text-wrap: pretty; word-break: auto-phrase; } /* 261010_05：最後の「す。」だけが次の行に落ちないように、文節で折り返す */ .top > .sbox, .top > .picker { grid-area: box; } .top > .lead { grid-area: lead; padding: 0 16px; } @media (max-width: 380px) { .top-tx { padding: 44px 14px 10px; } .top-sub { font-size: 12.5px; } } /* ── 動きはつけません（260928_01）── 260912_18 で入れた「トップの絵がゆっくり寄る」「文字とさがす箱が下から立ち上がる」 「カードがスクロールに合わせて立ち上がる」は、すべてやめました（本人の決定。docs/最初の画面と一覧カード_計画_260928.md）。 カードが読み込んだ直後に透明で、スマホの最初の画面が空いて見えていたためです（共通メモ「スクロールでふわっと出る動きは避ける」）。 */ .top-ph .photo { overflow: hidden; } .sbox { position: relative; z-index: 3; margin: 0 12px; background: var(--card); border-radius: 18px; box-shadow: 0 6px 24px rgba(87, 44, 13, .14); padding: 12px 12px 14px; } .sbox-step { display: flex; align-items: center; gap: 9px; margin: 17px 2px 9px; font-size: 15px; color: var(--brown); } .step-no { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--brown); color: white; font-size: 13px; } .sbox:not([data-p="stay"]) .price-step { display: none; } .loc { border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: #fffdf9; } /* .loc-tabs は 260922_07 でやめました（選ぶタブ） */ .loc-scope .fld { display: block; margin: 0 0 8px; } .loc-scope .fld span { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; } .loc-scope input[type="search"] { width: 100%; min-height: 46px; } /* 260922_07：「どこまでいく？」「どこからいく？」を2つ並べます（選ぶタブをやめました） 260922_08：「どこまでいく？」は47都道府県で長いので、折りたたみにします。 閉じているときは、選んでいる県の名前（または「全国からさがします」）だけが見えます */ .loc-scope + .loc-scope { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .loc-h { margin-bottom: 8px; } .loc-h b { display: block; font-size: 15px; } .loc-h small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3, var(--ink-2)); line-height: 1.5; } .loc-from .btn-ghost { margin-bottom: 6px; } .loc-fold > summary { cursor: pointer; list-style: none; display: block; position: relative; padding-right: 26px; min-height: 44px; } .loc-fold > summary::-webkit-details-marker { display: none; } .loc-fold > summary::after { content: "▾"; position: absolute; right: 4px; top: 2px; color: var(--ink-3, var(--ink-2)); } .loc-fold[open] > summary::after { content: "▴"; } .loc-fold > summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 6px; } .loc-now { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 700; color: var(--brown); } .loc-fold[open] .pref-options { margin-top: 8px; max-height: 320px; overflow-y: auto; } .loc .lbl { margin-top: 10px; } .micro { margin: 7px 1px 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); } .origin-current { font-size: 13px; font-weight: 700; color: var(--brown); margin: 4px 0; } /* 260928_03：「どこからいく？」も折りたたみ。開いたときに中身との間をあけます */ .loc-from[open] > summary { margin-bottom: 10px; } /* 260928_03：スマホでは、さがす箱が画面にあるあいだ「さがす」を画面の下に付けておきます（本人の決定 Q4） */ @media (max-width: 759px) { .sbox .go { position: sticky; bottom: 10px; z-index: 4; box-shadow: 0 2px 0 var(--orange-2), 0 6px 18px rgba(87, 44, 13, .22); } } .origin-hits:not(:empty) { display: grid; gap: 3px; border: 1px solid var(--line); border-radius: 9px; background: white; padding: 4px; } .origin-hits button { text-align: left; border: 0; border-radius: 6px; background: none; min-height: 43px; padding: 6px 10px; cursor: pointer; } .origin-hits button:hover, .origin-hits button:focus-visible { background: var(--orange-soft); } .origin-hits small { display: block; font-weight: 400; color: var(--ink-2); } .radius-options { display: flex; flex-wrap: wrap; gap: 6px; } .radius-options .chip { display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 12px; min-height: 42px; background: white; cursor: pointer; font-weight: 700; font-size: 13px; } .radius-options .chip:has(input:checked) { background: var(--brown); border-color: var(--brown); color: white; } .loc-apply { display: none; } @media (min-width: 1000px) { .flayer .loc-apply { display: block; margin-top: 10px; } } /* 都道府県のチェックは 260912_16 で作り直しました（下の「都道府県と、その中の観光地」）*/ .loc-keyword { margin: 9px 2px 0; font-size: 13px; } .loc-keyword summary { cursor: pointer; color: var(--brown); text-decoration: underline; min-height: 30px; } .fee-select { display: block; margin: 2px 0; } .fee-select span { display: block; margin-bottom: 4px; font-size: 13px; } .fee-select select { width: 100%; } .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--line-2); padding: 4px; border-radius: 12px; border: 0; margin: 0; } .seg-o { position: relative; } .seg-o input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .seg-o span { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; border-radius: 9px; font-weight: 700; color: var(--ink-2); font-size: 15px; } .seg-o input:checked + span { background: var(--card); color: var(--brown); box-shadow: 0 1px 4px rgba(87, 44, 13, .16); } .seg-o input:focus-visible + span { outline: 3px solid var(--orange-line); outline-offset: 1px; } .seg-stay .ic { color: var(--stay); } .seg-eat .ic { color: var(--eat); } .seg-play .ic { color: var(--play); } .where { display: flex; align-items: center; gap: 8px; margin-top: 10px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 4px 0 12px; background: var(--card); } .where .ic { color: var(--ink-3); } .where input[type] { border: 0; padding: 0 6px; min-height: 50px; background: transparent; } .where .clr { flex: 1; } .where:focus-within { border-color: var(--orange-line); box-shadow: 0 0 0 3px var(--orange-soft); } .lbl { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin: 12px 2px 6px; } .lbl-a { border: 0; background: none; color: var(--brown); text-decoration: underline; font-size: 13px; min-height: 32px; cursor: pointer; padding: 0 4px; } .mydogs { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; background: var(--orange-soft); border-radius: 12px; padding: 8px 10px; min-height: 52px; } .mydogs-t { font-size: 13px; color: var(--ink-2); width: 100%; } .mydogs .md { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--brown); line-height: 1.25; } .mydogs .md img { width: 30px; height: 30px; border-radius: 50%; background: #fff; } .mydogs .md small { display: block; font-weight: 400; font-size: 11.5px; color: var(--ink-2); } .qsize { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; width: 100%; } .qs { display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 52px; border: 1px solid var(--orange-line); background: var(--card); border-radius: 10px; font-size: 11.5px; font-weight: 700; color: var(--brown); cursor: pointer; padding: 4px 0; line-height: 1.2; } .qs img { width: 24px; height: 24px; } .qs:hover { background: var(--orange-soft); } /* 横に流れるチップの列（スマホ）。パソコンでは折り返す */ .hscroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; -webkit-overflow-scrolling: touch; } .hscroll::-webkit-scrollbar { display: none; } .hscroll .for { display: none; } .sbox[data-p="stay"] .for-stay, .sbox[data-p="eat"] .for-eat, .sbox[data-p="play"] .for-play { display: contents; } .sbox:has(input[name="p"][value="stay"]:checked) .for-stay, .sbox:has(input[name="p"][value="eat"]:checked) .for-eat, .sbox:has(input[name="p"][value="play"]:checked) .for-play { display: contents; } .sbox:has(input[name="p"][value="eat"]:checked) .for-stay, .sbox:has(input[name="p"][value="play"]:checked) .for-stay, .sbox:has(input[name="p"][value="stay"]:checked) .for-eat, .sbox:has(input[name="p"][value="play"]:checked) .for-eat, .sbox:has(input[name="p"][value="stay"]:checked) .for-play, .sbox:has(input[name="p"][value="eat"]:checked) .for-play { display: none; } /* 遊ぶの種類（遊ぶを選んだときだけ。260912_03） */ .for-play-only { display: none; } .sbox[data-p="play"] .for-play-only, .sbox:has(input[name="p"][value="play"]:checked) .for-play-only { display: block; } .sbox:has(input[name="p"][value="stay"]:checked) .for-play-only, .sbox:has(input[name="p"][value="eat"]:checked) .for-play-only { display: none; } .chips .chip-kind { font-weight: 700; } .chips .chip-kind.on { background: var(--play-soft); border-color: var(--play); color: var(--play); } .hscroll .chip, .chips .chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; text-decoration: none; cursor: pointer; line-height: 1.2; font-family: inherit; } .hscroll .chip:hover { border-color: var(--orange-line); color: var(--ink); } .hscroll .chip .n { font-weight: 400; font-size: 12px; color: var(--ink-3); } .hscroll .chip.on { border-color: var(--brown); background: var(--brown); color: #fff; } .hscroll .chip.on::before { content: "✓"; } .hscroll .chip .xx { opacity: .85; font-size: 12px; } .hscroll .chip-loc { border-style: dashed; color: var(--stay); border-color: #B9C4E3; } .hscroll .chip-loc .ic { width: 1.1em; height: 1.1em; } .hscroll .chip-clear { border: 0; background: transparent; color: var(--brown); text-decoration: underline; font-weight: 400; } .chip.chk { position: relative; } .chip.chk input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .chip.chk:has(input:checked) { border-color: var(--brown); background: var(--brown); color: #fff; } .chip.chk:has(input:checked) span::before { content: "✓ "; } .chip.chk:has(input:focus-visible) { outline: 3px solid var(--orange-line); outline-offset: 2px; } .go { margin-top: 14px; width: 100%; min-height: 56px; border: 0; border-radius: 14px; background: var(--orange); color: var(--brown); font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 2px 0 var(--orange-2); cursor: pointer; } .go:hover { background: var(--orange-2); } .go small { font-weight: 700; font-size: 13px; } /* ── 特集・条件・エリア・できること ── */ .tcards { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; } .tcards::-webkit-scrollbar { display: none; } .tcard { flex: none; width: 210px; background: var(--card); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; } .tcard-im { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--line-2); } .tcard-im img { width: 100%; height: 100%; object-fit: cover; display: block; } .tcard-tx { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 10px; align-items: flex-start; } .tcard-tx b { color: var(--brown); font-family: var(--f-head); font-size: 15px; line-height: 1.4; } .tcard-tx small { color: var(--ink-2); font-size: 12.5px; } .tcard:hover b { text-decoration: underline; } .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .tile { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; min-height: 60px; text-decoration: none; color: var(--brown); font-weight: 700; line-height: 1.35; font-size: 14.5px; } .tile span { display: flex; flex-direction: column; } .tile small { font-weight: 400; font-size: 12px; color: var(--ink-2); } .tile-ic { width: 36px; height: 36px; flex: none; } .tile:hover { border-color: var(--orange-line); } .areah { font-size: 13px; color: var(--ink-2); font-weight: 700; margin: 14px 0 6px; } .areah a { color: var(--ink-2); } .areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; } .area { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 48px; padding: 6px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--brown); font-weight: 700; font-size: 14.5px; line-height: 1.3; } .area small { font-weight: 400; color: var(--ink-3); font-size: 12px; } .area:hover { border-color: var(--orange-line); } .how { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } @media (min-width: 820px) { .how { grid-template-columns: repeat(3, 1fr); } } .how li { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; } .how li b { display: block; color: var(--brown); font-size: 15px; margin-bottom: 2px; } .how .dogart { width: 72px; } .rlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } @media (min-width: 720px) { .rlist { grid-template-columns: repeat(3, 1fr); } } .rlist a { display: flex; flex-direction: column; gap: 3px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px 14px; text-decoration: none; color: var(--ink); height: 100%; } .rlist-t { font-weight: 700; color: var(--brown); } .rlist-m { font-size: 12.5px; color: var(--ink-2); } .rlist-s { font-size: 12.5px; color: var(--ink-2); } .rlist-s b { color: var(--orange-2); letter-spacing: 1px; } .tlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } @media (min-width: 720px) { .tlist { grid-template-columns: 1fr 1fr; } } .tlist a { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px 14px; text-decoration: none; color: var(--ink); min-height: 52px; } .tlist a:hover { border-color: var(--orange-line); } .tlist-t { flex: 1; font-weight: 700; color: var(--brown); } .tlist-n { font-size: 13px; color: var(--ink-2); white-space: nowrap; } /* 260930_02：題名の下に説明を置く一覧（しおりを作る「お出かけコースから作る」）。 横に並べると、長い説明に押されて題名が1文字の幅までつぶれ、縦書きのようになっていた（本人の指摘） */ /* しおりをつくるページは左右2列なので、欄の幅（約350px）に合わせて列の数を決めます（1枚240px以上） */ .tlist-stack { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .tlist-stack a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; } .tlist-stack .tlist-t { flex: none; } .tlist-stack small { font-size: 13px; color: var(--ink-2); line-height: 1.5; } .alist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .alist a { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 8px 7px 14px; text-decoration: none; color: var(--brown); font-weight: 700; min-height: 44px; } .alist a span { font-size: 12px; background: var(--line-2); color: var(--ink-2); border-radius: 999px; padding: 1px 8px; font-weight: 700; } /* ── 小さな札 ── */ .pl { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; padding: 1px 8px 1px 5px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); white-space: nowrap; } .pl .ic { width: 1.15em; height: 1.15em; } .pl-stay { background: var(--stay-soft); color: var(--stay); } .pl-eat { background: var(--eat-soft); color: var(--eat); } .pl-play { background: var(--play-soft); color: var(--play); } .chip { font-size: 12px; background: var(--line-2); color: var(--ink-2); border-radius: 6px; padding: 1px 8px; line-height: 1.7; } .db { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 6px; white-space: nowrap; line-height: 1.7; } .db-rev { background: var(--orange); color: var(--brown); } .db-ok { background: var(--ok-bg); color: var(--ok); } .db-read { background: var(--stay-soft); color: var(--stay); } .db-basic { background: var(--unk-bg); color: var(--unk); } .db-warn { background: var(--cond-bg); color: var(--cond); white-space: normal; } /* 261014_01：利用した人の情報だけで載せた店（docs/口コミの店も載せる_計画_261014.md） */ .db-user { background: var(--cond-bg); color: var(--cond); } .ubasis { display: inline-block; font-size: 11px; font-weight: 700; color: var(--cond); border: 1px dashed var(--cond-line); border-radius: 5px; padding: 0 6px; line-height: 1.6; margin-left: 6px; background: #fff; vertical-align: 2px; font-family: var(--f-body); white-space: nowrap; } .demo { display: inline-block; font-size: 11px; font-weight: 700; color: var(--brown); border: 1px dashed var(--brown); border-radius: 5px; padding: 0 6px; line-height: 1.6; margin-left: 6px; background: #fff; vertical-align: 2px; font-family: var(--f-body); } .st { display: inline-block; font-size: 11.5px; line-height: 1.5; padding: 0 7px; border-radius: 5px; margin-left: 4px; white-space: nowrap; } .st-ok { background: var(--ok-bg); color: var(--ok); } .st-ok::before { content: "✓ "; } .st-hint { background: var(--unk-bg); color: var(--unk); white-space: normal; } .src-note { background: var(--stay-soft); border-left: 3px solid var(--stay); border-radius: 0 var(--r-s) var(--r-s) 0; padding: 8px 12px; margin: 12px 0; font-size: 13.5px; color: var(--ink); } .src-note a { white-space: nowrap; } .src-note.src-user { background: var(--cond-bg); border-left-color: var(--cond-line); } /* 261014_01：利用した人の情報だけの店 */ .fv { font-weight: 700; } .fv-unk { color: var(--unk); font-weight: 700; } .fv-unk::before { content: "？ "; } /* ── 判定の札（◯△×？）── */ .pb { display: inline-flex; align-items: center; gap: 2px; border-radius: 8px; padding: 1px 10px 1px 7px; font-size: 14px; font-weight: 800; line-height: 1.75; white-space: nowrap; border: 1.5px solid; } .pb b { font-size: 1.05em; margin-right: 3px; } .pb-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); } .pb-cond { background: var(--cond-bg); color: var(--cond); border-color: var(--cond-line); } .pb-ng { background: var(--ng-bg); color: var(--ng); border-color: var(--ng-line); } .pb-unk { background: var(--unk-bg); color: var(--unk); border-color: var(--unk-line); border-style: dashed; } .fit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 0; } .fit:empty { display: none; } .prs { font-size: 13px; color: var(--ink); line-height: 1.5; } .prm { font-size: 12px; color: var(--ink-3); } .reasons { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; } .reasons .r { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border-radius: var(--r-s); line-height: 1.55; } .reasons .r b { flex: none; width: 1.5em; text-align: center; font-size: 1.1em; } .r-ok { background: var(--ok-bg); } .r-ok b { color: var(--ok); } .r-cond { background: var(--cond-bg); } .r-cond b { color: var(--cond); } .r-ng { background: var(--ng-bg); } .r-ng b { color: var(--ng); } .r-unk { background: var(--unk-bg); } .r-unk b { color: var(--unk); } .dogname { font-weight: 700; } /* ── カード（260911_07：中身の位置を固定。空の写真の枠は出さない）── */ /* ── カードは「1件＝1段」（260912_17。docs/カードとトップ_他社調査と提案.md）── 前は2列の格子で、同じ行の高さをそろえていたため、写真の無いカードの下に最大318pxの空白が出ていました。 実際に調べた5社（休日いぬ部・旅っとペット・いぬやど・楽天トラベル・一休）は、どこも1件＝1段です。 1段なら高さをそろえる必要がないので、空白がそもそも出ません。 */ /* ── カードは「絵が上、中身が下」の格子（260912_18。案A）── 260912_17 では1件＝1段にしていました。写真の無い宿のカードに、最大318pxの空白が出たためです。 260912_18 で、写真をお借りできていない宿にも「種類の印」を置くようにしたので、 どのカードにも同じ大きさの絵が入り、高さがそろうようになりました。格子に戻せます。 align-items: start にしてあるので、同じ行のカードが引きのばされることもありません。 */ .list, .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; } .card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 0; display: flex; flex-direction: column; overflow: hidden; min-width: 0; transition: border-color .18s, box-shadow .25s, transform .25s; } .card:hover { border-color: var(--orange-line); box-shadow: 0 6px 22px rgba(87, 44, 13, .13); transform: translateY(-2px); } .card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; padding: 11px 14px 10px; } @media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } } /* ── まず「何をしますか？」を選ぶ（260912_15。本人の案）── */ .picker { margin-top: 18px; } .picker-h { margin: 0 0 10px; font-family: var(--f-head); font-size: 1.15rem; font-weight: 700; color: var(--brown); } .picker-3 { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); } .picker-o { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 8px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); min-height: 118px; justify-content: center; } .picker-o:hover, .picker-o:focus-visible { border-color: var(--orange-line); background: var(--orange-soft); } .picker-i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--orange-soft); } .picker-stay .picker-i { background: var(--stay-soft); } .picker-eat .picker-i { background: var(--eat-soft); } .picker-play .picker-i { background: var(--play-soft); } .picker-i svg { width: 26px; height: 26px; } .picker-t { font-family: var(--f-head); font-size: 1.05rem; font-weight: 700; } .picker-n { font-size: 12.5px; color: var(--ink-3); } .picker-o[data-last]::after { content: "前回はここから"; font-size: 11px; color: var(--orange-2); font-weight: 700; } @media (max-width: 420px) { .picker-3 { gap: 8px; } .picker-o { padding: 14px 4px 12px; min-height: 104px; } .picker-i { width: 40px; height: 40px; } .picker-t { font-size: .98rem; } } /* サブジャンル・よく使う条件（260912_15）。横に流さず、折り返して全部見せます */ .subgenre, .qconds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; } .qconds-more { width: 100%; margin-top: 2px; } .qconds-more > summary { display: inline-block; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--orange-2); padding: 4px 2px; } .qconds-more > summary::-webkit-details-marker { display: none; } .qconds-more > summary::after { content: " ▾"; } .qconds-more[open] > summary::after { content: " ▴"; } .subgenre .n, .qconds .n { margin-left: 4px; font-size: 11.5px; color: var(--ink-3); font-weight: 400; } /* 都道府県と、その中の観光地（260912_16 で作り直し）。 名前は左、件数は右。前は真ん中ぞろえで、数字が名前の下に縦に落ちていました。 */ .pref-options { display: block; margin-top: 8px; } .pref { border-bottom: 1px solid var(--line-2); } .pref:last-child { border-bottom: 0; } .pref-check { position: relative; cursor: pointer; display: block; } .pref-check input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; } .pref-check > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font-size: 15px; font-weight: 700; color: var(--ink); } .pref-check > span::before { content: ""; flex: 0 0 auto; width: 19px; height: 19px; margin-right: 8px; border: 1.5px solid var(--line); border-radius: 5px; background: #fff; order: -1; } .pref-check input:checked + span::before { background: var(--brown); border-color: var(--brown); box-shadow: inset 0 0 0 3px #fff; } .pref-check input:checked + span { background: var(--orange-soft); color: var(--brown); } .pref-check input:focus-visible + span { outline: 3px solid var(--orange-line); outline-offset: 2px; } .pref-check .n { margin-left: auto; font-size: 13px; color: var(--ink-3); font-weight: 400; } .spots { display: flex; flex-wrap: wrap; gap: 2px 6px; margin: 0 0 6px 37px; } .spot-check { position: relative; cursor: pointer; } .spot-check input { position: absolute; opacity: 0; inset: 0; } .spot-check > span { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13.5px; } .spot-check input:checked + span { border-color: var(--brown); background: var(--orange-soft); color: var(--brown); font-weight: 700; } .spot-check input:focus-visible + span { outline: 3px solid var(--orange-line); outline-offset: 2px; } .spot-check .n { font-size: 11.5px; color: var(--ink-3); font-weight: 400; } .pref-none { opacity: .42; } .pref-none .spots { display: none; } /* くらべるが3軒に達したとき（260912_16）。押せないことを、見て分かるようにします */ .cmp-full { opacity: .4; cursor: not-allowed; } /* 片道の目安（260912_15。時間が主役、km は小さく） */ .radius-options { display: flex; flex-wrap: wrap; gap: 6px; } .radius-options .chip span { display: flex; flex-direction: column; align-items: center; line-height: 1.25; } .radius-options .chip small { font-size: 10.5px; color: var(--ink-3); font-weight: 400; } /* 聞くことへの近道（260912_14）。判定の箱のすぐ下に置きます */ .asklead { margin: 10px 0 0; padding: 10px 14px; border-radius: var(--r-s); background: var(--orange-soft); border: 1px solid var(--orange-line); font-size: 14.5px; line-height: 1.6; color: var(--ink); } .asklead b { color: var(--brown); } .asklead a { font-weight: 700; } .asklead-none { background: var(--ok-bg); border-color: var(--ok-line); } /* ── 施設の写真（260912_12。docs/施設の写真_計画.md 6章）── 楽天から来る写真は 1:1・4:3・16:9 が混ざっています。枠の比率を決めると、必ず余白が出ます。 そこで、**余白は出さず、場所によって「そろえるほう」を変えます**。 一覧のカード … 4:3 の帯いっぱいに広げます（はみ出たぶんは見せません）。 高さがそろうので、となりのカードと名前・判定の行が並びます。 施設ページ … 高さだけそろえて、幅は写真なり。**切り取らず、写真まるごと**を出します。 カードで見えなかったところは、施設ページで必ず見られます。 */ .card-ph { position: relative; margin: 0; overflow: hidden; background: var(--line-2); } .card-ph .fph, .card-ph img { display: block; } .card-ph .fph { margin: 0; } .card-ph img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .card-ph .fph { position: relative; aspect-ratio: 4 / 3; } /* 楽天からお借りした写真には、その宿の楽天トラベルのページへのリンクを添えます（規約 第8条4項）。 260922_06 から、リンクは写真そのものではなく、右下の「写真：楽天トラベル」の文字です。 **前に出すのは、その文字だけ**にします（260922_09）。 写真ぜんたいを前に出していたころは、カード全体を押せるようにする面（.card-t a::after）を 写真がふさいでしまい、写真を押しても施設ページに行けませんでした。 */ .card-ph .fph-c { z-index: 2; } .card-ph img { transition: transform .55s cubic-bezier(.2, .7, .2, 1); } .card:hover .card-ph img { transform: scale(1.045); } @media (prefers-reduced-motion: reduce) { .card:hover .card-ph img { transform: none; } } /* 出どころは、写真の上に小さく重ねます（カードの高さを食わないように） */ .card-ph .fph-c { position: absolute; right: 0; bottom: 0; margin: 0; padding: 2px 6px; font-size: 10.5px; line-height: 1.4; color: #fff; background: rgba(51, 38, 28, .55); border-radius: var(--r-s) 0 0 0; } /* 260929_04：押すと楽天トラベルへ移る（施設ページではない）と分かるように、外へ出る印を付けます */ .card-ph .fph-c a::after { content: " ↗"; } /* ── 写真をお借りできていない宿の「宿の種類ごとの写真」（260930_03。CLAUDE.md 4章9の例外）── 実在しない宿の外観の写真です。右下に「画像はイメージです。」を必ず重ねます（画像には焼き込まない）。 それまでの線画の「種類の印」と、下の一文「この宿の写真は、まだお借りできていません」はやめました。 */ .fph-si { position: relative; } .si-note { position: absolute; right: 6px; bottom: 6px; z-index: 2; padding: 2px 7px; border-radius: 3px; font-size: 11px; line-height: 1.5; font-weight: 700; color: #fff; background: rgba(51, 38, 28, .62); pointer-events: none; } .phstrip-si .fph-si { flex: 0 0 auto; } .phstrip-si .si-note { right: 8px; bottom: 8px; font-size: 12px; } /* ── 判定の札を、絵の上にのせます（260912_18。案A）── 押したときは下の写真のリンクに通します（pointer-events: none）。 */ .vovl { position: absolute; left: 10px; top: 10px; z-index: 3; pointer-events: none; border-radius: 999px; padding: 5px 11px; font-size: 13.5px; font-weight: 700; color: #fff; background: rgba(51, 38, 28, .86); box-shadow: 0 2px 8px rgba(51, 38, 28, .28); } .vovl:empty { display: none; } .vovl .pb { border: 0; background: none; padding: 0; color: inherit; font-size: 13.5px; } .vovl .pb b { color: inherit; } .vovl-ok { background: rgba(31, 106, 82, .92); } .vovl-cond { background: rgba(116, 66, 10, .92); } .vovl-unk { background: rgba(70, 62, 55, .90); } .vovl-ng { background: rgba(146, 46, 40, .92); } /* 施設ページ：今度は「高さだけ」をそろえて、幅を写真にまかせます。こちらも余白は出ません。 */ .phstrip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 14px; padding-bottom: 2px; } .phstrip::-webkit-scrollbar { display: none; } .phstrip .fph { flex: 0 0 auto; margin: 0; min-width: 0; } .phstrip img { display: block; } .phstrip img { height: 210px; width: auto; max-width: none; border-radius: var(--r-s); } .phstrip .fph-c { margin: 4px 0 0; font-size: 11.5px; color: var(--ink-3); } /* 260922_06：出どころの文字が楽天トラベルへのリンクです（写真そのものは押せません） */ .fph-c a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .fph-c a:hover { color: var(--orange); } .card-ph .fph-c a { color: inherit; } @media (max-width: 520px) { .phstrip { margin-inline: -16px; padding-inline: 16px; } .phstrip img { height: 170px; } } /* くらべる表の中の写真 */ .cmp-ph img { display: block; height: 74px; width: auto; max-width: none; border-radius: 8px; } /* 260929_04：表の中でも「写真：楽天トラベル」を出します（楽天の規約 第13条・第8条4項。lib/photos.php の頭）。 それまでは隠していて、出どころの表示と楽天へのリンクが無くなっていました */ .cmp-ph .fph { margin: 0; } .cmp-ph .fph-c { margin: 3px 0 0; font-size: 11px; line-height: 1.4; color: var(--ink-3); white-space: nowrap; } .card-fit { display: flex; align-items: center; gap: 6px; min-height: 0; } .card-fit:empty { display: none; } .why { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.5; color: var(--ink); } .why .prs { font-size: inherit; color: inherit; } .why .prm { font-weight: 400; margin-left: 6px; } .why-cond { color: var(--cond); } .why-unk { color: var(--unk); } .why-ng { color: var(--ng); } .why .st { display: none; } .missline { margin: 0; font-size: 13px; font-weight: 700; color: var(--ng); } .missline b { margin-right: 4px; } .card-miss { background: #FFFCF7; border-style: dashed; } .card-t { margin: 0; font-size: 1.08rem; line-height: 1.45; padding-right: 34px; } .card-fit:not(:empty) ~ .card-t { padding-right: 0; } .card-fit { padding-right: 38px; } /* ♡（右上。押す場所は 44px。カード全体のリンクより上に） */ /* 260912_18：♡ は絵の上に出るので、白い地を敷いて読めるようにします */ .card:has(.card-ph) .heart { top: 6px; right: 6px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .86); box-shadow: 0 1px 4px rgba(51, 38, 28, .2); } .card:has(.card-ph) .card-t, .card:has(.card-ph) .card-fit { padding-right: 0; } .heart { position: absolute; top: 2px; right: 2px; z-index: 4; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; border-radius: 50%; padding: 0; } .heart .ic { width: 24px; height: 24px; } .heart:hover { color: var(--orange-2); } .heart[aria-pressed="true"] { color: var(--orange-2); } .heart[aria-pressed="true"] .ic { fill: currentColor; } .heart:focus-visible { outline: 3px solid var(--orange-line); outline-offset: -4px; } /* くらべる（カードの下。パソコンと「保存した施設」のページだけ） */ .cmp { position: relative; z-index: 2; display: none; align-items: center; gap: 5px; min-height: 36px; font-size: 13px; color: var(--ink-2); cursor: pointer; } .cmp input { width: 18px; height: 18px; accent-color: var(--brown); margin: 0; } .favpage .cmp { display: inline-flex; } .card-t a { color: var(--brown); text-decoration: none; } .card-t a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); } /* カード全体を押せるように */ .card-t a:hover { text-decoration: underline; } .card-t a:focus-visible { outline: none; } .card-t a:focus-visible::after { outline: 3px solid var(--orange-line); outline-offset: 2px; } .card-meta { margin: -4px 0 0; font-size: 12.5px; color: var(--ink-2); } .km { color: var(--stay); font-weight: 700; } /* 犬の料金と、1泊の目安（260912_17）*/ /* 泊まるといくら（260913_06）。合計は1行目、何を足したかは2行目に小さく出します */ .priceline { display: flex; flex-direction: column; gap: 1px; margin: 6px 0 0; } .prc-main { font-size: 14px; color: var(--ink); } .prc-main b { font-size: 17px; color: var(--brown); } .prc-sum, .prc-brk { display: block; } .prc-sum small { font-size: 12px; color: var(--ink-3); font-weight: normal; margin-left: 2px; } .prc-brk { font-size: 12px; color: var(--ink-3); line-height: 1.5; } .prc-ref { font-size: 13px; color: var(--ink-3); } .prc-ref::before { content: "1泊の目安 "; } /* カードの1行目の判定（260912_17）*/ .verdict { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 9px 13px; border-radius: var(--r-s); background: var(--unk-bg); border: 1.5px solid var(--unk-line); } .verdict .pb { font-size: 15.5px; } .verdict-w { font-size: 13.5px; line-height: 1.45; color: var(--ink); } .verdict-ok { background: var(--ok-bg); border-color: var(--ok-line); } .verdict-cond { background: var(--cond-bg); border-color: var(--cond-line); } .verdict-ng { background: var(--ng-bg); border-color: var(--ng-line); } .verdict-none { background: var(--orange-soft); border-color: var(--orange-line); } .verdict-ask { border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--brown); text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .verdict .st { display: none; } .verdict:empty { display: none; } /* 260912_18：カード全体を押せる面（.card-t a::after）より前に出します。 そうしないと「うちの子を選ぶと…」や「くらべる」を押しても、施設ページに行ってしまいます（260912_17 からの不具合）。 */ .verdict, .card-bot { position: relative; z-index: 1; } .kf { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } .kf li { background: var(--line-2); border-radius: 8px; padding: 5px 2px 4px; text-align: center; font-size: 11.5px; line-height: 1.3; color: var(--ink-2); } .kf li b { display: block; font-size: 14px; line-height: 1.25; font-weight: 800; } .kf-y { background: var(--ok-bg) !important; color: var(--ok) !important; } .kf-c { background: var(--cond-bg) !important; color: var(--cond) !important; } .kf-n b { font-size: 12px !important; color: var(--ink-3); } .kf-u { color: var(--unk); } .kf-i { background: var(--stay-soft) !important; color: var(--stay) !important; font-weight: 700; padding-top: 10px !important; } /* 260928_02：分からない枠は並べず、この1行にまとめます */ .kf-unk { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--unk); } .card-bot { margin: 2px 0 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); } .card-bot .fee b { font-size: 15.5px; color: var(--ink); } .card-bot .fee b.unk { font-size: 13px; color: var(--unk); } .lc { color: var(--ink-3); font-size: 12px; } .card-x { position: relative; z-index: 1; } .ev { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 5px; font-size: 12.5px; } .ev li { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; } /* 特集のカードの数字（260925_01）。見出しと値を1行に。長い条件の文は、その行の中で折り返す */ .evn { margin: 0; padding: 8px 0 0; border-top: 1px dashed var(--line); display: grid; gap: 3px; font-size: 12.5px; line-height: 1.5; } .evn div { display: grid; grid-template-columns: 6.5em 1fr; gap: 6px; } .evn dt { color: var(--ink-2); } .evn dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .evn dd .st { margin-left: 4px; } .evn-src { margin: 4px 0 0; font-size: 11.5px; color: var(--ink-3); } /* ── 周辺・地図・出典（施設ページ）── */ .nlist { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; } .nlist a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-s); text-decoration: none; color: var(--ink); } .nlist-t { font-weight: 700; color: var(--brown); flex: 1 1 auto; } .nlist-km { font-size: 12.5px; color: var(--ink-2); } .addr { font-size: 13px; color: var(--ink-2); } .map { height: 260px; border: 1px solid var(--line); border-radius: var(--r-s); margin-top: 12px; background: var(--line-2); z-index: 0; } .map-tall { height: min(62vh, 480px); } .map-credit { font-size: 11px; color: var(--ink-3); margin: 2px 0 0; text-align: right; } .mapwrap { margin-top: 14px; } .mapwrap summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--brown); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; background: var(--card); list-style: none; min-height: 44px; } .mapwrap summary::-webkit-details-marker { display: none; } .mpin { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brown); color: #fff; font-size: 14px; font-weight: 800; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); line-height: 1; } .mpin-self { background: var(--orange); color: var(--brown); } /* 判定の記号のピン（記号の形でも分かる。色だけにしない） */ .mpin-ok { background: var(--ok); } .mpin-cond { background: var(--cond); border-radius: 8px; } .mpin-unk { background: #fff; color: var(--unk); border: 2px dashed var(--unk); } .mpin-ng { background: #fff; color: var(--ng); border-color: var(--ng-line); opacity: .85; } .map { position: relative; } .map-boxgo { position: absolute; z-index: 500; top: 10px; left: 50%; transform: translateX(-50%); min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--brown); background: var(--card); color: var(--brown); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); } .map-pick { position: relative; margin: 8px 0 4px; } .map-pick .card { box-shadow: 0 4px 16px rgba(87, 44, 13, .16); border-color: var(--orange-line); } .map-pick-x { position: absolute; z-index: 3; top: -12px; left: -8px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); cursor: pointer; } .links { display: flex; flex-wrap: wrap; gap: 6px 16px; } /* 261001_02：施設ページのいちばん下の「◯年◯月◯日更新」（「出どころと情報修正の報告」の欄の代わり） */ .dt-upd { margin: 16px 2px 0; font-size: 13px; color: var(--ink-2); text-align: right; } /* ── 施設ページ（260912_01 で作り直し）── */ .dt2-grid { display: block; } .dt2-h { padding: 14px 0 4px; } .dt2-h h1 { font-size: 1.55rem; margin: 4px 0 6px; line-height: 1.35; } .dt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 13px; color: var(--ink-2); } .dt-sum { margin: 10px 0 0; color: var(--ink-2); } .dt2-h .src-note { margin: 8px 0 0; } /* うちの子の判定の箱（判定の色で枠を変える） */ .pbox { margin: 14px 0 0; border-radius: 16px; border: 2px solid var(--orange-line); background: linear-gradient(180deg, #FFF8EE, var(--card) 70%); padding: 14px; } .pbox[data-state="◯"] { border-color: var(--ok-line); background: linear-gradient(180deg, #F1FAF5, var(--card) 70%); } .pbox[data-state="△"] { border-color: var(--cond-line); } .pbox[data-state="×"] { border-color: var(--ng-line); background: linear-gradient(180deg, #FDF1EF, var(--card) 70%); } .pbox[data-state="？"] { border-color: var(--unk-line); border-style: dashed; background: var(--card); } .pbox-empty { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); } .pbox-who { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; } .pbox-who .faces { display: flex; } .pbox-who .faces .dface + .dface { margin-left: -10px; } .pbox-big { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; font-family: var(--f-head); font-size: 1.35rem; color: var(--brown); font-weight: 700; line-height: 1.35; } .pbox-big b { display: inline-grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; border-radius: 10px; border: 2px solid; font-size: 1.05em; } .pbox-big-ok { color: var(--ok); } .pbox-big-ok b { background: var(--ok-bg); border-color: var(--ok-line); } .pbox-big-cond { color: var(--cond); } .pbox-big-cond b { background: var(--cond-bg); border-color: var(--cond-line); } .pbox-big-ng { color: var(--ng); } .pbox-big-ng b { background: var(--ng-bg); border-color: var(--ng-line); } .pbox-big-unk { color: var(--unk); } .pbox-big-unk b { background: var(--unk-bg); border-color: var(--unk-line); border-style: dashed; } .side-big.pbox-big { font-size: 1.1rem; margin: 0; } /* 料金の目安（260922_03。人の宿泊料金も入れた総額。内わけは下の行に折り返す） */ .pbox-fee { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 10px; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s); font-size: 13.5px; color: var(--ink-2); } .pbox-fee b { font-family: var(--f-head); font-size: 1.5rem; color: var(--ink); margin-left: auto; } .pbox-fee .bx-lead { font-weight: 700; } .pbox-fee .bx-brk, .side-fee .bx-brk { flex: 1 0 100%; font-size: 12px; color: var(--ink-3, var(--ink-2)); } /* 犬の顔（犬種の顔・全身の絵を丸く） */ .dface { display: inline-block; flex: none; border-radius: 50%; overflow: hidden; background: #fff; border: 2px solid #fff; vertical-align: middle; box-shadow: 0 0 0 1px var(--line); } .dface img { display: block; width: 100%; height: 100%; object-fit: cover; } .dface-body img { transform: scale(1.9) translateY(18%); transform-origin: 50% 20%; } .dogface-chip.dface-body { object-fit: cover; object-position: 50% 12%; } /* ページの中の目次（スクロールしても上に出す） */ .jump { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 14px -16px 0; padding: 6px 16px; position: sticky; top: var(--hd-h); z-index: 10; background: var(--bg); } .jump::-webkit-scrollbar { display: none; } .jump a { flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 13.5px; text-decoration: none; color: var(--ink); font-weight: 700; } .jump a:hover { border-color: var(--orange-line); } .box[id], .pbox { scroll-margin-top: calc(var(--hd-h) + 60px); } /* 受け入れの表（大きさ×頭数） */ .mx { width: 100%; max-width: 520px; border-collapse: separate; border-spacing: 4px; font-size: 14px; } .mx th { font-weight: 700; color: var(--ink-2); font-size: 12.5px; padding: 2px 4px; } .mx th[scope="row"] { text-align: left; font-size: 14px; color: var(--ink); white-space: nowrap; } .mx th[scope="row"] small { display: block; font-weight: 400; color: var(--ink-3); font-size: 11px; } .mx td { text-align: center; border-radius: 8px; padding: 7px 2px; font-weight: 800; font-size: 17px; line-height: 1.1; min-width: 56px; } .mx-y { background: var(--ok-bg); color: var(--ok); } .mx-c { background: var(--cond-bg); color: var(--cond); } .mx-n { background: var(--ng-bg); color: var(--ng); } .mx-u { background: var(--unk-bg); color: var(--unk); } .mx td.me { outline: 3px solid var(--orange); outline-offset: -3px; } .mx-notes { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; color: var(--ink-2); display: grid; gap: 2px; } .mx-me-note { display: flex; align-items: center; gap: 6px; } .mx-me-note i { width: 16px; height: 16px; border: 3px solid var(--orange); border-radius: 4px; display: inline-block; } /* 犬と過ごせる場所 */ .places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 8px; } .places li { display: grid; grid-template-columns: 42px 1fr; gap: 8px; align-items: center; background: var(--line-2); border-radius: 12px; padding: 8px 9px; min-height: 66px; } .places li > span { min-width: 0; } .places b { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.3; } .places .pv { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.35; color: var(--ink); } .places .pv i { font-style: normal; margin-right: 4px; } .pt-ic { width: 42px; height: 42px; } /* 260913_06：絵が小さかったので大きくしました（本人の指摘） */ .places .pt-y { background: var(--ok-bg); } .places .pt-y .pv { color: var(--ok); } .places .pt-c { background: var(--cond-bg); } .places .pt-c .pv { color: var(--cond); } .places .pt-n .pv { color: var(--ink-3); font-weight: 700; } .places .pt-u .pv { color: var(--unk); } .places .pt-i { background: var(--stay-soft); } .places .pt-i .pv { color: var(--stay); } /* 行く前に・施設に聞くこと */ .bring { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .bring label { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; border-bottom: 1px dashed var(--line-2); cursor: pointer; font-size: 15px; line-height: 1.5; } .bring input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--brown); } .bring input:checked + span { color: var(--ink-3); text-decoration: line-through; } .ask { background: #FFFCF6; border-style: dashed; border-color: var(--unk-line); } .ask-intro { margin: 0 0 6px; font-weight: 700; color: var(--brown); } .ask-list { margin: 0; padding-left: 1.4em; font-size: 15px; line-height: 1.6; } .ask-list li { margin: 4px 0; } .ask-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .access { margin: 0 0 6px; display: grid; gap: 6px; font-size: 14.5px; } .access div { display: grid; grid-template-columns: 5.5em 1fr; gap: 8px; } .access dt { color: var(--ink-2); font-weight: 700; font-size: 13px; } .access dd { margin: 0; } .nlist .pl { flex: none; } #all { margin-top: 16px; } #all .facts { margin-bottom: 6px; } /* 右の答えの箱（パソコン）・下の固定の帯（スマホ） */ .dt2-side { display: none; } .side-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow); display: grid; gap: 10px; } .side-name { margin: 0; font-family: var(--f-head); font-weight: 700; color: var(--brown); font-size: 15px; line-height: 1.4; } .side-fit .note { margin: 0; } .side-box .map-side { height: 150px; margin-top: 2px; } .side-box .map-credit { margin-top: -8px; } .side-addr { margin: -4px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; } .dt-st { margin: 0 0 6px; } .side-big { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-weight: 700; color: var(--brown); } .side-why { margin: 6px 0 0; font-size: 13px; color: var(--cond); font-weight: 700; } .side-why .prm { font-weight: 400; color: var(--ink-3); margin-left: 4px; } .side-fee { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 6px 0 0; font-size: 13px; color: var(--ink-2); } .side-fee b { font-size: 1.3rem; color: var(--ink); font-family: var(--f-head); margin: 0 2px; } .side-fee .bx-lead { font-weight: 700; } .stick { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 14px rgba(87, 44, 13, .08); } /* 260929_05：上に判定の1行（うちの子が決まっているときだけ）、下にボタンの列 */ .stick-row { display: flex; gap: 8px; } .stick-go { flex: 1; min-width: 0; min-height: 50px; font-size: 15.5px; line-height: 1.25; padding-inline: 10px; border-radius: 12px; } .stick-tel { min-height: 50px; border-radius: 12px; } .heart-stick { position: static; flex: none; width: 50px; height: 50px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--brown); } .side-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .side-2 .btn-sub { font-size: 13px; padding: 0 6px; } .side-2 [aria-pressed="true"] { background: var(--orange-soft); border-color: var(--orange-line); } body.detail .ft { padding-bottom: 106px; } /* 260929_05：下の帯に判定の1行が入るぶん高く */ .box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 16px 14px; margin: 16px 0; box-shadow: var(--shadow); } .box > h2 { font-size: 1.15rem; margin: 0 0 12px; } .fit-detail { margin-bottom: 4px; } .notes { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13.5px; color: var(--ink-2); } .notes li::before { content: "ひとこと："; color: var(--ink-3); } .facts { margin: 0; } .fact { display: grid; grid-template-columns: 1fr; gap: 0 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); } .fact:last-child { border-bottom: 0; } @media (min-width: 520px) { .fact { grid-template-columns: 11em 1fr; } } .fact dt { font-size: 13.5px; font-weight: 700; color: var(--ink-2); } .fact dt small { display: block; font-weight: 400; font-size: 11.5px; color: var(--ink-3); } .fact dd { margin: 0; } .facts-compact .fact { grid-template-columns: 6.5em 1fr; padding: 5px 0; align-items: baseline; } @media (min-width: 520px) { .facts-compact .fact { grid-template-columns: 11em 1fr; } } .fees { width: 100%; border-collapse: collapse; font-size: 14px; } .fees th, .fees td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line-2); vertical-align: top; } .fees thead th { font-size: 12px; color: var(--ink-3); font-weight: 700; } .fees tbody th small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12px; } .fees td b { margin-right: 4px; } .feemine { background: var(--orange-soft); border-radius: var(--r-s); padding: 12px 14px; margin: 14px 0 6px; } .feemine-h { font-weight: 700; margin: 0 0 6px; color: var(--brown); } .feemine ul { list-style: none; margin: 0; padding: 0; } .feemine li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--orange-line); font-size: 14px; } .feemine li small { display: block; font-size: 11.5px; color: var(--ink-3); } .feemine-t { font-size: 1.05rem; margin: 10px 0 2px; } .feemine-t b { font-size: 1.35rem; color: var(--brown); } .feemine-no { color: var(--unk); font-weight: 700; } /* 交通費の目安（260912_06）。出発地を入れているときだけ出ます */ .tripcost { background: var(--line-2); border-radius: var(--r-s); padding: 12px 14px; margin: 10px 0 6px; } .tripcost ul { list-style: none; margin: 0; padding: 0; } .tripcost li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--line); font-size: 14px; } .tripcost li small { display: block; font-size: 11.5px; color: var(--ink-3); } .tripcost .feemine-t b { color: var(--ink); } .km-from { color: var(--ink-2); } /* 旅のこと（うちの子の画面の下。大人の人数。261020_03 から出発地は［どこで］の窓へ）*/ .triprow { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 12px; } .sheet-sub { font-size: 1rem; margin: 0 0 4px; color: var(--brown); } .triprow .fld { display: block; margin: 10px 0; } .triprow .fld > span { display: block; font-weight: 700; font-size: 14px; margin-bottom: 4px; } .triprow select.short { width: auto; min-width: 7em; } .rev + .rev { border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 14px; } .rev-m { font-size: 13px; color: var(--ink-2); margin: 0 0 8px; } .scores { width: 100%; border-collapse: collapse; font-size: 14px; } .scores th { text-align: left; font-weight: 400; color: var(--ink-2); padding: 4px 0; } .scores td { text-align: right; } .dots { color: var(--orange-2); letter-spacing: 2px; } /* ── 報告・文章 ── */ .rform { max-width: 640px; } .rform-f { margin: 0 0 12px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .okbox { background: var(--ok-bg); border-radius: var(--r); padding: 16px 18px; max-width: 640px; } .okbox p { margin: 4px 0; } .prose { max-width: 720px; } .prose h2 { font-size: 1.1rem; margin: 22px 0 6px; } .draft { background: var(--cond-bg); color: var(--cond); display: inline-block; padding: 2px 10px; border-radius: 6px; } /* ── さがす（260911_07）：上に固定の帯・全画面の絞り込み（パソコンは左の列）── */ .searchpage main { max-width: 1240px; } .lbar { position: sticky; top: var(--hd-h); z-index: 20; margin: 0 -16px; background: var(--card); border-bottom: 1px solid var(--line); box-shadow: 0 4px 10px rgba(87, 44, 13, .05); } .lbar-in { padding: 8px 12px 6px; } .where { margin-top: 0; } .lbar .where { min-height: 44px; text-decoration: none; color: var(--ink); background: var(--line-2); border: 0; font-size: 14px; gap: 6px; } .lbar .where b { color: var(--brown); font-size: 15px; } .lbar .where span { color: var(--ink-2); } .lbar .where .where-e { margin-left: auto; padding: 0 10px; font-size: 13px; color: var(--brown); text-decoration: underline; } /* 場所と種類の名前が長いとき（「ぜんぶのエリア のテーマパーク・遊園地」など）は1行のまま「…」で切る */ .lbar .where b, .lbar .where .where-e { white-space: nowrap; flex: none; } .lbar .where span:not(.where-e) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lbar .tools { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; margin: 8px 0 0; } .tool { white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 1.5px solid var(--line); background: var(--card); border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; cursor: pointer; position: relative; } .tool .cnt { background: var(--brown); color: #fff; border-radius: 9px; min-width: 20px; height: 20px; font-size: 12px; display: inline-grid; place-items: center; padding: 0 5px; } .tool[aria-pressed="true"] { background: var(--orange-soft); border-color: var(--orange-line); } .tool-sort select { border: 0; min-height: 40px; padding: 0 22px 0 2px; background-position: right 4px center; font-size: 14px; font-weight: 700; width: auto; max-width: 9.5em; background-color: transparent; } .lbar .hscroll { margin-top: 6px; } .spage { display: block; } .rh { font-size: 1.3rem; margin: 16px 0 4px; } .fitsum { margin: 0 0 6px; font-size: 13px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; } .fitsum > b { color: var(--ink); font-size: 15px; } .fs { white-space: nowrap; } .fs b { margin-right: 2px; } .fs-ok b { color: var(--ok); } .fs-cond b { color: var(--cond); } .fs-unk b { color: var(--unk); } .fs-ng b { color: var(--ng); } .nodogs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; background: var(--orange-soft); border-radius: var(--r-s); padding: 10px 12px; margin: 6px 0 4px; font-size: 13.5px; } .nodogs p { margin: 0; flex: 1 1 240px; } .grp { display: flex; align-items: center; gap: 8px; margin: 20px 0 8px; font-size: 16px; } .grp .cnt { font-family: var(--f-body); font-weight: 400; font-size: 13px; color: var(--ink-2); } .resmap { margin: 10px 0; } .sidemap { margin: 12px 0 4px; } .map-split { height: min(52vh, 420px); margin-top: 0; } .lwrap .lgrp .cards { margin-bottom: 4px; } .lbar-lite .where { cursor: pointer; } .fold { margin: 16px 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 0 12px; } .fold > summary { cursor: pointer; list-style: none; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; color: var(--ink-2); } .fold > summary::-webkit-details-marker { display: none; } .fold > summary::after { content: "見る ▾"; font-size: 13px; font-weight: 400; color: var(--brown); text-decoration: underline; } .fold[open] > summary::after { content: "とじる ▴"; } .fold[open] { padding-bottom: 12px; } .fold-unk { background: var(--unk-bg); } .zerobox { text-align: center; padding: 14px 8px 0; } .zero-art { width: 150px; margin: 0 auto; } .zerobox h2 { font-size: 1.15rem; margin: 6px 0 0; } .zerobox p { font-size: 13.5px; color: var(--ink-2); margin: 4px 0 0; } .relaxes { display: grid; gap: 8px; margin: 14px 0; } .relax-h { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-2); } .relax { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--brown); } .relax:hover { border-color: var(--orange-line); } .relax .plus { font-weight: 800; color: var(--ok); white-space: nowrap; } .oneoff { background: var(--cond-bg); border: 1px dashed var(--cond-line); border-radius: var(--r); padding: 4px 12px 14px; margin: 16px 0; } .oneoff .sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: var(--brown); } .oneoff .btn-sub { min-height: 40px; } /* 絞り込み：スマホは全画面の層。JavaScript が無ければ #flayer を開くと見える */ .flayer { display: none; } .flayer.open, .flayer:target { display: flex; position: fixed; inset: 0; z-index: 60; background: var(--card); flex-direction: column; } .fform { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; } .layer-hd { flex: none; display: grid; grid-template-columns: 92px 1fr 92px; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line); padding: 0 6px; } .layer-hd b { text-align: center; font-family: var(--f-head); color: var(--brown); font-size: 17px; } .layer-hd .l { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px; font-size: 14px; color: var(--ink); text-decoration: none; } .layer-hd .r { justify-self: end; font-size: 13.5px; color: var(--brown); padding: 0 8px; min-height: 44px; display: inline-flex; align-items: center; } .layer-bd { flex: 1; overflow-y: auto; padding: 4px 16px 20px; -webkit-overflow-scrolling: touch; } .fgroup { border: 0; margin: 0; padding: 14px 0 8px; border-bottom: 1px solid var(--line-2); min-width: 0; } .fgroup:last-child { border-bottom: 0; } .fgroup legend, .fgroup h3 { font-family: var(--f-head); font-weight: 700; color: var(--brown); font-size: 15.5px; padding: 0; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; } .fgroup .fi { width: 24px; height: 24px; } .fgroup .fld { margin-bottom: 8px; } .fgroup .note { margin: 0 0 6px; } .fo { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 0; border-bottom: 1px dashed var(--line-2); cursor: pointer; font-size: 15px; line-height: 1.4; } .fo:last-of-type { border-bottom: 0; } .fo input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--brown); cursor: pointer; } .fo .t { flex: 1; min-width: 0; } .fo .t small { display: block; font-size: 12px; color: var(--ink-2); } .fo .n { color: var(--ink-2); font-size: 13.5px; min-width: 2em; text-align: right; } .fo.on .t { font-weight: 700; color: var(--brown); } .fo.zero { color: var(--ink-3); } .fo.zero .n::after { content: "件"; } .seg-sm .seg-o span { min-height: 42px; font-size: 14px; } .layer-ft { flex: none; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--card); } .layer-ft .clr { font-size: 14px; color: var(--brown); padding: 0 6px; min-height: 44px; display: inline-flex; align-items: center; } .layer-ft .go { margin: 0; } /* ── フッター ── */ .ft { background: var(--brown); color: #F4E9DD; margin-top: 64px; position: relative; } .ft-dogs { position: absolute; left: 0; right: 0; top: -58px; max-width: 1240px; margin: 0 auto; padding: 0 16px; pointer-events: none; display: flex; justify-content: flex-end; align-items: flex-end; gap: 0; } .ft-dog-1 { width: 88px; } .ft-dog-2 { width: 64px; margin-bottom: 2px; } .ft-in { max-width: 1240px; margin: 0 auto; padding: 26px 16px 30px; } .ft-logo img { height: 110px; width: auto; display: block; margin: -14px 0 -10px -14px; } /* タグライン付き。余白ぶんを詰める */ .ft-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 10px; font-size: 14px; } .ft-nav a { min-height: 32px; display: inline-flex; align-items: center; } .ft a { color: #FFF6EC; } .ft-note { font-size: 12.5px; color: #D9C6B2; max-width: 640px; } .ft-copy { font-size: 12px; color: #BFA88F; margin: 6px 0 0; } /* 正直さの一文（仕様書 0.14 の 27章）。トップのいちばん下 */ .honest { max-width: 720px; margin: 28px auto 0; padding: 14px 16px; background: var(--orange-soft); border: 1px solid var(--orange-line); border-radius: var(--r); font-size: 13.5px; line-height: 1.8; color: var(--brown); } /* ── うちの子（下から出る画面）── */ /* 260929_09（本人の指摘「スマホで愛犬登録の上下が切れてしまう」）： 高さを vh で決めていたため、スマホでアドレスバーや下のツールバーが出ていると、窓が見えている範囲より高くなり、 上（見出し）と下（保存するボタン）がはみ出していました。見えている高さ（dvh）で決め、窓の中でスクロールします。 dvh を知らないブラウザは、上の 92vh を使います */ .sheet { border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius: 18px 18px 0 0; background: var(--card); color: var(--ink); box-shadow: 0 -8px 30px rgba(87, 44, 13, .25); } @media (min-width: 640px) { .sheet { margin: auto; border-radius: 18px; } } .sheet::backdrop { background: rgba(51, 38, 28, .45); } .sheet-in { padding: 18px 16px 0; } /* 260929_09：下の余白は、下のボタンの列（.sheet-foot）が持ちます */ .sheet h2 { margin: 0 0 4px; font-size: 1.25rem; } /* 261020_05：見出しと右上の ✕（［どこで］［条件］の窓と同じ形）。窓の中をスクロールしても、上に残る */ .sheet-hd { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -18px -16px 10px; padding: 8px 6px 8px 16px; background: var(--card); border-bottom: 1px solid var(--line-2); } .sheet-hd h2 { margin: 0; } .sheet-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); cursor: pointer; } .sheet-x:hover { background: var(--line-2); } .sheet-x .ic { width: 22px; height: 22px; stroke-width: 2.2; } /* 260929_09：窓の下の端ちょうどに貼りつけます（前は bottom: -16px で、「保存する」の下が16px はみ出していた）。iPhone の下の余白ぶん上げます */ .sheet-foot { position: sticky; bottom: 0; background: var(--card); display: flex; justify-content: flex-end; gap: 8px; padding: 12px 0 calc(14px + env(safe-area-inset-bottom)); margin-top: 8px; border-top: 1px solid var(--line-2); } .opts { display: grid; gap: 6px; } .opts-size { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); } .opts-n { grid-template-columns: repeat(4, 1fr); } .opt { position: relative; } .opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .opt span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); font-weight: 700; line-height: 1.3; padding: 6px 4px; } .opt small { font-size: 10.5px; font-weight: 400; color: var(--ink-3); } .opt .size-img { width: 46px; height: auto; margin: 2px 0 1px; } .opt input:checked + span { background: var(--orange-soft); border-color: var(--orange); color: var(--brown); box-shadow: inset 0 0 0 1px var(--orange); } .opt input:focus-visible + span { outline: 3px solid var(--orange-line); outline-offset: 2px; } .dogtabs { display: flex; gap: 6px; overflow-x: auto; margin: 10px -2px 0; padding: 2px 2px 6px; scrollbar-width: none; } .dogtabs::-webkit-scrollbar { display: none; } .dogtab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 14px 4px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; } .dogtab[aria-selected="true"] { background: var(--orange-soft); border-color: var(--orange); color: var(--brown); box-shadow: inset 0 0 0 1px var(--orange); } .dogtab:focus-visible { outline: 3px solid var(--orange-line); outline-offset: 2px; } .dogtab-add { padding: 4px 16px; border-style: dashed; color: var(--brown); background: transparent; } .dogrow { border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px; margin: 6px 0 10px; } .dogrow-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; } .dogrow-h b { color: var(--brown); } .dogrow .opts-size { grid-template-columns: repeat(5, 1fr); } .dogrow .opt span { min-height: 40px; font-size: 13px; padding: 6px 1px; } .dogrow .opt small { white-space: nowrap; font-size: 10px; letter-spacing: -.02em; } .dogrow-g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .dogrow-g .fld { margin: 0; } .dogrow-f { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 14px; } .dogrow-f label { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; } .dogrow-f input { width: 18px; height: 18px; accent-color: var(--orange-2); } .dogrow-n { margin: 4px 0 0; } /* 261001_02：発情中の説明（旅のことの欄から、犬ごとの欄へ移した） */ .dogdel { font-size: 13px; } .dogrow-h { justify-content: flex-start; } .dogrow-h .dogdel { margin-left: auto; } .dogrow-l { margin: 10px 0 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); } .breeds-wrap { margin: 6px 0 0; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--line-2); } .breeds-wrap > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0 12px; font-size: 14px; color: var(--brown); font-weight: 700; list-style: none; } .breeds-wrap > summary::-webkit-details-marker { display: none; } .breeds-wrap > summary::after { content: "▾"; margin-left: auto; color: var(--ink-3); } .breeds-wrap[open] > summary::after { content: "▴"; } .breeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; padding: 0 8px 8px; max-height: 300px; overflow-y: auto; } .breed { position: relative; } .breed input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .breed span { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 92px; justify-content: center; padding: 4px 2px 6px; background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; font-size: 11.5px; font-weight: 700; line-height: 1.25; text-align: center; color: var(--brown); } .breed img { width: 56px; height: 56px; object-fit: contain; } .breed input:checked + span { border-color: var(--orange-2); background: var(--orange-soft); box-shadow: inset 0 0 0 1px var(--orange-2); } .breed input:focus-visible + span { outline: 3px solid var(--orange-line); outline-offset: 1px; } .breed-none small { display: block; font-weight: 400; color: var(--ink-3); font-size: 10.5px; } .dogface { vertical-align: middle; margin-right: 6px; } /* 条件のアイコン・犬の顔（ChatGPT で作った絵。assets/img/icon/・face/） */ .fi { display: inline-block; vertical-align: -6px; margin-right: 6px; } .fo-ic { width: 30px; height: 30px; flex: none; } .face { display: inline-block; vertical-align: middle; } .h2-ic { vertical-align: -5px; margin-right: 7px; } .box > h2 small { display: inline-block; font-size: 13px; color: var(--ink-2); font-family: var(--f-body); font-weight: 400; } /* 折り返すときは、添え書きごと次の行へ */ /* ── 知らせ（保存しました など）── */ .toast { position: fixed; left: 50%; bottom: 84px; z-index: 60; transform: translate(-50%, 12px); margin: 0; max-width: calc(100vw - 32px); width: max-content; background: rgba(51, 38, 28, .92); color: #fff; font-size: 14px; padding: 10px 16px; border-radius: 12px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; } .toast.on { opacity: 1; transform: translate(-50%, 0); } /* くらべるの数（パソコンの右下） */ .cmptray { display: none; } /* ── 保存した施設・くらべる（/favorites/。260912_02）── */ .favpage .phead h1 .ic { color: var(--orange-2); fill: var(--orange-2); } .cmp-hint { background: var(--orange-soft); border-radius: var(--r-s); padding: 10px 12px; font-size: 14px; } .cmp-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); -webkit-overflow-scrolling: touch; } .cmp-scroll:focus-visible { outline: 3px solid var(--orange-line); } .cmp-t { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 520px; font-size: 13.5px; } .cmp-t th, .cmp-t td { padding: 9px 10px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; } .cmp-t thead th { background: var(--line-2); min-width: 170px; } .cmp-t thead th a { color: var(--brown); font-weight: 700; } .cmp-t thead th .cmp-off { display: block; font-size: 12px; min-height: 32px; padding: 0; margin-top: 2px; } .cmp-t th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--card); width: 7.5em; min-width: 7.5em; font-size: 12.5px; color: var(--ink-2); font-weight: 700; box-shadow: 1px 0 0 var(--line); } .cmp-t thead th:first-child { position: sticky; left: 0; z-index: 2; } .cmp-why { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-2); } .cmp-fit td { background: #FFFCF7; } .szm { display: flex; flex-wrap: wrap; gap: 2px 8px; } .szm span { white-space: nowrap; font-size: 12.5px; } .szm b { margin-left: 2px; } .szm-y b { color: var(--ok); } .szm-c b { color: var(--cond); } .szm-n b { color: var(--ng); } .szm-u b { color: var(--unk); } .pv-y i { color: var(--ok); } .pv-c i { color: var(--cond); } .pv-u i { color: var(--unk); } .pv-n { color: var(--ink-3); } .pv i { font-style: normal; font-weight: 800; margin-right: 3px; } .heart-ex { display: inline-grid; vertical-align: -5px; color: var(--orange-2); } @media (min-width: 700px) { .cmp-scroll-hint { display: none; } } /* ══ タブレット・パソコン ══ */ @media (min-width: 760px) { .logo img { height: 58px; } /* せまい画面では、うちの子のボタンに場所をゆずって少し小さくしています */ /* トップ（タブレットから）：上にひとこと、その下の左に写真（16:9）、右にさがす箱。写真と箱は重ねない */ .top { margin: 0; padding-top: 16px; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "ph box" "lead lead"; column-gap: 20px; align-items: start; } .top-ph .photo { border-radius: 18px; } .top-tx { border-radius: 0 0 18px 18px; padding: 46px 20px 16px; } .top-ph .ph-cap { right: 14px; top: 10px; } .top-h { margin: 0 0 6px; font-size: 1.5rem; } .top-sub { margin: 0; max-width: 42em; font-size: 13px; } /* 260912_18（案A）：右の「何をしますか？」を、左の絵と同じ高さまで伸ばします。 260912_15 は3つを横に並べていたので、絵の右下に190pxほどの空白が出ていました。 */ .top > .picker { align-self: stretch; display: flex; flex-direction: column; margin-top: 0; } .top .picker-3 { grid-template-columns: minmax(0, 1fr); flex: 1; } .top .picker-o { flex-direction: row; justify-content: flex-start; text-align: left; gap: 14px; padding: 10px 18px; min-height: 0; } .top .picker-i { flex: none; } .top .picker-t { flex: 1; } .top .picker-o[data-last]::after { flex: none; } .sbox { margin: 0; padding: 14px 14px 16px; } .top > .lead { grid-column: 1 / -1; padding: 0; } .lbar { margin: 0 -16px; } } @media (min-width: 1000px) { :root { --hd-h: 64px; } .hd-in { padding: 0 24px; gap: 14px; } .hd-pl { display: flex; gap: 2px; } .hd-pl a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 12px; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 15px; } .hd-pl a:hover { background: var(--line-2); } .hd-pl a.on { background: var(--orange-soft); color: var(--brown); } .hd-q { display: block; flex: 0 1 340px; } .hd-q-l { display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 4px 0 10px; background: var(--card); } .hd-q-l .ic { color: var(--ink-3); } .hd-q-l .clr { flex: 1; } .hd-q input[type] { border: 0; min-height: 42px; padding: 0 4px; background: transparent; } .hd-search { display: none; } .dogchip { max-width: 360px; } main { padding: 0 24px 48px; } .crumbs { padding: 10px 24px 0; } /* トップ：上にひとこと、その下の左に写真（16:9）、右にさがす箱。写真と箱は重ねない */ .top { grid-template-columns: minmax(0, 1fr) 460px; column-gap: 28px; padding-top: 20px; } .top-h { margin: 0 0 8px; font-size: 2.1rem; } .top-sub { font-size: 14.5px; } .top-tx { padding: 60px 26px 22px; } .sbox { padding: 16px 18px 18px; } .tcards { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0 6px; } .tcard { width: calc((100% - 30px) / 4); } /* さがす：左に条件の列、右に一覧 */ .lbar { margin: 0 -24px; } .lbar-in { max-width: 1240px; margin: 0 auto; padding: 8px 24px 6px; display: grid; grid-template-columns: 300px auto minmax(0, 1fr); gap: 10px; align-items: center; } .lbar .tools { margin: 0; display: flex; } .lbar .tool-f { display: none; } .lbar .hscroll { margin: 0; flex-wrap: wrap; overflow: visible; } .spage { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; align-items: start; } .flayer, .flayer.open, .flayer:target { display: block; position: sticky; top: calc(var(--hd-h) + 70px); inset: auto; z-index: 1; max-height: calc(100vh - var(--hd-h) - 90px); overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); margin-top: 16px; } .fform { height: auto; } .layer-hd { grid-template-columns: 1fr auto; padding: 0 8px 0 16px; } .layer-hd .l { display: none; } .layer-hd b { text-align: left; } .layer-bd { overflow: visible; padding: 0 16px 8px; } .fo { min-height: 42px; font-size: 14.5px; } .layer-ft { position: sticky; bottom: 0; } .js .layer-ft { display: none; } .results .list { grid-template-columns: 1fr 1fr; } /* 地図を並べる：左の条件・まんなかの一覧・右の地図（地図はスクロールしても出したまま） */ .spage.split { grid-template-columns: 270px minmax(0, 1fr) minmax(0, 40%); } .split .sidemap { grid-column: 3; grid-row: 1; position: sticky; top: calc(var(--hd-h) + 74px); margin: 16px 0 0; } .split .map-split { height: calc(100vh - var(--hd-h) - 110px); } .split .results .list { grid-template-columns: 1fr; } .lbar-lite .lbar-in { grid-template-columns: 300px auto minmax(0, 1fr); } .lbar-lite .tool-f { display: flex; } .card .cmp { display: inline-flex; } .cmptray { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 999px; background: var(--brown); color: #fff; text-decoration: none; box-shadow: 0 6px 20px rgba(51, 38, 28, .3); font-size: 14px; } .cmptray[hidden] { display: none; } .cmptray b { font-size: 16px; } .cmptray-go { font-weight: 700; color: var(--orange); } /* 施設ページ：右に答えの箱（スクロールしても出したまま）。下の固定の帯は出さない */ .dt2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; } .dt2-side { display: block; position: sticky; top: calc(var(--hd-h) + 16px); margin-top: 18px; } .jump { margin: 14px 0 0; padding: 6px 0; } .stick { display: none; } body.detail .ft { padding-bottom: 0; } .rh { margin-top: 18px; } } /* タブレットの幅は、写真を横いっぱいに使って高さをかせぎます（せまい列に重ねると、犬が帯に隠れるため） */ @media (min-width: 760px) and (max-width: 1099px) { .top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ph" "box" "lead"; } .top > .picker { align-self: auto; display: block; margin-top: 16px; } .top .picker-3 { grid-template-columns: repeat(3, 1fr); } .top .picker-o { flex-direction: column; justify-content: center; text-align: center; padding: 16px 8px 14px; gap: 6px; } .top .picker-t { flex: none; } .top-h { font-size: 1.9rem; } .top-sub { font-size: 14px; } .top-tx { padding: 56px 24px 18px; } } /* ── 広告（アフィリエイト）のリンクは、見て分かるようにします（260913_03。CLAUDE.md 4章の7）── */ .pr-mark { display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; vertical-align: 2px; background: rgba(255, 255, 255, .26); border: 1px solid rgba(255, 255, 255, .5); } .btn-sub .pr-mark { background: var(--line-2); border-color: var(--line); color: var(--ink-3); } .pr-note { margin: 6px 2px 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); } .pr-note b { color: var(--ink-2); } .btn-rakuten { margin-top: 8px; } /* ── 予約のボタン（260930_02。本人「ボタンが2行になってたり矢印が細かったり」）── 予約先の名前を小さく上に、「空室・料金を見る」を大きく下に。矢印と PR は右はしにまとめます。 名前が長くても（リゾートグランピングドットコム）、折り返しで崩れず、はじめから2段に見えるようにしています。 */ .btn-book { justify-content: space-between; gap: 10px; min-height: 58px; padding: 8px 16px 8px 24px; text-align: left; } .bk-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .bk-site { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; opacity: .82; overflow-wrap: anywhere; } .bk-main { font-size: 17px; font-weight: 800; white-space: nowrap; } .bk-end { display: inline-flex; align-items: center; gap: 8px; flex: none; } .bk-end .pr-mark { margin-left: 0; vertical-align: 0; } .ic-out { width: 20px; height: 20px; stroke-width: 2.8; } .btn-sub .ic-out { width: 16px; height: 16px; stroke-width: 2.4; } .stick-go.btn-book { padding: 6px 10px 6px 14px; gap: 6px; } .stick-go .bk-site { font-size: 11.5px; } .stick-go .bk-main { font-size: 15px; } .stick-go .ic-out { width: 18px; height: 18px; } /* ── 写真の上の「柱の絵」（260913_06。本人の指摘）── 柱の絵は色の付いた画像なので、文字のように白くできません。 草の緑・空の青にそのまま置くと溶けこんでしまうので、白い丸にのせて浮かせます。 */ .top-h .ic-pl { background: #fff; border-radius: 999px; padding: 3px; box-shadow: 0 1px 8px rgba(38, 24, 12, .45); } /* ── 右上の「うちの子を選ぶ」が切れないように（260913_06）── 文字が「うちの子登録」より1文字ぶん長くなったので、せまい画面ではロゴを少しだけ小さくして場所をゆずります。 */ @media (max-width: 430px) { .logo img { height: 46px; } .dogchip:not(.has-dogs) { gap: 4px; padding: 0 9px; } /* うちの子を選ぶ前は、肉球の絵をはずして文字だけにします（絵が無くても意味は変わりません） */ .dogchip:not(.has-dogs) .ic { display: none; } } /* ── その日の空きと料金（260913_06。本人の指示 ⑦のB）── */ .plan { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 8px 0 10px; } .plan-ask { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; } .plan-ask .fld { margin: 0; } .plan-who { margin: 0; font-size: 13.5px; color: var(--ink-2); } .plan-who-e { display: block; font-size: 11.5px; color: var(--ink-3); } .plan-out:not(:empty) { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); } .plan-h { margin: 0 0 4px; font-size: 13.5px; color: var(--ink-2); } .plan-sum { margin: 0 0 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .plan-sum b { font-family: var(--f-head); font-size: 26px; color: var(--brown); } .plan-sum small { font-size: 12px; color: var(--ink-3); } .plan-room { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); } .plan-name { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; } .plan-note { margin: 6px 0 0; font-size: 12.5px; color: var(--cond); } .plan-ng { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; } /* ── しおり（/shiori/。260913_14） ───────────────────────────── */ html.js .js-off { display: none !important; } .sh-spots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .sh-spot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); } .sh-spot.is-in { background: var(--orange-soft); border-color: var(--orange-line); } .sh-spot-in { min-width: 0; display: grid; gap: 2px; } .sh-add { display: flex; gap: 6px; } .sh-add .btn-sub { min-height: 40px; font-size: 13px; padding: 0 12px; } .mpin-no { background: var(--brown); color: #fff; } .sh-mochi-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .sh-mochi-list label { display: flex; gap: 8px; align-items: center; min-height: 36px; font-size: 14px; cursor: pointer; } .btn-shiori { display: flex; gap: 6px; align-items: center; justify-content: center; } .sh-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .sh-line .pb { flex: 0 0 auto; } /* 犬種の注意（260913_16）。うちの子の犬種が、宿の制限に当たるとき。色だけにせず、印と言葉でも分かるように */ .breed-warn { margin: 10px 0; padding: 10px 12px; border: 2px solid var(--ng-line); border-radius: var(--r-s); background: var(--ng-bg); color: var(--ink); font-size: 14px; line-height: 1.6; } .breed-warn::before { content: "⚠ "; color: var(--ng); font-weight: 800; } .breed-warn b { color: var(--ng); } .breed-warn-s { margin: 8px 0; padding: 6px 10px; font-size: 13px; color: var(--ng); font-weight: 700; } /* ── わたしの旅（260917_13。docs/旅の準備_段階1_計画.md）──────────────── */ /* ヘッダー：ハート（保存）を「わたしの旅」に。せまい画面は絵と数だけ */ .minechip { width: auto; display: inline-flex; gap: 5px; padding: 0 12px; font-size: 14px; font-weight: 700; } .minechip .mine-ic { width: 22px; height: 22px; } .minechip[aria-current="page"] { background: var(--orange-soft); border-color: var(--orange-line); } @media (max-width: 599px), (min-width: 1000px) and (max-width: 1199px) { .minechip { width: 44px; padding: 0; justify-content: center; } .minechip .mine-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* パソコンの幅でも、「泊まる・食べる・遊ぶ」の文字を折り返さない（せまいときは検索の欄と、うちの子の札のほうを縮める） */ @media (min-width: 1000px) { .hd-pl { flex: none; } .hd-pl a { white-space: nowrap; } .hd-q { min-width: 150px; } .dogchip { min-width: 0; } } /* 施設ページ：分かっている項目 */ .known { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-2); } .known b { color: var(--ink); } .known small { display: block; font-size: 12.5px; color: var(--ink-3); } /* しおり：状態・泊まる日・知らせの帯 */ .sh-st { display: flex; flex-wrap: wrap; gap: 6px; } .sh-stb { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; } .sh-stb[aria-pressed="true"] { background: var(--brown); border-color: var(--brown); color: #fff; } .sh-when { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; } .sh-when .fld { margin: 0; } .sh-when input[type="date"], .sh-when select { min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font: inherit; font-size: 16px; color: var(--ink); } .sh-saved { margin: 0; } .sh-bar { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--cond-bg); border: 1px solid var(--cond-line); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 700; } .sh-bar[hidden] { display: none; } .sh-bar-ng { background: var(--ng-bg); border-color: var(--ng-line); font-weight: 400; } /* しおり：旅前チェック */ .sh-prep, .sh-know { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .sh-prep label { display: flex; gap: 8px; align-items: flex-start; min-height: 40px; padding: 4px 0; font-size: 14px; cursor: pointer; } .sh-prep input { margin-top: 3px; flex: none; } .sh-prep small, .sh-know small { display: block; font-size: 12.5px; color: var(--ink-2); } .sh-where { color: var(--ink-3) !important; } .sh-know li { position: relative; padding-left: 14px; font-size: 14px; line-height: 1.6; } .sh-know li::before { content: ""; position: absolute; left: 3px; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); } .sh-ask { border-top: 1px solid var(--line-2); padding: 8px 0; } .sh-ask-h { margin: 0 0 4px; font-weight: 700; font-size: 14px; } .sh-ask-h small { font-weight: 400; color: var(--ink-3); } .sh-ask ol { margin: 0 0 6px; padding-left: 1.3em; font-size: 14px; line-height: 1.6; } .sh-ask-b { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .sh-asked { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 14px; cursor: pointer; } .sh-need { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--cond-bg); color: var(--cond); } /* わたしの旅のページ */ .mine-warn { margin: 8px 0 0; } .mine .sec h3 { margin: 14px 0 6px; font-size: 15px; color: var(--ink-2); } .mine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .mine-card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; } .mine-card p { margin: 4px 0; } .mine-card-next { border-color: var(--orange-line); } .mine-name { font-weight: 700; font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .mine-st { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 4px; border: 1px solid var(--line); background: var(--line-2); color: var(--ink-2); } .mine-st-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); } .mine-st-done { background: var(--card); color: var(--ink-3); } .mine-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--ink-2); } .mine-when b { color: var(--brown); margin-left: 4px; font-variant-numeric: tabular-nums; } .mine-todo { font-size: 14px; } .mine-todo b { color: var(--cond); } .mine-todo-ok { color: var(--ok); } .mine-past { padding: 6px 10px; border-radius: 6px; background: var(--cond-bg); font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .mine-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .mine-dogs { margin: 0 0 8px; padding-left: 1.2em; } .sh-jump { margin: 0; font-size: 14px; } .sh-jump b { color: var(--cond); margin-left: 4px; } @media (min-width: 900px) { .mine .sec { max-width: 820px; } } /* ── しおりが主役（260917_14。docs/しおりを主役にする_計画.md）──────────── */ .sh-names { display: grid; gap: 8px 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .sh-names .fld { margin: 0; } .sh-names input, .sh-names select { width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font: inherit; font-size: 16px; color: var(--ink); } .sh-stay .sh-staybox, .sh-candc { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; } .sh-staybox { border-color: var(--stay); } .sh-stayname { margin: 0 0 6px; font-weight: 700; font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .sh-stayname small { font-weight: 400; font-size: 13px; color: var(--ink-2); } .sh-fit small { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-2); } .sh-fitline { margin: 0 0 6px; font-size: 14px; display: grid; gap: 4px; } .sh-book { display: grid; gap: 6px; margin: 6px 0; } .sh-stayacts { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .sh-cands { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; } @media (min-width: 900px) { .sh-cands { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } } .sh-row-btn .sh-mv select { min-height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font: inherit; font-size: 13px; } .sh-add select { min-height: 40px; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font: inherit; font-size: 14px; } .side-few { margin: 4px 0 0; } .mine-stay { font-size: 14px; color: var(--ink-2); } /* しおりをつくる */ .shnew { display: grid; gap: 12px; max-width: 640px; margin: 12px 0 24px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; } .shnew .fld { margin: 0; } .shnew select, .shnew input { width: 100%; min-height: 46px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fffdf9; font: inherit; font-size: 16px; color: var(--ink); } .shnew-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .shnew-go { margin: 0; } /* 施設ページの「しおりに入れる」の窓 */ .tripsheet-f { margin: 0 0 10px; font-weight: 700; } .tripsheet h3 { margin: 14px 0 6px; font-size: 15px; } .tripsheet-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .tripsheet-l li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); } .tripsheet-l small { display: block; font-size: 12.5px; color: var(--ink-2); } .tripsheet-b { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .tripsheet-l .btn-sub, .tripsheet-l .note { white-space: nowrap; flex-shrink: 0; } .tripsheet-b select { min-height: 40px; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font: inherit; font-size: 14px; } /* ── 行き・帰り（260917_15。docs/道中の休憩と寄り道_計画.md）──────────────── */ .dr-from { display: grid; gap: 8px; margin: 0 0 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); } .dr-fromline { margin: 0; font-size: 15px; } .dr-fromset { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; } .dr-q { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; flex: 1 1 260px; } .dr-q .fld { margin: 0; flex: 1 1 180px; } .dr-q input[type] { width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; background: #fffdf9; } .dr-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .dr-hit { width: 100%; min-height: 44px; padding: 6px 10px; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; } .dr-hit small { display: block; font-size: 12px; color: var(--ink-2); } .dr-routes { display: grid; gap: 6px; margin: 0 0 10px; } .dr-route { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; } .dr-route.is-on { border-color: var(--orange-line); background: var(--orange-soft); } .dr-route input { width: 20px; height: 20px; accent-color: var(--brown); flex: none; } .dr-route b { display: block; font-size: 15px; } .dr-route small { display: block; font-size: 13px; color: var(--ink-2); } .dr-legs { list-style: none; margin: 0 0 8px; padding: 0 0 0 14px; border-left: 3px solid var(--orange-line); display: grid; gap: 2px; font-size: 14px; } .dr-pt { font-weight: 700; color: var(--brown); } .dr-hw { color: var(--ink); padding-left: 10px; } .dr-lo { color: var(--ink-2); padding-left: 10px; font-size: 13px; } .dr-tabs { margin-top: 14px; } .dr-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; } .dr-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); } .dr-item > * { grid-column: 1; margin: 0; } .dr-item .dr-act { grid-column: 2; grid-row: 1 / span 3; } .dr-item-h b { font-size: 15px; } .dr-dir { font-size: 13px; color: var(--ink-2); } .dr-rest { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 4px; background: var(--brown); color: #fff; } .dr-meta { font-size: 13px; color: var(--ink-2); } .dr-eqs { display: flex; flex-wrap: wrap; gap: 4px; } .dr-eq { font-size: 12.5px; padding: 1px 8px; border-radius: 4px; border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); } .dr-eq-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); font-weight: 700; } .dr-eq-unk { background: var(--unk-bg); border: 1px dashed var(--unk-line); color: var(--unk); } .dr-in { font-size: 13px; font-weight: 700; color: var(--ok); white-space: nowrap; } .dr-act .btn-sub { min-height: 40px; font-size: 13px; padding: 0 12px; white-space: nowrap; } @media (max-width: 479px) { .dr-item { grid-template-columns: 1fr; } .dr-item .dr-act { grid-column: 1; grid-row: auto; margin-top: 4px; } } .dr-map { height: 340px; border-radius: var(--r-s); overflow: hidden; border: 1px solid var(--line); } .mpin-sa { background: #fff; color: var(--brown); border: 2px solid var(--brown); } .dr-src { font-size: 12px; } .sh-legtag { display: inline-block; font-size: 12px; font-weight: 700; padding: 0 6px; border-radius: 4px; background: var(--orange-soft); color: var(--brown); border: 1px solid var(--orange-line); } /* しおりの大きなボタン（260918_02 から。261001_01 でトップの「しおりを主役に」の指定は外しました） */ .top-go { margin: 2px 0 0; } .btn-go { min-height: 56px; padding: 0 30px; font-size: 17px; } .areabox { border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); margin: 0 0 8px; } .areabox > summary { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 12px; cursor: pointer; font-weight: 700; color: var(--brown); font-family: var(--f-head); } .areabox > summary small { font-family: var(--f-body); font-weight: 400; color: var(--ink-2); font-size: 13px; } .areabox > summary::marker { color: var(--orange-2); } .areabox > summary::after { content: "開く"; margin-left: auto; font-size: 13px; font-weight: 400; color: var(--ink-2); } .areabox[open] > summary::after { content: "とじる"; } .areabox .areah { margin: 6px 12px 8px; } .areabox .areas { padding: 0 12px 12px; } .areabox-in { padding: 0 0 4px; } .areabox-in .areah { margin: 10px 12px 6px; } .areabox-in .areah:first-child { margin-top: 2px; } /* 260918_03：依頼書09の写真とアイコン */ .shnew-photo { max-width: 560px; margin: 0 0 12px; } .shnew-photo img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-s); display: block; } .dr-fromline { display: flex; align-items: center; gap: 6px; } .sh-drive h3.sub { display: flex; align-items: center; gap: 6px; } .dr-eq { display: inline-flex; align-items: center; gap: 4px; } .dr-eq-ic { width: 16px; height: 16px; flex: none; } /* 人の宿泊料金のスライド（260922_01） */ .fld-range { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .fld-range > span { flex: 0 0 auto; } .fld-range input[type="range"] { flex: 1 1 10rem; min-width: 8rem; accent-color: var(--orange, #FC9829); } .fld-range output { flex: 0 0 auto; font-weight: 700; min-width: 6.5em; text-align: right; } /* その日の本当の料金（260922_02） */ .prc-none { display: inline-block; margin-left: .4em; font-size: .9em; color: var(--muted, #666); } .card.plan-done .prc-sum b { color: var(--brown, #572C0D); } /* ── お出かけコース（260925_02）。飾りは足さず、順番と車での時間だけを線で見せる ── */ .chead { padding: 16px 0 8px; display: grid; gap: 8px; } .chead h1 { margin: 0; font-size: 24px; line-height: 1.35; text-wrap: balance; } .chead-meta { margin: 0; font-size: 13px; color: var(--ink-2); } .chead .lead { margin: 0; } .chead-act { display: grid; gap: 6px; justify-items: start; } .cmsg { margin: 0; font-size: 13px; color: var(--ink-2); } .cday { margin: 20px 0 8px; } .cday h2 { font-size: 19px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--line); } .ctl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .cstop { position: relative; padding-left: 36px; } .cstop-n { position: absolute; left: 0; top: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .cstop .card { max-width: 560px; } .cleg { padding: 2px 0 2px 36px; font-size: 13px; color: var(--ink-2); } .cleg span { display: inline-block; border-left: 3px dotted var(--line); padding: 4px 0 4px 10px; margin-left: -23px; } .cnote { margin: 0 0 6px; font-size: 13.5px; line-height: 1.6; } .cstay { padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--line-2); } .cstay h3 { margin: 0 0 4px; font-size: 16px; } .cstay > p { margin: 0 0 8px; font-size: 13.5px; } .cstay .more { margin: 8px 0 0; } .cavoid ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; } .cfoot .note { margin: 4px 0; } .clist { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .clist a { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; color: var(--ink); background: #fff; } .clist-meta { font-size: 12.5px; color: var(--ink-2); } .clist-t { font-size: 17px; font-weight: 700; } .clist-s { font-size: 13px; color: var(--ink-2); line-height: 1.5; } /* 260929_01：検索結果の「もっと見る（次の30件・残り◯件）」 */ .more-wrap { margin: 18px 0 6px; text-align: center; } .more-wrap .more { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 260px; min-height: 52px; } .more-wrap .more small { font-size: 12.5px; font-weight: 700; } .more-wrap .more[aria-busy="true"] { opacity: .6; pointer-events: none; } /* 260929_02：ことばでさがす（トップの欄と、結果の「こう読みました」） */ .nlbox { display: grid; gap: 6px; } .nl-in { display: flex; gap: 8px; align-items: stretch; } .nl-in input[type="search"] { flex: 1; min-width: 0; min-height: 50px; font-size: 16px; } .nl-go { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 50px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--orange); color: var(--brown); font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 2px 0 var(--orange-2); } .nl-go:hover { background: var(--orange-2); } .nlread { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); } .nlread-h { margin: 0 0 6px; font-weight: 700; font-size: 14px; } .nlread-chips { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; } .nlread-no { margin: 8px 0 0; font-size: 13px; color: var(--cond); } /* 261020_04：誤字を直して探したとき（［打ったまま探す］つき）・上の帯の欄で0件のときの「もしかして」 */ .nlread-fix { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); } .nlread-fix a { margin-left: 4px; } .maybe { margin: 12px 0; } .maybe-h { margin: 0 0 6px; font-weight: 700; color: var(--brown); } .nlread .note { margin: 6px 0 0; } /* 260929_03：ことばで探したとき、名前が当てはまる施設（結果のいちばん上） */ .nlnames { margin: 0 0 14px; } /* ── 260929_05：使い勝手の改善 段2（スマホの施設ページ）── */ /* 判定の箱のすぐ下の「しおりに入れる」「くらべるに入れる」（パソコンは右の箱にあるので出しません） */ .dt-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; } .dt-act { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 8px; white-space: nowrap; } /* 261001_02：「くらべるに入れる」が2行になっていた */ @media (max-width: 374px) { .dt-act { font-size: 13px; } } @media (max-width: 359px) { .dt-act { padding: 0 4px; font-size: 12px; } } .dt-act[aria-pressed="true"] { background: var(--orange-soft); border-color: var(--orange-line); } .dt-cmpsee { flex-basis: 100%; font-size: 13px; } .dt-cmpsee[hidden] { display: none; } @media (min-width: 1000px) { .dt-acts { display: none; } } /* 下の帯の判定の1行 */ .stick-fit { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; line-height: 1.4; color: var(--ink-2); } .stick-fit[hidden] { display: none; } .stick-fit .sf-s { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid; font-size: 13px; } .stick-fit .sf-ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); } .stick-fit .sf-cond { color: var(--cond); background: var(--cond-bg); border-color: var(--cond-line); } .stick-fit .sf-ng { color: var(--ng); background: var(--ng-bg); border-color: var(--ng-line); } .stick-fit .sf-unk { color: var(--unk); background: var(--unk-bg); border-color: var(--unk-line); border-style: dashed; } .stick-fit .sf-v { font-weight: 700; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stick-fit .sf-ask { margin-left: auto; white-space: nowrap; } /* お金のこと・しおり：予約のボタンにしなかった、ほかの予約サイト */ .book-others { margin: 12px 0 0; font-size: 13px; line-height: 1.8; color: var(--ink-2); } .book-others .pr-mark { margin-left: 4px; } /* さがした大きさ（検索の画面・施設ページの判定の箱） */ .tmpdogs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); font-size: 13.5px; } .tmpdogs[hidden] { display: none; } .pbox-tmp { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; } /* ── 260929_06：使い勝手の改善 段3（しおりの作り方）── */ /* しおりから一覧へ出て、宿を選んでいるときの帯（trips.js） */ .pickbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 10px 0 0; padding: 10px 14px; border: 1px solid var(--orange-line); border-radius: var(--r-s); background: var(--orange-soft); font-size: 14px; line-height: 1.6; } .pickbar p { margin: 0; } .pickbar-b { display: flex; gap: 8px; flex-wrap: wrap; } /* しおりの中の「行き先の宿」 */ .sh-nearstays { margin: 14px 0 10px; } .sh-nearstays .sh-why { color: var(--ink-2); } /* 近くの候補の「すべて・食べる・遊ぶ」 */ .sh-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; } .sh-kinds[hidden] { display: none; } .sh-kinds .chip { min-height: 38px; padding: 0 14px; font-size: 13.5px; font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; } .sh-kinds .chip.on { color: #fff; background: var(--brown); border-color: var(--brown); } /* しおりをつくる：3つの入口 */ .shnew-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 24px; align-items: start; } .shnew-way h2 { margin-top: 0; } .shnew-course { margin: -4px 0 10px; font-size: 13.5px; line-height: 1.7; } .shnew-course[hidden] { display: none; } /* ── 260929_07：使い勝手の改善 段4（検索の画面）── */ /* スマホで下へスクロールしているあいだは、上の帯の札の列をしまう（search.js・list.js） */ .lbar.lbar-mini .hscroll { display: none; } /* 一覧の上に案内があるページでは、カードごとの「うちの子を選ぶと…」を出さない（空の行は詰める） */ .verdict-none:empty { display: none; } /* 絞り込みの層：はじめの群のほかは畳む */ .fgroup-fold > summary { display: flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--f-head); font-weight: 700; font-size: 15.5px; color: var(--brown); cursor: pointer; list-style: none; } .fgroup-fold > summary::-webkit-details-marker { display: none; } .fgroup-fold > summary::after { content: "＋"; margin-left: auto; color: var(--ink-3); font-weight: 400; } .fgroup-fold[open] > summary::after { content: "−"; } .fgroup-fold > summary .cnt { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brown); color: #fff; font-size: 12px; } /* ことばでさがした文を、結果の画面で直す */ .nlfix { display: flex; gap: 8px; margin: 10px 0 4px; } .nlfix input[type] { flex: 1; min-width: 0; min-height: 44px; } /* 同じ条件のまま、近くのエリア */ .relaxes-near { margin-top: 8px; } .nlfix .btn-sub { flex: none; white-space: nowrap; } /* ── 260929_08：使い勝手の改善 段5（渡す・予約メモ・くらべる表の予約・送る）── */ .dt-acts .dt-act-s { flex: 0 0 56px; } /* しおりを渡す */ .sh-share { margin: 8px 0 0; } .sh-shareurl { margin: 10px 0; padding: 8px 10px; font-size: 12px; line-height: 1.5; word-break: break-all; max-height: 6.2em; overflow: auto; background: var(--line-2); border-radius: var(--r-s); color: var(--ink-2); } .sh-sharebtns { display: flex; flex-wrap: wrap; gap: 8px; } /* 見るだけのしおり：直す部品は出さない */ .sh-view .sh-row-btn, .sh-view .sh-addmemo, .sh-view .sh-add, .sh-view .sh-stayacts, .sh-view .sh-st, .sh-view .dr-fromset, .sh-view [data-sh-stays-box], .sh-view [data-sh-pick], .sh-view .sh-share, .sh-view .sh-tip, .sh-view .sh-bookmemo, .sh-view .sh-kinds, .sh-view [data-sh-uncand], .sh-view [data-sh-decide], .sh-view .sh-mochi input { display: none !important; } .sh-view .sh-memo { border-color: transparent; background: transparent; padding-left: 0; } .sh-view .phead .lead, .sh-view [data-sh-saved] { display: none; } /* 「この端末だけに保存します」は、見るだけのときは当たらない */ .sh-view .sh-memo:placeholder-shown { display: none; } /* 予約メモ */ .sh-bookmemo { margin: 10px 0 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); } .sh-bookmemo > summary { min-height: 40px; display: flex; align-items: center; font-weight: 700; cursor: pointer; } .sh-bm { margin-top: 8px; } .sh-bm .fld { margin: 0; } .sh-bm textarea { display: block; width: 100%; min-height: 120px; resize: vertical; } .sh-bm textarea::placeholder { color: var(--ink-3); opacity: 1; } /* ── 260929_09：使い勝手の改善 段6（言葉と表示の細部）── */ /* 特集・エリアの一覧：30件ずつ（list.js が hidden を付けます） */ .cards > [data-card][hidden] { display: none !important; } /* 予約ボタンのすぐ上の1行 */ .book-note { margin: 0 0 6px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); } /* 上の帯：「さがす」「わたしの旅」の絵に、短い文字を添える（スマホでは絵の下に小さく） */ .hd-search { gap: 4px; } @media (max-width: 999px) { .hd-search { width: auto; padding: 0 12px; } } @media (max-width: 599px) { .minechip, .hd-search { flex: none; width: 50px; height: 46px; padding: 3px 0 0; border-radius: 12px; flex-direction: column; justify-content: center; gap: 1px; } .minechip .mine-t { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 9.5px; line-height: 1.1; font-weight: 700; white-space: nowrap; } .hd-search .hd-lbl { font-size: 9.5px; line-height: 1.1; font-weight: 700; } .minechip .mine-ic { width: 20px; height: 20px; } } /* ── 260929_11：覚えた条件（N4）── */ .saveq { margin: -4px 0 10px; } .saveq .btn-ghost[aria-pressed="true"] { color: var(--ok); } .savedq { margin: 10px 0 0; } .savedq[hidden] { display: none; } .savedq-h { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); } .savedq-l { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .savedq-l li { display: inline-flex; align-items: center; gap: 4px; } .savedq-l a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--brown); font-size: 13.5px; font-weight: 700; text-decoration: none; } .savedq-l a:hover { border-color: var(--orange-line); } /* ── 260929_12：近くの動物病院（N1）── */ .vets { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 6px; } .vets li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); } .vets-n { font-weight: 700; } .vets-km { font-size: 13px; color: var(--ink-2); } .vets-a { margin-left: auto; display: flex; gap: 12px; font-size: 13.5px; } .vets-a a { display: inline-flex; align-items: center; min-height: 36px; } /* ── 260929_14：次の土曜の空き（N3）── */ .wkv { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 4px; } .wkv li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); } .wkv-d { font-weight: 700; min-width: 7.5em; } .wkv-ok .wkv-s { color: var(--ok); font-weight: 700; } .wkv-no .wkv-s { color: var(--ink-3); } .wkv-p { margin-left: auto; font-size: 13.5px; } /* ── 掲載ポリシーの「わんとこのデータ」（260930_05）── 項目は左、割合と件数は右。数字の桁をそろえます。スマホでは、項目が長ければ左の列の中で折り返します （数字を下の行に落とすと、短い項目の行だけ右に並んで、そろわないため） */ .cov { list-style: none; margin: 0 0 14px; padding: 0; border-top: 1px solid var(--line); } .cov li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; margin: 0; padding: 8px 2px; border-bottom: 1px solid var(--line); } .cov-l { word-break: auto-phrase; } .cov-n { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .cov-n b { color: var(--brown); font-size: 1.1em; } /* ── トップ（261001_01。docs/トップ_案1_計画_261001.md「案1 箱の下にしおりの帯」）──────── 本人の決定（2026-10-01）：案A（さがす箱が主役）と案B（しおりが主役）を組み合わせ、しおりを案Aより目立たせる。 ・写真（16:9）＋さがす箱（泊まる・食べる・遊ぶのタブ・1つの欄・うちの子・さがす・条件の札3つ）。パソコンは左に写真、右に箱 ・箱のすぐ下に、横いっぱいのしおりの帯。スマホは上の帯にも小さな［しおりをつくる］ ・特集は1段の横に流す段（自動では動かさない）。人気のエリアの札＋地方の箱（すべて閉じる） 見本：docs/見本_トップ_261001/2回目_案1_箱の下にしおりの帯.html（a- と p1- の名前を tp- にそろえた） 261020_01：さがす箱を「案1　横1段の3つの欄」に作り直し、写真の帯に箱を重ねる形にしました（パソコンも上下）。 見本：docs/見本_さがす_261019/案1_横1段の3つの欄.html（a1- と m- の名前を tp- にそろえた） */ /* 上の帯（トップのスマホだけ）：［しおりをつくる］を「わたしの旅」の隣に小さく。タブレットから上は、帯が最初の画面に入るので出さない */ .hd-shiori { flex: none; min-height: 44px; padding: 0 10px; font-size: 13px; white-space: nowrap; } @media (max-width: 370px) { .hd-shiori { padding: 0 7px; font-size: 12px; } } @media (min-width: 760px) { .hd-shiori { display: none; } } /* いちばん上の段（261020_01：案1　横1段の3つの欄。docs/トップのさがす箱_案1_計画_261020.md） 写真の帯の下の端に、さがす箱を重ねます（写真の幅の5%＝写真の高さの約6分の1。スマホは重ねずに、すぐ下）。 写真はスマホが 16:9、タブレット・パソコンが横長 3:1（依頼書14）。どちらも切りぬかず、その形のまま出します。 パソコンも写真と箱を左右に並べません（前は箱が写真の高さまでのびて、札の下が空いていた）。 261020_02（本人「PCとタブレットの写真がなんか不格好」）：写真の角を4つとも丸くし、箱は真ん中にはっきり寄せて重ねる （前は箱の左右に写真が 20〜40px だけはみ出して、ずれたように見えていた。手本は一休の、写真の帯の下の端にまたがる箱）。 重ねるのは写真の高さの6分の1まで（写真を頼んだときの約束。人と犬は上の3分の2）。 見出しとサブコピーは左の落ち着いたところに置き、後ろに左から柔らかい影を敷く（前の下からの帯は、左下を濁らせていた） */ .tp-top { margin: 0 -16px; } .tp-ph { position: relative; } .tp-ph .photo { margin: 0; overflow: hidden; } .tp-ph img { display: block; width: 100%; height: auto; } /* スマホ：見出しとサブコピーは写真の下のほう（文字の位置は 261010_05 で顔にかからないと確かめた形のまま）。 261020_02：サブコピーを戻したので、スマホは箱を写真に重ねない（重ねると文字が上に押されて、犬や人の顔に近づくため） */ .tp-top .top-h { margin: 0 0 6px; } .tp-box { position: relative; z-index: 4; margin: 10px 12px 0; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; scroll-margin-top: calc(var(--hd-h) + 10px); box-shadow: 0 4px 16px rgba(87, 44, 13, .10); } @media (min-width: 760px) { .tp-top { margin: 0; padding-top: 16px; } .tp-ph .photo { border-radius: var(--r); } .tp-ph img { aspect-ratio: 3 / 1; object-fit: cover; } /* 横長の写真は 3:1 なので、切れるところはありません */ /* 文字のうしろに、左から柔らかい影（右の人と犬は暗くしない） */ .tp-ph::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r); pointer-events: none; background: radial-gradient(ellipse 60% 85% at 14% 44%, rgba(38, 24, 12, .56) 0%, rgba(38, 24, 12, .30) 50%, rgba(38, 24, 12, 0) 100%); } .tp-top .top-tx { top: 0; bottom: 16%; right: auto; width: min(60%, 560px); display: flex; flex-direction: column; justify-content: center; padding: 0 0 0 24px; background: none; border-radius: 0; } .tp-top .top-h { margin: 0 0 8px; font-size: 1.6rem; } .tp-top .top-sub { max-width: none; font-size: 12.5px; line-height: 1.7; color: #FFF3E6; } /* タブレットは、柴の写真で2行目が犬にかからない大きさ */ /* サブコピーは「大丈夫？」のあとで行を分ける（言葉の途中で折れないように）。スマホは続けて流す */ .tp-top .top-sub-sp { display: none; } .tp-top .top-sub-b { display: block; } /* 重ねるのは写真の幅の5%（写真は 3:1 なので、高さの約6分の1。margin の % は幅で決まる） */ .tp-box { width: calc(100% - 48px); margin: -5% auto 0; box-shadow: 0 10px 28px rgba(87, 44, 13, .16); } } @media (min-width: 1000px) { .tp-top { padding-top: 20px; } .tp-top .top-tx { padding-left: 48px; } .tp-top .top-h { margin: 0 0 10px; font-size: 2.2rem; } .tp-top .top-sub { font-size: 15px; line-height: 1.75; } .tp-box { width: calc(100% - 96px); max-width: 1000px; } } /* 柱のタブ（泊まる・食べる・遊ぶ） */ .tp-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--line-2); } .tp-tab { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 4px 6px; border-top: 3px solid transparent; border-bottom: 1px solid var(--line); color: var(--ink-2); font-family: var(--f-head); font-size: 16px; font-weight: 700; line-height: 1.25; text-decoration: none; } .tp-tab + .tp-tab { border-left: 1px solid var(--line); } .tp-tab:hover { color: var(--brown); background: var(--orange-soft); } .tp-tab[aria-selected="true"] { background: var(--card); color: var(--brown); border-bottom-color: transparent; } .tp-tab-stay[aria-selected="true"] { border-top-color: var(--stay); } .tp-tab-eat[aria-selected="true"] { border-top-color: var(--eat); } .tp-tab-play[aria-selected="true"] { border-top-color: var(--play); } .tp-tab:focus-visible { outline-offset: -3px; } .tp-tab-t small { display: block; font-family: var(--f-body); font-size: 14px; font-weight: 400; color: var(--ink-2); } @media (min-width: 600px) { .tp-tab-t small { display: inline; margin-left: 6px; } } .tp-body { display: grid; gap: 10px; padding: 12px; } /* 261020_04：フリーワードの検索窓（箱のいちばん上。欄と［さがす］を1行に）。全部消す ✕ は clear.js が付ける */ .tp-free { display: flex; gap: 8px; min-width: 0; } .tp-free-in { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; padding: 0 2px 0 12px; border: 1.5px solid #DCCFBF; border-radius: var(--r-s); background: var(--card); } .tp-free-in:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); } .tp-free-in > .ic { flex: none; color: var(--ink-3); } .tp-free-in .clr { flex: 1; min-width: 0; } .tp-free-in input[type] { width: 100%; min-height: 50px; padding: 0 2.8em 0 4px; border: 0; border-radius: 0; background: transparent; font-size: 16px; } .tp-free-in input[type]:focus-visible { outline: none; } .tp-free-go { flex: none; min-height: 52px; padding: 0 18px; border: 0; border-radius: var(--r-s); background: var(--brown); color: #fff; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; } .tp-free-go:hover { background: #6b3a16; } @media (min-width: 760px) { .tp-body { padding: 16px 16px 14px; } } .tp-form { display: grid; gap: 10px; min-width: 0; } /* ［どこで］［うちの子］［条件］［さがす］：スマホは縦に4段。タブレットは欄3つを横に、さがすはその下に横いっぱい。パソコンは4つを1段 */ .tp-fields { display: grid; gap: 8px; } .tp-field { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 58px; padding: 6px 8px 6px 12px; text-align: left; background: var(--card); border: 1.5px solid #DCCFBF; border-radius: var(--r-s); color: var(--ink); font: inherit; cursor: pointer; } .tp-field:hover { border-color: var(--orange-line); background: var(--orange-soft); } .tp-field:focus-visible { outline: 3px solid var(--orange-line); outline-offset: 1px; } .tp-field > img { flex: none; } .tp-field-t { display: grid; min-width: 0; flex: 1; line-height: 1.3; } .tp-field-t small { font-size: 12.5px; color: var(--ink-2); } /* 値は「…」で切らず、2行まで折り返す（言葉の途中では折らない。場所は「から」のあとで折る） */ .tp-field-t b { font-size: 16px; color: var(--brown); overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .tp-field-go { flex: none; width: 18px; height: 18px; color: var(--ink-3); } .tp-dog .dogface-chip { border-radius: 50%; background: #fff; } .tp-dog.has-dogs .tp-dog-def { display: none; } .tp-dog.is-nl .tp-dog-def { display: block; } .tp-dog.is-nl #dogchip-face { display: none; } .tp-dog .dc-s { display: inline; } /* 上の帯の札とちがって幅があるので、スマホでも「大型・1頭」まで出す */ .tp-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 54px; padding: 0 20px; border: 0; border-radius: var(--r-s); background: var(--orange); color: var(--brown); font: inherit; font-weight: 800; font-size: 17px; cursor: pointer; box-shadow: 0 2px 0 var(--orange-2); white-space: nowrap; } .tp-go:hover { background: var(--orange-2); } .tp-go .ic { width: 20px; height: 20px; stroke-width: 2.4; } .tp-go small { font-weight: 700; font-size: 14px; } @media (min-width: 760px) and (max-width: 999px) { .tp-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tp-go { grid-column: 1 / -1; } } @media (min-width: 1000px) { .tp-fields { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; } .tp-go { min-height: 58px; } } /* ことばで読みとった条件でさがすときの1行（［外す］つき） */ .tp-nlnote:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: -2px 2px 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); } .tp-link { min-height: 40px; padding: 0 4px; border: 0; background: none; color: #1a55a8; font: inherit; text-decoration: underline; cursor: pointer; } /* よく使う条件：札5つ＋［条件をすべて見る］。札は箱の中の切りかえ（m[]）で、選んだ場所・うちの子と組み合わさります。 スマホは同じ幅で3列×2段（絵の下に名前・言葉の切れ目で折り返す）、タブレットは6つで1段、パソコンは札を1行（［条件をすべて見る］は見出しの右） */ .tp-chips { display: grid; gap: 6px; } .tp-chips[hidden] { display: none; } .tp-chips-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tp-chips-h { margin: 2px 0 0; font-size: 13.5px; font-weight: 700; color: var(--ink-2); } .tp-allc { display: none; min-height: 32px; padding: 0; border: 0; background: none; color: #1a55a8; font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; } .tp-chipgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .tp-chip { position: relative; min-width: 0; } .tp-chip[hidden] { display: none; } .tp-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .tp-chip-in, .tp-cmore { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; min-height: 64px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); color: var(--brown); font-size: 13px; font-weight: 700; line-height: 1.3; text-align: center; word-break: keep-all; overflow-wrap: anywhere; } .tp-chip-in .fi { width: 20px; height: 20px; flex: none; } .tp-chip-in small { font-size: 12px; font-weight: 400; color: var(--ink-2); } .tp-chip:hover .tp-chip-in { border-color: var(--orange-line); background: var(--orange-soft); } .tp-chip input:checked + .tp-chip-in { background: var(--orange-soft); border: 2px solid var(--orange); padding: 5px; } .tp-chip input:focus-visible + .tp-chip-in { outline: 3px solid var(--orange-line); outline-offset: 1px; } .tp-chip.is-zero .tp-chip-in { opacity: .5; } /* 261020_02：名前を tp-more から tp-cmore に（特集の段の「すべて見る」と同じ名前で、点線の箱の見た目が移っていた） */ .tp-cmore { font: inherit; font-size: 13px; font-weight: 700; border-style: dashed; border-color: var(--orange-line); background: none; cursor: pointer; } .tp-cmore:hover { background: var(--orange-soft); } @media (min-width: 760px) { .tp-chipgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (min-width: 1000px) { .tp-allc { display: inline-block; } .tp-chipgrid { display: flex; flex-wrap: wrap; gap: 8px; } .tp-chipgrid .tp-cmore { display: none; } .tp-chip-in { flex-direction: row; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 14.5px; white-space: nowrap; } .tp-chip input:checked + .tp-chip-in { padding: 0 13px; } .tp-chip-in .fi { width: 22px; height: 22px; } } /* 少し狭いパソコンは札を4つに（［条件をすべて見る］の行が2段にならないように） */ @media (min-width: 1000px) and (max-width: 1199px) { .tp-chip.is-5th { display: none; } /* 欄の字が「うちの子を登／録」のように折れないよう、［どこで］の割合と［さがす］の余白を少しつめます */ .tp-fields { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) auto; } .tp-field { gap: 8px; padding-left: 10px; } .tp-go { padding: 0 14px; } } /* 箱のいちばん下：柱のページへ */ .tp-all { margin: 0; padding: 0 14px; border-top: 1px solid var(--line-2); display: flex; justify-content: flex-end; } .tp-all a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; font-weight: 700; } .tp-all a .ic, .tp-more .ic { width: 1.1em; height: 1.1em; margin-left: 2px; stroke-width: 2.2; } /* 261001_02：前の「›」の字は小さく下にずれて見えたため */ /* 2回目の人の細い1行（箱のすぐ下。中身は top.js） */ .tp-ret:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 8px 12px 0; padding: 0 12px; background: var(--card); border: 1px solid var(--orange-line); border-radius: var(--r-s); font-size: 14.5px; } .tp-ret a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; } .tp-ret img { width: 22px; height: 22px; flex: none; } @media (min-width: 760px) { .tp-ret:not([hidden]) { width: calc(100% - 48px); margin: 10px auto 0; } } @media (min-width: 1000px) { .tp-ret:not([hidden]) { width: calc(100% - 96px); max-width: 1000px; } } /* ［どこで］［条件］の窓：スマホ・タブレットは全画面、パソコンは真ん中の大きな窓（幅 720px まで）。 高さは見えている高さ（dvh）で決め、窓の中でスクロールします（260929_09 の .sheet と同じ考え） */ .tp-dlg { border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; background: var(--bg); color: var(--ink); overscroll-behavior: contain; } .tp-dlg[open] { display: flex; flex-direction: column; } .tp-dlg::backdrop { background: rgba(51, 38, 28, .45); } .tp-dlg-hd { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 16px; background: var(--card); border-bottom: 1px solid var(--line); font-size: 17px; color: var(--brown); } .tp-x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ink-2); cursor: pointer; border-radius: 999px; } .tp-x:hover { background: var(--line-2); } .tp-x .ic { width: 22px; height: 22px; stroke-width: 2.2; } .tp-dlg-bd { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px 24px; } .tp-dlg-ft { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); } .tp-dlg-ft .btn-go { flex: 1; max-width: 360px; margin-left: auto; min-height: 52px; padding: 0 16px; font-size: 16px; } @media (min-width: 760px) { .tp-dlg { width: min(720px, 92vw); height: fit-content; max-height: 86vh; max-height: 86dvh; margin: auto; border-radius: var(--r); overflow: hidden; } } .tp-dlg-h { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 8px; font-size: 14.5px; font-weight: 700; color: var(--ink-2); } .tp-dlg-h:first-child { margin-top: 4px; } .tp-dlg-h small { font-size: 12.5px; font-weight: 400; color: var(--ink-3); } .tp-dlg-note { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); } .tp-dlg-msg { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--cond); } .tp-dlg-end { margin: 14px 0 0; } .tp-line { display: flex; gap: 6px; } .tp-line .clr { flex: 1; min-width: 0; } .tp-line input[type] { width: 100%; min-height: 48px; padding: 0 2.8em 0 12px; border: 1.5px solid #DCCFBF; border-radius: var(--r-s); background: var(--card); font-size: 16px; } .tp-line input[type]:focus { border-color: var(--orange); outline: none; box-shadow: 0 0 0 3px var(--orange-soft); } .tp-line .btn-sub { flex: none; min-height: 48px; border-radius: var(--r-s); } /* ことばの欄の候補（エリア・都道府県の名前） */ .tp-sug { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); overflow: hidden; } .tp-sug[hidden] { display: none; } .tp-sug li + li { border-top: 1px solid var(--line-2); } .tp-sug button { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 14px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer; } .tp-sug button:hover { background: var(--orange-soft); } .tp-sug small { flex: none; font-size: 12.5px; color: var(--ink-3); } /* 丸い選択（時間・エリア・都道府県・条件） */ .tp-pills { display: flex; flex-wrap: wrap; gap: 8px; } .tp-pills[hidden] { display: none; } .tp-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--brown); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; } .tp-pill small { font-size: 12.5px; font-weight: 400; color: var(--ink-3); } .tp-pill .fi { width: 22px; height: 22px; flex: none; } .tp-pill:hover { border-color: var(--orange-line); background: var(--orange-soft); } .tp-pill[aria-pressed="true"] { background: var(--orange-soft); border: 2px solid var(--orange); padding: 0 13px; } .tp-pill.is-zero { opacity: .5; } .tp-pill[hidden] { display: none; } .tp-reg { border-bottom: 1px solid var(--line-2); } .tp-reg > summary { display: flex; align-items: center; min-height: 46px; font-size: 15px; font-weight: 700; color: var(--brown); cursor: pointer; } .tp-reg > .tp-pills { padding: 0 0 12px; } .tp-hits { display: grid; gap: 6px; margin: 8px 0 0; font-size: 14px; color: var(--ink-2); } .tp-hits:empty { display: none; } .tp-hit { display: grid; gap: 0; width: 100%; min-height: 46px; padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); font: inherit; font-size: 15px; font-weight: 700; color: var(--brown); text-align: left; cursor: pointer; } .tp-hit small { font-size: 12.5px; font-weight: 400; color: var(--ink-3); } .tp-hit:hover { border-color: var(--orange-line); background: var(--orange-soft); } /* 261020_03：前に決めた出発地（うちの子の窓から移した）。［ここからさがす］で片道の目安へ、［外す］で消す */ .tp-savedfrom:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); font-size: 14.5px; } .tp-savedfrom b { color: var(--brown); } .tp-savedfrom .btn-sub { min-height: 40px; border-radius: var(--r-s); } .tp-fromstep { margin: 4px 0 0; padding: 10px 12px 12px; border: 1px solid var(--orange-line); border-radius: var(--r-s); background: var(--orange-soft); } .tp-fromstep[hidden] { display: none; } .tp-fromstep .tp-dlg-h { display: block; margin-top: 0; color: var(--brown); } .tp-cx { margin: 0 0 12px; } .tp-cpick { margin-top: 12px; } /* しおりの帯（さがす箱のすぐ下に横いっぱい）。地はうすいオレンジ、枠はオレンジの線（白いさがす箱と見分けがつくように）。 スマホ：左に絵、右にメッセージと短い3行、下にボタン。タブレット・パソコン：右にボタン */ .tp-band { margin: 14px 0 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px 10px; align-items: start; padding: 14px; background: var(--orange-soft); border: 1px solid var(--orange-line); border-radius: var(--r-s); } .tp-band-i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--card); border: 1px solid var(--orange-line); } .tp-band-i img { display: block; width: 34px; height: 34px; } .tp-band-tx { min-width: 0; } .tp-band-t { margin: 0; font-family: var(--f-head); font-weight: 700; color: var(--brown); font-size: 1.05rem; line-height: 1.5; } .tp-band-l { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 1px; font-size: 14px; line-height: 1.6; color: var(--ink); } .tp-band-l li { padding-left: 1em; text-indent: -1em; } .tp-band-l li::before { content: "・"; color: var(--orange-2); font-weight: 800; } .tp-band-go { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .tp-band-go .btn-go { flex: none; } .tp-band-go .btn-sub { min-height: 48px; padding: 0 16px; font-size: 15px; } .tp-band-n { flex: 1 1 9em; margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); } @media (min-width: 760px) { .tp-band { margin-top: 12px; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; column-gap: 18px; padding: 16px 20px; } .tp-band-i { width: 64px; height: 64px; } .tp-band-i img { width: 44px; height: 44px; } .tp-band-t { font-size: 1.22rem; } .tp-band-l { display: flex; flex-wrap: wrap; gap: 0 18px; } .tp-band-go { grid-column: auto; flex-direction: column; align-items: stretch; gap: 6px; width: 15.5em; } .tp-band-n { flex: none; text-align: center; } } @media (min-width: 1000px) { .tp-band { margin-top: 16px; grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: 22px; padding: 18px 24px; } .tp-band-i { width: 72px; height: 72px; } .tp-band-i img { width: 50px; height: 50px; } .tp-band-t { font-size: 1.35rem; } .tp-br { display: none; } /* パソコンはメッセージを1行に */ .tp-band-go { width: 18.5em; } } /* 特集：1段で横に流す（自動では動かさない）。スマホは2枚と少し、タブレットは3枚と少し、パソコンは4枚と少し＋左右の矢印 */ .tp-hrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 0 0 8px; } .tp-hrow h2, .tp-h2 { margin: 0; font-size: 1.25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; } .tp-hrow h2 small, .tp-h2 small { font-family: var(--f-body); font-size: 13.5px; font-weight: 400; color: var(--ink-2); } .tp-h2 { margin: 0 0 8px; } .tp-more { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; font-weight: 700; white-space: nowrap; } .tp-arrs { display: none; gap: 6px; } .tp-arr { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--brown); cursor: pointer; } .tp-arr:hover:not(:disabled) { border-color: var(--orange-line); } .tp-arr:disabled { opacity: .35; cursor: default; } .tp-arr .ic { width: 20px; height: 20px; stroke-width: 2.2; vertical-align: 0; } .tp-strip { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 10px; } .tp-strip::-webkit-scrollbar { display: none; } .tp-strip > .tcard { width: calc((100% - 20px) / 2.2); scroll-snap-align: start; } .tp-strip .tcard-tx { padding: 7px 10px 9px; } .tp-strip .tcard-tx b { font-size: 14px; } .tp-strip .tcard-tx small { font-size: 13px; } /* いちばん右の「特集をすべて見る」 */ .tp-strip > .tp-tc-all { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 12px; text-align: center; background: var(--orange-soft); border: 1px solid var(--orange-line); box-shadow: none; text-decoration: none; } .tp-tc-all b { color: var(--brown); font-family: var(--f-head); font-size: 16px; line-height: 1.4; } .tp-tc-all small { color: var(--ink-2); font-size: 13px; } .tp-tc-all:hover b { text-decoration: underline; } @media (min-width: 760px) { .tp-strip { gap: 12px; } .tp-strip > .tcard { width: calc((100% - 36px) / 3.3); } /* 3枚と、4枚目の頭が少し */ .tp-strip .tcard-tx b { font-size: 15px; } } @media (min-width: 1000px) { .tp-arrs { display: inline-flex; } .tp-strip { margin: 0; padding: 2px 0 10px; gap: 14px; scroll-padding-inline: 0; } .tp-strip > .tcard { width: calc((100% - 56px) / 4.25); } /* 4枚と、5枚目の頭が少し */ } /* 人気のエリア（札）＋地方の箱（すべて閉じる。開いた箱は横いっぱいに広げる） */ .tp-areachips a { font-size: 15px; } .tp-areachips a span { font-size: 13px; } .tp-h3 { margin: 18px 0 8px; font-size: 1rem; color: var(--ink-2); } .tp-regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; } .tp-regions .areabox { margin: 0; min-width: 0; } .tp-regions .areabox[open] { grid-column: 1 / -1; } @media (max-width: 599px) { /* 2列でせまいので、「開く・とじる」の文字は ▾▴ にします（「北海道・東北 84 開く」が折り返さないように） */ .tp-regions .areabox > summary { padding: 0 10px; gap: 6px; white-space: nowrap; } .tp-regions .areabox > summary::after { content: "▾"; } .tp-regions .areabox[open] > summary::after { content: "▴"; } } @media (min-width: 760px) { .tp-regions { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1000px) { .tp-regions { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* わんとこの約束（3つを短く。タブレット・パソコンは横に3つ） */ .tp-promise { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .tp-promise li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-s); font-size: 14px; line-height: 1.65; color: var(--ink-2); } .tp-promise img { width: 40px; height: 40px; } .tp-pr-t { display: block; margin-bottom: 2px; font-size: 15px; color: var(--brown); } .tp-promise .pb { font-size: 13px; padding: 0 8px 0 6px; } @media (min-width: 760px) { .tp-promise { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } } /* ── 261002_01：しおりの見直し（本人が選んだ見本「2回目 案3 あいだに足す」。docs/しおりの見直し_計画_261002.md）── ・「予定」と「準備」の2面。スマホ・タブレットは上に貼りつく切り替え、パソコン（1000px 以上）は左右に並べる ・角は 4px まで。影は付けない。色はサイトの色だけ */ /* 上に貼りつくのは「予定・準備」の切り替えだけ（このページでは、上の帯を貼りつけない） */ .shioripage .hd { position: static; } .sh-meta { font-size: 13px; color: var(--ink-2); } .sh-why { font-size: 13px; color: var(--cond); } .sh-check { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 3px; background: var(--unk-bg); color: var(--unk); border: 1px dashed var(--unk-line); } /* 頭：名前とまとめの3行・［名前・日にちを変える］［共有］ */ .sv-head h1 { display: flex; align-items: center; gap: 8px; } .sv-head h1 .fi { margin: 0; flex: none; } .sv-sum { margin: 4px 0 0; font-size: 15px; line-height: 1.6; } .sv-left { color: var(--brown); font-variant-numeric: tabular-nums; } .sv-sum2, .sv-dog { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); } .sv-doglink { margin: -12px 0; padding: 12px 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--brown); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; } .sv-headin { display: grid; gap: 10px; margin: 10px 0 0; } .sv-hbtns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .sv-hbtns .btn-sub { min-width: 76px; font-size: 15px; border-radius: 4px; } .sv-hbtns .btn-sub[aria-expanded="true"] { background: var(--orange-soft); border-color: var(--orange-line); } .sv-panel { padding: 12px 14px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; display: grid; gap: 12px; } .sv-panel[hidden] { display: none; } .sv-panel h2 { margin: 0; font-size: 1.05rem; } .sv-panel p { margin: 0; } .sv-panel .btn-sub, .sv-panel .sh-stb, .sv-panel input, .sv-panel select { border-radius: 4px; } /* 予定・準備の切り替え（スマホ・タブレット。上に貼りつく。高さ 44px） */ .sv-switch { position: sticky; top: 0; z-index: 25; display: grid; grid-template-columns: 1fr 1fr; margin: 14px -16px 0; background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .sv-tab { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 8px; border: 0; border-bottom: 3px solid transparent; background: var(--line-2); color: var(--ink-2); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; } .sv-tab + .sv-tab { border-left: 1px solid var(--line); } .sv-tab[aria-selected="true"] { background: var(--card); color: var(--brown); border-bottom-color: var(--orange); } .sv-tab small { font-size: 13px; font-weight: 700; color: var(--cond); } @media (max-width: 999px) { html.js .sv-face:not(.is-on) { display: none; } } @media (min-width: 1000px) { .sv-switch { display: none !important; } .sv-faces { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; } .sv-staybook { display: none; } /* 予約のボタンは、右の「宿の予約」に1つ */ } /* 面の見出し */ .sv-facehd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 8px; } .sv-facehd h2 { margin: 0; min-height: 44px; display: flex; align-items: center; gap: 6px; font-size: 1.25rem; flex: 1 1 auto; } .sv-facehd h2 .fi { margin: 0; } .sv-facehd .btn-sub { font-size: 15px; border-radius: 4px; } .sv-facehd .btn-sub .fi { width: 22px; height: 22px; margin: 0 4px 0 0; } .sv-hint, .sv-prepnote { margin: -2px 0 12px; } .sv-prepsum { margin: 0; flex-basis: 100%; font-size: 14px; color: var(--ink-2); } .sv-prepsum b { color: var(--cond); font-size: 15px; } .sv-prepsum b.is-done { color: var(--ok); } /* 宿をまだ決めていないとき：予定のいちばん上に「宿を決める」 */ .sv-staypick { margin: 0 0 14px; padding: 12px 14px 14px; background: var(--card); border: 1px solid var(--stay); border-radius: 4px; } .sv-staypick[hidden] { display: none; } .sv-staypick h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 1.1rem; } .sv-staypick h3 .fi { margin: 0; } .sv-staypick h4.sub { margin: 14px 0 6px; font-size: 15px; } .sv-staypick .sh-candc, .sv-staypick .sh-spot, .sv-staypick .btn-sub { border-radius: 4px; } /* 日ごとの予定（行の左に1本の線と番号の丸） */ .sv-day { position: relative; margin: 0 0 14px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; } .sv-dayh { margin: 0; padding: 8px 14px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; background: var(--line-2); border-bottom: 1px solid var(--line); border-radius: 4px 4px 0 0; font-size: 17px; } .sv-dayh small { margin-left: 8px; font-family: var(--f-body); font-size: 14px; font-weight: 400; color: var(--ink-2); } .sv-daysum { font-family: var(--f-body); font-size: 14px; font-weight: 400; color: var(--ink); } .sv-rows { list-style: none; margin: 0; padding: 12px 14px 12px 12px; } .sv-rows > li { position: relative; padding-left: 44px; } .sv-rows > li::before { content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: var(--line); } .sv-rows > li:first-child::before { top: 16px; } .sv-rows > li:last-child::before { bottom: auto; height: 16px; } .sv-row, .sv-end { padding-top: 2px; padding-bottom: 2px; } .sv-no { position: absolute; left: 0; top: 2px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brown); color: #fff; font-size: 14px; font-weight: 800; line-height: 1; } .sv-no-stay { background: var(--stay); font-size: 12px; } .sv-no-end { background: var(--ink-2); font-size: 13px; } .sv-end.is-none .sv-no-end, .sv-stay.is-none .sv-no-stay { background: var(--line); color: var(--ink-2); } .sv-stay.is-none .sv-nm { font-weight: 400; color: var(--ink-2); } .sv-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 34px; font-size: 16px; line-height: 1.45; } .sv-nm { font-weight: 700; } .sv-k { font-size: 14px; font-weight: 700; color: var(--ink-2); } .sv-stay .sv-k { color: var(--stay); } .sv-meta { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); } .sv-why { margin: 0; font-size: 13px; line-height: 1.5; color: var(--cond); } .sv-why .prs { font-size: inherit; color: inherit; } .sv-why .prm { margin-left: 6px; } .sv-empty { font-weight: 400; color: var(--ink-3); } .sv-memo { margin: 6px 0 0; padding: 4px 10px; background: var(--line-2); border-radius: 2px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } .sv-memo[data-sv-memoedit] { cursor: pointer; } .sv-memo[data-sv-memoedit]:hover { text-decoration: underline; } .sv-memo:focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; } .sv-nw { white-space: nowrap; } /* 261002_02：あいだの行の「SA・PA ◯か所」（気づけるように、茶色の太字） */ .sv-sahint { color: var(--brown); font-weight: 700; } /* 行と行のあいだ：「次まで…」と［＋ 寄る場所を足す］。スマホでは文字を1行に残し、ボタンは次の行の右へ */ .sv-hop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding-top: 4px; padding-bottom: 6px; font-size: 13px; line-height: 1.4; color: var(--ink-2); } .sv-hop > span { flex: 1 1 13em; min-width: 0; } .sv-hop > .sv-addbtn { margin-left: auto; } .sv-addbtn { flex: none; min-height: 44px; padding: 0 10px; border: 1px solid var(--orange-line); border-radius: 4px; background: var(--card); color: var(--brown); font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; } .sv-addbtn:hover { background: var(--orange-soft); } .sv-last { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 0 14px 12px 56px; } .sv-last small { font-size: 13px; color: var(--ink-2); } .sv-plannote { margin: 14px 0 0; } /* 立ち寄りの行：右につまみ（44×44）、下に［メモ］［編集］（タブレット・パソコンは名前の行の右） */ .sv-mov > .sv-line { min-height: 44px; padding-right: 52px; } .sv-mov > .sv-no { top: 7px; } /* 261011_03：つまみは枠と白地をやめ、薄い3本線だけにした（本人「主張が強いから控えめに」）。押せる大きさ（44px）はそのまま */ .sv-grip { position: absolute; top: 2px; right: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ink-3); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .sv-grip .ic { width: 20px; height: 20px; stroke-width: 1.6; } .sv-grip:hover { background: var(--line-2); color: var(--ink-2); } .sv-grip:focus-visible { outline: 2px solid var(--brown); outline-offset: -2px; } .sv-row.is-drag { z-index: 7; border-radius: 4px; background: var(--card); outline: 2px solid var(--orange-line); outline-offset: -2px; box-shadow: 0 12px 26px rgba(55, 35, 18, .24); transform: translate3d(0, calc(var(--sv-drag-y, 0px) - 4px), 0) scale(1.01); } .sv-row.is-drag .sv-grip { background: transparent; color: var(--brown); } .sv-row.is-drag, .sv-row.is-drag * { -webkit-user-select: none; user-select: none; } body.sv-dragging, body.sv-dragging * { cursor: grabbing !important; } .sv-dropline { position: absolute; left: 56px; right: 14px; height: 4px; margin-top: -2px; background: var(--brown); border-radius: 2px; pointer-events: none; z-index: 8; } .sv-dropline[hidden] { display: none; } .sv-acts { margin: 4px 0 6px; display: flex; flex-wrap: wrap; gap: 8px; } .sv-sbtn { min-height: 44px; min-width: 64px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .sv-sbtn:hover { border-color: var(--orange-line); color: var(--brown); } .sv-sbtn[aria-expanded="true"] { background: var(--orange-soft); border-color: var(--orange-line); color: var(--brown); } @media (min-width: 600px) { .sv-mov > .sv-line { padding-right: 196px; } .sv-own > .sv-line { padding-right: 330px; } .sv-acts { position: absolute; top: 2px; right: 52px; margin: 0; flex-wrap: nowrap; } .sv-memoed, .sv-menu { margin-right: 52px; } } .sv-menu { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 8px; background: var(--line-2); border: 1px solid var(--line); border-radius: 4px; } .sv-menu button { min-height: 44px; min-width: 64px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); color: var(--brown); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .sv-menu button:disabled { background: var(--line-2); color: var(--ink-3); cursor: default; } .sv-menu .sv-del { color: var(--ng); } .sv-menu select { min-height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); font: inherit; font-size: 14px; } .sv-memoed { display: flex; align-items: flex-end; gap: 8px; margin: 6px 0 8px; } .sv-memoed .fld { flex: 1 1 auto; min-width: 0; margin: 0; } .sv-memoed input[type], .sv-memoed textarea, .sv-freerow input[type], .sv-find input[type] { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 16px; background: var(--card); color: var(--ink); } .sv-memoed textarea { resize: vertical; line-height: 1.5; } @media (min-width: 600px) and (max-width: 799px) { .sv-own > .sv-line { padding-right: 52px; } .sv-own .sv-acts { position: static; margin: 4px 0 6px; } } /* 消したあと：その場所に「◯◯を消しました［元に戻す］」 */ .sv-undo { padding-top: 4px; padding-bottom: 4px; } .sv-undo > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding: 0 0 0 10px; background: var(--line-2); border: 1px solid var(--line); border-radius: 4px; font-size: 14px; line-height: 1.45; } .sv-undo > div > span { padding: 6px 0; } .sv-undo .sv-sbtn { color: var(--brown); border: 0; border-left: 1px solid var(--line); border-radius: 0; } /* 宿の行：予約のボタン（スマホ・タブレット）・宿のページ・予約メモ */ .sv-staybook { margin: 8px 0 0; } .sv-staylinks { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; } .sv-staylinks .btn-sub { border-radius: 4px; } /* 「発」「着」の行の中の、行きの道・帰りの道（畳む。中身は drive.js） */ .sv-route { margin: 6px 0 4px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; } .sv-route > summary, .sv-sub > summary, .sv-ask > summary, .sh-bookmemo > summary { list-style: none; cursor: pointer; } .sv-route > summary::-webkit-details-marker, .sv-sub > summary::-webkit-details-marker, .sv-ask > summary::-webkit-details-marker, .sh-bookmemo > summary::-webkit-details-marker { display: none; } .sv-route > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px 6px 10px; font-size: 14px; line-height: 1.45; } .sv-route > summary .fi { margin: 0; width: 24px; height: 24px; flex: none; } .sv-route > summary > span { flex: 1 1 auto; min-width: 0; } .sv-route > summary b { color: var(--brown); margin-right: 6px; font-size: 15px; } @media (max-width: 599px) { .sv-route > summary b { display: block; } } .sv-route[open] > summary { background: var(--line-2); border-bottom: 1px solid var(--line); } .sv-chev { flex: none; width: 20px; height: 20px; margin-left: auto; color: var(--ink-2); } details[open] > summary .sv-chev { transform: rotate(90deg); } .sv-routein { padding: 12px 10px; } .sv-drivehold { display: none; } .sv-drive { display: grid; gap: 12px; } .sv-drive > p, .sv-drive .dr-out > * { margin: 0; } .sv-drive .dr-out { display: grid; gap: 12px; } .sv-drive .dr-route, .sv-drive .dr-from { border-radius: 4px; } .sv-sub { border-top: 1px solid var(--line); } .sv-sub > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--brown); } .sv-sub > summary .fi { margin: 0; width: 24px; height: 24px; flex: none; } .sv-sub > summary small { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 400; color: var(--ink-2); } .sv-sub[open] > summary { margin-bottom: 8px; } .sv-sub .dr-list { margin: 0 0 8px; } .sv-sub .dr-map { margin-top: 0; } /* 寄る場所を足す板（スマホは下から出る板、パソコンは真ん中の窓） */ .sv-sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 760px; height: auto; max-height: 85vh; max-height: 85dvh; padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 4px 4px 0 0; background: var(--card); color: var(--ink); } .sv-sheet[open] { display: flex; flex-direction: column; } .sv-sheet::backdrop, .sv-mapdlg::backdrop { background: rgba(51, 38, 28, .45); } .sv-sheethd { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); } .sv-sheethd h2 { margin: 0 auto 0 0; font-size: 1.15rem; } .sv-sheethd .btn-sub, .sv-maphd .btn-sub { border-radius: 4px; font-size: 15px; } .sv-where { margin: 0; padding: 8px 12px; font-size: 14px; line-height: 1.55; background: var(--line-2); border-bottom: 1px solid var(--line); } .sv-where b { color: var(--brown); } .sv-sheetin { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px calc(12px + env(safe-area-inset-bottom)); } .sv-cap { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); } .sv-grp { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 0 0 6px; border-bottom: 1px solid var(--line); font-family: var(--f-body); font-size: 14px; font-weight: 400; color: var(--ink-2); } .sv-grp-in { margin-top: 20px; font-weight: 700; } .sv-cands { list-style: none; margin: 0; padding: 0; } .sv-cand { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); } .sv-cand-in { flex: 1 1 auto; min-width: 0; } .sv-cand .sv-line { min-height: 0; } .sv-dist { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); } .sv-dist b { color: var(--brown); } .sv-mini { display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0 2px 0 0; border-radius: 50%; vertical-align: -5px; background: var(--brown); color: #fff; font-size: 12px; font-weight: 800; line-height: 1; } .sv-mini-stay { background: var(--stay); } .sv-mini-end { background: var(--ink-2); } .sv-cand-act { flex: none; margin: 0; text-align: right; } .sv-cand-act .btn-sub { border-radius: 4px; font-size: 15px; padding: 0 12px; } .sv-in { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; min-height: 44px; max-width: 8em; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--ink-2); } .sv-in.is-new { color: var(--ok); } .sv-in:focus { outline: none; } .sv-none { margin: 12px 0 0; padding: 8px 10px; background: var(--line-2); border-radius: 4px; font-size: 14px; line-height: 1.55; } .sv-more { margin: 10px 0 0; } .sv-free { border-top: 1px solid var(--line); margin: 18px 0 0; padding-top: 12px; } .sv-addways { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .sv-addways .btn-sub { min-height: 44px; } .sv-shared { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 12px; } /* 261004_08：コピーしたリンクをボタン1回で貼る。Googleマップから戻ったときの知らせ */ .sv-clip { margin: 10px 0 0; } .sv-clipbtn { width: 100%; min-height: 48px; font-weight: 700; } .sv-cliphint { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--orange); border-radius: 4px; background: var(--bg); font-size: 14px; line-height: 1.55; } .sv-sharedform, .sv-sharedconfirm { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-top: 10px; } .sv-sharedform .fld, .sv-sharedconfirm .fld { min-width: 0; margin: 0; } .sv-sharedconfirm input, .sv-sharedform textarea { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 4px; padding: 10px; font: inherit; } .sv-sharedform textarea { min-height: 72px; resize: vertical; } .sv-sharednotice { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--line-2); line-height: 1.55; } .sv-sharednotice p { margin: 6px 0; } .sv-sharednotice a { display: inline-flex; align-items: center; min-height: 44px; } .sv-sharedform .btn-sub, .sv-sharedconfirm .btn-sub { min-height: 44px; } .sv-freerow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 8px; margin: 10px 0 0; } .sv-freerow .fld { flex: 1 1 auto; min-width: 0; margin: 0; } .sv-freerow .btn-sub { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 4px; text-align: center; } @media (max-width: 600px) { .sv-sharedform, .sv-sharedconfirm { grid-template-columns: 1fr; } .sv-sharedform .btn-sub, .sv-sharedconfirm .btn-sub { justify-self: end; } .sv-freerow { grid-template-columns: minmax(0, 1fr) auto; } .sv-freerow .fld { grid-column: 1 / -1; } } .sv-sheet .note { margin: 12px 0 0; } /* 261003_02：名前でさがす（板の上。作り直す中身の外なので、結果をスクロールしても残ります） */ .sv-find { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--line); } .sv-find .fld { margin: 0; } .sv-find input[type] { -webkit-appearance: none; appearance: none; } .sv-find input[type]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; } /* ✕ は clear.js のものだけ */ /* さがしているあいだは板の高さを決めておく（結果の数で欄が上下に動かないように） */ .sv-sheet.is-find { height: 85vh; height: 85dvh; } .sv-sheet .btn-sub { border-radius: 4px; } @media (min-width: 1000px) { .sv-sheet { inset: 0; margin: auto; max-width: 600px; height: fit-content; max-height: 80vh; border: 1px solid var(--line); border-radius: 4px; } .sv-sheet.is-find { height: 80vh; } } /* 地図（画面いっぱいの窓） */ .sv-mapdlg { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--card); color: var(--ink); } .sv-mapdlg[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; } .sv-maphd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); } .sv-maphd h2 { margin: 0; font-size: 1.15rem; flex: 1 1 auto; } .sv-mapday { display: flex; flex-wrap: wrap; gap: 8px; } .sv-mapday button { min-height: 44px; min-width: 64px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); color: var(--brown); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; } .sv-mapday button[aria-pressed="true"] { background: var(--brown); border-color: var(--brown); color: #fff; } .map.sv-mapbox { height: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; } .sv-mapnote { margin: 0; padding: 6px 12px calc(8px + env(safe-area-inset-bottom)); font-size: 13px; line-height: 1.5; color: var(--ink-2); border-top: 1px solid var(--line); } .mpin-stay { background: var(--stay); font-size: 12px; } .mpin-end { background: var(--ink-2); font-size: 13px; } /* 準備の面 */ .sv-sec { margin: 0 0 14px; padding: 12px 14px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; } .sv-sec[hidden] { display: none; } .sv-sec > h3 { margin: 0 0 8px; font-size: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; } .sv-sec > h3 .fi { margin: 0; width: 26px; height: 26px; } .sv-sec > h3 small { font-family: var(--f-body); font-size: 13px; font-weight: 700; color: var(--cond); } .sv-sec > h3 small.is-done { color: var(--ok); } .sv-sec .note { margin: 0 0 8px; } .sv-sec .sh-book { margin: 8px 0; } .sv-sec .sh-stayacts .btn-sub { border-radius: 4px; } .sv-sec .sh-bookmemo { border-radius: 4px; } .sh-bookmemo > summary { justify-content: space-between; gap: 8px; min-height: 44px; } .sv-ask { border-top: 1px solid var(--line); } .sv-ask:last-of-type { border-bottom: 1px solid var(--line); } .sv-ask > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 0; } .sv-ask-nm { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--brown); } .sv-ask-n { flex: none; font-size: 13px; color: var(--ink-2); } .sv-ask-st { flex: none; padding: 0 6px; font-size: 12px; font-weight: 700; line-height: 1.7; border-radius: 3px; background: var(--cond-bg); color: var(--cond); border: 1px solid var(--cond-line); } .sv-ask.is-done .sv-ask-st { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); } .sv-ask .sv-chev { margin-left: 0; } .sv-ask-in { padding: 0 0 12px; } .sv-ask-in ol { margin: 0 0 10px; padding-left: 1.4em; font-size: 15px; line-height: 1.6; } .sv-ask-in .sh-ask-b { gap: 8px; } .sv-ask-in .btn-sub { border-radius: 4px; } .sh-asked { min-height: 44px; } .sh-asked input, .sv-chk input, .sh-mochi .sh-mochi-list input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--brown); } .sv-checks { list-style: none; margin: 0; padding: 0; } .sv-checks li + li { border-top: 1px solid var(--line-2); } .sv-chk { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; font-size: 15px; line-height: 1.45; cursor: pointer; } .sv-chk small { display: block; font-size: 13px; color: var(--ink-2); } .sv-chk.is-done > span > b { color: var(--ink-2); text-decoration: line-through; } .sv-sec .sh-know li { font-size: 15px; padding: 6px 0 6px 14px; } .sv-sec .sh-know li + li { border-top: 1px solid var(--line-2); } .sv-sec .sh-know li::before { top: 1.05em; } .sv-mcat + .sv-mcat { margin-top: 14px; } .sv-mcat h4 { margin: 0 0 4px; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--f-head); font-size: 15px; color: var(--brown); } .sv-mcnt { font-family: var(--f-body); font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; } .sv-bar { height: 4px; margin: 0 0 4px; background: var(--line); } .sv-bar i { display: block; width: 0; height: 100%; background: var(--orange-2); } .sh-mochi .sh-mochi-list { gap: 0; } .sh-mochi .sh-mochi-list li + li { border-top: 1px solid var(--line-2); } .sh-mochi .sh-mochi-list label { min-height: 44px; font-size: 15px; gap: 10px; } .sh-mochi .sh-mochi-list label.is-done > span:first-of-type { color: var(--ink-2); text-decoration: line-through; } /* 共有したしおり（見るだけ）：つまみ・［メモ］［その他］・足すボタン・頭のボタンは出さない（書いてあるメモの文は出す） */ .sh-view .sv-hbtns, .sh-view #sv-set, .sh-view .sv-hint, .sh-view .sv-last, .sh-view [data-sv-memogo] { display: none !important; } .sh-view .sv-mov > .sv-line { min-height: 34px; padding-right: 0; } .sh-view .sv-mov > .sv-no { top: 2px; } /* 印刷：予定と準備を両方出す。押すものは出さない */ @media print { .hd, .ft, .crumbs, .sv-hbtns, .sv-panel, .sv-switch, .sv-hint, .sv-grip, .sv-acts, .sv-menu, .sv-memoed, .sv-addbtn, .sv-last, .sv-undo, .sv-facehd .btn-sub, .sv-staypick, .sv-staybook, .sv-staylinks, .sv-route, .sh-stayacts, .sh-bar, .pickbar, .stick, dialog, .sh-bookmemo, .toast, .sh-book, .map, .map-credit { display: none !important; } body { background: #fff; } .sv-faces { display: block; } .sv-face { display: block !important; } .sv-mov > .sv-line { padding-right: 0; } .sv-day, .sv-sec { break-inside: avoid; } } /* 261003_03：会員（わたしの旅のログインの欄・リンクを開いたページ・同期の知らせ）。docs/会員と同期_計画_261003.md */ .mlogin { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; } .mlogin h2 { margin-top: 0; } .mlogin-signed { padding: 8px 12px; } .mlogin-account > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; min-height: 44px; list-style: none; cursor: pointer; } .mlogin-account > summary::-webkit-details-marker { display: none; } .mlogin-account > summary::after { content: '管理 ▾'; color: var(--brown); font-size: 13px; font-weight: 700; white-space: nowrap; } .mlogin-account[open] > summary::after { content: '閉じる ▴'; } .mlogin-account > summary:focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; } .mlogin-state { font-weight: 700; color: var(--brown); white-space: nowrap; } .mlogin-email { min-width: 0; overflow-wrap: anywhere; font-size: 14px; } .mlogin-account-body { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; } .mlogin-account-body > p:first-child { margin-top: 0; } .mlogin-form { display: grid; gap: 8px; max-width: 480px; margin: 12px 0; } .mlogin-form[hidden] { display: none; } .mlogin-l { font-size: 13px; font-weight: 700; color: var(--ink-2); } .mlogin-form input[type] { min-height: 48px; } /* 余白は共通の指定のまま（✕ の下に文字がもぐらないように） */ .mlogin-form input[name="code"] { letter-spacing: .3em; font-variant-numeric: tabular-nums; max-width: 12em; } .mlogin-form .btn { justify-self: start; min-height: 48px; } .mlogin-btns { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; } .mlogin-del { margin-top: 16px; border-top: 1px solid var(--line-2); padding-top: 12px; } .mlogin-del summary { cursor: pointer; color: var(--ink-2); min-height: 44px; display: flex; align-items: center; } .mlogin-del label { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; } .msync-bar.on { pointer-events: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .msync-btn { background: transparent; border: 1px solid rgba(255, 255, 255, .7); color: #fff; border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 14px; min-height: 40px; cursor: pointer; } /* ════ 261008_01：しおりの作り直し（本人が選んだ見本「案1」＋ドラッグ＋案3 の地図。docs/しおりの作り直し_計画_261008.md）════ */ /* しおりをつくる：行き先は打つと候補が出る欄＋宿の多い行き先のボタン、泊数はボタン */ .shnew-head .lead { margin: 4px 0 0; } .shnew { gap: 10px; } .shnew-l { display: block; margin: 6px 0 0; font-size: 15px; font-weight: 700; color: var(--brown); } .shnew-sub { margin: 0; font-size: 13px; color: var(--ink-2); } .shnew-q { position: relative; } .shnew .shnew-qin[type], .shnew .shnew-date[type] { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); color: var(--ink); font: inherit; font-size: 16px; } .shnew-hits { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--card); max-height: 320px; overflow-y: auto; } .shnew-hits[hidden] { display: none; } .shnew-hits li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 12px; border-bottom: 1px solid var(--line-2); font-size: 16px; cursor: pointer; } .shnew-hits li:last-child { border-bottom: 0; } .shnew-hits li small { font-size: 13px; color: var(--ink-2); } .shnew-hits li[aria-selected="true"], .shnew-hits li:hover { background: var(--orange-soft); } .shnew-hits .shnew-none { cursor: default; font-size: 14px; color: var(--ink-2); } .shnew-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; } .shnew-chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); color: var(--brown); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; } .shnew-chip:hover { border-color: var(--orange-line); } .shnew-chip[aria-pressed="true"] { background: var(--brown); border-color: var(--brown); color: #fff; } .shnew-chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } .shnew-nights .shnew-chip { flex: 1 1 0; min-width: 0; padding: 0 6px; white-space: nowrap; } .shnew-more { display: block; margin: 8px 0 0; } .shnew-more[hidden] { display: none; } .shnew-more select { width: 100%; min-height: 48px; } .shnew-name { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); } .shnew-name b { color: var(--ink); } .shnew-go { margin: 4px 0 0; } .shnew-go .btn { min-height: 52px; font-size: 17px; } .shnew-other { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 4px; font-size: 15px; } .shnew-other a { display: inline-flex; align-items: center; min-height: 44px; } /* 予定の行：行を押すと操作が開く */ .sv-rowbtn { display: block; width: 100%; min-height: 44px; margin: 0; padding: 4px 52px 6px 0; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .sv-rowbtn > .sv-line { display: flex; min-height: 34px; } .sv-rowbtn > .sv-meta { display: block; } .sv-rowbtn .sv-nm { font-weight: 700; color: var(--brown); text-decoration: underline; text-decoration-color: var(--orange-line); text-underline-offset: 3px; } .sv-rowbtn:hover .sv-nm { text-decoration-color: var(--brown); } .sv-rowbtn:focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; } .sv-row.is-open > .sv-rowbtn { background: var(--orange-soft); } .sv-nopos { display: inline-block; padding: 0 6px; border: 1px solid var(--line); border-radius: 2px; background: var(--card); color: var(--ink-2); font-size: 12.5px; line-height: 1.6; } .sv-credit { margin: 0 52px 4px 0; } .sv-menulink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); color: var(--brown); font-size: 14px; font-weight: 700; text-decoration: none; } .sv-menulink:hover { border-color: var(--orange-line); } .sv-memoed { margin-right: 52px; } /* 操作の板：2列にそろえる。場所を決める・外すは1行ぜんぶ（つまみは行の右上だけなので、板は右まで使えます） */ .sv-menu { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; max-width: 440px; margin-right: 0; } .sv-menu > button, .sv-menu > .sv-menulink, .sv-menu > select { width: 100%; min-width: 0; padding: 0 8px; font-size: 14px; } .sv-menu > .sv-menulink { justify-content: center; text-align: center; } .sv-menu > [data-sv-pin], .sv-menu > .sv-del { grid-column: 1 / -1; } .sv-menu:not(:has([data-sv-name])) > [data-sv-memo] { grid-column: 1 / -1; } @media (min-width: 600px) { .sv-mov > .sv-line, .sv-own > .sv-line { padding-right: 0; } } .sv-candn { font-size: 13px; color: var(--ink-2); } .sv-added > div { border-color: var(--ok-line); } .sv-last { padding-left: 56px; } .sv-last .sv-addbtn { min-height: 48px; padding: 0 16px; font-size: 15px; } /* 全画面（場所を足す・宿を選ぶ）。ブラウザの「戻る」でも閉じる */ .sv-sheet.sv-full { inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; } .sv-full .sv-sheethd { gap: 12px; } .sv-full .sv-sheethd h2 { margin: 0; flex: 1 1 auto; } .sv-full .sv-sheethd, .sv-full .sv-where, .sv-full .sv-find, .sv-full .sv-sheetin { padding-left: max(12px, calc((100% - 720px) / 2)); padding-right: max(12px, calc((100% - 720px) / 2)); } .sv-find input[type] { min-height: 48px; } .sv-findsub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 0; } .sv-findsub .sv-google { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 15px; } .sv-findsub .sv-google .ic { width: 16px; height: 16px; } .sv-findsub .sv-clipbtn { width: auto; min-height: 44px; font-weight: 700; } .sv-nameadd { margin: 12px 0 0; padding: 12px; border: 1px solid var(--orange-line); border-radius: 4px; background: var(--orange-soft); } .sv-nameadd-b { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .sv-nameadd-b .btn-sub { min-height: 48px; border-radius: 4px; font-size: 15px; } .sv-nameadd .sv-cap { margin-top: 8px; } .sv-cmapw { margin: 12px 0 0; } .map.sv-cmap { height: 240px; min-height: 0; margin: 0; border: 1px solid var(--line); border-radius: 4px; } .sv-cmapw .map-credit { margin: 2px 0 0; } .sv-cmapcard:empty { display: none; } .sv-cmapcard { margin: 6px 0 0; padding: 0 10px; border: 1px solid var(--orange-line); border-radius: 4px; background: var(--card); } .sv-cmapcard .sv-cand { border-bottom: 0; } /* 261008_02：日ごとの［地図］は、見出しの行の右に（帯の色は見出しの行ごと） */ .sv-dayhd { display: flex; align-items: center; gap: 8px; padding: 0 8px 0 0; background: var(--line-2); border-bottom: 1px solid var(--line); border-radius: 4px 4px 0 0; } .sv-dayhd .sv-dayh { flex: 1 1 auto; min-width: 0; background: transparent; border-bottom: 0; } .sv-daymap { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border-radius: 4px; font-size: 15px; } .sv-daymap .fi { width: 20px; height: 20px; margin: 0; } .sv-mapempty { margin: 0; padding: 10px 12px; font-size: 14px; color: var(--ink-2); } @media print { .sv-daymap { display: none !important; } } /* 261008_02：候補の一覧の番号（地図の丸と同じ番号・色・形。影は付けない） */ .sv-cand > .sv-cno { flex: 0 0 auto; align-self: flex-start; width: 26px; height: 26px; margin-top: 1px; font-size: 13px; box-shadow: none; } .sv-staydlg .sv-staypick { margin: 12px 0; border: 0; padding: 0; } /* 地図で場所を決める（全画面。真ん中に十字） */ .sv-pindlg { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--card); color: var(--ink); } .sv-pindlg[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; } .sv-pindlg::backdrop { background: rgba(51, 38, 28, .45); } .sv-pinname { margin: 0; padding: 8px 12px; font-size: 15px; font-weight: 700; color: var(--brown); border-bottom: 1px solid var(--line); } .sv-pinname:empty { display: none; } .sv-pinmap { position: relative; min-height: 0; } .map.sv-pinbox { position: absolute; inset: 0; height: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; } .sv-cross { position: absolute; left: 50%; top: 50%; z-index: 500; width: 36px; height: 36px; margin: -18px 0 0 -18px; pointer-events: none; } .sv-cross::before, .sv-cross::after { content: ""; position: absolute; background: var(--brown); box-shadow: 0 0 0 2px #fff; } .sv-cross::before { left: 17px; top: 0; width: 2px; height: 36px; } .sv-cross::after { left: 0; top: 17px; width: 36px; height: 2px; } .sv-pinnote { margin: 0; padding: 6px 12px; font-size: 13px; line-height: 1.5; color: var(--ink-2); border-top: 1px solid var(--line); } .sv-pinbtns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); } .sv-pinbtns .btn { flex: 1 1 12em; min-height: 52px; } .sv-pinbtns .btn-ghost { min-height: 52px; } @media print { .sv-rowbtn { padding-right: 0; } .sv-rowbtn .sv-nm { text-decoration: none; } .sv-nameadd, .sv-findsub { display: none !important; } } /* ════ 261010_01：旅の思い出（docs/旅の思い出_計画_261010.md・assets/js/omoide.js）════ 見る画面は案2（旅の日記）、書く画面は案1（アルバム）。本人が選んだ見本 docs/見本_思い出_261010/。 角は 4px まで。影は付けない。色はサイトの色だけ。押すところは 44px 以上 */ .om { max-width: 600px; margin: 0 auto; padding-block: 4px 24px; } .om .btn, .om .btn-sub, .om-ov .btn, .om-ov .btn-sub { border-radius: 4px; } .om .btn-sub { font-size: 15px; } .om-kick { margin: 14px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-2); } .om-h1 { margin: 0 0 2px; font-size: 1.4rem; line-height: 1.4; overflow-wrap: anywhere; } .om-h1:focus { outline: none; } .om-when { margin: 0 0 10px; font-size: 15px; color: var(--ink-2); } .om-h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 8px; font-size: 1.15rem; } .om-h2 small { font-family: var(--f-body); font-size: 13px; font-weight: 400; color: var(--ink-2); } .om-sec { margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); } .om-sec-ph { margin-top: 6px; padding-top: 0; border-top: 0; } .om-blk + .om-blk { margin-top: 16px; } .om-lab { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--brown); } .om-lab2 { display: block; margin: 12px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); } .om textarea { display: block; min-height: 120px; resize: vertical; border-radius: 4px; } .om input[type="text"] { border-radius: 4px; } .om .clr > .x { right: 0; width: 44px; height: 44px; border-radius: 4px; } .om-cntr { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); text-align: right; } .om-ebar { display: flex; justify-content: flex-end; margin: 10px 0 0; } .om-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; } .om-wide { width: 100%; } .om-empty { margin: 14px 0; color: var(--ink-2); } .om-where { margin: 22px 0 0; padding: 10px 12px; background: var(--line-2); border-radius: 4px; font-size: 13px; line-height: 1.6; color: var(--ink-2); } /* 札（文字で） */ .om-tag { display: inline-block; padding: 0 7px; border: 1px solid var(--line); border-radius: 2px; background: var(--line-2); color: var(--ink-2); font-size: 13px; font-weight: 700; line-height: 1.7; white-space: nowrap; } .om-tag-1 { background: var(--orange-soft); border-color: var(--orange-line); color: var(--brown); } .om-tag-3 { background: var(--unk-bg); border-color: var(--unk-line); color: var(--unk); } .om-tag-no { background: transparent; border-style: dashed; border-color: var(--unk-line); font-weight: 400; } .om-tag-cv { background: var(--brown); border-color: var(--brown); color: #fff; } /* 選ぶボタン（また行きたい？・行った／行かなかった） */ .om-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .om-seg2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .om-sb { min-height: 44px; padding: 0 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); color: var(--brown); font: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; cursor: pointer; } .om-sb:hover { border-color: var(--orange-line); } .om-sb[aria-pressed="true"] { background: var(--brown); border-color: var(--brown); color: #fff; } .om-dogs { display: flex; flex-wrap: wrap; gap: 8px; } .om-dogb { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); color: var(--brown); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; } .om-dogb img { width: 32px; height: 32px; border-radius: 50%; background: #fff; } .om-dogb[aria-pressed="true"] { padding: 0 15px 0 7px; background: var(--orange-soft); border: 2px solid var(--brown); } /* 書く画面の写真（表紙を大きく、ほかは3列。写真は 16:9 の枠いっぱい） */ .om-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 -16px; } .om-gb, .om-th { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: var(--line-2); cursor: pointer; } .om-gb img, .om-th img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .om-gb:focus-visible, .om-th:focus-visible { outline-offset: -3px; } .om-gcov { grid-column: 1 / -1; } @media (min-width: 640px) { .om-grid { margin: 0; } .om-gcov img { border-radius: 4px 4px 0 0; } } .om-gfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 4px; } .om-cnt { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); font-variant-numeric: tabular-nums; } .om-cnt b { color: var(--ink); } .om-gempty { display: grid; justify-items: center; gap: 10px; padding: 24px 16px; background: var(--line-2); border: 1px dashed var(--unk-line); border-radius: 4px; text-align: center; } .om-gempty p { margin: 0; } .om-prog { margin: 8px 0 0; padding: 8px 12px; background: var(--orange-soft); border: 1px solid var(--orange-line); border-radius: 4px; font-size: 15px; font-weight: 700; color: var(--brown); } .om-nomem { padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; } .om-nomem p { margin: 0 0 10px; font-size: 15px; } /* 寄った場所（1行ずつ。押すとその下に書く欄） */ .om-dayh2 { margin: 14px 0 0; padding: 0 0 4px; font-family: var(--f-body); font-size: 14px; font-weight: 700; color: var(--ink-2); } .om-pl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .om-pr { border-bottom: 1px solid var(--line); scroll-margin-top: 8px; } .om-prb { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 60px; margin: 0; padding: 8px 2px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; } .om-prb:hover .om-prn { text-decoration: underline; text-underline-offset: .2em; } .om-pr.is-open > .om-prb { background: var(--orange-soft); } .om-pic { flex: none; width: 32px; height: 32px; object-fit: contain; } .om-prt { flex: 1 1 auto; min-width: 0; } .om-prn { display: block; font-size: 16px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; } .om-pr.is-no .om-prn { color: var(--ink-2); font-weight: 400; } .om-prs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 2px 0 0; } .om-rowc { font-size: 13px; color: var(--ink-2); } .om-chev { flex: none; width: 20px; height: 20px; color: var(--ink-2); } .om-prb[aria-expanded="true"] .om-chev { transform: rotate(90deg); } .om-pe { margin: 0 0 12px; padding: 12px; background: var(--card); border: 1px solid var(--orange-line); border-radius: 4px; } .om-pth { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0 0 8px; } .om-perow { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 14px 0 0; } .om-perow .ic-out { width: 16px; height: 16px; stroke-width: 2.4; } /* 共有する */ .om-lead { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--ink-2); } .om-warn { padding: 12px 14px; background: var(--cond-bg); border: 1px solid var(--cond-line); border-radius: 4px; } .om-warn h3 { margin: 0 0 4px; font-size: 1rem; color: var(--cond); } .om-warn h3:focus, .om-conf p:focus, .om-bigconf p:focus { outline: none; } .om-warn p { margin: 0; font-size: 15px; } .om-warn ul { margin: 6px 0 8px; padding: 0 0 0 1.4em; font-size: 15px; line-height: 1.7; } .om-ok { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--ok); } .om-off { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--ink-2); } .om-url { margin: 0; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; } .om-conf { margin: 10px 0 0; padding: 12px; background: var(--ng-bg); border: 1px solid var(--ng-line); border-radius: 4px; } .om-conf p { margin: 0; font-size: 15px; font-weight: 700; color: var(--ng); } .om .om-del, .om .om-del:hover { color: var(--ng); } /* 見る画面（案2 旅の日記） */ .om-vcover { display: block; width: calc(100% + 32px); margin: 8px -16px 0; padding: 0; border: 0; background: var(--line-2); cursor: zoom-in; } .om-vcover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } @media (min-width: 640px) { .om-vcover { width: 100%; margin: 12px 0 0; } .om-vcover img { border-radius: 4px; } } .om-vhead { margin: 0 0 4px; } .om-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0 0; font-size: 15px; } .om-dog { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--brown); } .om-dog img { width: 28px; height: 28px; border-radius: 50%; background: #fff; } .om-vnote { margin: 10px 0 0; padding: 8px 12px; background: var(--card); border-left: 3px solid var(--orange); font-size: 16px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; } .om-vbtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 14px 0 0; } .om-day { margin: 26px 0 0; } .om-dayh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; margin: 0 0 10px; padding: 0 0 6px; border-bottom: 2px solid var(--brown); font-size: 1.2rem; } .om-dayh small { font-family: var(--f-body); font-size: 15px; font-weight: 400; color: var(--ink-2); } .om-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .om-card { padding: 10px 12px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; } .om-cardh { display: flex; align-items: flex-start; gap: 10px; } .om-no { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brown); color: #fff; font-size: 14px; font-weight: 800; line-height: 1; } .om-no-stay { background: var(--stay); font-size: 12px; } .om-cardt { flex: 1 1 auto; min-width: 0; } .om-cardn { margin: 2px 0 0; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; } .om-cardn a { color: var(--brown); } .om-genre { display: block; font-size: 13px; color: var(--ink-2); } .om-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; } .om-th img { border-radius: 2px; } .om-cardag { margin: 8px 0 0; } /* 261010_04：評価は★の5段階（本人「５段階でクリックで決める」）。押す星は 44px。見るときは星を並べるだけ */ .om-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; } .om-star { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--line); font: inherit; font-size: 30px; line-height: 1; cursor: pointer; } .om-star.on { color: var(--orange-2); } .om-star:hover { background: var(--orange-soft); } .om-ratet { margin-left: 8px; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; } .om-rv { color: var(--orange-2); font-size: 16px; letter-spacing: 1px; white-space: nowrap; } .om-rv i { font-style: normal; color: var(--line); } .om-vrate { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; } .om-vratel { font-size: 13px; font-weight: 700; color: var(--ink-2); } .om-vrate .om-rv { font-size: 20px; } /* 261010_04：場所を足す（日ごとの下のボタンと、名前でさがす画面） */ .om-addrow { margin: 8px 0 0; } /* 261014_04：しおりにあって、思い出に無い場所（保存した思い出は、しおりに合わせないため。［思い出に入れる］で1つずつ） */ .om-only { margin: 10px 0 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--r-s); background: var(--card); } .om-only-h { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); } .om-only ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .om-only li { display: flex; align-items: center; gap: 8px; min-width: 0; } .om-only img { flex: none; } .om-only-n { flex: 1; min-width: 0; font-weight: 700; color: var(--brown); overflow-wrap: anywhere; } .om-only .btn-sub { flex: none; } .om-plnone { margin: 0; padding: 10px 2px; border-bottom: 1px solid var(--line); } /* 261011_01：行の右のつまみ。押したまま上下に動かすと、順番や日を変えられる（しおりのつまみと同じ形。影は付けない） */ [data-om-places] { position: relative; } .om-prrow { display: flex; align-items: center; gap: 4px; } .om-prrow .om-prb { flex: 1 1 auto; min-width: 0; } /* 261011_03：しおりのつまみと同じく、枠と白地をやめて薄い3本線だけに（押せる大きさ 44px はそのまま） */ .om-grip { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ink-3); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .om-grip .ic { width: 20px; height: 20px; stroke-width: 1.6; } .om-grip:hover { background: var(--line-2); color: var(--ink-2); } .om-grip:focus-visible { outline: 2px solid var(--brown); outline-offset: -2px; } .om-pr.is-drag { position: relative; z-index: 7; background: var(--card); outline: 2px solid var(--orange-line); outline-offset: -2px; transform: translate3d(0, var(--om-drag-y, 0px), 0); } .om-pr.is-drag .om-grip { background: transparent; color: var(--brown); } body.om-dragging, body.om-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; } .om-dropline { position: absolute; left: 0; right: 0; height: 4px; margin-top: -2px; background: var(--brown); border-radius: 2px; pointer-events: none; z-index: 8; } .om-dropline[hidden] { display: none; } .om-addlist { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); } .om-addli { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); } .om-addt { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; } .om-addt b { font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; } .om-addt small { font-size: 13px; color: var(--ink-2); } .om-addli .btn-sub { flex: none; } .om-ov-light input[type="search"] { border-radius: 4px; } .om-cardnote { margin: 6px 0 0; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; } /* 重ねて出す画面（写真を大きく見る・この場所の写真を選ぶ） */ .om-ov { display: none; } .om-ov.on { display: block; position: fixed; inset: 0; z-index: 70; overflow-y: auto; overscroll-behavior: contain; padding: env(safe-area-inset-top, 0px) 16px calc(24px + env(safe-area-inset-bottom, 0px)); } .om-ov-dark { background: var(--ink); color: #fff; } .om-ov-light { background: var(--bg); color: var(--ink); } .om-ovin { max-width: 600px; margin: 0 auto; } .om-ovtop { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .om-ovh { margin: 0; font-family: var(--f-body); font-size: 15px; font-weight: 700; color: inherit; } .om-ov-light .om-ovh { font-family: var(--f-head); font-size: 1.1rem; color: var(--brown); } .om-db { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 1px solid #fff; border-radius: 4px; background: transparent; color: #fff; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; cursor: pointer; } .om-db[aria-expanded="true"], .om-db[aria-pressed="true"] { background: #fff; color: var(--ink); } .om-db:disabled { border-color: var(--ink-2); color: var(--ink-3); cursor: default; } .om-db-del { border-color: var(--ng-line); color: var(--ng-bg); } .om-db-delok { background: var(--ng-bg); border-color: var(--ng-bg); color: var(--ng); } .om-bigf { margin: 0 -16px; } .om-bigf img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; background: var(--ink); } .om-biginfo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 28px; margin: 10px 0 0; font-size: 15px; } .om-bignav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 0; } .om-bigops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--ink-2); } .om-bigops .om-db { padding: 0 4px; } .om-bigpl { display: grid; gap: 8px; margin: 10px 0 0; } .om-bigpl .om-db { justify-content: flex-start; text-align: left; } .om-bigconf { margin: 10px 0 0; padding: 12px; border: 1px solid var(--ng-line); border-radius: 4px; } .om-bigconf p { margin: 0; font-size: 15px; font-weight: 700; } .om-pkgrid { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; } @media (min-width: 500px) { .om-pkgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .om-pkb { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; } .om-pkb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--line-2); } .om-pkb[aria-pressed="true"] img { outline: 4px solid var(--brown); outline-offset: -4px; } .om-pkin { display: block; min-height: 22px; padding: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); } .om-pkb[aria-pressed="true"] .om-pkin { color: var(--brown); font-weight: 700; } .om-pkbar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 14px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: 1px solid var(--line); } .om-toast-ng { background: var(--ng) !important; } /* 共有のページ（見られないとき） */ .om-stopped { max-width: 600px; margin: 32px auto; padding: 18px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; } .om-stopped h1 { margin: 0 0 6px; font-size: 1.25rem; } .om-stopped p { margin: 0 0 10px; color: var(--ink-2); } .om-stopped .btn-sub { border-radius: 4px; } .om-shared { margin: 24px 0 0; text-align: center; } /* 261010_02：ボタンと見出しに添える絵（依頼書13番） */ .om-bic { flex: none; width: 22px; height: 22px; } .om-h2 .om-bic { width: 26px; height: 26px; align-self: center; } /* わたしの旅の行った旅：［思い出を残す］ */ .mine-om { border-radius: 4px; } /* トップ：しおりの帯の下の、思い出の帯（本人「トップページのしおりの下にこの新しい機能を紹介したい」） */ .tp-band-om { margin-top: 10px; background: var(--card); border-color: var(--line); } .tp-band-om .tp-band-i { background: var(--orange-soft); border-color: var(--orange-line); } @media (min-width: 760px) { .tp-band-om { margin-top: 10px; } }