/* 新デザインのヘッダー／ドロワー
   トップページ_デザイン案.html から切り出したもの。
   デザイン案は確認用バー（sticky 38px）の下にヘッダーが付く前提なので、
   実サイトでは追従位置を 0 に戻す。

   クラス名の drawer は sfdrawer に変えてある。テーマの common.js が
   `$('.drawer').drawer()` を実行しており、body にも drawer クラスが付くため、
   同名にするとjQueryのドロワープラグインが二重初期化されて body ごと閉じてしまう。 */

:root{
  --ink:#1e1e1e; --sub:#6f6f66; --cream:#fdf8ec; --paper:#fff;
  --blue:#0878b2; --sky:#5cb3e4; --sky-soft:#e2f2fb;
  --coral:#ff6b5e; --yellow:#ffe600; --navy:#1f2d44;
  color-scheme:light;
  /* 追従ヘッダーの実測高さ。読み込み時とリサイズ時にJSが上書きする */
  --stick:110px;
}
 font-family:"Noto Sans JP",system-ui,sans-serif;font-size:15px;line-height:1.85;-webkit-font-smoothing:antialiased}
a{color:inherit}
.eyebrow{font-family:Inter,sans-serif;font-size:13px;font-weight:800;letter-spacing:.2em;color:var(--blue);text-transform:uppercase;margin:0}

/* 旧テーマの指定と衝突させないため、box-sizing は新ヘッダーの中だけに効かせる */
.site-head *,.sfdrawer *,.head-search-panel *{box-sizing:border-box}

/* ヘッダーは明るい地。黒のままだとヒーロー（#202020）と同色で境目が消えるうえ、
   ページ全体が重くなる。ロゴは元サイトの透過・縁なし版なので明るい背景が前提 */
.site-head{background:#fff;position:sticky;top:0;z-index:100;border-bottom:3px solid var(--ink)}
/* 上段：SNSと検索 */
.head-top{background:var(--cream);border-bottom:1px solid rgba(0,0,0,.12)}
.head-top .in{max-width:1640px;margin:0 auto;display:flex;align-items:center}
.head-top .tag{font-family:Inter,sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.16em;color:var(--blue)}
.sns{display:flex;gap:7px;margin-left:auto}
.sns a{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;
 background:rgba(0,0,0,.07);color:var(--ink);text-decoration:none;transition:background .15s}
.sns a:hover{background:var(--sky);color:#fff}
.sns svg{width:15px;height:15px;fill:currentColor;display:block}
.hsearch{display:flex;align-items:center;background:#fff;border:2px solid var(--ink);border-radius:99px;overflow:hidden}
.hsearch input{border:0;outline:0;font:inherit;background:transparent;color:var(--ink)}
.hsearch input::placeholder{color:#9a9a92}
.hsearch button{border:0;background:var(--yellow);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.hsearch button svg{fill:currentColor;display:block}
@media(max-width:759px){ .head-top .tag{display:none} }

/* ── ヘッダー検索窓（拡大版）───────────────────────────────
   上段の主役を検索にする。左端へ移し、余白ぶん伸縮させる（高さ42px・最大460px）
   フォーカスリングも追加。元は outline:0 だけでキーボード操作時に位置が分からなかった */
.hsearch{min-width:0;order:-1;height:42px;flex:1 1 300px;max-width:460px;transition:box-shadow .15s}
.hsearch:focus-within{box-shadow:0 0 0 3px rgba(92,179,228,.6)}
/* input は既定で約20文字ぶんの幅を主張し、それ以下に縮まない。min-width:0 を入れないと
   狭い画面で黄色い検索ボタンが枠外へ押し出されて見切れる */
.hsearch input{width:auto;flex:1 1 auto;min-width:0;font-size:15px;padding:0 17px}
.hsearch button{flex:none;height:42px;padding:0 19px}
.hsearch button svg{width:18px;height:18px}
.head-top .in{padding:9px 20px;gap:12px}

/* ── 検索：760px以上は下段のアイコン＋展開パネル ────────────────────
   上段に大きな検索窓を出し続けると帯が重くなるため、追従ヘッダーの下段に逃がす。
   スマホは下段に余地がないので、上段の検索窓をそのまま使う */
@media(min-width:760px){ .head-top .hsearch{display:none} }
.head-search-btn{display:none;flex:none;width:42px;height:42px;border-radius:50%;padding:0;
 border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;place-items:center;transition:background .15s}
@media(min-width:760px){ .head-search-btn{display:grid} }
.head-search-btn svg{width:19px;height:19px;fill:currentColor;display:block}
.head-search-btn:hover,.head-search-btn[aria-expanded="true"]{background:var(--yellow)}
.hsearch-panel{position:absolute;left:0;right:0;top:100%;z-index:120;background:#fff;
 border-bottom:3px solid var(--ink);box-shadow:0 18px 34px rgba(0,0,0,.16)}
.hsearch-panel[hidden]{display:none}
.hsearch-panel .in{max-width:1640px;margin:0 auto;padding:20px}
.hsearch-panel .hsearch{height:54px;width:100%;max-width:none;flex:none;order:0}
.hsearch-panel .mg{display:flex;align-items:center;flex:none;margin-left:18px;color:#8f8f88}
.hsearch-panel .mg svg{width:20px;height:20px;fill:currentColor;display:block}
.hsearch-panel .hsearch input{font-size:17px;padding:0 14px}
.hsearch-panel .hsearch button{height:50px;padding:0 26px}
.hsearch-panel .hsearch button svg{width:20px;height:20px}
.hsearch-panel .kw{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0}
.hsearch-panel .kw b{font-family:Inter,sans-serif;font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--blue);margin-right:4px}
.hsearch-panel .kw a{text-decoration:none;color:var(--ink);font-size:13px;font-weight:800;
 border:2px solid var(--ink);border-radius:99px;padding:5px 13px}
.hsearch-panel .kw a:hover{background:var(--yellow)}

@media(max-width:759px){
  /* 余った幅いっぱいまで伸ばす（元は104px固定で狭すぎた） */
  .head-top .in{gap:10px}
  .hsearch{height:38px;flex:1 1 auto}
  .hsearch input{padding:0 13px;font-size:14px}
  .hsearch button{height:38px;padding:0 15px}
  /* スマホは上段の幅をSNS5個が食う。アイコンを29→26pxに詰めて検索窓へ回す */
  .sns{gap:5px} .sns a{width:26px;height:26px}
}

/* 下段：ロゴとナビ（黒地・ヒーローへ continuous） */
.head-main{max-width:1640px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:22px}
/* 元サイトのロゴは 910x102 の横長。58pxだと517px幅になりナビを押し出すため40px（357px幅） */
.head-main img{display:block;height:40px;width:auto}
/* ロゴを大きく見せるため、DTM MEDIA SITE は横並びをやめてロゴ下の2段目に置く */
.brand{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;flex-shrink:0}
/* ロゴ画像に「MEDIA SITE」が含まれているため、別途のラベルは重複になる。
   ロゴを縁ありの旧版へ戻す場合はここを display:block に戻す */
.brand-label{display:none;font-family:Inter,sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.22em;
 color:var(--sub);white-space:nowrap;padding-left:2px}
@media(max-width:759px){
  /* 横長ロゴなので高さで幅が決まる。24px＝214px幅まで落とさないとCTAが画面外に切れる */
  .head-main{padding:10px 12px;gap:8px} .head-main img{height:24px}
  .burger{width:36px;padding:0 6px}
  .head-cta{padding:7px 11px;font-size:11.5px;border-width:2px}
}
.head-cta{margin-left:auto;background:var(--coral);color:#fff;border:3px solid var(--ink);border-radius:99px;
 padding:9px 20px;font-size:13.5px;font-weight:900;text-decoration:none;white-space:nowrap}
.head-cta:hover{background:var(--yellow);color:var(--ink)}
@media(min-width:1380px){.head-cta{margin-left:0}}
.head-cta .cta-sm{display:none}
@media(max-width:759px){
  /* ロゴを大きくしたぶん下段の幅が足りない。スマホだけラベルを短くする */
  .head-cta{padding:8px 13px;font-size:12px}
  .head-cta .cta-lg{display:none} .head-cta .cta-sm{display:inline}
}
@media(max-width:359px){
  /* 320px級ではCTAを置く余地がない。ドロワーの中に同じ導線があるので下段からは外す */
  .head-main img{height:22px} .head-cta{display:none}
}

/* 依頼系リンク（上段・控えめ） */
.biz{display:none;font-size:12px;font-weight:800;color:var(--sub);text-decoration:none;
 border:1px solid rgba(0,0,0,.22);border-radius:99px;padding:4px 12px;white-space:nowrap;margin-left:auto}
.biz:hover{background:var(--yellow);color:var(--ink);border-color:var(--ink)}
.biz + .biz{margin-left:8px}
@media(min-width:900px){ .biz{display:inline-block} .sns{margin-left:16px} }

/* グローバルナビ（メガメニュー） */
.gnav{display:none;gap:2px;margin-left:auto;font-size:15px;font-weight:900}
/* 横長ロゴ（357px幅）に合わせ、ナビを出す幅は1320px。それ未満はハンバーガー */
@media(min-width:1380px){.gnav{display:flex}}
.gnav button{font:inherit;font-size:15px;font-weight:900;color:var(--ink);background:transparent;border:0;cursor:pointer;
 padding:8px 13px;border-radius:8px;display:flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0}
/* ロゴ357px＋検索アイコンぶん、ナビは全幅で13.5pxに詰める */
@media(min-width:1380px){
  .head-main{gap:14px}
  .gnav{font-size:13.5px}
  .gnav button{font-size:13.5px;padding:8px 9px;gap:4px}
  .head-cta{padding:9px 15px;font-size:12.5px}
}
.gnav button svg{width:10px;height:10px;fill:currentColor;opacity:.6;transition:transform .18s}
.gnav button:hover{color:var(--blue)}
.gnav button[aria-expanded="true"]{background:var(--yellow);color:var(--ink)}
.gnav button[aria-expanded="true"] svg{transform:rotate(180deg);opacity:1}
.gnav > a{text-decoration:none;color:var(--ink);padding:8px 13px;border-radius:8px}
.gnav > a:hover{color:var(--blue)}

.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:3px solid var(--ink);
 box-shadow:0 22px 40px rgba(0,0,0,.18);z-index:120}
.mega[hidden]{display:none}
.mega-in{max-width:1640px;margin:0 auto;padding:26px 20px 22px;display:grid;gap:24px 34px;
 grid-template-columns:repeat(auto-fill,232px);justify-content:start;align-items:start}
.mega-pick{grid-column:-2/-1;justify-self:end;width:290px;background:var(--cream);border-radius:14px;padding:16px;
 border:2px solid var(--ink)}
.mega-pick .mega-h{border-bottom:0;padding:0;margin-bottom:9px}
.mega-pick a{display:block;text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:800;line-height:1.6;
 padding:8px 0;border-top:1px solid rgba(0,0,0,.12)}
.mega-pick a:first-of-type{border-top:0}
.mega-pick a:hover{color:var(--blue)}
.mega-pick a i{display:block;font-style:normal;font-family:Inter,sans-serif;font-size:10px;font-weight:800;
 letter-spacing:.1em;color:var(--blue);margin-bottom:1px}
.mega-h{font-family:Inter,sans-serif;font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--blue);
 margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid rgba(0,0,0,.14)}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.mega li a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;text-decoration:none;
 color:var(--ink);font-size:14px;font-weight:700;padding:5px 8px;border-radius:6px;line-height:1.5}
.mega li a b{font-family:Inter,sans-serif;font-size:11px;font-weight:800;color:var(--sub);flex:none}
.mega li a:hover{background:var(--yellow);color:#202020}
.mega li a:hover b{color:#202020}
.mega-foot{grid-column:1/-1;border-top:1px solid rgba(0,0,0,.14);padding-top:13px;margin-top:2px}
.mega-foot a{color:var(--blue);font-size:13px;font-weight:900;text-decoration:none}
.mega-foot a:hover{text-decoration:underline}

/* ハンバーガー（1380px 未満） */
.burger{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:5px;width:42px;height:42px;flex:none;
 margin-left:auto;background:transparent;border:0;cursor:pointer;padding:0 9px}
.burger i{display:block;width:100%;height:2.5px;background:var(--ink);border-radius:2px;transition:.2s}
@media(min-width:1380px){.burger{display:none}}

/* ドロワー（モバイル） */
.sfdrawer{position:fixed;inset:0;background:#fff;z-index:300;overflow-y:auto;-webkit-overflow-scrolling:touch;
 padding:0 0 40px;display:none}
.sfdrawer.open{display:block}
.sfdrawer-top{position:sticky;top:0;background:var(--cream);display:flex;align-items:center;gap:12px;padding:12px 16px;
 border-bottom:2px solid var(--ink)}
.sfdrawer-top img{height:32px;width:auto}
.sfdrawer-top button{margin-left:auto;width:40px;height:40px;background:transparent;border:0;color:var(--ink);
 font-size:26px;line-height:1;cursor:pointer}
.sfdrawer details{border-bottom:1px solid rgba(0,0,0,.11)}
.sfdrawer summary{list-style:none;cursor:pointer;padding:15px 18px;font-size:16px;font-weight:900;color:var(--ink);
 display:flex;align-items:center;justify-content:space-between}
.sfdrawer summary::-webkit-details-marker{display:none}
.sfdrawer summary::after{content:"＋";font-size:17px;color:var(--blue);font-weight:700}
.sfdrawer details[open] summary{color:var(--blue)}
.sfdrawer details[open] summary::after{content:"−";color:var(--blue)}
.sfdrawer .grp{padding:0 18px 14px}
.sfdrawer .grp p{font-family:Inter,sans-serif;font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--blue);margin:8px 0 5px}
.sfdrawer .grp a{display:flex;justify-content:space-between;gap:10px;text-decoration:none;color:var(--ink);
 font-size:14.5px;font-weight:700;padding:8px 10px;border-radius:7px;background:rgba(0,0,0,.05);margin-bottom:5px}
.sfdrawer .grp a b{font-family:Inter,sans-serif;font-size:11px;font-weight:800;color:var(--sub)}
.sfdrawer > .flat{display:block;padding:15px 18px;font-size:16px;font-weight:900;color:var(--ink);text-decoration:none;
 border-bottom:1px solid rgba(0,0,0,.11)}
.sfdrawer-cta{margin:18px;display:grid;gap:9px}
.sfdrawer-cta a{display:block;text-align:center;padding:13px;border-radius:11px;text-decoration:none;font-weight:900;font-size:14.5px}
.sfdrawer-cta .p{background:var(--coral);color:#fff}
.sfdrawer-cta .s{background:transparent;border:2px solid var(--ink);color:var(--ink);font-size:13px}