@charset "utf-8"; /* ========================================================================== Gelatin Trip — スタイルシート -------------------------------------------------------------------------- world-index.html から で 読み込まれています。見た目に関することはすべてこのファイルにあります。 【デザインの方針】 ・水彩紙のようなざらついた紙の上に、活版印刷で文字を押したイメージ。 → 紙の質感は「9. 紙のテクスチャ」、押し込まれた文字は --press 系の text-shadow（「2. 基本設定」内）で作っています。 ・色は寒色系。地図のドットは緑 → 藤色 → 水色 のグラデーション。 （ドットの色だけは JavaScript 側で指定 → world-index.html の DOT_COLORS） 【目次】 1. カラーとフォントの設定（:root）★まずここ 2. 全体のリセットと基本設定 3. ヘッダー 4. 地域フィルターのボタン 5. 地図まわり（canvas / ピン / ラベル） 6. ホバーで出る記事カード 7. 下部の地域別インデックス 8. スマートフォン向けの調整 9. 紙のテクスチャ（画面全体にかかる粒子） ========================================================================== */ /* ============================================================================ 1. カラーとフォントの設定（★ここを変えると全体の印象が変わります） ---------------------------------------------------------------------------- :root は「ページ全体で使う変数置き場」です。 ここで決めた値を、下の CSS から var(--paper) のように呼び出します。 色は oklch(明るさ 鮮やかさ 色相) 形式。 明るさ … 0=黒 〜 1=白 鮮やかさ… 0=無彩色（大きいほど鮮やか） 色相 … 150=緑 / 220=水色 / 258=藍 / 285=藤色 ========================================================================== */ :root{ /* --- 紙と文字 ------------------------------------------------------- */ --paper : oklch(0.988 0.002 240); /* 紙の色（ほぼ白。ごくわずかに青み） */ --paper-hi : oklch(1 0 240); /* 活版の「盛り上がり」に使う白 */ --ink : oklch(0.32 0.035 258); /* 文字のメイン（濃い藍） */ --ink-mid : oklch(0.55 0.030 258); /* 補足文字 */ --ink-soft : oklch(0.70 0.025 258); /* いちばん薄い文字 */ --rule : oklch(0.885 0.015 250); /* 細い罫線 */ --accent : oklch(0.56 0.105 265); /* アクセント（藤色）。リンクhover時など */ --pin : oklch(0.665 0.145 52); /* ★地図のピンの色（寒色に合わせた抑えたオレンジ） */ --pin-on : oklch(0.595 0.175 45); /* 選択中のピン（少し濃く・鮮やかに） */ /* --- 活版印刷の押し込み表現 ------------------------------------------ 文字の下側に紙の色のハイライト、上側にごく薄い影を置くと 「紙にへこんで見える」ようになります。見出しなどに使用。 */ /* TRIP06 と揃えて、白地の文字はすべて同じ陰影（1px 右下の白）にしています。 3つに分けてあるのは、将来見出しだけ強めたいときのためです。 */ --press-sm : 1px 1px 0px rgba(255,255,255,1); /* 小さい文字・本文用 */ --press : 1px 1px 0px rgba(255,255,255,1); /* 中見出し用 */ --press-lg : 1px 1px 0px rgba(255,255,255,1); /* 大見出し用 */ /* --- 書体 ------------------------------------------------------------ EB Garamond … 欧文の明朝（活版の雰囲気） Zen Old Mincho… 和文の明朝（欧文にない文字はこちらが使われる） Zen Kaku Gothic New … 本文の和文ゴシック */ /* ★地図の都市名に敷く「紙色の光彩」。文字のまわりを紙の色で薄く塗って、 下の地図ドットを消し、文字を浮かび上がらせます。 見にくいときは 2px を 3px に、消したいときは行ごと削除してください。 */ --halo : 0 0 2px var(--paper), 0 0 2px var(--paper), 0 0 4px var(--paper), 1px 0 1px var(--paper), -1px 0 1px var(--paper), 0 1px 1px var(--paper), 0 -1px 1px var(--paper); /* 欧文はすべて Century Gothic 系（幾何学サンセリフ）。 端末に無い場合は URW Gothic → Questrial（Google Fonts）で代用します。 和文だけ用途で書き分け：--serif = 明朝（見出し）／--sans = ゴシック（本文） */ --gothic: "Century Gothic",CenturyGothic,"URW Gothic","Questrial","Avenir Next",Futura; --serif : var(--gothic),"Zen Old Mincho",serif; --sans : var(--gothic),"Zen Kaku Gothic New",sans-serif; } /* ============================================================================ 2. 全体のリセットと基本設定 ========================================================================== */ *{ box-sizing:border-box; } /* 幅の計算に padding を含める（崩れにくい） */ html,body{ margin:0; padding:0; } body{ /* 紙の質感は TRIP06 と同じやり方：紙色の上に uploads/bg01.png を repeat / 100px で敷きます（フィルターの膜ではなく背景そのもの）。 */ background-color:var(--paper); background-image:url("uploads/bg01.png"); background-repeat:repeat; background-size:100px 100px; color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; text-wrap:pretty; /* 日本語の不自然な行末を減らす */ /* ★活版の押し込みを「すべての文字」に効かせる。 text-shadow は子要素に継承されるので、ここで一括指定します。 TRIP06 と同じ、白地に活字を押した陰影です。 */ text-shadow:1px 1px 0px rgba(255,255,255,1); } /* 罫線も「紙に押された線」に見えるよう、下側に白のハイライトを添える。 ボーダーを持つ要素にまとめて適用（枠線の内側に1pxの白線が入る） */ header.mast, .filters, .index-head, footer{ box-shadow:0 1px 0 var(--paper-hi); } .card ul, .card li, .entry{ position:relative; } .card li{ box-shadow:0 1px 0 var(--paper-hi); } a{ color:inherit; text-decoration:none; } a:hover{ color:var(--accent); } /* 中身の最大幅と左右余白。clamp(最小,可変,最大) で画面幅に応じて自動調整 */ .wrap{ max-width:1560px; margin:0 auto; padding:0 clamp(20px,4vw,64px); } /* ============================================================================ 3. ヘッダー（タイトルと件数） ========================================================================== */ header.mast{ border-bottom:1px solid var(--ink); margin-top:clamp(24px,4vw,56px); } .mast-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:14px; flex-wrap:wrap; } /* サイト名はロゴ画像。h1 は入れ物として残しています */ .mast h1{ margin:0; line-height:0; } .mast h1 img{ display:block; /* 元画像は 185×40px。ロゴは押し込み表現を付けず、くっきり見せます。 ★等倍（185px）＝100%。最も鮮明に出ます。 小さくしたいときはこの数値だけ変えてください（148px＝80%）。 */ width:185px; height:auto; image-rendering:-webkit-optimize-contrast; /* 縮小時のにじみを抑える */ } /* キャッチコピー。★幅を上のロゴ（185px）にそろえています。 文字数が変わったときは font-size を 0.5px 単位で微調整してください。 （text-align-last:justify で、残りは文字間に自動で振り分けられます） */ .mast .sub{ width:185px; font-size:11px; letter-spacing:.06em; color:var(--ink-mid); margin-top:12px; text-align:justify; text-align-last:justify; -moz-text-align-last:justify; text-justify:inter-character; } /* 右側の「3 CITIES / 4 STORIES …」。数字は JS が自動計算 */ .mast .meta{ display:flex; gap:28px; font-size:11.5px; letter-spacing:.16em; color:var(--ink-mid); padding-bottom:2px; } .mast .meta b{ display:block; font-family:var(--serif); font-size:24px; font-weight:500; letter-spacing:.02em; color:var(--ink); margin-bottom:4px; text-shadow:var(--press); } /* ============================================================================ 4. 地域フィルターのボタン ========================================================================== */ .filters{ display:flex; gap:6px; flex-wrap:wrap; padding:16px 0 4px; border-bottom:1px solid var(--rule); } .filters button{ font-family:var(--sans); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; background:none; border:1px solid var(--rule); color:var(--ink-mid); padding:7px 14px; border-radius:999px; /* 999px = ピル型 */ cursor:pointer; transition:.18s; } .filters button:hover{ border-color:var(--ink-soft); color:var(--ink); } /* aria-pressed="true" は「選択中」の印。JS が付け外しします */ .filters button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); text-shadow:none; } /* ============================================================================ 5. 地図まわり ---------------------------------------------------------------------------- .map-scroll … 画面が狭いとき横スクロールさせる外枠 .map-stage … 地図(canvas)とピンを重ねる土台。position:relative が要 .pin … 都市のポイント。JS が left/top を計算して置きます ========================================================================== */ .map-wrap{ position:relative; } /* 右下の操作ボタン。紙に置いたスタンプのような見た目 */ .zoomer{ position:absolute; right:12px; bottom:12px; z-index:30; display:flex; flex-direction:column; gap:6px; } .zoomer button{ width:32px; height:32px; border-radius:999px; cursor:pointer; font-family:var(--sans); font-size:14px; line-height:1; color:var(--ink-mid); background:oklch(0.988 0.002 240 / .82); border:1px solid oklch(0.32 0.035 258 / .16); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); box-shadow:0 6px 14px -10px oklch(0.32 0.035 258 / .5); transition:.18s; } .zoomer button:hover{ color:var(--ink); border-color:var(--ink-soft); } .zoomer button:active{ transform:translateY(1px); } .map-scroll{ overflow-x:auto; overflow-y:visible; padding:clamp(18px,3vw,40px) 0 8px; -webkit-overflow-scrolling:touch; } .map-stage{ touch-action:pan-y; /* 指では上下スクロール優先、横はドラッグで地図移動 */ position:relative; min-width:940px; } /* これより狭い画面では横スクロール */ canvas{ display:block; width:100%; } /* --- ピン本体 ------------------------------------------------------------- */ .pin{ position:absolute; transform:translate(-50%,-50%); /* 指定座標がピンの中心に来るよう補正 */ width:0; height:0; /* 大きさ0の「点」。中身はここから相対配置 */ z-index:2; } /* 見えない当たり判定。指でも押しやすい大きさですが、世界地図のように 都市が数pxしか離れていない縮尺では JS が --hit を小さくして、 隣の都市の判定が上にかぶってしまうのを防ぎます。 */ .pin .hit{ position:absolute; left:calc(var(--hit,32px) / -2); top:calc(var(--hit,32px) / -2); width:var(--hit,32px); height:var(--hit,32px); /* 判定そのものは JS（いちばん近いピンを選ぶ方式）が持っているので、 この四角はマウスを受け取りません。丸を中央に置くための入れ物です。 */ pointer-events:none; display:grid; place-items:center; } .pin .mark{ /* 見えている丸 */ width:9px; height:9px; background:var(--pin); border-radius:50%; box-shadow:0 0 0 3px var(--paper); /* 地図のドットと重なっても見えるよう紙色のフチ */ transition:transform .2s cubic-bezier(.2,.8,.3,1), background .2s; } /* data-on="1"＝選択中／下のリストからホバーされた状態 */ .pin[data-on="1"] .mark{ background:var(--pin-on); transform:scale(1.5); } /* --- ピンのラベル（都市名） ------------------------------------------------ */ /* --ly は「重なり回避で下にずらした量」。JS が自動計算して入れます（初期値0） */ .pin .lbl{ position:absolute; white-space:nowrap; translate:0 var(--ly,0px); font-family:var(--serif); font-size:13.5px; font-weight:500; letter-spacing:.06em; color:var(--ink); text-shadow:var(--halo); /* transition に translate を含めないこと。 重なり回避（--ly）の計算中にアニメーションしていると位置を測り誤ります。 */ transition:color .2s, opacity .2s; /* 都市名にもカーソルを合わせられる（丸だけでなく文字でもカードが開く） */ cursor:pointer; } .pin .lbl small{ display:block; font-family:var(--sans); font-size:11px; letter-spacing:.08em; color:var(--ink-mid); margin-top:2px; text-shadow:var(--halo); } .pin .lbl:hover{ color:var(--pin-on); } /* ラベルが密集していて置き場所が無いとき、JS が .hid を付けて隠します。 ピンに触れる／選ばれているときだけ、その場に浮かび上がります。 */ /* 隠したラベルは、見えているときも「触れない」ままにします。 （幅のあるラベルが隣の都市のピンを覆ってしまうのを防ぐため） */ .pin .lbl.hid{ opacity:0; pointer-events:none; } .pin:hover .lbl.hid, .pin[data-on="1"] .lbl.hid{ opacity:1; z-index:6; } /* ラベルをピンのどちら側に出すか。JS のデータ側 anchor:"r"/"l"/"t"/"b" と対応 r=右 / l=左 / t=上 / b=下。★ラベル同士が重なったらここで逃がします */ .pin[data-anchor="r"] .lbl{ left:12px; top:-8px; } .pin[data-anchor="l"] .lbl{ right:12px; top:-8px; text-align:right; } .pin[data-anchor="t"] .lbl{ left:50%; transform:translateX(-50%); bottom:13px; text-align:center; } .pin[data-anchor="b"] .lbl{ left:50%; transform:translateX(-50%); top:13px; text-align:center; } .pin[data-on="1"] .lbl{ color:var(--pin-on); } .pin[data-dim="1"]{ opacity:.16; } /* フィルター対象外のピン */ .map-stage[data-open="1"] .pin:not([data-on="1"]){ opacity:.28; } /* カードが開いている間は他を薄く */ /* ============================================================================ 6. ホバーで出る記事カード ========================================================================== */ .card{ position:absolute; z-index:20; width:300px; /* 透明な付箋を置いたような効果。 ・background の最後の数値（0.58）が不透明度。1に近いほど濃い紙になります ・backdrop-filter で、下の地図をほんの少しぼかして白く沈めています */ background:oklch(0.988 0.002 240 / .58); backdrop-filter:blur(3px) saturate(.9) brightness(1.04); -webkit-backdrop-filter:blur(3px) saturate(.9) brightness(1.04); border:1px solid oklch(0.32 0.035 258 / .12); box-shadow:0 20px 44px -26px oklch(0.32 0.035 258 / .34); padding:18px 20px 8px; overflow:visible; /* 初期は非表示。data-show="1" が付くとふわっと出る */ opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .16s, transform .16s; } .card[data-show="1"]{ opacity:1; visibility:visible; transform:translateY(0); } /* 「×」はスマホだけ。パソコンはマウスを離せば閉じるので不要です */ .card .close{ display:none; } .card h3{ font-family:var(--serif); font-size:23px; font-weight:500; margin:0; letter-spacing:.06em; text-shadow:var(--press); } .card .cc{ font-size:11px; letter-spacing:.2em; color:var(--ink-soft); text-transform:uppercase; margin:6px 0 4px; } .card .geo{ font-size:11px; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:13px; font-variant-numeric:tabular-nums; } .card ul{ list-style:none; margin:0; padding:0 4px 0 0; border-top:1px solid var(--rule); /* 記事が多い都市（ヘルシンキなど）ではカードが伸びすぎないよう、 一定の高さを超えたらリスト内だけスクロールさせます。 */ max-height:300px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:oklch(0.32 0.035 258 / .28) transparent; } /* スクロールバーを細く、でも見えるように（Chrome / Safari） */ .card ul::-webkit-scrollbar{ width:6px; } .card ul::-webkit-scrollbar-thumb{ background:oklch(0.32 0.035 258 / .26); border-radius:3px; } .card ul::-webkit-scrollbar-track{ background:transparent; } /* まだ下に記事があるときだけ、下端を白くぼかして「SCROLL ▾」を出します。 一番下まで読むと自動で消えます。 */ .card .cue{ display:none; position:absolute; left:1px; right:1px; bottom:1px; height:52px; align-items:flex-end; justify-content:center; padding-bottom:9px; font-size:9.5px; letter-spacing:.2em; color:var(--ink-mid); pointer-events:none; background:linear-gradient(to top, oklch(0.988 0.002 240 / .95) 22%, oklch(0.988 0.002 240 / 0)); } .card[data-scroll="1"] .cue{ display:flex; } .card .cue span{ animation:nudge 1.6s ease-in-out infinite; } @keyframes nudge{ 0%,100%{ transform:translateY(0); opacity:.75; } 50%{ transform:translateY(3px); opacity:1; } } .card li{ border-bottom:1px solid var(--rule); } .card li a{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:baseline; padding:11px 0; } .card li .kind{ font-size:10.5px; letter-spacing:.12em; color:var(--accent); border:1px solid currentColor; padding:2px 5px; border-radius:2px; line-height:1; } .card li .t{ font-size:15px; line-height:1.65; } .card li:hover .t{ color:var(--accent); } /* ブログ以外の特集ページ：ページのスクショ＋「TRIP 01」のバッジ ★スクショの大きさを変えるときは 76px と2か所の width を揃えてください */ .card li.trip a{ grid-template-columns:76px 1fr; gap:12px; align-items:start; } .card li .shot{ width:76px; aspect-ratio:4/3; overflow:hidden; border-radius:1px; background:var(--paper-hi); box-shadow:inset 0 0 0 1px var(--rule); } .card li.trip .body{ display:grid; gap:5px; justify-items:start; } /* TRIP のバッジだけ地図のピンと同じオレンジ（枠は currentColor なので文字色だけでOK） */ .card li.trip .kind{ color:var(--pin-on); } .card li .shot img{ width:100%; height:100%; object-fit:cover; display:block; } .card .more{ display:block; font-size:10.5px; letter-spacing:.18em; color:var(--ink-mid); padding:12px 0 12px; } /* ============================================================================ 6.5 TRIP STORIES（ブログ以外のページをスクショボタンで並べる） ★ボタンの幅を変えるときは minmax() の 210px を調整 ========================================================================== */ .stories{ padding:clamp(30px,4vw,58px) 0 0; } .shots{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:clamp(14px,2vw,26px); } .shot-btn{ display:grid; gap:7px; align-content:start; padding:10px 10px 13px; border:1px solid var(--rule); border-radius:2px; background:rgba(255,255,255,.5); transition:border-color .2s, background .2s, transform .2s; } .shot-btn:hover{ border-color:color-mix(in oklab, var(--accent) 45%, var(--rule)); transform:translateY(-3px); box-shadow:0 10px 20px -8px rgba(38,48,60,.22), 0 2px 4px -2px rgba(38,48,60,.10); } .shot-btn .frame{ display:block; aspect-ratio:4/3; overflow:hidden; border-radius:1px; background:var(--paper-hi); box-shadow:inset 0 0 0 1px var(--rule); } /* 上端（黒いロゴ）が必ず見えるように、切り取りは下側から行う */ .shot-btn .frame img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; } /* TRIP STORIES のボタンの番号も、地図のカードと同じオレンジの枠に */ .shot-btn .n{ font-size:10.5px; letter-spacing:.14em; color:var(--pin-on); justify-self:start; align-self:start; border:1px solid currentColor; padding:2px 6px; border-radius:2px; line-height:1; } .shot-btn .t{ font-family:var(--sans); font-size:14.5px; line-height:1.7; } .shot-btn .c{ font-size:10.5px; letter-spacing:.16em; color:var(--ink-soft); text-transform:uppercase; } /* ============================================================================ 7. 下部の地域別インデックス ========================================================================== */ .index{ padding:clamp(40px,6vw,88px) 0 clamp(60px,8vw,110px); } .index-head{ display:flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid var(--ink); padding-bottom:12px; margin-bottom:clamp(24px,3vw,44px); } .index-head h2{ font-family:var(--serif); font-size:clamp(19px,2vw,25px); font-weight:500; letter-spacing:.2em; margin:0; text-shadow:var(--press); } .index-head span{ font-size:12px; letter-spacing:.16em; color:var(--ink-mid); } /* 260px を下回らない範囲で入るだけ段組み（画面幅に応じて 2〜5 列に自動変化） */ .cols{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:clamp(28px,3vw,48px); } /* 地域の見出し。地図のドットの色（--rc）を、明度を落として 文字・外枠・うすい地の3か所に使っています。 ★四角にしたいときは border-radius:999px を 2px に変えてください。 */ .region{ --rcd:color-mix(in oklab, var(--rc) 74%, #0f1418); } .region .rhead{ display:flex; align-items:baseline; justify-content:center; gap:10px; /* ★段の幅いっぱいに広げて中身を中央に。枠の大きさが全地域でそろいます。 文字幅ぶんだけにするなら width:fit-content、左寄せなら margin を「0 0 18px」に */ margin:0 0 18px; width:auto; padding:6px 13px 7px; border:1px solid color-mix(in oklab, var(--rcd) 42%, var(--paper)); border-radius:7px; /* ★角の丸み。999px にすると完全なピル型 */ white-space:nowrap; /* 狭い段でも日本語が折り返さないように */ background:transparent; /* ★塗り潰しなし。戻すなら color-mix(in oklab, var(--rc) 13%, var(--paper)) */ } .region h3{ font-family:var(--serif); font-weight:500; font-size:clamp(14.5px,1.3vw,16px); line-height:1; margin:0; letter-spacing:.2em; text-transform:uppercase; color:var(--rcd); text-shadow:var(--press); } .region .rj{ font-size:11.5px; letter-spacing:.22em; color:color-mix(in oklab, var(--rcd) 72%, var(--paper)); } /* 国名は小さな大文字のラベル。都市名を明朝で大きく見せて、 「国 → 都市 → 記事」の段差をはっきりさせています。 ★国名の文字と下線は、地図のピンと同じオレンジ系。 藍に戻すときは color を var(--ink-mid)、border を var(--rule) に。 */ .country{ margin-bottom:24px; --cno:oklch(0.60 0.135 48); } .country .cn{ display:flex; align-items:center; gap:7px; white-space:nowrap; font-size:11.5px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--cno); padding-bottom:5px; margin-bottom:6px; border-bottom:1px solid color-mix(in oklab, var(--cno) 40%, var(--paper)); } .country .cn::before{ content:""; width:5px; height:5px; flex:none; border-radius:1px; background:var(--cno); } .country .cn-ja{ letter-spacing:.08em; color:color-mix(in oklab, var(--cno) 66%, var(--paper)); } .country .city{ font-family:var(--serif); font-size:17px; color:var(--ink); letter-spacing:.08em; margin:12px 0 5px; } /* 都市名 */ /* 記事1行ぶん（番号＋タイトル） ★タイトルの大きさは .entry .t の font-size。 写真の大きさは grid の2列目（36px）と .entry .th の width/height をそろえて変えます。 */ .entry{ display:grid; grid-template-columns:34px 36px 1fr; gap:10px; align-items:center; padding:6px 0; cursor:pointer; } .entry .no{ font-size:12.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; align-self:center; } /* 数字の幅を揃える */ /* 記事の小さな写真。画像が無いときは薄い空枠だけが残ります。 */ .entry .th{ width:36px; height:36px; overflow:hidden; border-radius:1px; background:var(--paper-hi); box-shadow:inset 0 0 0 1px var(--rule); } .entry .th img{ width:100%; height:100%; object-fit:cover; display:block; mix-blend-mode:multiply; } .entry .t{ font-size:16px; line-height:1.72; } .entry:hover .t{ color:var(--accent); } footer{ border-top:1px solid var(--ink); box-shadow:1px 1px 0px rgba(255,255,255,1); padding:16px 0 44px; display:flex; justify-content:space-between; font-size:11px; letter-spacing:.16em; color:var(--ink-mid); flex-wrap:wrap; gap:12px; } footer span{ white-space:nowrap; } /* 著作表示だけ字間を少し詰めています（UPDATED はそのまま .16em）。 */ footer span:first-child{ letter-spacing:.08em; } footer a:hover{ color:var(--accent); } .hint{ font-size:11px; letter-spacing:.14em; color:var(--ink-soft); padding-top:8px; } .hint .sp-only{ display:none; } /* スマホでだけ出る一文 */ /* ============================================================================ 8. スマートフォン向けの調整（画面幅 720px 以下） ---------------------------------------------------------------------------- ・地図は横スクロールをやめ、画面幅に収めます（最初に世界全体が見える）。 ・記事カードは画面下の「ボトムシート」に固定し、「×」で閉じます。 ========================================================================== */ @media (max-width:720px){ /* --- 地図 --- */ .map-stage{ min-width:0; width:100%; } .map-scroll{ overflow-x:hidden; padding:14px 0 6px; } .zoomer{ right:6px; bottom:6px; gap:8px; } .zoomer button{ width:40px; height:40px; font-size:16px; } .hint .sp-only{ display:inline; } /* --- 地域フィルター（指で押しやすい大きさに） --- */ .filters{ gap:7px; padding:14px 0 6px; } .filters button{ padding:9px 15px; font-size:11px; } /* --- 記事カード（ボトムシート） --- */ .card{ position:fixed; left:10px; right:10px; bottom:10px; top:auto; width:auto; transform:translateY(12px); padding:16px 16px 6px; background:oklch(0.988 0.002 240 / .93); box-shadow:0 -6px 30px -14px oklch(0.32 0.035 258 / .5); border-radius:3px; } .card h3{ font-size:20px; } .card ul{ max-height:38vh; } /* スマホでは画面の三分の一強まで */ .card li a{ padding:13px 0; } /* 指で押しやすい行の高さ */ .card .close{ display:block; position:absolute; top:4px; right:4px; z-index:2; width:38px; height:38px; line-height:1; font-size:20px; background:none; border:0; color:var(--ink-soft); cursor:pointer; } /* --- ヘッダー・一覧 --- */ .mast .meta{ gap:18px; margin-left:auto; justify-content:flex-end; } /* 行が折れても右寄せ */ .cols{ gap:26px; } /* ★スマホのブログリストはさらに大きめに（実機で小さく見えるため） */ .entry{ grid-template-columns:32px 40px 1fr; gap:11px; padding:7px 0; } .entry .th{ width:40px; height:40px; } .entry .t{ font-size:16.5px; line-height:1.68; } .entry .no{ font-size:12.5px; } .country .city{ font-size:18px; } .country .cn{ font-size:12px; } } /* ============================================================================ 9. 紙のテクスチャ ---------------------------------------------------------------------------- 紙の質感は body の背景（上の「2. 全体のリセットと基本設定」）に uploads/bg01.png を敷いて作っています。TRIP06 と同じ方法なので、 記事ページとトップページで紙の見え方が揃います。 ・目を粗くしたい → background-size を大きく（100px → 140px など） 以前の SVG ノイズの膜（body::before / ::after）は使っていません。 ========================================================================== */