/***************************

商品説明

***************************/

#tab-description {
	max-width: 720px;
	margin: 0 auto;
	line-height: 1.8;
	letter-spacing: 0.03em;
}


#tab-description>h2 {
	font-size: 14px;
	border: 1px solid #fff;
	padding: 6px;
	display: inline-block;
	line-height: 1.4;
}

#tab-description>h3 {
	font-size: 18px;
	margin: 60px 0 20px;
	line-height: 1.5;
	position: relative;
	padding-bottom: 0.3em;
}

#tab-description>h3:first-of-type {
	margin-top: 0;
}

#tab-description>h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2em;
	height: 1px;
	background: rgba(255, 255, 255, 0.25);
}

/***************************

トップヒーロー・ヘッダー

***************************/

/* .hero-section {
	position: relative;
	min-height: 80vh;
	display: flex;
	align-items: flex-start;
	/* モバイル：上寄せ */
	justify-content: center;
	text-align: center;
	color: #fff;
	background-color: #000;
	background-image: url('/wp-content/uploads/2025/11/top-img-2.jpg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
} */

.hero-section h1 {
	padding-top: 5vh;
	/* モバイル時の上マージン */
	margin: 0;
}

/* PCでヒーロー見出しを「上下中央・左寄せ」に固定 */
@media (min-width: 768px) {
	.hero-section {
		display: flex;
		align-items: center;
		/* 縦：中央 */
		justify-content: flex-start !important;
		/* 横：左寄せを強制 */
		text-align: left !important;
		padding-left: 10vw;
	}

	/* Gutenbergの自動中央寄せ（auto margin）を打ち消す */
	.hero-section>* {
		margin-left: 0 !important;
		margin-right: auto !important;
		text-align: left !important;
		max-width: none;
		/* 必要なら行長制御は別で */
	}

	/* よくある内側ラッパー（wp-block-group / 見出し）も念のため上書き */
	.hero-section .wp-block-group,
	.hero-section .wp-block-heading,
	.hero-section h1 {
		margin-left: 0 !important;
		margin-right: auto !important;
		text-align: left !important;
		align-self: center !important;
		padding-top: 0;
		/* 縦位置は中央 */
	}

	/* constrained レイアウトのデフォルト規則をピンポイントで無効化 */
	.hero-section.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.aligncenter)) {
		margin-left: 0 !important;
		margin-right: auto !important;
	}
}



/* 固定ヘッダー（既存どおり） */
header.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	/* ここで“可変パディング”を定義 */
	--header-pad: 10px;
}

/* 中のグループに変数を適用（エディターのインライン値を上書き） */
header.wp-block-template-part>.wp-block-group {
	padding-top: var(--header-pad) !important;
	padding-bottom: var(--header-pad) !important;

	/* ← これがアニメのキモ */
	transition:
		padding 260ms ease,
		background-color 260ms ease,
		box-shadow 260ms ease;
}

/* スクロール後の状態（値だけ変える） */
header.wp-block-template-part.is-scrolled {
	--header-pad: 0px;
}

header.wp-block-template-part.is-scrolled>.wp-block-group {
	background-color: color-mix(in oklab, var(--wp--preset--color--base) 92%, transparent);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

/* お好みで、読み込み直後の“にゅっ”を防ぐ */
header.wp-block-template-part:not(.is-ready)>.wp-block-group {
	transition: none;
}

/* ユーザー設定でアニメ抑制 */
@media (prefers-reduced-motion: reduce) {
	header.wp-block-template-part>.wp-block-group {
		transition: none;
	}
}

header.wp-block-template-part.is-scrolled>.wp-block-group {
	background: #000;
}

/* ヘッダー高さを受け取る変数（初期値は0） */
:root {
	--header-h: 0px;
}

/* ヘッダー直後の main を押し下げる */
main {
	padding-top: var(--header-h);
}

/* アンカーリンクの食い込み対策（#idジャンプ時） */
html {
	scroll-padding-top: var(--header-h);
}


/***************************

細々としたもの

***************************/

.wc-block-product-template__responsive {
	grid-gap: 8em;
}

.display-none {
	display: none;
}

.wc-block-cart__empty-cart__title.with-empty-cart-icon:before {
	content: none;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background: #000;
	color: #fff;
}

#tab-description > h2 {
	display: none;
}