@charset "utf-8";
/* =========================================================
   Comtri Corporate — chrome-2026.css
   全ページ共通のヘッダー・スマホメニュー・フッター（2026リニューアル）
   旧 main.css とぶつからないよう、クラスは s- 始まり・変数は要素スコープで持つ
   ========================================================= */

.s-head,.s-menu,.s-foot{
  --s-navy:#02214F;
  --s-navy-2:#062C63;
  --s-ink:#0A2350;
  --s-blue:#0A85FA;
  --s-blue-lt:#2D9BFE;
  --s-line:#D9E2EC;
  --s-line-w:rgba(255,255,255,.22);
  --s-pad:clamp(20px,5vw,60px);
  --s-sans:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Meiryo",sans-serif;
  --s-latin:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --s-hand:"Klee One","Yu Mincho",YuMincho,"Hiragino Mincho ProN",serif;
  font-family:var(--s-sans);
  font-feature-settings:"palt" 1;
  letter-spacing:.02em;
}
.s-head a,.s-menu a,.s-foot a{text-decoration:none}
.s-head .ar,.s-menu .ar{flex:none;transition:transform .3s}

/* ============ ヘッダー ============ */
.s-head{
  position:fixed;inset:0 0 auto;z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px var(--s-pad);
  transition:background .35s,box-shadow .35s,padding .35s;
}
.s-head.s-sc{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 1px 0 var(--s-line);
  padding-block:12px;
}
.s-logo{display:block;flex:none;line-height:0}
.s-logo img{height:clamp(26px,2.9vw,34px);width:auto;max-width:none}

.s-gnav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.s-gnav .lk{
  display:none;
  font-size:.85rem;font-weight:600;letter-spacing:.05em;color:var(--s-ink);
  transition:color .3s;
}
.s-gnav .lk:hover{color:var(--s-blue)}
.s-gnav .lk[aria-current="page"]{color:var(--s-blue)}
.s-cta{
  display:inline-flex;align-items:center;gap:.7em;
  background:var(--s-navy);color:#fff;
  padding:.95em 1.6em;font-size:.84rem;font-weight:700;letter-spacing:.06em;line-height:1.4;
  transition:background .3s;
}
.s-cta:hover{background:var(--s-blue);color:#fff}
.s-cta:hover .ar{transform:translate(2px,-2px)}

/* --- ハンバーガー --- */
.s-burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:6px;
  width:46px;height:46px;padding:0 12px;margin:0;
  background:transparent;border:1.5px solid var(--s-ink);cursor:pointer;
  color:var(--s-ink);
}
.s-burger span{display:block;height:1.5px;background:currentColor;transition:transform .3s,opacity .3s}
.s-burger:focus-visible{outline:2px solid var(--s-blue);outline-offset:3px}

@media(min-width:1000px){
  .s-gnav .lk{display:inline-block}
  .s-burger{display:none}
}
@media(max-width:520px){
  .s-cta{padding:.9em 1.1em;font-size:.78rem}
  .s-cta .ar{display:none}
}

/* ログイン中の管理バー分ずらす */
.admin-bar .s-head{top:32px}
@media(max-width:782px){.admin-bar .s-head{top:46px}}

/* ============ スマホメニュー ============ */
.s-menu{
  position:fixed;inset:0;z-index:100;
  background:linear-gradient(160deg,var(--s-navy) 0%,var(--s-navy-2) 100%);
  color:#fff;
  display:flex;flex-direction:column;
  padding:18px var(--s-pad) 32px;
  overflow-y:auto;
  opacity:0;visibility:hidden;
  transition:opacity .3s,visibility 0s linear .3s;
}
.s-menu.open{opacity:1;visibility:visible;transition:opacity .3s}
.s-menu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(28px,6vh,48px)}
.s-menu-top .s-logo img{height:28px}
.s-close{
  width:46px;height:46px;padding:0;margin:0;cursor:pointer;
  background:transparent;border:1.5px solid rgba(255,255,255,.6);color:#fff;
  position:relative;
}
.s-close::before,.s-close::after{
  content:"";position:absolute;left:50%;top:50%;width:20px;height:1.5px;background:currentColor;
}
.s-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.s-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.s-close:focus-visible{outline:2px solid var(--s-blue-lt);outline-offset:3px}

.s-menu nav{display:flex;flex-direction:column}
.s-menu nav a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:1.05em 0;border-bottom:1px solid var(--s-line-w);
  color:#fff;font-size:1.08rem;font-weight:700;letter-spacing:.06em;
}
.s-menu nav a small{
  display:block;margin-top:.2em;
  font-family:var(--s-latin);font-size:.62rem;font-weight:700;letter-spacing:.22em;
  color:var(--s-blue-lt);text-transform:uppercase;
}
.s-menu nav a .ar{opacity:.7}
.s-menu .s-cta{
  margin-top:clamp(28px,5vh,40px);justify-content:center;
  background:#fff;color:var(--s-navy);padding:1.15em 1.6em;font-size:.95rem;
}
.s-menu .s-cta .ar{display:inline}
.s-menu .s-cta:hover{background:var(--s-blue);color:#fff}
.s-menu .hand{
  margin:auto 0 0;padding-top:36px;
  font-family:var(--s-hand);font-size:1rem;line-height:1.75;letter-spacing:.04em;
  color:rgba(255,255,255,.85);transform:rotate(-4deg);transform-origin:left bottom;
}
html.s-lock,html.s-lock body{overflow:hidden}
@media(min-width:1000px){.s-menu{display:none}}

/* ============ フッター ============ */
.s-foot{
  background:linear-gradient(160deg,var(--s-navy) 0%,var(--s-navy-2) 100%);
  color:#fff;padding-block:clamp(48px,6vw,76px) clamp(24px,3vw,32px);
  line-height:1.9;
}
.s-foot-in{max-width:1220px;margin-inline:auto;padding-inline:var(--s-pad)}
.s-foot-grid{
  display:grid;gap:clamp(28px,4vw,48px);
  grid-template-columns:1fr;
}
@media(min-width:760px){.s-foot-grid{grid-template-columns:minmax(0,1.3fr) auto auto minmax(0,.9fr)}}
.s-foot-brand .s-logo img{height:clamp(24px,2.4vw,30px);margin-bottom:1.3em}
.s-foot-brand .tag{margin:0 0 1.6em;font-size:.86rem;font-weight:600;color:rgba(255,255,255,.88)}
.s-foot-brand address{font-style:normal;font-size:.8rem;line-height:2;color:rgba(255,255,255,.62)}
.s-foot-nav{display:flex;flex-direction:column;gap:.95em}
.s-foot-nav a{font-size:.84rem;font-weight:600;color:rgba(255,255,255,.82);transition:color .3s}
.s-foot-nav a:hover{color:var(--s-blue-lt)}
.s-foot-hand{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:14px}
.s-foot-hand .hand{
  margin:0;font-family:var(--s-hand);font-weight:400;
  font-size:clamp(.92rem,1.4vw,1.15rem);line-height:1.75;letter-spacing:.04em;
  text-align:right;color:rgba(255,255,255,.9);transform:rotate(-4deg);
}
.s-foot-hand .rule{width:64px;height:1px;background:var(--s-line-w)}
@media(max-width:760px){.s-foot-hand{align-items:flex-start}.s-foot-hand .hand{text-align:left}}
.s-foot-btm{margin-top:clamp(32px,4vw,52px);padding-top:clamp(18px,2.4vw,26px);border-top:1px solid var(--s-line-w)}
.s-foot-btm small{font-family:var(--s-latin);font-size:.74rem;letter-spacing:.08em;color:rgba(255,255,255,.52)}