/*
Theme Name: AstraTech
Theme URI: https://astratech.top/
Author: AstraTech
Author URI: https://astratech.top/
Description: AstraTech 自社サイト用のオリジナルテーマ。白基調 × ブランド青、スクロールで一度だけ動くCSSアニメーション。トップページは front-page.php がテンプレートとして持ち、他の固定ページは本文をそのまま出力する。
Version: 1.0.2
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: Proprietary
Text Domain: astratech
Tags: business, custom-menu, translation-ready
*/

/* =========================================================
   規約
   - デザインシステムのセレクタは .at- プレフィックス
   - 動きは「足すだけ」。既定値は必ず完成状態にする
   - 常時ループするアニメーション禁止
   - reduce ブロックの中で要素を隠さない
   - 検証: python tools/check_design.py wp-theme/astratech/style.css
   ========================================================= */

/* --- 00 reset / global ----------------------------------------
   box-sizing と本文の既定値は、旧テーマ(Lightning)と同じ値にしている。
   トップ以外の10ページは各自の <style> を本文に持っており、
   border-box 前提で組まれているため、ここを変えると一斉に崩れる。
   -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

body{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif;
  font-size:16px;
  line-height:1.9;
  color:#333;
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}

/* --- 01 tokens ------------------------------------------------ */
:root{
  --at-blue:#1B2C9E;          /* ロゴの青。見出し・リンク・罫線 */
  --at-blue-bright:#0B6FE8;   /* ロゴのグラデ明側。ホバーのみ */
  --at-amber:#FBB01A;         /* ロゴの星。CTAボタン専用（占有3%以下） */
  --at-ink:#111A3D;           /* 本文・見出し */
  --at-muted:#5A6580;         /* 補足文。白地で 5.4:1 */
  --at-line:#E3E8F0;          /* 1px罫線。文字色には使わない */
  --at-edge:#B4C0D4;          /* 点線枠など「見えてほしい線」 */
  --at-bg:#FFFFFF;
  --at-bg-alt:#F6F8FB;        /* セクション交互の淡い面 */

  --at-maxw:1120px;
  --at-gut:clamp(20px,5vw,40px);
  --at-ease:cubic-bezier(.22,.61,.36,1);

  --at-font:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif;
}

/* 目に見えないが読み上げには渡すテキスト */
.at-sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0;
}

/* キーボード操作の可視化 */
:focus-visible{outline:3px solid var(--at-blue-bright);outline-offset:2px}

/* 本文へスキップ。フォーカスされるまで隠す */
.at-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:#fff;color:var(--at-blue);padding:12px 18px;font-weight:700;
}
.at-skip:focus{left:8px;top:8px}

.at-wrap{max-width:var(--at-maxw);margin-inline:auto;padding-inline:var(--at-gut)}

/* =========================================================
   10 header / nav
   オリジナルテーマなので、テーマのコンテナと戦う必要がない。
   旧実装で必要だった 100vw の全幅ハック(.at-bleed)と
   html{overflow-x:clip} は、ここでは一切不要になった。
   ========================================================= */
.at-header{
  background:#fff;border-bottom:1px solid var(--at-line);
  position:relative;z-index:30;
}
.at-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;min-height:68px;
}

.at-brand{margin:0;font-size:18px;font-weight:700;line-height:1}
.at-brand a{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--at-ink);text-decoration:none;
}
.at-brand__mark{display:block;width:42px;height:29px;flex:none}
.at-brand__name{letter-spacing:.01em}

.at-nav ul{
  list-style:none;display:flex;gap:22px;margin:0;padding:0;
  font-size:14px;font-weight:700;
}
.at-nav a{color:var(--at-ink);text-decoration:none;padding:6px 0;display:inline-block}
.at-nav a:hover{color:var(--at-blue-bright)}
.at-nav .current-menu-item > a,
.at-nav .current_page_item > a{
  color:var(--at-blue);box-shadow:inset 0 -2px 0 var(--at-blue);
}

/* ハンバーガー。JSが無い環境ではボタンを隠してナビを常時表示する
   （押しても何も起きないボタンを出さないため）。 */
.at-navtoggle{
  display:none;appearance:none;background:none;border:1px solid var(--at-line);
  border-radius:2px;padding:9px 14px;font:inherit;font-size:13px;font-weight:700;
  color:var(--at-ink);cursor:pointer;
}
.at-navtoggle:hover{border-color:var(--at-edge)}

@media (max-width:860px){
  .at-header__inner{min-height:52px}
  .at-brand{font-size:16px}
  .at-brand__mark{width:31px;height:21px}

  .at-js .at-navtoggle{display:block}
  .at-js .at-nav{display:none}
  .at-js .at-nav.at-nav--open{display:block}

  .at-nav{
    position:absolute;inset-inline:0;top:100%;
    background:#fff;border-bottom:1px solid var(--at-line);
    box-shadow:0 10px 24px rgba(0,0,0,.08);
  }
  .at-nav ul{flex-direction:column;gap:0;padding:8px 0}
  .at-nav li{border-top:1px solid var(--at-line)}
  .at-nav li:first-child{border-top:0}
  .at-nav a{display:block;padding:14px var(--at-gut)}
}

/* =========================================================
   20 footer
   旧テーマのフッターは実質空でウィジェットも0個だったので、
   移植するものは無く、ここで作り直している。
   ========================================================= */
.at-footer{border-top:1px solid var(--at-line);background:#fff}
.at-footer__inner{
  padding-block:32px 40px;
  display:flex;flex-wrap:wrap;gap:12px 28px;
  align-items:center;justify-content:space-between;
}
.at-footer ul{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;
  font-size:13px;
}
.at-footer a{color:var(--at-muted);text-decoration:none}
.at-footer a:hover{color:var(--at-blue)}
.at-copy{margin:0;font-size:13px;color:var(--at-muted)}
@media (max-width:640px){
  .at-footer__inner{flex-direction:column;align-items:flex-start}
}

/* =========================================================
   30 固定ページ（トップ以外）
   旧テーマの .site-body-container.container と同じ寸法にしている。
   実測: max-width 1140px / padding 15px → 本文 1110px。
   10ページぶんの自前CSSがこの幅で組まれているため、変えない。
   ========================================================= */
.at-page{padding-block:48px 72px}
.at-page__container{max-width:1140px;padding-inline:15px;margin-inline:auto}
.at-page__title{
  font-size:clamp(24px,3.2vw,34px);font-weight:700;line-height:1.5;
  letter-spacing:.02em;color:var(--at-ink);margin:0 0 28px;
}
/* 本文が自前でフルデザインを持つページではタイトルを出さない
   （PHP側で判定し、このクラスを付けない） */

/* 404 */
.at-404{padding-block:96px 120px;text-align:center}
.at-404 h1{font-size:clamp(26px,4vw,40px);color:var(--at-ink);margin:0 0 16px}
.at-404 p{color:var(--at-muted);margin:0 0 28px}

/* =========================================================
   40 デザインシステム（トップページ専用）
   body.at が付いたページだけに適用する。
   他10ページは各自の <style> で完結しているので巻き込まない。
   ========================================================= */
.at{color:var(--at-ink);font-family:var(--at-font)}

/* 基本タイポは :where() で詳細度0にする。
   `.at a`(0,1,1) が `.at-btn--primary`(0,1,0) に勝ってしまい、
   アンバー地に青文字という読めない組み合わせが実際に起きた。 */
:where(.at) a{color:var(--at-blue);text-decoration:none}
:where(.at) a:hover{color:var(--at-blue-bright)}
:where(.at) h1,:where(.at) h2,:where(.at) h3{
  font-weight:700;line-height:1.5;letter-spacing:.02em;
  text-wrap:balance;margin:0;
}

.at .at-sec{padding-block:clamp(64px,9vw,120px);scroll-margin-top:24px}
.at .at-sec--alt{background:var(--at-bg-alt)}

.at-h2{font-size:clamp(26px,3.6vw,40px)}
.at-h3{font-size:clamp(19px,2.2vw,24px)}
.at-lead{color:var(--at-muted);margin-block:16px 0}

/* 英字ラベル。全セクションに付けるとAIっぽくなるので2箇所だけ。増やさないこと。 */
.at-label{
  font-size:12px;letter-spacing:.18em;color:var(--at-muted);
  font-weight:700;margin:0 0 14px;
}

/* 和文見出しが単語の途中で折れるのを防ぐ箱 */
.at-phrase{display:inline-block}

/* 番号は絵文字アイコンの代わり。読めない濃さにしない
   （以前 --at-line を淡い面に置いて 1.16:1 だった） */
.at-no{
  font-size:clamp(40px,6vw,72px);font-weight:700;
  color:var(--at-muted);line-height:1;letter-spacing:-.02em;
}

/* --- 41 motion ------------------------------------------------ */
.at-rise{opacity:1;transform:none}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes at-rise{
      from{opacity:0;transform:translateY(12px)}
      to  {opacity:1;transform:none}
    }
    .at-rise{
      animation:at-rise .8s var(--at-ease) both;
      animation-timeline:view();animation-range:entry 0% cover 32%;
    }
  }
}

/* 数字のカウントアップ。既定では HTML の実テキストが出る。
   旧サイトは data-count を書いて JS が無く、本番で 0 が並んでいた。 */
@property --at-n{syntax:"<integer>";initial-value:0;inherits:false}
.at-num{
  font-size:clamp(44px,7vw,84px);font-weight:700;
  line-height:1;color:var(--at-blue);letter-spacing:-.02em;
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes at-count{from{--at-n:0} to{--at-n:var(--at-to)}}
    .at-num{
      --at-n:var(--at-to);counter-reset:atn var(--at-n);
      animation:at-count 1.3s var(--at-ease) both;
      animation-timeline:view();animation-range:entry 0% cover 26%;
    }
    .at-num::after{content:counter(atn)}
    .at-num__t{display:none}
  }
}

/* 見出しの行せり上がり。不可視の指定は @keyframes の中だけに置く。
   素の .at-hl > span は display:block のみなので、
   アニメーションが走らない環境では最初から見えている。 */
.at-hl{display:block;overflow:hidden}
.at-hl > span{display:block}
@media (prefers-reduced-motion:no-preference){
  @keyframes at-lineup{
    0%  {transform:translateY(108%)}
    18% {transform:translateY(108%)}
    100%{transform:translateY(0)}
  }
  /* animation-delay + backwards fill だと「開始前は不可視」の窓ができる。
     待機をキーフレーム側に持たせ、delay を使わない。 */
  .at-hl > span{
    animation:at-lineup .9s var(--at-ease) both;
    animation-duration:calc(.75s + var(--at-i,0) * .09s);
  }
}

.at-ph{position:relative;overflow:hidden;background:var(--at-bg-alt)}
.at-ph > img{transition:transform .5s var(--at-ease)}
.at-ph:hover > img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){ .at-ph > img{transition:none} }

/* --- 42 hero --------------------------------------------------- */
.at-hero{
  position:relative;min-height:max(640px,88svh);
  display:flex;align-items:flex-end;overflow:hidden;background:#0B142C;
}
.at-hero__img{
  position:absolute;inset:0;background-image:var(--at-hero-img,none);
  background-size:cover;background-position:center;
}
@media (prefers-reduced-motion:no-preference){
  @keyframes at-herozoom{from{transform:scale(1)} to{transform:scale(1.06)}}
  /* both = 最終状態で止まる。ループしない */
  .at-hero__img{animation:at-herozoom 8s var(--at-ease) both}
}
.at-hero__veil{
  position:absolute;inset:0;
  /* 許可マーカーは宣言の1行目に置くこと（検出は行単位のため） */
  background:linear-gradient(105deg, /* at-allow-gradient */
    rgba(8,16,40,.80) 0%,
    rgba(8,16,40,.40) 55%,
    rgba(8,16,40,.18) 100%);
}
.at-hero__body{
  position:relative;z-index:2;
  /* .at-hero は flex。width:100% が無いとフレックスアイテムが中身の幅に縮み、
     margin-inline:auto で中央寄せになる（他セクションと左端がずれる）。 */
  width:100%;
  padding-block:clamp(48px,8vw,96px);color:#fff;
}
.at-hero__label{
  font-size:12px;letter-spacing:.18em;font-weight:700;
  color:rgba(255,255,255,.82);margin:0 0 18px;
}
.at-hero__h1{
  font-size:clamp(34px,6.4vw,68px);font-weight:700;
  line-height:1.32;letter-spacing:.01em;margin:0;
}
.at-hero__lead{
  max-width:44em;margin:22px 0 0;
  color:rgba(255,255,255,.88);font-size:clamp(14px,1.6vw,17px);
}

/* --- 43 buttons ------------------------------------------------ */
/* ボタンは 404 など body.at の付かないページでも使う共通部品なので、
   .at 配下に閉じてはいけない。以前 .at .at-btn--primary と書いていたため、
   404ページでアンバー背景が効かず、下線付きのただのリンクになっていた。

   詳細度の注意: リンク色は :where(.at) a（0,0,1）で書いてあるので、
   .at-btn--primary（0,1,0）だけで確実に勝つ。.at を前置する必要はない。
   text-decoration:none も .at の外で効かせること（UA既定の下線が出る）。 */
.at-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.at-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:2px;font-weight:700;font-size:15px;
  text-decoration:none;
  transition:transform .25s var(--at-ease),
             background-color .25s var(--at-ease),
             border-color .25s var(--at-ease);
}
.at-btn--primary{background:var(--at-amber);color:#1A1200}
.at-btn--primary:hover{background:#FFC34A;color:#1A1200;transform:translateY(-2px)}
.at-btn--ghost{border:1px solid rgba(255,255,255,.55);color:#fff}
.at-btn--ghost:hover{border-color:#fff;color:#fff;transform:translateY(-2px)}
/* 白地の上に置く枠線ボタン（404 など） */
.at-btn--line{border:1px solid var(--at-line);color:var(--at-ink)}
.at-btn--line:hover{border-color:var(--at-edge);color:var(--at-blue)}
.at-cta--center{justify-content:center}
@media (prefers-reduced-motion:reduce){ .at-btn{transition:none} }
@media (max-width:520px){ .at-btn{flex:1 1 100%} }

/* --- 44 intro -------------------------------------------------- */
.at-intro .at-wrap{display:grid;gap:clamp(32px,5vw,72px);grid-template-columns:1fr}
@media (min-width:860px){
  /* 左が広く右が狭い。均等割りにしない */
  .at-intro .at-wrap{grid-template-columns:1.55fr .85fr;align-items:end}
}
.at-intro__text p.at-lead + p.at-lead{margin-top:18px}
.at-figs{display:grid;gap:28px}
.at-fig__cap{margin:6px 0 0;font-size:13px;color:var(--at-muted);letter-spacing:.04em}
.at-fig--sm .at-num{font-size:clamp(28px,4vw,44px)}

/* --- 45 services ----------------------------------------------- */
.at-svc__main{
  display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr;
  align-items:center;margin-top:clamp(32px,4vw,56px);
}
@media (min-width:860px){
  .at-svc__main{grid-template-columns:1fr 1fr}
  /* 写真枠が無いときは1カラムにする。無いと右半分が丸ごと空く。 */
  .at-svc__main:not(:has(.at-svc__ph)){grid-template-columns:1fr}
  .at-svc__main:not(:has(.at-svc__ph)) .at-lead{max-width:46em}
}
.at-svc__main .at-no{color:var(--at-blue)}
.at-svc__ph{aspect-ratio:4/3}
.at-svc__ph--empty{
  display:grid;place-content:center;gap:6px;justify-items:center;
  border:2px dashed var(--at-edge);color:var(--at-muted);
  font-size:13px;text-align:center;
}
.at-svc__rest{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--at-line)}
.at-svc__item{
  display:grid;gap:4px 22px;padding-block:28px;
  border-bottom:1px solid var(--at-line);
  grid-template-columns:auto 1fr;align-items:baseline;
}
@media (min-width:760px){ .at-svc__item{grid-template-columns:auto 14em 1fr} }
.at-svc__item .at-no{font-size:clamp(20px,2.4vw,26px)}
.at-svc__item h3{font-size:18px}
.at-svc__item p{margin:0;color:var(--at-muted);font-size:14px;grid-column:2/-1}
@media (min-width:760px){ .at-svc__item p{grid-column:auto} }

/* --- 46 works rail --------------------------------------------- */
.at-railwrap{timeline-scope:--at-railx;margin-top:clamp(28px,4vw,48px)}
.at-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,340px);gap:20px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scroll-timeline:--at-railx inline;padding-bottom:4px;scrollbar-width:none;
}
.at-rail::-webkit-scrollbar{display:none}
.at-rail > *{scroll-snap-align:start}
.at-card{display:block;color:inherit}
.at-card:hover h3{color:var(--at-blue-bright)}
.at-card__ph{aspect-ratio:4/3}
.at-card__ph--empty{
  display:grid;place-content:center;justify-items:center;gap:4px;
  border:2px dashed var(--at-edge);color:var(--at-muted);
  font-size:12px;text-align:center;
}
.at-card__cat{
  font-size:12px;letter-spacing:.1em;color:var(--at-muted);
  font-weight:700;margin:16px 0 6px;
}
.at-card h3{font-size:17px;margin:0 0 8px;color:var(--at-ink)}
.at-card p{margin:0;font-size:14px;color:var(--at-muted)}

/* 進捗バー。非対応環境では出さない（中途半端な棒が残るより良い） */
.at-prog{display:none}
@supports (animation-timeline:scroll()) and (timeline-scope:--at-x){
  .at-prog{display:block;height:2px;background:var(--at-line);margin-top:24px}
  .at-prog::before{
    content:"";display:block;height:100%;
    background:var(--at-blue);transform-origin:left;transform:scaleX(0);
  }
  @media (prefers-reduced-motion:no-preference){
    @keyframes at-prog{to{transform:scaleX(1)}}
    .at-prog::before{animation:at-prog linear both;animation-timeline:--at-railx}
  }
}
.at-rail__hint{margin:14px 0 0;font-size:12px;color:var(--at-muted)}
.at-works__more{margin-top:32px}

/* --- 47 consult ----------------------------------------------- */
/* 料金表の代わり。価格は載せず、相談できる内容で判断してもらう。 */
.at-qlist{
  list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;
  border-top:1px solid var(--at-line);
}
.at-q{padding-block:26px;border-bottom:1px solid var(--at-line);display:grid;gap:8px}
@media (min-width:860px){
  .at-q{grid-template-columns:1fr 1fr;gap:8px 48px;align-items:start}
}
.at-q__t{
  margin:0;font-weight:700;font-size:clamp(16px,1.9vw,18px);
  color:var(--at-ink);text-indent:-.6em;padding-left:.6em;
}
.at-q__t::before{content:"「"}
.at-q__t::after{content:"」"}
.at-q__a{margin:0;color:var(--at-muted);font-size:14px}
.at-note{margin:24px 0 0;font-size:13px;color:var(--at-muted)}

/* --- 48 flow --------------------------------------------------- */
.at-flow .at-wrap{display:grid;gap:clamp(28px,4vw,64px)}
@media (min-width:900px){
  .at-flow .at-wrap{grid-template-columns:.8fr 1.2fr;align-items:start}
  .at-flow__head{position:sticky;top:40px}
}
.at-steps{display:grid;gap:0;border-top:1px solid var(--at-line)}
.at-step{
  display:grid;grid-template-columns:auto 1fr;gap:6px 22px;
  padding-block:26px;border-bottom:1px solid var(--at-line);
}
.at-step .at-no{font-size:clamp(18px,2vw,22px);color:var(--at-blue)}
.at-step h3{font-size:17px;margin:0}
.at-step p{margin:0;grid-column:2;font-size:14px;color:var(--at-muted)}

/* --- 49 final cta ---------------------------------------------- */
.at-final{background:var(--at-ink);color:#fff}
.at-final .at-h2{color:#fff}
.at-final .at-lead{color:rgba(255,255,255,.82)}
.at-final .at-label{color:rgba(255,255,255,.66)}