/* ============================================================
   AGS コーポレートサイト 共通スタイル
   ビルド済みの assets/css/tailwind.css と併用。
   Tailwind で書けない・全ページ共通のものだけをここに置く
   ============================================================ */

html { background:#0a0a0a; }
body { font-feature-settings: "palt"; }

/* ---- 見出しの行間（サイト全体を1箇所で調整するための変数）----
   Tailwind の text-5xl 等が line-height を 1 に上書きするため !important が必須 */
:root { --heading-leading: 1.4; }
h1, h2, h3, h4, h5, h6 { line-height: var(--heading-leading) !important; }

/* ---- 箇条書きのぶら下げインデント（「・」の2行目を1行目の文字位置に揃える）---- */
.hang { padding-left: 1em; text-indent: -1em; }

/* ---- キャッチコピー・見出しの文節区切り。折り返しは必ず .seg の切れ目で起きる ---- */
.seg { display:inline-block; }

/* ---- 実績ストリーム（トップFV直下）----
   実績チップ（16:9サムネ＋ID・カテゴリ・日付）を流す。
   トラックは同一グループ2つで構成し、-50%移動でシームレスにループ */
@keyframes marquee { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.ws{ position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.ws::before{ content:""; position:absolute; left:0; right:0; top:50%; border-top:1px dashed rgba(255,255,255,.12); }
.ws-track{ display:flex; width:max-content; animation: marquee 60s linear infinite; }
.ws:hover .ws-track{ animation-play-state:paused; }
/* 数秒おきに帯を横切る走査光。モノトーンに合わせてごく薄い白 */
.ws-glare{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 45%,rgba(255,255,255,.10) 50%,transparent 55%);
  background-size:320% 100%; animation: ws-glare 7s linear infinite; }
@keyframes ws-glare{ from{ background-position:130% 0;} to{ background-position:-30% 0;} }
/* HUD風チップ。コーナーブラケットで計器感を出す */
.wchip{ position:relative; display:flex; flex-direction:column; width:176px; margin-right:16px; flex-shrink:0;
  background:rgba(14,14,14,.92); border:1px solid rgba(255,255,255,.14); transition:border-color .3s; }
@media (min-width:768px){ .wchip{ width:200px; margin-right:20px; } }
.wchip::before,.wchip::after{ content:""; position:absolute; width:10px; height:10px;
  border:1px solid rgba(56,189,248,.85); opacity:.7; transition:opacity .3s; pointer-events:none; }
.wchip::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.wchip::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.wchip:hover{ border-color:rgba(255,255,255,.55); }
.wchip:hover::before,.wchip:hover::after{ opacity:1; }
.wchip img{ transition:transform .5s; }
.wchip:hover img{ transform:scale(1.04); }
.wchip:hover .wchip-arrow{ transform:translateX(3px); }
.wchip-arrow{ transition:transform .3s; }
@media (prefers-reduced-motion: reduce){ .ws-track,.ws-glare{ animation:none; } }

/* ---- スクロール出現 ---- */
.reveal{ opacity:0; transform:translateY(28px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.08s } .reveal-d2{ transition-delay:.16s } .reveal-d3{ transition-delay:.24s }

/* ---- ヒーロー（トップ）---- */
@keyframes scrollline { 0%{ transform:scaleY(0); transform-origin:top;} 45%{ transform:scaleY(1); transform-origin:top;} 55%{ transform:scaleY(1); transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }
.scroll-line{ animation: scrollline 2.2s ease-in-out infinite; }

/* キャッチコピーの切り替え: 文字が1文字ずつバラバラのタイミングで
   X軸方向だけに流れて消える（風で横に掃かれるイメージ）。
   退場は加速カーブ＋ぼかしで「シュッ」と抜け、入場は減速カーブで静かに置かれる */
.ch{ display:inline-block;
  transition: transform .36s cubic-bezier(.16,1,.3,1), opacity .36s ease, filter .36s ease; }
/* 全角句読点（、。）の後ろ半分の空きを詰める。フォントに palt が無いため手動で詰める。
   静的HTML側は <span class="pn">、</span>、JS分解後は .ch に .pn を併用 */
.pn{ margin-right:-.4em; }

/* タッチ端末ではドラッグ操作を提供しない（fv3d.js側でも無効化）ため、ヒントも出さない */
@media (hover: none){ #dragHint{ display:none; } }
/* 退場は短時間・長距離＋横方向に引き伸ばして、疾走の残像感を出す */
.ch-out{ transform: translateX(var(--dx,260px)) scaleX(1.7); opacity:0; filter: blur(7px);
  transition: transform .26s cubic-bezier(.55,0,1,.45), opacity .26s ease, filter .26s ease; }
.ch-in{ transform: translateX(-48px); opacity:0; filter: blur(5px); transition:none; }

/* ---- ヘッダー ---- */
#header{ transition: background-color .4s, border-color .4s, backdrop-filter .4s; border-bottom:1px solid transparent; }
#header.scrolled{ background:rgba(10,10,10,.85); backdrop-filter: blur(10px); border-color: rgba(255,255,255,.1); }

/* ---- サービス行（一覧のリスト表示）---- */
.svc-row{ transition: background .45s cubic-bezier(.22,1,.36,1), color .45s; }
.svc-row:hover{ background:#0a0a0a; color:#fff; }
.svc-row:hover .svc-en{ color:rgba(255,255,255,.4); }
.svc-row:hover .svc-num{ color:rgba(255,255,255,.35); }
.svc-row:hover .svc-arrow{ transform: translateX(8px); }
.svc-arrow{ transition: transform .45s cubic-bezier(.22,1,.36,1); }

/* ---- 実績カード（写真は常時カラー。ホバーは拡大のみ）---- */
.work-card img{ transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.work-card:hover img{ transform:scale(1.06); }

/* ---- 縦書き ---- */
.v-rl{ writing-mode: vertical-rl; }

/* ---- 実績一覧のカテゴリ絞り込みボタン ---- */
#worksFilter .is-active{ background:#fff; color:#0a0a0a; border-color:#fff; }

/* ドラッグヒント（FV）の回転アイコン用 */
@keyframes spin { to { transform: rotate(360deg); } }

/* ドラッグヒントの明滅 */
@keyframes hintPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ============================================================
   WordPress側で出力される本文まわり
   （ブログ記事・実績の本文など、管理画面から書かれる内容の体裁）
   ============================================================ */

/* 暗い背景の上に出る本文 */
.ags-prose > p{ margin-top:1.6em; font-size:15px; line-height:2.1; color:rgba(255,255,255,.75); }
.ags-prose > h2{ margin-top:2.4em; font-family:"Shippori Mincho B1",serif; font-size:22px; }
.ags-prose > h3{ margin-top:2em; font-size:17px; font-weight:700; }
.ags-prose > ul,.ags-prose > ol{ margin-top:1.4em; padding-left:1.4em; color:rgba(255,255,255,.75); }
.ags-prose > ul{ list-style:disc; } .ags-prose > ol{ list-style:decimal; }
.ags-prose li{ margin-top:.6em; font-size:15px; line-height:2; }
.ags-prose a{ text-decoration:underline; text-underline-offset:3px; }
.ags-prose img{ margin-top:2em; height:auto; max-width:100%; }
.ags-prose blockquote{ margin-top:2em; padding:1.2em 1.4em; border-left:2px solid rgba(255,255,255,.25); color:rgba(255,255,255,.6); }
.ags-prose table{ margin-top:2em; width:100%; border-collapse:collapse; font-size:14px; }
.ags-prose th,.ags-prose td{ border:1px solid rgba(255,255,255,.14); padding:.8em 1em; text-align:left; }

/* 明るい背景（bg-paper）の上に出る本文。色だけ差し替える */
.ags-prose-light > p,.ags-prose-light > ul,.ags-prose-light > ol{ color:rgba(10,10,10,.75); }
.ags-prose-light blockquote{ border-left-color:rgba(10,10,10,.25); color:rgba(10,10,10,.6); }
.ags-prose-light th,.ags-prose-light td{ border-color:rgba(10,10,10,.14); }

/* 本文内の画像（wp:image）とキャプション */
.ags-prose figure{ margin-top:2em; }
.ags-prose figure img{ margin-top:0; }
.ags-prose figcaption{ margin-top:.6em; font-size:12px; color:rgba(10,10,10,.5); }

/* ブログ記事本文のセクション見出し（.ags-prose-post は single.php のみ）。
   h2を「セクションの切り替わり」として見せる: 上の区切り線＋左端の白いノッチ＋
   SECTION 01 の連番ラベル＋大きめの明朝。実績詳細など他のproseには効かせない */
.ags-prose-post{ counter-reset: ags-sec; }
.ags-prose-post > h2{
  counter-increment: ags-sec;
  position:relative; margin-top:4em; padding-top:2em;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:25px; line-height:1.5; letter-spacing:.02em; font-feature-settings:'palt';
}
@media (min-width:768px){ .ags-prose-post > h2{ font-size:29px; } }
.ags-prose-post > h2::before{
  content:"Section " counter(ags-sec, decimal-leading-zero);
  display:block; margin-bottom:1.1em;
  font-family:"Instrument Sans",sans-serif; font-size:10px; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase; color:rgba(126,200,247,.75);
}
.ags-prose-post > h2::after{
  content:""; position:absolute; top:-1px; left:0; width:56px; height:2px;
  background:linear-gradient(90deg,#1d4ed8,#38bdf8);
  box-shadow:0 0 14px rgba(56,189,248,.45);
}
.ags-prose-post > h3{
  font-size:17px; padding-left:.8em; border-left:2px solid #38bdf8;
  border-image:linear-gradient(180deg,#38bdf8,#1d4ed8) 1;
}
/* 本文リンクもコーポレートブルー系に（記事のみ。ツールカードのボタンは除く） */
.ags-prose-post a{ color:rgba(147,197,253,.92); text-decoration-color:rgba(56,189,248,.5); transition:color .3s; }
.ags-prose-post a:hover{ color:#fff; }
.ags-prose-post .ags-tool-box-btn{ color:#0a0a0a; }
.ags-prose-post .ags-tool-box-btn:hover{ background:transparent; color:#fff; }

/* ブログ記事ヒーロー用のブルーアクセント（本文h2のノッチ・ラベルと同じ意匠） */
.ags-hero-notch{ display:block; width:56px; height:2px;
  background:linear-gradient(90deg,#1d4ed8,#38bdf8); box-shadow:0 0 14px rgba(56,189,248,.45); }
.ags-blue-label{ color:rgba(126,200,247,.75) !important; }
.ags-blue-dim{ color:rgba(126,200,247,.55) !important; }
/* 明るい背景（bg-paper）用は濃いブルーで（薄い水色だと白地で読めないため） */
.ags-blue-label-ink{ color:rgba(29,78,216,.85) !important; }

/* HUDコーナー（左上・右下のブルーの角マーク。カード・枠の共通あしらい） */
.hud-corner{ position:relative; }
.hud-corner::before,.hud-corner::after{ content:""; position:absolute; width:12px; height:12px; z-index:2;
  border:1px solid rgba(56,189,248,.85); opacity:.75; transition:opacity .3s; pointer-events:none; }
.hud-corner::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.hud-corner::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.hud-corner:hover::before,.hud-corner:hover::after{ opacity:1; }

/* 記事本文中のツール紹介カード（ショートコード [ags_tool]。inc/tools.php）。ダーク本文用 */
.ags-tool-box{ position:relative; margin-top:2.4em; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.03); padding:1.8em 2em 2em; }
.ags-tool-box::before,.ags-tool-box::after{ content:""; position:absolute; width:12px; height:12px;
  border:1px solid rgba(56,189,248,.85); pointer-events:none; }
.ags-tool-box::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.ags-tool-box::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.ags-tool-box-label{ font-family:"Instrument Sans",sans-serif; font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:rgba(126,200,247,.7); }
.ags-tool-box-name{ margin-top:.7em; font-family:"Shippori Mincho B1",serif; font-size:19px; line-height:1.5; color:#fff; }
.ags-tool-box-desc{ margin-top:.7em; font-size:13px; line-height:1.9; color:rgba(255,255,255,.6); }
.ags-tool-box-btn{ display:inline-block; margin-top:1.3em; border:1px solid #fff; background:#fff; color:#0a0a0a;
  padding:.85em 1.6em; font-family:"Instrument Sans",sans-serif; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none !important; transition:background .3s,color .3s; }
.ags-tool-box-btn:hover{ background:transparent; color:#fff; }

/* ブログ記事の目次（inc/blog.php が自動挿入）。ダーク本文用 */
.ags-toc{ position:relative; margin-top:2.4em; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); padding:1.4em 1.6em 1.6em; }
.ags-toc::before{ content:""; position:absolute; top:-1px; left:-1px; width:56px; height:2px;
  background:linear-gradient(90deg,#1d4ed8,#38bdf8); }
.ags-toc-label{ font-family:"Instrument Sans",sans-serif; font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:rgba(126,200,247,.7); }
.ags-toc ol{ margin-top:.8em; padding-left:1.4em; list-style:decimal; color:rgba(255,255,255,.5); }
.ags-toc li{ margin-top:.5em; font-size:14px; line-height:1.8; }
.ags-toc li::marker{ color:rgba(56,189,248,.65); }
.ags-toc a{ color:rgba(255,255,255,.8); }
.ags-toc a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* 箇条書き（フォームのエラー表示など） */
.ags-list li{ padding-left:1em; text-indent:-1em; }

/* ページ送り */
.ags-page a,.ags-page span{ display:inline-block; border:1px solid rgba(255,255,255,.3); padding:.7em 1.1em; color:rgba(255,255,255,.75); transition:border-color .3s,color .3s; }
.ags-page a:hover{ border-color:#fff; color:#fff; }
.ags-page .current{ background:#fff; border-color:#fff; color:#0a0a0a; }
.ags-page-light a,.ags-page-light span{ border-color:rgba(10,10,10,.25); color:rgba(10,10,10,.7); }
.ags-page-light a:hover{ border-color:#0a0a0a; color:#0a0a0a; }
.ags-page-light .current{ background:#0a0a0a; border-color:#0a0a0a; color:#fff; }

/* 管理バーが出ている時に固定ヘッダーが隠れないようにする */
body.admin-bar #header{ top:32px; }
@media screen and (max-width:782px){ body.admin-bar #header{ top:46px; } }