/*
Theme Name: USA Create 2026
Theme URI: https://usa-create.com/
Description: 遊寂create（うさくりえいと）公式サイト用カスタムテーマ。STUDIO で制作した TOP ページのデザインを WordPress 上で外観そのままに再現したもの。共通部分（ヘッダー / フッター / メニューモーダル）をテンプレート化し、繰り返しセクションは template-parts として分割。CSS・JS・画像・フォントは assets/ に集約し enqueue で読み込む。後からのサブページ追加・ACF による CMS 化を想定した構成。
Author: usa-create.com
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: usa-create-2026
Tags: custom-theme, ja
*/

/*
  実際の見た目を決めている CSS は assets/css/studio.css（STUDIO 書き出しをそのまま移植）に入っています。
  この style.css はテーマ情報ヘッダーと、STUDIO 書き出しに対する修正・上書き用です
  （functions.php で studio.css の後に読み込むため、ここで上書きできます）。
*/

/* =========================================================================
   FIX 01: SP のトップ・ヒーロー（.sd-2）スクロール連動アニメの復元
   -------------------------------------------------------------------------
   STUDIO の元 CSS は
       .sd-2 { animation-name: sd-2-scroll; animation-fill-mode: both; }
       @keyframes sd-2-scroll { 100% { translate: 0 -1500px; } }
   と「スクロール量に連動して translate する」前提の定義だけを持つが、
   それを scroll timeline に結びつける animation-timeline が保存 HTML には
   含まれていなかった（STUDIO のランタイムが実行時に注入していたもの）。
   そのため duration 0s + fill-mode:both が既定の document timeline 上で
   即終了し、ヒーローが終端の translate -1500px（画面外上）で固着 →
   SP で着地時にピンクのヒーローが表示されず、いきなり本文から始まっていた。

   下記でアニメをスクロール（ルートスクローラー）に結びつけて本来の挙動を復元:
   着地時=進捗0%→translate 0（ヒーロー表示）、スクロールで -1500px へ退避。
   ※ .sd-2 は SP 幅でのみ表示され、PC では display:none なので無条件指定で可。
   ========================================================================= */
.sd-2 {
	animation-timeline: scroll(root);
	animation-duration: auto; /* scroll 駆動では duration は timeline 側が決める */
}

/* モーション軽減設定では視差を無効化し、ヒーローを静止表示（translate 0）にする */
@media (prefers-reduced-motion: reduce) {
	.sd-2 {
		animation: none;
		translate: none;
	}
}

/* =========================================================================
   出現アニメ（appear）の個別無効化
   -------------------------------------------------------------------------
   装飾用の「空見出し＋レース」ブロック（各ページの sd-28/sd-22/sd-67 系）の
   フェードイン（.appear = opacity:0 + translate + JS）を止めて静止表示にする。
   テンプレ側で当該要素の data-appear を除去（JS発火を止める）した上で、
   .appear クラスは gap 維持のため残し、ここで opacity 等を打ち消す。
   ※ .appear クラスが無い版（data-appear のみ）でも opacity:1 は無害。
   ========================================================================= */
.usa-noappear {
	opacity: 1 !important;
	translate: none !important;
	filter: none !important;
	transition: none !important;
}

/* =========================================================================
   usa-aboutcard の背景を、シームレスにタイルできる花柄（bg-flower.png）の
   繰り返しに差し替え（元の単一画像 cover はシームレスでないため）。
   STUDIO の image--horizontal は .image__bg-container::before が背景を描画。
   ========================================================================= */
.usa-aboutcard .image__bg-container::before {
	background-image: url(assets/images/bg-flower.png) !important;
	background-repeat: repeat !important;
	background-size: 300px auto !important;
	background-position: top left !important;
}

/* =========================================================================
   main 最下部の著作権セクション（白背景・ピンク文字）
   ========================================================================= */
.usa-copyright {
	flex: none;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background: #fff;
	text-align: center;
	padding: 24px 20px;
}
.usa-copyright__text {
	margin: 0;
	color: #eb77c9;
	font-size: 14px;
	letter-spacing: 0.06em;
}

/* =========================================================================
   見出しタグ（h1〜h6）のフォントを全ページ M PLUS Rounded 1c に統一
   -------------------------------------------------------------------------
   STUDIO の各 sd-N は font-family を個別指定（非 !important）しているため、
   タグセレクタ + !important で上書きする（style.css は全 CSS の後に読み込む）。
   ========================================================================= */
h1, h2, h3, h4, h5, h6 {
	font-family: 'M PLUS Rounded 1c', sans-serif !important;
}
/* 公演個別は .usa-perf *{font-family:'Noto Sans JP'!important}（詳細度0,1,0）が
   効くため、見出しは詳細度を上げて（0,1,1）M PLUS Rounded を勝たせる。 */
.usa-perf h1, .usa-perf h2, .usa-perf h3, .usa-perf h4, .usa-perf h5, .usa-perf h6 {
	font-family: 'M PLUS Rounded 1c', sans-serif !important;
}

/* =========================================================================
   本文（body text）を全ページ Noto Sans JP / weight 500 に統一（2026-07-04）
   -------------------------------------------------------------------------
   STUDIO 既定の本文フォント var(--s-font-b5847304)='Open Sans','Noto Sans JP'
   から Noto Sans JP に寄せて全ページ揃える（欧文が Open Sans/Noto でバラつく問題）。
   ※ ヒーローのコピー・©︎マーキー等の装飾／氏名・英字名・日付(Inter)・見出し(M PLUS)は対象外。
   ページ横断で安定なクラスのみここで global 指定。ページ内で番号衝突する sd-N は
   各ページ専用CSS側（about.css / member-item.css 末尾）で対応。
   ========================================================================= */
.usa-news__body, .usa-news__body p,   /* お知らせ記事本文・プライバシー */
.usa-perf__body, .usa-perf__body p,   /* 公演個別 本文（既に Noto、weight を 500 へ） */
.list-1__item__sd-17,                 /* 公演一覧カードのタグライン（一覧にのみ存在） */
.home .sd-43 {                        /* TOP「次回公演」の説明文 */
	font-family: 'Noto Sans JP', sans-serif !important;
	font-weight: 500 !important;
}

/* =========================================================================
   ボタン（2種のみ）: プライマリ（大・フル幅）/ セカンダリ（小）
   - 色は共通: ピンク #eb77c9 / 文字 白
   - 矢印は絶対配置で上下中央・端から一定インセット（全ボタン同じトンマナ）
     next = 右向き矢印を右に / prev = 左向き矢印を左に
   ========================================================================= */
.usa-btn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	box-sizing: border-box;
	background: #eb77c9; color: #fff; text-decoration: none;
	border-radius: 999px; line-height: 1.4; text-align: center;
	font-family: var(--s-font-b5847304, 'Open Sans', 'Noto Sans JP', sans-serif);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* ホバー（案1: ソフトリフト＋淡いピンクの影）。詳細は末尾「リンクホバー」参照 */
.usa-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(235, 119, 201, 0.30); }

/* 矢印（共通）: 絶対配置・上下中央・極細の縦長シェブロン
   ※ keyboard_arrow_* のグリフは line-box 内でほぼ中央に描画されるため、ボックス中央寄せ
      (translateY -50%) だけで光学的にも中央一致する。以前は 0.08em の下げ補正を入れていたが
      過補正で下寄りに見えたため撤去（同グリフ・同 scaleY のライトボックス矢印は補正なしで中央）。 */
.usa-btn__arrow {
	position: absolute; top: 50%;
	transform: translateY(-50%) scaleY(1.8);
	font-size: 1.6em; line-height: 1;
	--material-symbol-weight: 100;
	pointer-events: none;
}
.usa-btn--next .usa-btn__arrow { right: 0.4em; }
.usa-btn--prev .usa-btn__arrow { left: 0.4em; }

/* サイズ（色は同じ・サイズだけ異なる）。左右paddingは矢印分を確保しつつ対称＝文言は中央 */
/* フォントサイズ統一（2026-06-28）: btn-lg=20/18, btn-sm=18/16 */
.usa-btn--primary   { width: 100%; padding: 16px 2.4em; font-size: 20px; }
.usa-btn--secondary { padding: 12px 2.6em; font-size: 18px; }
@media (max-width: 690px) {
	.usa-btn--primary { font-size: 18px; }
	.usa-btn--secondary { font-size: 16px; }
}

/* 公演個別の .usa-perf *{Noto!important} からボタン文字を守る（アイコンは別途維持済み） */
.usa-perf .usa-btn { font-family: var(--s-font-b5847304, 'Open Sans', 'Noto Sans JP', sans-serif) !important; }

/* =========================================================================
   SP（≤690px）下層ページ: usa-main 先頭の usa-header(symbol-1) は sticky のまま
   追従させつつ、上側の占有領域をなくして直下のレース画像に被せる。
   sticky で確保される高さ分（87px = ヘッダー高さ）を margin-bottom の負値で打ち消し、
   後続コンテンツ（レース）を真上まで引き上げる。ヘッダー透過・z-index:1 で上に重なる。
   ※ 87px はヘッダー高さ（ロゴ+padding20px）。SPで安定値。高さを変えたらここも調整。
   TOP は header が usa-main 直下でないため対象外。
   ========================================================================= */
@media (max-width: 690px) {
	.usa-main > .usa-header { position: sticky; top: 0; margin-bottom: -87px; }
}

/* =========================================================================
   コンテンツ本文ブロック（usa-content-block: about/公演一覧/メンバー等の sd-28/33/34）
   の上余白を 60px に。左右・下は各ページの sd-N 指定（30px / 90px 等）のまま。
   ※ news（usa-news）・公演個別（usa-perf）は別クラス・別余白なので影響しない。
   ========================================================================= */
.usa-content-block { padding-top: 60px; }

/* =========================================================================
   PC: フッターナビ（usa-footer-nav = symbol-2__sd-10）を親（symbol-2__sd-8）の
   上下中央に配置。元は top:0（親の上端にぶら下がり）。親は position:relative なので
   top:50% + translateY(-50%) で中央寄せ（ロゴ sd-9 と同じ中心軸に揃う）。
   ※フッターは SP では出ない/別扱いのため min-width:691px に限定（= PC時）。
   ========================================================================= */
@media (min-width: 691px) {
	.usa-footer-nav { top: 50%; transform: translateY(-50%); }
}

/* =========================================================================
   初回訪問スプラッシュ
   -------------------------------------------------------------------------
   白背景 → ピンクの涙のしずくが中央へ落下 → 着地点（中央）から白に穴が
   開いて広がり、サイトが現れる。表示はセッション初回のみ。
   - 既訪問: <head> のインラインJSが html.usa-splash-seen を付与し描画前に非表示。
   - JS無効: header.php の <noscript> で非表示（サイトは普通に表示）。
   - 演出開始(.is-playing)と穴の拡大(--usa-splash-r)は usa-splash.js が制御。
   - フェイルセーフ: 何かで JS が止まっても 4秒後にオーバーレイを自動フェイド。
   ========================================================================= */
html.usa-splash-seen .usa-splash { display: none !important; }

.usa-splash {
	position: fixed;
	inset: 0;
	z-index: 2147483600;
	pointer-events: none;
	/* JS が止まった場合の保険（通常は JS が ~2秒で要素ごと除去するため発火しない） */
	animation: usa-splash-failsafe 400ms ease 4000ms forwards;
}
@keyframes usa-splash-failsafe { to { opacity: 0; visibility: hidden; } }

/* 白背景＋中央から開く穴（radial-gradient マスク。--usa-splash-r を JS が 0→画面外まで拡大） */
.usa-splash__bg {
	position: absolute;
	inset: 0;
	background: #fff;
	-webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--usa-splash-r, 0px), #000 calc(var(--usa-splash-r, 0px) + 1px));
	        mask: radial-gradient(circle at 50% 50%, transparent var(--usa-splash-r, 0px), #000 calc(var(--usa-splash-r, 0px) + 1px));
}

/* 涙レイヤー（白の上） */
.usa-splash__fx { position: absolute; inset: 0; overflow: hidden; }

/* 涙のしずく: 外側(__drop)＝位置・落下アニメ / 内側(__drop-shape)＝形（縦長の💧）。
   形を内側に分けることで、落下アニメ(translateY)と形の rotate/scaleY が干渉しない。 */
.usa-splash__drop {
	position: absolute; left: 50%; top: 50%;
	width: 24px; height: 24px; margin: -12px 0 0 -12px;
	transform: translateY(-65vh);
	opacity: 0;
}
/* 形: border-radius + rotate45 で上に尖る涙。scaleY で縦長に（数値を上げるほど細長い）。 */
.usa-splash__drop-shape {
	display: block; width: 100%; height: 100%;
	background: #eb77c9;
	border-radius: 0 50% 50% 50%;
	transform: scaleY(1.7) rotate(45deg);
}
/* 落下はゆっくり（2600ms）。着地は約68%＝~1770ms。穴(JS holeStart=1780)もそれに同期。 */
.usa-splash.is-playing .usa-splash__drop {
	animation: usa-splash-drop 2600ms cubic-bezier(.55, 0, .9, .55) forwards;
}

@keyframes usa-splash-drop {
	0%   { transform: translateY(-65vh); opacity: 0; }
	12%  { opacity: 1; }
	68%  { transform: translateY(0); opacity: 1; }           /* 中央に着地（穴の開始と同タイミング） */
	73%  { transform: translateY(0) scale(.5); opacity: 0; } /* 着地直後にすぐ消える */
	100% { transform: translateY(0) scale(.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	/* 低モーション: 演出は usa-splash.js が即終了。CSSアニメも無効化 */
	.usa-splash { animation: none; }
	.usa-splash.is-playing .usa-splash__drop { animation: none; }
}

/* =========================================================================
   TOP「次回公演」セクション内の画像(sd-39)を横幅100%に。
   元は PC=650px固定 / @990=80% / SP=100%。.usa-section-performance スコープで
   TOP 限定に上書き（sd-39 は他ページでも別用途に使われるためグローバル指定は不可）。
   ========================================================================= */
.usa-section-performance .sd-39 { width: 100%; max-width: 100%; }

/* =========================================================================
   リンクホバー
   - カード/ボタン（案1: ソフトリフト＋淡いピンクの影）:
       ボタンは上記 .usa-btn:hover。ここでは メンバーカード(リンク有のみ)/公演カード。
       no_page のメンバーカードは除外。低モーション時はリフト無効。
   - テキストリンク（お知らせ行・フッターナビ・メニュー・記事/公演本文中リンク）:
       ホバーで半透明にする程度（リフトはしない）。
   ========================================================================= */
.usa-card-member:not(.usa-card-member--nolink),
.usa-card-performance {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.usa-card-member:not(.usa-card-member--nolink):hover,
.usa-card-performance:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(235, 119, 201, 0.28);
}
@media (prefers-reduced-motion: reduce) {
	.usa-btn:hover,
	.usa-card-member:not(.usa-card-member--nolink):hover,
	.usa-card-performance:hover { transform: none; }
}

/* テキストリンク / SNSアイコンリンク: ホバーで半透明にするだけ */
.usa-news-list .list-1__item,
.usa-footer-nav a,
.usa-menu-nav a,
.usa-news__body a,
.usa-perf__body a,
.usa-sns a {
	transition: opacity 0.2s ease;
}
.usa-news-list .list-1__item:hover,
.usa-footer-nav a:hover,
.usa-menu-nav a:hover,
.usa-news__body a:hover,
.usa-perf__body a:hover,
.usa-sns a:hover {
	opacity: 0.6;
}
/* フッターのロゴ画像リンク。.usa-footer-logo は display:contents でボックスを持たないため、
   opacity は中の img（symbol-2__sd-9）側に適用する。 */
.usa-footer-logo img { transition: opacity 0.2s ease; }
.usa-footer-logo:hover img { opacity: 0.6; }

/* =========================================================================
   note ロゴアイコン（テキストリンク「note」→「n」マーク SVG に置換）
   -------------------------------------------------------------------------
   置き場所ごとに隣の Instagram / X アイコンのサイズ・色が異なるので、
   SVG は 0.875em 四方（＝FontAwesome ブランドアイコンの実表示比）にして
   アンカーの font-size に追従させ、色は currentColor（アンカーの color）で塗る。
   これで各 usa-sns 群では「font-size と color を隣のアイコンに合わせる」だけで
   サイズ・色・上下位置が自動的に揃う。SVG は viewBox を「n」の外接矩形にトリム済み。
     - フッター(symbol-2__sd-15)/SPメニュー(modal-3__sd-12): 32px・#f3ece2
     - 各ページの白カード内 SNS(.usa-sns): 42px・#8658bf(var --s-color-e0a83ad7)
   ========================================================================= */
.usa-note-icon { color: #f3ece2; padding: 0; }
/* n マークは viewBox を外接矩形にトリム済み＝全面ベタなので、内側に余白を持つ
   FontAwesome の X/Instagram より大きく見える。0.8em に絞って見た目の大きさを揃える。 */
.usa-note-icon__svg { display: block; width: 0.8em; height: 0.8em; }
/* フッター / SPメニュー: 隣の Instagram/X（font-size:32px）に合わせる */
.symbol-2__sd-15.usa-note-icon,
.modal-3__sd-12.usa-note-icon { font-size: 32px; }
/* 各ページの白カード内 SNS（.usa-sns = sd-50 等）: 隣の X/Instagram（42px・#8658bf）に合わせる。
   これらの群は align-items:flex-start なので、n マーク（高さがやや低い）を上下中央に寄せる。
   ※ .usa-sns はフッター(usa-footer-nav)/メニュー(usa-menu-nav)には付かないので両者は影響なし。 */
.usa-sns .usa-note-icon { font-size: 42px; color: var(--s-color-e0a83ad7); align-self: center; }