/* ============================================================
   main.css — 全ページ共通（カラートークン / リセット / ヘッダー）
   ページ固有のスタイルは index.css / article.css 側で管理
   ============================================================ */

:root {
  --white: #ffffff;
  --paper: #f6f4ef;
  --navy: #173764;
  --navy-soft: #2e4374;
  --ink: #23262b;
  --gray: #6b7280;
  --red: #e23329;
  --c-blue: #2d93cc;
  --c-pink: #e2508a;
  --c-yellow: #efb52a;
  --c-teal: #2eae96;
  --line: rgba(23, 55, 100, 0.12);
  --disp: "Reggae One", sans-serif;
  --util: "Bungee", sans-serif;
  --body: "Zen Kaku Gothic New", "Inter", sans-serif;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  background: var(--white);
}
body {
  font-family: var(--body);
  color: var(--ink);
  background: transparent;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Header（共通） ---- */
.hdr {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px clamp(16px, 4vw, 40px);
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand .mark {
  height: 30px;
  width: auto;
}
.brand .blogo {
  height: 84px;
  width: auto;
  display: block;
}
.brand .bt {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand .bt b {
  font-family: var(--util);
  font-size: clamp(12px, 2.6vw, 15px);
  color: var(--navy);
  letter-spacing: 0.5px;
}
.brand .bt small {
  font-size: 9px;
  color: var(--gray);
  margin-top: 3px;
  letter-spacing: 0.5px;
}
.hdr-r {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 20px);
}
.hdr-r nav {
  display: flex;
  gap: 18px;
}
.hdr-r nav a {
  font-family: var(--util);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--navy);
}
.hdr-r a {
  font-family: var(--util);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--navy);
}
.pw {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  color: var(--gray);
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.pw a,
.ftr-fm .chip a,
.st2-left a {
  display: block;
  line-height: 0;
}
.pw .fm {
  height: 45px;
  width: auto;
}
.ring {
  width: 8px;
  height: 8px;
  border: 2px solid var(--red);
  border-radius: 50%;
  flex: 0 0 auto;
}

/* ---- SP ハンバーガーメニュー ---- */
.hmb{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0;border:none;background:transparent;cursor:pointer;z-index:60}
.hmb span{display:block;width:24px;height:2.5px;border-radius:2px;background:var(--navy);margin:0 auto;transition:transform .25s ease,opacity .2s ease}
.hdr.open .hmb span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hdr.open .hmb span:nth-child(2){opacity:0}
.hdr.open .hmb span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media(max-width:720px){
  .hmb{display:flex}
  .brand .blogo{height:clamp(48px,12vw,60px)}
  .hdr-r{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(255,255,255,.97);-webkit-backdrop-filter:saturate(1.1) blur(10px);backdrop-filter:saturate(1.1) blur(10px);border-bottom:1px solid var(--line);box-shadow:0 14px 28px rgba(23,55,100,.12);padding:6px 0 10px;transform:translateY(-10px);opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility .25s}
  .hdr.open .hdr-r{transform:none;opacity:1;visibility:visible}
  .hdr-r nav{flex-direction:column;width:100%;gap:0}
  .hdr-r nav a,.hdr-r > a{display:block;width:100%;padding:14px clamp(18px,6vw,30px);font-size:13px;border-bottom:1px solid var(--line)}
  .pw{padding:12px clamp(18px,6vw,30px)}
}

/* ---- 背景オーブ（全ページ共通・画面固定） ---- */
.bg-orbs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg-orbs .orb{position:absolute;border-radius:50%;filter:blur(46px);opacity:.20;will-change:transform}
.bg-orbs .orb.teal{background:#2EAE96}
.bg-orbs .orb.pink{background:#E2508A}
.bg-orbs .orb.blue{background:#2D93CC}
.bg-orbs .orb.yellow{background:#EFB52A}
.bg-orbs .o1{width:380px;height:380px;top:-60px;left:-70px;animation:flo1 17s ease-in-out infinite}
.bg-orbs .o2{width:300px;height:300px;top:8vh;right:-80px;animation:flo2 21s ease-in-out infinite}
.bg-orbs .o3{width:240px;height:240px;top:42vh;left:-60px;animation:flo3 15s ease-in-out infinite}
.bg-orbs .o4{width:340px;height:340px;top:54vh;right:-90px;animation:flo1 23s ease-in-out infinite}
.bg-orbs .o5{width:280px;height:280px;bottom:-70px;left:18vw;animation:flo2 19s ease-in-out infinite}
.bg-orbs .o6{width:220px;height:220px;bottom:6vh;right:14vw;animation:flo3 25s ease-in-out infinite}
@keyframes flo1{0%{transform:translate(0,0)}50%{transform:translate(26px,-34px) scale(1.06)}100%{transform:translate(0,0)}}
@keyframes flo2{0%{transform:translate(0,0)}50%{transform:translate(-30px,24px) scale(1.05)}100%{transform:translate(0,0)}}
@keyframes flo3{0%{transform:translate(0,0)}50%{transform:translate(18px,30px) scale(1.08)}100%{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){.bg-orbs .orb{animation:none}}

/* ---- Footer（全ページ共通） ---- */
.ftr{background:var(--navy);color:#fff;padding:0 0 26px}
.ftr-strip{display:flex;height:8px}
.ftr-strip i{flex:1}
.ftr-strip i:nth-child(1){background:var(--c-blue)}.ftr-strip i:nth-child(2){background:var(--c-pink)}.ftr-strip i:nth-child(3){background:var(--c-yellow)}.ftr-strip i:nth-child(4){background:var(--c-teal)}
.ftr-main{max-width:1280px;margin:0 auto;padding:clamp(36px,6vw,58px) clamp(20px,5vw,40px) clamp(22px,4vw,34px);display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.ftr-brand{display:flex;align-items:center;gap:14px}
.ftr-mark{height:56px;width:auto}
.ftr-logo{height:clamp(62px,9.5vw,94px);width:auto;display:block}
.ftr-wm{font-family:var(--disp);font-size:clamp(22px,4vw,30px);color:#fff;line-height:1.1;letter-spacing:.5px}
.ftr-tag{font-size:12px;color:#AEB9CC;margin-top:7px;letter-spacing:.5px}
.ftr-right{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.ftr-nav{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.ftr-nav a{font-family:var(--util);font-size:11px;letter-spacing:1px;color:#C7D0DF;transition:color .2s}
.ftr-nav a:hover{color:#fff}
.ftr-fm{display:flex;align-items:center;gap:10px}
.ftr-fm .lab{font-size:10px;color:#8C99B4;letter-spacing:.5px}
.ftr-fm .chip{background:#fff;border-radius:8px;padding:7px 11px;display:inline-flex;align-items:center}
.ftr-fm .chip img{height:24px;width:auto;display:block}
.ftr-bottom{max-width:1280px;margin:0 auto;padding:16px clamp(20px,5vw,40px) 0;border-top:1px solid var(--navy-soft);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.ftr-pulse{display:inline-flex;align-items:center;gap:8px;font-family:var(--util);font-size:10px;letter-spacing:1.5px;color:#fff}
.ftr-pulse i{width:8px;height:8px;border-radius:50%;background:var(--red);flex:0 0 auto}
.ftr-bottom .cr{font-size:11px;color:#8C99B4}
@media(prefers-reduced-motion:no-preference){.ftr-pulse i{animation:pulse 2s ease-out infinite}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(226,51,41,.5)}100%{box-shadow:0 0 0 9px rgba(226,51,41,0)}}

/* ---- サブページ共通（policy / contact） ---- */
.subpage{max-width:860px;margin:0 auto;padding:clamp(40px,7vw,88px) clamp(20px,5vw,40px) clamp(56px,9vw,120px)}
.subpage .sp-eyebrow{font-family:var(--util);font-size:11px;letter-spacing:1.5px;color:var(--red);margin-bottom:14px}
.subpage .sp-title{font-family:var(--disp);font-weight:400;font-size:clamp(30px,6vw,52px);color:var(--navy);line-height:1.18;letter-spacing:.5px;margin-bottom:10px}
.subpage .sp-title .en{display:block;font-family:var(--util);font-size:clamp(11px,1.6vw,13px);color:var(--c-teal);letter-spacing:2px;margin-top:10px}
.subpage .sp-rule{height:6px;width:96px;background:linear-gradient(90deg,var(--c-blue) 0 25%,var(--c-pink) 25% 50%,var(--c-yellow) 50% 75%,var(--c-teal) 75% 100%);border-radius:4px;margin:18px 0 clamp(30px,5vw,46px)}
.subpage h2{font-family:var(--body);font-weight:700;font-size:clamp(17px,2.6vw,21px);color:var(--navy);margin:clamp(28px,4vw,42px) 0 12px;padding-left:14px;border-left:5px solid var(--c-teal)}
.subpage p{font-size:clamp(14px,2.2vw,15px);color:var(--ink);line-height:2;margin-bottom:14px}
.subpage ul{margin:0 0 16px 1.2em}
.subpage li{font-size:clamp(14px,2.2vw,15px);color:var(--ink);line-height:1.95;margin-bottom:6px}
.subpage a.inline{color:var(--c-blue);border-bottom:1px solid var(--c-blue)}
.subpage a.inline:hover{color:var(--red);border-color:var(--red)}
.subpage .sp-updated{margin-top:clamp(34px,5vw,50px);font-size:12px;color:var(--gray)}

/* contact form */
.cform{margin-top:clamp(8px,2vw,20px);display:grid;gap:clamp(16px,2.4vw,22px)}
.cform .row{display:flex;flex-direction:column;gap:8px}
.cform label{font-family:var(--body);font-weight:700;font-size:13px;color:var(--navy);letter-spacing:.5px}
.cform label .req{color:var(--red);font-size:11px;margin-left:6px}
.cform input,.cform textarea{font-family:var(--body);font-size:15px;color:var(--ink);background:rgba(255,255,255,.86);border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;transition:border-color .2s,box-shadow .2s}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--c-blue);box-shadow:0 0 0 3px rgba(45,147,204,.15)}
.cform textarea{min-height:160px;resize:vertical}
.cform .submit{justify-self:center;min-width:260px;justify-content:center;display:inline-flex;align-items:center;gap:10px;font-family:var(--util);font-size:13px;letter-spacing:2px;color:#fff;background:var(--navy);border:none;cursor:pointer;padding:17px 44px;border-radius:999px;transition:background .2s ease,transform .15s ease}
.cform .submit:hover{background:var(--navy-soft);transform:translateY(-1px)}
.cform .submit:active{transform:translateY(0)}
.cform .submit span{font-size:14px;transition:transform .2s ease}
.cform .submit:hover span{transform:translateX(3px)}
.cform .note{font-size:12px;color:var(--gray);line-height:1.8}
.cform-msg{margin-top:clamp(12px,2.4vw,22px);padding:15px 18px;border-radius:12px;font-family:var(--body);font-size:14px;line-height:1.8;font-weight:500}
.cform-ok{color:#0f6b4f;background:rgba(38,178,128,.12);border:1.5px solid rgba(38,178,128,.45)}
.cform-err{color:var(--red);background:rgba(224,58,58,.10);border:1.5px solid rgba(224,58,58,.4)}
/* ---- Contact Form 7（ショートコードに html_class="cform" を付けて使う） ---- */
/* CF7 は入力欄を span でラップするので、行いっぱいに広げる */
.cform .wpcf7-form-control-wrap{display:block}
.cform input.wpcf7-form-control:not(.wpcf7-submit),.cform textarea.wpcf7-form-control{width:100%}
/* 未入力・形式エラー */
.cform .wpcf7-not-valid-tip{margin-top:7px;font-size:12px;font-weight:700;color:var(--red)}
.cform input.wpcf7-not-valid,.cform textarea.wpcf7-not-valid{border-color:var(--red)}
.cform input.wpcf7-not-valid:focus,.cform textarea.wpcf7-not-valid:focus{box-shadow:0 0 0 3px rgba(224,58,58,.15)}
/* 送信結果メッセージ（テーマ内蔵フォームの .cform-msg と同じ意匠） */
.wpcf7 form.cform .wpcf7-response-output{margin:0;padding:15px 18px;border:1.5px solid transparent;border-radius:12px;font-family:var(--body);font-size:14px;line-height:1.8;font-weight:500}
.wpcf7 form.cform.sent .wpcf7-response-output{color:#0f6b4f;background:rgba(38,178,128,.12);border-color:rgba(38,178,128,.45)}
.wpcf7 form.cform.invalid .wpcf7-response-output,.wpcf7 form.cform.unaccepted .wpcf7-response-output,
.wpcf7 form.cform.failed .wpcf7-response-output,.wpcf7 form.cform.aborted .wpcf7-response-output,
.wpcf7 form.cform.spam .wpcf7-response-output{color:var(--red);background:rgba(224,58,58,.10);border-color:rgba(224,58,58,.4)}
/* 送信中スピナー */
.cform .wpcf7-spinner{margin:0 auto;display:block}
/* 送信ボタン（[submit class:submit ...] で .submit が付く） */
.cform input.wpcf7-submit{-webkit-appearance:none;appearance:none}
.cform input.wpcf7-submit:disabled{opacity:.6;cursor:default}

.backbtn-wrap{text-align:center;padding:0 0 clamp(40px,7vw,80px)}
.backbtn{display:inline-block;font-family:var(--util);font-size:12px;letter-spacing:1px;color:var(--navy);border:2px solid var(--navy);border-radius:30px;padding:13px 30px;transition:.2s}
.backbtn:hover{background:var(--navy);color:#fff}

/* ---- ページ遷移アニメーション ---- */
/* 対応ブラウザ：同一サイト内リンク遷移をクロスフェード＋スライド */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .26s ease both}
::view-transition-new(root){animation:vtIn .42s cubic-bezier(.22,.61,.36,1) both}
@keyframes vtOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-10px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* 非対応ブラウザ：読み込み時にページをフェードイン */
@supports not (view-transition-name:none){
  body{animation:pageIn .5s ease both}
}
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  body{animation:none}
}

/* ============================================================
   お知らせモーダル（令和8年熊本地震 お見舞い）
   ×ボタン（またはフッターの閉じるボタン）でのみクローズ
   ============================================================ */
.nmodal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:clamp(14px,4vw,40px)}
.nmodal[hidden]{display:none}
.nmodal-backdrop{position:absolute;inset:0;background:rgba(9,20,38,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:nmFade .3s ease both}
.nmodal-panel{position:relative;width:min(680px,100%);max-height:min(86vh,760px);display:flex;flex-direction:column;background:var(--white);border-radius:clamp(12px,2vw,18px);box-shadow:0 24px 70px rgba(9,20,38,.34);overflow:hidden;animation:nmUp .42s cubic-bezier(.22,.61,.36,1) both}
.nmodal-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--c-teal),var(--c-blue) 34%,var(--c-pink) 68%,var(--c-yellow))}
.nmodal-close{position:absolute;top:clamp(8px,1.6vw,14px);right:clamp(8px,1.6vw,14px);z-index:2;display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;color:var(--navy);background:rgba(246,244,239,.92);border:1.5px solid var(--line);border-radius:50%;cursor:pointer;transition:background .2s ease,color .2s ease,transform .15s ease}
.nmodal-close:hover{background:var(--navy);color:#fff}
.nmodal-close:active{transform:scale(.94)}
.nmodal-body{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:clamp(30px,5vw,44px) clamp(18px,4vw,44px) clamp(30px,5vw,44px)}
.nmodal-title{font-family:var(--body);font-weight:700;font-size:clamp(17px,4.4vw,23px);line-height:1.55;color:var(--navy);letter-spacing:.02em}
.nmodal-rule{width:52px;height:3px;margin:16px 0 22px;border-radius:2px;background:var(--navy);opacity:.85}
.nmodal-body p{font-size:clamp(13px,3.4vw,15px);line-height:2;color:var(--ink)}
.nmodal-body p+p{margin-top:1.2em}
/* 背後スクロールロック */
html.nmodal-lock{overflow:hidden}
body.nmodal-lock{position:fixed;top:0;left:0;width:100%;overflow:hidden}
@keyframes nmFade{from{opacity:0}to{opacity:1}}
@keyframes nmUp{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .nmodal-backdrop,.nmodal-panel{animation:none}
}