/*
Theme Name: ASOVIVA
Theme URI: https://asoviva.co.jp
Author: ASOVIVA Inc.
Description: ASOVIVA オリジナルWordPressテーマ
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: asoviva
*/

/* ── .vb 外側の帯を .vb と同色にして境目を消す ──────────────
   ヒーローは全幅・.vb は1920中央のため、両サイドに出る帯が
   ブラウザ標準の白(#fff)で透け、#fcfcfd の .vb との境目に見えていた。
   body を .vb と同じ #fcfcfd にして継ぎ目をなくす。            */
html,
body {
  background: #fcfcfd;
}

/* ── Windows等の予約型スクロールバー対策 ──────────────────────
   .vb-hero / .vb-pagehead / .vb-why2 / .vb-contact のフルブリード
   (100vw / 50vw 計算) は、縦スクロールバーが幅を取るブラウザ
   （Windows Chrome/Edge等）だと、その分だけ右にはみ出し横スクロール
   が発生する。Macのオーバーレイ型スクロールバーでは幅を取らない
   ため再現しなかった。html側で横スクロールを封じて安全にする。 */
html {
  overflow-x: hidden;
}

/* ── コンテンツ幅：1440px（ヒーロー・ページヘッドは除外） ─── */
.vb-sec,
.vb-prof,
.vb-consult-panel,
.vb-footer,
.art-wrap {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* ── REASON / CONTACT：背景は画面全幅、コンテンツは他セクションと同じ位置 ──
   全幅に突き抜けさせつつ、左右パディングで中身を1440px相当の位置に保つ。   */
.vb-why2,
.vb-contact {
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
@media (min-width: 921px) {
  .vb-why2,
  .vb-contact {
    padding-left: max(100px, calc(50vw - 620px));
    padding-right: max(100px, calc(50vw - 620px));
  }
}

/* ── スクロールリビール (.rv → .rv-in) ──────────────────────── */
@keyframes rv-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rv {
  opacity: 0;
}
.rv.rv-in {
  animation: rv-fade-up 0.7s ease both;
  /* animation-delay は reveal.js が inline style で注入する */
}

/* ── タイプライターアニメーション (.lr-line) ─────────────────── */
.lr-line {
  display: block;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.lr-line.lr-in {
  opacity: 1;
  transform: translateX(0);
}

/* ── ヒーロー・下層ページビジュアル：画面幅いっぱい（フルブリード） ──
   .vb は max-width 1920 だが、ビジュアルだけは負マージンで
   ビューポート全幅まで突き抜ける。left/position を使わず margin のみで
   計算するため、スクロールバー幅によるズレが起きない。            */
.vb-hero,
.vb-pagehead {
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ── トップページヒーロー：デスクトップは画面高さいっぱい（100vh） ──
   モバイル（<=920px）は responsive.css の 88vh を維持するため min-width で限定 */
@media (min-width: 921px) {
  .vb-hero { height: 100vh; }
}

/* ── 下層ページ pagehead の中身をヘッダー(1920px枠)に揃える ──
   pagehead は全幅(100vw)だが、見出しブロックの左端をロゴ左端に、
   パンくずの右端をナビ右端に合わせる。ヘッダーは .vb(1920中央)+padding100。*/
@media (min-width: 921px) {
  .vb-pagehead-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
  }
  .vb-crumb {
    right: max(100px, calc((100vw - 1920px) / 2 + 100px));
  }
}

/* ── Contact Form 7 スタイル上書き ──────────────────────── */
.wpcf7 form { display: flex; flex-direction: column; gap: 28px; }
.wpcf7 p { margin: 0; }
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: 12px; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%; border: 0; border-bottom: 1px solid var(--asv-line-dark);
  background: transparent; padding: 14px 2px; font-size: 14px; color: var(--asv-ink);
  font-family: var(--asv-ja); letter-spacing: 0.06em; outline: none;
  transition: border-color 0.3s; box-sizing: border-box;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus { border-color: var(--asv-navy); }
.wpcf7 textarea { resize: vertical; min-height: 130px; line-height: 2; }
.wpcf7 input[type="submit"] {
  position: relative; overflow: hidden; margin-top: 12px;
  width: 250px; height: 64px;
  background: var(--asv-navy-deep); color: #fff; border: 1px solid var(--asv-navy-deep);
  font-family: var(--asv-en); font-size: 14px; letter-spacing: 0.24em; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.45s ease;
}
.wpcf7 input[type="submit"]:hover { background: #fff; color: var(--asv-navy-deep); }
.wpcf7-not-valid-tip { font-size: 11px; color: #c00; margin-top: 4px; display: block; }
.wpcf7-response-output { margin-top: 24px; padding: 12px 16px; font-size: 13px; border: 1px solid var(--asv-line-dark); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--asv-navy); color: var(--asv-navy); }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output { border-color: #c00; color: #c00; }
/* ラベル非表示（CF7デフォルトラベルを使わずplaceholderで代用） */
.wpcf7 label { display: none; }

/* ── ヘッダー追従帯：ロゴ・ナビを通常ヘッダー(1920px枠)に揃える ──
   --stuck は全幅fixedのため、内側の余白を .vb(1920中央)+100px に合わせて
   ロゴ左端・ナビ右端が通常ヘッダーと同じ位置になるようにする。背景は全幅のまま。*/
@media (min-width: 921px) {
  .vb-header--stuck {
    padding-left: max(100px, calc(50vw - 860px));
    padding-right: max(100px, calc(50vw - 860px));
  }
}

/* ── モバイルメニュー：バツボタンを最前面に固定 ──────────── */
@media (max-width: 920px) {
  .vb-header.nav-open {
    z-index: 200;
  }
  .vb-header.nav-open .vb-burger {
    position: fixed;
    top: 18px;
    right: 22px;
    z-index: 210;
  }
}

/* ── お問い合わせフォーム：2番目以降のフィールドに+15px ──── */
.ct-form .ct-field:not(:first-child) {
  margin-top: 15px;
}

/* ── OUR APPROACH 本文：行末の孤立文字防止 ──────────────── */
.vb-phil-body .txt p {
  text-wrap: pretty;
}

/* ── SEND MESSAGE ボタン幅 ──────────────────────────────── */
.ct-submit {
  width: 250px;
}

/* ── reCAPTCHA バッジ非表示 ＋ 規約遵守の代替文言 ──────────
   バッジを隠す場合、Google規約により代替文言の掲示が必須。      */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-note {
  margin-top: 22px;
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--asv-ink-faint);
}
.recaptcha-note a {
  color: var(--asv-ink-soft);
  text-decoration: underline;
}
.recaptcha-note a:hover { color: var(--asv-navy); }

/* ── 実績詳細：一覧へ戻るボタン ──────────────────────────── */
.wd-back {
  margin-top: 130px;
  border-top: 1px solid var(--asv-line);
  padding-top: 48px;
}
.wd-back + .wd-next {
  margin-top: 0;
  border-top: 0;
}
.wd-back a {
  font-family: var(--asv-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--asv-ink);
  text-decoration: none;
}
.wd-back a:hover { color: var(--asv-navy); }

/* ── 実績一覧カード：カテゴリ・タイトルの行間を詰める ────────── */
.wkg .cat {
  display: inline-block;
  line-height: 1.5;
}
.wkg .nm {
  line-height: 1.5;
}

/* ── トップページ WORKS：PC 3×3(9件) / SP 2×4(8件) ────────── */
@media (max-width: 920px) {
  a.vb-wk.vb-wk-sp-hide { display: none !important; }
}

/* ── WORKS / JOURNAL カードのリンク化 ───────────────────── */
a.vb-wk,
a.vb-journal-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s ease;
}
a.vb-wk:hover,
a.vb-journal-card:hover { opacity: 0.72; }
a.vb-wk:hover .nm,
a.vb-journal-card:hover h4 { color: var(--asv-navy); }

/* コラム一覧ページ：特集カード＆グリッドカードの画像も白銀比(1.414:1)で統一 */
.jl-feature .visual,
.jlc .visual {
  overflow: hidden;
  height: auto;
  aspect-ratio: 1.414 / 1;
}
.jl-feature .visual .ph,
.jlc .visual .ph {
  height: 100%;
}
.jl-feature .visual img,
.jlc .visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* JOURNAL カード画像：実績と同じホバーズーム＋白銀比(1.414:1)で統一 */
.vb-journal-card .ph {
  overflow: hidden;
  height: auto;
  aspect-ratio: 1.414 / 1;
}
.vb-journal-card .ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center;
}
.vb-journal-card:hover .ph img { transform: scale(1.1); }

/* ── ジャーナル特集カード：メタ枠の左に縦線を追加 ────────────── */
.jl-feature .meta {
  border-left: 1px solid var(--asv-line);
}

/* ── 記事pageheadのタイトル（動画上に表示）──────────────────── */
.art-ph-title {
  font-family: var(--asv-ja);
  font-size: 34px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: #fff;
  margin: 0;
  max-width: 900px;
}
.art-ph-sep { margin: 0 12px; opacity: 0.5; }
@media (max-width: 920px) {
  .art-ph-title { font-size: 22px; }
}

/* ── 記事本文の文字間（カーニング50 = 0.05em）──────────────── */
.art-body,
.art-body p {
  letter-spacing: 0.05em;
}

/* ── 本文中に挿入した画像の最大幅を720pxに（狭い画面では100%優先）─ */
.wd-body img,
.art-body img {
  max-width: min(720px, 100%);
  height: auto;
}

/* ── 本文中のYouTube等埋め込み動画をレスポンシブ対応 ─────────
   固定width/heightのiframeが画面幅を超えないよう、16:9の比率を
   保ったまま親要素の幅いっぱいに収める。                     */
.wd-body iframe,
.art-body iframe {
  max-width: 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}
/* .wd-body は display:grid のため、大きい画像/iframeを含む子要素が
   デフォルトの min-width:auto でグリッド列を押し広げてしまう
   （いわゆる grid blowout）。min-width:0 で列幅に収まるようにする。 */
.wd-body > * {
  min-width: 0;
}

/* ── サムネイル画像のアスペクト比を保持 ────────────────────── */
.wk-thumb,
.jl-feat-img,
.jlc-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── WORKS カード画像を白銀比(横1.414:縦1)で統一し段差をなくす ── */
.vb-wk .visual,
.wkg .visual {
  aspect-ratio: 1.414 / 1;
}
.vb-wk .visual > *,
.wkg .visual > * {
  width: 100% !important;
  height: 100% !important;
}
.vb-wk .visual img,
.wkg .visual img {
  object-fit: cover;
  display: block;
}