/* -- 下層 news
-------------------------------------------------- */
.common-wrapper.__product {
	background-image: url('../images/news/news-image.jpg');
	background-position: center;
}

/* .common-wrapper.__product:before {
	content: url("../images/news/news-title_.svg");
	width: 450px;
} */


.common-wrapper.wave:after {
	background-image: url('../images/common/pattern_wave-white.svg');
	background-position: bottom;
}

.common-section__inner {
	padding: var(--space-lg) 0;
}

.woocommerce-product-gallery {
	opacity: 1 !important;
}

/* Geminiにお任せcss */
/* ------------------------------------------- */
/* WooCommerce Single Product Summary
/* ------------------------------------------- */

/* 商品情報エリア全体 */
.summary.entry-summary {
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
}

/* 商品タイトル */
.summary .product_title {
	font-size: var(--font-size-xxl);
	color: var(--main-color);
	font-weight: var(--font-weight-Black);
	margin-bottom: var(--space-sm);
	line-height: 1.3;
}

/* 価格 */
.summary .price {
	font-size: var(--font-size-xl);
	color: var(--sub-color);
	font-weight: var(--font-weight-Medium);
	margin-bottom: var(--space-md);
}

/* --- オプション選択テーブル --- */
.variations_form.cart {
	margin-bottom: var(--space-md);
}

.variations {
	width: 100%;
	margin-bottom: var(--space-md);
	border-collapse: separate;
}

/* ★追加★ テーブルの行をFlexboxで制御 */
.variations tr {
	display: flex;
	align-items: baseline;
	/* ベースラインを揃える */
	margin-bottom: var(--space-md);
}

.variations .label {
	flex: 0 0 120px;
	text-align: left;
	padding-bottom: var(--space-xs);
}

.variations .label label {
	font-weight: var(--font-weight-Medium);
	color: var(--main-color);
}

.variations .value {
	flex-grow: 1;
}

/* ★変更★ 元の個別paddingを削除 */
.variations td, .variations th {
	padding: 0;
}

.variations select {
	width: 100%;
	padding: var(--space-sm);
	border: 1px solid var(--accent-color);
	border-radius: 4px;
}

/* --- 数量・カートボタンエリア --- */
.single_variation_wrap {
	margin-top: auto;
	/* 下部に固定 */
}

.variations_button {
	display: flex;
	flex-direction: column;
	/* スマホでは縦並び */
	gap: var(--gap-sm);
}

.quantity {
	margin-right: var(--space-md);
}

.quantity .qty {
	width: 70px;
	text-align: center;
	padding: var(--space-sm);
	border: 1px solid var(--accent-color);
	border-radius: 4px;
}

.single_add_to_cart_button {
	background-color: var(--sub-color);
	color: var(--white-color);
	font-weight: var(--font-weight-Black);
	border: none;
	padding: var(--space-sm) var(--space-md);
	border-radius: 50px;
	/* 角丸ボタン */
	cursor: pointer;
	transition: opacity 0.3s ease;
	flex-grow: 1;
	/* PCで幅を広げる */
	text-align: center;
}

.single_add_to_cart_button:hover {
	opacity: 0.8;
}

.single_add_to_cart_button.disabled {
	background-color: #ccc;
	cursor: not-allowed;
}

/* --- 商品メタ情報 (SKU, カテゴリ) --- */
.product_meta {
	margin-top: var(--space-md);
	font-size: var(--font-size-sm);
	color: #777;
	border-top: 1px solid var(--accent-color);
	padding-top: var(--space-md);
}

.product_meta a {
	color: var(--sub-color);
	text-decoration: none;
}

.product_meta a:hover {
	text-decoration: underline;
}


/* --- PC表示用の調整 (769px以上) --- */
@media (min-width: 769px) {
	.variations_button {
		flex-direction: row;
		/* 横並びにする */
		align-items: center;
		/* 中央揃え */
	}

	.quantity {
		margin-right: 0;
	}
}

/* Geminiにお任せcssここまで */


/* --- PC表示用のレイアウト (例: 769px以上) --- */
@media (min-width: 769px) {

	.common-section__inner div.product {
		display: flex;
		flex-wrap: wrap;
		gap: 0 30px;
	}

	/* 商品画像ギャラリー
    flex: 0 0 50%; は「伸びず、縮まず、幅50%」という意味
  */
	.common-section__inner div.product .woocommerce-product-gallery {
		flex: 0 0 50%;
		width: 50%;
		box-sizing: border-box;
	}

	/* 商品情報（価格、カートボタンなど）
    こちらも幅50%に設定
  */
	.common-section__inner div.product .summary.entry-summary {
		flex: 0 0 calc(50% - 30px);
		width: calc(50% - 30px);
		box-sizing: border-box;
	}

	.price {
		font-size: var(--font-size-lg);
	}

	/* 関連商品
    width: 100%; で折り返させて、下に配置する
  */
	.common-section__inner div.product .related.products {
		width: 100%;
		clear: both;
		/* floatの回り込み解除（念のため） */
		margin-top: 40px;
		/* 上の要素との間に余白を追加 */
	}

	.related.products ul.products {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.related.products ul.products li {
		width: calc(100% / 4 - 30px);
	}

	.related.products ul.products li a img {
		width: 100%;
		height: auto;
	}
}


@media (max-width: 768px) {

	.common-section__inner div.product {
		display: flex;
		flex-flow: column;
		gap: 0 30px;
	}

	/* 商品画像ギャラリー
    flex: 0 0 50%; は「伸びず、縮まず、幅50%」という意味
  */
	.common-section__inner div.product .woocommerce-product-gallery {
		flex: 0 0 auto;
		width: auto;
		margin: 0 auto;
	}

	/* 商品情報（価格、カートボタンなど）
    こちらも幅50%に設定
  */
	.common-section__inner div.product .summary.entry-summary {
		flex: 0 0 600px;
		width: 100%;
		max-width: 600px;
		max-height: max-content;
		margin: 0 auto;
	}

	.price {
		font-size: var(--font-size-lg);
	}

	/* 関連商品
    width: 100%; で折り返させて、下に配置する
  */
	.common-section__inner div.product .related.products {
		width: 100%;
		max-width: 600px;
		clear: both;
		/* floatの回り込み解除（念のため） */
		margin: 40px auto 0;
	}

	.related.products ul.products {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 30px;
	}

	.related.products ul.products li {
		width: calc(100% / 2 - 30px);
	}

	.related.products ul.products li a img {
		width: 100%;
		height: auto;
	}

}

@media (max-width: 468px) {
	.common-wrapper.__product:before {
		width: 220px;
		left: 1rem;
		bottom: 4rem;
	}

	.common-section__inner div.product .woocommerce-product-gallery .woocommerce-product-gallery__image a img {
		width: 100%;
		height: auto;
	}

	/* 商品情報（価格、カートボタンなど）
    こちらも幅50%に設定
  */
	.common-section__inner div.product .summary.entry-summary {
		flex: 0 0 100%;
		width: initial;
		max-width: 100%;
		max-height: max-content;
		padding: 0 1.5em;
	}

	/* 関連商品
    width: 100%; で折り返させて、下に配置する
  */
	.common-section__inner div.product .related.products {
		width: initial;
		margin: 40px auto 0;
	}

	.related.products ul.products {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 30px;
		padding: 0 1.5em;
	}

	.related.products ul.products li {
		width: calc(50% - 1em);
		max-width: calc(100vw / 2 - 15px);
	}

	.related.products ul.products li a img {
		width: 100%;
		height: auto;
	}
}