/* SDC田中 リブランディング案 共通CSS
   方向性: 誠実・信頼感・力強い
   ルール: 影・グラデーション・装飾罫線・カードの多用なし。アクセントはSDCブルー1色。
           区切りは余白と面の色（白／スチール／ネイビー）で行う */
:root{
  --blue:#0a4fa6;      /* SDCブルー（唯一のアクセント） */
  --blue-d:#083c80;    /* ホバー用 */
  --orange:#e8660c;    /* 押せる番号（ホットスポット）だけに使う差し色 */
  --navy:#0b1a30;      /* アイアンネイビー（濃い面・本文見出し） */
  --navy-2:#16304f;
  --steel:#e8edf4;     /* スチール（面の背景） */
  --steel-l:#f3f6fa;
  --pale:#dde8f7;      /* 淡い青（ラベルの地） */
  --ink:#0e1b2c;
  --mute:#46546a;
  --line:#cfd8e4;      /* 機能上の区切り線のみ */
  --white:#fff;
  --f-en:"Oswald","Noto Sans JP",sans-serif;
  --f-serif:"Noto Serif JP","Yu Mincho",serif;
  --f-sans:"Noto Sans JP","Yu Gothic",sans-serif;
  --wrap:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-sans);font-weight:500;font-size:16px;line-height:1.95;letter-spacing:.05em;color:var(--ink);background:var(--white);word-break:auto-phrase;line-break:strict;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 40px}
.nb{display:inline-block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- logo ---------- */
.logo{display:flex;align-items:center;gap:12px;flex:none}
.logo svg{width:44px;height:44px;flex:none}
.logo .w{display:flex;align-items:baseline;gap:8px;font-family:var(--f-en);font-weight:700;font-size:30px;letter-spacing:.08em;line-height:1;color:var(--navy)}
.logo .w small{font-weight:500;font-size:15px;letter-spacing:.28em;color:var(--blue)}
.logo .s{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--mute);margin-top:6px;line-height:1}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:60;background:var(--white)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:86px;max-width:1440px}
.gnav{display:flex;align-items:center;gap:28px}
.gnav>a{white-space:nowrap}
.gnav>a:not(.btn){font-weight:700;font-size:15px;letter-spacing:.06em}
.gnav>a:not(.btn):hover,.gnav>a[aria-current="page"]:not(.btn){color:var(--blue)}
.gnav .lang{font-family:var(--f-en);font-weight:600;font-size:14px;letter-spacing:.12em;color:var(--blue)}
.menu-btn{display:none;align-items:center;gap:10px;font-family:var(--f-en);font-weight:600;font-size:14px;letter-spacing:.16em;background:var(--blue);color:var(--white);border:0;padding:12px 20px;border-radius:999px;cursor:pointer}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:14px 16px 14px 32px;font-weight:700;font-size:16px;letter-spacing:.08em;line-height:1.3;border-radius:999px;background:var(--navy);color:var(--white);transition:background .2s,color .2s}
.btn::after{content:"\2192";display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--blue);color:var(--white);font-size:14px;flex:none;transition:background .2s,color .2s}
.btn:hover{background:var(--blue)}
.btn:hover::after{background:var(--white);color:var(--blue)}
.btn.w{background:var(--white);color:var(--navy)}
.btn.w:hover{background:var(--pale)}
.btn.w:hover::after{background:var(--blue);color:var(--white)}
.btn.o{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.btn.o:hover{background:var(--navy);color:var(--white);box-shadow:none}
.btn.s{padding:10px 12px 10px 22px;font-size:14px;gap:12px}
.btn.s::after{width:26px;height:26px;font-size:12px}
.gnav .btn{padding:11px 22px}
.gnav .btn::after{display:none}
.arr{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--blue);color:var(--white);font-size:15px;font-weight:700;flex:none;transition:background .2s,transform .2s}
.arr.o{background:transparent;box-shadow:inset 0 0 0 2px var(--blue);color:var(--blue)}
a:hover .arr{background:var(--navy)}
a:hover .arr.o{background:var(--blue);color:var(--white);box-shadow:none}
.more{display:inline-flex;align-items:center;gap:16px;font-weight:700;color:var(--blue);letter-spacing:.08em}

/* ---------- section heading ---------- */
.sec{padding:140px 0}
.sec.st{background:var(--steel)}
.sec.nv{background:var(--navy);color:var(--white)}
.sec.bl{background:var(--blue);color:var(--white)}
.eh{display:block;font-family:var(--f-en);font-weight:700;font-size:clamp(46px,6.4vw,92px);line-height:1;letter-spacing:.02em;color:var(--blue);text-transform:uppercase}
.nv .eh,.bl .eh{color:var(--white)}
.jh{display:block;font-weight:700;font-size:15px;letter-spacing:.16em;color:var(--navy);margin-top:16px}
.nv .jh,.bl .jh{color:var(--white)}
.h2{font-family:var(--f-serif);font-weight:900;font-size:clamp(28px,3.4vw,46px);line-height:1.5;letter-spacing:.06em;color:var(--navy)}
.nv .h2,.bl .h2{color:var(--white)}
.lead-p{font-size:17px;line-height:2.1;max-width:660px}
.note{font-size:13px;color:var(--mute);margin-top:28px;line-height:1.8}
.nv .note,.bl .note{color:#c9d6e8}
.pill{display:inline-block;padding:3px 12px;border-radius:4px;background:var(--blue);color:var(--white);font-weight:700;font-size:13px;letter-spacing:.1em;line-height:1.8}
/* label above a heading: English tag, short Japanese right below it */
.lbl{display:block}
.lbl__en{display:inline-flex;align-items:center;min-height:38px;padding:1px 18px 0;border-radius:4px;background:var(--blue);color:var(--white);font-family:var(--f-en);font-weight:600;font-size:clamp(14px,1.15vw,17px);line-height:1;letter-spacing:.14em;text-transform:uppercase}
.lbl__jp{display:block;margin-top:12px;font-weight:700;font-size:14px;line-height:1.6;letter-spacing:.14em;color:var(--navy)}
.tag{display:inline-block;padding:2px 10px;border-radius:4px;background:var(--pale);color:var(--blue);font-weight:700;font-size:12px;letter-spacing:.06em;line-height:1.9}
.tmp{display:inline-block;background:var(--navy);color:var(--white);font-size:12px;font-weight:700;padding:0 8px;border-radius:4px;letter-spacing:.06em;line-height:1.8;vertical-align:2px;margin-left:6px}

/* ---------- footer ---------- */
.ft{background:var(--navy);color:#d9e2ee;padding:100px 0 40px}
.ft .top{display:grid;grid-template-columns:5fr 7fr;gap:80px}
.ft .logo .w{color:var(--white)}
.ft .logo .w small{color:#9fc0ee}
.ft .logo .s{color:#a9b8cc}
.ft .bases{margin-top:34px;display:grid;gap:18px;font-size:14px;line-height:1.85;color:#c7d3e3}
.ft .bases b{display:block;color:var(--white);font-size:14px;letter-spacing:.1em}
.ft .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.ft h4{font-family:var(--f-en);font-weight:600;font-size:14px;letter-spacing:.22em;color:#9fc0ee;margin-bottom:16px}
.ft .cols a{display:block;font-size:14px;padding:5px 0;color:#e6ecf4}
.ft .cols a:hover{color:#9fc0ee}
.ft .btm{margin-top:80px;display:flex;justify-content:space-between;gap:20px;font-size:13px;color:#93a3b8}
details.credit{margin-top:22px;font-size:12px;color:#93a3b8;line-height:1.8}
details.credit summary{cursor:pointer}
details.credit p{margin-top:8px}
/* 文章の詰め（main.js fillText が付けるクラス。DESIGN_RULES 1-4-2）：説明文は右端まで流して両端そろえ */
.txt-flow{word-break:normal!important;line-break:strict}
.txt-flow .phr-k:not(.txt-flow){word-break:auto-phrase!important}
.txt-j{text-align:justify!important;text-justify:inter-character}
.txt-j--c{text-align-last:center}
.tl.is-nw{white-space:nowrap}
.txt-nobr br:not(.br-keep){display:none}

/* ---------- responsive ---------- */
@media (max-width:1440px){
  .gnav{gap:22px}
  .gnav>a:not(.btn){font-size:14px}
  .gnav .btn.s{padding:11px 20px}
}
@media (max-width:1240px){
  .gnav{gap:16px}
  .gnav .lang{display:none}
}
@media (max-width:1100px){
  .wrap{padding:0 28px}
  .gnav{display:none;position:absolute;left:0;right:0;top:86px;background:var(--white);flex-direction:column;align-items:flex-start;padding:20px 28px 34px;gap:16px}
  .gnav.open{display:flex}
  .menu-btn{display:inline-flex}
  .ft .top{grid-template-columns:1fr;gap:56px}
}
@media (max-width:640px){
  body{font-size:15px}
  .wrap{padding:0 24px}
  .sec{padding:88px 0}
  .hd .wrap{height:70px}
  .gnav{top:70px;padding:16px 16px 28px}
  .logo svg{width:36px;height:36px}
  .logo .w{font-size:24px}
  .logo .w small{font-size:12px}
  .logo .s{font-size:10px;letter-spacing:.1em}
  .lead-p{font-size:15px}
  .ft .cols{grid-template-columns:1fr 1fr}
  .ft .btm{flex-direction:column}
}

/* ---------- スマホでも、お問い合わせ（主要CTA）を常に出す ---------- */
.hd-cta{display:none;align-items:center;font-weight:700;font-size:13px;letter-spacing:.06em;background:var(--navy);color:var(--white);padding:10px 16px;border-radius:999px;white-space:nowrap}
.sp-cta{display:none}
@media (max-width:1100px){
  .hd .wrap{gap:10px}
  .hd .logo{margin-right:auto}
  .hd-cta{display:inline-flex}
}
@media (max-width:640px){
  .hd-cta{font-size:12px;padding:9px 13px}
  .menu-btn{padding:10px 14px;font-size:12px}
  .logo .s{display:none}
  .sp-cta{display:grid;grid-template-columns:1fr 1fr 1.3fr;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--white)}
  .sp-cta a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:9px 4px 11px;font-weight:700;font-size:12px;color:var(--navy);line-height:1.3}
  .sp-cta a+a{box-shadow:inset 1px 0 0 var(--line)}
  .sp-cta b{font-family:var(--f-en);font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--blue)}
  .sp-cta a.main{background:var(--blue);color:var(--white);box-shadow:none}
  .sp-cta a.main b{color:#cfe0f7}
  body{padding-bottom:62px}
}