/*
 * EC デザインシステム
 * すべてのルールは .gec-ec スコープ配下に限定し、既存の一般ページ(giftテーマ)へのスタイル漏れを防ぐ。
 */

:root {
	--gec-bg: #F4F7F0;
	--gec-header-dark: #3A5536;
	--gec-header-border: #2E4429;
	--gec-hero-bg: #E3EDDA;
	--gec-brand: #4B6B45;
	--gec-accent: #F4C542;
	--gec-card-border: #D3E0C7;
	--gec-muted: #5B6B54;
	--gec-body-text: #221B14;
	--gec-disabled: #9CAE8F;
	--gec-badge-bg: #DCE8D3;
	--gec-badge-text: #3E6B36;
	--gec-error: #C0392B;
	--gec-radius-card: 6px;
	--gec-radius-btn: 4px;
	--gec-container-max: 1140px;
	--gec-font: 'Noto Sans JP', sans-serif;
}

/* ベース ------------------------------------------------------------ */

.gec-ec {
	background: var(--gec-bg);
	color: var(--gec-body-text);
	font-family: var(--gec-font);
}

.gec-ec .gec-container {
	max-width: var(--gec-container-max);
	margin: 0 auto;
	padding: 0 16px;
}

.gec-ec a {
	color: var(--gec-brand);
}

/*
 * スティッキーフッター: コンテンツが短いページ（マイページ等）でも
 * フッターが画面の一番下に固定されるようにする。
 * 親テーマの出力は page-detail.php 経由のページ（カート/チェックアウト/マイページ）だけ
 * <div id="content"> を閉じないまま footer.php に処理を委ねる作りになっており、
 * その結果 #footer の位置が「#wrapperの直接の子」になるページ（ショップ一覧・商品詳細）と
 * 「#wrapperの中（#content close後）」になるページ（マイページ等）とで異なる。
 * #wrapper を常にflexコンテナ化すると、ショップ一覧の .gec-shop-layout のような
 * 内部で独自にflexを使っている要素の幅計算まで崩れてしまうため、
 * #wrapper のflex化は「#contentを直接含むページ」だけに限定する。
 */
body.gec-ec {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body.gec-ec #wrapper {
	flex: 1 0 auto;
}

body.gec-ec #wrapper:has(> #content) {
	display: flex;
	flex-direction: column;
}

body.gec-ec #footer {
	margin-top: auto;
	flex-shrink: 0;
}

/* ヘッダー（giftのnavigation.phpをそのまま利用。配色はトップページと同一） ---- */
/*
 * #header（メニュー行 #33a039）・#topNav（ロゴ行 白）はgift本来の配色をそのまま使う。
 * ここではEC専用の追加要素（ロゴの透明化・ユーティリティ導線）だけを調整する。
 */

.gec-ec #topBar {
	display: none;
}

.gec-ec .logo.has-banner {
	background: transparent;
}

/* マイページ/ショップ/カートのユーティリティ（ロゴと同じ白い行、コンテナ右端に収まる） */

.gec-ec .header-inner > *:not(.gec-header-utility) {
	display: none;
}

.gec-ec .gec-header-utility {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 44px;
}

.gec-ec .gec-header-utility a {
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.gec-ec .gec-header-utility .wc-block-mini-cart__button {
	background: transparent;
	width: 38px;
	height: 38px;
	color: var(--gec-body-text);
}

/* フッター（giftのfooter.phpを再スキン） --------------------------------- */

.gec-ec .top-page-contact-bg {
	display: none !important;
}

/* ページタイトル / パンくず ------------------------------------------ */

.gec-ec .woocommerce-breadcrumb {
	background: var(--gec-hero-bg);
	padding: 16px 0;
	color: var(--gec-muted);
	font-size: 13px;
}

.gec-ec .woocommerce-breadcrumb a {
	color: var(--gec-muted);
}

/*
 * パンくず帯（.gec-breadcrumb-bar）。
 * ショップ一覧・カート・チェックアウト・マイページで、商品詳細ページと同じく
 * メニューのすぐ下に薄い帯としてパンくずのみを配置するための共通ラッパー。
 * 内側の .woocommerce-breadcrumb 自身の背景/paddingは二重にならないよう打ち消す
 * （帯の全幅背景は外側のこの要素が担当し、.gec-container で中央寄せする）。
 */
.gec-ec .gec-breadcrumb-bar {
	background: var(--gec-hero-bg);
	padding: 16px 0;
}

.gec-ec .gec-breadcrumb-bar .woocommerce-breadcrumb {
	background: none;
	padding: 0;
}

/*
 * ページタイトルは「/company/」の見出し（.section-title + .title-underline）に
 * 合わせて、左の緑ボーダーではなく、文字下のオレンジ色の短い下線で装飾する。
 */
.gec-ec .page-title,
.gec-ec h1.entry-title {
	display: inline-block;
	font-size: 28px;
	font-weight: 900;
	margin: 0;
}

.gec-ec .page-title::after,
.gec-ec h1.entry-title::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	background: var(--gec-accent);
}

/* ボタン ------------------------------------------------------------ */

.gec-ec .button,
.gec-ec button.button,
.gec-ec input.button,
.gec-ec a.button.alt,
.gec-ec button.button.alt,
.gec-ec input.button.alt,
.gec-ec .btn.gec-btn-primary {
	background: var(--gec-brand);
	color: #fff;
	border: none;
	border-radius: var(--gec-radius-btn);
	padding: 10px 18px;
	font-family: var(--gec-font);
	font-weight: 500;
	cursor: pointer;
}

.gec-ec .button:hover,
.gec-ec button.button:hover,
.gec-ec a.button.alt:hover,
.gec-ec button.button.alt:hover,
.gec-ec input.button.alt:hover {
	opacity: 0.9;
	color: #fff;
}

.gec-ec .gec-btn-dark {
	background: var(--gec-body-text);
}

/* カード / バッジ ----------------------------------------------------- */

.gec-ec .gec-card {
	background: #fff;
	border: 1px solid var(--gec-card-border);
	border-radius: var(--gec-radius-card);
}

.gec-ec .onsale,
.gec-ec .gec-badge {
	background: var(--gec-badge-bg);
	color: var(--gec-badge-text);
	font-size: 12px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	display: inline-block;
}

/* 価格 -------------------------------------------------------------- */

.gec-ec .price {
	color: var(--gec-brand);
	font-weight: 700;
}

.gec-ec .price del {
	color: var(--gec-disabled);
	font-weight: 400;
	margin-right: 6px;
}

.gec-ec .price ins {
	text-decoration: none;
}

/* ショップ一覧 --------------------------------------------------------- */

/*
 * タイトル帯（.gec-hero）。パンくず帯（.gec-breadcrumb-bar）のもう一段下に独立した
 * セクションとして配置し、一定の高さを持たせて見出しを縦方向中央に揃える。
 */
.gec-ec .gec-hero {
	background: var(--gec-hero-bg);
	min-height: 96px;
	display: flex;
	align-items: center;
}

.gec-ec .gec-shop-layout {
	display: flex;
	gap: 30px;
	padding-top: 32px;
	padding-bottom: 60px;
}

.gec-ec .gec-shop-main {
	flex: 3;
	min-width: 0;
}

.gec-ec .gec-shop-sidebar {
	flex: 1;
	min-width: 260px;
}

/*
 * 「全n件を表示」テキストと並び替えセレクトボックスは、素のテキストと
 * border+padding付きのフォームコントロールで元々の高さが揃っていないため、
 * 件数表示と小さめの並び替えセレクトを40pxの高さで揃える。
 */
.gec-ec .woocommerce-result-count {
	display: flex;
	align-items: center;
	height: 40px;
}

.gec-ec .woocommerce-ordering select.orderby {
	box-sizing: border-box;
	width: 170px;
	height: 40px;
	padding: 6px 10px;
}

/*
 * CSS Grid ではなく flexbox で2列組みにする。
 * ul.products は WooCommerce Blocks 側のCSS（wc-blocks.css）でも
 * grid関連のユーティリティクラスと衝突しやすく、grid-auto-flowが
 * 意図せず1カラムずつ縦積みになる不具合が確認されたため。
 */
.gec-ec ul.products {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * WooCommerceコアCSS（woocommerce-layout.css）が ul.products::before/::after に
 * clearfix用の content:" "; display:table を付与しており、display:flex化すると
 * これが見えないflexアイテムとして扱われ、2カラムの折り返し計算を狂わせるため無効化する。
 */
.gec-ec ul.products::before,
.gec-ec ul.products::after {
	content: none;
	display: none;
}

.gec-ec ul.products li.product {
	float: none;
	flex: 0 1 calc(50% - 12px);
	max-width: calc(50% - 12px);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 0 28px;
	background: #fff;
	border: 1px solid var(--gec-card-border);
	border-radius: var(--gec-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.gec-ec .gec-product-link {
	display: block;
	color: inherit;
}

.gec-ec .gec-thumb {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #EFEAE2 repeating-linear-gradient(45deg, #EFEAE2, #EFEAE2 10px, #E6DFD3 10px, #E6DFD3 20px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.gec-ec ul.products li.product .gec-thumb img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.gec-ec .gec-thumb .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	margin: 0;
}

.gec-ec .gec-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.gec-ec .gec-cat {
	font-size: 12px;
	color: var(--gec-brand);
	font-weight: 700;
	margin-bottom: 4px;
}

/*
 * 商品名の長さに関わらず価格・カートボタンの位置を揃えるため、
 * 高さをmin-heightではなく固定heightにし、2行を超える分は
 * line-clampで省略（…）する。
 * WooCommerceコアCSS（.woocommerce ul.products li.product .woocommerce-loop-product__title に
 * font-size:1em / padding:0.5em 0 を指定、詳細度0,4,2）がfont-size・paddingを
 * 上書きしてしまい、想定していたサイズ(15px・padding無し)よりheightが不足して
 * 2行目が中途半端に欠けて見えていたため、セレクタの詳細度をコアより高くして
 * 確実に上書きする。
 */
.gec-ec ul.products li.product .gec-body .woocommerce-loop-product__title {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	padding: 0;
	margin: 0 0 8px;
	height: 42px;
}

.gec-ec ul.products .price {
	display: block;
	font-size: 18px;
	margin-bottom: 14px;
}

/*
 * WooCommerceコアCSS（.woocommerce:where(...) a.button 等、:where()で無効化されない
 * 部分のみ数えても詳細度0,2,1）が .gec-ec .button（0,2,0）を上書きし、
 * 灰色背景のままになっていたため、詳細度をコアより高くして
 * ブランドカラーの背景・白文字を確実に適用する。
 */
.gec-ec ul.products .button.add_to_cart_button {
	margin-top: auto;
	width: 100%;
	text-align: center;
	background: var(--gec-brand);
	color: #fff;
	border: none;
}

.gec-ec ul.products .button.add_to_cart_button:hover {
	opacity: 0.9;
	color: #fff;
}

/*
 * 「お買い物カゴに追加」後に出るクラシックな「カゴを見る」リンク。
 * ミニカートドロワーが自動で開くようになった（addToCartBehaviour:open_drawer）ため
 * この従来のリンクは不要になり、二重表示になるので非表示にする。
 */
.gec-ec ul.products .added_to_cart.wc-forward,
.gec-ec .single_add_to_cart_button + .added_to_cart.wc-forward {
	display: none;
}

.gec-ec .gec-shop-sidebar .widget {
	background: #fff;
	border: 1px solid var(--gec-card-border);
	border-radius: var(--gec-radius-card);
	padding: 22px;
	margin-bottom: 20px;
}

.gec-ec .gec-shop-sidebar .widget-title {
	font-size: 17px;
	font-weight: 900;
	margin: 0 0 18px;
}

/*
 * 「絞り込み」＝WooCommerceの商品フィルターブロック（wc-block-product-filters）。
 * ウィジェット枠自体は.widgetで参考デザイン通りのカード化ができているが、
 * ブロック内の見出し(h2/h3.wp-block-heading)や価格の最小/最大入力欄は
 * WordPress/WooCommerceコアの既定スタイル（h2:30px, h3:24pxなど）のままのため、
 * 参考デザイン（Shop-WooCommerce-Content.html）の.widget-title/.filter-labelの
 * 見た目に合わせて上書きする。
 */
.gec-ec .wc-block-product-filters__overlay-content > h2.wp-block-heading {
	font-size: 17px;
	font-weight: 900;
	margin: 0 0 18px;
	color: var(--gec-body-text);
}

.gec-ec .wc-block-product-filters__overlay-content h3.wp-block-heading {
	font-size: 13px;
	font-weight: 700;
	color: var(--gec-muted);
	letter-spacing: 0.05em;
	margin: 0 0 10px;
}

.gec-ec .wc-block-product-filter-checkbox-list__label {
	font-size: 14px;
	gap: 8px;
	margin: 0 0 10px;
}

.gec-ec .wc-block-product-filter-price-slider__content {
	margin-bottom: 22px;
}

.gec-ec .wc-block-product-filter-price-slider__left input,
.gec-ec .wc-block-product-filter-price-slider__right input {
	border: none;
	background: transparent;
	padding: 0;
	font-size: 13px;
	color: var(--gec-body-text);
	width: auto;
	max-width: 70px;
}

.gec-ec .range-bar {
	background: var(--gec-brand);
}

.gec-ec .wc-block-product-filter-price-slider input[type="range"] {
	accent-color: var(--gec-brand);
}

.gec-ec .product-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gec-ec .product-categories li {
	margin: 0 0 10px;
	font-size: 14px;
}

@media (max-width: 767px) {
	.gec-ec .gec-shop-layout {
		flex-direction: column;
	}

	.gec-ec .gec-shop-sidebar {
		order: 1;
	}

	.gec-ec .gec-shop-main {
		order: 2;
	}

	/* スマホ幅では商品グリッドを2列から1列に切り替える */
	.gec-ec ul.products li.product {
		flex: 0 1 100%;
		max-width: 100%;
	}
}

/* 商品詳細 ------------------------------------------------------------ */

.gec-ec div.product {
	display: flex;
	flex-wrap: wrap;
	column-gap: 40px;
	row-gap: 32px;
	max-width: var(--gec-container-max);
	margin: 0 auto;
	padding: 32px 16px 60px;
	box-sizing: border-box;
}

.gec-ec div.product div.images {
	flex: 1 1 420px;
	margin-bottom: 0;
}

.gec-ec div.product div.images img {
	border-radius: var(--gec-radius-card);
	border: 1px solid var(--gec-card-border);
}

/* 商品ギャラリーのサムネイルを、変形しない小さな正方形で均等に並べる */
.gec-ec div.product div.images .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
	margin: 16px 0 0;
	padding: 0;
}

.gec-ec div.product div.images .flex-control-thumbs li {
	float: none;
	flex: 0 0 70px;
	width: 70px !important;
	height: 70px !important;
	margin: 0;
}

.gec-ec div.product div.images .flex-control-thumbs img {
	display: block;
	width: 70px !important;
	height: 70px !important;
	object-fit: cover;
}

.gec-ec div.product div.summary {
	flex: 1 1 420px;
	margin-bottom: 0;
}

.gec-ec div.product .product_title {
	font-size: 30px;
	font-weight: 900;
	margin: 0 0 16px;
	border-left: none;
	padding-left: 0;
}

.gec-ec div.product .product_title::after {
	content: none;
	display: none;
}

.gec-ec .woocommerce-product-rating {
	color: var(--gec-brand);
	margin-bottom: 10px;
	font-size: 14px;
}

.gec-ec .woocommerce-product-rating .star-rating {
	color: var(--gec-brand);
}

.gec-ec .woocommerce-product-rating .woocommerce-review-link {
	color: var(--gec-muted);
}

.gec-ec div.product p.price,
.gec-ec div.product .price {
	font-size: 26px;
	font-weight: 900;
	color: var(--gec-body-text);
	margin-bottom: 18px;
}

.gec-ec div.product .price del {
	font-size: 18px;
	font-weight: 400;
	color: var(--gec-disabled);
	margin-right: 10px;
}

.gec-ec div.product .price ins {
	text-decoration: none;
}

.gec-ec div.product .gec-inline-sale {
	position: static;
	margin-left: 10px;
	vertical-align: middle;
}

.gec-ec div.product .woocommerce-product-details__short-description {
	font-size: 15px;
	color: #3A4536;
	line-height: 1.8;
	margin-bottom: 22px;
}

/* 数量 + カートに追加ボタン（同じ行に横並び） */

.gec-ec form.cart {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}

.gec-ec .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--gec-card-border);
	border-radius: var(--gec-radius-btn);
}

.gec-ec .gec-qty-btn {
	width: 40px;
	height: 44px;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}

.gec-ec .quantity input.qty {
	width: 36px;
	height: 44px;
	text-align: center;
	border: none;
	margin: 0;
	padding: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}

.gec-ec .quantity input.qty::-webkit-outer-spin-button,
.gec-ec .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.gec-ec .single_add_to_cart_button {
	flex: 1;
}

.gec-ec .product_meta {
	font-size: 13px;
	color: var(--gec-muted);
	margin-bottom: 22px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--gec-card-border);
}

.gec-ec .product_meta a {
	color: var(--gec-muted);
}

.gec-ec .gec-trust-heading {
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.08em;
	color: var(--gec-brand);
	margin-bottom: 12px;
}

.gec-ec .gec-trust-badges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gec-ec .gec-trust-badges li {
	font-size: 14px;
	color: var(--gec-body-text);
	display: flex;
	align-items: center;
	gap: 8px;
}

/* 商品タブ */
/*
 * div.product は display:flex の2カラム構成（画像/サマリー）のため、
 * その中に含まれるタブ・関連商品・おすすめ商品もflexアイテムになってしまう。
 * flex-basis:100%で強制的に幅いっぱいの独立した行にする。
 */

.gec-ec .woocommerce-tabs {
	flex: 1 1 100%;
	clear: both;
	margin-top: 0;
}

.gec-ec .woocommerce-tabs ul.tabs {
	list-style: none;
	display: flex;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	border-bottom: 1px solid var(--gec-card-border);
}

.gec-ec .woocommerce-tabs ul.tabs li {
	margin: 0;
}

.gec-ec .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 12px 22px;
	color: var(--gec-muted);
	text-decoration: none;
	font-size: 14px;
	outline: none;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
}

.gec-ec .woocommerce-tabs ul.tabs li a:focus-visible {
	outline: 2px solid var(--gec-brand);
	outline-offset: -2px;
}

.gec-ec .woocommerce-tabs ul.tabs li.active a {
	color: var(--gec-brand);
	font-weight: 700;
}

.gec-ec .woocommerce-tabs .panel {
	font-size: 14px;
	color: #3A4536;
	line-height: 1.9;
	max-width: 760px;
}

/* 関連・おすすめ商品 */

.gec-ec .related.products,
.gec-ec .up-sells.upsells.products {
	flex: 1 1 100%;
	margin-top: 0;
	padding: 32px 0 0;
	border-top: 1px solid var(--gec-card-border);
	border-bottom: 0;
	background: transparent;
}

.gec-ec .related.products > h2,
.gec-ec .up-sells.upsells.products > h2 {
	display: inline-block;
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--gec-muted);
}

.gec-ec .related.products > h2::after,
.gec-ec .up-sells.upsells.products > h2::after {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 8px;
	background: var(--gec-accent);
}

.gec-ec .related.products ul.products,
.gec-ec .up-sells.upsells.products ul.products {
	column-gap: 16px;
}

.gec-ec .related.products ul.products li.product,
.gec-ec .up-sells.upsells.products ul.products li.product {
	flex: 0 1 calc(25% - 12px);
	max-width: calc(25% - 12px);
	margin-bottom: 0;
}

.gec-ec .related.products .gec-body,
.gec-ec .up-sells.upsells.products .gec-body {
	padding: 12px;
}

.gec-ec .related.products ul.products li.product .gec-body .woocommerce-loop-product__title,
.gec-ec .up-sells.upsells.products ul.products li.product .gec-body .woocommerce-loop-product__title {
	font-size: 14px;
	height: 40px;
}

.gec-ec .related.products ul.products .price,
.gec-ec .up-sells.upsells.products ul.products .price {
	font-size: 16px;
	margin-bottom: 10px;
}

.gec-ec .related.products ul.products .button.add_to_cart_button,
.gec-ec .up-sells.upsells.products ul.products .button.add_to_cart_button {
	padding: 9px 10px;
	font-size: 13px;
}

@media (max-width: 991px) {
	.gec-ec .related.products ul.products li.product,
	.gec-ec .up-sells.upsells.products ul.products li.product {
		flex-basis: calc(50% - 8px);
		max-width: calc(50% - 8px);
	}
}

@media (max-width: 767px) {
	.gec-ec div.product {
		flex-direction: column;
	}

	.gec-ec div.product div.images .flex-control-thumbs li,
	.gec-ec div.product div.images .flex-control-thumbs img {
		flex-basis: 64px;
		width: 64px !important;
		height: 64px !important;
	}
}

/* カート・チェックアウト（WooCommerceブロック） -------------------------- */

.gec-ec .wp-block-woocommerce-cart,
.gec-ec .wp-block-woocommerce-checkout {
	max-width: var(--gec-container-max);
	margin: 0 auto;
	padding: 32px 16px 60px;
}

/*
 * チェックアウトはヘッダーのバナー／メニューと同じBootstrapコンテナ幅に揃える。
 * カートには既存の幅を維持し、チェックアウトの本文・パンくず・タイトル帯だけを
 * 1170px / 左右15pxに統一する。
 */
.gec-ec.woocommerce-checkout .wp-block-woocommerce-checkout,
.gec-ec.woocommerce-checkout .gec-breadcrumb-bar .gec-container,
.gec-ec.woocommerce-checkout .gec-hero .gec-container {
	width: 100%;
	max-width: 1170px;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}

.gec-ec.woocommerce-checkout .gec-hero .gec-container {
	text-align: center;
}

/* PC表示ではチェックアウトの入力欄と注文概要の間に視覚的な余白を設ける。 */
@media (min-width: 700px) {
	.gec-ec.woocommerce-checkout .wc-block-components-sidebar-layout {
		gap: 24px;
	}

	.gec-ec.woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-main {
		width: calc(65% - 12px);
	}

	.gec-ec.woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
		width: calc(35% - 12px);
	}
}

/* 注文完了後の受付内容もヘッダーと同じ左右ラインに揃える。 */
.gec-ec.woocommerce-order-received .woocommerce-order {
	width: 100%;
	max-width: 1170px;
	margin: 0 auto;
	padding: 32px 15px 60px;
	box-sizing: border-box;
}

.gec-ec .wc-block-cart-items,
.gec-ec .wc-block-components-sidebar,
.gec-ec .wc-block-checkout__main,
.gec-ec .wc-block-checkout__sidebar {
	background: #fff;
	border: 1px solid var(--gec-card-border);
	border-radius: var(--gec-radius-card);
	padding: 20px;
}

/*
 * WooCommerceコアCSS（table.wc-block-cart-items { background:none; }）が
 * 上のカード背景指定を打ち消し、ページ全体の薄緑色が透けて見えるため、
 * 確実に白背景にする。
 */
.gec-ec table.wc-block-cart-items {
	background: #fff !important;
}

.gec-ec .wc-block-cart__totals-title {
	font-size: 18px;
	font-weight: 900;
	margin: 0 0 16px;
}

.gec-ec .wc-block-cart__submit-button,
.gec-ec .wc-block-components-checkout-place-order-button {
	border: none;
	border-radius: var(--gec-radius-btn);
	font-weight: 700;
}

.gec-ec .wc-block-components-checkout-place-order-button {
	background: var(--gec-body-text);
}

.gec-ec .wc-block-cart__submit-button {
	background: var(--gec-brand);
	color: #fff;
}

.gec-ec .wc-block-cart__submit-button:hover,
.gec-ec .wc-block-components-checkout-place-order-button:hover {
	opacity: 0.9;
	color: #fff;
}

.gec-ec .wc-block-components-totals-item__value,
.gec-ec .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-weight: 700;
}

/*
 * カート画面（参考データ: Cart.dc.html）に合わせた調整。
 * ・商品説明の抜粋はモックアップに存在しないため非表示にする。
 * ・商品名下の単価はグレーの補足情報、右列の行合計は黒字の太字、と
 *   役割が異なるのに、両方とも同じ .price クラスで緑・太字になっていたため分離する。
 * ・「推定合計額」はモックアップ通りブランドグリーン・17px・900に。
 * ・削除ボタン（ゴミ箱アイコン）はモックアップの補助色(#9CAE8F)に合わせる。
 */
.gec-ec .wc-block-components-product-metadata__description {
	display: none;
}

.gec-ec .wc-block-cart-item__prices .price {
	color: var(--gec-muted);
	font-weight: 400;
}

.gec-ec .wc-block-cart-item__total .price {
	color: var(--gec-body-text);
	font-weight: 700;
}

.gec-ec .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.gec-ec .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 17px;
	font-weight: 900;
}

.gec-ec .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--gec-brand);
}

.gec-ec .wc-block-cart-item__remove-link {
	color: var(--gec-disabled);
}

/*
 * ここから先はカートページ（/shop/cart/）本体の商品明細テーブル専用の調整。
 * ミニカートドロワーも同じクラス名（wc-block-cart-item__image 等）を共有しているが
 * 幅が大きく異なるため、.wp-block-woocommerce-cart-line-items-block
 * （カートページ本体のテーブルのみに存在する外枠）でスコープし、
 * ドロワー側に影響しないようにする。
 */

/*
 * ヘッダー行（商品／合計）：背景をブランドグリーンにし、白文字・太字で強調する。
 * 上下パディングを対称にしてバーの縦中央にテキストを揃える。
 */
.gec-ec .wp-block-woocommerce-cart-line-items-block .wc-block-cart-items__header {
	background: var(--gec-brand);
}

.gec-ec .wp-block-woocommerce-cart-line-items-block .wc-block-cart-items__header-image,
.gec-ec .wp-block-woocommerce-cart-line-items-block .wc-block-cart-items__header-product,
.gec-ec .wp-block-woocommerce-cart-line-items-block .wc-block-cart-items__header-total {
	padding: 10px 16px 10px 0;
	vertical-align: middle;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

/*
 * 「商品」の見出しは画像列(先頭100px)の上に描画されるが、実際の商品名は
 * 画像列の右隣の列から始まるため、見出しの位置がずれて見える。
 * 商品名の開始位置（画像列の幅=100px分）までテキストをずらして、
 * 見た目の開始位置を商品名と揃える。
 */
.gec-ec .wp-block-woocommerce-cart-line-items-block .wc-block-cart-items__header-image {
	position: relative;
}

.gec-ec .wp-block-woocommerce-cart-line-items-block .wc-block-cart-items__header-image span {
	position: absolute;
	left: 120px;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
}

/*
 * 商品画像：行の縦中央に配置し、既定の63.5pxよりひと回り大きくする。
 * table が border-collapse:collapse のため table 側のpaddingが効かず、
 * 画像が枠の左端に張り付いて見えるので、セル自体に左パディングを持たせる。
 */
.gec-ec .wp-block-woocommerce-cart-line-items-block .wc-block-cart-item__image {
	width: 120px;
	padding-left: 20px !important;
	vertical-align: middle;
}

.gec-ec .wp-block-woocommerce-cart-line-items-block .wc-block-cart-item__image img {
	width: 84px;
	height: 84px;
}

/*
 * 行ごとの合計金額：WooCommerceコアCSSがこのセルにdisplay:flexを指定しており、
 * table-cellとしての行高さ同期・縦中央揃えが効かなくなっている
 * （table-row内の他セルと高さが揃わず、常にセル上端に張り付く）。
 * table-cell表示に戻して縦中央揃えを復活させる。
 * 「合計」見出しと金額は右揃いだと枠の端に寄って見えるため、左揃いにする。
 */
.gec-ec .wp-block-woocommerce-cart-line-items-block .wc-block-cart-items__header-total {
	text-align: left !important;
}

.gec-ec .wp-block-woocommerce-cart-line-items-block .wc-block-cart-item__total {
	display: table-cell !important;
	vertical-align: middle !important;
	text-align: left !important;
	padding-left: 16px !important;
}

.gec-ec .wp-block-woocommerce-cart-line-items-block .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	align-items: flex-start;
}

.gec-ec .wp-block-woocommerce-cart-line-items-block .wc-block-cart-item__total .price {
	font-size: 16px;
}

/* ミニカートドロワー */

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wp-element-button:last-child {
	background: var(--gec-brand);
	color: #fff;
	border-color: var(--gec-brand);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button {
	background: var(--gec-brand);
	color: #fff;
	border-color: var(--gec-brand);
}

/*
 * カートページ（/shop/cart/）が空の時に表示される「ショッピング開始」ボタンと、
 * 「新登場」商品カードの「カートに追加」ボタン。どちらもGutenbergの
 * ボタンブロック（.wp-block-button__link）を使っているため、まとめて
 * ブランドカラーの配色に揃える。
 */
.gec-ec .wp-block-woocommerce-empty-cart-block .wp-block-button__link {
	background: var(--gec-brand);
	color: #fff;
	border-radius: var(--gec-radius-btn);
	font-weight: 700;
}

.wc-block-mini-cart__drawer .wp-element-button {
	border-radius: var(--gec-radius-btn);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal {
	justify-content: flex-end;
	gap: 10px;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__label {
	flex: 0 0 auto;
}

/*
 * カート商品明細テーブルは border-collapse:collapse のため、table要素自体に
 * 指定されたpaddingが行内容に反映されない（CSS仕様上の既定挙動）。
 * そのため各明細行の小計（右端列）が枠の端に張り付いて見える。
 * table側のpaddingに頼らず、セル自体に右パディングを入れて内側に収める。
 * （ミニカート幅は699px未満のためWooCommerce core側の @container 内の
 *  `td { padding:0 }` が効いてしまう。それより詳細度を上げて上書きする。）
 */
.wc-block-mini-cart__drawer .wc-block-cart-items__row .wc-block-cart-item__total {
	padding-right: 20px;
}

/* 同じ理由（border-collapse + @container の td padding:0）で商品画像も枠の左端に張り付くため、左余白を持たせる */
.wc-block-mini-cart__drawer .wc-block-cart-items__row .wc-block-cart-item__image {
	padding-left: 16px !important;
}

/* ドロワーのタイトル：カートページの見出し（h1.page-title）と同じオレンジ下線装飾に統一 */
.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 8px;
	margin: 24px 20px;
	font-size: 22px;
	font-weight: 900;
	color: var(--gec-body-text);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__title::after {
	content: "";
	flex-basis: 100%;
	width: 40px;
	height: 3px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	background: var(--gec-accent);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__title .wp-block-woocommerce-mini-cart-title-items-counter-block {
	font-size: 13px;
	font-weight: 500;
	color: var(--gec-muted);
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close {
	color: var(--gec-brand);
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover {
	color: var(--gec-body-text);
	background: var(--gec-hero-bg);
}

/* マイページ ----------------------------------------------------------- */
/*
 * 実際のDOM構造は #content > (.gec-hero, div.woocommerce > (nav.woocommerce-MyAccount-navigation, div.woocommerce-MyAccount-content))。
 * #content自体には幅制約をかけない（.gec-heroの背景を他ページ同様に画面全幅にするため）。
 * 幅制約と横並びレイアウトは、nav/contentを直接包んでいる div.woocommerce 側にだけ適用する。
 * 幅はメニュー・パンくずと完全に揃えるため、独自の--gec-container-max（1140px/16px）ではなく
 * gift本来のBootstrap .container（1170px/15pxパディング）と同じ値を使う。
 */

.gec-ec .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	max-width: 1170px;
	margin: 0 auto;
	padding: 32px 0 60px;
	align-items: flex-start;
	box-sizing: border-box;
}

.gec-ec.woocommerce-account .gec-hero .gec-container,
.gec-ec.woocommerce-account .gec-breadcrumb-bar .gec-container {
	max-width: 1170px;
	padding: 0 15px;
}

.gec-ec .woocommerce-MyAccount-navigation {
	flex: 0 0 240px;
	background: #fff;
	border: 1px solid var(--gec-card-border);
	border-radius: var(--gec-radius-card);
	padding: 12px;
}

.gec-ec .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gec-ec .woocommerce-MyAccount-navigation li {
	margin: 0 0 4px;
}

.gec-ec .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--gec-radius-btn);
	color: var(--gec-body-text);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}

.gec-ec .woocommerce-MyAccount-navigation li a:hover {
	background: var(--gec-hero-bg);
}

.gec-ec .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--gec-brand);
	color: #fff;
}

.gec-ec .woocommerce-MyAccount-content {
	flex: 1;
	min-width: 280px;
	background: #fff;
	border: 1px solid var(--gec-card-border);
	border-radius: var(--gec-radius-card);
	padding: 28px;
}

.gec-ec .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.gec-ec .woocommerce-MyAccount-content table.shop_table th,
.gec-ec .woocommerce-MyAccount-content table.shop_table td {
	padding: 10px;
	border-bottom: 1px solid var(--gec-card-border);
	text-align: left;
}

.gec-ec .woocommerce-MyAccount-content .woocommerce-Button {
	display: inline-block;
}

.gec-ec .woocommerce-MyAccount-content fieldset {
	border: 1px solid var(--gec-card-border);
	border-radius: var(--gec-radius-card);
	padding: 16px;
	margin-top: 20px;
}

@media (max-width: 767px) {
	.gec-ec .woocommerce-MyAccount-navigation {
		flex: 1 1 100%;
	}
}

/*
 * 住所ページ（請求先/お届け先住所）。
 * WooCommerceのmy-address.phpは「1番目/2番目のカラム」の意味で .col-1 / .col-2 という
 * クラス名を出力するが、gift親テーマが読み込むBootstrapの12分割グリッドクラス .col-1 / .col-2
 * （それぞれ8.33%・16.67%幅）とクラス名が衝突し、極端に狭い幅になってしまう。
 * Bootstrap側の float / width / flex-basis を明示的に上書きして正しい2カラムにする。
 */

.gec-ec .woocommerce-Addresses.col2-set {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

/* WooCommerceコアCSSが付与するclearfix用の::before/::afterがflexアイテム化するのを防ぐ */
.gec-ec .woocommerce-Addresses.col2-set::before,
.gec-ec .woocommerce-Addresses.col2-set::after {
	content: none;
	display: none;
}

.gec-ec .woocommerce-Addresses .woocommerce-Address {
	float: none;
	flex: 1 1 calc(50% - 12px);
	max-width: calc(50% - 12px);
	width: auto;
	min-width: 260px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--gec-card-border);
	border-radius: var(--gec-radius-card);
	padding: 20px;
}

.gec-ec .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.gec-ec .woocommerce-Address-title h2 {
	font-size: 16px;
	font-weight: 900;
	margin: 0;
}

.gec-ec .woocommerce-Address-title .edit {
	font-size: 13px;
}

.gec-ec .woocommerce-Address address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.8;
	color: var(--gec-body-text);
}

@media (max-width: 767px) {
	.gec-ec .woocommerce-Addresses .woocommerce-Address {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/*
 * 注文詳細（マイページ > 注文 > 表示）ページの見た目を整える。
 *
 * ページ下部の請求先・お届け先住所は .woocommerce-columns.col2-set の中に
 * .woocommerce-column.col-1 / .col-2 が並ぶ構造で、上の住所帳（.woocommerce-Address）
 * とは別クラス名だが同じくBootstrapの12分割グリッドクラス .col-1 / .col-2 と衝突し、
 * 極端に狭い幅に潰れる同じ不具合が起きる。同じ手法でリセットする。
 */
.gec-ec .woocommerce-columns.col2-set {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0 0 40px;
}

.gec-ec .woocommerce-columns.col2-set::before,
.gec-ec .woocommerce-columns.col2-set::after {
	content: none;
	display: none;
}

.gec-ec .woocommerce-columns .woocommerce-column {
	float: none;
	flex: 1 1 calc(50% - 12px);
	max-width: calc(50% - 12px);
	width: auto;
	min-width: 260px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--gec-card-border);
	border-radius: var(--gec-radius-card);
	padding: 20px;
}

.gec-ec .woocommerce-column__title {
	font-size: 16px;
	font-weight: 900;
	margin: 0 0 12px;
}

.gec-ec .woocommerce-column address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.8;
	color: var(--gec-body-text);
}

@media (max-width: 767px) {
	.gec-ec .woocommerce-columns .woocommerce-column {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* 注文明細テーブルもカードとして枠を付け、見出し行を目立たせる */
.gec-ec table.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--gec-card-border);
	border-radius: var(--gec-radius-card);
	overflow: hidden;
	margin: 0 0 40px;
}

.gec-ec table.woocommerce-table--order-details th,
.gec-ec table.woocommerce-table--order-details td {
	padding: 14px 20px;
	border-top: 1px solid var(--gec-card-border);
	text-align: left;
}

.gec-ec table.woocommerce-table--order-details thead th {
	background: var(--gec-hero-bg);
	border-top: none;
	font-size: 13px;
	font-weight: 700;
	color: var(--gec-muted);
}

.gec-ec table.woocommerce-table--order-details tfoot th {
	font-weight: 700;
}

/*
 * gift親テーマの汎用 section { padding:100px 0; } がここにも適用され、
 * 「注文詳細」テーブルと住所カードの間、住所カードの下に巨大な余白ができていたため打ち消す。
 */
.gec-ec .woocommerce-order-details,
.gec-ec .woocommerce-customer-details {
	padding: 0;
	margin: 0 0 32px;
}

/*
 * 注文完了画面では、注文詳細と住所をマイページ右側と同じカードとして見せる。
 * 内部要素の既存下余白はカードのpaddingと重複するため、この画面だけ打ち消す。
 */
.gec-ec.woocommerce-order-received .woocommerce-order-details,
.gec-ec.woocommerce-order-received .woocommerce-customer-details {
	background: #fff;
	border: 1px solid var(--gec-card-border);
	border-radius: var(--gec-radius-card);
	padding: 28px;
	box-sizing: border-box;
}

.gec-ec.woocommerce-order-received .woocommerce-order-details table {
	margin-bottom: 0;
}

.gec-ec.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns {
	margin-bottom: 0;
	padding: 0;
	border-bottom: 0;
}

@media (max-width: 767px) {
	.gec-ec.woocommerce-order-received .woocommerce-order-details,
	.gec-ec.woocommerce-order-received .woocommerce-customer-details {
		padding: 20px;
	}
}

/* ログイン・新規登録（未ログイン時のマイページ） -------------------------- */

.gec-ec #customer_login {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	max-width: 1170px;
	margin: 0 auto;
	padding: 40px 15px 60px;
	box-sizing: border-box;
}

/*
 * ログイン/登録の各カラムはBootstrapの .col-1 / .col-2（12分割グリッド用、
 * width/max-width:8.33%系）と同名のクラスを持つため、flex:1指定があっても
 * max-widthに縛られてmin-width(260px)止まりになっていた。
 * 幅指定を明示的にリセットしてflexで均等に伸びるようにする。
 */
.gec-ec #customer_login > div {
	flex: 1 1 0;
	width: auto;
	max-width: none;
	min-width: 260px;
	background: #fff;
	border: 1px solid var(--gec-card-border);
	border-radius: 8px;
	padding: 32px;
}

/*
 * スマホ幅ではmin-width:260px同士がまだ横に並べる余地があるため
 * 2カラムのまま詰まって表示されてしまう。縦積みにして中央揃えにし、
 * ログイン/登録どちらのカードも同じ幅・同じ左右余白で揃うようにする。
 */
@media (max-width: 767px) {
	.gec-ec #customer_login {
		flex-direction: column;
		align-items: center;
	}

	.gec-ec #customer_login > div {
		flex: none;
		width: 100%;
		max-width: 420px;
	}
}

/*
 * 新規登録が無効（既定）の場合、#customer_login の中身はログインカード1枚のみになる。
 * flex:1 1 0 のままだと唯一の子要素がセクション幅いっぱい(1170px)まで伸びてしまうため、
 * 単独表示のときだけ幅を抑えて中央寄せにする（登録カードと並ぶ2カラム時は従来どおり）。
 */
.gec-ec #customer_login > div:only-child {
	flex: none;
	width: 100%;
	max-width: 440px;
	margin: 0 auto;
}

.gec-ec #customer_login h2 {
	font-size: 18px;
	font-weight: 900;
	margin: 0 0 18px;
}

/*
 * Bootstrapの .form-row（グリッド用ユーティリティ、display:flex）と
 * WooCommerceの .woocommerce-form-row（意味の異なる別物）がクラス名衝突しており、
 * パスワード欄などラベルが短い行でラベルと入力欄が横並びになってしまうため、
 * 明示的にblockへ戻す。
 */
.gec-ec .woocommerce-form-row {
	display: block;
	margin: 0 0 14px;
}

/*
 * ログインフォームの「ログイン状態を保存」チェックボックスと「ログイン」ボタンは
 * 同じ1行（p.form-row、woocommerce-form-rowクラスなし）に入っている。
 * 「登録」ボタンと同じく全幅ボタンにするため、チェックボックスを上、
 * ボタンをその下に全幅で配置する（ボタン自体がdisplay:blockなので
 * 自然に折り返される）。
 */
.gec-ec .woocommerce-form-login p.form-row:not(.woocommerce-form-row) {
	display: block;
	margin: 0 0 14px;
}

.gec-ec .woocommerce-form-login__rememberme {
	display: block;
	margin: 0 0 12px;
}

.gec-ec #customer_login .woocommerce-form-login__submit {
	display: block;
	width: 100%;
	padding: 12px 0;
	margin-left: 0 !important;
}

.gec-ec .woocommerce-form-row label {
	display: block;
	font-size: 13px;
	color: var(--gec-muted);
	margin-bottom: 6px;
}

.gec-ec .woocommerce-form-row .input-text {
	width: 100%;
}

/*
 * ログイン/登録フォームは参考データ（Register.dc.html）に合わせて、
 * ラベルの太字・濃色、入力欄の高さ(46px)、注意書きの控えめな見た目、
 * 「登録する」ボタンの全幅表示を調整する。他のフォーム（住所編集等）に
 * 影響しないよう #customer_login 配下に限定する。
 */
.gec-ec #customer_login .woocommerce-form-row label {
	font-weight: 700;
	color: #3A4536;
}

.gec-ec #customer_login .woocommerce-form-row .input-text {
	height: 46px;
	box-sizing: border-box;
}

.gec-ec #customer_login .woocommerce-privacy-policy-text {
	font-size: 12px;
	color: var(--gec-muted);
	margin-bottom: 20px;
}

.gec-ec #customer_login .woocommerce-form-login__submit,
.gec-ec #customer_login .woocommerce-form-register__submit {
	font-weight: 700;
}

.gec-ec #customer_login .woocommerce-form-register__submit {
	display: block;
	width: 100%;
	padding: 12px 0;
}

/*
 * 「パスワードをお忘れの場合」ページ。ログイン/登録カードと同じ見た目
 * （参考データ Register.dc.html の単一フォームカード）に合わせて、
 * 中央寄せの白いカードの中にフォーム一式を収める。
 */
.gec-ec.woocommerce-lost-password #content > div.woocommerce {
	max-width: 1170px;
	margin: 0 auto;
	padding: 40px 15px 60px;
	box-sizing: border-box;
}

.gec-ec.woocommerce-lost-password form.woocommerce-ResetPassword {
	max-width: 440px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--gec-card-border);
	border-radius: 8px;
	padding: 32px;
	box-sizing: border-box;
}

.gec-ec.woocommerce-lost-password form.woocommerce-ResetPassword > p:first-child {
	font-size: 14px;
	color: var(--gec-muted);
	margin: 0 0 20px;
}

.gec-ec.woocommerce-lost-password .woocommerce-form-row label {
	font-weight: 700;
	color: #3A4536;
}

/*
 * WooCommerceコアCSS（.woocommerce form .form-row-first { width:47% }）が
 * 効いて欄が半分の幅になっていたため、全幅に上書きする。
 */
.gec-ec.woocommerce-lost-password .woocommerce-form-row.form-row-first,
.gec-ec.woocommerce-lost-password .woocommerce-form-row.form-row-last {
	width: 100%;
}

.gec-ec.woocommerce-lost-password .woocommerce-form-row .input-text {
	width: 100%;
	height: 46px;
	box-sizing: border-box;
}

.gec-ec.woocommerce-lost-password form.woocommerce-ResetPassword .woocommerce-Button {
	display: block;
	width: 100%;
	padding: 12px 0;
	font-weight: 700;
}

/*
 * マイページ内フォーム（住所編集など）共通スタイル。
 * 「アカウント詳細」フォームの行には woocommerce-form-row クラスが付くが、
 * 住所編集フォーム（edit-address）の行は form-row のみ（woocommerce-接頭辞なし）で
 * 出力されるため、上のルールが当たらず見た目が揃っていなかった。
 * 同じ体裁になるよう、マイページのコンテンツ内に限定して .form-row にも適用する。
 */
.gec-ec .woocommerce-MyAccount-content .form-row {
	display: block;
	margin: 0 0 14px;
}

.gec-ec .woocommerce-MyAccount-content .form-row label {
	display: block;
	font-size: 13px;
	color: var(--gec-muted);
	margin-bottom: 6px;
}

.gec-ec .woocommerce-MyAccount-content .form-row .input-text,
.gec-ec .woocommerce-MyAccount-content .form-row select {
	width: 100%;
	box-sizing: border-box;
}

/* フォーム ------------------------------------------------------------ */

.gec-ec input[type="text"],
.gec-ec input[type="email"],
.gec-ec input[type="tel"],
.gec-ec input[type="number"],
.gec-ec input[type="password"],
.gec-ec select,
.gec-ec textarea {
	border: 1px solid var(--gec-card-border);
	border-radius: var(--gec-radius-btn);
	padding: 8px 12px;
	font-family: var(--gec-font);
}

.gec-ec .required {
	color: var(--gec-error);
}

/*
 * 都道府県セレクト（Select2）。
 * 実際に見えているのはネイティブ<select>ではなくSelect2が生成する.select2-selection要素で、
 * デフォルトのheight/line-heightの組み合わせによりテキストが縦方向に下寄りになるため、
 * flexで確実に中央揃えする。
 */
.gec-ec .select2-container .select2-selection--single {
	height: auto;
	min-height: 41px;
	border: 1px solid var(--gec-card-border);
	border-radius: var(--gec-radius-btn);
	display: flex;
	align-items: center;
}

.gec-ec .select2-container .select2-selection__rendered {
	line-height: 1.4;
	padding: 8px 20px 8px 12px;
}

.gec-ec .select2-container .select2-selection__arrow {
	height: 100%;
}