/* ============================================================
   たびしおり — KARTE ライクな UI（白いカード / ティール / 余白）
   ============================================================ */
:root{
  --bg:         #f2f5f6;
  --surface:    #ffffff;
  --surface-2:  #f6f9fa;
  --surface-3:  #eef3f4;
  --ink:        #16232b;
  --ink-2:      #55666f;
  --ink-3:      #8a99a2;
  --line:       #e3e9ec;
  --line-2:     #eef2f4;
  --teal:       #0c9dae;
  --teal-d:     #0a8494;
  --teal-soft:  #e3f4f6;
  --coral:      #ef6f47;
  --coral-soft: #fdeee8;
  --green:      #2ba37b;
  --green-soft: #e4f4ee;
  --on-accent:  #ffffff;
  --sky-1:      #0a8fa2;
  --sky-2:      #3ac3d1;
  --sky-em:     #c6f2f7;
  --art-ink:    #12262b;
  --art-accent: #f4794f;
  --art-soft:   rgba(255,255,255,.30);
  --art-line:   rgba(255,255,255,.62);

  --tile-bg:    #e3ebee;
  --tile-road:  #ffffff;
  --tile-park:  #d7e9dd;
  --tile-water: #cfe1ed;

  --sh-1: 0 1px 2px rgba(22,35,43,.05), 0 4px 14px -8px rgba(22,35,43,.12);
  --sh-2: 0 2px 6px rgba(22,35,43,.07), 0 18px 42px -18px rgba(22,35,43,.26);

  --f: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --r-card: 14px;
  --r-in: 10px;
  --maxw: 1140px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0e1518; --surface:#182126; --surface-2:#1e292f; --surface-3:#243036;
    --ink:#e8eef0; --ink-2:#a4b3ba; --ink-3:#7b8b93;
    --line:#27343a; --line-2:#212d33;
    --teal:#3fc3d4; --teal-d:#6ad6e4; --teal-soft:#123840;
    --coral:#ff8a66; --coral-soft:#39241d; --green:#4cc59a; --green-soft:#153229;
    --on-accent:#0b1417;
    --sky-1:#064a55; --sky-2:#0b7b8b; --sky-em:#93e6f0;
    --art-ink:#0d2126; --art-accent:#ff9576; --art-soft:rgba(255,255,255,.24); --art-line:rgba(255,255,255,.5);
    --tile-bg:#1e2b32; --tile-road:#4a6474; --tile-park:#2c5340; --tile-water:#25495a;
    --sh-1: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px -8px rgba(0,0,0,.55);
    --sh-2: 0 2px 6px rgba(0,0,0,.4), 0 18px 42px -18px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0e1518; --surface:#182126; --surface-2:#1e292f; --surface-3:#243036;
  --ink:#e8eef0; --ink-2:#a4b3ba; --ink-3:#7b8b93;
  --line:#27343a; --line-2:#212d33;
  --teal:#3fc3d4; --teal-d:#6ad6e4; --teal-soft:#123840;
  --coral:#ff8a66; --coral-soft:#39241d; --green:#4cc59a; --green-soft:#153229;
  --on-accent:#0b1417;
  --sky-1:#064a55; --sky-2:#0b7b8b; --sky-em:#93e6f0;
  --art-ink:#0d2126; --art-accent:#ff9576; --art-soft:rgba(255,255,255,.24); --art-line:rgba(255,255,255,.5);
  --tile-bg:#1e2b32; --tile-road:#4a6474; --tile-park:#2c5340; --tile-water:#25495a;
  --sh-1: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px -8px rgba(0,0,0,.55);
  --sh-2: 0 2px 6px rgba(0,0,0,.4), 0 18px 42px -18px rgba(0,0,0,.7);
}

/* しおりごとに選べる配色。既定(teal)は :root の値をそのまま使う。 */
:root[data-palette="indigo"]{--teal:#2f5aa8;--teal-d:#284d90;--teal-soft:#e6ebf5;--coral:#d9694f;--coral-soft:#fbf0ed;--green:#3f8f7a;--green-soft:#ecf4f2;--sky-1:#2b539b;--sky-2:#6990d5;--sky-em:#c9d4e8;--on-accent:#ffffff;}
@media (prefers-color-scheme: dark){:root[data-palette="indigo"]:not([data-theme="light"]){--teal:#80a1dc;--teal-d:#a7bee6;--teal-soft:#142132;--coral:#e9a899;--coral-soft:#2e2221;--green:#95d1c1;--green-soft:#162928;--sky-1:#1a315c;--sky-2:#284d90;--sky-em:#b0c0de;--on-accent:#0e1518;}}
:root[data-theme="dark"][data-palette="indigo"]{--teal:#80a1dc;--teal-d:#a7bee6;--teal-soft:#142132;--coral:#e9a899;--coral-soft:#2e2221;--green:#95d1c1;--green-soft:#162928;--sky-1:#1a315c;--sky-2:#284d90;--sky-em:#b0c0de;--on-accent:#0e1518;}
:root[data-palette="sakura"]{--teal:#cf5b86;--teal-d:#c63b6e;--teal-soft:#f9ebf0;--coral:#d9955c;--coral-soft:#fbf4ef;--green:#7aa86a;--green-soft:#f2f6f0;--sky-1:#ca4978;--sky-2:#e094b0;--sky-em:#f3d4e0;--on-accent:#ffffff;}
@media (prefers-color-scheme: dark){:root[data-palette="sakura"]:not([data-theme="light"]){--teal:#e5a5bc;--teal-d:#edc1d1;--teal-soft:#31222c;--coral:#e9c2a0;--coral-soft:#2e2923;--green:#bcd3b4;--green-soft:#1f2d25;--sky-1:#7f2546;--sky-2:#c63b6e;--sky-em:#edc1d1;--on-accent:#0e1518;}}
:root[data-theme="dark"][data-palette="sakura"]{--teal:#e5a5bc;--teal-d:#edc1d1;--teal-soft:#31222c;--coral:#e9c2a0;--coral-soft:#2e2923;--green:#bcd3b4;--green-soft:#1f2d25;--sky-1:#7f2546;--sky-2:#c63b6e;--sky-em:#edc1d1;--on-accent:#0e1518;}
:root[data-palette="forest"]{--teal:#2f7d55;--teal-d:#286b49;--teal-soft:#e6efeb;--coral:#c98a3c;--coral-soft:#faf3ec;--green:#3d7f8f;--green-soft:#ecf2f4;--sky-1:#2b734e;--sky-2:#5fc390;--sky-em:#c9ddd3;--on-accent:#ffffff;}
@media (prefers-color-scheme: dark){:root[data-palette="forest"]:not([data-theme="light"]){--teal:#78cca1;--teal-d:#a2dcbe;--teal-soft:#142823;--coral:#e0bb8e;--coral-soft:#2c281e;--green:#94c5d1;--green-soft:#16262b;--sky-1:#1a452f;--sky-2:#286b49;--sky-em:#b0cebe;--on-accent:#0e1518;}}
:root[data-theme="dark"][data-palette="forest"]{--teal:#78cca1;--teal-d:#a2dcbe;--teal-soft:#142823;--coral:#e0bb8e;--coral-soft:#2c281e;--green:#94c5d1;--green-soft:#16262b;--sky-1:#1a452f;--sky-2:#286b49;--sky-em:#b0cebe;--on-accent:#0e1518;}
:root[data-palette="sunset"]{--teal:#cf6136;--teal-d:#b5522b;--teal-soft:#f9ece7;--coral:#b3527f;--coral-soft:#f7eef2;--green:#c69a3c;--green-soft:#f9f5ec;--sky-1:#c2582e;--sky-2:#e0987c;--sky-em:#f3d6cb;--on-accent:#ffffff;}
@media (prefers-color-scheme: dark){:root[data-palette="sunset"]:not([data-theme="light"]){--teal:#e5a890;--teal-d:#edc3b3;--teal-soft:#31231d;--coral:#d39bb5;--coral-soft:#281f28;--green:#e2cc9e;--green-soft:#2b2a1e;--sky-1:#74341c;--sky-2:#b5522b;--sky-em:#edc3b3;--on-accent:#0e1518;}}
:root[data-theme="dark"][data-palette="sunset"]{--teal:#e5a890;--teal-d:#edc3b3;--teal-soft:#31231d;--coral:#d39bb5;--coral-soft:#281f28;--green:#e2cc9e;--green-soft:#2b2a1e;--sky-1:#74341c;--sky-2:#b5522b;--sky-em:#edc3b3;--on-accent:#0e1518;}
:root[data-palette="sumi"]{--teal:#42505c;--teal-d:#39454f;--teal-soft:#e8eaeb;--coral:#8a6b4e;--coral-soft:#f3f0ed;--green:#5b7080;--green-soft:#eff1f2;--sky-1:#3d4a55;--sky-2:#7a8e9f;--sky-em:#ced2d5;--on-accent:#ffffff;}
@media (prefers-color-scheme: dark){:root[data-palette="sumi"]:not([data-theme="light"]){--teal:#8e9fae;--teal-d:#b1bdc7;--teal-soft:#172024;--coral:#c1a992;--coral-soft:#222321;--green:#aab8c3;--green-soft:#1a2429;--sky-1:#242c33;--sky-2:#39454f;--sky-em:#b7bcc1;--on-accent:#0e1518;}}
:root[data-theme="dark"][data-palette="sumi"]{--teal:#8e9fae;--teal-d:#b1bdc7;--teal-soft:#172024;--coral:#c1a992;--coral-soft:#222321;--green:#aab8c3;--green-soft:#1a2429;--sky-1:#242c33;--sky-2:#39454f;--sky-em:#b7bcc1;--on-accent:#0e1518;}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f); font-size:15px; line-height:1.75;
  -webkit-font-smoothing:antialiased; letter-spacing:.01em;
}
h1,h2,h3,h4{margin:0; font-weight:700; text-wrap:balance; line-height:1.4}
p{margin:0}
button{font:inherit; color:inherit; cursor:pointer}
input,select,textarea{font:inherit; color:var(--ink)}   /* inherit だと dialog 内で黒（CanvasText）になる */
a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:4px}
.num{font-variant-numeric:tabular-nums}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.card{background:var(--surface); border-radius:var(--r-card); box-shadow:var(--sh-1)}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  padding:.6em 1.25em; border-radius:999px; font-size:13.5px; font-weight:700;
  transition:background .14s, border-color .14s, box-shadow .14s, transform .1s;
  white-space:nowrap;
}
.btn:hover{background:var(--surface-2); border-color:var(--ink-3)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal); border-color:var(--teal); color:var(--on-accent); box-shadow:0 2px 10px -4px var(--teal)}
.btn-primary:hover{background:var(--teal-d); border-color:var(--teal-d)}
.btn-ghost{background:transparent; border-color:transparent; color:var(--ink-2); padding:.4em .7em; font-weight:500}
.btn-ghost:hover{background:var(--surface-3); border-color:transparent}
.btn-danger{color:var(--coral); border-color:var(--line)}
.btn-danger:hover{background:var(--coral-soft); border-color:var(--coral)}
.btn-sm{font-size:12.5px; padding:.45em .95em}
.btn-block{width:100%}

.label{font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--ink-3)}
.pill{
  display:inline-flex; align-items:center; gap:.3em; font-size:11.5px; font-weight:700;
  padding:.22em .7em; border-radius:999px; background:var(--surface-3); color:var(--ink-2);
}
.pill-teal{background:var(--teal-soft); color:var(--teal-d)}
.pill-coral{background:var(--coral-soft); color:var(--coral)}
.pill-line{background:transparent; border:1px dashed var(--line); color:var(--ink-3)}

/* ---------- フォーム ---------- */
.field{display:flex; flex-direction:column; gap:.35em}
.field > span{font-size:12px; font-weight:700; color:var(--ink-2)}
.field .hint{font-size:11.5px; font-weight:400; color:var(--ink-3); line-height:1.6}
.field input, .field select, .field textarea{
  background:var(--surface); color:var(--ink); border:1.5px solid var(--line); border-radius:var(--r-in);
  padding:.62em .8em; font-size:14.5px; width:100%; transition:border-color .14s, box-shadow .14s;
}
.field textarea{resize:vertical; min-height:4.6em; line-height:1.7}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--teal); outline:none; box-shadow:0 0 0 3px var(--teal-soft);
}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.whenbox{display:flex; flex-direction:column; gap:14px; min-width:0}

/* ---------- ダイアログ ---------- */
/* dialog はブラウザ既定で color:CanvasText（黒）。ダークモードで見出しが黒くならないよう文字色を明示する */
dialog{border:none; padding:0; background:transparent; color:var(--ink); max-width:min(580px, calc(100vw - 28px)); width:100%}
dialog::backdrop{background:rgba(12,24,30,.5); backdrop-filter:blur(3px)}
.sheet{background:var(--surface); border-radius:16px; box-shadow:var(--sh-2); overflow:hidden; outline:none}
.sheet-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 24px 14px}
.sheet-head h3{font-size:18px; font-weight:900; letter-spacing:.01em}
.sheet-body{padding:6px 24px 20px; display:flex; flex-direction:column; gap:15px; max-height:min(68vh,600px); overflow:auto}
/* しおりの設定：「基本設定」「デザイン」の切り替え（下線タブ） */
.stabs{display:flex; gap:22px; padding:0 24px; border-bottom:1px solid var(--line); margin-bottom:12px}
.stab{border:none; background:transparent; padding:6px 2px 10px; font-size:14px; font-weight:700; color:var(--ink-3);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .14s,border-color .14s}
.stab:hover{color:var(--ink)}
.stab[aria-selected="true"]{color:var(--teal); border-bottom-color:var(--teal)}
.stab-pane{display:flex; flex-direction:column; gap:15px}
.stab-pane[hidden]{display:none}
#tmode-time[hidden],#tmode-slot[hidden],.grid2[hidden]{display:none}
.sheet-foot{display:flex; gap:10px; justify-content:flex-end; align-items:center; padding:16px 24px; background:var(--surface-2)}
.sheet-foot .spacer{margin-right:auto}
.sheet-note{font-size:13px; color:var(--ink-2); line-height:1.75}

/* ---------- ヘッダー ---------- */
.top{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30}
.top-in{display:flex; align-items:center; gap:12px; height:64px}
.mark{display:flex; align-items:center; gap:9px; color:inherit}
.mark:hover{text-decoration:none}
.mark-logo{display:block; flex:0 0 auto}
.mark-name{font-family:"Zen Maru Gothic","Noto Sans JP",system-ui,sans-serif;
  font-size:19px; font-weight:700; letter-spacing:.03em; line-height:1}
.top-sp{margin-left:auto}
.btn-icon{padding:.45em .8em; gap:.35em}
.btn-icon svg{width:15px; height:15px; flex:none; display:block}
.btn-icon.spinning svg{animation:spin .9s linear infinite}
.btn-icon:disabled{opacity:.6}
.top-trip{
  font-size:14px; font-weight:700; color:var(--ink-2); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; max-width:36vw;
  padding-left:14px; border-left:1px solid var(--line);
}

/* ---------- ホーム ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate; color:#fff;
  padding:58px 0 132px; margin-bottom:26px;
  background:linear-gradient(158deg, var(--sky-1) 0%, var(--sky-2) 100%);
}
.hero-in{position:relative; z-index:2}
.hero h1{font-size:clamp(27px,4.2vw,41px); font-weight:900; letter-spacing:.005em; line-height:1.45; color:#fff; word-break:keep-all; overflow-wrap:anywhere}
/* 見出しの「もっと楽しく」：一回り大きく、ふわっと現れて漂う。下に破線の航路が引かれ、きらめきが瞬く */
.hero h1 em{
  font-style:normal; color:var(--sky-em); position:relative; display:inline-block;
  font-size:1.3em; line-height:1.15; padding:0 .06em .1em; margin:0 .02em; vertical-align:-.03em;
}
.hw{display:inline-block; opacity:0; animation:hwPop 1.1s cubic-bezier(.22,.8,.3,1) forwards; animation-delay:.25s}
.hw+.hw{animation-delay:.6s}
.hf{display:inline-block; animation:hwFloat 3.6s ease-in-out infinite; animation-delay:1.4s}
.hw+.hw .hf{animation-delay:2.3s}
@keyframes hwPop{from{opacity:0; transform:translateY(.35em) scale(.94)} to{opacity:1; transform:none}}
@keyframes hwFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-.1em)}}
.h1-route{
  position:absolute; left:.02em; width:calc(100% - .04em); bottom:-.06em; height:.3em; overflow:visible; pointer-events:none;
  clip-path:inset(0 100% 0 0); animation:routeDraw 1.2s ease-out 1s forwards;
}
.h1-route path{fill:none; stroke:rgba(255,255,255,.85); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:4.5 5; vector-effect:non-scaling-stroke}
@keyframes routeDraw{to{clip-path:inset(0 -2% 0 0)}}
.h1-sp{position:absolute; width:.36em; height:.36em; fill:#f0c53c; opacity:0; pointer-events:none; animation:spTw 2.8s ease-in-out infinite; transform-origin:50% 50%}
.h1-sp.a{right:-.34em; top:-.34em; width:.44em; height:.44em; animation-delay:1.2s}
.h1-sp.b{left:46%; top:-.44em; width:.26em; height:.26em; animation-delay:2.2s}
.h1-sp.c{right:-.16em; bottom:.36em; width:.18em; height:.18em; animation-delay:3s}
@keyframes spTw{0%,100%{opacity:0; transform:scale(.2) rotate(0deg)} 35%{opacity:1; transform:scale(1) rotate(30deg)} 65%{opacity:.7; transform:scale(.75) rotate(60deg)}}
@media (prefers-reduced-motion:reduce){
  .hw,.hf,.h1-route,.h1-sp{animation:none}
  .hw{opacity:1} .h1-route{clip-path:none} .h1-sp{opacity:.9}
}
.hero p{margin-top:15px; color:rgba(255,255,255,.88); max-width:33em; font-size:15px}
/* FVの3つのポイント（会員登録不要／利用料無料／いくつでも作成可能） */
.hero-points{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px 0; margin:18px 0 0; padding:6px 4px; list-style:none;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.28); border-radius:14px;
  backdrop-filter:blur(2px);
}
.hp{
  display:flex; align-items:center; gap:8px; padding:6px 16px; white-space:nowrap;
  font-size:16px; font-weight:900; letter-spacing:.02em; color:#fff; line-height:1.3;
}
.hp+.hp{border-left:1px solid rgba(255,255,255,.32)}
.hp svg{width:22px; height:22px; flex:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.hero p{margin-top:16px}
.hero-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; align-items:center}
.hero .btn{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.45); color:#fff}
.hero .btn:hover{background:rgba(255,255,255,.24); border-color:#fff}
.hero .btn-primary{background:#fff; border-color:#fff; color:var(--sky-1); box-shadow:0 8px 22px -10px rgba(0,0,0,.45)}
.hero .btn-primary:hover{background:#eefbfc; border-color:#eefbfc}
/* FVの主ボタン：目的地ピンと同じコーラル、一回り大きく */
.hero .btn-hero{
  background:var(--coral); border-color:var(--coral); color:#fff; font-size:17px; padding:.85em 1.7em .85em 1.9em; gap:.55em;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.5), 0 0 0 0 rgba(255,255,255,0);
}
.hero .btn-hero svg{width:1.05em; height:1.05em; transition:transform .18s}
.hero .btn-hero:hover{background:#f37f59; border-color:#f37f59; transform:translateY(-2px); box-shadow:0 18px 34px -12px rgba(0,0,0,.55)}
.hero .btn-hero:hover svg{transform:translateX(3px)}
.hero .btn-hero:active{transform:translateY(0)}
.hero :focus-visible{outline-color:#fff}

/* 素材集から採用したパーツ：雲のシルエット・飛行機・破線の航路・目的地ピン */
.hero-art{position:absolute; inset:0; z-index:1; pointer-events:none}
.art-plane{position:absolute; right:clamp(-24px,1vw,48px); top:22px; width:clamp(148px,23vw,310px); height:auto}
.art-far{position:absolute; left:auto; right:31%; top:47%; width:clamp(42px,5.5vw,78px); height:auto}
.art-route{position:absolute; right:7%; bottom:112px; width:clamp(118px,17vw,214px); height:auto}
.art-cloud{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:116px; display:block; z-index:3}

.list-head{display:flex; align-items:center; gap:12px; margin:8px 0 16px}
.list-head h2{font-size:17px; font-weight:900}
.tickets{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:16px}
.tk{
  display:block; text-align:left; width:100%; padding:0; border:1px solid transparent;
  background:var(--surface); border-radius:var(--r-card); box-shadow:var(--sh-1); overflow:hidden;
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.tk:hover{transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--teal)}
.tk-bar{display:block; height:5px; background:linear-gradient(90deg, var(--teal), var(--green))}
.tk-img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--surface-3)}
.cover-img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--surface-3)}
.cover .pols{display:flex; justify-content:center; align-items:flex-start; gap:14px; padding:10px 0 6px}
.cover .pol{position:relative; display:block; flex:none; background:#fff; padding:5px 5px 14px; box-shadow:0 3px 10px rgba(0,0,0,.2)}
.cover .pol img{display:block; object-fit:cover; width:200px; height:150px}
.cover .pols.n2 .pol img{width:132px; height:99px}
.cover .pols.n3 .pol img{width:92px; height:69px}
.cover .pol .tape{position:absolute; left:50%; top:-7px; width:44px; height:14px; background:rgba(240,197,60,.78)}
.cv-tabloid .pols img{filter:grayscale(1) contrast(1.12)}
.cover .pols-box{position:relative; width:100%; height:190px; margin:8px 0}
.cover .pols-box.rt{width:84%}
.cv-tabloid .tb-hero{position:relative; height:200px; margin:10px 0 6px; overflow:hidden; background:linear-gradient(160deg,#d9dfe3,#8f9aa3)}
.cv-tabloid .tb-main{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.cv-tabloid .tb-subs{position:absolute; right:8px; top:8px; display:flex; gap:6px; z-index:2}
.cv-tabloid .tb-subs img{width:72px; height:54px; object-fit:cover; display:block; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.3)}
.cv-tabloid .tb-script{position:absolute; left:12px; bottom:14px; z-index:3; font-family:'Caveat Brush',cursive; color:#fff; line-height:.9; text-shadow:0 2px 6px rgba(0,0,0,.45); transform:rotate(-6deg); transform-origin:left bottom}
.cv-tabloid .tb-script span{display:block; font-size:38px}
.cv-tabloid .tb-script span+span{font-size:62px; margin-left:34px}
.cover .pols.scatter{display:block; position:absolute; inset:12px 8px; padding:0}
.cover .pols.scatter .pol{position:absolute; padding:1.5% 1.5% 5%}
.cover .pols.scatter .pol img{width:100%; height:auto; aspect-ratio:4/3}
.cv-route .pols{justify-content:flex-start}
.cover.cover-imgs,.cover .cover-imgs{display:flex; gap:4px; overflow:hidden}
.cover .cover-imgs img{flex:1 1 0; min-width:0; width:auto; height:100%; object-fit:cover; display:block}
.cover.cv-photo .cover-imgs{display:block}
.cv-photo .cover-imgs img{position:absolute; inset:0; width:100%; height:100%}
.cv-photo .cover-imgs img:nth-child(2),.cv-photo .cover-imgs img:nth-child(3){inset:auto; top:14px; width:64px; height:48px; border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.3); z-index:3; border-radius:3px}
.cv-photo .cover-imgs img:nth-child(2){right:14px; transform:rotate(4deg)}
.cv-photo .cover-imgs img:nth-child(3){right:84px; transform:rotate(-5deg)}
/* しおりの設定：イメージ画像の選択 */
.cvp{display:flex; gap:12px; align-items:flex-start}
.cvp-prev{width:124px; height:78px; border-radius:var(--r-in); object-fit:cover; background:var(--surface-3); flex:none; display:block}
.cvp-none{width:124px; height:78px; border-radius:var(--r-in); background:var(--surface-3); flex:none;
  display:grid; place-items:center; font-size:11px; color:var(--ink-3); text-align:center; line-height:1.5}
.cvp-btns{display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start}
.cvp-list{display:flex; gap:8px; flex-wrap:wrap}
.cvp-item{position:relative; display:block}
.cvp-item .cvp-prev{width:96px; height:64px}
.cvp-x{position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; border:none; background:var(--ink); color:var(--surface); font-size:14px; line-height:22px; padding:0; box-shadow:var(--sh-1)}
.cvp-first{position:absolute; left:6px; bottom:6px; font-style:normal; font-size:10px; font-weight:700; background:rgba(255,255,255,.9); color:var(--ink-2); border-radius:4px; padding:1px 5px}
.btn.is-disabled{opacity:.45; pointer-events:none}
/* 表紙デザインの選択（見本は小さな図で表す） */
.paper-row{display:flex; gap:10px; flex-wrap:wrap}
.seg{display:inline-flex; align-self:flex-start; background:var(--surface-3); border-radius:999px; padding:3px; gap:2px}
.segb{border:none; background:transparent; border-radius:999px; padding:.4em 1.05em;
  font-size:13px; font-weight:700; color:var(--ink-2)}
.segb[aria-pressed="true"]{background:var(--surface); color:var(--teal); box-shadow:var(--sh-1)}
/* 二者択一（国内／海外など）はラジオ風のカードで「選べる」と分かるように */
.seg-choice{display:grid; grid-template-columns:1fr 1fr; gap:8px; align-self:stretch; background:none; padding:0; border-radius:0}
.seg-choice .segb{display:flex; align-items:center; justify-content:center; gap:8px; padding:.75em .8em;
  border:2px solid var(--line); border-radius:var(--r-in); background:var(--surface); font-size:14px; color:var(--ink-2)}
.seg-choice .segb::before{content:''; flex:none; width:18px; height:18px; border-radius:50%; border:2px solid var(--line); background:var(--surface)}
.seg-choice .segb[aria-pressed="true"]{border-color:var(--teal); background:var(--teal-soft); color:var(--teal); box-shadow:none}
.seg-choice .segb[aria-pressed="true"]::before{border-color:var(--teal); background:var(--teal); box-shadow:inset 0 0 0 3.5px var(--surface)}
.cvsel{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(78px,23%),1fr)); gap:8px}
.cvopt[hidden]{display:none}
.cvopt{display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 6px;
  border:2px solid var(--line); border-radius:var(--r-in); background:var(--surface)}
.cvopt:hover{border-color:var(--ink-3)}
.cvopt[aria-pressed="true"]{border-color:var(--teal); background:var(--teal-soft)}
.cvopt-n{font-size:11.5px; font-weight:700; color:var(--ink-2)}
.cvthumb{position:relative; display:block; width:52px; height:66px; border-radius:3px;
  background:var(--surface-3); overflow:hidden}
.cvthumb i,.cvthumb b,.cvthumb u{position:absolute; display:block; background:var(--teal)}
.cvt-retro{border:1.5px solid var(--teal)}
.cvt-retro i{left:8px; right:8px; top:12px; height:2px}
.cvt-retro b{left:12px; right:12px; top:24px; height:7px; border-radius:1px}
.cvt-retro u{left:16px; right:16px; top:38px; height:2px; opacity:.5}
.cvt-tabloid i{left:0; right:0; top:6px; height:4px; background:var(--ink)}
.cvt-tabloid b{left:6px; right:6px; top:16px; height:9px; background:var(--ink); border-radius:1px}
.cvt-tabloid u{left:6px; right:6px; top:32px; height:20px; opacity:.35;
  background:repeating-linear-gradient(var(--ink) 0 2px, transparent 2px 5px)}
.cvt-photo i{inset:0; background:linear-gradient(160deg,var(--sky-1),var(--sky-2))}
.cvt-photo b{left:7px; right:7px; bottom:16px; height:8px; background:#fff; border-radius:1px}
.cvt-photo u{left:7px; width:22px; bottom:9px; height:3px; background:rgba(255,255,255,.75)}
.cvt-cute{border:1.5px dashed var(--teal)}
.cvt-cute i{left:14px; right:14px; top:10px; height:6px; border-radius:99px}
.cvt-cute b{left:9px; right:9px; top:24px; height:7px; border-radius:1px}
.cvt-cute u{left:0; right:0; bottom:0; height:12px; opacity:.35;
  background:radial-gradient(circle at 8px 12px, var(--teal) 7px, transparent 7px) 0 0/16px 12px repeat-x}
.cvt-members b{left:12px; right:12px; top:12px; height:7px; border-radius:1px}
.cvt-members i{left:10px; top:32px; width:14px; height:14px; border-radius:50%; background:var(--teal-soft); border:1.5px solid var(--teal)}
.cvt-members u{right:10px; top:32px; width:14px; height:14px; border-radius:50%; background:var(--teal-soft); border:1.5px solid var(--teal)}
.cvt-ticket{background:linear-gradient(180deg, var(--surface-3) 0 40px, var(--teal-soft) 40px)}
.cvt-ticket i{left:0; right:0; top:0; height:9px}
.cvt-ticket b{left:7px; right:7px; top:18px; height:8px; border-radius:1px}
.cvt-ticket u{left:0; right:0; top:39px; height:0; background:none; border-top:1.5px dashed var(--teal)}
.cvt-stamp i{left:0; right:0; top:0; height:5px;
  background:repeating-linear-gradient(-45deg, var(--teal) 0 4px, transparent 4px 8px, var(--coral) 8px 12px, transparent 12px 16px)}
.cvt-stamp b{left:6px; right:16px; top:34px; height:7px; border-radius:1px}
.cvt-stamp u{right:5px; top:11px; width:18px; height:18px; border-radius:50%; background:none; border:2px double var(--coral); transform:rotate(-12deg)}
.cvt-route b{left:6px; right:6px; top:9px; height:7px; border-radius:1px}
.cvt-route u{left:6px; right:12px; top:26px; height:26px; background:none; border-bottom:2px dashed var(--teal); border-radius:0 0 100% 0/0 0 100% 0}
.cvt-route i{right:6px; top:20px; width:9px; height:9px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--coral)}
.cvt-wa{border:1px solid var(--teal); outline:1px solid var(--teal); outline-offset:-3px}
.cvt-wa i{right:9px; top:8px; width:7px; height:36px; border-radius:1px}
.cvt-wa b{left:8px; bottom:8px; width:9px; height:9px; background:#c8392b; border-radius:1px}
.cvt-wa u{left:8px; top:10px; width:22px; height:15px; opacity:.35}
.cvt-magazine i{left:5px; right:5px; top:6px; height:14px; border-radius:1px}
.cvt-magazine b{left:5px; right:5px; top:26px; height:20px; opacity:.28}
.cvt-magazine u{left:5px; width:26px; bottom:8px; height:6px; background:var(--ink)}
.cvt-yuru{background:linear-gradient(160deg,#d8eff2,#f4fbfc)}
.cvt-washi{background:linear-gradient(160deg,#f3d3ca,#f8ece4)}
.cvt-washi i{left:5px; top:10px; width:18px; height:8px; border-radius:2px; background:#c8442e}
.cvt-washi b{left:27px; right:5px; top:8px; height:50px; border-radius:3px; background:#fff; opacity:.85}
.cvt-washi u{left:5px; top:24px; width:18px; height:14px; border-radius:2px; background:#fff}
.cvt-travel{background:#fff; border:1.5px solid #1f5fd6}
.cvt-travel i{left:6px; top:8px; width:16px; height:30px; background:#9cc0f0}
.cvt-travel b{left:27px; right:5px; top:8px; height:50px; border:1px solid #1f5fd6; background:transparent}
.cvt-travel u{left:6px; top:42px; width:16px; height:3px; background:#1f5fd6}
.cvt-notebook{background:#f3efe6}
.cvt-notebook i{left:24px; top:4px; width:3px; height:58px; background:repeating-linear-gradient(#5a4636 0 3px,transparent 3px 7px)}
.cvt-notebook b{left:5px; top:12px; width:15px; height:9px; border-radius:6px; background:#f4c9c0}
.cvt-notebook u{left:31px; right:5px; top:12px; height:9px; border-radius:6px; background:#f2d36a}
.cvt-polka{background:#fdf6df radial-gradient(#f6dfa8 1px,transparent 1.2px) 0 0/6px 6px}
.cvt-polka i{left:5px; top:8px; width:20px; height:8px; background:#f0602e}
.cvt-polka b{left:6px; top:22px; width:18px; height:16px; background:#fff; border:1px solid #f0602e; transform:rotate(-6deg)}
.cvt-polka u{left:30px; right:5px; top:8px; height:50px; border:1px solid #f0602e; background:transparent}
.cvt-yuru i{left:5px; top:14px; width:16px; height:10px; border-radius:3px; background:#f0c53c}
.cvt-yuru b{left:27px; right:5px; top:8px; height:50px; border-radius:3px; background:#fff; opacity:.9}
.cvt-yuru u{left:6px; top:34px; width:14px; height:14px; border-radius:50%; background:#fff}
.pal-row{display:flex; flex-wrap:wrap; gap:8px}
.pal{display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 10px;
  border:2px solid var(--line); border-radius:var(--r-in); background:var(--surface); min-width:74px}
.pal:hover{border-color:var(--ink-3)}
.pal[aria-pressed="true"]{border-color:var(--teal); background:var(--teal-soft)}
.pal-dots{display:flex; gap:3px}
.pal-dots i{width:14px; height:14px; border-radius:50%; display:block}
.pal-name{font-size:11.5px; font-weight:700; color:var(--ink-2)}
.font-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr)); gap:8px}
.fontbtn{display:flex; flex-direction:column; gap:2px; align-items:flex-start; padding:9px 12px;
  border:2px solid var(--line); border-radius:var(--r-in); background:var(--surface); text-align:left}
.fontbtn:hover{border-color:var(--ink-3)}
.fontbtn[aria-pressed="true"]{border-color:var(--teal); background:var(--teal-soft)}
.fontbtn-s{font-size:15px; line-height:1.5; color:var(--ink)}
.fontbtn-n{font-size:11px; color:var(--ink-3); font-family:var(--f)}
.stock{margin-top:12px; border-top:1px dashed var(--line); padding-top:12px}
.stock-bar{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.stock-bar input{flex:1; min-width:150px; background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--r-in); padding:.5em .7em; font-size:14px}
.stock-bar select{background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-in); padding:.5em .6em; font-size:13.5px}
.stock-wrap{margin-top:10px}
.stock-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(96px,30%),1fr)); gap:8px}
.stock-more{display:block; width:100%; margin-top:10px}
.stock-count{font-size:11.5px; color:var(--ink-3); margin-top:8px}
.stock-item{padding:0; border:2px solid transparent; border-radius:var(--r-in); overflow:hidden; background:var(--surface-3); line-height:0}
.stock-item:hover{border-color:var(--teal)}
.stock-item img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover}
.stock-msg{font-size:12.5px; color:var(--ink-3); padding:10px 0}
.tk-in{position:relative; padding:16px 18px 15px; display:flex; flex-direction:column; gap:9px}
/* 終わった旅は「おわり」の札でなく、表紙の消印と同じ作法の丸いスタンプを右端に押す */
.tk-end{position:absolute; right:14px; top:50%; width:66px; height:66px; border:3px double var(--coral); border-radius:50%;
  color:var(--coral); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  transform:translateY(-50%) rotate(14deg); opacity:.82; line-height:1; z-index:2; pointer-events:none; background:transparent;
  mask-image:radial-gradient(circle at 30% 40%, #000 55%, rgba(0,0,0,.75) 75%, #000 100%); -webkit-mask-image:radial-gradient(circle at 30% 40%, #000 55%, rgba(0,0,0,.75) 75%, #000 100%)}
.tk-end i{font-style:normal; font-size:6.5px; letter-spacing:.22em; font-weight:700; white-space:nowrap}
.tk-end b{font-size:22px; font-weight:900; border-top:1px solid; border-bottom:1px solid; padding:2px 6px 1px; margin:2px 0; letter-spacing:.05em}
.tk.is-over .tk-title{padding-right:70px}
.tk-date{display:flex; align-items:baseline; gap:8px; color:var(--teal); font-weight:900}
.tk-date .d{font-size:22px; letter-spacing:-.01em}
.tk-date .r{font-size:12px; color:var(--ink-3); font-weight:500}
.tk-title{font-size:17px; font-weight:900; line-height:1.45; overflow-wrap:anywhere}
.tk-meta{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center}
.avatars{display:flex; align-items:center}
.av{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:700; color:#fff; border:2px solid var(--surface);
  margin-left:-7px; flex:none;
}
.av:first-child{margin-left:0}
.av-lg{width:32px; height:32px; font-size:13px}
.empty{
  background:var(--surface); border-radius:var(--r-card); box-shadow:var(--sh-1);
  padding:44px 26px; text-align:center; color:var(--ink-3); font-size:14px;
}
.synced{font-size:11.5px; color:var(--ink-3); margin:-6px 0 14px; line-height:1.7; overflow-wrap:anywhere}
.synced .bad{color:var(--coral)}
.foot{margin-top:56px; padding:24px 0 48px; color:var(--ink-3); font-size:12.5px; display:flex; flex-wrap:wrap; gap:6px 22px}

/* ---------- しおり ---------- */
.trip{display:grid; grid-template-columns:300px minmax(0,1fr); gap:26px; align-items:start; padding:24px 0 64px}
.trip > *{min-width:0}
.rail, .box, .panel-card, .day, .trip main{min-width:0}
.rail{position:sticky; top:88px; display:flex; flex-direction:column; gap:14px}
.box{background:var(--surface); border-radius:var(--r-card); box-shadow:var(--sh-1); padding:18px 20px; display:flex; flex-direction:column; gap:12px}
.box > .label{display:flex; align-items:center; gap:7px}
.box > .label .n{margin-left:auto; color:var(--ink-3); font-weight:700}

.cover{padding:0; overflow:hidden; position:relative}
.cover-bar{height:6px; background:linear-gradient(90deg, var(--teal), var(--green))}
.cover-in{padding:20px; display:flex; flex-direction:column; gap:8px; position:relative; z-index:2}
.cover-eyebrow{display:none; font-size:10px; letter-spacing:.28em; font-weight:700; color:var(--teal)}
.cover-rule{display:none}

/* --- レトロ：二重の罫で囲む --- */
.cv-retro{background:var(--teal); color:#fff}
.cv-retro .rj{display:flex; flex-direction:column; gap:8px; padding:10px 12px 12px}
.cv-retro .rj-rule{height:5px; background:#fff; border-radius:2px}
.cv-retro .rj-top{display:flex; align-items:flex-start; gap:10px}
.cv-retro .rj-topl{flex:1; min-width:0}
.cv-retro .rj-series{display:flex; align-items:center; gap:6px; font-size:10px; font-weight:700; letter-spacing:.2em}
.cv-retro .rj-series i{flex:1; border-top:1.5px solid #fff; border-bottom:1.5px solid #fff; height:5px}
.cv-retro .rj-title{font-family:'RocknRoll One',var(--f),sans-serif; font-size:24px; line-height:1.15; margin-top:6px; word-break:keep-all; overflow-wrap:anywhere}
.cv-retro .rj-logo{flex:none; width:64px; height:64px; background:var(--surface); border-radius:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px}
.cv-retro .rj-logo svg{width:36px; height:36px}
.cv-retro .rj-logo span{font-size:9px; font-weight:900; color:var(--teal); letter-spacing:.04em}
.cv-retro .rj-frame{border:5px solid #fff; border-radius:18px; padding:4px}
.cv-retro .rj-frame-in{border:1.5px solid #fff; border-radius:14px; padding:9px; display:flex; flex-direction:column; gap:8px}
.cv-retro .rj-bottom{background:var(--surface); color:var(--ink); border-radius:9px; padding:8px 10px; display:flex; flex-direction:column; gap:6px}
.cv-retro .rj-photo{position:relative; height:190px; border-radius:10px; overflow:hidden; background:#dfeef5; border:2px solid #fff}
.cv-retro .rj-main{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.cv-retro .rj-subs{position:absolute; left:8px; right:8px; bottom:8px; display:flex; gap:6px; justify-content:flex-end; z-index:2}
.cv-retro .rj-subs img{width:70px; height:52px; object-fit:cover; display:block; border:2px solid #fff; border-radius:4px; box-shadow:0 2px 6px rgba(0,0,0,.25)}
.cv-retro .rj-sky{position:absolute; inset:0; background:linear-gradient(180deg,#7cc2ea 0%,#bfe3f5 70%,#e9f6fb 100%)}
.cv-retro .rj-pref{position:absolute; left:12%; top:8%; width:76%; height:76%; fill:#fff; opacity:.9}
.cv-retro .rj-cloud{position:absolute; background:#fff; border-radius:99px}
.cv-retro .rj-cloud::before,.cv-retro .rj-cloud::after{content:''; position:absolute; background:#fff; border-radius:50%}
.cv-retro .rj-cloud.a{left:6%; top:14%; width:26%; height:9%}.cv-retro .rj-cloud.a::before{left:18%; top:-70%; width:40%; height:150%}.cv-retro .rj-cloud.a::after{left:50%; top:-40%; width:32%; height:120%}
.cv-retro .rj-cloud.b{right:8%; top:30%; width:20%; height:7%}.cv-retro .rj-cloud.b::before{left:24%; top:-60%; width:38%; height:140%}
.cv-retro .rj-cloud.c{left:14%; bottom:12%; width:30%; height:9%}.cv-retro .rj-cloud.c::before{left:30%; top:-70%; width:40%; height:150%}.cv-retro .rj-cloud.c::after{left:62%; top:-30%; width:26%; height:110%}
.cv-retro .rj-label{display:flex; align-items:center; gap:10px}
.cv-retro .rj-box{flex:none; border:1.5px solid var(--teal); border-radius:4px; padding:2px 8px; font-size:12px; font-weight:700; color:var(--teal); letter-spacing:.1em}
.cv-retro .rj-dest{font-family:'RocknRoll One',var(--f),sans-serif; font-size:20px; color:var(--teal); letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cv-retro .rj-names{display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; border-top:1px solid var(--teal); padding:8px 2px 0}
.cv-retro .rj-nl{font-size:10px; font-weight:700; color:var(--teal); letter-spacing:.2em}
.cv-retro .rj-mem{display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; color:var(--ink)}
.cv-retro .rj-mem .micon,.cv-retro .rj-mem svg,.cv-retro .rj-mem img{width:24px!important; height:24px!important; border-radius:50%}
.cv-retro .rj-blank{display:inline-block; width:70px; border-bottom:1px solid #9bb; height:14px}
.cv-retro .rj-fine{font-size:11px; color:var(--ink-3); text-align:center; border-top:1px solid var(--line); padding-top:6px}

/* --- タブロイド：新聞の一面 --- */
.cv-tabloid .cover-bar{display:none}
.cv-tabloid .cover-in{padding:16px 18px 18px; gap:5px}
.cv-tabloid .cover-eyebrow{display:flex; align-items:center; gap:8px; color:var(--ink-2);
  border-top:4px solid var(--ink); border-bottom:1px solid var(--ink); padding:6px 0; margin-bottom:4px}
.cv-tabloid .cover-eyebrow::after{content:""; flex:1}
.cv-tabloid .cover-title{font-size:25px; line-height:1.25; letter-spacing:-.01em}
.cv-tabloid .cover-dest{order:2; font-size:11.5px; color:var(--ink-2); letter-spacing:.14em;
  border-top:1px solid var(--line); padding-top:7px; margin-top:3px; width:100%}
.cv-tabloid .cover-dates{order:3}
.cv-tabloid .cover-note{order:4; column-count:2; column-gap:14px; font-size:12px}
.cv-tabloid .countdown{order:5}
.cv-tabloid .cover-img{filter:grayscale(.75) contrast(1.08); border-bottom:3px solid var(--ink)}

/* --- フォト：写真の上に文字を重ねる --- */
.cv-photo .cover-bar{display:none}
.cv-photo .cover-img{position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto}
.cv-photo.has-img{min-height:230px}
.cv-photo.has-img::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.78) 100%)}
.cv-photo.has-img .cover-in{justify-content:flex-end; min-height:230px; padding:18px}
.cv-photo.has-img .cover-dest,
.cv-photo.has-img .cover-title,
.cv-photo.has-img .cover-dates,
.cv-photo.has-img .cover-note{color:#fff}
.cv-photo.has-img .countdown{border-top-color:rgba(255,255,255,.35)}
.cv-photo.has-img .countdown b{color:#fff}
.cv-photo.has-img .countdown span{color:rgba(255,255,255,.85)}
.cv-photo:not(.has-img) .cover-in{background:linear-gradient(155deg,var(--sky-1),var(--sky-2)); min-height:190px;
  justify-content:flex-end}
.cv-photo:not(.has-img) .cover-dest,
.cv-photo:not(.has-img) .cover-title,
.cv-photo:not(.has-img) .cover-dates,
.cv-photo:not(.has-img) .cover-note{color:#fff}
.cv-photo:not(.has-img) .countdown{border-top-color:rgba(255,255,255,.35)}
.cv-photo:not(.has-img) .countdown b,
.cv-photo:not(.has-img) .countdown span{color:#fff}
.cv-photo .cover-title{font-size:23px; text-shadow:0 1px 12px rgba(0,0,0,.35)}

/* --- メンバー：似顔絵とクローバー --- */
.cv-members{--face-bg:var(--teal-soft); --leaf:#93c58c; --spark:#f0c53c}
.cv-members .cover-bar{display:none}
.cv-members .clv{position:absolute; z-index:1; width:38%; max-width:120px; height:auto; opacity:.95; pointer-events:none}
.cv-members .clv-tr{top:3%; right:0}
.cv-members .clv-bl{bottom:2%; left:0; width:32%}
.cv-members .cover-in{position:relative; z-index:2; align-items:center; text-align:center; padding:26px 18px 20px; gap:4px}
.cv-members .cover-eyebrow{display:none}
.cv-members .arctext{display:block; width:168px; height:36px; overflow:visible}
.cv-members .arctext text{font-size:11px; letter-spacing:.32em; font-weight:700; fill:var(--ink-2); font-family:var(--f)}
.cv-members .arcs.bottom{margin-top:-4px}
.cv-members .cover-title{font-size:24px; letter-spacing:.1em; margin:-4px 0}
.cv-members .cover-rule{display:block; width:0; height:6px}
.cv-members .cover-dest{order:9; font-size:12px; color:var(--ink-2)}
.facewrap{margin-top:12px; width:100%}
.facelabel{font-size:10.5px; letter-spacing:.24em; color:var(--ink-3); font-weight:700; margin-bottom:6px}
.faces{display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center}
.faceitem{display:flex; flex-direction:column; align-items:center; gap:3px}
.faceitem span{font-size:11.5px; font-weight:700; color:var(--ink-2)}
button.faceitem{padding:2px 4px; border:0; background:none; border-radius:10px; cursor:pointer; font:inherit;
  transition:transform .12s, background .12s}
button.faceitem:hover{transform:translateY(-1px); background:rgba(0,0,0,.05)}
button.faceitem .face,button.faceitem .micon{border-radius:50%}
/* タブロイド・写真の表紙は左寄せの文字組みなので、似顔絵も左からならべる（レトロ・かわいいは中央） */
.cv-tabloid .faces,.cv-photo .faces{justify-content:flex-start}
.cover:not(.cv-members) .facewrap{margin-top:8px}
.cv-tabloid .facewrap{order:4}
.cv-photo.has-img .facelabel{color:rgba(255,255,255,.75)}
.cv-photo.has-img .faceitem span{color:#fff}
.cv-photo.has-img button.faceitem:hover{background:rgba(255,255,255,.14)}
.face{display:block; border-radius:50%}
.facenone{font-size:12px; color:var(--ink-3)}

/* --- やわらか：点線の枠と雲 --- */
.cv-cute .cover-bar{display:none}
.cv-cute .cover-in{margin:10px; padding:18px 16px 16px; border:2px dashed var(--teal);
  border-radius:16px; text-align:center; align-items:center; gap:6px}
.cv-cute .cover-dest{background:var(--teal-soft); color:var(--teal-d); border-radius:99px;
  padding:.25em 1em; font-size:11.5px}
.cv-cute .cover-title{font-size:21px}
.cv-cute .cover-rule{display:block; width:70px; height:8px; margin-top:2px;
  background:radial-gradient(circle at 6px 8px, transparent 5px, var(--teal) 5px 6px, transparent 6px) 0 0/12px 8px repeat-x}
.cv-cute .countdown{justify-content:center; width:100%; border-top-style:dashed}
.cv-cute .cover-img{border-radius:12px 12px 0 0}
.cv-cute .cover-cloud{display:block; position:absolute; left:0; right:0; bottom:0; width:100%; height:26px; z-index:1}
.cover-cloud{display:none}
/* --- きっぷ：搭乗券。上の帯・ミシン目・半券 --- */
.cv-ticket .cover-bar{display:none}
.cv-ticket .cover-in{padding:0; gap:0}
.cv-ticket .tk-head{display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--teal); color:#fff;
  font-size:10px; letter-spacing:.26em; font-weight:700; padding:9px 16px}
.cv-ticket .tk-main{padding:16px 18px 14px; display:flex; flex-direction:column; gap:6px}
.cv-ticket .cover-dest{font-size:18px; letter-spacing:.06em; color:var(--ink)}
.cv-ticket .cover-dest small{display:block; font-size:10px; letter-spacing:.32em; color:var(--ink-3); margin-bottom:2px}
.cv-ticket .cover-title{font-size:22px}
.cv-ticket .cover-dates{font-variant-numeric:tabular-nums}
.cv-ticket .tk-perf{position:relative; height:0; border-top:2px dashed var(--line); margin:4px 0 0}
.cv-ticket .tk-perf::before,.cv-ticket .tk-perf::after{content:""; position:absolute; top:-10px; width:20px; height:20px; border-radius:50%; background:var(--bg)}
.cv-ticket .tk-perf::before{left:-10px}
.cv-ticket .tk-perf::after{right:-10px}
.cv-ticket .tk-stub{padding:12px 18px 16px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; background:var(--teal-soft)}
.cv-ticket .tk-stub > div:first-child{display:flex; flex-direction:column; gap:6px; min-width:0}
.cv-ticket .tk-bar{flex:none; width:72px; height:34px; display:block; color:var(--ink); opacity:.85}
.cv-ticket .facewrap{margin-top:0}
.cv-ticket .faces{justify-content:flex-start}
.cv-ticket .countdown{margin-top:0; padding-top:0; border-top:0}

/* --- スタンプ：罫線のノートに消印。上端はエアメールの縞 --- */
.cv-stamp .cover-bar{display:none}
.cv-stamp .st-airmail{display:block; width:100%; height:8px; --s1:var(--teal); --s2:var(--coral)}
.cv-stamp .cover-in{padding:18px 18px 18px; gap:6px;
  background-image:repeating-linear-gradient(transparent 0 27px, var(--line) 27px 28px)}
.cv-stamp .cover-eyebrow{display:block; color:var(--ink-3)}
.cv-stamp .cover-title{font-size:22px; padding-right:84px}
.cv-stamp .cover-img{margin:6px 0 2px; border:2px dashed var(--teal); padding:4px; background:var(--surface); box-sizing:border-box}
.cv-stamp .st-badge{position:absolute; right:14px; top:22px; width:82px; height:82px; border:3px double var(--coral); border-radius:50%;
  color:var(--coral); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  transform:rotate(-12deg); opacity:.85; line-height:1.15; z-index:3; pointer-events:none}
.cv-stamp .st-badge span{font-size:8px; letter-spacing:.28em; font-weight:700; max-width:64px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.cv-stamp .st-badge b{font-size:13px; font-weight:900; border-top:1px solid; border-bottom:1px solid; padding:2px 0; margin:3px 0; font-variant-numeric:tabular-nums}
.cv-stamp .faces{justify-content:flex-start}

/* --- ルート：点線の航路と目的地のピン --- */
.cv-route .cover-bar{display:none}
.cv-route .rt-art{position:absolute; inset:0; width:100%; height:100%; z-index:1; color:var(--teal); --rt-pin:var(--coral); pointer-events:none}
.cv-route .cover-in{padding:20px 18px 18px; gap:6px; min-height:230px}
.cv-route .cover-eyebrow{display:block}
.cv-route .cover-title{font-size:23px}
.cv-route .cover-img{position:relative; z-index:2}
.cv-route .facewrap{margin-top:auto}
.cv-route .faces{justify-content:flex-start}

/* --- 和：縦書きの題字と落款、青海波 --- */
.cv-wa .cover-bar{display:none}
.cv-wa .cover-in{margin:10px; padding:16px 16px 14px; border:1px solid var(--teal); outline:1px solid var(--teal); outline-offset:3px;
  flex-direction:row-reverse; gap:14px; min-height:220px; overflow:hidden}
.cv-wa .wa-side{display:flex; flex-direction:column; gap:12px; writing-mode:vertical-rl; text-orientation:mixed; flex:none; position:relative; z-index:2}
.cv-wa .cover-title{font-size:24px; letter-spacing:.18em; line-height:1.2}
.cv-wa .cover-dest{font-size:12px; letter-spacing:.3em; color:var(--ink-2)}
.cv-wa .wa-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; position:relative; z-index:2}
.cv-wa .cover-img{aspect-ratio:4/3; border:1px solid var(--line)}
.cv-wa .cover-dates{font-size:12.5px}
.cv-wa .wa-seal{margin-top:auto; align-self:flex-start; width:30px; height:30px; background:#c8392b; color:#fff; display:grid; place-items:center;
  font-size:15px; font-weight:900; border-radius:3px; line-height:1}
.cv-wa .wa-wave{position:absolute; left:0; right:0; bottom:0; height:64px; opacity:.16; color:var(--teal); z-index:1; pointer-events:none}
.cv-wa .cover-in{position:relative}
.cv-wa .faces{justify-content:flex-start}
.cv-wa .facewrap{margin-top:4px}

/* --- マガジン：雑誌の一面 --- */
.cv-magazine .cover-bar{display:none}
.cv-magazine .cover-in{padding:16px 18px 18px; gap:0}
.cv-magazine .mg-mast{font-size:40px; font-weight:900; line-height:.95; letter-spacing:-.03em; text-transform:uppercase; color:var(--teal); overflow-wrap:anywhere}
.cv-magazine .mg-issue{display:flex; justify-content:space-between; gap:10px; border-top:2px solid var(--ink); border-bottom:1px solid var(--ink);
  padding:5px 0; margin-top:8px; font-size:10px; letter-spacing:.2em; font-weight:700; color:var(--ink-2)}
.cv-magazine .cover-img{margin:12px 0 0}
.cv-magazine .mg-lines{margin-top:14px; display:flex; flex-direction:row; gap:14px; align-items:center}
/* 題字は黒地に縦書き。長い題は max-height で折り返し、左へ列が増える */
.cv-magazine .cover-title{display:block; flex:none; writing-mode:vertical-rl; text-orientation:mixed; background:var(--ink); color:var(--surface);
  padding:.55em .32em; font-size:19px; line-height:1.4; letter-spacing:.06em; max-height:320px; word-break:keep-all}
.cv-magazine .mg-cl{display:flex; flex-direction:column; justify-content:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--ink-2); min-width:0}
.cv-magazine .mg-cl div{border-left:3px solid var(--coral); padding-left:8px; line-height:1.5}
.cv-magazine .facewrap{margin-top:12px}
.cv-magazine .faces{justify-content:flex-start}
.cover-dest{font-size:12px; font-weight:700; color:var(--teal)}
.cover-title{font-size:21px; font-weight:900; line-height:1.45; overflow-wrap:anywhere}
.cover-dates{font-size:13px; color:var(--ink-2); font-weight:500}
.cover-note{font-size:13px; color:var(--ink-2); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.75}
.countdown{display:flex; align-items:baseline; gap:8px; margin-top:4px; padding-top:12px; border-top:1px solid var(--line-2)}
.countdown b{font-size:30px; font-weight:900; color:var(--teal); line-height:1}
.countdown span{font-size:12.5px; color:var(--ink-2)}

.share-url{
  display:flex; align-items:center; gap:8px; background:var(--surface-2); min-width:0;
  border:1px solid var(--line); border-radius:var(--r-in); padding:8px 10px;
}
.share-url code{
  flex:1 1 0; width:0; min-width:0; font-size:12px; font-family:ui-monospace,SFMono-Regular,monospace;
  color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:rtl; text-align:left;
}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--green); flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent)}
.micon{border-radius:50%; object-fit:cover; display:block; background:var(--surface-3)}
.micon-wrap{display:inline-flex; flex:none; --face-bg:var(--teal-soft)}
.micon-wrap .face,.micon-wrap .micon{border-radius:50%}
.iconbtn{padding:0; border:0; background:none; line-height:0; border-radius:50%; flex:none;
  --face-bg:var(--teal-soft); transition:transform .12s}
.iconbtn:hover{transform:scale(1.08)}
.iconbtn .face{border-radius:50%}
.facegrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(56px,18%),1fr)); gap:8px}
.facebtn{padding:3px; border:2px solid var(--line); border-radius:12px; background:var(--surface);
  line-height:0; --face-bg:var(--teal-soft)}
.facebtn:hover{border-color:var(--ink-3)}
.facebtn[aria-pressed="true"]{border-color:var(--teal); background:var(--teal-soft)}
.facebtn .face{border-radius:50%}
.meopt{--face-bg:var(--teal-soft)}
.faces .faceitem,.cv-members{--face-bg:var(--teal-soft)}
.mepick{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr)); gap:8px}
.meopt{display:flex; align-items:center; gap:9px; padding:9px 12px; border:2px solid var(--line);
  border-radius:var(--r-in); background:var(--surface); text-align:left}
.meopt:hover{border-color:var(--teal); background:var(--teal-soft)}
.meopt-n{font-size:14.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mesep{display:flex; align-items:center; gap:10px; color:var(--ink-3); font-size:12px; margin:2px 0}
.mesep::before,.mesep::after{content:""; flex:1; height:1px; background:var(--line)}
.mem-row{display:flex; align-items:center; gap:9px; font-size:14px}
.mem-row .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mem-row .me{font-size:10.5px; color:var(--ink-3); flex:none; font-weight:700}
.mem-row .del{margin-left:auto; opacity:0; transition:opacity .12s}
.mem-row:hover .del, .mem-row:focus-within .del{opacity:1}
.kv{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14px}
.kv .k{color:var(--ink-2)}
.kv .v{font-weight:700; font-variant-numeric:tabular-nums}
.kv-big .v{font-size:19px; color:var(--teal); font-weight:900}

/* タブ = セグメント */
.tabs{
  display:inline-flex; gap:3px; background:var(--surface-3); border-radius:999px;
  padding:4px; margin-bottom:20px; max-width:100%; overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  border:none; background:transparent; padding:.5em 1.15em; border-radius:999px;
  font-size:13.5px; font-weight:700; color:var(--ink-2); white-space:nowrap; transition:background .14s,color .14s;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--surface); color:var(--teal); box-shadow:var(--sh-1)}
.tab .n{font-size:11.5px; margin-left:.45em; color:var(--ink-3); font-variant-numeric:tabular-nums}
.tab[aria-selected="true"] .n{color:var(--teal)}
.panel[hidden]{display:none}
.entry-time b.slot{color:var(--teal); font-size:14px; letter-spacing:.02em}
.slotgrid{display:flex; flex-wrap:wrap; gap:6px}
.slotpick{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:.42em 1em;
  font-size:13.5px; font-weight:700; color:var(--ink-2)}
.slotpick.on{background:var(--teal); border-color:var(--teal); color:var(--on-accent)}

/* ---------- スマホのアプリ風レイアウト（下タブ＋右上メニュー） ---------- */
.btn-menu{display:none}
.btabs{display:none}
.m-only{display:none}
.mmenu{gap:14px}
.mgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.mgrid-2{border-top:1px solid var(--line); padding-top:14px; grid-template-columns:repeat(3,1fr)}
.mitem{border:none; background:var(--surface-2); border-radius:14px; padding:12px 4px 10px; display:flex; flex-direction:column;
  align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--ink-2)}
.mitem svg{width:24px; height:24px; color:var(--teal)}
.mgrid-site{grid-template-columns:repeat(2,1fr)}
.mgrid-site .mitem{flex-direction:row; justify-content:flex-start; gap:10px; padding:12px 14px; font-size:13.5px}
.mgrid-site .mitem span{text-align:left}
.mitem:active{background:var(--teal-soft)}

/* 日の切り替え */
/* 日のタブは、予定を下へ読んでいっても見えるように画面上部に貼りつく（ヘッダーの下） */
.dayseg{display:flex; gap:8px; overflow-x:auto; padding:9px 1px 12px; scrollbar-width:none;
  position:sticky; top:65px; z-index:5; background:var(--bg)}
.dayseg::-webkit-scrollbar{display:none}
.daypill{
  flex:none; display:inline-flex; align-items:baseline; gap:.5em; white-space:nowrap;
  border:1px solid var(--line); background:var(--surface); border-radius:999px;
  padding:.62em 1.25em; font-size:14.5px; font-weight:700; color:var(--ink);
  box-shadow:var(--sh-1); transition:background .14s, border-color .14s, color .14s;
}
.daypill:hover{border-color:var(--ink-3)}
.daypill .dp-d{font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.daypill[aria-selected="true"]{background:var(--teal); border-color:var(--teal); color:var(--on-accent)}
.daypill[aria-selected="true"] .dp-d{color:var(--on-accent); opacity:.78}
.daypill.drop-target{border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft)}
.day-empty-note{background:var(--surface); border-radius:var(--r-card); box-shadow:var(--sh-1);
  padding:30px 22px; color:var(--ink-3); font-size:14px; text-align:center}

/* 日程カード */
.day{background:var(--surface); border-radius:var(--r-card); box-shadow:var(--sh-1); margin-bottom:18px; overflow:hidden}
.day-head{display:flex; align-items:center; gap:12px; padding:18px 22px 14px; flex-wrap:wrap}
.day-head h2{font-size:19px; font-weight:900; color:var(--teal); letter-spacing:.005em}
.day-head h2 .dn{margin-right:.1em}
.day-sum{margin-left:auto; font-size:12px; color:var(--ink-3); font-weight:700; font-variant-numeric:tabular-nums}

/* ★ 予定は日付より一段インデントする */
.day-body{padding:0 22px 4px 46px}
.entry{
  display:grid; grid-template-columns:78px minmax(0,1fr) auto; gap:0 18px;
  align-items:start; padding:16px 12px 16px 0; border-radius:var(--r-in);
  position:relative; cursor:pointer; transition:background .13s;
}
.entry + .entry{border-top:1px solid var(--line-2)}
.grip{
  position:absolute; left:-18px; top:16px; width:20px; height:26px; display:grid; place-items:center;
  color:var(--ink-3); cursor:grab; opacity:0; transition:opacity .12s; touch-action:none; border-radius:5px;
}
.entry:hover .grip, .entry:focus-within .grip{opacity:1}
.grip:hover{background:var(--surface-3); color:var(--ink-2)}
.grip:active{cursor:grabbing}
@media (hover:none){.grip{opacity:.75}}
.entry.dragging{opacity:.4}
.entry.drop-before{box-shadow:inset 0 2px 0 0 var(--teal)}
.entry.drop-after{box-shadow:inset 0 -2px 0 0 var(--teal)}
.day-body.drop-empty{box-shadow:inset 0 0 0 2px var(--teal); border-radius:var(--r-in)}
body.dragging-now{user-select:none; -webkit-user-select:none}
.entry:hover{background:var(--surface-2)}
.entry-time{text-align:right; display:flex; flex-direction:column; align-items:flex-end; padding-top:1px}
.entry-time b{font-size:20px; font-weight:900; color:var(--teal); line-height:1.25; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.entry-time b.none{color:var(--ink-3); font-size:16px}
.entry-time i{font-style:normal; font-size:13px; font-weight:700; color:var(--teal); opacity:.72; font-variant-numeric:tabular-nums}
.entry-main{min-width:0; display:flex; flex-direction:column; gap:5px}
.entry-title{font-size:16px; font-weight:700; line-height:1.55; overflow-wrap:anywhere; display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.entry-place{font-size:13px; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center}
.entry-place .mapl{display:inline-flex; align-items:center; gap:4px; color:var(--teal); font-weight:700}
.entry-memo{font-size:13.5px; color:var(--ink-2); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.75}
/* 場所の説明（Wikipediaの冒頭）。長くても2行で止める */
.entry-info{font-size:12.5px; color:var(--ink-3); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
/* 場所の情報カード（予定の中身・確認シート） */
.pinfo{display:flex; gap:12px; align-items:flex-start; padding:12px; border:1px solid var(--line); border-radius:var(--r-in); background:var(--surface-2)}
.pinfo-img{flex:none; width:92px; height:92px; object-fit:cover; border-radius:8px; background:var(--surface-3)}
.pinfo-in{min-width:0; display:flex; flex-direction:column; gap:4px; font-size:13px; line-height:1.6}
.pinfo-in b{font-size:15px; line-height:1.4}
.pinfo-addr{color:var(--ink-3); font-size:12px}
.pinfo-in p{color:var(--ink-2); margin:2px 0 0}
.pinfo-src{color:var(--ink-3); font-size:11px}
.pinfo-ask{background:var(--surface); border-color:var(--teal); border-width:2px}
.pinfo-ask .pinfo-img{width:112px; height:112px}
.plinks{display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; margin-top:4px}
.plink{display:inline-flex; align-items:center; gap:5px; white-space:nowrap; padding:5px 10px; border-radius:999px; background:var(--teal-soft); color:var(--teal); font-weight:700; font-size:12.5px; text-decoration:none}
.plink svg{width:14px; height:14px}
.plink i{font-style:normal; font-weight:500; color:var(--ink-3); font-size:11px}
.plink-hint{font-size:11.5px; color:var(--ink-3)}
.ai-q{display:flex; flex-direction:column; gap:8px}
.ai-chips{display:flex; flex-wrap:wrap; gap:7px}
.ai-chip{border:1px solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:999px; padding:7px 13px; font-size:13px; font-weight:700; text-align:left; line-height:1.4}
.ai-chip.on{background:var(--teal); border-color:var(--teal); color:var(--on-accent)}
.pi-box{display:flex; flex-direction:column; gap:8px}
.pi-box[hidden]{display:none}
.pi-head{font-size:14px; font-weight:900; color:var(--ink)}
.pi-head.pi-ok{display:flex; align-items:center; gap:6px; color:var(--teal-d); font-size:13px}
.pi-head.pi-ok svg{width:18px; height:18px}
.pi-loading{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-3); padding:4px 0}
.pi-btns{display:flex; gap:8px; justify-content:flex-end}
.linkbtn{border:none; background:none; color:var(--ink-3); font-size:12px; text-decoration:underline; padding:0 4px; margin-left:auto}
.entry-cost{font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.entry-cost b{font-weight:700; color:var(--ink)}
.entry-side{display:flex; align-items:flex-start; gap:8px}
.entry-shot{display:flex; flex-direction:column; gap:3px; max-width:96px}
.shot-credit{font-size:9px; line-height:1.35; color:var(--ink-3); word-break:break-word}
.shot-credit a{color:var(--ink-3); text-decoration:underline}
.entry-thumb{display:block; border-radius:var(--r-in); overflow:hidden; flex:none; line-height:0; box-shadow:var(--sh-1)}
.entry-thumb:hover{text-decoration:none; box-shadow:var(--sh-2)}
.entry-thumb svg{display:block}
.entry-thumb img{display:block; width:96px; height:72px; object-fit:cover}
.entry-thumb{border:0; padding:0; background:none; cursor:pointer}
.photo-full{display:block; width:100%; max-height:70vh; object-fit:contain; background:var(--surface-3); border-radius:var(--r-in)}
.entry-edit{opacity:0; transition:opacity .13s}
.entry:hover .entry-edit, .entry:focus-within .entry-edit{opacity:1}
.day-empty{padding:6px 0 14px; color:var(--ink-3); font-size:13.5px}
.day-foot{padding:6px 22px 18px 46px}

.kchip{
  display:inline-flex; align-items:center; gap:.35em; font-size:11px; font-weight:700;
  padding:.22em .6em .22em .5em; border-radius:6px; background:var(--surface-3); color:var(--ink-2); flex:none;
}
.kchip .ki{width:13px; height:13px; flex:none; display:block}
/* 背景と文字は種類の色から作る。色の指定は KIND_COLORS の1か所だけ。 */
.kchip{background:color-mix(in srgb, var(--kc) 14%, transparent); color:var(--kc)}

/* 持ちもの */
.pack-progress{display:flex; align-items:center; gap:14px; font-size:13px; color:var(--ink-2); margin-bottom:8px}
.bar{flex:1; height:8px; background:var(--surface-3); border-radius:999px; overflow:hidden; max-width:320px}
.bar i{display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--green)); border-radius:999px; transition:width .3s}
.sel-bar{display:flex; align-items:center; gap:10px; margin:2px 0 6px; justify-content:flex-end; flex-wrap:wrap}
.sel-enter{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2)}
.sel-enter svg{width:15px; height:15px}
.sel-bar.on{justify-content:flex-start; background:var(--coral-soft); border-radius:var(--r-in); padding:8px 12px}
.sel-title{flex:1 0 100%; font-size:12.5px; color:var(--ink-2)}
.sel-all{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; margin-right:auto}
.sel-all input{width:17px; height:17px; accent-color:var(--teal)}
.pitem.sel input[type=checkbox]{accent-color:var(--coral)}
.pitem.sel.picked{background:var(--coral-soft); margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:8px}
.whotabs{display:flex; gap:6px; overflow-x:auto; margin:0 0 12px; padding:1px 1px 4px; scrollbar-width:none}
.whotabs::-webkit-scrollbar{display:none}
.whotab{flex:none; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:6px 14px; font-size:13px; font-weight:700; color:var(--ink-2); white-space:nowrap}
.whotab[aria-selected="true"]{background:var(--teal); border-color:var(--teal); color:#fff}
.whotag{font-size:11px; color:var(--teal-d); background:var(--teal-soft); border-radius:999px; padding:2px 8px; flex:none; margin-top:.25em; font-weight:700}
.echips{display:flex; flex-wrap:wrap; gap:4px; flex:none; margin-top:.2em; max-width:46%}
/* 人が多いときは名前の下の行にチップを回す */
.pitem.has-chips{flex-wrap:wrap}
.pitem.has-chips .echips{order:10; flex:1 0 100%; max-width:none; padding-left:28px; margin-top:0}
.ech{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:2px 8px; font-size:11px; color:var(--ink-3); font-weight:700}
.ech.on{background:var(--teal-soft); border-color:var(--teal); color:var(--teal-d)}
.ech.on::before{content:'✓'; margin-right:2px}
.pack-group{margin-bottom:6px}
.pack-group > .label{display:block; margin:16px 0 4px}
.pitem{display:flex; align-items:flex-start; gap:11px; padding:9px 0; border-bottom:1px solid var(--line-2)}
.pitem input[type=checkbox]{margin-top:.4em; width:17px; height:17px; accent-color:var(--teal); flex:none}
.pitem label{flex:1; font-size:14.5px; line-height:1.6; overflow-wrap:anywhere; cursor:pointer}
.pitem.done label{color:var(--ink-3); text-decoration:line-through}
.pitem .by{font-size:11px; color:var(--ink-3); flex:none; padding-top:.3em; font-weight:700}
.pitem .del, .pitem .edit{opacity:0; transition:opacity .12s}
.pitem .edit svg{width:15px; height:15px}
.pitem:hover .edit, .pitem:focus-within .edit{opacity:1}
@media (hover:none){.pitem .edit{opacity:.75}}
.pitem-mark{width:17px; flex:none; margin-top:.35em; color:var(--teal); font-weight:900; text-align:center}
.pitem-text{flex:1; font-size:14.5px; line-height:1.6; overflow-wrap:anywhere}
.pitem.done .pitem-text{color:var(--ink-3); text-decoration:line-through}
.pitem:hover .del, .pitem:focus-within .del{opacity:1}
/* タッチ端末はホバーが無いので、×はいつも見せる */
@media (hover:none){.pitem .del{opacity:.75}}
.inline-form{display:flex; gap:10px; align-items:flex-end; margin-top:20px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--line-2)}
.preset-row{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;
  margin:0 0 18px; padding-bottom:16px; border-bottom:1px solid var(--line-2)}
.preset-hint{font-size:11.5px; color:var(--ink-3); line-height:1.7; flex:1; min-width:200px}
.inline-form .field{flex:1; min-width:190px}

/* おかね */
.cost-top{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr)); gap:14px; margin-bottom:8px}
.cost-cell{background:var(--surface-2); border-radius:var(--r-in); padding:14px 16px; display:flex; flex-direction:column; gap:2px}
.cost-cell .k{font-size:11.5px; color:var(--ink-3); font-weight:700}
.cost-cell .v{font-size:24px; font-weight:900; font-variant-numeric:tabular-nums; line-height:1.3}
.cost-cell .v small{font-size:13px; color:var(--ink-3); margin-left:2px; font-weight:700}
.tbl{width:100%; border-collapse:collapse; font-size:14px}
.tbl th{text-align:left; font-size:11.5px; color:var(--ink-3); font-weight:700; padding:0 12px 8px 0; border-bottom:1px solid var(--line)}
.tbl td{padding:11px 12px 11px 0; border-bottom:1px solid var(--line-2); vertical-align:middle}
.tbl td.n{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; font-weight:700}
.tbl td.n.plus{color:var(--green)} .tbl td.n.minus{color:var(--coral)}
.settle{display:flex; flex-direction:column; gap:9px; margin-top:12px}
.settle-row{display:flex; align-items:center; gap:11px; font-size:14px; background:var(--surface-2); border-radius:var(--r-in); padding:11px 15px}
.settle-row .arrow{color:var(--teal); font-weight:900}
.settle-row .amt{margin-left:auto; font-weight:900; font-variant-numeric:tabular-nums}
.scroll-x{overflow-x:auto}

/* レシート */
.rc-bar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:8px 0 16px}
.forpick{display:flex; flex-wrap:wrap; gap:6px}
.forchip{display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:4px 12px 4px 6px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink-2); font:inherit; font-size:13px; font-weight:700; cursor:pointer}
.forchip.forall{padding:4px 14px}
.forchip[aria-pressed="true"]{border-color:var(--teal); background:var(--teal-soft); color:var(--teal-d)}
.forchip .micon-wrap{display:inline-flex}
.rc-for{font-size:11.5px; color:var(--ink-3); font-weight:500}
.cost-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:26px 0 10px}
.splitpick .splitchip{padding:4px 12px}
.heads-sub{margin-left:33px; white-space:nowrap}
.heads-row{display:grid; grid-template-columns:1fr 84px 84px; gap:10px; align-items:end; padding:10px 0; border-bottom:1px solid var(--line-2)}
.heads-name{display:flex; align-items:center; gap:8px; font-weight:700; min-height:44px}
.rc-hint{font-size:12px; color:var(--ink-3); line-height:1.7; flex:1; min-width:220px}
.rc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr)); gap:12px}
.rc{
  display:grid; grid-template-columns:74px minmax(0,1fr); gap:12px; width:100%; text-align:left;
  background:var(--surface-2); border:1px solid transparent; border-radius:var(--r-in); padding:10px;
  transition:border-color .14s, background .14s;
}
.rc:hover{border-color:var(--teal); background:var(--surface)}
.rc-thumb{width:74px; height:74px; border-radius:8px; object-fit:cover; background:var(--surface-3); display:block}
.rc-thumb.none{display:grid; place-items:center; font-size:10.5px; color:var(--ink-3); text-align:center; line-height:1.4}
.rc-b{min-width:0; display:flex; flex-direction:column; gap:2px; justify-content:center}
.rc-store{font-weight:700; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rc-total{font-size:19px; font-weight:900; font-variant-numeric:tabular-nums; line-height:1.3}
.rc-meta{font-size:11.5px; color:var(--ink-3); display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.ocr-preview{width:100%; max-height:280px; object-fit:contain; border-radius:var(--r-in); background:var(--surface-3); display:block}
.ocr-status{display:flex; gap:10px; align-items:center; font-size:13.5px; color:var(--ink-2)}
.spinner{width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--teal); border-radius:50%; animation:spin .8s linear infinite; flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.rc-items{font-size:12.5px; color:var(--ink-2); line-height:1.8; max-height:150px; overflow:auto;
  background:var(--surface-2); border-radius:var(--r-in); padding:10px 13px}
.rc-items div{display:flex; justify-content:space-between; gap:12px}
.rc-items span:last-child{font-variant-numeric:tabular-nums; flex:none}

/* 掲示板 */
.msg-body,.entry-main,.rc-b,.tk-in{min-width:0}
.logs{display:flex; flex-direction:column}
.logrow{display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line-2)}
.logbody{flex:1; min-width:0}
.logline{display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:13.5px}
.logact{font-size:11px; font-weight:700; padding:.14em .55em; border-radius:5px}
.act-add{background:var(--green-soft); color:var(--green)}
.act-edit{background:var(--teal-soft); color:var(--teal-d)}
.act-del{background:var(--coral-soft); color:var(--coral)}
.logcoll{font-size:11.5px; color:var(--ink-3); font-weight:700}
.logwhat{font-size:13px; color:var(--ink-2); margin-top:2px; overflow-wrap:anywhere}
.logtime{font-size:11px; color:var(--ink-3); white-space:nowrap; flex:none; padding-top:3px; font-variant-numeric:tabular-nums}
.byline{font-size:11px; color:var(--ink-3); white-space:nowrap; flex:none; padding-top:.3em}
.msgs{display:flex; flex-direction:column; gap:16px; margin-bottom:20px}
.msg{display:flex; gap:12px}
.msg-body{flex:1; min-width:0}
.msg-head{display:flex; align-items:baseline; gap:9px; font-size:12.5px}
.msg-name{font-weight:700}
.msg-time{color:var(--ink-3); font-size:11px; font-variant-numeric:tabular-nums}
.msg-del{margin-left:auto; opacity:0; transition:opacity .12s; color:var(--coral)}
.msg:hover .msg-del, .msg:focus-within .msg-del{opacity:1}
@media (hover:none){.msg-del{opacity:1}}
.msg-text{
  font-size:14.5px; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere;
  background:var(--surface-2); border-radius:12px; border-top-left-radius:3px; padding:10px 15px; margin-top:5px;
}
.composer{display:flex; flex-direction:column; gap:10px; padding-top:18px; border-top:1px solid var(--line-2)}
.composer .row2{display:flex; gap:10px; justify-content:flex-end}

.panel-card{background:var(--surface); border-radius:var(--r-card); box-shadow:var(--sh-1); padding:22px 24px}
.notice{
  background:var(--surface); border-radius:var(--r-in); box-shadow:var(--sh-1);
  border-left:4px solid var(--teal); padding:13px 17px; font-size:13px; color:var(--ink-2);
  line-height:1.75; margin-bottom:18px;
}
.notice.warn{border-left-color:var(--coral)}
.install-note{display:flex; flex-direction:column; gap:6px; font-size:13px; line-height:1.7}
.install-note>b{font-size:14px}
.install-how{display:inline-block; background:var(--teal-soft); color:var(--teal-d); border-radius:8px; padding:4px 10px; align-self:flex-start}
.install-note .linkbtn{align-self:flex-end; margin:0}
.notice.sample-note{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px}
.course-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; margin:18px 0 8px}
.course-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); color:var(--ink); text-decoration:none}
.course-card:hover{border-color:var(--teal)}
.course-card img{display:block; width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover; background:var(--teal-soft)}
.course-t{display:flex; flex-direction:column; gap:4px; padding:12px 14px 14px}
.course-t b{font-size:16px}
.course-empty{color:var(--ink-2); padding:24px 0}
.course-t small{color:var(--ink-3); font-size:12.5px}
.course-t span{font-size:13px; line-height:1.6; color:var(--ink-2)}
.notice.sample-note .btn{margin-left:auto}
.notice b{color:var(--ink)}

.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:var(--bg); padding:.65em 1.4em; border-radius:999px;
  font-size:13.5px; font-weight:700; box-shadow:var(--sh-2); opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; z-index:60;
}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

#print-root{display:none}

@media screen and (max-width: 940px){
  .trip{grid-template-columns:1fr; gap:18px; padding-top:16px}
  .rail{position:static}
  .top-trip{display:none}
  /* いま開いている人・メンバー・おかね は「しおりの設定」の中へ移動する */
  #r-live, #r-members{display:none}
}
@media screen and (max-width: 640px){
  .wrap{padding:0 14px}
  .hero{padding:34px 0 150px; margin-bottom:18px}
  /* 主ボタンが幅いっぱいになったので、飛行機はボタンの下・雲の上の帯に置く */
  .art-plane{top:auto; bottom:52px; right:-30px; width:176px; opacity:.92}
  .art-route{display:none}
  .art-far{top:14%; left:auto; right:11%}
  .art-cloud{height:82px}
  .day-body{padding:0 14px 4px 22px}
  .day-foot{padding:6px 14px 16px 22px}
  .day-head{padding:16px 16px 12px}
  .entry{grid-template-columns:62px minmax(0,1fr); gap:0 14px}
  .entry-time b{font-size:17px}
  .entry-side{grid-column:2; margin-top:8px}
  .entry-thumb img{width:84px; height:64px}
  .entry-edit{opacity:1}
  .grip{left:-16px}
  .grid2{grid-template-columns:1fr}
  .panel-card{padding:18px 16px}
  .hero-points{gap:2px 0; padding:4px 2px; border-radius:12px}
  .hero .btn-hero{width:100%; max-width:420px; font-size:16.5px}
  .hp{font-size:14.5px; padding:6px 12px; gap:7px}
  .hp svg{width:20px; height:20px}
  .hp+.hp{border-left:none}
  .top-in{gap:6px}
  .mark-name{display:none}
  .btn-label{display:none}
  .btn-icon{padding:.45em .6em}
  .top .btn{padding-left:.7em; padding-right:.7em; font-size:12.5px}

  /* ヘッダーは「＜ ロゴ 旅名 ≡」だけ。設定・印刷・共有・更新はメニューへ */
  #btn-sync,#btn-edit-trip,#btn-print,#btn-share{display:none}
  /* サイト側（TOP・固定ページ）も「ロゴ ≡」＋下タブ */
  .top .topnav,#new-trip,#g-new,.lang-btn{display:none}
  .top-site .mark-name{display:inline}
  .foot{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .btn-menu{display:inline-flex}
  .btn-menu svg{width:20px; height:20px}
  .top-trip{display:block; flex:1; max-width:none; padding-left:10px; font-size:14.5px}
  /* 表紙・メンバーはメニューの「デザイン」で見る。開いたらすぐ日程 */
  .trip{padding-top:12px; padding-bottom:calc(84px + env(safe-area-inset-bottom)); gap:12px}
  .rail{display:none}
  .trip.m-design .rail{display:flex}
  .trip.m-design main{display:none}
  .m-design-btns{display:flex; flex-direction:column; gap:8px}
  .m-design-btns .btn{width:100%; padding:.8em 1em}
  #tabs{display:none}
  /* 下タブ */
  .btabs{position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; justify-content:space-around;
    background:var(--surface); border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 16px rgba(12,24,30,.05)}
  .btab{flex:1; border:none; background:transparent; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:4px 0; font-size:10.5px; font-weight:700; color:var(--ink-3); border-radius:12px; min-width:0}
  .btab svg{width:24px; height:24px}
  .btab[aria-selected="true"]{color:var(--teal)}
  .btab[aria-selected="true"] svg{color:var(--teal)}
  .btab:active{background:var(--surface-2)}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom))}
  /* ダイアログは下から出るシートに */
  dialog{max-width:100vw; width:100vw; margin:auto 0 0}
  dialog .sheet{border-radius:20px 20px 0 0}
  /* ハンバーガーメニューだけは上から（押した指の近くに出す） */
  dialog.dlg-top{margin:0 0 auto}
  dialog.dlg-top .sheet{border-radius:0 0 20px 20px}
  dialog.dlg-top .sheet-head{padding-top:calc(20px + env(safe-area-inset-top))}
  .sheet-body{max-height:calc(100dvh - 190px)}
  /* シート全体を画面に収め、はみ出す分は本文だけをスクロールさせる（設定のタブなど見出しが増えても足のボタンが画面外へ出ない） */
  dialog{max-height:100dvh}
  #dlg-form{display:flex; flex-direction:column; max-height:100dvh}
  dialog .sheet{display:flex; flex-direction:column; min-height:0; max-height:100dvh}
  .sheet-head, .stabs, .sheet-foot{flex:none}
  .sheet-body{flex:1 1 auto; min-height:0; overflow:auto; max-height:none}
  .sheet-foot{padding-bottom:max(34px, calc(16px + env(safe-area-inset-bottom)))}
  /* 予定は3行カード：時刻・種類＋名前・場所。地図や編集はタップした先で */
  .day-head h2{display:none}
  .day-sum{margin-left:0}
  .day-head{padding:12px 16px 4px}
  .entry{padding:14px 26px 14px 0}
  .entry-side{display:none}
  .entry-memo{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; white-space:normal}
  .entry::after{content:""; position:absolute; right:8px; top:50%; width:8px; height:8px; margin-top:-5px;
    border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3); transform:rotate(-45deg); opacity:.6}
  .day-foot{display:flex; flex-direction:column; gap:8px; padding:10px 14px 16px}
  .day-foot [data-add]{width:100%; background:var(--teal); color:var(--on-accent); border-color:var(--teal); padding:.8em 1em; font-size:15px}
  .day-foot .btn-ai{width:100%}
}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important; transition-duration:.001ms !important}}

.btn-ai{border-color:var(--teal); color:var(--teal); font-weight:700}
.btn-ai:hover{background:var(--teal-soft)}
.ai-time{color:var(--teal); font-size:13px; margin-right:2px}
.ai-reason{font-size:12.5px; line-height:1.75; color:var(--ink); font-weight:500}

/* 種類えらび */
.kindgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.kindpick{display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
  border:1px solid var(--line); border-radius:12px; padding:11px 6px; background:transparent;
  font-size:12px; font-weight:700; color:var(--ink-2)}
.kindpick .ki{width:26px; height:26px}
.kindpick:hover{border-color:var(--kc)}
.kindpick.on{border-color:var(--kc); background:color-mix(in srgb, var(--kc) 12%, transparent); color:var(--ink)}
@media (max-width:400px){ .kindgrid{gap:6px} .kindpick{font-size:11.5px; padding:9px 4px} }

/* 打ちながら出る場所の候補 */
.sug-wrap{position:relative}
.sug{position:absolute; left:0; right:0; top:calc(100% - 20px); z-index:5;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--sh-2); overflow:hidden; max-height:230px; overflow-y:auto}
.sug-item{display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; cursor:pointer;
  border:0; border-top:1px solid var(--line); padding:10px 13px; background:transparent}
.sug-item:first-child{border-top:0}
.sug-item:hover{background:var(--teal-soft)}
.sug-item b{font-size:13.5px; color:var(--ink)}
.sug-item span{font-size:11.5px; color:var(--ink-3)}

/* 近くのおすすめ */
.nb-genres{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px}
.nb-g{border:1px solid var(--line); background:transparent; color:var(--ink-2);
  border-radius:999px; padding:7px 13px; font-size:12.5px; font-weight:700; cursor:pointer}
.nb-g:hover{border-color:var(--teal); color:var(--teal)}
.nb-g.on{background:var(--teal); border-color:var(--teal); color:var(--on-accent)}
.nb-load{display:flex; align-items:center; gap:10px; padding:26px 0; font-size:13px; color:var(--ink-3)}
.nb-card{display:flex; gap:13px; padding:13px 0; border-top:1px solid var(--line)}
.nb-card:first-child{border-top:0}
.nb-img{width:104px; height:104px; border-radius:12px; object-fit:cover;
  background:var(--line); display:block}
.nb-noimg{display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--ink-3); text-align:center}
.nb-shot{flex:0 0 104px; display:flex; flex-direction:column; gap:3px}
.nb-credit{font-size:9.5px; line-height:1.35; color:var(--ink-3); word-break:break-word}
.nb-credit a{color:var(--ink-3); text-decoration:underline}
.nb-note{font-size:11.5px; line-height:1.7; color:var(--ink)}
.nb-acts{display:flex; flex-wrap:wrap; gap:6px; margin-top:5px}
.nb-more{display:block; width:100%; margin-top:12px}
.nb-origin{display:block; font-size:11.5px; color:var(--ink-3); margin-top:5px; line-height:1.6}
.nb-src{font-size:11px; color:var(--ink-3); margin:16px 0 0; padding-top:12px; border-top:1px solid var(--line)}
.nb-in{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; align-items:flex-start}
.nb-name{font-size:14.5px; font-weight:700; line-height:1.4}
.nb-kind{font-size:11.5px; color:var(--ink-3); display:flex; align-items:center; gap:6px}
.nb-kind b{color:var(--coral)}
.nb-meta{font-size:12.5px; font-weight:700; color:var(--teal)}
.nb-addr{font-size:11.5px; line-height:1.6; color:var(--ink-3)}
.nb-in .btn{margin-top:4px}
@media (max-width:480px){
  .nb-shot{flex:0 0 84px}
  .nb-img{width:84px; height:84px}
  .nb-name{font-size:13.5px}
}

/* お問い合わせフォーム */
.ct-form{display:flex; flex-direction:column; gap:16px; max-width:620px}
.ct-form .field>span em{font-style:normal; font-size:11px; font-weight:700; margin-left:7px;
  color:var(--coral); letter-spacing:.04em}
.ct-form .field>span em.opt{color:var(--ink-3)}
.ct-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.ct-foot{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.ct-msg{font-size:12.5px; color:var(--ink-3)}
.ct-msg.bad{color:var(--coral); font-weight:700}
.ct-done{border:1px solid var(--teal); background:var(--teal-soft); border-radius:14px;
  padding:20px 22px; display:flex; flex-direction:column; gap:6px}
.ct-done b{font-size:15px}
.ct-done span{font-size:13px; line-height:1.9; color:var(--ink-2)}

/* ヘッダーの導線と、規約などの固定ページ */
.topnav{font-size:13.5px; font-weight:700; color:var(--ink-2); text-decoration:none; padding:6px 4px}
.topnav:hover{color:var(--teal); text-decoration:none}
.lang-btn{border:1px solid var(--line); background:transparent; border-radius:999px; padding:5px 12px; font-size:12.5px; cursor:pointer}
/* 英語のときは見出しの2語（so much / more fun）のあいだを空ける */
html[lang="en"] .hw+.hw{margin-left:.22em}
.foot{display:block; padding:34px 0 46px; border-top:1px solid var(--line); margin-top:40px}
.foot-nav{display:flex; flex-wrap:wrap; gap:10px 20px; margin-bottom:16px}
.foot-nav a{font-size:13px; font-weight:700; color:var(--ink-2); text-decoration:none}
.foot-nav a:hover{color:var(--teal); text-decoration:underline}
.foot-cr{margin:0; font-size:12px; color:var(--ink-3)}
.doc-page h2{font-size:15.5px; margin:30px 0 10px; padding-bottom:7px; border-bottom:1px solid var(--line)}
.doc-page p{font-size:13.5px; line-height:2; color:var(--ink-2); margin:0 0 12px}
.doc-page ul,.doc-page ol{margin:0 0 14px; padding-left:1.4em}
.doc-page li{font-size:13.5px; line-height:2; color:var(--ink-2); margin-bottom:5px}
.doc-page a{color:var(--teal); font-weight:700}
.doc-page .big-link{display:inline-block; font-size:17px; margin-top:4px; letter-spacing:.02em}
.deflist{margin:0; display:grid; grid-template-columns:150px 1fr; gap:0}
.deflist dt{font-size:13px; font-weight:700; padding:13px 0; border-top:1px solid var(--line)}
.deflist dd{font-size:13.5px; line-height:1.9; color:var(--ink-2); margin:0; padding:13px 0; border-top:1px solid var(--line)}
@media (max-width:560px){
  .deflist{grid-template-columns:1fr; gap:0}
  .deflist dt{padding-bottom:2px}
  .deflist dd{padding-top:2px; border-top:0}
  .topnav{font-size:12.5px; padding:6px 0}
}

/* 初めての方へ */
.guide{padding-top:26px; padding-bottom:64px}
.guide h1{font-size:26px; letter-spacing:.01em; margin:0 0 8px}
.guide .lead{font-size:14px; line-height:1.95; color:var(--ink-2); margin:0 0 26px}
.gsec{margin:0 0 32px}
.gsec>h2{font-size:16.5px; margin:0 0 13px; padding-bottom:8px; border-bottom:1px solid var(--line)}
.gp{font-size:13.5px; line-height:1.95; color:var(--ink-2); margin:0 0 10px}
.gp-note{font-size:12.5px; color:var(--ink-3)}
.gfeat{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 34px}
.gf{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  border:1px solid var(--line); border-radius:16px; padding:20px 16px 18px}
.gf svg{width:64px; height:64px; display:block}
/* 見出しと説明は必ず行を分ける（幅にかかわらず） */
.gf .gf-t{display:flex; flex-direction:column; gap:4px}
.gf b{font-size:15px; letter-spacing:.01em}
.gf span{font-size:12.5px; line-height:1.8; color:var(--ink-2)}
@media (max-width:640px){
  .gfeat{grid-template-columns:1fr; gap:10px}
  .gf{flex-direction:row; align-items:center; text-align:left; gap:14px; padding:14px 16px}
  .gf svg{width:52px; height:52px; flex:0 0 52px}
  .gf .gf-t{display:flex; flex-direction:column; gap:3px}
}
.gsteps{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.gstep{display:flex; gap:14px; align-items:flex-start;
  border:1px solid var(--line); border-radius:14px; padding:15px 17px}
.gstep .gnum{flex:0 0 26px; height:26px; border-radius:50%; background:var(--teal);
  color:var(--on-accent,#fff); font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-top:1px}
.gtxt{display:flex; flex-direction:column; gap:4px}
.gtxt b{font-size:14.5px}
.gtxt span{font-size:13px; line-height:1.85; color:var(--ink-2)}
.gcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px}
.gcard{display:flex; flex-direction:column; gap:5px;
  border:1px solid var(--line); border-radius:14px; padding:14px 16px}
.gc-h{display:flex; align-items:center; gap:9px}
.gcard svg{width:38px; height:38px; flex:0 0 38px; display:block}
.gcard b{font-size:14px; color:var(--teal)}
.gcard span{font-size:12.5px; line-height:1.85; color:var(--ink-2)}
.gqa{display:grid; gap:2px}
.gq{display:flex; flex-direction:column; gap:5px; padding:15px 0; border-bottom:1px solid var(--line)}
.gq b{font-size:14px}
.gq span{font-size:13px; line-height:1.9; color:var(--ink-2)}
.gcta{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px}
.foot a{color:var(--teal); text-decoration:none; font-weight:700}
.foot a:hover{text-decoration:underline}
@media (max-width:560px){
  .guide h1{font-size:22px}
  .gcards{grid-template-columns:1fr}
}

/* 写真 */
.ph-head{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px}
.ph-note{font-size:12.5px; color:var(--ink-3); margin:0}
#ph-album{margin-bottom:14px}
.ph-album{display:inline-block; font-size:13px; font-weight:700; text-decoration:none;
  color:var(--teal); border:1px solid var(--line); border-radius:999px; padding:7px 14px}
.ph-album:hover{background:var(--teal-soft); border-color:var(--teal)}
.ph-group{margin-bottom:20px}
.ph-date{display:flex; align-items:baseline; gap:8px; font-weight:700; font-size:13.5px; margin-bottom:8px}
.ph-date span{font-weight:400; font-size:12px; color:var(--ink-3)}
.ph-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:6px}
.ph-cell{position:relative; padding:0; border:0; background:var(--line); border-radius:10px;
  overflow:hidden; aspect-ratio:1/1; cursor:pointer}
.ph-cell img{width:100%; height:100%; object-fit:cover; display:block}
.ph-by{position:absolute; left:0; right:0; bottom:0; padding:12px 6px 4px; font-size:10.5px;
  color:#fff; text-align:left; background:linear-gradient(transparent,rgba(0,0,0,.55))}
.ph-view{text-align:center}
.ph-view img{max-width:100%; max-height:60vh; border-radius:10px}
.ph-meta{font-size:12.5px; color:var(--ink-3); margin:10px 0 0}

@media print{
  .top,.app,.toast,dialog{display:none !important}
  body{background:#fff; color:#000; font-size:10.5pt; font-family:var(--f)}
  .pr-cover{border-color:var(--teal)}
  .pr-cover .t{color:var(--teal)}
  .pr-sec h2{border-bottom-color:var(--teal); color:var(--teal)}
  .pr-day h3{color:var(--coral)}
  #print-root{display:block; max-width:none; margin:0}
  /* 余白は @page でなく中身側で作る。印刷ダイアログで余白を「なし」に
     されても、上下左右とも同じ見た目を保つため。 */
  .pgt{width:100%; border-collapse:collapse; table-layout:fixed}
  .pgt td{padding:0}
  .pgt tbody>tr>td{padding:0 15mm}
  .vsp{height:15mm}
  .pr-sec{margin-bottom:7mm; break-inside:avoid}
  .pr-sec h2{font-size:12pt; font-weight:900; border-bottom:1.2pt solid #000; padding-bottom:1.5mm; margin-bottom:3mm}
  .pr-day{break-inside:avoid; margin-bottom:5mm}
  .pr-day h3{font-size:11pt; font-weight:900; margin-bottom:2mm}
  .pr-row{display:grid; grid-template-columns:18mm 1fr; gap:0 5mm; padding:1.4mm 0 1.4mm 8mm; border-bottom:.25pt dotted #999}
  .pr-row .tm{font-size:10pt; text-align:right; font-weight:700}
  .pr-row .tl{font-size:10pt; font-weight:700}
  .pr-row .sb{font-size:8.5pt; color:#444; font-weight:400}
  .pr-grp{break-inside:avoid; margin-bottom:3.5mm}
  .pr-grp h3{font-size:9.5pt; font-weight:700; margin:0 0 1.5mm; color:var(--coral)}
  .pr-list{columns:2; column-gap:8mm; font-size:9.5pt}
  .pr-list div{break-inside:avoid; padding:.6mm 0}
  @page{size:A4; margin:0}
}