/* ============================================================
   ADISIGN 新サイト デザインモックアップ共通スタイル
   カラー: 黒 #111111 ／ 白 ／ ブランドイエロー #ffe100（ロゴ由来）
   ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}

/* ---- 箇条書き（ぶら下げインデント） ----
   行頭は「・＋半角スペース」。1.22em ＝ Noto Sans JP での「・ 」の実測幅 */
.list-hang li {
  padding-left: 1.22em;
  text-indent: -1.22em;
}

/* ---- 見積りオプション行の選択中ハイライト（グレー地＋左端の黄ライン） ---- */
.opt-selected {
  background: #f5f5f2;
  box-shadow: inset 3px 0 0 #ffe100;
}

/* ---- セクションラベル（英字 + イエローの星型アクセント） ---- */
.sec-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
}

.sec-label::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #ffe100;
  clip-path: polygon(0 0, 100% 35%, 35% 100%);
  /* ロゴの矢羽根を模した三角形 */
}

/* ---- 見出し下のイエローマーカー ---- */
.marker-y {
  background: linear-gradient(transparent 68%, #ffe100 68%, #ffe100 94%, transparent 94%);
}

/* 黒背景上のマーカー（下線タイプ） */
.marker-y-dark {
  background: linear-gradient(transparent 82%, #ffe100 82%);
}

/* ---- スクロールリビール ---- */
.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.rv.is-in {
  opacity: 1;
  transform: none;
}

.rv-d1 { transition-delay: 0.08s; }
.rv-d2 { transition-delay: 0.16s; }
.rv-d3 { transition-delay: 0.24s; }
.rv-d4 { transition-delay: 0.32s; }
.rv-d5 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ---- 実績サムネイル（現行サイトの .thumb-archive を踏襲） ----
   1実績＝縦長キャプチャ3枚。各サムネにカーソルを乗せると
   background-position が top → bottom へ1秒で動く */
.thumb-work {
  position: relative;
  display: block;
  background-color: #101010;
  background-size: cover;
  background-position: top center;
  transition: background-position 1s;
}

.thumb-work::before {
  display: block;
  content: "";
  padding-top: 150%;
}

.thumb-work:hover {
  background-position: bottom center;
}

/* サイトのブラウザ風サムネイル（横長・リンク内で使用。ホバーで下までパン） */
.thumb-site {
  position: relative;
  display: block;
  background-color: #101010;
  background-size: cover;
  background-position: top center;
  transition: background-position 1.6s;
}

.thumb-site::before {
  display: block;
  content: "";
  padding-top: 62%;
}

.site-thumb:hover .thumb-site {
  background-position: bottom center;
}

/* サービスカード上部の実キャプチャ（16:9・カードホバーで下までパン） */
.thumb-svc {
  position: relative;
  display: block;
  background-color: #101010;
  background-size: cover;
  background-position: top center;
  transition: background-position 1.6s;
}

.thumb-svc::before {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.group:hover .thumb-svc {
  background-position: bottom center;
}

/* ---- 画像がまだ無い枠のプレースホルダー ----
   薄い斜線だと未完成に見えるため、黒地＋星の透かしの
   「ブランドプレート」にして、黒セクションと世界観を揃える */
.ph-diag {
  position: relative;
  overflow: hidden;
  background: #161616;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ph-diag::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(favicon.svg) center / 42% no-repeat;
  opacity: 0.16;
}

.ph-diag span {
  position: relative;
  font-family: "Archivo", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: #6b6b6b;
}

/* ---- 白・グレーセクションの締め ---- */

/* グレー地セクションには微細なドットグリッドを敷く */
section.bg-mist {
  background-image: radial-gradient(rgba(17, 17, 17, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ---- リンクカードのホバー ----
   浮き上がり・ベタ塗り影は使わない（コミカルに見えるため）。
   カードは動かさず、下辺を細いイエローの線が左から走るだけにする */
.hov-line {
  position: relative;
  transition: border-color 0.35s ease;
}

.hov-line::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 2px;
  background: #ffe100;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.hov-line:hover::after {
  transform: scaleX(1);
}

/* イエローのコーナーブラケット（黒セクションのHUDカードと同じ言語） */
.corner-y::before,
.corner-y::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #ffe100;
  pointer-events: none;
}

.corner-y::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.corner-y::after {
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
}

/* ---- FAQ アコーディオン ---- */
.acc summary {
  cursor: pointer;
  list-style: none;
}

.acc summary::-webkit-details-marker {
  display: none;
}

.acc-icon {
  position: relative;
  width: 14px;
  height: 14px;
}

.acc-icon::before,
.acc-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: #111;
  transition: transform 0.25s ease;
}

.acc-icon::before { width: 14px; height: 2px; }
.acc-icon::after  { width: 2px;  height: 14px; }

.acc[open] .acc-icon::after {
  transform: rotate(90deg);
}

/* ---- キャッチコピー ----
   Tailwind の text-6xl が line-height:1 を持ち、md以上で leading-* クラスを
   打ち消してしまうため、IDセレクタで確実に行間を確保する */
#hero-copy {
  line-height: 1.3;
}

/* ---- キャッチコピーのグリッチ切り替え ----
   文字化け中はRGBずれ＋小刻みな揺れを乗せる（配色はブランドのイエロー×白） */
.glitching {
  animation: glitch-shake 0.15s steps(2, jump-none) infinite;
  text-shadow: 9px 2px rgba(255, 225, 0, 0.85), -9px -2px rgba(255, 255, 255, 0.6);
}

@keyframes glitch-shake {
  0%   { transform: translate(0, 0) skewX(0) scaleY(1); }
  20%  { transform: translate(-6px, 3px) skewX(-8deg) scaleY(1.03); }
  40%  { transform: translate(5px, -3px) skewX(6deg) scaleY(0.96); }
  60%  { transform: translate(-4px, 2px) skewX(-5deg) scaleY(1.01); }
  80%  { transform: translate(6px, -2px) skewX(7deg) scaleY(1.04); }
  100% { transform: translate(0, 0) skewX(0) scaleY(1); }
}

/* ---- ヒーローの制作実績ストリーム ----
   生のサムネイルを流すのではなく、HUD風の情報カード
   （型番・種別・コーナーブラケット・走査光）に組んで流す。
   アニメーションはCSSのみ。トラックは同一グループ2つで構成し、
   -50% 移動した瞬間に先頭へ戻ることで継ぎ目なく流れる */
.wstream {
  position: relative;
  overflow: hidden;
  transform: rotate(-2deg) scale(1.04);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  padding: 14px 0;
}

/* カードの背後に走るデータトラック（破線のベースライン） */
.wstream::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
}

.wstream-track {
  display: flex;
  width: max-content;
  animation: wstream-flow 48s linear infinite;
}

.wstream:hover .wstream-track {
  animation-play-state: paused;
}

@keyframes wstream-flow {
  to { transform: translateX(-50%); }
}

/* 数秒おきに帯全体を横切る走査光 */
.wstream-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 44%, rgba(255, 225, 0, 0.12) 50%, transparent 56%);
  background-size: 320% 100%;
  animation: wstream-glare 6.5s linear infinite;
}

@keyframes wstream-glare {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

/* ---- HUD風カード ---- */
.wcard {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 176px;
  margin-right: 18px;
  flex-shrink: 0;
  background: rgba(17, 17, 17, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: border-color 0.3s ease;
}

@media (min-width: 768px) {
  .wcard { width: 208px; }
}

/* コーナーブラケット（左上・右下） */
.wcard::before,
.wcard::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #ffe100;
  opacity: 0.55;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.wcard::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.wcard::after {
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
}

.wcard:hover {
  border-color: rgba(255, 225, 0, 0.6);
}

.wcard:hover::before,
.wcard:hover::after {
  opacity: 1;
}

.wcard-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 9px;
  font-family: "Archivo", sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #8a8a8a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wcard-type {
  color: #ffe100;
  border: 1px solid rgba(255, 225, 0, 0.45);
  padding: 1px 6px;
}

.wcard-shot {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.wcard-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(0.3) contrast(1.05);
  transition: filter 0.4s ease, transform 0.4s ease;
}

.wcard:hover .wcard-shot img {
  filter: none;
  transform: scale(1.04);
}

.wcard-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 9px;
  font-size: 10px;
  font-weight: 700;
  color: #ddd;
}

.wcard-arrow {
  color: #ffe100;
  transition: transform 0.3s ease;
}

.wcard:hover .wcard-arrow {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .wstream-track,
  .wstream-glare {
    animation: none;
  }
}

/* ---- モバイルメニュー ---- */
#mobile-menu {
  transition: opacity 0.3s ease;
}

#mobile-menu.hidden-menu {
  opacity: 0;
  pointer-events: none;
}

/* ---- ヘッダーのスクロール状態 ---- */
#site-header.is-scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ---- グローバルナビのメガメニュー（サービス） ----
   ホバーとキーボードフォーカスで開く。トリガーをヘッダー全高にして
   パネルとの間に隙間を作らない（隙間があるとホバーが途切れて閉じる） */
.nav-panel {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.nav-drop:hover .nav-panel,
.nav-drop:focus-within .nav-panel {
  opacity: 1;
  visibility: visible;
}

.nav-caret,
.mnav-caret {
  transition: transform 0.25s ease;
}

.nav-drop:hover .nav-caret {
  transform: rotate(180deg);
}

/* ---- モバイルメニューのサービスアコーディオン ---- */
.mnav-acc summary {
  cursor: pointer;
  list-style: none;
}

.mnav-acc summary::-webkit-details-marker {
  display: none;
}

.mnav-acc[open] .mnav-caret {
  transform: rotate(180deg);
}

/* ---- 実績詳細「制作の内容」（移行した本文HTML。段落・箇条書き・区切り線に余白を定義） ---- */
.work-body p,
.work-body ul,
.work-body ol {
  font-size: 0.875rem;
  line-height: 2;
  color: #4b5563;
}
.work-body p + p,
.work-body p + ul,
.work-body ul + p,
.work-body p + ol,
.work-body ol + p {
  margin-top: 1.5em;
}
.work-body ul,
.work-body ol {
  padding-left: 1.4em;
}
.work-body ul { list-style: disc; }
.work-body ol { list-style: decimal; }
.work-body h2,
.work-body h3,
.work-body h4 {
  margin-top: 2.5em;
  margin-bottom: 1em;
  font-weight: 900;
  font-size: 1.05rem;
  border-left: 3px solid #ffe100;
  padding-left: 0.8em;
}
.work-body a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.work-body img,
.work-body figure {
  max-width: 100%;
  margin: 2em 0;
}
.work-body hr {
  border: 0;
  border-top: 1px solid #e6e6e2;
  margin: 3em 0;
}

/* ---- 画像がまだ無い枠：公開時はラベル文字を出さない（黒地の星プレートのまま） ---- */
body:not(.is-review) .ph-diag span {
  display: none;
}

/* ============================================================
   ブログ記事本文（WordPress のエディタから出得る全要素の余白を定義）
   対象: h2〜h4・p・ul/ol・table・img/figure・blockquote・hr
   ============================================================ */
.post-body {
  font-size: 0.9375rem;
  line-height: 2.1;
  color: #374151;
}
.post-body > * + * { margin-top: 1.5em; }
.post-body h2 {
  margin-top: 3em;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.5;
  color: #111111;
  border-left: 4px solid #ffe100;
  padding-left: 0.8em;
}
.post-body h3 {
  margin-top: 2.4em;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.6;
  color: #111111;
}
.post-body h4 {
  margin-top: 2em;
  font-size: 1rem;
  font-weight: 700;
  color: #111111;
}
.post-body h2 + *, .post-body h3 + *, .post-body h4 + * { margin-top: 1em; }
.post-body ul, .post-body ol { padding-left: 1.5em; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li + li { margin-top: 0.4em; }
/* 箇条書きの「ラベル: 説明文」はラベルのあとで改行する（post_blog.py が出力） */
.post-body li .list-label { display: block; }
.post-body li .list-desc { display: block; margin-top: 0.2em; }
.post-body li:has(.list-label) + li { margin-top: 0.9em; }
.post-body a { text-decoration: underline; text-underline-offset: 4px; }
.post-body a:hover { opacity: 0.6; }
.post-body strong { font-weight: 700; color: #111111; }
/* 各セクションで一番重要な1か所（原稿の ==〜==）。太字＋イエローの太い下線 */
.post-body strong.key-point u { text-decoration-line: underline; text-decoration-color: #ffe100; text-decoration-thickness: 0.38em; text-underline-offset: -0.12em; text-decoration-skip-ink: none; }
.post-body img, .post-body figure { max-width: 100%; height: auto; margin-top: 2em; margin-bottom: 2em; }
.post-body figcaption { margin-top: 0.6em; font-size: 0.75rem; color: #6b7280; }
.post-body blockquote {
  margin-top: 2em;
  margin-bottom: 2em;
  padding: 1.2em 1.5em;
  border-left: 3px solid #e6e6e2;
  background: #f5f5f2;
  color: #4b5563;
}
.post-body table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.post-body th, .post-body td { border: 1px solid #e6e6e2; padding: 0.7em 0.9em; text-align: left; vertical-align: top; }
.post-body th { background: #f5f5f2; font-weight: 700; }
.post-body hr { margin-top: 3em; margin-bottom: 3em; border: 0; border-top: 1px solid #e6e6e2; }
.post-body pre { overflow-x: auto; padding: 1em 1.2em; background: #111111; color: #f5f5f2; font-size: 0.8125rem; line-height: 1.7; }
.post-body code { font-size: 0.9em; }
.post-body .wp-block-image, .post-body .wp-block-table { margin-top: 2em; margin-bottom: 2em; }

/* 記事の目次（inc/blog.php が h2 3つ以上の記事に自動挿入） */
.post-body .post-toc { margin-top: 2em; margin-bottom: 2.5em; padding: 1.4em 1.6em; border: 1px solid #e6e6e2; background: #f5f5f2; }
.post-body .post-toc-label { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; color: #6b7280; }
.post-body .post-toc ol { margin-top: 0.8em; padding-left: 1.4em; list-style: decimal; font-size: 0.875rem; line-height: 1.8; }
.post-body .post-toc li + li { margin-top: 0.3em; }
.post-body .post-toc a { color: #111111; text-decoration: none; }
.post-body .post-toc a:hover { text-decoration: underline; opacity: 1; }