/*
Theme Name: ご縁綴り GOEN STORY
Theme URI: https://aoki-group.co.jp/
Author: あおきグループ株式会社
Description: 神社・お寺で執り行う結婚式（神前式・仏前式）のランディングページ用テーマ。「ご縁綴り デザインシステム」をそのまま使っています。写真・文章・金額は「外観 → カスタマイズ → ご縁綴り LP設定」から差し替えられます。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: goen-story
*/

/* 本体のスタイルは css/tokens.css と css/wb.css（デザインシステム由来）。
   このファイルにはテーマ固有の少しの追加だけを書く。 */

html { scroll-behavior: smooth; }
body.wb { margin: 0; }
.wb-header--fixed { position: sticky; top: 0; z-index: 20; }
.wb-nav--open { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 60px;
  background: var(--base-white); border-bottom: var(--hairline) solid var(--line-usuzumi); padding: var(--space-3) 20px; gap: var(--space-2); }
.wb-header { position: relative; }
.wb-hero__photo video.pc { display: block; }
.wb-hero__photo video.sp { display: none; }
.wb-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.wb-voice { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.wb-voice__item { border: var(--hairline) solid var(--line-usuzumi); padding: var(--space-3); }
.wb-voice__name { font-size: 13px; color: var(--ink-nibi); margin-top: var(--space-2); }
.wb-contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.wb-contact__tel { font-family: var(--font-serif-en); font-size: 28px; letter-spacing: 0.08em; text-decoration: none; }
.wb-page { padding: var(--space-8) 0; }
.wb-page .wb-text h2 { font-size: 24px; margin-top: var(--space-5); }
.wb-page .wb-text p { margin-top: var(--space-2); }
.wb-pagination { margin-top: var(--space-5); font-size: 14px; letter-spacing: 0.1em; display: flex; gap: var(--space-3); }
.wb-footer-space { height: 56px; display: none; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.wb-reveal { opacity: 0; transform: translateY(var(--fade-offset)); transition: opacity var(--fade-duration) ease-out, transform var(--fade-duration) ease-out; }
.wb-reveal.is-visible { opacity: 1; transform: none; }
@media (max-width: 767px) {
  .wb-hero__photo video.pc { display: none; }
  .wb-hero__photo video.sp { display: block; }
  .wb-hero__photo video.sp.none + video.pc { display: block; }
  .wb-voice, .wb-contact { grid-template-columns: 1fr; }
  .wb-footer-space { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .wb-reveal, .wb-fade { opacity: 1; transform: none; animation: none; transition: none; }
}