/*
Theme Name:   Storefront Child
Theme URI:    https://woocommerce.com/products/storefront/
Description:  Storefront の子テーマ。真山ギャラリー ショップ用カスタマイズ。
Author:       kaname
Template:     storefront
Version:      1.5.0
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  storefront-child
*/

/* ================================================================
   デザイン方針：
   - 白ベース × 黒文字のモノクロ（差し色なし）
   - ゴシックのまま、細めのウェイト＋広い字間で「静かな高級感」
   - ナビは TCD 風の全幅黒帯（白文字・ゆったり配置・ダークな
     ドロップダウン）
   ================================================================ */

/* ----------------------------------------------------------------
   1. 基礎（フォント・文字色・見出し）
   ---------------------------------------------------------------- */
body,
button,
input,
textarea,
select {
	font-family: "Lato", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
		"Noto Sans JP", "Yu Gothic Medium", YuGothic, Meiryo, sans-serif;
	color: #222;
}

h1, h2, h3, h4, h5, h6 {
	color: #111;
	font-weight: 400;
	letter-spacing: .08em;
}

a {
	color: #111;
}

body {
	background-color: #fff;
}

/* ----------------------------------------------------------------
   2-0. トップバー（ヘッダー最上部の細い帯：通貨＝左、言語＝右）
        子テーマ functions.php の storefront_child_topbar() が出力
   ---------------------------------------------------------------- */
.sf-topbar {
	background-color: #fafafa;
	border-bottom: 1px solid #eee;
	font-size: 11px;
	letter-spacing: .06em;
	position: relative;
	z-index: 1000;
}

.sf-topbar .col-full {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 20px;
	padding-top: 1px;
	padding-bottom: 1px;
}

/* プラグイン側のスタイルに関係なく、通貨は左端・言語は右端に寄せる */
.sf-topbar__currency {
	margin-right: auto;
	text-align: left;
}

.sf-topbar__lang {
	margin-left: auto;
	text-align: right;
}

.sf-topbar a {
	color: #333;
	text-decoration: none;
}

/* --- 通貨（FOX ショートコード）をフラットな見た目に --- */
.sf-topbar .woocommerce-currency-switcher-form {
	margin: 0;
}

.sf-topbar select.woocommerce-currency-switcher {
	border: 0;
	background: transparent;
	font-size: 11px;
	font-weight: 600;
	color: #333;
	padding: .2em 1.4em .2em .2em;
	box-shadow: none;
}

.sf-topbar .dd-container,
.sf-topbar .dd-select {
	background: transparent !important;
	border: 0 !important;
	width: auto !important;
}

.sf-topbar .dd-selected {
	padding: 0 1.6em 0 0;
	color: #333;
	font-weight: 600;
}

.sf-topbar .dd-options {
	border: 1px solid #eee;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
	width: auto !important;
	min-width: 120px;
}

/* FOXの「フラグ表示」（アップロードした通貨アイコン画像）を小さく統一 */
.sf-topbar__currency {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sf-topbar .woocs_flag_view_item {
	display: inline-flex;
	align-items: center;
	opacity: .45;
	transition: opacity .2s ease;
}

.sf-topbar .woocs_flag_view_item img {
	width: 18px;
	height: 18px;
	object-fit: contain;
	display: block;
}

/* アイコンの横に通貨コード（USD / JPY）を文字で表示して分かりやすく
   （HTMLの data-currency 属性から自動で取ってくる） */
.sf-topbar .woocs_flag_view_item::after {
	content: attr(data-currency);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	margin-left: 4px;
	color: #333;
}

/* 選択中の通貨だけくっきり表示 */
.sf-topbar .woocs_flag_view_item_current,
.sf-topbar .woocs_flag_view_item:hover {
	opacity: 1;
}

/* --- 言語（TranslatePress ショートコード）をフラットな見た目に ---
   新TRPは設定画面の配色をインラインCSS変数（--bg 等）で埋め込むため、
   その変数自体を !important で上書きする（黒箱の根本対策） */
.sf-topbar .trp-shortcode-switcher__wrapper {
	--bg: transparent !important;
	--bg-hover: rgba(0, 0, 0, .05) !important;
	--text: #333333 !important;
	--text-hover: #111111 !important;
	--border: 0 solid transparent !important;
	--border-color: transparent !important;
	--flag-size: 13px !important;
	--font-size: 11px !important;
}

/* JAボタン（帯に見えている部分だけ）の内側余白と矢印を詰めて、帯を薄くする */
.sf-topbar .trp-current-language-item__wrapper,
.sf-topbar .trp-current-language-item__wrapper .trp-language-item {
	padding-top: 1px !important;
	padding-bottom: 1px !important;
	line-height: 1.2;
}

/* ドロップダウン内のリストは触らない（クリックしやすい余白を維持） */
.sf-topbar .trp-switcher-dropdown-list .trp-language-item {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.sf-topbar .trp-shortcode-arrow {
	width: 13px;
	height: 13px;
}

/* 開いたときの言語リストは白パネルに固定 */
.sf-topbar .trp-switcher-dropdown-list {
	background: #fff !important;
	border: 1px solid #eee !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .1) !important;
}

.sf-topbar .trp-switcher-dropdown-list .trp-language-item,
.sf-topbar .trp-switcher-dropdown-list .trp-language-item-name {
	color: #111 !important;
}

/* ----------------------------------------------------------------
   2. ヘッダー上段（白エリア：サイト名・検索）
   ---------------------------------------------------------------- */
.site-header {
	background-color: #fff;
	border-bottom: 0;
	color: #222;
}

.site-branding .site-title,
.site-branding .site-title a {
	color: #111;
	font-weight: 500;
	letter-spacing: .14em;
}

.site-branding .site-description {
	color: #888;
	letter-spacing: .1em;
}

/* 検索窓：箱型をやめて下線だけのミニマルな形に */
.site-search .widget_product_search input[type="search"],
.site-search .widget_product_search input[type="text"] {
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid #ddd;
	border-radius: 0;
	box-shadow: none;
	letter-spacing: .05em;
	transition: border-color .25s ease;
}

.site-search .widget_product_search input[type="search"]:focus,
.site-search .widget_product_search input[type="text"]:focus {
	background-color: transparent;
	border-bottom-color: #111;
}

/* ----------------------------------------------------------------
   3. メインナビゲーション（全幅の黒帯・TCD風）
   ---------------------------------------------------------------- */
.storefront-primary-navigation {
	background-color: #1a1a1a;
}

/* メニュー項目：小さめ・細め・広い字間・ゆったりした余白 */
.storefront-primary-navigation .main-navigation ul.menu > li > a,
.storefront-primary-navigation .main-navigation ul.nav-menu > li > a {
	color: rgba(255, 255, 255, .88);
	font-size: .8125em;
	font-weight: 500;
	letter-spacing: .14em;
	padding: 1.6em 1.15em;
	transition: color .25s ease, background-color .25s ease;
}

.storefront-primary-navigation .main-navigation ul.menu > li > a:hover,
.storefront-primary-navigation .main-navigation ul.menu > li:hover > a,
.storefront-primary-navigation .main-navigation ul.nav-menu > li > a:hover {
	color: #fff;
	background-color: rgba(255, 255, 255, .08);
}

/* 現在表示中のページ */
.storefront-primary-navigation ul.menu li.current-menu-item > a,
.storefront-primary-navigation ul.menu li.current_page_item > a {
	color: #fff;
	background-color: rgba(255, 255, 255, .12);
}

/* ドロップダウン：ダークパネル */
.storefront-primary-navigation .main-navigation ul.menu ul,
.storefront-primary-navigation .main-navigation ul.nav-menu ul {
	background-color: #222;
	border: 0;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}

.storefront-primary-navigation .main-navigation ul.menu ul li a,
.storefront-primary-navigation .main-navigation ul.nav-menu ul li a {
	color: rgba(255, 255, 255, .8);
	font-size: .8125em;
	letter-spacing: .12em;
	padding: 1em 1.4em;
}

.storefront-primary-navigation .main-navigation ul.menu ul a:hover,
.storefront-primary-navigation .main-navigation ul.menu ul li:hover > a,
.storefront-primary-navigation .main-navigation ul.nav-menu ul a:hover,
.storefront-primary-navigation .main-navigation ul.nav-menu ul li:hover > a {
	color: #fff;
	background-color: rgba(255, 255, 255, .08);
}

/* 黒帯右側のカート表示 */
.storefront-primary-navigation .site-header-cart .cart-contents,
.storefront-primary-navigation .site-header-cart .cart-contents:hover {
	color: #fff;
	letter-spacing: .05em;
}

.storefront-primary-navigation .site-header-cart .cart-contents .count {
	color: rgba(255, 255, 255, .6);
}

/* カートのドロップダウン（中身プレビュー）は白パネルのまま */
.site-header-cart .widget_shopping_cart {
	background-color: #fff;
	border: 1px solid #eee;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

/* ----------------------------------------------------------------
   4. ボタン共通（黒ボタン・字間広め）
   ---------------------------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.wp-block-button__link,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link,
.woocommerce #respond input#submit {
	background-color: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
	border-radius: 2px;
	font-weight: 500;
	letter-spacing: .12em;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.added_to_cart:hover,
.wp-block-button__link:hover,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link:hover {
	background-color: #444;
	color: #fff;
}

/* 強調ボタン（購入手続きへ等）も同じトーンに */
button.cta, button.alt,
input[type="submit"].cta, input[type="submit"].alt,
.button.cta, .button.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background-color: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
}

button.cta:hover, button.alt:hover,
.button.cta:hover, .button.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background-color: #444;
}

/* ----------------------------------------------------------------
   5. カテゴリー画像の「今すぐ購入」ボタン（ゴーストボタン）
   ---------------------------------------------------------------- */
.wc-block-featured-category .wp-block-button__link,
.wc-block-featured-product .wp-block-button__link {
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, .9);
	color: #fff;
	border-radius: 2px;
	padding: .7em 2em;
	font-weight: 500;
	letter-spacing: .18em;
	transition: background-color .25s ease, color .25s ease;
}

.wc-block-featured-category .wp-block-button__link:hover,
.wc-block-featured-product .wp-block-button__link:hover {
	background-color: #fff;
	color: #111;
}

.wc-block-featured-category__title,
.wc-block-featured-product__title {
	letter-spacing: .14em;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

/* ----------------------------------------------------------------
   6. 通貨切り替え（FOX / WOOCS の左端固定スイッチャー）
   ---------------------------------------------------------------- */
ul.woocs_auto_switcher.left {
	top: 50% !important;
	transform: translateY(-50%);
	left: 0;
	width: auto !important;
	height: auto !important;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-left: 0;
	border-radius: 0 6px 6px 0;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
	overflow: hidden;
}

ul.woocs_auto_switcher.left li {
	margin: 0;
	list-style: none;
}

ul.woocs_auto_switcher.left li a {
	background: #fff !important;
	color: #111 !important;
	border-bottom: 1px solid #eee !important;
	border-radius: 0 !important;
	max-width: none;
	min-width: 68px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	padding: 10px 14px;
}

ul.woocs_auto_switcher.left li:last-child a {
	border-bottom: 0 !important;
}

ul.woocs_auto_switcher.left li a:hover {
	background: #f5f5f5 !important;
}

ul.woocs_auto_switcher.left li a.woocs_curr_curr {
	background: #1a1a1a !important;
	color: #fff !important;
}

/* ホバー時に出る黒い吹き出し（通貨名ツールチップ）は非表示 */
ul.woocs_auto_switcher li a span {
	display: none !important;
}

/* ----------------------------------------------------------------
   7. 言語切り替え（TranslatePress）
   ---------------------------------------------------------------- */
.trp-shortcode-switcher .trp-language-switcher-inner,
.trp-floating-switcher .trp-language-switcher-inner {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
	font-size: 13px;
	font-weight: 600;
}

.trp-switcher-dropdown-list {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
}

.trp-language-item,
.trp-language-item-name,
.trp-ls-name {
	color: #111 !important;
}

.trp-language-item {
	background: transparent;
}

.trp-language-item:hover {
	background: #f5f5f5;
}

/* 選択中の言語：薄いグレー背景×黒文字で控えめに示す
   （背景と文字を必ずセットで指定して読めなくなるのを防ぐ） */
.trp-language-item__current,
.trp-language-item__current:hover {
	background: #efefef !important;
}

.trp-language-item__current,
.trp-language-item__current .trp-language-item-name,
.trp-language-item__current .trp-ls-name {
	color: #111 !important;
}

.trp-flag-image {
	border-radius: 2px;
}

/* メニュー内に置いた言語スイッチャーの国旗サイズ・位置調整 */
.main-navigation .trp-flag-image,
.storefront-primary-navigation .trp-flag-image {
	width: 18px;
	height: auto;
	display: inline-block;
	vertical-align: middle;
	margin-right: .4em;
}

/* ----------------------------------------------------------------
   8. 商品一覧・商品ページまわり
   ---------------------------------------------------------------- */
ul.products li.product .woocommerce-loop-product__title {
	color: #222;
	font-size: 1em;
	font-weight: 400;
	letter-spacing: .08em;
}

ul.products li.product .price,
.woocommerce-loop-product__link .price {
	color: #767676;
	font-weight: 400;
	letter-spacing: .04em;
}

/* セールバッジ */
.onsale,
ul.products li.product .onsale {
	background-color: #1a1a1a;
	color: #fff;
	border: 0;
	border-radius: 0;
	letter-spacing: .14em;
}

/* パンくずリスト */
.woocommerce-breadcrumb {
	font-size: .8125em;
	color: #999;
	letter-spacing: .06em;
	background-color: transparent;
}

.woocommerce-breadcrumb a {
	color: #767676;
}

/* 商品画像はフラットに（角丸なし） */
ul.products li.product img,
.woocommerce-product-gallery img {
	border-radius: 0;
}

/* 一覧に並ぶ商品写真は正方形に統一（縦長・横長が混ざっても揃う） */
ul.wc-block-product-template > li.wc-block-product img,
ul.products li.product .woocommerce-loop-product__link img,
ul.products li.product > a img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* 商品コレクションブロック（作家ページの作品一覧など）
   商品名の行数が違っても価格・ボタンの高さが揃うように */
ul.wc-block-product-template > li.wc-block-product {
	display: flex;
	flex-direction: column;
}

ul.wc-block-product-template > li.wc-block-product .wc-block-components-product-button,
ul.wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-button {
	margin-top: auto;
}

/* 商品コレクション内の商品名・価格もモノクロ基調に */
.wc-block-product .wp-block-post-title,
.wc-block-product .wp-block-post-title a {
	color: #222;
	font-weight: 400;
	letter-spacing: .06em;
	text-decoration: none;
}

.wc-block-product .wc-block-components-product-price {
	color: #767676;
}

/* 商品コレクションブロックのページ送り（1 2 次のページ）
   親テーマのスタイルとぶつかって数字が縦に積まれるため、
   横並び・中央寄せを明示する */
.wp-block-query-pagination,
.wp-block-query-pagination.is-layout-flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .35em 1em;
	margin: 2.5em 0 0;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: .35em 1em;
}

/* 数字ひとつひとつ（a / span）が block にならないように */
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers {
	display: inline-block;
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: #767676;
	letter-spacing: .06em;
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
	color: #222;
}

.wp-block-query-pagination .wp-block-query-pagination-next,
.wp-block-query-pagination .wp-block-query-pagination-previous {
	color: #767676;
	letter-spacing: .06em;
	text-decoration: none;
}

/* ----------------------------------------------------------------
   8-1. 固定ページのタイポグラフィ（作家紹介ページ等）
   ---------------------------------------------------------------- */
/* カラム内のテキスト（経歴年表など）をゆったりと */
.entry-content .wp-block-columns p {
	line-height: 2.15;
	letter-spacing: .04em;
}

/* ページ内の見出しに下余白を少し足して呼吸させる */
.entry-content h2.wp-block-heading {
	margin-bottom: .9em;
}

/* ----------------------------------------------------------------
   8-2. お買い物カゴページ（スッキリ見せる調整）
   ---------------------------------------------------------------- */
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
	border-bottom: 1px solid #eee;
	background-color: transparent;
}

.woocommerce-cart table.cart thead th {
	border-bottom: 2px solid #1a1a1a;
	font-size: .8125em;
	font-weight: 500;
	letter-spacing: .12em;
}

.woocommerce-cart table.cart img.attachment-woocommerce_thumbnail,
.woocommerce-cart table.cart td.product-thumbnail img {
	max-width: 72px;
	height: auto;
}

.woocommerce-cart table.cart td.product-remove a.remove {
	color: #bbb !important;
	background: transparent;
	font-weight: 400;
}

.woocommerce-cart table.cart td.product-remove a.remove:hover {
	color: #111 !important;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	border: 1px solid #e5e5e5;
	background-color: #fff;
	box-shadow: none;
	padding: .6em .9em;
}

.cart-collaterals .cart_totals {
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 1.2em 1.4em;
	background-color: #fafafa;
}

.cart-collaterals .cart_totals h2 {
	font-size: 1.2em;
	border-bottom: 1px solid #e5e5e5;
	padding-bottom: .5em;
}

.cart-collaterals .cart_totals table td,
.cart-collaterals .cart_totals table th {
	border: 0;
	padding: .6em 0;
	background: transparent;
}

/* ----------------------------------------------------------------
   9. フッター
   ---------------------------------------------------------------- */
.site-footer {
	background-color: #fafafa;
	color: #555;
	border-top: 1px solid #eee;
}

.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6 {
	color: #111;
	letter-spacing: .1em;
}

.site-footer a:not(.button) {
	color: #111;
}

/* ----------------------------------------------------------------
   10. レスポンシブ調整
   ---------------------------------------------------------------- */
@media (max-width: 767px) {

	/* 黒帯をモバイルでも維持：ヘッダー下端に密着させる */
	.site-header {
		padding-bottom: 0;
	}

	/* サイト名：全幅・中央寄せに（メニューボタンは黒帯に移動済みなので
	   右側を空けておく必要がない） */
	.site-branding {
		float: none;
		width: 100%;
		text-align: center;
		margin-bottom: 1em;
	}

	.site-branding .site-title {
		font-size: 1.35em;
		letter-spacing: .12em;
	}

	/* 黒帯がサイト名の裏にせり上がって重ならないよう、
	   帯を必ずサイト名の下の行に落とす */
	.storefront-primary-navigation {
		clear: both;
		padding: .35em 0;
	}

	/* ハンバーガーボタンを白に */
	button.menu-toggle,
	button.menu-toggle:hover {
		background-color: transparent;
		color: #fff;
		border: 0;
	}

	button.menu-toggle::before,
	button.menu-toggle::after,
	button.menu-toggle span::before {
		background-color: #fff !important;
	}

	/* 開いたモバイルメニュー（黒帯の中に展開される）
	   ※ メニューの割り当て方でHTML構造が変わるため、広めに指定 */
	.storefront-primary-navigation .main-navigation ul li a,
	.storefront-primary-navigation .main-navigation div.menu li a,
	.storefront-primary-navigation .handheld-navigation ul li a {
		color: #fff;
		font-size: 1em;
		letter-spacing: .12em;
	}

	.storefront-primary-navigation .main-navigation ul li a:hover {
		color: rgba(255, 255, 255, .75);
	}

	/* 項目の区切り線 */
	.storefront-primary-navigation .main-navigation ul li {
		border-bottom: 1px solid rgba(255, 255, 255, .12);
	}

	.storefront-primary-navigation .main-navigation ul ul li {
		border-bottom: 0;
	}

	/* サブメニュー（階層下）はやや薄い白で区別 */
	.storefront-primary-navigation .main-navigation ul ul li a {
		color: rgba(255, 255, 255, .7);
	}

	/* サブメニュー開閉の矢印ボタン */
	.storefront-primary-navigation .main-navigation .dropdown-toggle,
	.storefront-primary-navigation .handheld-navigation .dropdown-toggle {
		color: #fff;
		background-color: transparent;
	}

	/* 通貨スイッチャー：左下の横並びピルに変形 */
	ul.woocs_auto_switcher.left {
		top: auto !important;
		bottom: 72px;
		transform: none;
		left: 12px;
		display: flex;
		flex-direction: row;
		border: 1px solid #e5e5e5;
		border-radius: 999px;
	}

	ul.woocs_auto_switcher.left li a {
		border-bottom: 0 !important;
		padding: 8px 14px;
	}

	ul.woocs_auto_switcher.left li + li a {
		border-left: 1px solid #eee;
	}

	/* 言語(JA)ボタンが左下にある場合、通貨ピルと重ならないよう
	   その上に積む */
	.trp-floating-switcher {
		bottom: 122px !important;
		left: 12px !important;
	}

	.wc-block-featured-category .wp-block-button__link,
	.wc-block-featured-product .wp-block-button__link {
		padding: .8em 2.2em;
	}
}


/* ----------------------------------------------------------------
   11. 作家紹介ページ（スラッグ artist-* の固定ページ）
       functions.php が body に .artist-page を付与する
   ---------------------------------------------------------------- */

/* ページ標準の h1 タイトルは隠し、本文側の名前見出しを主役にする */
.artist-page .entry-header {
	display: none;
}

.artist-page .entry-content {
	margin-top: 1.5em;
}

/* --- ヒーロー部（写真＋プロフィールの2カラム） --- */
.artist-hero .wp-block-columns {
	gap: 3.5em;
}

/* 写真：カラム幅いっぱいに、角ばったまま（額装のような細い枠） */
.artist-photo img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #e5e5e5;
}

/* 作家名（漢字） */
.artist-name {
	font-size: 1.85em;
	font-weight: 400;
	letter-spacing: .22em;
	margin-bottom: .15em;
}

/* 作家名（ローマ字の小さな添え） */
.artist-name-en {
	font-size: .72em;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: #999;
	margin-bottom: 2.2em;
	padding-bottom: 1.4em;
	border-bottom: 1px solid #ddd;
}

/* 経歴テキスト：小さめ・行間ゆったりで上品に */
.artist-profile p {
	font-size: .9em;
	line-height: 2.15;
	letter-spacing: .05em;
	color: #333;
}

/* 「作品をみる」ボタン：黒帯ナビと揃えた角ばった黒ボタン */
.artist-hero .wp-block-button__link {
	background-color: #111;
	color: #fff;
	border-radius: 0;
	padding: .85em 2.6em;
	font-size: .85em;
	letter-spacing: .25em;
}

.artist-hero .wp-block-button__link:hover {
	background-color: #444;
	color: #fff;
}

/* --- 作品一覧の見出し：全幅の黒帯（TCD風） --- */
.artist-works-heading {
	background-color: #111;
	color: #fff;
	text-align: center;
	font-size: 1.05em;
	font-weight: 400;
	letter-spacing: .3em;
	padding: .8em 1em .8em 1.3em; /* 字間分だけ左を足して視覚中央に */
	margin: 3.5em 0 2em;
}

/* --- モバイル --- */
@media (max-width: 767px) {
	.artist-hero .wp-block-columns {
		gap: 0;
	}

	.artist-photo {
		margin-bottom: 1.8em;
	}

	.artist-name {
		font-size: 1.5em;
		text-align: center;
	}

	.artist-name-en {
		text-align: center;
	}

	.artist-hero .wp-block-buttons {
		justify-content: center;
	}
}


/* ----------------------------------------------------------------
   12. 商品詳細ページ
   ---------------------------------------------------------------- */

/* タイトル上に自動表示されるブランドのサムネイル画像を非表示
   （下の「ブランド: ◯◯」リンクと重複するため） */
.storefront-wc-brands-single-product {
	display: none;
}

/* --- 商品下部：「説明」をタブではなく普通のセクションとして表示 ---
   （レビューはWooCommerce設定で無効化する前提。タブが説明1つだけに
     なるため、タブの縦メニューごと隠して全幅で見せる） */
.single-product .woocommerce-tabs ul.tabs {
	display: none;
}

.single-product .woocommerce-tabs .panel {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* 「説明」「関連商品」の見出し：作家ページの作品見出しと同じ
   全幅の黒帯にして、サイト全体の世界観を揃える */
.single-product .woocommerce-Tabs-panel--description > h2:first-child,
.single-product .related.products > h2 {
	background-color: #111;
	color: #fff;
	text-align: center;
	font-size: 1.05em;
	font-weight: 400;
	letter-spacing: .3em;
	padding: .8em 1em .8em 1.3em;
	margin: 2.5em 0 1.8em;
}

/* 説明文の本文：作家ページの経歴と同じく行間ゆったり */
.single-product .woocommerce-Tabs-panel--description p {
	font-size: .95em;
	line-height: 2;
	letter-spacing: .04em;
}

/* 説明内に画像を入れた場合、はみ出さず品よく収める */
.single-product .woocommerce-Tabs-panel--description img {
	max-width: 100%;
	height: auto;
}

/* --- カート・購入手続きページ：アイキャッチ画像を表示しない ---
   （ページにアイキャッチが設定されているとStorefrontがタイトル上に
     大きく表示してしまうため。編集画面から画像を外せない場合の保険も
     兼ねて、表示だけ確実に止める） */
.woocommerce-cart .entry-header .wp-post-image,
.woocommerce-checkout .entry-header .wp-post-image {
	display: none;
}

/* ----------------------------------------------------------------
   13. フッター（黒帯ナビと対になる、締めの黒フッター）
   ---------------------------------------------------------------- */
.site-footer {
	background-color: #1a1a1a;
	color: rgba(255, 255, 255, .6);
	padding-top: 2.8em;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
	color: #fff;
}

/* 親テーマが .site-footer a:not(.button) で濃いグレーを指定しているため、
   こちらも :not(.button) を付けて詳細度を合わせないと勝てない
   （付けないと黒背景に黒文字になって読めなくなる） */
.site-footer a:not(.button) {
	color: rgba(255, 255, 255, 0.3);
}

.site-footer a:not(.button):hover {
	color: #fff;
}

/* --- ポリシー系リンクの列（functions.php が出力） --- */
.sf-footer-links {
	text-align: center;
	padding-bottom: 1.8em;
	margin-bottom: 1.8em;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.site-footer .sf-footer-links a {
	display: inline-block;
	font-size: .82em;
	letter-spacing: .12em;
	margin: .3em 1.4em;
	color: rgba(255, 255, 255, .88);
	text-decoration: none;
}

.site-footer .sf-footer-links a:hover {
	color: #fff;
	text-decoration: underline;
}

/* --- コピーライト行 --- */
.site-info {
	text-align: center;
	font-size: .78em;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .45);
	padding-bottom: 2.2em;
}

/* コピーライト行の中のリンク（Built with WooCommerce 等）は
   主役ではないので、読める範囲で控えめに */
.site-footer .site-info a:not(.button) {
	color: rgba(255, 255, 255, .5);
}

.site-footer .site-info a:not(.button):hover {
	color: rgba(255, 255, 255, .8);
}

/* --- 商品サイズ表示（控えめに。説明を主役にする） --- */
.sf-single-size,
.sf-loop-size {
	font-size: .82em;
	color: #6b6b6b;
	margin: .2em 0 .4em;
	letter-spacing: .02em;
}

/* ----------------------------------------------------------------
   14. Smart Slider（スライダー下の丸いボタン＝bullets）
   ---------------------------------------------------------------- */
/* Smart Slider は #n2-ss-1 のようなIDセレクタで色を出力するため、
   ここで上書きするには !important が要る。
   プラグイン側（Slider → Controls → Bullets）で色を変えられる場合は
   そちらが本筋なので、このセクションごと削除してよい。

   色を変えるときは下の2つの値を書き換える：
   通常＝rgba(34, 34, 34, .28) ／ 選択中＝#222 */
.n2-ss-control-bullet .n2-bullet,
.n2-ss-control-bullet-horizontal .n2-bullet {
	background: rgba(34, 34, 34, .28) !important;
	border: 0 !important;
	box-shadow: none !important;
}

.n2-ss-control-bullet .n2-bullet.n2-active,
.n2-ss-control-bullet-horizontal .n2-bullet.n2-active {
	background: #222 !important;
}

/* マウスを乗せたとき */
.n2-ss-control-bullet .n2-bullet:hover {
	background: rgba(34, 34, 34, .55) !important;
}