/* reset.css — modern, minimal, accessible */

/* 1) ボックスモデルと余白の初期化 */
*, *::before, *::after { box-sizing: border-box; }
:where(html, body) { margin: 0; padding: 0; }

/* 2) ルートのテキスト設定 */
:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 3) 見出し等の余白をリセット */
:where(h1, h2, h3, h4, h5, h6, p, figure, figcaption, blockquote, dl, dd) { margin: 0; }

/* 4) リスト初期化 */
:where(ul, ol) { margin: 0; padding: 0; list-style: none; }

/* 5) メディアの振る舞い */
:where(img, svg, video, canvas, audio, iframe, embed, object) { display: block; max-width: 100%; }
:where(img, video) { height: auto; }

/* 6) フォーム */
:where(button, input, select, textarea) { font: inherit; color: inherit; margin: 0; }
:where(textarea) { resize: vertical; }
:where(button) { background: none; border: none; padding: 0; cursor: pointer; }
:where(fieldset) { border: 0; margin: 0; padding: 0; }

/* 7) アンカー初期化 */
:where(a) { color: inherit; text-decoration: none; }

/* 8) テーブル */
:where(table) { border-collapse: collapse; border-spacing: 0; }
:where(th, td) { padding: 0; text-align: left; }

/* 9) 強調 */
:where(b, strong) { font-weight: bolder; }

/* 10) 視覚的に隠す */
.visually-hidden {
  position: absolute !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important; white-space: nowrap !important;
  border: 0 !important; padding: 0 !important; margin: -1px !important;
}

/* 11) フォーカスリング */
:where(:focus-visible) { outline: 2px solid #000; outline-offset: 3px; }

/* 12) アニメーション軽減 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

:root{
  /* Blue scale */
  --blue-900:#0f2b5a;
  --blue-800:#17356b;
  --blue-700:#1f4280;
  --blue-600:#2a57a6;
  --blue-100:#f5f8ff;

  --base:#ffffff;
  --text:#1b1b1b;
  --muted:#5e6b7a;
  --accent:#c40000;
  --bd:#e3e8f3;
  --shadow:0 8px 28px rgba(8,24,58,.08);

  /* font sizes (3段) */
  --fz-lg: clamp(28px, 6.2vw, 44px);
  --fz-md: clamp(18px, 4vw, 22px);
  --fz-sm: clamp(14px, 3.4vw, 16px);

  --container: min(100% - 24px, 1140px);
  --radius:16px;
}

/* Base */
html,body{height:100%}
body{
  margin:0; color:var(--text); background:var(--base);
  font-family:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif;
  line-height:1.9;
}
img{max-width:100%; height:auto; display:block}
.container{width:var(--container); margin-inline:auto}
.section{padding:96px 0; scroll-margin-top:90px}
.section-ice{background:linear-gradient(180deg,#f7f9fe 0%, #ffffff 100%)}

.ttl-lg{font-size:var(--fz-lg); line-height:1.1; margin:0 0 10px; color:#fff}
.ttl-md{font-size:var(--fz-md); line-height:1.3; margin:0 0 18px; color:var(--blue-900)}
.lead{font-size:var(--fz-md); color:#eaf2ff; margin:0 0 16px}
.txt{font-size:var(--fz-sm)}
.txt.small{font-size:13px}
.muted{color:#6c7890}
.list{padding-left:1.2em}
.list li{margin:.2em 0}
.btn-primary{
  display:inline-block; padding:14px 22px; border-radius:999px;
  background:var(--blue-600); color:#fff; text-decoration:none; font-size:var(--fz-sm);
  box-shadow:0 8px 20px rgba(31,66,128,.25);
}
.ribbon{position:relative; padding-left:14px}
.ribbon::before{
  content:""; position:absolute; left:0; top:.28em; bottom:.28em; width:6px; background:var(--blue-600); border-radius:4px;
}

/* Header */
.site-header{
  position:fixed; inset:0 0 auto 0; height:64px; z-index:1000;
  background:linear-gradient(180deg, var(--blue-900), var(--blue-800));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{height:100%; display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:inline-flex; align-items:center}
.brand > img { height:24px; } /* 影響範囲を限定 */
.gnav{display:none}
.gnav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0; align-items:center}
.gnav a{display:inline-block; padding:10px 12px; text-decoration:none; color:#e7eeff; font-size:var(--fz-sm); position:relative}
.gnav a::after{content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; background:#fff; transform:scaleX(0); transform-origin:left; transition:.2s}
.gnav a:hover::after, .gnav a.is-active::after{transform:scaleX(1)}
.hamburger{width:40px; height:40px; padding:10px; display:grid; place-items:center;}
.hamburger span{display:block; width:18px; height:2px; background:#fff}
.hamburger span+span{margin-top:4px}
.drawer{position:fixed; inset:0; background:linear-gradient(180deg,#fff,#f4f7fd); z-index:1200; display:flex; flex-direction:column; padding:14px 20px 20px; gap:12px}
.drawer[hidden]{display:none}
.drawer-head{display:flex; align-items:center; justify-content:end; gap:8px; padding:10px 2px 6px}
.drawer ul{list-style:none; margin:0; padding:10px 0 0; display:flex; flex-direction:column; gap:6px}
.drawer a{display:block; padding:12px 10px; border-bottom:1px solid var(--bd); color:var(--blue-900); text-decoration:none; font-size:var(--fz-sm)}
.drawer-close{width:40px; height:40px; border-radius:10px; border:1px solid var(--bd); background:#fff; font-size:20px}
@media (min-width:980px){ .hamburger{display:none} .drawer{display:none!important} .gnav{display:block; margin-inline:auto} }

/* Hero (slider) */
.hero{position:relative; padding-top:64px; background:#fff; height:100vh;}
.hero-slides{position:absolute; inset:0; overflow:hidden}
.hero-slides .slide{
  position:absolute; inset:0; background-size:cover; background-position:center; opacity:0;
  animation:fadeSlide 18s infinite;
  filter:brightness(.9);
}
.hero-slides .slide:nth-child(1){animation-delay:0s}
.hero-slides .slide:nth-child(2){animation-delay:6s}
.hero-slides .slide:nth-child(3){animation-delay:12s}
@keyframes fadeSlide{
  0%{opacity:0} 5%{opacity:1} 28%{opacity:1} 33%{opacity:0} 100%{opacity:0}
}
.hero-mask{position:absolute; inset:0; background:rgba(0,0,0,.25)}
.hero-inner{position:relative; text-align:center; z-index:1; padding:30vh 0; color:#fff}
.cursive{
  font-family: 'Great Vibes', 'Brush Script MT', 'Zapfino', cursive;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  text-rendering: optimizeLegibility;
  font-synthesis: none; /* Edgeでの疑似ボールド防止 */
}

/* Visual Break（未使用だが維持） */
.visual-break{position:relative; padding:86px 0; background:linear-gradient(180deg,#fff,#f6f9ff)}
.visual-break .visual-bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.1}
.visual-break .visual-copy{font-size:clamp(22px,4.2vw,28px); color:var(--blue-900); text-align:center; letter-spacing:.08em}
.visual-break .visual-copy span{display:inline-block; opacity:0; transform:translateY(8px); animation:rise .9s ease forwards}
.visual-break .visual-copy span:nth-child(1){animation-delay:.0s}
.visual-break .visual-copy span:nth-child(2){animation-delay:.1s}
.visual-break .visual-copy span:nth-child(3){animation-delay:.2s}
@keyframes rise{to{opacity:1; transform:none}}

/* Split sections */
.section-split .split{display:grid; gap:18px; grid-template-columns:1fr}
.split-media{border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
.split-body{align-self:center}
@media (min-width:980px){ .section-split .split{grid-template-columns:1fr 1.2fr} }

/* Works */
.grid{display:grid; gap:12px}
.works-grid{grid-template-columns:1fr 1fr}
.work{display:block; border-radius:14px; overflow:hidden; border:1px solid var(--bd); box-shadow:var(--shadow)}
.work img{width:100%; height:170px; object-fit:cover}
@media (min-width:720px){ .works-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1120px){ .works-grid{grid-template-columns:repeat(4,1fr)} }

/* Services (full bg) */
.section-heroish{position:relative; padding:96px 0}
.section-heroish .bg{position:absolute; inset:0; background-size:cover; background-position:center}
.section-heroish .overlay{position:absolute; inset:0; background:rgba(0,0,0,.45)}
.invert{color:#fff}
.service-rows{position:relative; z-index:1; display:grid; gap:16px}
.srow{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:18px}
.srow .txt{color:#eaf2ff}

/* Qualifications split-card */
.q-card{background:#fff; border:1px solid var(--bd); border-radius:16px; box-shadow:var(--shadow); padding:16px}
.split-card{display:grid; gap:16px; grid-template-columns:1fr}
.split-card .q-col ul{margin:0}
@media (min-width:980px){ .split-card{grid-template-columns:1fr 1fr} }

/* Recruit */
.jobs{grid-template-columns:1fr; gap:16px}
.job{background:#fff; border:1px solid var(--bd); border-radius:16px; box-shadow:var(--shadow); padding:16px}
.recreation .card-img img{width:100%; height:220px; object-fit:cover; border-radius:12px}

/* Motto */
.motto-inner .motto-text p{color:#fff; font-size:var(--fz-md); margin:.25em 0}
.motto-inner .motto-text .sign{margin-top:10px; opacity:.9}

/* Contact */
.section-contact .contact-form{margin-top:12px; padding:16px; background:#fff; border:1px solid var(--bd); border-radius:16px; box-shadow:var(--shadow)}
.contact-form .frow{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.contact-form label{font-size:var(--fz-sm); color:var(--muted)}
.contact-form input, .contact-form textarea, .contact-form select{
  font-size:var(--fz-sm); padding:12px; border:1px solid #d8dfeb; border-radius:10px; background:#fff;
}
.contact-form .agree{align-items:flex-start; gap:10px}
.req{color:var(--accent)} .err{color:var(--accent); min-height:1em; font-size:var(--fz-sm)}
.thanks{margin-top:8px; padding:10px 12px; background:#f7f7f7; border-radius:10px}

/* Fixed CTA */
.cta-footer{position:fixed; inset:auto 0 0 0; z-index:900; background:rgba(255,255,255,.96); border-top:1px solid var(--bd); padding:10px; display:flex; justify-content:center}
.cta-footer .cta-link{display:inline-block; background:var(--blue-700); color:#fff; text-decoration:none; padding:12px 20px; border-radius:999px; font-size:var(--fz-sm); box-shadow:0 6px 16px rgba(31,66,128,.25)}

/* Footer */
.site-footer{background:var(--blue-900); color:#e8eeff; padding:56px 0 90px}
.foot-grid{display:grid; gap:18px; grid-template-columns:1.1fr; align-items:start}
.foot-col h4{margin:0 0 8px; color:#fff}
.foot-brand img{display:block; margin-bottom:8px; height:50px;}
@media (min-width:980px){ .foot-grid{grid-template-columns:1fr 1fr 1fr 1fr} }

/* Accessibility */
a,button,input,textarea,select{outline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #000}
.skip{position:absolute; left:-9999px}
.skip:focus{position:fixed; left:12px; top:12px; background:#000; color:#fff; padding:8px 12px; border-radius:8px; z-index:2000}

/* ======== Reveal（単一ロジックに統一：最後に配置） ======== */
/* JS無効時でも見える */
.reveal, .reveal-up, .reveal-stagger, .work { opacity: 1; transform: none; }
/* JS有効時のみ最初は隠す */
.js .reveal, .js .reveal-up, .js .reveal-stagger, .js .work {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s ease, transform .6s ease;
}
/* 一度出たら二度と消えない（他CSSに勝つために !important） */
.js .is-in { opacity: 1 !important; transform: none !important; }

/* 役割・社訓はオーバーレイより前面へ（スコープ明示） */
#role .role-inner, #motto .motto-inner { position: relative; z-index: 1; }
/* Recruit: SP=縦並び / PC=3カラム横並び */
.jobs{ display:grid; grid-template-columns:1fr; gap:16px; }
.job{ background:#fff; border:1px solid var(--bd); border-radius:16px; box-shadow:var(--shadow); padding:16px; }

@media (min-width:980px){
  .jobs{ grid-template-columns:repeat(2, 1fr); gap:18px; }
  .job{ height:100%; display:flex; flex-direction:column; }
  .card-img img {
    width: 100%;
    height: 350px;
    object-fit: cover;
  }
  .motto-text {

  }
  }