/*
 * 動き（モーション）専用スタイル
 * 仕様: docs/design-notes.md §3（採用分と数値）・§4（不採用）。以下の §番号はその節
 * - 静止状態の見た目（寸法・色）は Tailwind 側（テンプレートのクラス）が持つ。ここは動きだけ
 * - テンプレート側は data-reveal などの属性・ab-* クラスを足すだけ
 * - 外すときは functions.php の enqueue を外し、この 2 ファイルを削除する
 * - JS が動いている間だけ「表示待ち」を作る（html.ab-js は functions.php のインライン script が付ける）
 */

:root {
	--ab-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ab-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
	--ab-reveal: 0.7s;
	--ab-hover: 0.28s;
	/* オープニング分の待ち時間。トップ初回だけ html.ab-opening で 2.4s になる（motion.js が終了後に 0 へ戻す） */
	--ab-t0: 0s;
}

html.ab-opening {
	--ab-t0: 2.4s;
}

@keyframes ab-fade-up {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

/* ===== 3-1 オープニング（トップページ・そのタブで初めてサイトを開いたときだけ） ===== */
.ab-splash {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100;
	background: #fff;
	align-items: center;
	justify-content: center;
}
html.ab-opening .ab-splash {
	display: flex;
	animation: ab-splash-out 0.7s var(--ab-ease-io) 2s both;
}
html.ab-opening .ab-splash.is-done {
	display: none;
}
.ab-splash__in {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 0 24px;
}
.ab-splash__logo {
	height: 26px;
	width: auto;
	animation: ab-splash-logo 0.9s var(--ab-ease) 0.15s both;
}
.ab-splash__txt {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #8F8F8F;
	text-align: center;
	text-wrap: balance;
	animation: ab-fade-up 0.8s var(--ab-ease) 0.3s both;
}
.ab-splash__txt b {
	font-weight: 800;
	color: #000;
}
.ab-splash__txt sup {
	font-size: 0.6em;
}
.ab-splash__bar {
	width: 180px;
	height: 3px;
	background: #D20D2B;
	transform: scaleX(0);
	transform-origin: left;
	animation: ab-splash-bar 0.8s var(--ab-ease) 0.55s both;
}
@media (min-width: 768px) {
	.ab-splash__logo { height: 34px; }
	.ab-splash__txt { font-size: 15px; }
}
@keyframes ab-splash-logo {
	from { opacity: 0; transform: translateY(10px) scale(0.96); }
	to { opacity: 1; transform: none; }
}
@keyframes ab-splash-bar {
	to { transform: scaleX(1); }
}
@keyframes ab-splash-out {
	to { transform: translateY(-100%); }
}

/* ===== 3-2 ヒーロー（トップ） ===== */
.ab-seq {
	animation: ab-fade-up 0.9s var(--ab-ease) both;
	animation-delay: calc(var(--ab-t0) + 0.15s + var(--i, 0) * 0.12s);
}
.ab-line {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}
.ab-line > span {
	display: inline-block;
	animation: ab-line-up 0.9s var(--ab-ease) both;
	animation-delay: calc(var(--ab-t0) + 0.5s + var(--i, 0) * 0.14s);
}
@keyframes ab-line-up {
	from { transform: translateY(110%); }
	to { transform: none; }
}
/* 左パネルの斜めカットが左から開く。オープニングを経ないときだけ・PC だけ。
   fill-mode は both ではなく backwards にする: both だと終了後もアニメーションの clip-path を Chrome が
   合成レイヤーで保持し、斜めのはずの境目が直線に描画される（計算値は斜めのまま）。終了後は input.css の静的な
   clip-path に戻す */
@media (min-width: 1280px) {
	html.ab-no-opening .hero-left-clip {
		animation: ab-wedge 1.1s var(--ab-ease) backwards;
	}
}
@keyframes ab-wedge {
	from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
	to { clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); }
}

/* ===== 3-3 スクロール表示（全ページ共通） ===== */
/* ページ内リンク（#news・#software・#from-yokohama・目次など）はなめらかにスクロールする（moe さん 10/2）。
   「視差効果を減らす」設定のときは今までどおり一瞬で移動する。飛び先の上の余白は input.css の main [id] の scroll-margin-top */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}
[data-reveal] {
	transition:
		opacity var(--ab-reveal) var(--ab-ease),
		transform var(--ab-reveal) var(--ab-ease);
}
[data-reveal].is-pending {
	opacity: 0;
	transform: translateY(40px);
}
[data-reveal].is-in {
	opacity: 1;
	transform: none;
}
/* 画像ワイプ: ラッパーを監視し、クリップは img 子要素に掛ける */
[data-reveal="wipe"].is-pending {
	opacity: 1;
	transform: none;
}
[data-reveal="wipe"] > img {
	clip-path: inset(0);
	transition: clip-path 0.9s var(--ab-ease);
}
[data-reveal="wipe"].is-pending > img {
	clip-path: inset(0 100% 0 0);
}
/* Bluetooth製品開発の写真（data-reveal-early）: 早めに表示を始めるので、ワイプも短く（0.9s → 0.6s。moe さん確認 9/29） */
[data-reveal="wipe"][data-reveal-early] > img {
	transition-duration: 0.6s;
}

/* ===== 3-4 セクション見出し ===== */
/* 見出し下の赤い下線: 廃止（moe さん確認 9/28）。.ab-underline は見出し下の余白確保だけに残す */
/* 見出しの赤い下線は廃止（moe さん確認 9/28）。下線用に取っていた下余白も外し、静止時の見た目を PR #12 と揃える */
.ab-underline {
	position: relative;
}
/* 英字ラベル先頭の赤い四角: 明滅は廃止、静止表示のみ（moe さん確認 9/28） */

/* ===== 3-5 数字のカウントアップ ===== */
[data-count] {
	font-variant-numeric: tabular-nums;
}

/* ===== 3-6 ヘッダー／ナビ ===== */
.ab-header {
	transition: box-shadow 0.4s;
}
.ab-header.is-scrolled {
	box-shadow: 0 1px 0 #DCDCDC;
}
.ab-header__in {
	transition: height 0.4s var(--ab-ease);
}
.ab-header.is-scrolled .ab-header__in {
	height: 56px;
}
@media (min-width: 768px) {
	.ab-header.is-scrolled .ab-header__in { height: 60px; }
}
@media (min-width: 1280px) {
	.ab-header.is-scrolled .ab-header__in { height: 64px; }
}

/* PC ナビ: 文字下の 2px 下線を左から描く（base の a:hover { opacity:.5 } は使わない） */
.ab-nav > li > a {
	position: relative;
	display: inline-block;
	padding: 6px 0;
}
.ab-nav > li > a:hover {
	opacity: 1;
}
.ab-nav > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: #000;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--ab-hover) var(--ab-ease);
}
.ab-nav > li > a:hover::after,
.ab-nav > li.current-menu-item > a::after,
.ab-nav > li.current-menu-ancestor > a::after,
.ab-nav > li.is-open > a::after,
.ab-nav > li.ab-nav-item:hover > a::after {
	transform: scaleX(1);
	transform-origin: left;
}
/* お問い合わせ枠線ボタン: ホバーで黒地・白文字 */
.ab-nav-cta {
	transition: background-color var(--ab-hover), color var(--ab-hover);
}
.ab-nav-cta:hover {
	opacity: 1;
	background: #000;
	color: #fff;
}

/* PC ドロップダウン: フェード＋8px 上昇。閉じるまで 0.18s の猶予。
   見出しとパネルの隙間は .ab-nav-dropdown の padding-top（透明な橋渡し）で埋める */
.ab-nav-dropdown {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(8px);
	transition:
		opacity var(--ab-hover) var(--ab-ease) 0.18s,
		transform var(--ab-hover) var(--ab-ease) 0.18s,
		visibility 0s linear calc(var(--ab-hover) + 0.18s);
}
.ab-nav-item:hover > .ab-nav-dropdown,
.ab-nav-item:focus-within > .ab-nav-dropdown,
.ab-nav-item.is-open > .ab-nav-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}
/* ドロップダウンの項目: ホバーは地色だけ（文字の右移動は廃止。moe さん確認 9/29） */
.ab-nav-dropdown a {
	transition: background-color var(--ab-hover);
}
.ab-nav-dropdown a:hover {
	opacity: 1;
	background: #F2F2F2;
}

/* ハンバーガー → × は線の回転 */
.ab-burger__l {
	position: absolute;
	width: 24px;
	height: 2px;
	background: #000;
	transition: transform 0.35s var(--ab-ease), opacity 0.2s;
}
.ab-burger__l:nth-of-type(1) { transform: translateY(-7px); }
.ab-burger__l:nth-of-type(3) { transform: translateY(7px); }
.ab-burger[aria-expanded="true"] .ab-burger__l:nth-of-type(1) { transform: rotate(45deg); }
.ab-burger[aria-expanded="true"] .ab-burger__l:nth-of-type(2) { opacity: 0; transform: scaleX(0); }
.ab-burger[aria-expanded="true"] .ab-burger__l:nth-of-type(3) { transform: rotate(-45deg); }

/* SP ドロワー: 右からスライド 0.45s、項目は 30ms 刻みで右からフェード */
.ab-drawer {
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.45s var(--ab-ease), visibility 0s linear 0.45s;
}
.ab-drawer.is-open {
	transform: none;
	visibility: visible;
	transition-delay: 0s;
}
.ab-header.is-scrolled .ab-drawer {
	top: 56px;
}
@media (min-width: 768px) {
	.ab-header.is-scrolled .ab-drawer { top: 60px; }
}
.ab-drawer__item {
	opacity: 0;
	transform: translateX(24px);
	transition:
		opacity 0.4s var(--ab-ease) calc(var(--i, 0) * 30ms),
		transform 0.5s var(--ab-ease) calc(var(--i, 0) * 30ms),
		color var(--ab-hover);
}
.ab-drawer.is-open .ab-drawer__item {
	opacity: 1;
	transform: none;
}
/* Bluetooth製品開発（アコーディオン）以外の項目: フォーカスで文字色をグレーに（黒い「お問い合わせ」ボタンは対象外）。
   矢印は他のボタンと同じく色の変化だけで、動かさない（moe さん確認 9/28 夕・§7） */
a.ab-drawer__item:not(.ab-btn):not(.ab-nav-cta):hover,
a.ab-drawer__item:not(.ab-btn):not(.ab-nav-cta):focus-visible {
	color: #8F8F8F;
}
/* 下部の「お問い合わせ」: PC ヘッダーのお問い合わせ（.ab-nav-cta）と同じく白地・黒枠 → ホバーで黒地・白文字。
   赤が急に出る滑り込みはやめた（moe さん確認 9/29）。スライドインの遷移は .ab-drawer__item と同じものを保つ */
.ab-drawer__item.ab-nav-cta {
	transition:
		opacity 0.4s var(--ab-ease) calc(var(--i, 0) * 30ms),
		transform 0.5s var(--ab-ease) calc(var(--i, 0) * 30ms),
		background-color var(--ab-hover),
		color var(--ab-hover);
}
.ab-drawer__item.ab-nav-cta:hover,
.ab-drawer__item.ab-nav-cta:focus-visible {
	opacity: 1;
	background: #000;
	color: #fff;
}

/* ===== 3-7 ボタン・カード・リンク ===== */
/* ボタン: 背景色が左から滑り込む（0.4s）。base の opacity フェードは使わない */
/* data-reveal と併用する要素なので、reveal の opacity / transform の遷移も一緒に書く（transition の上書きでフェードが消えないように） */
.ab-btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition:
		color var(--ab-hover),
		opacity var(--ab-reveal) var(--ab-ease),
		transform var(--ab-reveal) var(--ab-ease);
}
.ab-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: translateX(-101%);
	transition: transform 0.4s var(--ab-ease);
}
.ab-btn:hover {
	opacity: 1;
}
.ab-btn:hover::before {
	transform: none;
}
.ab-btn--white::before,
.ab-btn--outline::before {
	background: #000;
}
.ab-btn--white:hover,
.ab-btn--outline:hover {
	color: #fff;
}
.ab-btn--red::before {
	background: #B8001F;
}
.ab-btn--black::before {
	background: #D20D2B;
}
/* 矢印「→」（.ab-arr）はどこもホバーで動かさない（ボタンの地色や下線の動きはそのまま。moe さん確認 10/2）。
   以前は 6px 右へ動かし、ヒーロー・BUSINESS・COMPANY・ABCom バナー・お問い合わせ・ドロワーなどで個別に止めていた */
.ab-arr {
	display: inline-block;
}
/* ONE-STOP の4タイル（Bluetooth製品開発ページ #onestop）: 矢印「↓」の下移動は廃止、静止表示のまま（moe さん確認 9/28）。
   画像の拡大もやめ、代わりに黒の薄い幕をフェードで重ね、見出しの文字にヘッダーナビ（.ab-nav > li > a::after）と同じ
   2px の下線を左から描く */
.ab-tile-media {
	position: relative;
}
/* 黒い幕は初期状態で表示し、フォーカスで消えて写真が明るくなる（moe さん確認 9/28 夕・§1） */
.ab-tile-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.25);
	opacity: 1;
	transition: opacity var(--ab-hover);
}
a:hover .ab-tile-media::after,
a:focus-visible .ab-tile-media::after {
	opacity: 0;
}
.ab-tile-label {
	position: relative;
}
.ab-tile-label::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 2px;
	background: #000;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--ab-hover) var(--ab-ease);
}
a:hover .ab-tile-label::after {
	transform: scaleX(1);
	transform-origin: left;
}
/* タイル／カード（Bluetooth製品開発ページの各セクション小項目カード）: ホバー時の動きは廃止、ホバーしても何も動かない（moe さん確認 9/28 §6） */
/* data-reveal と併用する。opacity は reveal の 0.7s */
.ab-card {
	position: relative;
	transition: opacity var(--ab-reveal) var(--ab-ease);
}
.ab-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 3px;
	background: #D20D2B;
	transform: scaleX(0);
	transform-origin: left;
	z-index: 1;
}
/* 罫線グリッドのセル（トップ BUSINESS）: ホバーで地が surface になり、番号が赤に、矢印が右へ。data-reveal と併用 */
.ab-cell {
	transition:
		background-color var(--ab-hover),
		opacity var(--ab-reveal) var(--ab-ease),
		transform var(--ab-reveal) var(--ab-ease);
}
.ab-cell:hover {
	background-color: #F2F2F2;
}
.ab-cell__no {
	transition: color var(--ab-hover);
}
.ab-cell:hover .ab-cell__no {
	color: #D20D2B;
}
/* 画像付きカード: 画像をゆっくり拡大（Bluetooth ページの ABCom バナー・4カテゴリでは使わない。moe さん確認 9/28） */
.ab-zoom > img {
	transition: transform 0.9s var(--ab-ease);
}
a:hover .ab-zoom > img {
	transform: scale(1.05);
}
/* ABCom バナー（Bluetooth ページ #abcom）: バナー全体のどこにホバーしても赤ボタンの背景スライドを出す
   （矢印は動かさない。9/29 に上の「矢印は動かさない」の一覧へ追加）。枠線は #DCDCDC → #000000（moe さん確認 9/28） */
#abcom a {
	transition: border-color var(--ab-hover);
}
#abcom a:hover {
	border-color: #000000;
}
#abcom a:hover .ab-btn--red::before {
	transform: none;
}
/* ニュース行: 行の横移動・文字の動きは廃止。フォーカスでタイトルに下線（ヘッダーナビと同じ 2px・黒・var(--ab-hover)）が引かれ、
   右端に黒の「→」が動かずに表示されるだけ（moe さん確認 9/28 夕・§3） */
.ab-news-row {
	position: relative;
}
.ab-news-row:hover {
	opacity: 1;
}
.ab-news-row__t {
	position: relative;
}
.ab-news-row__t::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	background: #000;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--ab-hover) var(--ab-ease);
}
.ab-news-row:hover .ab-news-row__t::after,
.ab-news-row:focus-visible .ab-news-row__t::after {
	transform: scaleX(1);
	transform-origin: left;
}
.ab-news-row__arrow {
	display: none;
}
@media (min-width: 1280px) {
	.ab-news-row__arrow {
		display: block;
		position: absolute;
		right: 16px;
		top: 50%;
		color: #000;
		opacity: 0;
		transform: translate(0, -50%);
		transition: opacity var(--ab-hover);
	}
	.ab-news-row:hover .ab-news-row__arrow,
	.ab-news-row:focus-visible .ab-news-row__arrow {
		opacity: 1;
	}
}
/* 行リンク（アクセスページの横浜本社 行き方一覧）: 文字の動きは廃止。フォーカスで見出し行のテキストに下線
   （ヘッダーナビと同じ 2px・黒・var(--ab-hover)）を引くだけ（moe さん確認 9/28 夕・§4） */
.ab-row-shift:hover {
	opacity: 1;
}
/* 下線は見出しの下ではなく、交通機関の行の下にある区切り線（#DCDCDC）の上に黒で描く（moe さん確認 9/28）。
   次の行の上罫線に重なるので z-index で前に出す */
.ab-row-shift {
	position: relative;
}
.ab-row-shift::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 1;
	height: 2px;
	background: #000;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--ab-hover) var(--ab-ease);
}
.ab-row-shift:hover::after,
.ab-row-shift:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}
/* 会社案内アクセス欄「行き方を見る →」: 文字の動きは廃止。矢印は静止表示のまま、フォーカスでテキストに下線
   （ヘッダーナビと同じ 2px・黒・var(--ab-hover)）を引く（moe さん確認 9/28 夕・§6） */
.ab-goto__t {
	position: relative;
}
.ab-goto__t::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: #000;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--ab-hover) var(--ab-ease);
}
.ab-goto:hover .ab-goto__t::after,
.ab-goto:focus-visible .ab-goto__t::after {
	transform: scaleX(1);
	transform-origin: left;
}
/* ページ内ナビ（タイトル帯のタブ）: 3px の下線を左から */
.ab-tab {
	position: relative;
}
.ab-tab:hover {
	opacity: 1;
}
.ab-tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	background: #000;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--ab-hover) var(--ab-ease);
}
.ab-tab:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* ===== 3-8 下層ページ固有 ===== */
/* ページ見出し帯: パンくず → 英字ラベル → 見出し → リード の順に 0.1s 刻みでフェードアップ */
.ab-band-seq {
	animation: ab-fade-up 0.8s var(--ab-ease) both;
	animation-delay: calc(var(--ab-t0) + var(--i, 0) * 0.1s);
}

/* 会社案内 沿革: 縦線の伸び・丸の拡大アニメーションと行ごとの表示アニメーション（data-reveal）は廃止し、
   最初から静止表示（丸は常に表示、縦線は途切れない。PR #12 と同じ見た目。moe さん確認 9/28 夕・§5）。
   灰色の縦線は SP では行全体（.ab-tl-line-sp）、tablet 以上では本文側（.ab-tl-line-tb）に付いているので、
   黒い線もそれぞれの要素に重ねる */
.ab-tl-item {
	position: relative;
}
.ab-tl-line-sp::after,
.ab-tl-line-tb::after {
	content: "";
	position: absolute;
	left: -2px;
	top: 0;
	width: 2px;
	height: 100%;
	background: #000;
}
@media (min-width: 768px) {
	.ab-tl-line-sp::after { display: none; }
}
@media (max-width: 767.98px) {
	.ab-tl-line-tb::after { display: none; }
}

/* お問い合わせ: ステップの現在位置の丸が弾む（0.6s）、ステップ間のバーが左から埋まる（0.6s） */
.ab-step.is-on .ab-step__n {
	animation: ab-step-pop 0.6s var(--ab-ease) calc(var(--ab-t0) + 0.3s) both;
}
@keyframes ab-step-pop {
	0% { transform: scale(0.6); }
	60% { transform: scale(1.12); }
	100% { transform: scale(1); }
}
.ab-step-bar {
	position: relative;
	overflow: hidden;
}
.ab-step-bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	transform: scaleX(0);
	transform-origin: left;
}
.ab-step-bar.is-done::after {
	animation: ab-bar-fill 0.6s var(--ab-ease) calc(var(--ab-t0) + 0.1s) both;
}
@keyframes ab-bar-fill {
	to { transform: scaleX(1); }
}
/* 完了画面: チェックマークの円（0.9s）→ チェック（0.5s、赤）を線で描く */
.ab-done-mark circle {
	fill: none;
	stroke: #000;
	stroke-width: 3;
	stroke-dasharray: 260;
	stroke-dashoffset: 260;
	animation: ab-draw 0.9s var(--ab-ease) calc(var(--ab-t0) + 0.2s) forwards;
}
.ab-done-mark path {
	fill: none;
	stroke: #D20D2B;
	stroke-width: 5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 60;
	stroke-dashoffset: 60;
	animation: ab-draw 0.5s var(--ab-ease) calc(var(--ab-t0) + 0.9s) forwards;
}
@keyframes ab-draw {
	to { stroke-dashoffset: 0; }
}

/* ===== 視差効果を減らす: すべて止め、要素は最初から表示 ===== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001s !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001s !important;
		transition-delay: 0s !important;
	}
	.ab-splash {
		display: none !important;
	}
	[data-reveal].is-pending {
		opacity: 1 !important;
		transform: none !important;
	}
	[data-reveal="wipe"].is-pending > img {
		clip-path: inset(0) !important;
	}
	.ab-step-bar.is-done::after {
		transform: scaleX(1) !important;
	}
	.ab-done-mark circle,
	.ab-done-mark path {
		stroke-dashoffset: 0 !important;
	}
}