/* 今日どこいく？ 新しいヘッダー（N1 3段整列型）＋ロゴ（L1 大判・字詰め型）
   jstork19_custom/assets/kami-headn.css   2026-09-29

   プレビュー _design/p1.html の _headn.css（N1の分）と _logo10.css（L1の分）を
   本番のテーマへ移したもの。地は白と #F6F7F8 だけ。色は赤をアクセントに、
   下段のアイコンにだけ7色を使う。読む文字そのものは動かさない。
   動くのは棒・線・季節のマークと「？」だけ。

   ★親テーマ（jstork19）の指定に負けないように、要素の見た目は全部ここで言い切る。
   ★メディアクエリはこのファイルのいちばん最後（前に置くと base に負けて横あふれする）。 */

/* ── 土台 ───────────────────────────────── */
.hdn{
 --hn-ink:#101820; --hn-text:#16232D; --hn-muted:#5C7080; --hn-line:#E2E5E8;
 --hn-surface:#F6F7F8; --hn-red:#FF3B30; --hn-redd:#EC0D00;
 --hn-num:"Barlow",system-ui,-apple-system,sans-serif;
 --lg-ink:#101820; --lg-muted:#5C7080; --lg-red:#FF3B30;
 --lg-jp:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
 --lg-en:"Barlow",system-ui,-apple-system,sans-serif;
 position:relative; background:#fff; color:var(--hn-text);
 border-bottom:1px solid var(--hn-line); margin:0; padding:0;
 font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
 z-index:40}
.hdn *{box-sizing:border-box}
/* ★親テーマの余白を消すリセット。div と span は入れない
   （.hdn div の方が .hdn__in より強くなって、中央寄せと左右の余白が消えるため） */
.hdn h1,.hdn h2,.hdn p,.hdn form,.hdn ul,.hdn li{margin:0;padding:0;list-style:none}
.hdn .hdn__in{max-width:1200px;margin:0 auto;padding:0 20px}
.hdn a{text-decoration:none;color:inherit;border:0;box-shadow:none}
.hdn a:hover{text-decoration:none}
.hdn b,.hdn i,.hdn em,.hdn s{font-style:normal;text-decoration:none}
.hdn img{display:block;max-width:100%}
/* flex:0 0 auto を必ず付ける。付けないと、横に入りきらない行（スマホの上段の帯）で
   絵だけが幅0まで縮んで消える（中身の無い要素は min-content が0のため）。2026-09-29に実測して直した */
.hdn .ic{width:21px;height:21px;flex:0 0 auto;display:block;fill:none;stroke:currentColor;
 stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hdn__lgw{flex:0 0 auto;min-width:0;--lgs:36px}

/* ── 情報の部品（季節・日付・天気・指数・件数） ───────── */
.hdn__meta{display:flex;align-items:center;gap:16px;font-size:12px;color:var(--hn-muted);
 white-space:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none}
.hdn__meta::-webkit-scrollbar{display:none}
.hdn__m{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.hdn__m .wx{color:var(--hn-text);font-weight:700}
.hdn__m .ic{width:17px;height:17px;color:var(--hn-muted)}
.hdn__m b{font-family:var(--hn-num);font-weight:600;font-size:15px;color:var(--hn-ink);
 letter-spacing:.01em}
.hdn__m em{font-family:var(--hn-num);font-weight:500;font-size:11px;
 letter-spacing:.1em;color:var(--hn-muted)}
.hdn__m a{color:inherit}
.hdn__m a:hover b{color:var(--hn-redd)}
.hdn__sep{width:1px;height:16px;background:var(--hn-line);flex:0 0 auto}
/* おでかけ指数の棒。0から立ち上がる */
.hdn__gg{display:inline-flex;align-items:flex-end;gap:3px;height:15px}
.hdn__gg i{width:5px;background:#DDE3E8;border-radius:1px;transform:scaleY(0);
 transform-origin:bottom;animation:hn-bar .5s ease-out both}
.hdn__gg i:nth-child(1){height:6px;animation-delay:.15s}
.hdn__gg i:nth-child(2){height:9px;animation-delay:.24s}
.hdn__gg i:nth-child(3){height:12px;animation-delay:.33s}
.hdn__gg i:nth-child(4){height:15px;animation-delay:.42s}
.hdn__gg i:nth-child(5){height:15px;animation-delay:.51s}
.hdn__gg i.on{background:var(--hn-redd)}
/* 季節のマーク */
.hdn__sn{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;
 background:var(--hn-surface);border-radius:999px;font-size:11px;font-weight:700;
 color:var(--hn-muted);flex:0 0 auto}
.hdn__sn .ic{width:15px;height:15px;color:#C99A2E;animation:hn-sway 5s ease-in-out infinite}

/* ── 検索・ボタン ─────────────────────────── */
.hdn__sf{display:flex;align-items:stretch;background:#fff;border:1px solid #C6D2DA;
 border-radius:0;width:min(360px,32vw);flex:0 0 auto;transition:border-color .18s}
.hdn__sf:focus-within{border-color:var(--hn-redd)}
.hdn__sf input{flex:1 1 auto;min-width:0;border:0;border-radius:0;background:none;outline:none;
 box-shadow:none;font:inherit;font-size:14px;line-height:1.4;height:auto;
 padding:8px 12px;margin:0;color:var(--hn-text);-webkit-appearance:none;appearance:none}
.hdn__sf input::placeholder{color:#8A99A5}
.hdn__sf button{flex:0 0 auto;border:0;border-radius:0;background:var(--hn-ink);color:#fff;
 cursor:pointer;font:inherit;font-size:13px;font-weight:700;line-height:1;height:auto;
 padding:0 14px;margin:0;display:inline-flex;align-items:center;gap:6px;
 -webkit-appearance:none;appearance:none;text-shadow:none;box-shadow:none}
.hdn__sf button .ic{width:15px;height:15px;stroke-width:2.4}
.hdn__sf button:hover{background:var(--hn-redd)}
.hdn__g{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--hn-ink);
 border-radius:0;background:#fff;color:var(--hn-ink);font:inherit;font-size:13px;font-weight:700;
 line-height:1;padding:8px 14px;margin:0;cursor:pointer;white-space:nowrap;
 -webkit-appearance:none;appearance:none;box-shadow:none;text-shadow:none;
 transition:background .18s,color .18s}
.hdn__g .ic{width:17px;height:17px}
.hdn__g:hover{background:var(--hn-ink);color:#fff}
.hdn__i{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;padding:0;margin:0;
 border:1px solid var(--hn-line);border-radius:0;background:#fff;color:var(--hn-text);
 cursor:pointer;-webkit-appearance:none;appearance:none;box-shadow:none;
 transition:border-color .18s}
.hdn__i:hover{border-color:var(--hn-ink)}
.hdn__act{display:flex;align-items:center;gap:9px;flex:0 0 auto}

/* ── 下段のアイコンのナビ（アイコン上・文字下） ────────── */
.hdn__nav{display:flex;width:100%}
.hdn__nav a{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:6px;padding:7px 2px;
 font-size:12px;font-weight:700;color:#1B2732;letter-spacing:.01em}
.hdn__nav a .ic{color:var(--c);transition:transform .2s}
.hdn__nav a span{white-space:nowrap}
.hdn__nav a::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:2px;
 background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .22s}
.hdn__nav a:hover::after,.hdn__nav a.is-on::after{transform:scaleX(1)}
.hdn__nav a:hover .ic{transform:translateY(-3px)}
.hdn__nav a:hover,.hdn__nav a.is-on{color:var(--hn-ink)}

/* ── N1 3段整列型 ────────────────────────── */
.hdn1__bar{background:var(--hn-surface);border-bottom:1px solid var(--hn-line)}
.hdn1__bar .hdn__in{height:34px;display:flex;align-items:center;gap:14px}
.hdn1__bar .hdn__meta{flex:1 1 auto;justify-content:space-between}
.hdn1__mid .hdn__in{height:84px;display:flex;align-items:center;gap:18px}
.hdn1__mid .hdn__sf{margin-left:auto;width:min(330px,28vw)}
/* 今日のおすすめ（ロゴと検索の間） */
.hdn1__pk{display:flex;align-items:center;gap:11px;flex:0 1 auto;min-width:0;max-width:330px;
 margin-left:18px;padding:5px 13px 5px 5px;border:1px solid var(--hn-line);background:#fff;
 transition:border-color .18s}
.hdn1__pk:hover{border-color:var(--hn-ink)}
.hdn1__pk img{width:50px;height:50px;object-fit:cover;flex:0 0 auto}
.hdn1__pk__tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.hdn1__pk__tx s{display:flex;align-items:center;gap:6px;
 font-size:10.5px;font-weight:700;color:var(--hn-muted);letter-spacing:.05em;white-space:nowrap}
.hdn1__pk__tx b{font-size:13.5px;font-weight:800;color:var(--hn-ink);line-height:1.3;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdn1__pk__tx em{font-size:11px;color:var(--hn-muted);line-height:1.3;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdn1__nv{border-top:1px solid var(--hn-line)}
.hdn1__nv .hdn__in{height:58px;display:flex;align-items:center;padding:0 12px}

/* ── ロゴ L1 大判・字詰め型 ───────────────────── */
.lgx{display:inline-flex;align-items:center;text-decoration:none;color:var(--lg-ink);
 line-height:1;-webkit-font-smoothing:antialiased;white-space:nowrap}
.lgx b{font-weight:900;display:block}
.lgx s{display:block}
.lg1{flex-direction:column;align-items:flex-start;gap:calc(var(--lgs)*.1)}
.lg1 b{font-family:var(--lg-jp);font-size:var(--lgs);letter-spacing:-.022em}
.lg1 i{color:var(--lg-red);margin-left:-.16em;display:inline-block;
 transform-origin:50% 88%;animation:lg-sway 2.6s ease-in-out infinite}
.lg1 s{align-self:stretch;position:relative;padding-top:calc(var(--lgs)*.15);
 font-family:var(--lg-en);font-size:calc(var(--lgs)*.2);font-weight:600;
 letter-spacing:.3em;color:var(--lg-muted)}
.lg1 s::before{content:"";position:absolute;left:0;top:0;width:100%;
 height:max(2px,calc(var(--lgs)*.05));
 background:var(--lg-ink);transform:scaleX(0);transform-origin:left;
 animation:lg-wipe .7s .25s ease-out both}
/* 字詰め。Googleフォントのサブセットは palt が効かないので1字ずつ詰める */
.lgx b span:nth-child(2){margin-left:-.012em}
.lgx b span:nth-child(3){margin-left:-.018em}
.lgx b span:nth-child(4){margin-left:-.032em}
.lgx b span:nth-child(5){margin-left:-.03em}
.lgx b span:nth-child(6){margin-left:-.038em}
/* トップはロゴを h1 で包む。display:contents なので並びも余白も変わらない */
.hdn__lgh1{display:contents;font-size:inherit;margin:0;padding:0;line-height:inherit}

/* ── 動き ───────────────────────────────── */
@keyframes hn-bar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes hn-sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes lg-sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes lg-wipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── スマホ（メディアクエリは必ずいちばん最後） ────────── */
@media(max-width:860px){
 .hdn .hdn__in{padding:0 14px}
 .hdn__lgw{--lgs:26px}
 .hdn__i{width:34px;height:34px}
 .hdn__act{gap:7px}
 .hdn__sf{display:none}
 .hdn__nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 .hdn__nav::-webkit-scrollbar{display:none}
 .hdn__nav a{flex:0 0 auto;width:74px}
 .hdn__meta{gap:11px;font-size:11px}
 .hdn__m b{font-size:13px}
 .hdn__g span{display:none}
 .hdn__g{padding:9px 11px}
 .hdn1__mid .hdn__in{height:66px;gap:12px}
 .hdn1__pk{display:none}
 .hdn1__mid .hdn__act{margin-left:auto}
 .hdn1__nv .hdn__in{padding:0;height:62px}
}
@media(prefers-reduced-motion:reduce){
 .hdn *,.hdn *::before,.hdn *::after{animation:none!important;transition:none!important}
 .hdn__gg i{transform:none}
 .lg1 s::before{transform:scaleX(1)}
}