/*
Theme Name: TSUNO Corp
Theme URI: https://example.com/tsuno
Author: ChatGPT
Description: Clean, conflict-free stylesheet. Red underlines OFF, gradient labels ON, mission right-mirror matched.
Version: 1.2.0
Text Domain: tsuno-corp
*/

/* ====================== Tokens ====================== */
:root{
  /* brand */
  --brand:#111; --brand-2:#555; --muted:#6b6b6b; --bg:#f7f7f8;
  --radius:16px;

  /* buttons */
  --btn-g-from:#cbd3dc; --btn-g-mid:#4b5563; --btn-g-to:#0b0d10;
  --btn-pad-y:11px; --btn-pad-x:44px;

  /* layout */
  --container:min(1200px, 100% - 40px);

  /* labels */
  --label-grad-from:#111111;
  --label-grad-to:#8b8f96;

  /* common spacings */
  --label-gap:clamp(28px,3.6vw,64px);
  --h2-gap:clamp(32px,5vw,88px);

  /* CTA */
  --btn-hover-black:#000; --btn-active-black:#111;

  /* mission mirror */
  --mission-copy-w:min(980px,92vw);
  --mission-hgap:clamp(4px,.5vw,10px);
}

/* ====================== Base ====================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
  line-height:1.7;color:#0f172a;background:#fff;
}
img{max-width:100%;display:block;height:auto}
a{text-decoration:none;color:inherit}

.container{width:var(--container);margin-inline:auto}
.section{padding:64px 0}
.section-tight{padding:40px 0}
.grid{display:grid;gap:24px}
.full-bleed{inline-size:100vw;margin-inline:calc(50% - 50vw)}

/* ====================== Header ====================== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid #e2e8f0;
  --logo-h:32px; --nav-gap:20px; --nav-font:clamp(13px,1.2vw,15px);
  --nav-pad-y:10px; --cta-pad-y:8px; --cta-pad-x:14px;
}
.header-bar{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:24px;
  inline-size:100vw;margin-inline:calc(50% - 50vw);
  padding-block:6px;padding-inline:clamp(8px,3vw,28px);
}
.logo{display:flex;align-items:center;gap:10px;white-space:nowrap}
.logo .custom-logo,.logo img{height:var(--logo-h)!important;width:auto!important;max-width:240px}

.gnav{
  list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:flex-end;
  gap:var(--nav-gap); font-size:var(--nav-font); font-weight:800; letter-spacing:.06em;
}
.gnav > li > a{display:block;padding-block:var(--nav-pad-y);color:#0f172a}
.gnav > li.current-menu-item > a, .gnav > li > a:hover{color:var(--brand)}
.gnav > li:last-child > a{
  background:#111;color:#fff;padding:var(--cta-pad-y) var(--cta-pad-x);
  border-radius:999px;line-height:1;letter-spacing:.02em;
}
@media (max-width:960px){
  .header-bar{grid-template-columns:1fr;gap:8px}
  .logo{justify-content:space-between}
  .gnav{flex-wrap:wrap;gap:18px;justify-content:flex-start}
  .gnav > li > a{padding:10px 0}
}

/* ====================== Components ====================== */
.badge{display:inline-block;padding:6px 12px;border-radius:999px;font-size:12px;background:#ececec;color:#111;font-weight:700}
.block-title{font-size:13px;letter-spacing:.26em;font-weight:800;margin-bottom:10px}
.h2{font-size:clamp(22px,3.4vw,34px);font-weight:900;margin:0 0 16px}
.lead{font-size:18px;color:#334155}

/* ---- Buttons（一本化） ---- */
.btn, .btn-primary, .btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--btn-pad-y) var(--btn-pad-x);
  min-width:clamp(200px,28vw,360px);
  border-radius:999px; border:1px solid rgba(255,255,255,.16);
  color:#fff; font-weight:800; letter-spacing:.02em; line-height:1;
  background-image:linear-gradient(135deg,var(--btn-g-from) 0%, var(--btn-g-mid) 46%, var(--btn-g-to) 100%);
  background-size:160% 160%; background-position:0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  text-shadow:none; transform:none; transition:background-position .35s ease, filter .15s ease;
}
.btn:hover{ background-position:100% 0; filter:brightness(1.06); }
.btn:active{ filter:brightness(.96); }

/* ====================== Hero（動画OK） ====================== */
.hero{
  position:relative; isolation:isolate;
  background:linear-gradient(180deg,#111213,#e9eaec);
  height:80svh; display:grid; place-items:center; color:#fff; text-align:center;
}
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; pointer-events:none; }
.hero-overlay{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(0,0,0,.25)); }
.hero .copy h1{
  font-weight:900;
  letter-spacing:.02em;
  font-size:clamp(42px, 7.5vw, 84px);
  margin:0 0 10px;
}

.hero .copy p{ font-size:clamp(18px,2.4vw,24px); margin:0 0 18px; color:#e9eef3; }
@media (prefers-reduced-motion:reduce){ .hero-video{ display:none; } }

/* ====================== Sections / Cards ====================== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.card{border-radius:var(--radius);padding:18px;background:linear-gradient(180deg,#181818,#232323);color:#eee}
.card .h4{margin:0 0 8px;font-size:18px;font-weight:800}
.card p{color:#cdcdcd;font-size:14px}
.strip{background:linear-gradient(180deg,#f2f3f5,#f6f7f9 45%,#fbfbfc)}

/* ---- About banners ---- */
.banner{
  position:relative;border-radius:18px;overflow:hidden;height:240px;display:grid;place-items:end;
  background-color:#eef1f3; background-image:var(--banner-img); background-position:center; background-size:cover; background-repeat:no-repeat;
}
.banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 45%, rgba(0,0,0,.28)); }
.banner .label{ position:relative; z-index:1; background:rgba(0,0,0,.6); color:#fff; padding:10px 14px; border-radius:12px; font-weight:800; margin:0 16px 16px 0 }

/* ====================== Footer ====================== */
.site-footer{background:#f7faf9;border-top:1px solid #e5efec;padding:30px 0 80px;color:#475569}
.site-footer small{color:#64748b}
.brand-badge{width:48px;height:48px;border-radius:999px;background:linear-gradient(135deg,#111,#666);display:inline-block}
.credit{display:flex;align-items:center;gap:10px;margin-top:12px}
.footer-cta{
  inline-size:100vw;margin-inline:calc(50% - 50vw);
  text-align:center;padding:clamp(72px,8vw,140px) 16px;
  background:
    linear-gradient(0deg, rgba(255,255,255,.72), rgba(255,255,255,.72)),
    var(--cta-bg, radial-gradient(1200px 600px at 50% 0%, #eef2f3 0%, #f7f9fa 70%));
  background-size:cover;background-position:center;
}
.footer-cta .cta-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* ====================== Front：ABOUT 中央寄せ ====================== */
.home #about{ text-align:center; }
.home #about .container{ display:grid; justify-items:center; }
.home #about .split{
  width:min(1200px,100%); margin:20px auto 0;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px);
}
.home #about .banner{ border-radius:22px; overflow:hidden; }
@media (max-width:960px){ .home #about .split{ grid-template-columns:1fr; } }

/* ====================== SERVICE：カード/CTA 統一 ====================== */
#service .cards{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(16px,3vw,28px);
}
@media (max-width:1024px){ #service .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ #service .cards{ grid-template-columns:1fr; } }

#service .cards .card{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  border-radius:22px; overflow:hidden; padding:clamp(16px, 2.2vw, 24px);
  color:#fff; background:linear-gradient(180deg,#17181a,#232528);
}
.home #service .cards .card{ aspect-ratio:1/1; }

#service .cards .card[style*="background-image"]{ overflow:hidden; }
#service .cards .card[style*="background-image"]::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.60));
}
#service .cards .card > *{ position:relative; z-index:1; }
#service .cards .card .h4{ color:#fff; font-weight:900; font-size:20px; text-shadow:0 1px 8px rgba(0,0,0,.35); }
#service .cards .card p{ color:#fff; font-weight:700; font-size:15px; text-shadow:0 1px 8px rgba(0,0,0,.35); margin:0; }
#service .cards .card .cta{ margin-top:auto; display:flex; justify-content:center; }

#service .cards .card .cta .btn{
  width:clamp(240px,86%,540px);
  padding:10px 34px; min-width:0; max-width:none; line-height:1;
  border-radius:999px; border:1px solid rgba(255,255,255,.16);
  background-image:linear-gradient(135deg,#cbd3dc 0%, #4b5563 46%, #0b0d10 100%);
  background-size:160% 160%; background-position:0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  transform:none; text-shadow:none;
}

/* 全カード：タイトル大きめ＆間隔広め／1枚目だけ更に大 */
#service .cards .card .h4{
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900; letter-spacing:.01em; line-height:1.2;
  margin: 0 0 clamp(12px,1.6vw,20px);
}
#service .cards .card p{
  font-size: clamp(14px,1.25vw,16px);
  line-height:1.85;
}
#service .cards:first-of-type .card:nth-child(1) .h4{
  font-size: clamp(24px, 2.8vw, 32px);
  margin-bottom: 8px;
}
#service .cards:first-of-type .card:nth-child(1) p{
  font-size: clamp(14px, 1.1vw, 16px);
  line-height:1.75;
}

/* ====================== Headings / Labels（統一） ====================== */
/* ラベル：中央・文字グラデ（CONTACT/INQUIRY系も網羅） */
:is(#mission,#service,#cases,#about,
    #contact,[id*="contact" i],[class*="contact" i],
    [id*="inquiry" i],[class*="inquiry" i],
    .footer-cta) .block-title{
  display:inline-block;
  margin:0 auto var(--label-gap);
  font-weight:900; letter-spacing:.30em;
  font-size:clamp(16px, 2.4vw, 22px);
  text-align:center;
  background:linear-gradient(90deg,var(--label-grad-from),var(--label-grad-to));
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
/* 旧: 黒線/赤線アニメを完全停止（復活防止） */
html body :is(#mission,#service,#cases,#about,#contact,[id*="contact" i]) :is(.block-title,.h2)::before,
html body :is(#mission,#service,#cases,#about,#contact,[id*="contact" i]) :is(.block-title,.h2)::after{
  content:none !important; background:none !important; box-shadow:none !important;
}

/* H2 余白 */
#mission .h2{ margin-bottom:var(--h2-gap); }
#service .h2{ margin-bottom:var(--h2-gap); }

/* ====================== CASES infinite loop ====================== */
.loop-cases{ --speed:30s; overflow:hidden; }
.loop-track{ display:flex; width:max-content; gap:12px; animation:cases-marquee var(--speed) linear infinite; }
.loop-group{ display:flex; gap:12px; }
.loop-cases:hover .loop-track{ animation-play-state:paused; }
@keyframes cases-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ====================== Buttons：黒ホバー（共通） ====================== */
:is(.btn, .btn-primary, .btn-secondary,
    #service .cards .card .cta .btn,
    #cases .btn,
    .hero .btn,
    .gnav > li:last-child > a):hover::before,
:is(.btn, .btn-primary, .btn-secondary,
    #service .cards .card .cta .btn,
    #cases .btn,
    .hero .btn,
    .gnav > li:last-child > a):hover::after{
  background:none !important; background-image:none !important; box-shadow:none !important; filter:none !important; mix-blend-mode:normal !important;
}
:is(.btn, .btn-primary, .btn-secondary,
    #service .cards .card .cta .btn,
    #cases .btn,
    .hero .btn,
    .gnav > li:last-child > a):hover{
  background-color:var(--btn-hover-black) !important; background-image:none !important; color:#fff !important; -webkit-text-fill-color:#fff !important;
  box-shadow:none !important; text-shadow:none !important; filter:none !important; transform:none !important;
}
:is(.btn, .btn-primary, .btn-secondary,
    #service .cards .card .cta .btn,
    #cases .btn,
    .hero .btn,
    .gnav > li:last-child > a):active{
  background-color:var(--btn-active-black) !important; background-image:none !important; box-shadow:none !important; filter:none !important;
}

/* 実績をもっと見る／お問い合わせ／資料DL は少し太く */
#cases .btn,
#contact .btn, section#contact .btn, section[id*="contact" i] .btn, section[class*="contact" i] .btn,
a.btn[href*="contact"],
.btn--download, a.btn[download], a.btn[href$=".pdf"], a.btn[href*="download"]{
  padding-top:14px !important; padding-bottom:14px !important; font-weight:900 !important;
}

/* ====================== MISSION：右ミラー（上段の鏡） ====================== */
/* 左側（上段）の行幅＆間隔を統一 */
#mission > .h2, #mission > .lead{
  width:var(--mission-copy-w);
  text-align:left;
}
#mission > .h2{ margin-bottom:var(--mission-hgap); }
#mission > .lead{ margin-top:0; }

/* 右側ミラー：コンテナ内で右寄せ。中身は左揃え＆同行幅 */
#mission .mission-dup{
  width:var(--container);
  margin:clamp(28px,4vw,56px) auto 0;
  display:grid; justify-items:end;
}
#mission .mission-dup .h2,
#mission .mission-dup .lead{
  width:var(--mission-copy-w) !important;
  text-align:left !important;
  margin:0 !important;
}
#mission .mission-dup .h2{ margin-bottom:var(--mission-hgap) !important; }

/* （保険）古い右端フル幅指定を無効化 */
#mission .mission-dup{
  inline-size:auto !important; margin-inline:auto !important; padding-right:0 !important;
}

/* === MISSION：右側ミラーの文頭そろえ & 上段と同じ間隔 === */
#mission .mission-dup{
  /* 右寄せミラーの土台はそのまま */
  width: var(--container);
  margin: clamp(28px,4vw,56px) auto 0;
  display: grid;
  justify-items: end;
}

#mission .mission-dup .h2,
#mission .mission-dup .lead{
  /* 上段と同じ行幅＆左揃えで“文頭”を一致させる */
  width: var(--mission-copy-w) !important;
  text-align: left !important;
  margin: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
}

#mission .mission-dup .h2{
  /* 見出し→p の縦間隔も上段と同じに固定 */
  margin-bottom: var(--mission-hgap) !important;
}

/* 念のため：旧アニメ/装飾が残っていた場合は無効化 */
#mission .mission-dup .h2::before,
#mission .mission-dup .h2::after{
  content:none !important;
}

/* ===== MISSION ラベル中央寄せ ===== */
#mission .block-title{
  display:block !important;
  width:max-content !important;          /* テキスト幅に縮める */
  margin:0 auto var(--label-gap, 36px) !important;  /* 中央 */
  text-align:center !important;
}

/* ===== MISSION：右側ミラーを“上段と鏡”に ===== */
:root{
  /* 上段の行幅と同じにして改行位置を合わせる */
  --mission-copy-w: min(980px, 92vw);
}

/* 右側ミラーの土台は右寄せ */
#mission .mission-dup{
  width: var(--container);
  margin: clamp(28px,4vw,56px) auto 0;
  display: grid;
  justify-items: end;                    /* 右に寄せる */
}

/* 中身は左揃え＋行頭を一致（h2 と p を同じ箱幅に） */
#mission .mission-dup .h2,
#mission .mission-dup .lead{
  width: var(--mission-copy-w) !important;
  text-align: left !important;
  margin: 0 !important;
}

/* 見出し→本文の間隔は上段と完全一致 */
#mission .mission-dup .h2{
  margin-bottom: var(--h2-gap, 56px) !important;
}
#mission .mission-dup .lead{ margin-top: 0 !important; }

/* 念のため：余計な装飾が残っていたら無効化 */
#mission .mission-dup .h2::before,
#mission .mission-dup .h2::after{ /* 下線演出を消したい場合は有効のままでOK。消すなら content:none; に */
  /* 何もしない（上段と同じ下線を出したいならこの行は放置） */
}

/* ===== MISSION 右側ミラー：見出しも p と同じだけ右に寄せる ===== */
:root{ --mission-copy-w: min(980px, 92vw); }

#mission .mission-dup{
  width: var(--container);
  margin: clamp(28px,4vw,56px) auto 0;
  display: grid;
  justify-items: end;                 /* ブロック自体を右寄せ */
}

#mission .mission-dup .h2,
#mission .mission-dup .lead{
  width: var(--mission-copy-w) !important;  /* 上段と同じ行幅 */
  text-align: right !important;             /* テキストも右寄せ（p と同じ端） */
  margin: 0 !important;
}

/* 見出し→本文の縦間隔は上段と同じに */
#mission .mission-dup .h2{ margin-bottom: var(--h2-gap, 56px) !important; }

/* 赤い下線アニメを右起点に（必要な場合） */
#mission .mission-dup .h2::after{
  left: auto !important;
  right: 0 !important;
  transform-origin: 100% 50% !important;   /* 右から伸びる */
}

/* ===== MISSION（右ミラー）— 行頭を段落の「ユ」に揃える ===== */
:root{ --mission-copy-w: min(980px, 92vw); }

#mission .mission-dup{
  width: var(--container);
  margin: clamp(28px,4vw,56px) auto 0;
  display: grid;
  justify-items: end;                 /* ブロック位置は右寄せ */
}

/* 見出し・段落は“左ぞろえ”で同じ幅 → 行頭を揃える */
#mission .mission-dup .h2,
#mission .mission-dup .lead{
  width: var(--mission-copy-w) !important; /* 上段と同じ行幅 */
  text-align: left !important;             /* ←ここを左ぞろえに戻す */
  margin: 0 !important;
}

/* 見出し→段落の縦間隔も上段と同じ */
#mission .mission-dup .h2{
  margin-bottom: var(--h2-gap, 56px) !important;
}

/* 下線アニメが右起点になっていた場合を左起点に戻す（任意） */
#mission .mission-dup .h2::after{
  left: 0 !important;
  right: auto !important;
  transform-origin: 0 50% !important;
}


/* ===== MISSION：交差グリッド（スクショ再現） ===== */
:root{
  --ap-step-color: #2f7fd1;                     /* 大きな 01/02/03 の色 */
  --ap-step-opacity: .12;
  --ap-step-size: clamp(80px, 14vw, 160px);     /* 数字サイズ */
  --ap-row-gap: clamp(72px, 10vw, 140px);       /* 行間 */
  --ap-col-gap: clamp(24px, 4vw, 56px);         /* 画像↔テキスト間 */
  --ap-radius: 18px;
  --ap-img-ratio: 16/10;                         /* 画像比率（16/9, 4/3 等に変更OK） */
}

#mission .approach-list{ display:grid; gap:var(--ap-row-gap); }

/* 2カラム（左画像/右テキストが基本） */
#mission .approach-row{
  position:relative;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  align-items:center;
  gap:var(--ap-col-gap);
}

/* 交差：偶数行だけ左右反転 */
#mission .approach-row.is-flip{
  grid-template-columns: 1fr 1.05fr;
}
#mission .approach-row .approach-media{ order:1; }
#mission .approach-row .approach-text { order:2; }
#mission .approach-row.is-flip .approach-media{ order:2; }
#mission .approach-row.is-flip .approach-text { order:1; }

/* 大きな 01/02/03（行ごとに左右を変える） */
#mission .approach-row::before{
  content: attr(data-step);
  position:absolute; top: -32px; left: 0;
  font-weight:800; font-size:var(--ap-step-size); line-height:1;
  color: rgb(47 127 209 / calc(var(--ap-step-opacity) * 100%));
  pointer-events:none; user-select:none;
}
#mission .approach-row.is-flip::before{ left:auto; right:0; }

/* 画像 */
#mission .approach-media img{
  width:100%; height:auto; display:block;
  aspect-ratio: var(--ap-img-ratio);
  object-fit: cover;
  border-radius: var(--ap-radius);
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
}

/* テキストブロック（幅を握って見出しと本文の頭を揃える） */
#mission .approach-text{
  max-width: 620px;
  text-align:left;
}
#mission .approach-text .kicker{
  font-weight:800; letter-spacing:.06em; display:flex; align-items:center; gap:10px;
  margin:0 0 8px;
}
#mission .approach-text .kicker .en{
  text-transform:uppercase; font-size:clamp(18px, 2.4vw, 26px); color:var(--ap-step-color);
}
#mission .approach-text .kicker .slash{
  opacity:.35; font-weight:900;
}
#mission .approach-text .kicker .ja{
  font-size:14px; color:#64748b; letter-spacing:.02em;
}

#mission .approach-text .subhead{
  margin:0 0 12px; font-weight:900;
  font-size:clamp(18px, 2.2vw, 22px);
  color:#0b1220;
}
#mission .approach-text p{
  margin:0; font-size:15px; line-height:1.95; color:#334155;
}

/* SP：1カラムで縦積み（常に画像→テキストの順） */
@media (max-width: 960px){
  #mission .approach-row,
  #mission .approach-row.is-flip{
    grid-template-columns:1fr;
  }
  #mission .approach-row::before{ top:-18px; }
  #mission .approach-media{ order:1; }
  #mission .approach-text{ order:2; max-width:100%; }
}

/* ===== MISSION：画像を画面端まで（外側フルブリード） ===== */
#mission .approach-row{ overflow:visible; } /* はみ出しを許可 */

/* 左画像・右テキストの行（外側=左端まで） */
#mission .approach-row:not(.is-flip) .approach-media{
  /* 左端へ寄せつつ、右側の位置は保つ */
  margin-left: calc(50% - 50vw);
  width: calc(100% + (50vw - 50%));
}
#mission .approach-row:not(.is-flip) .approach-media img{
  border-top-left-radius: 0;  /* 端に合わせて角丸をゼロに（好みで） */
  border-bottom-left-radius: 0;
}

/* 右画像・左テキストの行（外側=右端まで） */
#mission .approach-row.is-flip .approach-media{
  margin-right: calc(50% - 50vw);
  width:  calc(100% + (50vw - 50%));
}
#mission .approach-row.is-flip .approach-media img{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* ===== MISSION：メディアをワイド化（低く・長く） ===== */
#mission{
  /* 調整しやすいトークン */
  --mission-media-h: clamp(200px, 26vw, 320px); /* 高さを低めに */
  --mission-media-ratio: 21/9;                  /* 横長比率（お好みで 18/9, 20/9 等） */
  --mission-media-col-wide: 62%;                /* 画像側の占有率を広げる */
}

/* 2カラム比率：画像側を広げてテキスト側を少し絞る */
#mission .approach-row{
  display: grid;
  grid-template-columns: var(--mission-media-col-wide) 1fr;
  align-items: center;
  gap: clamp(20px, 2.8vw, 36px);
}
#mission .approach-row.is-flip{
  grid-template-columns: 1fr var(--mission-media-col-wide);
}

/* 高さコントロール：まずは低めの高さに */
#mission .approach-media{
  height: var(--mission-media-h);
  overflow: hidden; /* ワイド化でのトリミング用 */
}

/* 対応ブラウザではアスペクト比でさらに“横長”をキープ */
@supports (aspect-ratio: 1){
  #mission .approach-media{
    aspect-ratio: var(--mission-media-ratio);
    height: auto;        /* aspect-ratio を優先 */
  }
}

/* 画像のフィット */
#mission .approach-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 横を優先して上下を少しトリム */
  object-position: center;
  display: block;
}

/* 既に入れてある“外側フルブリード”はそのまま活きます */


/* ===== MISSION：メディア控えめ＋角丸なし ===== */
#mission{
  /* ちょっと“縦を戻す／横長すぎない”に調整 */
  --mission-media-h: clamp(240px, 24vw, 300px); /* ←前より少し高め */
  --mission-media-ratio: 16/9;                  /* ←21:9→16:9でやりすぎ感を抑える */
  --mission-media-col-wide: 58%;                /* 画像側の占有率も少し控えめ */
}

/* カラム比率の反映（左右交差は既存 .is-flip を利用） */
#mission .approach-row{
  grid-template-columns: var(--mission-media-col-wide) 1fr;
}
#mission .approach-row.is-flip{
  grid-template-columns: 1fr var(--mission-media-col-wide);
}

/* 高さはやや高めに戻す（aspect-ratio未対応ブラウザ用） */
#mission .approach-media{
  height: var(--mission-media-h);
  overflow: hidden;
  border-radius: 0 !important;   /* ←角丸禁止 */
}

/* 横長比率は少しマイルドに（対応環境ではこちらを優先） */
@supports (aspect-ratio: 1){
  #mission .approach-media{
    aspect-ratio: var(--mission-media-ratio);
    height: auto;
  }
}

/* 画像の角丸も完全にオフ */
#mission .approach-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0 !important;
}



/* ===== MISSION：01/02/03 と STRATEGY/DESIGN/PDCA を黒に ===== */

/* 数字（01/02/03）…既存の ::before を想定して色だけ上書き */
#mission .approach-row::before{
  color:#000 !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  background:none !important;
  -webkit-text-fill-color:#000 !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
}

/* 英字見出し（STRATEGY / DESIGN / PDCA） */
#mission .kicker .en{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
  font-size:45px !important;
  mix-blend-mode:normal !important;
}

#mission .kicker .ja{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
  font-size:33px !important;
  mix-blend-mode:normal !important;
}


/* もしスラッシュや日本語も黒にしたい場合は下を有効化 */
/* 
#mission .kicker .slash,
#mission .kicker .ja{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
}
*/

/* 0) 念のため横スク封じ（古いブラウザは hidden を使う） */
html, body { overflow-x: hidden; overflow-x: clip; }

/* 1) MISSION のフルブリード */
#mission .approach-media img{
  width: 100svw;
  max-width: none;
  height: var(--mission-img-h, clamp(460px, 35vw, 640px)); /* ← ) を追加 */
  object-fit: cover;
  display: block;
  border-radius: 0;
}
/* 左ブリード */
#mission .approach-media{
  margin-left: calc(50% - 50svw);
  margin-block: 0; /* figureのデフォ余白対策（保険） */
}
/* 右ブリード */
#mission .approach-row.is-flip .approach-media{
  margin-left: 0;
  margin-right: calc(50% - 50svw);
}

/* 2) svw未対応ブラウザのフォールバック */
@supports not (width: 1svw){
  #mission .approach-media img{
    width: calc(100vw - 1px);
  }
  #mission .approach-media{
    margin-left: calc(50% - 50vw + .5px);
  }
  #mission .approach-row.is-flip .approach-media{
    margin-right: calc(50% - 50vw + .5px);
  }
}

/* === FINAL PATCH: セクションラベル(MISSION / SERVICE / CASES / ABOUT / CONTACT)を大きく === */
:root{
  /* 好きな大きさに調整OK */
    --section-label-size: clamp(24px, 3.4vw, 44px);
  --section-label-gap:  clamp(32px, 5vw, 90px);
}

/* よくあるID/クラス名を“全部”拾って、最後に強制上書き */
html body :is(#mission,#service,#cases,#about,#contact,[id*="contact" i],
               footer,.site-footer,#colophon,.footer-cta) .block-title{
  font-size: var(--section-label-size) !important;
  line-height: 1.1 !important;
  margin-bottom: var(--section-label-gap) !important; /* 余白も任意で */
}

/* ==== MISSION（SP縦並び＋番号は画像上） ========================== */
@media (max-width: 768px){
  /* 1カラム化（flipも含め常に 画像→テキスト） */
  #mission .approach-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
    position: relative; /* 番号オーバーレイ用 */
  }
  #mission .approach-row .approach-media{ order: 1 !important; }
  #mission .approach-row .approach-text { order: 2 !important; }

  /* 画像は画面端まで（全行同じ指定に固定） */
  #mission .approach-row .approach-media{
    margin-left: calc(50% - 50svw) !important;
    margin-right: 0 !important;
  }
  #mission .approach-row .approach-media img{
    width: 100svw;
    max-width: none;
    height: var(--mission-img-h-sp, clamp(280px, 34vw, 420px));
    object-fit: cover;
    display: block;
    border-radius: 0;
  }
  /* svw非対応フォールバック（横スク防止） */
  @supports not (width: 1svw){
    #mission .approach-row .approach-media{
      margin-left: calc(50% - 50vw + .5px) !important;
    }
    #mission .approach-row .approach-media img{
      width: calc(100vw - 1px);
    }
  }

  /* 01/02/03 を画像上にオーバーレイ（黒） */
  #mission .approach-row::before{
    content: attr(data-step);
    position: absolute;
    z-index: 3;
    left: clamp(14px, 5vw, 22px);
    top:  clamp(10px, 4vw, 18px);
    font: 900 clamp(26px, 9.2vw, 48px)/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
    color: #000;
    pointer-events: none;
  }

  /* スマホの文字サイズ（控えめ） */
  #mission .approach-text{ padding: 0 16px; }
  #mission .approach-text .kicker{
    display: inline-flex; gap: 6px;
    font-weight: 800; letter-spacing: .18em;
    font-size: clamp(11px, 3.2vw, 12px);
  }
  #mission .approach-text .subhead{
    font-size: clamp(16px, 4.4vw, 18px);
    line-height: 1.35;
    margin: 6px 0 8px;
    font-weight: 900;
  }
  #mission .approach-text p{
    font-size: clamp(14px, 4.2vw, 15.5px);
    line-height: 1.9;
    margin: 0;
  }
}


/* ==== MISSION：SPタイポ最終オーバーライド（全部に確実に効かせる） ==== */
@media (max-width: 768px){
  /* ベース余白（任意） */
  #mission .approach-list .approach-row .approach-text{
    padding: 0 16px !important;
  }

  /* KICKER（STRATEGY / 戦略 など） */
  #mission .approach-list .approach-row .approach-text .kicker,
  #mission .approach-list .approach-row .approach-text .kicker .en,
  #mission .approach-list .approach-row .approach-text .kicker .ja{
    font-size: clamp(11px, 3.2vw, 12px) !important;
    font-weight: 800 !important;
    letter-spacing: .18em !important;
    line-height: 1.2 !important;
  }
  #mission .approach-list .approach-row .approach-text .kicker{ 
    display: inline-flex !important; 
    gap: 6px !important; 
  }
  #mission .approach-list .approach-row .approach-text .kicker .slash{ 
    opacity: .6 !important; 
  }

  /* サブ見出し（h3.subhead） */
  #mission .approach-list .approach-row .subhead{
    font-size: clamp(16px, 4.4vw, 18px) !important;
    line-height: 1.35 !important;
    margin: 6px 0 8px !important;
    font-weight: 900 !important;
  }

  /* 本文（説明文） */
  #mission .approach-list .approach-row .approach-text p{
    font-size: clamp(14px, 4.2vw, 15.5px) !important;
    line-height: 1.9 !important;
    margin: 0 !important;
  }
}












/* ===== Services Hero：土台（既存とかぶってOK。末尾で勝つ） ===== */
html, body { overflow-x: clip; } /* 横スク封じ（clip対応外はhiddenでもOK） */

.services-hero{
  position:relative; color:#fff; text-align:center;
  padding: clamp(80px, 14vh, 180px) 0 clamp(56px, 8vh, 120px);
  min-height: clamp(560px, 80svh, 900px);
  display:grid; place-items:center;
  isolation:isolate;
}
.services-hero__bg{ position:absolute; inset:0; overflow:hidden; z-index:-2; }
.services-hero__bg .slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity .9s ease;
}
.services-hero__bg .slide.is-active{ opacity:1; }

/* 上に薄いグラデ（文字の可読性キープ） */
.services-hero__bg::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.30) 40%, rgba(0,0,0,.20));
  pointer-events:none;
}

/* ===== ★黒カーテン（左→右に覆い→少し保持→左→右に抜ける） =====
   ※ BGレイヤ（z:-2）の中で z:2 なので、スライドとグラデの上に載るがテキストは覆わない */
.services-hero__curtain{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:#000;
  clip-path: inset(0 100% 0 0); /* 右100% = 幅0（最初は見えてる） */
}
.services-hero__curtain.is-play{
  animation: services-hero-curtain 1.9s cubic-bezier(.2,.65,.2,1) both;
}
@keyframes services-hero-curtain{
  0%   { clip-path: inset(0 100% 0 0); } /* 左端からスタート（幅0） */
  48%  { clip-path: inset(0 0 0 0);   }  /* 全面を黒で覆う */
  56%  { clip-path: inset(0 0 0 0);   }  /* 一瞬キープ（黒くなるのを見せる） */
  100% { clip-path: inset(0 0 0 100%);}  /* 左→右へ抜けていく（リビール） */
}
@media (prefers-reduced-motion: reduce){
  .services-hero__curtain{ display:none; } /* 省エネ時は演出ナシ */
}

/* ヒーロー内テキスト */
.services-hero__inner{ position:relative; z-index:5; display:grid; gap:14px; }
.services-hero .block-title{ font-weight:900; letter-spacing:.30em; }
.services-hero__title{
  margin:0; font-weight:900; line-height:1.25;
  font-size: clamp(28px, 3.4vw, 44px);
  text-wrap: balance;
}
.services-hero__lead{ font-size: clamp(15px, 1.6vw, 18px); color:#e9eef3; margin:.2em 0 0; }
.services-hero__pills{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
.services-hero__pills .pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.16);
  color:#fff; font-weight:800; font-size:14px; backdrop-filter: blur(6px);
}
.services-hero__cta{ margin-top:8px; }

@media (max-width:640px){
  .services-hero{ min-height: 68svh; }
  .services-hero__title{ font-size: clamp(24px, 6.2vw, 30px); }
  .services-hero .block-title{ font-size: clamp(14px, 3.6vw, 18px); }
}


/* === Services Hero：テキストを縦センターに戻す（高さはそのまま） === */
#services-hero{
  min-height: clamp(420px, 58svh, 720px);        /* 高さは前回のまま */
  padding: clamp(28px, 6vh, 56px) 0 !important;  /* 上下パディングは均等に少しだけ */
  display: grid;
  place-items: center !important;                 /* ← 縦横センター */
  align-content: center !important;               /* 念のため */
}

/* 余白を少し詰める（お好みで） */
#services-hero .services-hero__inner{ gap: 12px; }
#services-hero .block-title{ margin-bottom: 6px; }
#services-hero .services-hero__cta{ margin-top: 6px; }

/* === Services Hero：CTAだけ少し下げる === */
#services-hero{
  --cta-push: clamp(24px, 5vh, 64px);  /* ← ここで“どれだけ下げるか”を調整 */
}
#services-hero .services-hero__cta{
  margin-top: var(--cta-push) !important;
}

/* モバイルは下げ幅を少し控えめに */
@media (max-width: 640px){
  #services-hero{ --cta-push: clamp(18px, 6vw, 28px); }
}


/* ===== Mega Menu — Compact Image Tiles (overlay text) ===== */
:root{
  --mega-w:          clamp(280px, 26vw, 380px);   /* 横幅を絞る */
  --mega-pad:        10px;                        /* パネル内余白 少しだけ */
  --mega-gap:        10px;                        /* タイル間の間隔 */
  --mega-tile-h:     clamp(110px, 16vw, 150px);   /* タイルの縦高さ = コンパクト */
  --mega-radius:     12px;                        /* 角丸 */
  --mega-title-size: clamp(16px, 1.5vw, 20px);    /* 文字大きさ（抑えめ） */
  --mega-shadow:     0 18px 40px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.06);
}

/* 親 <li> は基準位置 */
.site-header .gnav > li{ position:relative; }

/* ドロップパネル本体：幅を小さめ・全体的にコンパクト */
.site-header .gnav > li.mega > ul.sub-menu,
.site-header .gnav > li.menu-item-has-children.mega > ul.sub-menu{
  position:absolute; inset-inline-start:0; inset-block-start:100%;
  display:none; visibility:hidden; opacity:0; transform: translateY(6px);
  min-inline-size: var(--mega-w);
  padding: var(--mega-pad);
  border-radius: var(--mega-radius);
  background:#fff;
  box-shadow: var(--mega-shadow);
  z-index: 60;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

/* PC: hover / SP: .is-open で表示 */
.site-header .gnav > li.mega:hover > ul.sub-menu,
.site-header .gnav > li.mega.is-open > ul.sub-menu{
  display:block; visibility:visible; opacity:1; transform: translateY(0);
}

/* タイル型リンク（画像の上に文字を重ねる） */
.site-header .gnav > li.mega > ul.sub-menu > li{ list-style:none; }
.site-header .gnav > li.mega > ul.sub-menu > li + li{ margin-top: var(--mega-gap); }

.site-header .gnav > li.mega > ul.sub-menu > li > a{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height: var(--mega-tile-h);
  border-radius: var(--mega-radius);
  overflow:hidden;
  color:#fff; font-weight:900; font-size: var(--mega-title-size); text-align:center; letter-spacing:.02em;
  background: #111 center/cover no-repeat;        /* 画像は下で割り当て */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  transition: transform .12s ease, filter .12s ease;
}

/* 画像 + うっすら暗いグラデを “背景の多層” で付ける（テキストはそのまま上に） */
.site-header .gnav > li.mega > ul.sub-menu > li.thumb-web > a{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.50)),
    var(--thumb-web);
}
.site-header .gnav > li.mega > ul.sub-menu > li.thumb-mkt > a{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.50)),
    var(--thumb-mkt);
}

/* ホバーは軽くだけ（コンパクト志向） */
.site-header .gnav > li.mega > ul.sub-menu > li > a:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* 親「サービス一覧」はクリック不可の見た目 */
.site-header .gnav > li.mega.nolink > a{ cursor: default; }

/* スマホ：フル幅・高さは少しだけ拡張、でもコンパクト */
@media (max-width: 960px){
  .site-header .gnav > li.mega{ position:static; }
  .site-header .gnav > li.mega > ul.sub-menu{
    position:static; width:100%; min-inline-size:0;
    transform:none; opacity:1; visibility:visible; display:none; /* デフォ閉 */
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
  }
  .site-header .gnav > li.mega.is-open > ul.sub-menu{ display:block; }
  .site-header .gnav > li.mega > ul.sub-menu > li > a{
    height: clamp(100px, 30vw, 140px);
    font-size: clamp(17px, 4.6vw, 19px);
  }
}


/* Megaメニュー画像の差し替え（手軽版） */
.site-header{
  --thumb-web: url('https://tsuno-inc.com/wp-content/uploads/2025/09/Firefly_ほぼ同じイラスト-360707-1.jpg');  /* ←Webサイト制作の画像 */
  --thumb-mkt: url('https://tsuno-inc.com/wp-content/uploads/2025/08/Firefly_ほぼ同じイラストを作って-614427-1.jpg');  /* ←マーケの画像 */
}


/* === Megaメニュー：角丸を弱く（コンパクト） === */
.site-header{
  /* 好みでここを 0〜12px くらいに調整 */
  --mega-radius: 4px;         /* メニュー全体の角 */
  --mega-item-radius: 4px;    /* 各カードの角 */
}

/* 全体ボックス（ドロップダウン） */
.site-header .gnav > li.mega > ul.sub-menu{
  border-radius: var(--mega-radius) !important;
  overflow: hidden; /* 角丸に沿って内側を切る */
}

/* 子項目カード（画像入りの1枚ずつ） */
.site-header .gnav > li.mega > ul.sub-menu > li > a{
  border-radius: var(--mega-item-radius) !important;
}

/* ホバー時のハイライトも角丸に合わせる（任意） */
.site-header .gnav > li.mega > ul.sub-menu > li > a::after{
  border-radius: var(--mega-item-radius) !important;
}





/* ===== Hamburger base ===== */
.site-header{ --hdr-h:64px; }
.nav-toggle{
  display:none; position:relative; z-index:70;
  width:42px; height:42px; border:0; background:transparent; padding:0; cursor:pointer;
}
.nav-toggle .b1,.nav-toggle .b2,.nav-toggle .b3{
  position:absolute; left:10px; right:10px; height:2px; background:#0f172a; border-radius:2px;
  transition:transform .25s ease, opacity .2s ease, top .25s ease, bottom .25s ease;
}
.nav-toggle .b1{ top:13px; }
.nav-toggle .b2{ top:20px; }
.nav-toggle .b3{ bottom:13px; }

/* 開いたら「×」 */
.is-menu-open .nav-toggle .b1{ top:20px; transform:rotate(45deg); }
.is-menu-open .nav-toggle .b2{ opacity:0; }
.is-menu-open .nav-toggle .b3{ bottom:auto; top:20px; transform:rotate(-45deg); }

/* ===== Mobile/Tablet layout ===== */
@media (max-width:1024px){
  .header-bar{ grid-template-columns:auto auto; }
  .nav-toggle{ display:inline-block; margin-left:auto; }

  /* パネル型のナビ */
  .gnav{
    position:fixed; z-index:65;
    top:var(--hdr-h); left:0; right:0;
    background:#fff; border-top:1px solid #e5e7eb;
    display:flex; flex-direction:column; gap:6px;
    padding:14px 16px 22px;
    box-shadow:0 14px 30px rgba(0,0,0,.12);
    opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .is-menu-open .gnav{ opacity:1; transform:translateY(0); pointer-events:auto; }

  .gnav > li > a{ padding:12px 4px; display:block; border-bottom:1px solid #eef2f7; }
  .gnav > li:last-child > a{ border-bottom:0; }           /* 末尾は線なし */
  .gnav > li:last-child > a{                              /* CTAはそのまま丸ボタン */
    display:inline-flex; align-self:flex-start; margin-top:6px;
  }

  /* オーバーレイ */
  .nav-overlay{
    position:fixed; inset:0; z-index:60; background:rgba(15,23,42,.35); backdrop-filter:blur(2px);
  }
  html.nav-lock, body.nav-lock{ overflow:hidden; }        /* 背景スクロール抑止 */

  /* Megaメニュー（画像タイル）の中身は縦積みでOK */
  .site-header .gnav > li.mega > ul.sub-menu{
    position:static; box-shadow:none; padding:8px 0 0; margin:0;
  }
}

/* Desktop の nav は従来どおり */
@media (min-width:1025px){
  .nav-overlay{ display:none !important; }
}


@media (max-width:1024px){
  .is-open .gnav,
  .is-menu-open .gnav{
    opacity:1; transform:translateY(0); pointer-events:auto;
  }
}


/* === NAV stacking fix (SP/Tablet) ====================== */
.site-header{
  z-index: 1000 !important;           /* ヘッダーをオーバーレイより上へ */
}

@media (max-width:1024px){
  .nav-overlay{
    z-index: 900 !important;           /* 本文の上／ヘッダーの下 */
  }
  .site-header .gnav{
    position: fixed;                   /* 既に指定しているなら不要 */
    z-index: 1001 !important;          /* パネルは確実に最前面 */
  }
  .nav-toggle{                          /* ハンバーガーも最前面に */
    z-index: 1002 !important;
  }
}


/* === Mobile Nav：枠を消して背景画像を敷く ===================== */
@media (max-width:1024px){
  /* 1) パネル側の“枠っぽさ”を全OFF（白背景・境界線・影） */
  .site-header .gnav{
    background: transparent !important;   /* 白い面を無くす */
    border: 0 !important;
    box-shadow: none !important;
  }
  .site-header .gnav > li > a{
    color: #fff !important;               /* 画像の上で読めるよう白字 */
    border-bottom-color: rgba(255,255,255,.18) !important; /* 仕切りは淡く（要らなければ 0 に） */
  }

  /* 2) 背景画像は“オーバーレイ”に設定（メニューの後ろに表示） */
  .nav-overlay{
    /* 画像URLをココで差し替え（任意） */
    --nav-overlay-bg: url('https://tsuno-inc.com/wp-content/uploads/2025/09/Firefly_ほぼ同じイラスト-360707-1.jpg');

    background:
      linear-gradient(180deg, rgba(17,24,39,.58), rgba(17,24,39,.58)), /* 文字を読みやすくする薄黒 */
      var(--nav-overlay-bg) center / cover no-repeat !important;
    backdrop-filter: none !important;     /* ぼかしは無し（好みで） */
  }
}



/* === SP/Tablet header/nav tweaks =============================== */
@media (max-width:1024px){
  /* ロゴ｜余白｜ハンバーガー の3列にして右端へ寄せる */
  .header-bar{ grid-template-columns:auto 1fr auto !important; }

  /* ハンバーガー本体を大きく＆右端に */
  .nav-toggle{
    width:56px; height:56px; justify-self:end;
    margin-left:auto; margin-right:clamp(6px,3vw,16px);
  }
  .nav-toggle .b1,.nav-toggle .b2,.nav-toggle .b3{
    left:12px; right:12px; height:3px; border-radius:2px;
  }
  .nav-toggle .b1{ top:16px; } .nav-toggle .b2{ top:26px; } .nav-toggle .b3{ top:36px; bottom:auto; }
  .is-menu-open .nav-toggle .b1{ top:26px; transform:rotate(45deg); }
  .is-menu-open .nav-toggle .b2{ opacity:0; }
  .is-menu-open .nav-toggle .b3{ top:26px; transform:rotate(-45deg); }

  /* パネル型メニューの文字サイズ/行間をUP */
  .gnav{ z-index:90; font-size:clamp(16px,4.6vw,20px) !important; gap:8px; }
  .gnav > li > a{ padding:16px 4px !important; font-weight:900; }
  .gnav > li:last-child > a{                /* CTA行だけ少し太く */
    margin-top:12px; padding:14px 18px !important;
    font-size:clamp(15px,4.4vw,18px) !important;
  }

  /* オーバーレイはメニューの“下”に置いてクリックを邪魔しない */
  .nav-overlay{ z-index:80; }
}


/* === SP/Tablet：ヘッダー右端寄せ＆文字/ボタン拡大 ================== */
@media (max-width:1024px){
  /* ロゴ | 余白 | ハンバーガー の3列。左右パディングを最小にして“端”へ */
  .header-bar{
    grid-template-columns:auto 1fr auto !important;
    padding-inline: clamp(4px, 1.6vw, 10px) !important; /* ← 右端まで寄る */
  }

  /* ハンバーガーをさらに大きく＆完全右寄せ */
  .nav-toggle{
    width:64px; height:64px; justify-self:end;
    margin-right: 0 !important;   /* ← 端にくっつける */
  }
  .nav-toggle .b1,.nav-toggle .b2,.nav-toggle .b3{
    left:12px; right:12px; height:4px; border-radius:3px;
  }
  .nav-toggle .b1{ top:18px; } .nav-toggle .b2{ top:30px; } .nav-toggle .b3{ top:42px; }
  .is-menu-open .nav-toggle .b1{ top:30px; transform:rotate(45deg); }
  .is-menu-open .nav-toggle .b2{ opacity:0; }
  .is-menu-open .nav-toggle .b3{ top:30px; transform:rotate(-45deg); }

  /* パネル内メニュー文字をさらに大きく・行間広め */
  .gnav{
    z-index: 90;                             /* クリック優先 */
    font-size: clamp(18px, 5.2vw, 22px) !important;
    gap: 10px;
  }
  .gnav > li > a{ padding:18px 6px !important; font-weight:900; }
  .gnav > li:last-child > a{
    margin-top:12px; padding:16px 20px !important;
    font-size: clamp(16px, 4.8vw, 19px) !important;
  }

  /* オーバーレイはメニューの下に（クリックを邪魔しない） */
  .nav-overlay{ z-index: 80 !important; }
}



/* === PCグローバルナビ：項目間の余白を広げる ================== */
@media (min-width: 1025px){
  /* gap を変数で一括調整（もともと var(--nav-gap) を使っている前提） */
  .site-header{
    --nav-gap: clamp(24px, 2.4vw, 54px); /* ←好みで数値を調整 */
  }

  /* 文字左右のパディングも少し増やす（任意） */
  .site-header .gnav > li > a{
    padding-inline: clamp(10px, 0.8vw, 16px);
  }

  /* 右端のCTAボタンはさらに少し離す（任意） */
  .site-header .gnav > li:last-child{
    margin-left: clamp(10px, 1.6vw, 24px);
  }
}

/* === PCヘッダー：ロゴを左端へ寄せる ============================== */
@media (min-width:1025px){
  /* 左だけギリまで詰める（右は現状維持） */
  .site-header .header-bar{
    padding-left: 0 !important;
    /* 右側は好みで：少し広めにしたいなら次の行を調整 */
    padding-right: clamp(16px, 2.6vw, 32px) !important;
  }
  /* WPのカスタムロゴに余計なマージンが付いているテーマ対策 */
  .site-header .logo,
  .site-header .logo .custom-logo-link{
    margin-left: 0 !important;
  }
}




html { scroll-behavior: smooth; }

#design-samples { scroll-margin-top: -20px; } /* ヘッダーの高さに合わせて調整 */




/* Mobile: サービス一覧の“直下”だけ開く */
@media (max-width:1024px){
  .site-header .gnav > li.mega{ position: static !important; }
  .site-header .gnav > li.mega > ul.sub-menu{
    position: static !important;
    display: none !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    box-shadow: none !important;
  }
  .site-header .gnav > li.mega.is-open > ul.sub-menu{
    display: block !important;
  }

  /* 兄弟方向は常に無効化（念押し） */
  .site-header .gnav > li.mega.is-open + ul.sub-menu,
  .site-header .gnav > li.mega.is-open + #services-sub-slot,
  .site-header .gnav > #services-sub-slot{
    display: none !important;
  }
}



/* === SPメガメニュー：タップ領域/積層 修正（最優先） === */
@media (max-width:1024px){
  /* メニュー群は必ず最前面に（オーバーレイより上） */
  .nav-overlay{ z-index:900 !important; }
  .site-header .gnav{ z-index:1001 !important; }
  .site-header .gnav > li.mega > ul.sub-menu{ z-index:1002 !important; }

  /* サブメニューの各項目は“でかい”ヒットボックスに */
  .site-header .gnav > li.mega > ul.sub-menu{ padding: 8px 0 !important; }
  .site-header .gnav > li.mega > ul.sub-menu > li{ margin: 0 !important; }

  .site-header .gnav > li.mega > ul.sub-menu > li > a{
    display:block !important;
    position:relative !important;
    width:100% !important;

    /* ヒットボックスを標準44pxより大きく（指で確実に） */
    min-height:56px !important;
    padding:16px 16px !important;

    /* iOS/Androidの“クリック待ち”やハイライト挙動を素直に */
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(255,255,255,.15);
    cursor:pointer !important;

    /* 背景レイヤが乗ってても必ずタップを拾う */
    pointer-events:auto !important;
  }

  /* 背景のグラデ/画像の疑似要素がタップを奪わないよう無効化 */
  .site-header .gnav > li.mega > ul.sub-menu > li > a::before,
  .site-header .gnav > li.mega > ul.sub-menu > li > a::after{
    pointer-events: none !important;
  }
}



/* === tsuno: mega tiles full-tap & no overlay block === */

/* タイルの a を“全面クリック”にする（横幅/高さ/位置を確定） */
.site-header .gnav > li.mega > ul.sub-menu > li > a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height: var(--mega-tile-h, 140px) !important;
  position: relative !important;
  /* iOSでタップ認識を安定させる */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
}

/* ホバー演出の疑似要素がタップを“阻害”しないよう無効化 */
.site-header .gnav a::before,
.site-header .gnav a::after{
  pointer-events: none !important;
}

/* タイル内の子要素（テキストスパン等）がタップを奪わないように */
.site-header .gnav > li.mega > ul.sub-menu > li > a *{
  pointer-events: none !important;
}

/* サブメニューの余白からの誤タップでも親aに届くように（見た目そのまま） */
.site-header .gnav > li.mega > ul.sub-menu{
  /* 余白が広いテーマだとタップが外れるので当たり判定を素直にする */
  padding: var(--mega-pad, 10px) !important;
}