/* Tsumugi 共通スタイル（全7ページで完全一致していたルールのみを集約）
   ヘッダー/ナビ/モバイルメニュー/フッター/ボタン/セクション見出し/基本タイポグラフィ */
:root{
  --teal:#58A7BD;
  --teal-deep:#3E8DA3;
  --yellow:#EBB53C;
  --yellow-deep:#D9A32B;
  --ink:#22333B;
  --gray:#6b7a82;
  --paper:#ffffff;
  --pale:#F4F8F9;
  --line:#e3eaec;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{position:static!important;top:auto!important}
html,body{max-width:100%;overflow-x:clip}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:2;font-size:clamp(15px,0.9375vw,21px);letter-spacing:.07em}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:clamp(1320px,78vw,1900px);margin:0 auto;padding:0 32px}
@media(max-width:480px){.wrap{padding:0 20px}}
.en{text-transform:uppercase}
.sec-label{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:900;letter-spacing:.28em;margin-bottom:2px;line-height:1.4;color:var(--teal-deep)}
.sec-label::before{content:"";width:14px;height:14px;background:var(--yellow);border-radius:50%}
.sec-title{font-size:clamp(36px,2.25vw,43px);font-weight:900;line-height:1.35;margin-bottom:29px}
@media(max-width:640px){.sec-title{font-size:32px}}
@media(max-width:480px){.sec-title{font-size:27px}}
/* PC想定で入れている強制改行(br.pc)は、タブレット/スマホ幅では自然な折り返しに任せて改行過多を防ぐ */
@media(max-width:900px){br.pc{display:none}}
.sec-title .mk{color:var(--teal-deep)}
.btn{display:inline-block;padding:clamp(16px,1vw,19px) clamp(44px,2.75vw,53px);font-weight:700;font-size:clamp(14px,0.875vw,17px);letter-spacing:.1em;transition:all .25s;border-radius:8px;cursor:pointer;border:none}
@media(max-width:640px){.btn{padding:11px clamp(44px,2.75vw,53px)}}
.btn:hover{transform:translateY(-2px)}
.btn-yellow:hover{background:var(--yellow-deep)}
header{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;transition:background .35s ease,box-shadow .35s ease,backdrop-filter .35s ease}
header.scrolled{background:rgba(255,255,255,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 14px rgba(34,51,59,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:86px}
nav{margin-left:auto;margin-right:34px}
.logo svg{display:block;height:28px;width:auto}
.logo path{fill:#fff;transition:fill .3s}
header.scrolled .logo path{fill:var(--teal)}
body.nav-open .logo path{fill:var(--teal)}
nav ul{display:flex;gap:30px;list-style:none;font-size:15px;font-weight:700;color:#fff;transition:color .3s}
header.scrolled nav ul{color:var(--teal)}
nav a{position:relative;padding-bottom:4px}
nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:3px;background:var(--yellow);transition:width .25s}
nav a:hover::after{width:100%}
.header-cta{display:flex;gap:10px;align-items:center}
.header-cta .btn{padding:7px 24px;font-size:12.5px;border-radius:999px}
.header-cta .btn-outline-w{border:2px solid #fff;color:#fff;background:transparent;transition:all .3s}
.header-cta .btn-outline-w:hover{background:#fff;color:var(--yellow)}
header.scrolled .btn-outline-w{border-color:var(--teal);color:var(--teal)}
header.scrolled .btn-outline-w:hover{background:var(--teal);color:#fff}
.header-cta .btn-solid-w{background:#fff;color:var(--yellow-deep);border:2px solid #fff;transition:all .3s}
.header-cta .btn-solid-w:hover{background:var(--yellow);color:#fff;border-color:#fff}
header.scrolled .btn-solid-w{background:var(--teal);border-color:var(--teal);color:#fff}
header.scrolled .btn-solid-w:hover{background:#fff;border-color:var(--teal);color:var(--teal)}
@media(max-width:900px){nav{display:none}.header-cta{display:none}}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;border:none;background:transparent;cursor:pointer;padding:0;flex:none}
.nav-toggle span{display:block;width:100%;height:2px;background:#fff;border-radius:2px;transition:transform .3s ease,opacity .3s ease,background .3s ease}
header.scrolled .nav-toggle span{background:var(--teal)}
body.nav-open .nav-toggle span{background:var(--teal)}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){.nav-toggle{display:flex}}
/* ロゴ・ハンバーガーアイコンのみの幅（900px以下）では、スクロール時の半透明白背景は付けず、
   ヘッダー直下に実際に来ているセクションの背景色（data-header="light"か否か）だけでロゴ/アイコンの色を切り替える。
   JSはheader.icons-whiteを付け外しする */
@media(max-width:900px){
  header.scrolled{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
  header:not(.icons-white) .logo path,
  header.scrolled:not(.icons-white) .logo path{fill:var(--teal)}
  header:not(.icons-white) .nav-toggle span,
  header.scrolled:not(.icons-white) .nav-toggle span{background:var(--teal)}
  header.icons-white .logo path,
  header.scrolled.icons-white .logo path{fill:#fff}
  header.icons-white .nav-toggle span,
  header.scrolled.icons-white .nav-toggle span{background:#fff}
  /* メニューを開くと画面全体が白いmobile-navで覆われるため、直前の背景色に関わらずロゴ・アイコンは常にテーマカラーにする */
  body.nav-open header.icons-white .logo path{fill:var(--teal)}
  body.nav-open header.icons-white .nav-toggle span{background:var(--teal)}
}
/* ハンバーガーアイコン（画面右上）を起点に、白い円形が画面全体へ広がって開き、
   閉じる時は逆再生のように右上の起点へ縮んでいく */
.mobile-nav{position:fixed;inset:0;background:#F4F8F9;padding:110px 32px 40px;clip-path:circle(0% at calc(100% - 40px) 44px);visibility:hidden;transition:clip-path .5s ease,visibility .5s;z-index:99;overflow-y:auto;display:flex;flex-direction:column;justify-content:center}
.mobile-nav.is-open{clip-path:circle(150vmax at calc(100% - 40px) 44px);visibility:visible}
.mobile-nav ul{list-style:none;text-align:center}
.mobile-nav li+li{border-top:1px solid var(--line)}
.mobile-nav a{display:block;padding:16px 2px;font-size:16px;font-weight:700;color:var(--ink)}
.mobile-nav-cta{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.mobile-nav-cta .btn{text-align:center;justify-content:center;width:100%;padding:3px 20px;border-radius:999px}
.mobile-nav-cta .btn-teal2{background:var(--teal);color:#fff}
.mobile-nav-cta .btn-line-teal2{border:2px solid var(--teal);color:var(--teal-deep);background:transparent}
body.nav-open{overflow:hidden}
@media(min-width:901px){.mobile-nav{display:none}}
footer{background:var(--ink);color:#9fb0b8;padding:64px 0 36px;font-size:12.5px}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap;margin-bottom:48px}
.footer-brand .logo{display:block;margin-bottom:16px}
.footer-brand .logo path{fill:#fff}
.footer-brand p{line-height:2.2}
.footer-nav{display:grid;grid-template-columns:repeat(3,auto);column-gap:32px;row-gap:14px;font-weight:700;font-size:13.5px}
.footer-nav a:hover{color:var(--yellow)}
/* ロゴ横並び時、メニュー1行目の高さを左側の社名テキスト（ロゴの下）に揃える（ロゴ26px+margin-bottom16px分だけ下げる） */
@media(min-width:703px){.footer-nav{margin-top:42px}}
.copyright{border-top:1px solid rgba(255,255,255,.15);padding-top:26px;display:flex;justify-content:center;text-align:center;flex-wrap:wrap;gap:12px;font-size:11px}
/* footer-innerが折り返してロゴエリアとメニューが横並びでなくなった時（実測での折り返し境界値）、メニュー項目のブロックを画面中央に寄せる */
@media(max-width:702px){
  .footer-nav{margin:0 auto;text-align:center}
  /* ロゴ・社名・住所も同様に左右中央へ */
  .footer-brand{margin:0 auto;text-align:center}
  .footer-brand .logo{display:inline-block;margin-bottom:8px}
  /* 縦並び時: ロゴ〜社名の距離を詰め、住所〜メニューの距離は少し広げる */
  .footer-inner{row-gap:48px}
}