/* ============================================
   OOTC 共通スタイル（このプラグインが表示する全ページで1ファイル）
   Main: rgba(0,0,0,.75) / Sub: rgba(0,0,0,.5) / Font: Noto Serif JP 500

   ページごとに分けないのは、1回読み込めば全ページでキャッシュが効くため。
   テーマ・WooCommerce・WordPressのCSSは新しいページでは読み込まない（inc/assets.php）。
   このファイルだけで全ページが表示される。
   並び：変数 → 基本 → 部品（見出し・カード・ボタン・フォーム）→ 各セクション → 各ページ →
         WooCommerce → 画面幅ごとの調整（各ページ・WooCommerceの分は、そのすぐ下に書く）
   ============================================ */

:root {
	/* ---- 数値システム（基準15px・列300・ガター30） ----
	   使用可能値: 2.5 / 5 / 10 / 12.5 / 15 / 22.5 / 30 / 45 / 60 / 90...

	   コンテンツ幅 = 列×n + ガター×(n-1)   → --w-1〜--w-4
	   コンテナ幅   = コンテンツ幅 + ガター×2（左右padding）
	                1列 360 / 2列 690 / 3列 1020 / 4列 1350 */
	--u: 15px;          /* 基本単位（文字ベース） */
	--gap: 30px;        /* ガター */
	--col: 300px;       /* 列幅（最小幅も同じ） */

	--w-1: 300px;       /* 1列 */
	--w-2: 630px;       /* 2列 = 300×2 + 30 */
	--w-3: 960px;       /* 3列 = 300×3 + 30×2 */
	--w-4: 1290px;      /* 4列 = 300×4 + 30×3（最大コンテンツ幅） */
	--max: 1350px;      /* コンテナ最大幅 = --w-4 + 左右padding 30×2 */

	/* ---- 色 ----
	   濃さは不透明度で表す（基本75% / 補助50% / 罫線25% / 面5%）。
	   #fff・#000 は「最も明るい／最も濃い」状態を指す原色としてそのまま使う（主にホバー）。 */
	--ootc-main:      rgba(0, 0, 0, 0.75);        /* 基本の黒（文字・アイコン） */
	--ootc-sub:       rgba(0, 0, 0, 0.5);         /* 補助の黒（英字・注釈） */
	--ootc-line:      rgba(0, 0, 0, 0.25);        /* 罫線 */
	--ootc-tint:      rgba(0, 0, 0, 0.05);        /* 面の淡い墨（お知らせの枠・注記） */
	--ootc-scrim:     rgba(0, 0, 0, 0.15);        /* 写真上の暗幕（ヒーロー） */
	--ootc-white:     rgba(255, 255, 255, 0.75);  /* 暗い背景上の基本 */
	--ootc-white-sub: rgba(255, 255, 255, 0.5);   /* 暗い背景上の補助 */
	--ootc-accent:    rgba(200, 0, 0, 0.75);      /* 新着バッジ */
	--ootc-gold:      #BFA730;                    /* ヒーローの Imperial（本人指定） */
	--ootc-valid:     rgba(0, 130, 0, 0.75);      /* 入力が正しいとき */
	--ootc-error:     rgba(190, 50, 50, 0.75);    /* 入力が誤っているとき */

	/* SVGアイコンは色を指定できないため、不透明度で上の「濃さ」に合わせる。
	   ホバーで 1 にすると #fff（暗い背景）／#000（明るい背景）になる */
	--o-main: 0.75;  /* 基本（--ootc-main と対） */
	--o-sub:  0.5;   /* 補助（--ootc-sub / --ootc-white-sub と対） */

	/* Noto Serif JP は inc/assets.php で Google Fonts から読み込む（Medium 500 の1種類だけ） */
	--ootc-font: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}

/* 幅計算をpadding込みに統一（max-width:1350 = コンテンツ1290 + 左右padding 30×2） */
.ootc *,
.ootc *::before,
.ootc *::after { box-sizing: border-box; }

body.ootc {
	margin: 0;
	font-family: var(--ootc-font);
	line-height: 1.5; /* 全体共通（15px基準なら行ボックス22.5px） */
	color: var(--ootc-main);
	/* 既存サイトの .site と同じ紙テクスチャ背景。
	   和紙の2枚（washi-light / washi-dark）は uploads の T-06.png / T-05.png を、画素を変えずに WebP にしたもの（約4割軽い。2026-10-03）。
	   画質を落とす圧縮は、紙の細かい凹凸が半分ほど消えたので使わない */
	background-color: #fff;
	background-image: url("washi-light.webp");
	background-size: 300px;
	background-repeat: repeat;
	-webkit-font-smoothing: antialiased;
	/* 太字のフォントは読み込んでいないので、ブラウザが線を太らせた「偽の太字」を作らないようにする */
	font-synthesis: none;
}

/* テーマ(businesspress)の body:lang(ja){line-height:1.8} と詳細度同点で
   順序負けするため、:lang付き（0,2,1）で明示的に上書きする */
body.ootc:lang(ja) { line-height: 1.5; }

/* オープニング：全ページ、読み込むたびに画面全体を黒（#000）で覆い、1.5秒で透明にする。
   終わったら visibility:hidden で消えるので、クリックや読み上げの邪魔をしない */
body.ootc::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 30; /* いちばん上（ドロワーの 25 より上） */
	background: #000;
	pointer-events: none; /* 1.5秒のあいだも、クリックは下のページに届く */
	animation: ootc-opening 1.5s linear forwards;
}
@keyframes ootc-opening {
	to { opacity: 0; visibility: hidden; }
}

/* line-height の使い分け
   1.5（既定）… 折り返す可能性がある文字。本文・記事タイトル・メニューの行など
   1 ……………… 折り返さない「見出し・ラベル」。箱の高さ＝文字の高さにして
                 指定した余白がそのまま見た目の余白になるようにする */

/* 文字間隔の基本は 0.25em。全要素に直接書き、それぞれ自分の文字サイズで計算させる。
   em の文字間隔は、書いた要素の文字サイズで px に直してから子へ引き継がれるため、
   書かないと 30px の見出し（0.25em = 7.5px）の中の 15px の文字にも 7.5px が入り、0.5em に広がる。
   :where() で詳細度を 0 にし、各部品の指定（0.1em など）が必ず勝つようにする */
:where(.ootc *),
:where(.ootc *)::before,
:where(.ootc *)::after { letter-spacing: 0.25em; }

/* 英語の文は 0.1em（本人指定 2026-10-02：英語の文は 0.1em、それ以外は 0.25em）。
   英語の文 ＝ 説明や案内の文（日本語の文の訳）。英語の添え書き（.en）と、lang="en" を付けた要素。中の要素も同じにする。
   名前・見出し・項目名・メールアドレス・URL は、英語でも文ではないので 0.25em（社名・Organic Gyokuro HI・Name など）。
   .en のうち、大文字だけの語（INPUT・SELECTION など）と項目名（Name・Type など）は、各部品のところで 0.25em に戻す */
.ootc .en,
.ootc .en *,
.ootc [lang="en"],
.ootc [lang="en"] * { letter-spacing: 0.1em; }

.ootc img { max-width: 100%; height: auto; display: block; }
.ootc a { color: inherit; text-decoration: none; }

/* 英語の添え書き（日本語の下か右に、補助の色で） */
.ootc .en { color: var(--ootc-sub); }

/* 途中で折り返さない語（番地の「3306-4」など） */
.ootc-nowrap { white-space: nowrap; }

/* 画面には出さず、読み上げにだけ残す（WooCommerce の数量欄の名前など） */
.ootc .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- アイコン（uploads/icon-*.svg） ----------
   ソースは全て白で統一し、色はCSSが決める：
   明るい背景では invert で黒くし、--o-main で基本の黒と同じ濃さに揃える。
   暗い背景（ヘッダー・ドロワー）では invert せず白のまま使う */
/* 「.ootc img」（display:block / height:auto）より詳細度を上げるため
   img付きセレクタで定義する（0,2,1 > 0,1,1） */
.ootc img.ootc-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	filter: invert(1);
	opacity: var(--o-main);
}
.ootc img.ootc-icon--arrow {
	width: auto;
	height: 15px;
	margin-right: 15px;
	opacity: var(--o-main);
	transition: opacity 0.5s;
}
/* リンク（a）ホバーで矢印も連動：invert(1)+opacity1 = #000 相当 */
.ootc-section__more:hover img.ootc-icon--arrow { opacity: 1; }

/* ---------- ヘッダー（旧A-*ブロック構造からのクリーン再実装・外見は同一） ---------- */

.ootc-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	padding: 30px var(--gap) 60px;
	background: linear-gradient(var(--ootc-main), transparent);
}
.ootc-header__inner {
	max-width: var(--w-4); /* セクション内側幅と同じ（左右端が本文と揃う） */
	margin: 0 auto;
	display: flex;
	align-items: center;
}

.ootc-header__logo img { height: 45px; width: auto; }

.ootc-header__nav {
	display: flex;
	gap: 30px;
	margin-left: auto;
}
.ootc-header__nav a {
	position: relative;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.25em;
	color:var(--ootc-white);
}
/* ホバー時に左からスライドする下線 */
.ootc-header__nav a::after {
	content: "";
	position: absolute;
	left: -0.1em;
	bottom: -15px;
	width: 100%;
	height: 1px;
	background: #fff;
	transform: scale(0, 1);
	transform-origin: left;
	transition: transform 0.5s;
}
.ootc-header__nav a:hover::after { transform: scale(1, 1); }
.ootc-header__nav a:hover { color: #fff; } /* テーマのa:hover(#000)を打ち消し白のまま */

/* マイページ / カート（カート内に商品があれば塗りアイコンに切り替わる） */
.ootc-header__account { margin-left: 37.5px; margin-bottom: 7.5px; }
.ootc-header__account img { height: 22.5px; width: auto; }

.ootc-header__cart { margin-left: 30px; }
.ootc-header__cart img { height: 22.5px; width: auto; margin-bottom: 7.5px; }

.ootc-header__toggle {
	margin-left: 30px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}
.ootc-header__toggle img { height: 15px; width: auto; }

/* ヘッダーのアイコン共通（ロゴ / マイページ / カート / メニュー）
   通常は基本の濃さ、ホバーで #FFF（＝不透明度100%）。ナビの下線と同じ0.5秒 */
.ootc-header__logo img,
.ootc-header__account img,
.ootc-header__cart img,
.ootc-header__toggle img {
	opacity: var(--o-main);
	transition: opacity 0.5s;
}
.ootc-header__logo:hover img,
.ootc-header__account:hover img,
.ootc-header__cart:hover img,
.ootc-header__toggle:hover img { opacity: 1; }

/* ドロワー内ヘッダー：固定を解除して本文の上に置く（左右の余白はドロワー側が持つ） */
.ootc-header--drawer {
	position: static;
	background: none;
	padding: 30px var(--gap);
}

/* ---------- ドロワーメニュー（全画面オーバーレイ） ---------- */

.ootc-drawer {
	position: fixed;
	inset: 0;
	z-index: 25;
	/* ヘッダーは動かさず、本文だけをスクロールさせる（重ならないので背景が不要） */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* 左右の余白はヘッダーと本文がそれぞれ持つ。
	   本文を画面幅いっぱいにしないと、スクロールバーが矢印の上に重なるため */
	background-image: url("washi-dark.webp");
	background-size: 300px;
	background-repeat: repeat;
	color: var(--ootc-white); /* 暗い面なので文字色の基準を白に（フッターと同じ） */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s linear, visibility 0s linear 0.3s;
}
.ootc-drawer.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.3s linear, visibility 0s;
}

/* 本文は画面幅いっぱい（スクロールバーを矢印から離すため）。
   中身は左右paddingで中央に寄せる：狭い画面ではガター30px、
   広い画面では最大コンテンツ幅(1290px)が中央に来るところまで広がる */
.ootc-drawer__body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain; /* 端まで来ても背後のページが動かない */
	padding: 30px max(var(--gap), calc((100% - var(--w-4)) / 2)) 150px;
}

/* 3つのメニューグループを縦に積む。PC〜スマホまで常に1カラム・全幅 */
.ootc-drawer__body > .ootc-menu:not(:last-child) {
	margin-bottom: 45px;
	padding-bottom: 45px;
	border-bottom: 1px solid var(--ootc-white-sub);
}

/* ---------- 極小画面の警告（幅360px未満で全画面表示） ----------
   高さの条件（540px未満）は外した：スマホを横にすると高さが400px前後になり、
   サイトが使えなくなっていたため（2026-09-30） */

.ootc-viewport-error {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 20;
	background: #fff;
	color: #000;
	font-size: 30px;
	line-height: 1;
	text-indent: 0.25em; /* 字間分の中央ズレ補正 */
	align-items: center;
	justify-content: center;
}
@media (width < 360px) {
	.ootc-viewport-error { display: flex; }
}

/* ---------- ヒーロー ---------- */

.ootc-hero {
	position: relative;
	height: 100svh;
	/* overflow:hidden は不使用（スクロールラインがヒーロー下端をまたぐため） */
	background-color: #000; /* 写真が届くまでは黒。白いロゴとメニューが白い紙に消えないように */
}

.ootc-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 2.5s ease;
}
.ootc-hero__slide.is-active { opacity: 1; }

/* 文字の可読性のための薄い暗幕 */
.ootc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ootc-scrim);
	pointer-events: none;
}

.ootc-hero__text {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	pointer-events: none;
}
.ootc-hero__text h1 {
	margin: 0;
	color: #fff;
	font-size: 30px;
	font-weight: 400;
	letter-spacing: 0.25em;
	/* 字間分の中央ズレ補正（最後の文字の後ろにも字間が付くため、同じ幅を左に足す）。
	   text-indent は1行目にしか効かず、スマホで2行になると2行目がずれるので padding で補う */
	padding-left: 0.25em;
}
/* 登録商標の記号：このフォントの ® は、もともと右肩に小さく作られた字。
   なので文字と同じ 30px・同じ高さに置くだけで、右肩の記号になる（本人指定 2026-09-30）。
   sup の既定（小さくして持ち上げる）は打ち消す */
.ootc-hero__text sup {
	font-size: 30px;
	vertical-align: baseline;
}
/* Imperial の1語だけ金色（本人指定 2026-09-30） */
.ootc-hero__imperial { color: var(--ootc-gold); }
.ootc-hero__text p {
	margin: 22.5px 0 0;
	font-size: 22.5px;
	padding-left: 0.25em; /* h1 と同じ中央ズレ補正 */
	color: #fff;
}

.ootc-hero__dots {
	position: absolute;
	bottom: 45px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	gap: 15px;
}
.ootc-hero__dot {
	width: 63.75px;
	height: 1.5px;
	padding: 0px;
	background: none;
	border: 0;
	cursor: pointer;
	position: relative;
}
.ootc-hero__dot::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0%;
	width: 100%;
	height: 1.5px;
	background: var(--ootc-white-sub);
	transition: background 0.5s;
}
.ootc-hero__dot.is-active::after { background: #fff; height: 1.5px; }

/* スクロール誘導ライン：ヒーロー下端をまたぐ縦線（上45px=白 / 下45px=黒） */
.ootc-hero__scroll {
	position: absolute;
	bottom: -45px;
	/* 本文（最大1290px）の右端に揃える。ヘッダーのアイコンやセクションの罫線と同じ位置。
	   それより狭い画面では、右からガター分で固定 */
	right: max(var(--gap), calc((100% - var(--w-4)) / 2));
	z-index: 2;
	width: 1px;
	height: 90px;
	pointer-events: none;
}
.ootc-hero__scroll::before,
.ootc-hero__scroll::after {
	content: "";
	position: absolute;
	left: 0;
	width: 1px;
	height: 45px;
}
.ootc-hero__scroll::before { top: 0; background: #fff; }
.ootc-hero__scroll::after { top: 45px; background: var(--ootc-main); }

/* ---------- セクション共通 ---------- */

.ootc-section {
	max-width: var(--max);
	margin: 0 auto;
	padding: 90px var(--gap); /* border-boxなので内側コンテンツ = 1350-60 = 1290 */
}

.ootc-section__head {
	display: flex;
	flex-wrap: wrap; /* 狭い画面で入りきらないときは、単語の途中ではなくリンクごと次の行へ */
	align-items: center; /* 左ラベル・右リンクとも中央基準で揃える */
	justify-content: space-between;
	gap: 15px var(--gap);
	margin-bottom: 45px;
}
.ootc-section__label,
.ootc-section__more { white-space: nowrap; }

.ootc-section__label {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 15px; /* アイコン(20×20)とテキストの間・日英ラベル間 = 15px */
	font-size: var(--u);
	font-weight: 400;
	line-height: 1; /* 1行の見出し */
	letter-spacing: 0.25em;
}
.ootc-section__label span {
	font-size: 12.5px;
	color: var(--ootc-main);
}

.ootc-section__more {
	display: flex;
	align-items: center; /* 矢印アイコンとテキストの垂直中央を揃える */
	font-size: 15px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
	transition: color 0.5s;
}
/* テーマのa:hoverに依存せず自前定義（テーマ廃止後も動く）。矢印と同速で連動 */
.ootc-section__more:hover { color: #000; }

/* ---------- 暗い面（セクションに付ける修飾クラス .ootc-dark） ----------
   濃い和紙の上に白で組む。色の変数を白に置き換えるので、
   中の部品（見出し・本文・英語・罫線）は明るい面と同じCSSのまま白になる */
.ootc-dark {
	--ootc-main: var(--ootc-white);
	--ootc-sub:  var(--ootc-white-sub);
	--ootc-line: rgba(255, 255, 255, 0.25);
	--ootc-tint: rgba(255, 255, 255, 0.05);
	background-image: url("washi-dark.webp");
	background-size: 300px;
	background-repeat: repeat;
	color: var(--ootc-main);
}
/* アイコンのソースは白なので、暗い面では反転しない */
.ootc-dark img.ootc-icon { filter: none; }
/* ホバーは「最も濃い色」。明るい面の #000 に対して、暗い面では #fff */
.ootc-dark .ootc-section__more:hover { color: #fff; }
/* 塗りの上の文字も反対にする：明るい面の #fff に対して、暗い面では #000
   （塗りが --ootc-main＝白になるため、#fff のままだと白地に白で読めない）。新着バッジは赤の塗りなので白のまま */
.ootc-dark .ootc-button:hover,
.ootc-dark .ootc-card__badges em:not(.is-new) { color: #000; }

/* ---------- NOTICE（日付とタイトルだけの一覧・全幅1カラム） ----------
   行の高さ = 30 + 日付15 + 間15 + タイトル + 30。
   罫線は各行の上、最後だけ下にも引いて一覧の上下を閉じる（線が二重にならない引き方） */

/* 区切り線だけ50%（--ootc-sub と同値）。他の罫線25%より濃く、一覧の骨格を見せる */
.ootc-notice__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--ootc-sub);
}
.ootc-notice__list > li { border-top: 1px solid var(--ootc-sub); }

/* 行全体を1つのリンクにする（padding込みがそのままタップ領域になる）。
   左に日付とタイトル、右端に矢印（2行の中央） */
.ootc-notice__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto; /* 長いタイトルは矢印を押し出さずに折り返す */
	grid-template-areas:
		"date  arrow"
		"title arrow";
	align-items: center;
	padding: 22.5px 0;
	color: var(--ootc-main);
	transition: color 0.5s;
}
.ootc-notice__item:hover { color: #000; }
.ootc-notice__item:hover img.ootc-icon--arrow { opacity: 1; }

/* 矢印の大きさと色は「すべて見る」と同じ（.ootc-icon--arrow）。余白だけ左に付け替える */
.ootc img.ootc-notice__arrow {
	grid-area: arrow;
	margin: 0 10px 0 30px;
}

.ootc-notice__date {
	grid-area: date;
	display: block;
	margin-bottom: 7.5px;
	font-size: var(--u);
	line-height: 1.5;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}

.ootc-notice__title {
	grid-area: title;
	display: block;
	font-size: var(--u);
	line-height: 1.5; /* 狭い画面では折り返すため可読性を優先 */
	letter-spacing: 0.25em;
}


/* ---------- 4カラム行の共通パターン（NOTICE / ABOUTの数字帯 など） ----------
   1350px以上：4列ちょうど300px。
   1350px未満：列幅300pxを固定したまま横スクロール。右端でカードが見切れることが
   スクロール可能の視覚的合図になるため、スクロールバーの装飾はしない（消しもしない） */
.ootc-cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gap);
}
@media (width < 1350px) {
	.ootc-cols {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: var(--col); /* 全カラム共通の最小幅 = 300px */
		overflow-x: auto;
		/* セクションの左右paddingを打ち消してスクロール領域を画面端まで拡張。
		   静止時の余白20pxはスクロール内側のpaddingで再現（=カードが見切れない） */
		margin-left: calc(-1 * var(--gap));
		margin-right: calc(-1 * var(--gap));
		padding-left: var(--gap);
		padding-right: var(--gap);
	}
}

/* ---------- 数字の帯（大きな数字 ＋ 日本語 ＋ 英語。左に縦の罫線） ----------
   並べ方は使う側が決める（ABOUT は .ootc-cols で4列・横スクロール、商品ページの淹れ方は4列 / 2列の格子） */
.ootc-facts {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ootc-facts li {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-left: 15px;
	border-left: 1px solid var(--ootc-line);
}
.ootc-facts strong {
	font-size: 30px;
	font-weight: 400;
	letter-spacing: 0.25em;
	color: var(--ootc-main);
}
.ootc-facts .ja { font-size: 12.5px; letter-spacing: 0.25em; color: var(--ootc-main); }
.ootc-facts .en { font-size: 10px; letter-spacing: 0.25em; color: var(--ootc-sub); } /* 大文字の英語は 0.25em */

.ootc-card__image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}

.ootc-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 15px;
	font-size: 12.5px;
	color: var(--ootc-main);
	letter-spacing: 0.25em;
}
.ootc-card__meta time { display: flex; align-items: end; gap: 10px; }

.ootc-card__badges { display: flex; gap: 5px; }
.ootc-card__badges em {
	font-style: normal;
	font-size: 12.5px;
	padding: 5px 12.5px;
	letter-spacing: 0.25em;
	color: #fff;
	background: var(--ootc-main);
}
.ootc-card__badges em.is-new { background: var(--ootc-accent); }

.ootc-card__title {
	margin: 15px 0;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.25em;
}

.ootc-button {
	display: block;
	padding: 12.5px 10px;
	border: 1px solid var(--ootc-main);
	font-size: 15px;
	letter-spacing: 0.25em;
	text-align: center;
	color: var(--ootc-main);
	transition: background 0.5s, color 0.5s;
}
.ootc-button:hover { background: var(--ootc-main); color: #fff; }

/* カードは縦に積み、ボタンを下端に揃える（題名が2行になるカードがあっても横の列がずれない） */
.ootc-card { display: flex; flex-direction: column; }
.ootc-card > .ootc-button { margin-top: auto; }

/* 商品カード：写真は正方形（商品写真がすべて正方形のため） */
.ootc-card--product .ootc-card__image { position: relative; display: block; }
.ootc-card--product .ootc-card__image img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}
.ootc-card__soldout {
	position: absolute;
	top: 15px;
	left: 15px;
	padding: 5px 12.5px;
	font-size: 12.5px;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: 0.25em;
	color: #fff;
	background: var(--ootc-main);
}
/* 写真が未登録の商品の仮の面（写真と同じ正方形） */
.ootc-noimage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
	background: var(--ootc-tint);
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}
/* 価格の「税込」（WooCommerce が価格のうしろに付ける） */
.ootc .woocommerce-price-suffix {
	margin-left: 5px;
	font-size: 12.5px;
	color: var(--ootc-sub);
}

/* ---------- 折り返すグリッド（一覧ページのカード） ----------
   列は最小300px。画面幅に合わせて 4列（1350px〜）/ 3列 / 2列 / 1列 と自然に減る。
   TOPの .ootc-cols（横スクロール）と違い、全件を縦に並べて見せる */
.ootc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--col), 100%), 1fr));
	gap: 60px var(--gap);
}

/* ---------- 番号つきの項目（こだわり・工程・ご注文の流れ） ----------
   項目の数に合わせて列が広がる（auto-fit）。3項目なら3列、8項目なら4列×2段 */
.ootc-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--col), 100%), 1fr));
	gap: 45px var(--gap);
}
.ootc-steps li {
	padding-top: 22.5px;
	border-top: 1px solid var(--ootc-line);
}
.ootc-steps__no {
	display: block;
	margin-bottom: 22.5px;
	font-size: 30px;
	line-height: 1;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}
.ootc-steps p {
	margin: 0 0 10px;
	font-size: 15px;
	letter-spacing: 0.25em;
}
.ootc-steps p:last-child { margin-bottom: 0; }
.ootc-steps p.en { font-size: 12.5px; }
.ootc-steps__title .en { margin-left: 15px; font-size: 12.5px; letter-spacing: 0.25em; } /* 大文字の英語（SELECTION など）は 0.25em */
.ootc-steps a { text-decoration: underline; text-underline-offset: 2.5px; }

/* ---------- 項目と内容の表（会社概要・認証・特商法・商品概要） ----------
   左の項目は1列分（300px）。690px未満は項目の下に内容を置く */
.ootc-table {
	margin: 0;
	border-bottom: 1px solid var(--ootc-line);
}
.ootc-table > div {
	display: grid;
	grid-template-columns: var(--col) 1fr;
	gap: 10px var(--gap);
	padding: 22.5px 0;
	border-top: 1px solid var(--ootc-line);
}
.ootc-table dt,
.ootc-table dd {
	margin: 0;
	font-size: 15px;
	letter-spacing: 0.25em;
	overflow-wrap: anywhere; /* 長いURLやメールアドレスで横にはみ出さない */
}
.ootc-table dt .en { margin-left: 15px; font-size: 12.5px; letter-spacing: 0.25em; } /* 項目名（Type など）は文ではないので 0.25em */
/* 内容の英訳（品質管理）：日本語の下に、補助の色・小さめの文字で */
.ootc-table dd .en { display: block; margin-top: 10px; font-size: 12.5px; }
.ootc-table a { text-decoration: underline; text-underline-offset: 2.5px; transition: color 0.5s; }
.ootc-table a:hover { color: #000; }

/* ---------- 写真と文の2列（ABOUTのこだわり など） ---------- */
.ootc-split {
	display: grid;
	grid-template-columns: var(--w-2) 1fr;
	gap: var(--gap);
	align-items: center;
	margin-bottom: 60px;
}
.ootc-split__photo { margin: 0; }
.ootc-split__photo img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.ootc-split__text p {
	margin: 0 0 15px;
	font-size: 15px;
	letter-spacing: 0.25em;
}
.ootc-split__text p.en { font-size: 12.5px; }
/* 文の上に置く大きな見出し（サブスクの「特別な日のお茶を、ふだんの日に。」など） */
.ootc-split__title {
	margin: 0 0 30px;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.25em;
}
/* 文 ｜ 写真（写真を右に置く。HTMLも文 → 写真の順に書く）。1020px未満は縦に積み、文が先になる */
.ootc-split--reverse { grid-template-columns: 1fr var(--w-2); }

/* ---------- よくある質問（押すと答えが開く。HTML の details なので JavaScript を使わない） ----------
   罫線は各質問の上、最後だけ下にも引く（お知らせの一覧と同じ引き方）。右端の ＋ は開くと − になる */
.ootc-faq { border-bottom: 1px solid var(--ootc-line); }
.ootc-faq__item { border-top: 1px solid var(--ootc-line); }
.ootc-faq__question {
	position: relative;
	padding: 22.5px 45px 22.5px 0; /* 右は ＋ の場所 */
	font-size: 15px;
	letter-spacing: 0.25em;
	list-style: none; /* 既定の三角を消す */
	cursor: pointer;
	transition: color 0.5s;
}
.ootc-faq__question::-webkit-details-marker { display: none; } /* Safari の三角 */
.ootc-faq__question:hover { color: #000; }
/* ＋ と − は文字ではなく線（1px × 15px）で描く（数量の − ＋ と同じ） */
.ootc-faq__question::before,
.ootc-faq__question::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 15px;
	height: 1px;
	background: currentColor;
}
.ootc-faq__question::after { transform: rotate(90deg); transition: transform 0.5s; }
.ootc-faq__item[open] .ootc-faq__question::after { transform: rotate(0deg); } /* 縦線が横に重なって − になる */
.ootc-faq__answer {
	max-width: var(--w-3); /* 1行が長すぎると読みにくいので、3列分まで */
	margin: 0;
	padding: 0 0 30px;
	font-size: 15px;
	line-height: 2;
	letter-spacing: 0.25em;
}
.ootc-faq__answer a { text-decoration: underline; text-underline-offset: 2.5px; transition: color 0.5s; }
.ootc-faq__answer a:hover { color: #000; }

/* ---------- ページ送り ---------- */
.ootc-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 60px;
}
.ootc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 45px;
	height: 45px;
	padding: 0 12.5px;
	border: 1px solid var(--ootc-line);
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.25em;
	text-indent: 0.25em; /* 字間分の中央ズレ補正 */
	color: var(--ootc-main);
	transition: border-color 0.5s, background 0.5s, color 0.5s;
}
.ootc-pagination a.page-numbers:hover { border-color: var(--ootc-main); }
.ootc-pagination .current { background: var(--ootc-main); border-color: var(--ootc-main); color: #fff; }
.ootc-pagination .dots { border-color: transparent; }

/* ---------- 短い文（件数ゼロ・注記・送信結果） ---------- */
.ootc-empty {
	margin: 0;
	font-size: 15px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}
.ootc-note {
	margin: 15px 0 0;
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}
/* 仮の文：まだ確かめられていない事実の場所（写真の仮の面と同じ考え方。事実がそろったら、この印ごと消える） */
.ootc-todo {
	display: inline-block;
	padding: 2.5px 10px;
	border: 1px dashed var(--ootc-sub);
	background: var(--ootc-tint);
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}
/* お知らせの枠（送信の完了・入力の誤り）。薄墨の面だけで囲む（左の線は使わない：2026-10-02 本人指定。WooCommerce のお知らせ・ご注文完了のお礼も同じ） */
.ootc-message {
	margin: 0 0 30px;
	padding: 22.5px;
	background: var(--ootc-tint);
	font-size: 15px;
	letter-spacing: 0.25em;
}
.ootc-message p { margin: 0; }
.ootc-message p + p { margin-top: 15px; }
.ootc-message .en { font-size: 12.5px; }
.ootc-message--error { color: var(--ootc-error); }

/* ---------- ABOUT（暗い面 × 4つの事実の数字帯）
   背景と文字の色は .ootc-dark（templates/parts/about.php で付ける）。
   面は画面幅いっぱいに敷き、幅と余白は __inner が持つ（卸売の帯と同じ作り）。
   .ootc-section は付けない：付けると 1020px 未満でその余白が足され、左右が二重になっていた ---------- */

.ootc-about__inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 90px var(--gap);
}

/* 紹介文（左） / 写真（右・システム2列分） */
.ootc-about__body {
	display: grid;
	grid-template-columns: 1fr var(--w-2);
	gap: var(--gap);
	align-items: center;
}
.ootc-about__photo { margin: 0; }
.ootc-about__photo img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 2;
}
/* 紹介文だけ行間を 2 に広げる（全体の 1.5 の例外。本人指定 2026-09-30） */
.ootc-about__text p {
	margin: 0 0 15px;
	font-size: 12.5px;
	line-height: 2;
	letter-spacing: 0.25em;
}
/* 社名：上の「.ootc-about__text p」より詳細度を上げて上書きする
   （.ootc-about__name だけでは負けて、12.5px のままになっていた） */
.ootc-about__text .ootc-about__name {
	margin: 0 0 22.5px;
	font-size: 22.5px;
	line-height: 1.5;
}
.ootc-about__en { color: var(--ootc-sub); }

/* 4つの事実の数字帯（被覆 / 一番茶 / 生産量 / 有機JAS）。見た目は部品 .ootc-facts（下の「数字の帯」） */
.ootc-about .ootc-facts { margin-top: 60px; }

.ootc-about__note {
	margin: 15px 0 0;
	font-size: 10px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}

/* ---------- PRODUCT ---------- */

.ootc-card__price {
	margin: 0 0 15px;
	font-size: 15px;
	letter-spacing: 0.25em;
	color: var(--ootc-main);
}
/* 価格の下の補足（内容量 ｜ 1回あたりの価格）。価格との間は詰めて、1つのまとまりに見せる */
.ootc-card__price:has(+ .ootc-card__spec) { margin-bottom: 5px; }
.ootc-card__spec {
	margin: 0 0 15px;
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}

/* ---------- 卸売CTA帯（ドロワーと同じ濃い和紙・日英併記） ---------- */

.ootc-wholesale {
	background-image: url("washi-dark.webp");
	background-size: 300px;
	background-repeat: repeat;
}
.ootc-wholesale__inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 90px var(--gap);
	text-align: center;
	color: var(--ootc-white);
}
.ootc-wholesale__label {
	margin: 0;
	font-size: 15px;
	letter-spacing: 0.25em;
	color: var(--ootc-white-sub);
}
.ootc-wholesale__title {
	margin: 30px 0 15px;
	font-size: 30px;
	font-weight: 400;
	letter-spacing: 0.25em;
	color: var(--ootc-white);
}
.ootc-wholesale__sub {
	margin: 0 0 30px;
	font-size: 12.5px;
	color: var(--ootc-white-sub);
}
.ootc-wholesale__text {
	margin: 0 0 15px;
	font-size: 12.5px;
	letter-spacing: 0.25em;
}
.ootc-wholesale__text--en { color: var(--ootc-white-sub); }

/* 白ボタン（暗い背景用のバリエーション） */
.ootc-button--white {
	display: inline-block;
	margin-top: 30px;
	padding: 12.5px 60px;
	border-color: var(--ootc-white);
	color: var(--ootc-white);
}
.ootc-button--white:hover {
	background: var(--ootc-white);
	color: var(--ootc-main);
}

/* 塗りのボタン（申し込むなど、そのページでいちばん押してほしいボタン。WooCommerce の .button.alt と同じ見た目）。
   ホバーは「最も濃い色」#000 */
.ootc-button--fill { background: var(--ootc-main); color: #fff; }
.ootc-button--fill:hover { background: #000; border-color: #000; }
/* 暗い面では塗りが白になるので、文字は黒。ホバーは「最も明るい色」#fff */
.ootc-dark .ootc-button--fill { color: #000; }
.ootc-dark .ootc-button--fill:hover { background: #fff; border-color: #fff; }
/* ボタンの英語の半分（「申し込む ｜ SUBSCRIBE」の ｜ SUBSCRIBE）。690px未満は隠して、ボタンを1行に収める */
@media (width < 690px) {
	.ootc-button__en { display: none; }
}

/* ---------- CONTACT（フォームの部品。送信の処理は inc/contact.php、並びは templates/parts/contact.php） ---------- */

/* フォームはセクションの内容幅いっぱい（1〜4カラムのどの幅でも同じ作り） */
.ootc-form {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* ---- 区分（法人 / 個人）---- */

.ootc-form__types {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 0;
	padding: 0;
	border: 0;
}
/* 見出しは画面に出さず、読み上げにだけ残す */
.ootc-form__legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.ootc-form__types label {
	display: flex;
	align-items: center;
	gap: 15px; /* ラジオ↔日本語↔英語 すべて15pxに揃える */
	cursor: pointer;
}
/* ラジオ：ブラウザ既定の見た目を外し、15pxの円で描く
   未選択＝1pxの線のみ / 選択＝塗りつぶし */
.ootc-form input[type="radio"] {
	appearance: none;
	width: 15px;
	height: 15px;
	flex-shrink: 0; /* 横に並ぶ文字に押されて潰れないようにする */
	margin: 0;
	border: 1px solid var(--ootc-main);
	border-radius: 50%;
	background: none;
	cursor: pointer;
	transition: background 0.5s;
}
.ootc-form input[type="radio"]:checked { background: var(--ootc-main); }
/* 既定の見た目を外すと焦点の枠も消えるため、キーボード操作用に描き直す */
.ootc-form input[type="radio"]:focus-visible {
	outline: 1px solid #000;
	outline-offset: 2.5px;
}

/* ---- 各入力欄 ---- */

.ootc-form__field {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
/* 法人を選んだときだけ「会社名」を出す（:has() で判定。必須の付け外しは ootc.js） */
.ootc-form__field--corporate { display: none; }
.ootc-form:has(input[value="corporate"]:checked) .ootc-form__field--corporate { display: flex; }

.ootc-form label {
	font-size: 15px;
	line-height: 1; /* 1行の項目名 */
	letter-spacing: 0.25em;
	color: var(--ootc-main);
}
.ootc-form .en {
	margin-left: 15px;
	font-size: 12.5px;
	color: var(--ootc-sub);
}
/* line-height:1 はラベルの中だけ。折り返す説明文（同意文）は 1.5 のまま残す */
.ootc-form label .en { line-height: 1; letter-spacing: 0.25em; } /* 項目名（Name など）は文ではないので 0.25em */
/* ラジオの行は上の gap:15px が間隔を持つため、margin と二重にしない */
.ootc-form__types .en { margin-left: 0; }

.ootc-form input[type="text"],
.ootc-form input[type="email"],
.ootc-form textarea {
	width: 100%;
	padding: 12.5px 15px;
	border: 1px solid var(--ootc-main);
	border-radius: 0;
	background: rgba(255, 255, 255, 0.5);
	font-family: var(--ootc-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ootc-main);
	transition: border-color 0.5s;
}
.ootc-form input:focus,
.ootc-form textarea:focus {
	outline: none;
	border-color: #000; /* 入力中の位置を示す（最も濃い状態） */
}

/* 入力の判定。:user-valid / :user-invalid は「利用者が触れた後」にだけ効くため、
   読み込み直後に未入力の欄が赤くなることがない。
   フォーカスより後に書いて、入力中も判定の色が見えるようにする */
.ootc-form__field input:user-valid,
.ootc-form__field textarea:user-valid { border-color: var(--ootc-valid); }

.ootc-form__field input:user-invalid,
.ootc-form__field textarea:user-invalid { border-color: var(--ootc-error); }

/* サーバーが誤りと判定した欄（送信して戻ってきたとき）。触れたあとは上の :user-valid / :user-invalid が勝つ（詳細度が高い） */
.ootc-form__field [aria-invalid="true"] { border-color: var(--ootc-error); }
/* テーマの textarea{max-width:720px} を打ち消して他の入力欄と同じ全幅にする */
.ootc-form textarea { max-width: 100%; resize: vertical; }

/* ---- 同意の文（チェックボックスではなく、送信＝同意とする文面）---- */

.ootc-form__agree {
	margin: 0;
	padding: 22.5px 15px;
	line-height: 1.5;
	background: var(--ootc-tint);
	font-size: 15px;
	letter-spacing: 0.25em;
}
.ootc-form__agree a { text-decoration: underline; text-underline-offset: 2.5px; }
.ootc-form__agree .en {
	display: block;
	margin: 15px 0 0;
	padding-top: 15px;
	border-top: 1px solid var(--ootc-line);
}

/* ---- 送信ボタン（確認する・修正する・送信する）---- */

.ootc-form__submit {
	padding: 18.75px;
	background: none;
	/* border だと高さが2px増えるため、他の枠線と同じく box-shadow で描く */
	box-shadow: inset 0 0 0 1px var(--ootc-main);
	border: 0;
	font-family: var(--ootc-font);
	font-size: 15px;
	letter-spacing: 0.25em;
	color: var(--ootc-main);
	cursor: pointer;
	transition: background 0.5s, color 0.5s;
	line-height: 1.5;
}
.ootc-form__submit:hover {
	background: var(--ootc-main);
	color: #fff;
}
/* 塗り：確認の画面の「 送信する 」（そのページでいちばん押してほしいボタン。.ootc-button--fill と同じ考え方） */
.ootc-form__submit--fill { background: var(--ootc-main); color: #fff; }
.ootc-form__submit--fill:hover { background: #000; box-shadow: inset 0 0 0 1px #000; }

/* ボタンを2つ並べる（修正する ｜ 送信する）。690px未満は縦に積む（送信するが下＝親指の近く） */
.ootc-form__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
}
@media (width < 690px) {
	.ootc-form__actions { grid-template-columns: 1fr; gap: 15px; }
}

/* ---------- 404（templates/parts/error.php） ---------- */

.ootc-error {
	min-height: 100svh; /* ヘッダー下〜画面いっぱいに中央配置し、フッターは下に続く */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 90px var(--gap);
	text-align: center;
}
.ootc-error__code {
	margin: 0;
	font-size: 90px;
	letter-spacing: 0.25em;
	text-indent: 0.25em; /* 字間分の中央ズレ補正 */
	color: var(--ootc-line);
}
.ootc-error__title {
	margin: 30px 0 15px;
	font-size: 22.5px;
	font-weight: 400;
	letter-spacing: 0.25em;
}
.ootc-error__en {
	margin: 0 0 45px;
	font-size: 12.5px;
	color: var(--ootc-sub);
}
.ootc-error .ootc-button { padding: 12.5px 60px; }

/* ============================================
   各ページ（TOP以外）
   ============================================ */

/* ---------- ページ上部の帯（templates/parts/page-head.php） ----------
   固定ヘッダー（高さ約135px）の下にページ名が来るよう、上の余白を大きく取る */
.ootc-page-head {
	padding: 180px var(--gap) 90px;
	background-image: url("washi-dark.webp");
	background-size: 300px;
	background-repeat: repeat;
	color: var(--ootc-white);
}
.ootc-page-head__title {
	max-width: var(--w-4);
	margin: 0 auto;
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.25em;
}
/* h1 と リンク（記事・商品のとき）の両方で同じ並びにする */
.ootc-page-head__title,
.ootc-page-head__title a {
	display: flex;
	flex-wrap: wrap; /* 狭い画面では日本語を次の行へ */
	align-items: center;
	gap: 15px 22.5px;
}
.ootc-page-head__icon { width: 30px; height: 30px; opacity: var(--o-main); transition: opacity 0.5s; }
.ootc-page-head__en { color: var(--ootc-white); transition: color 0.5s; }
.ootc-page-head__ja { font-size: 15px; color: var(--ootc-white-sub); }
.ootc-page-head__title a:hover .ootc-page-head__en { color: #fff; }
.ootc-page-head__title a:hover .ootc-page-head__icon { opacity: 1; }

@media (width < 1020px) {
	.ootc-page-head { padding: 150px var(--gap) 60px; }
}
@media (width < 690px) {
	.ootc-page-head__title { font-size: 22.5px; }
	.ootc-page-head__icon { width: 22.5px; height: 22.5px; }
}

/* ---------- 読みものの本文（記事・プライバシーポリシー・商品の説明） ----------
   管理画面で書いた本文（段落・見出し・画像・区切り線・リスト）をそのまま整える。
   英文の段落は、ブロックの「追加CSSクラス」に en と入れると補助の色・小さめの文字になる（記事は日本語と同じ大きさ） */
.ootc-prose {
	font-size: 15px;
	letter-spacing: 0.25em;
	overflow-wrap: anywhere; /* 本文に直接書いたURL（「 ▼ 商品のご購入はこちら ▼ 」の下など）で、幅360pxの画面からはみ出さない */
}
.ootc-prose > * { margin: 0 0 30px; }
.ootc-prose > :last-child { margin-bottom: 0; }
.ootc-prose h2 {
	margin: 60px 0 22.5px;
	font-size: 22.5px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.25em;
}
.ootc-prose h3 {
	margin: 45px 0 15px;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.25em;
}
.ootc-prose > h2:first-child,
.ootc-prose > h3:first-child { margin-top: 0; }
.ootc-prose .en { font-size: 12.5px; }
.ootc-article__body .en { font-size: 15px; } /* お知らせ・ジャーナルの英文は日本語と同じ 15px（本人指定 2026-10-02） */
.ootc-prose a { text-decoration: underline; text-underline-offset: 2.5px; transition: color 0.5s; }
.ootc-prose a:hover { color: #000; }
.ootc-prose figure { margin: 45px 0; }
.ootc-prose img { width: 100%; }
.ootc-prose figcaption { margin-top: 10px; font-size: 12.5px; color: var(--ootc-sub); }
.ootc-prose hr {
	margin: 60px 0;
	border: 0;
	border-top: 1px solid var(--ootc-line);
}
.ootc-prose ul,
.ootc-prose ol { padding-left: 1.5em; }
.ootc-prose li + li { margin-top: 10px; }
.ootc-prose blockquote {
	margin: 45px 0;
	padding-left: 22.5px;
	border-left: 1px solid var(--ootc-line);
	color: var(--ootc-sub);
}

/* ---------- 記事ページ ----------
   本文は2列分（630px）で中央に置く（1行が長すぎると読みにくいため）。写真だけ3列分 */
.ootc-article > * {
	max-width: var(--w-2);
	margin-left: auto;
	margin-right: auto;
}
.ootc-article__head { margin-bottom: 45px; }
.ootc-article__date {
	display: block;
	margin-bottom: 15px;
	font-size: 15px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}
.ootc-article__title {
	margin: 0;
	font-size: 22.5px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.25em;
}
.ootc-article .ootc-article__image {
	max-width: var(--w-3);
	margin-bottom: 60px;
}
.ootc-article__image img { width: 100%; }
.ootc-article__foot { margin-top: 90px; }

/* ---------- 文書のページ（特商法・プライバシーポリシー・ご利用ガイド） ---------- */
.ootc-doc > .ootc-prose { max-width: var(--w-3); margin-bottom: 60px; }
.ootc-doc__lead {
	margin: 0 0 45px;
	font-size: 15px;
	letter-spacing: 0.25em;
}
.ootc-doc__lead a { text-decoration: underline; text-underline-offset: 2.5px; }
.ootc-doc__block { margin-top: 90px; }

/* ---------- ABOUTページ ---------- */
.ootc-policy .ootc-steps,
.ootc-certification .ootc-table { margin-top: 0; }

/* ---------- お問い合わせ（TOPと共用） ---------- */
.ootc-contact__lead {
	margin: 0 0 45px;
	font-size: 15px;
	letter-spacing: 0.25em;
}
.ootc-contact__lead .en { display: block; margin-top: 10px; font-size: 12.5px; }
.ootc-form__error {
	margin: 0;
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-error);
}
/* 確認・完了の画面は #contact へ移動して開くので、目印が固定ヘッダー（約135px）の下に来るよう、止まる位置を45px上げる */
.ootc-contact { scroll-margin-top: 45px; }
/* 入力 → 確認 → 完了 の目印。罫線の帯を3つ並べ、いまの画面だけ濃くする。690px未満は英語を隠す（1列が約90pxのため） */
.ootc-contact__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
	margin: 0 0 45px;
	padding: 0;
	list-style: none;
}
.ootc-contact__steps li {
	padding-top: 15px;
	border-top: 1px solid var(--ootc-line);
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}
.ootc-contact__steps [aria-current] { border-top-color: var(--ootc-main); color: var(--ootc-main); }
.ootc-contact__steps .en { margin-left: 15px; font-size: 12.5px; letter-spacing: 0.25em; color: var(--ootc-sub); } /* 英語はいまの画面でも補助の色。大文字なので 0.25em */
@media (width < 690px) {
	.ootc-contact__steps { gap: 15px; }
	.ootc-contact__steps .en { display: none; }
}
/* 確認の画面：内容の表の下に、同意の文とボタン */
.ootc-contact__confirm { margin-top: 30px; }
/* 完了の画面：トップへ戻る（文の長さに合わせた幅。404 のボタンと同じ） */
.ootc-contact__home { display: inline-block; padding: 12.5px 60px; }
.ootc-contact .ootc-message a { text-decoration: underline; text-underline-offset: 2.5px; }

/* ============================================
   お茶のサブスク（/subscription/。申し込みのためのページ）
   上から：最初の画面 → なぜ毎月か ＋ 3つのよさ → プラン → しくみ → つくっている人たち（暗い面）
           → よくある質問 → 最後の申し込み → 特商法。1020px未満は画面の下に申し込みの帯が付いてくる。
   ページ上部の帯（page-head）は使わない。セクションは templates/parts/subscription-*.php、データは inc/subscription.php
   ============================================ */

/* ---------- 最初の画面（写真 ＋ 見出し ＋ 月額 ＋ プランへ） ----------
   写真を画面いっぱいに敷き、文字は左下に置く（本文の左端 = ヘッダーのロゴの左端にそろう）。
   色は .ootc-dark（白の変数）。見出しと金額だけは #fff にして、写真の上でもはっきり読めるようにする */
.ootc-subscription-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 100svh;
	background-color: #000; /* 写真が届くまでは黒（TOPのヒーローと同じ。白いロゴとメニューが消えないように） */
}
/* 「.ootc img」（height:auto）より詳細度を上げて、写真を面いっぱいに広げる（0,2,1 > 0,1,1） */
.ootc img.ootc-subscription-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 暗幕：全体に薄く（TOPのヒーローと同じ15%）、文字のある下ほど濃く */
.ootc-subscription-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent 75%),
		var(--ootc-scrim);
	pointer-events: none;
}
.ootc-subscription-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding: 180px var(--gap) 90px; /* 上は固定ヘッダー（約135px）の分を空ける */
}
.ootc-subscription-hero__label {
	margin: 0 0 30px;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.25em;
}
.ootc-subscription-hero__title {
	margin: 0;
	font-size: 45px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.25em;
	color: #fff;
}
.ootc-subscription-hero__en {
	margin: 15px 0 0;
	font-size: 15px;
}
.ootc-subscription-hero__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
	margin: 45px 0 0;
	font-size: 15px;
	letter-spacing: 0.25em;
	color: #fff;
}
.ootc-subscription-hero__price strong {
	font-size: 30px;
	font-weight: 400;
	letter-spacing: 0.1em;
}
.ootc-subscription-hero__price span { font-size: 12.5px; color: var(--ootc-main); white-space: nowrap; }
/* 3つの約束（有機JAS・発送の時期・いつでも解約）。枠で囲んだ短い札 */
.ootc-subscription-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22.5px 0 0;
	padding: 0;
	list-style: none;
}
.ootc-subscription-hero__points li {
	padding: 5px 12.5px;
	border: 1px solid var(--ootc-sub);
	font-size: 12.5px;
	letter-spacing: 0.25em;
}
.ootc-subscription-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22.5px 45px;
	margin-top: 45px;
}
.ootc-subscription-hero__actions .ootc-button { padding: 15px 60px; }
.ootc-subscription-hero__manage {
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-main);
	text-decoration: underline;
	text-underline-offset: 2.5px;
	transition: color 0.5s;
}
.ootc-subscription-hero__manage:hover { color: #fff; }

/* ---------- なぜ毎月か（文 ｜ 写真）＋ 3つのよさ ---------- */
.ootc-subscription-intro .ootc-split { margin-bottom: 90px; }

/* ---------- プラン（2つを横に並べて比べる） ----------
   1020px以上は2列。箱の中の段（どんな方に / 写真 ｜ 名前 / 金額 / 申し込む / 表）を subgrid で2つの箱にそろえ、
   片方にだけ「お得な額」の行があっても、ボタンと表の高さが横でそろうようにする。1020px未満は縦に積む */
.ootc-plans {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--gap);
}
.ootc-plan {
	display: grid;
	grid-row: span 5;
	grid-template-rows: subgrid;
	align-content: start;
}
/* 最初の画面の「プランを選ぶ」で移ったとき、見出しが固定ヘッダー（約135px）に重ならないように。
   セクションの上の余白（90px）と合わせて、見出しがヘッダーのすぐ下に来る */
.ootc-subscription-plans { scroll-margin-top: 45px; }
.ootc-plan__for {
	margin: 0 0 22.5px;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.25em;
}
.ootc-plan__for .en { margin-left: 15px; font-size: 12.5px; letter-spacing: 0.25em; } /* 大文字の英語（TO BEGIN WITH など）は 0.25em */
/* 写真 ｜ 名前（半分ずつ）。写真は商品の写真そのまま（正方形・背景 #FAFAFA） */
.ootc-plan__main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
	align-items: center;
	margin-bottom: 30px;
}
.ootc-plan__photo { margin: 0; background: #FAFAFA; }
.ootc-plan__photo img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
}
.ootc-plan__en {
	margin: 0 0 15px;
	font-size: 12.5px;
	line-height: 1;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}
.ootc-plan__name {
	margin: 0 0 15px;
	font-size: 22.5px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.25em;
	word-break: keep-all; /* 2行になるときは語の切れ目で（商品ページの名前と同じ） */
	overflow-wrap: anywhere;
	text-wrap: balance;
}
.ootc-plan__lead {
	margin: 0;
	font-size: 15px;
	letter-spacing: 0.25em;
}
.ootc-plan__lead .en { display: block; margin-top: 10px; font-size: 12.5px; }
.ootc-plan__buy { margin-bottom: 30px; }
/* 金額（1,500円）と「/ 月（ 税込・送料込み ）」を別の塊にして、入りきらないときは塊ごと次の行へ。
   ただの文だと「1,500」と「円」のあいだで折り返してしまうため */
.ootc-plan__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	font-size: 30px;
	line-height: 1;
	letter-spacing: 0.1em;
}
.ootc-plan__price span {
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}
.ootc-plan__saving {
	margin: 15px 0 0;
	font-size: 12.5px;
	letter-spacing: 0.25em;
}
.ootc-plan__action .ootc-button { padding: 15px 10px; }
.ootc-plan__note {
	margin: 10px 0 0;
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}
/* 表：項目の列は、いちばん長い項目の幅（2つの箱で項目が同じなので、列の位置もそろう）。
   1行 = div。列は subgrid で表全体の列を借りるので、どの行も項目の幅がそろい、罫線は行の端から端まで続く */
.ootc-plan__specs {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: var(--gap);
	margin: 30px 0 0;
	border-bottom: 1px solid var(--ootc-line);
}
.ootc-plan__specs > div {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	padding: 15px 0;
	border-top: 1px solid var(--ootc-line);
}
.ootc-plan__specs dt,
.ootc-plan__specs dd {
	margin: 0;
	letter-spacing: 0.25em;
}
.ootc-plan__specs dt { font-size: 12.5px; line-height: 22.5px; color: var(--ootc-sub); } /* 行の高さを dd（15px × 1.5）にそろえ、1行目の位置を合わせる */
.ootc-plan__specs dd { font-size: 15px; }
.ootc-subscription-plans__manage {
	margin: 30px 0 0;
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}
.ootc-subscription-plans__manage a {
	text-decoration: underline;
	text-underline-offset: 2.5px;
	transition: color 0.5s;
}
.ootc-subscription-plans__manage a:hover { color: #000; }

/* ---------- つくっている人たち（暗い面。ABOUT と同じく、面は全幅・中身は __inner が1350px幅） ---------- */
.ootc-subscription-origin__inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 90px var(--gap);
}
.ootc-subscription-origin__note {
	margin: 15px 0 0;
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}

/* ---------- 最後の申し込み（中央に見出し、プランを1行ずつ） ---------- */
.ootc-subscription-cta { text-align: center; }
.ootc-subscription-cta__title {
	margin: 0;
	word-break: keep-all; /* 狭い画面では読点で折り返す（「を。」だけが次の行に落ちないように） */
	font-size: 30px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.25em;
	padding-left: 0.25em; /* 字間分の中央ズレ補正（TOPのヒーローと同じ） */
}
.ootc-subscription-cta__en {
	margin: 15px 0 0;
	font-size: 15px;
	color: var(--ootc-sub);
}
/* プラン1つ = 箱1つ（名前 ｜ 金額 ｜ 申し込む）。2つを横に並べ、幅は本文の3列分 */
.ootc-subscription-cta__plans {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
	max-width: var(--w-3);
	margin: 45px auto 0;
	padding: 0;
	list-style: none;
}
.ootc-subscription-cta__plans li { display: flex; flex-direction: column; gap: 15px; }
.ootc-subscription-cta__name {
	margin: 0;
	font-size: 15px;
	letter-spacing: 0.25em;
}
.ootc-subscription-cta__name .en { display: block; margin-top: 10px; font-size: 12.5px; letter-spacing: 0.25em; } /* 大文字の英語（TEA SUBSCRIPTION）は 0.25em */
.ootc-subscription-cta__price {
	display: flex; /* 金額と「/ 月（ 税込・送料込み ）」を別の塊に（プランの金額と同じ） */
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 10px;
	margin: 0 0 10px;
	font-size: 22.5px;
	letter-spacing: 0.1em;
}
.ootc-subscription-cta__price span {
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}
.ootc-subscription-cta__points {
	margin: 30px 0 0;
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}

/* ---------- 画面の下の申し込みの帯（1020px未満。出し入れは ootc.js が .is-visible を付け外しする） ----------
   プランと最後の申し込みが画面に無いあいだだけ出す。広い画面ではプランが近くに見えるので出さない */
.ootc-subscription-bar { display: none; }

/* ---------- 特商法（ページのいちばん下。上の「最後の申し込み」の余白が続くので、上の余白は付けない） ----------
   .ootc-section を付けて詳細度を上げる（1020px未満の「.ootc-section { padding: 60px … }」がファイルの後ろにあり、同じ強さだと負けるため） */
.ootc-section.ootc-subscription-law { padding-top: 0; }

/* ---------- お茶のサブスク：画面幅ごとの調整 ---------- */
@media (width < 1020px) {
	.ootc-subscription-hero__inner { padding: 150px var(--gap) 60px; }
	.ootc-subscription-intro .ootc-split { margin-bottom: 60px; }

	/* プランは縦に積む（段をそろえる subgrid は外す） */
	.ootc-plans { grid-template-columns: 1fr; row-gap: var(--gap); }
	.ootc-plan { display: block; grid-row: auto; }

	.ootc-subscription-origin__inner { padding: 60px var(--gap); }

	.ootc-subscription-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 4; /* 固定ヘッダー（5）とドロワー（25）より下 */
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--gap);
		padding: 15px var(--gap) calc(15px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--ootc-line);
		background-color: #fff;
		background-image: url("washi-light.webp"); /* ページと同じ和紙 */
		background-size: 300px;
		transform: translateY(100%);
		visibility: hidden;
		transition: transform 0.5s, visibility 0s linear 0.5s;
	}
	.ootc-subscription-bar.is-visible {
		transform: none;
		visibility: visible;
		transition: transform 0.5s, visibility 0s;
	}
	.ootc-subscription-bar__price {
		margin: 0;
		font-size: 15px;
		letter-spacing: 0.25em;
	}
	.ootc-subscription-bar__price span { display: block; font-size: 12.5px; color: var(--ootc-sub); }
	.ootc-subscription-bar .ootc-button { flex: none; padding: 12.5px 30px; }
}
@media (width < 690px) {
	.ootc-subscription-hero__title { font-size: 30px; }
	.ootc-subscription-hero__actions { gap: 22.5px; }
	.ootc-subscription-hero__actions .ootc-button { flex: 1 1 100%; padding: 15px 10px; }
	.ootc-split__title { font-size: 22.5px; }

	/* プランの写真は名前の上に、横長の枠で（半分ずつだと名前が細く折り返すため） */
	.ootc-plan__main { grid-template-columns: 1fr; gap: 22.5px; }
	.ootc-plan__photo img { aspect-ratio: 3 / 2; }

	.ootc-subscription-cta__title { font-size: 22.5px; }
	.ootc-subscription-cta__plans { grid-template-columns: 1fr; }
}

/* ---------- すべての商品 ---------- */
.ootc-shop__note {
	margin: 0 0 30px;
	padding: 15px 22.5px;
	background: var(--ootc-tint);
	font-size: 12.5px;
	letter-spacing: 0.25em;
}
.ootc-shop__note a { margin-left: 15px; text-decoration: underline; text-underline-offset: 2.5px; }
.ootc-shop__group + .ootc-shop__group { margin-top: 90px; }
/* 分類のボタン（茶葉 ｜ TEA LEAF …）。列は商品のグリッドと同じ（1列300px・画面幅に合わせて 4 / 3 / 2 / 1列） */
.ootc-shop__nav {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--col), 100%), 1fr));
	gap: 10px var(--gap);
	margin: 0 0 60px;
}
/* 移った先の見出しが、固定ヘッダー（上30 + ロゴ45 + 下60 = 135px）の下に隠れないように */
.ootc-shop__group { scroll-margin-top: 135px; }
/* 紹介文は見出しの説明として読ませるため、見出しとの間を 45 → 30px に詰める */
.ootc-shop__group > .ootc-section__head:has(+ .ootc-shop__intro) { margin-bottom: 30px; }
.ootc-shop__intro {
	margin: 0 0 45px;
	font-size: 15px;
	letter-spacing: 0.25em;
}
.ootc-shop__intro .en { display: block; margin-top: 10px; font-size: 12.5px; }

/* ---------- 写真 ｜ 情報の2列（商品ページ・お茶のサブスク） ----------
   左に写真（2列分 630px・正方形）、右に名前・価格・申し込み（Amazon の商品ページの型）。1020px未満は縦に積む */
.ootc-detail {
	display: grid;
	grid-template-columns: var(--w-2) 1fr;
	gap: 45px var(--gap);
	align-items: start;
}
/* min-width:0 … 横に並べた写真（ギャラリー）の合計の幅で、列が押し広げられないように */
.ootc-detail__media { margin: 0; min-width: 0; }
.ootc-detail__media > img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}
.ootc-detail__type {
	margin: 0 0 15px;
	font-size: 12.5px;
	line-height: 1;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}
.ootc-detail__name {
	margin: 0 0 22.5px;
	font-size: 22.5px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.25em;
	/* 2行になるときは、語の切れ目（空白・読点・<wbr>）で折り返し、行の長さをそろえる
	   （1〜2文字だけが次の行に落ちたり「お／茶」のように語の途中で割れたりしないように）。
	   切れ目の無い長い語だけは、はみ出さないよう途中で折り返す */
	word-break: keep-all;
	overflow-wrap: anywhere;
	text-wrap: balance;
}
.ootc-detail__name:has(+ .ootc-detail__en) { margin-bottom: 10px; }
.ootc-detail__en {
	margin: 0 0 22.5px;
	font-size: 15px;
	color: var(--ootc-sub);
}
.ootc-detail__lead {
	margin: 0 0 22.5px;
	font-size: 15px;
	letter-spacing: 0.25em;
}
.ootc-detail__lead .en { display: block; margin-top: 10px; font-size: 12.5px; }

/* ---------- 商品の写真（大きい写真 ＋ 小さい写真の列。templates/parts/product-detail.php） ----------
   大きい写真は横に並べ、1枚ずつ止まるスクロールにする（指でめくれる。マウスは小さい写真で切り替える）。
   小さい写真は6枚で1列（表・裏に茶葉・お茶の色などが増えても、どの画面幅でも1列に収まる）。
   切り替え・今の写真の印・拡大は assets/ootc.js */
.ootc-gallery__stage {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain; /* 端でめくりすぎても、ブラウザの「戻る」が動かないように */
	scrollbar-width: none;          /* 今どの写真かは小さい写真の列で分かるので、スクロールバーは出さない */
}
.ootc-gallery__stage::-webkit-scrollbar { display: none; } /* scrollbar-width に対応していない古い Safari 用 */
.ootc-gallery__slide {
	display: block;
	overflow: hidden; /* 拡大した写真を枠の中に収める */
	scroll-snap-align: start;
}
.ootc-gallery__slide img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
	transition: transform 0.5s;
}
/* 拡大はマウスで操作する画面だけ（指の画面は、写真を押すと原寸の写真が開く）。
   押した場所を中心に3倍にし、マウスを動かすと見る場所が動く。
   3倍にすると、裏面の食品表示の文字が約19px（630px表示では約6px）になって読める */
@media (hover: hover) and (pointer: fine) {
	.ootc-gallery__slide { cursor: zoom-in; }
	.ootc-gallery.is-zoomed .ootc-gallery__slide { cursor: zoom-out; }
	.ootc-gallery.is-zoomed .ootc-gallery__slide img { transform: scale(3); }
}

.ootc-gallery__thumbs {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
	margin: 10px 0 0;
	padding: 0;
}
.ootc-gallery__thumb {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var(--ootc-line);
	background: none;
	cursor: pointer;
	transition: border-color 0.5s;
}
/* 今の写真と、ホバーした写真は線を濃くする（サブスクの案内の箱と同じ表し方） */
.ootc-gallery__thumb:hover,
.ootc-gallery__thumb[aria-current="true"] { border-color: var(--ootc-main); }
.ootc-gallery__thumb img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}
/* 幅360pxの画面では英語が2行目に落ちるので、折り返す文の行間（1.5）にしておく */
.ootc-gallery__hint {
	margin: 10px 0 0;
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}
.ootc-gallery__hint .en { margin-left: 15px; }

/* ---------- 商品ページ（写真と名前の部品は上の .ootc-detail / .ootc-gallery） ---------- */
.ootc-product-detail__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0 0 30px;
	padding: 0;
}
.ootc-product-detail__tags li {
	padding: 5px 12.5px;
	border: 1px solid var(--ootc-line);
	font-size: 12.5px;
	letter-spacing: 0.25em;
}
.ootc-product-detail__price {
	margin: 0 0 10px;
	font-size: 30px;
	line-height: 1.5;
	letter-spacing: 0.1em;
}
/* 金額（WooCommerce の span）にも 0.1em を書く。書かないと基本の 0.25em になる（「税込」は 0.25em のまま） */
.ootc-product-detail__price .amount,
.ootc-product-detail__price .amount * { letter-spacing: 0.1em; }
.ootc-product-detail__per {
	margin: 0;
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}
.ootc-product-detail__cart { margin-top: 30px; }
/* 「この商品について問い合わせる」：見た目は「すべて見る」と同じ。
   押せる範囲は文字の幅だけにし、右の列が狭い画面（1020〜1349px は300〜630px）では折り返す。
   折り返すのは日本語と英語のあいだ（英語は .ootc-nowrap で1かたまり） */
.ootc-product-detail__inquiry {
	width: fit-content;
	margin-top: 22.5px;
	white-space: normal;
}
.ootc-product-detail__shipping {
	list-style: none;
	margin: 30px 0 0;
	padding: 22.5px 0 0;
	border-top: 1px solid var(--ootc-line);
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
	text-wrap: pretty; /* 折り返したとき、最後の行が1文字（「料」など）だけにならないように */
}
.ootc-product-detail__shipping li + li { margin-top: 5px; }
/* 商品の説明（名前の下・価格の上） */
.ootc-product-detail__story { margin: 0 0 30px; }
.ootc-product-detail__story p {
	margin: 0;
	font-size: 15px;
	letter-spacing: 0.25em;
}
.ootc-product-detail__story .en { margin-top: 10px; font-size: 12.5px; }
.ootc-product-detail__description { max-width: var(--w-3); margin-top: 90px; }
/* お茶の淹れ方：数字の帯（.ootc-facts）を4列の格子に。690px未満は2列 × 2段 */
.ootc-product-detail__brew { margin-top: 90px; }
.ootc-product-detail__brew .ootc-facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px var(--gap);
}
.ootc-product-detail__brew-text { max-width: var(--w-3); margin-top: 45px; }
.ootc-product-detail__brew-text p {
	margin: 0;
	font-size: 15px;
	letter-spacing: 0.25em;
}
.ootc-product-detail__brew-text .en { margin-top: 10px; font-size: 12.5px; }
.ootc-product-detail__brew-text .ootc-note { margin-top: 15px; font-size: 12.5px; } /* 上の p（15px）より詳細度を上げて、注記の大きさに戻す */
.ootc-product-detail__specs { margin-top: 90px; }

@media (width < 1020px) {
	.ootc-detail { grid-template-columns: 1fr; }
	.ootc-split { grid-template-columns: 1fr; }
	/* 見出しの下の余白（1020px未満は30px）にそろえる */
	.ootc-shop__intro { margin-bottom: 30px; }
}

/* 690px未満：表は項目の下に内容を置く */
@media (width < 690px) {
	.ootc-table > div { grid-template-columns: 1fr; }
	.ootc-table dt { color: var(--ootc-sub); font-size: 12.5px; }
	/* 分類のボタンは2列にし、日本語を隠して英語だけにする（セクション見出しと同じ決まり）。
	   1列のままだと4つで約210px を使い、最初の画面に商品が入らないため */
	.ootc-shop__nav { grid-template-columns: 1fr 1fr; gap: 10px; }
	.ootc-shop__nav-ja { display: none; }
	.ootc-product-detail__brew .ootc-facts { grid-template-columns: 1fr 1fr; }
}

/* ============================================
   WooCommerce（カート・購入手続き・注文完了・マイページ・商品ページのカート部分）
   WooCommerce 標準のHTMLに、このサイトの見た目を当てる（標準のCSSは読み込んでいない）。
   HTMLを書き換えていないので、WooCommerce・Stripe の更新で中身が増えても崩れにくい
   ============================================ */

/* ---------- ボタン ----------
   通常は枠線（.ootc-button と同じ）。.alt（カートに追加・購入手続きへ・注文を完了する）だけ塗る */
.ootc .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12.5px 30px;
	border: 1px solid var(--ootc-main);
	border-radius: 0;
	background: none;
	font-family: var(--ootc-font);
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 0.25em;
	text-align: center;
	color: var(--ootc-main);
	cursor: pointer;
	transition: background 0.5s, border-color 0.5s, color 0.5s;
}
.ootc .button:hover { background: var(--ootc-main); color: #fff; }
.ootc .button.alt { background: var(--ootc-main); color: #fff; }
.ootc .button.alt:hover { background: #000; border-color: #000; }
.ootc .button:disabled,
.ootc .button.disabled { opacity: 0.5; cursor: not-allowed; }
.ootc .button:disabled:hover { background: none; color: var(--ootc-main); }

/* ---------- 入力欄（お問い合わせフォームと同じ見た目） ---------- */
.ootc .woocommerce input.input-text,
.ootc .woocommerce select,
.ootc .woocommerce textarea,
.ootc .quantity .qty {
	width: 100%;
	padding: 12.5px 15px;
	border: 1px solid var(--ootc-main);
	border-radius: 0;
	background-color: rgba(255, 255, 255, 0.5);
	font-family: var(--ootc-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ootc-main);
	transition: border-color 0.5s;
}
.ootc .woocommerce input.input-text:focus,
.ootc .woocommerce select:focus,
.ootc .woocommerce textarea:focus,
.ootc .quantity .qty:focus { outline: none; border-color: #000; }
/* 選択欄：ブラウザ標準の矢印を外し、細い線の矢印にする */
.ootc .woocommerce select {
	appearance: none;
	padding-right: 45px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-opacity='.75'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 10px 6px;
}
.ootc .woocommerce textarea { min-height: 105px; resize: vertical; }
.ootc .woocommerce input[type="checkbox"],
.ootc .woocommerce input[type="radio"] { width: 15px; height: 15px; margin: 0; accent-color: var(--ootc-main); }

/* iPhone は16px未満の入力欄に触れると画面が拡大されるため、iPhone・iPad でだけ16pxにする */
@supports (-webkit-touch-callout: none) {
	.ootc input:not([type="checkbox"]):not([type="radio"]),
	.ootc select,
	.ootc textarea { font-size: 16px !important; }
}

/* ---------- 入力欄の行（ラベル + 欄） ---------- */
.ootc .woocommerce .form-row { margin: 0 0 22.5px; }
.ootc .woocommerce .form-row > label {
	display: block;
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 0.25em;
}
.ootc .woocommerce .required { color: var(--ootc-error); text-decoration: none; }
.ootc .woocommerce .optional { font-size: 12.5px; color: var(--ootc-sub); }
.ootc .woocommerce .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	letter-spacing: 0.25em;
	cursor: pointer;
}
/* 姓・名 / 郵便番号・都道府県 を2列に並べる（WooCommerce の form-row-first / last）。690px未満は1列 */
.ootc .woocommerce :is(
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-address-fields__field-wrapper,
	.woocommerce-EditAccountForm,
	.woocommerce-ResetPassword,
	.woocommerce-form-login,
	.checkout_coupon
) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--gap);
}
.ootc .woocommerce :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, .woocommerce-ResetPassword, .woocommerce-form-login, .checkout_coupon) > * { grid-column: 1 / -1; }
.ootc .woocommerce :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, .woocommerce-ResetPassword, .woocommerce-form-login, .checkout_coupon) > .form-row-first { grid-column: 1; }
.ootc .woocommerce :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, .woocommerce-ResetPassword, .woocommerce-form-login, .checkout_coupon) > .form-row-last { grid-column: 2; }
.ootc .checkout_coupon .button { width: 100%; }
/* アカウント詳細は WooCommerce の並びが「名・姓」なので、日本の順（姓・名）に入れ替える */
.ootc .woocommerce-EditAccountForm > .form-row-first { grid-row: 1; grid-column: 2; }
.ootc .woocommerce-EditAccountForm > .form-row-last { grid-row: 1; grid-column: 1; }

/* パスワード欄の「表示」ボタン（WooCommerce が欄の中に置く。標準はアイコンだが文字にする） */
.ootc .password-input { position: relative; display: block; }
.ootc .show-password-input {
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--ootc-font);
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
	cursor: pointer;
}
.ootc .show-password-input::after { content: "表示"; }
.ootc .show-password-input.display-password::after { content: "隠す"; }
.ootc .woocommerce-password-strength,
.ootc .woocommerce-password-hint {
	display: block;
	margin-top: 10px;
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}
.ootc .woocommerce-password-strength.short,
.ootc .woocommerce-password-strength.bad { color: var(--ootc-error); }
.ootc .woocommerce-password-strength.good,
.ootc .woocommerce-password-strength.strong { color: var(--ootc-valid); }

/* ---------- お知らせ（カートに追加しました・入力の誤り など） ---------- */
.ootc .woocommerce-message,
.ootc .woocommerce-info,
.ootc .woocommerce-error,
.ootc .cart-empty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin: 0 0 30px;
	padding: 22.5px;
	background: var(--ootc-tint);
	list-style: none;
	font-size: 15px;
	letter-spacing: 0.25em;
}
.ootc .woocommerce-message .button,
.ootc .woocommerce-info .button { order: 1; padding: 5px 15px; font-size: 12.5px; }
.ootc .woocommerce-info a:not(.button),
.ootc .woocommerce-error a { text-decoration: underline; text-underline-offset: 2.5px; }
.ootc .woocommerce-error {
	display: block;
	color: var(--ootc-error);
}
.ootc .woocommerce-error li + li { margin-top: 10px; }
.ootc .return-to-shop { margin: 0; }

/* ---------- 表（金額の箱・ご注文内容・注文の詳細・注文履歴） ----------
   カートの商品の表は、下の「カート」で1商品ずつの格子に組み直す */
.ootc .shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	letter-spacing: 0.25em;
}
.ootc .shop_table th,
.ootc .shop_table td {
	padding: 22.5px 10px;
	border-top: 1px solid var(--ootc-line);
	font-weight: 400;
	text-align: left;
	vertical-align: middle;
}
.ootc .shop_table th:first-child,
.ootc .shop_table td:first-child { padding-left: 0; }
.ootc .shop_table th:last-child,
.ootc .shop_table td:last-child { padding-right: 0; }
.ootc .shop_table thead th {
	padding-top: 0;
	border-top: 0;
	font-size: 12.5px;
	color: var(--ootc-sub);
}
.ootc .shop_table tbody tr:last-child > *,
.ootc .shop_table tfoot tr:last-child > * { border-bottom: 1px solid var(--ootc-line); }
.ootc .shop_table a { transition: color 0.5s; }
.ootc .shop_table a:not(.button):hover { color: #000; }
.ootc .shop_table .product-subtotal,
.ootc .shop_table .product-total,
.ootc .shop_table tfoot td { text-align: right; }
.ootc .product-quantity strong { font-weight: 400; }
/* 合計だけ大きく（うち消費税は小さいまま）。大きい金額は商品ページと同じ 0.1em */
.ootc .order-total strong .amount { font-size: 22.5px; }
.ootc .order-total strong .amount,
.ootc .order-total strong .amount * { letter-spacing: 0.1em; }
.ootc .includes_tax {
	display: block;
	margin-top: 5px;
	font-size: 12.5px;
	color: var(--ootc-sub);
	word-break: keep-all; /* 狭い箱で折り返すときは、語の途中ではなく空白で（「8%を含む」を割らない） */
}

/* 見出し（ご注文金額・ご請求先情報・お支払い方法・ご注文内容・マイページの各見出し） */
.ootc .woocommerce h2,
.ootc .woocommerce h3 {
	margin: 0 0 22.5px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.25em;
}

/* ============================================
   カート・購入手続き・ご注文完了の並び（Amazon の型）
   左に中身の箱、右に金額の箱（1列分 = 300px）。1020px未満は縦に積む。
   並びを作るフック（中身を足す・移す）は inc/woocommerce-layout.php
   ============================================ */

/* ---------- 箱（罫線で囲んだ面。Amazon のカードにあたる） ----------
   内側の余白 30px（690px未満は 15px）。自分で書くHTMLは .ootc-box を付ける。
   WooCommerce が出す要素には class を足せないので、ここに並べて同じ見た目にする */
.ootc-box,
.ootc .woocommerce :is(.woocommerce-cart-form, .cart_totals, #customer_details),
.ootc .woocommerce-order > :is(.woocommerce-order-overview, .woocommerce-order-details) {
	padding: 30px;
	border: 1px solid var(--ootc-line);
	background: rgba(255, 255, 255, 0.5);
}

/* チェックの印（送料無料・ご注文完了）：線 1px・15px の四角に描く。色は background で決める */
.ootc-free-shipping.is-free::before,
.ootc .woocommerce-thankyou-order-received::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background: var(--ootc-valid);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M1.5 8l4 4 8-9' fill='none' stroke='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- サブスクの案内（カートの一番上。templates/parts/subscription-banner.php） ----------
   写真（1列分 300 × 150）| 文 | 詳しく見る。箱全体がリンク。Amazon のクレジットカードの広告の位置。
   文は上下 15px の余白で 150px に収まる量にしてある（箱の高さ = 写真の高さ 150px） */
.ootc-promo { margin-bottom: 30px; }
.ootc-promo__link {
	display: grid;
	grid-template-columns: var(--col) 1fr auto;
	grid-template-areas: "image text more";
	align-items: center;
	column-gap: var(--gap);
	border: 1px solid var(--ootc-line);
	background: rgba(255, 255, 255, 0.5);
	transition: border-color 0.5s;
}
/* 写真は箱の高さいっぱい（文が折り返して箱が高くなっても、上下に隙間ができない） */
.ootc .ootc-promo__link > img {
	grid-area: image;
	align-self: stretch;
	width: 100%;
	height: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}
.ootc-promo__text {
	grid-area: text;
	padding-block: 15px;
	font-size: 15px;
	letter-spacing: 0.25em;
}
.ootc-promo__text > * { margin: 0; }
.ootc-promo__label {
	margin-bottom: 15px;
	font-size: 12.5px;
	line-height: 1;
	color: var(--ootc-sub);
}
.ootc-promo__title {
	margin-bottom: 15px;
	font-size: 22.5px;
	line-height: 1;
}
.ootc-promo__text .en { margin-top: 5px; font-size: 12.5px; }
.ootc-promo__link > .ootc-section__more { grid-area: more; padding-right: 30px; }
/* 箱のどこに触れても、枠と「詳しく見る」が濃くなる */
.ootc-promo__link:hover { border-color: var(--ootc-main); }
.ootc-promo__link:hover .ootc-section__more { color: #000; }
.ootc-promo__link:hover img.ootc-icon--arrow { opacity: 1; }

/* ---------- カート ----------
   左：商品の箱 ／ 右：金額の箱（送料無料の案内・合計・ご購入手続きへ） */
.ootc .woocommerce:has(> .cart-collaterals) {
	display: grid;
	grid-template-columns: 1fr var(--col);
	/* 金額の箱が商品の箱より高いとき、余りを2行目（1fr）だけに回す。
	   auto 同士だと空のお知らせの行にも余りが配られ、商品の箱だけが下にずれる */
	grid-template-rows: auto 1fr;
	column-gap: var(--gap);
	align-items: start;
}
.ootc .woocommerce:has(> .cart-collaterals) > * { grid-column: 1; }
/* 金額の箱は、お知らせ（1行目）と商品の箱（2行目）の横に、上端から並べる */
.ootc .woocommerce:has(> .cart-collaterals) > .cart-collaterals { grid-column: 2; grid-row: 1 / span 2; }

/* 商品の表：1商品 = 1行の格子に組み直す。見出しは「商品」と「小計」だけ残す（Amazon の「価格」にあたる）。
   1個あたりの金額は出さない（数量と小計から分かり、商品ページにもある）。
   上の「表」の罫線と余白は当てない（詳細度を上の表の指定より高くしてある） */
.ootc table.shop_table.cart,
.ootc table.cart :is(thead, tbody) { display: block; }
.ootc table.cart tr { display: grid; }
.ootc table.shop_table.cart :is(th, td) { padding: 0; border: 0; }
.ootc table.cart :is(.product-price, thead .product-remove, thead .product-thumbnail, thead .product-quantity) { display: none; }
.ootc table.cart thead tr {
	grid-template-columns: 1fr auto;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--ootc-line);
}

/* 1商品：写真 | 名前・在庫・発送 | 小計。数量と削除は、写真の下端にそろえる */
.ootc table.cart .cart_item {
	grid-template-columns: 150px auto 1fr auto;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"thumb name     name   subtotal"
		"thumb quantity remove .";
	gap: 15px var(--gap);
	padding: 30px 0;
	border-bottom: 1px solid var(--ootc-line);
}
.ootc .cart_item .product-thumbnail { grid-area: thumb; }
.ootc .cart_item .product-name { grid-area: name; }
.ootc .cart_item .product-subtotal { grid-area: subtotal; }
.ootc .cart_item .product-quantity { grid-area: quantity; align-self: end; }
/* 削除は、数量の枠（高さ45px）の上下の真ん中にそろえる */
.ootc .cart_item .product-remove {
	grid-area: remove;
	align-self: end;
	display: flex;
	align-items: center;
	height: 45px;
}
.ootc .cart_item .product-thumbnail img {
	width: 150px;
	aspect-ratio: 1;
	object-fit: cover;
}
/* 商品名の下の「在庫あり」と発送の目安（inc/woocommerce-layout.php で足す） */
.ootc .cart_item :is(.stock, .ootc-cart-ship, .backorder_notification) {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--ootc-sub);
}
.ootc .cart_item .remove {
	font-size: 12.5px;
	color: var(--ootc-sub);
	text-decoration: underline;
	text-underline-offset: 2.5px;
	transition: color 0.5s;
}
.ootc .cart_item .remove:hover { color: var(--ootc-error); }

/* 数量：− 数字 ＋ を1つの枠に（Amazon の数量ボタン）。45 × 3 = 135px。押すと ootc.js がカートを更新する */
.ootc .cart .quantity {
	display: flex; /* inline-flex だと文字の行として扱われ、下に数px の隙間ができて写真の下端とずれる */
	width: max-content;
	height: 45px;
	border: 1px solid var(--ootc-main);
}
.ootc .cart .quantity .qty {
	width: 45px;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
	letter-spacing: 0; /* 数字を枠のまん中に置く（字間は最後の字の後ろにも付き、左にずれるため） */
	appearance: textfield; /* ブラウザ標準の上下の矢印を消す（− ＋ と二重になるため） */
}
.ootc .cart .quantity .qty::-webkit-inner-spin-button,
.ootc .cart .quantity .qty::-webkit-outer-spin-button { appearance: none; margin: 0; }
.ootc .ootc-qty {
	position: relative;
	width: 45px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ootc-main);
	cursor: pointer;
	transition: color 0.5s;
}
/* − と ＋ は文字ではなく線（1px × 15px）で描く。書体によって太さや位置が変わらないように */
.ootc .ootc-qty::before,
.ootc .ootc-qty[data-step="1"]::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 1px;
	background: currentColor;
	transform: translate(-50%, -50%);
}
.ootc .ootc-qty[data-step="1"]::after { transform: translate(-50%, -50%) rotate(90deg); }
.ootc .ootc-qty:hover { color: #000; }
/* 1個のときの − は薄く（押しても何も起きない。削除は横の「削除」から） */
.ootc .quantity:has(.qty[value="1"]) .ootc-qty[data-step="-1"] { color: var(--ootc-line); cursor: default; }
/* 数量を変えられない商品（1点限りなど）は − ＋ を出さない */
.ootc .quantity:has(.qty[readonly]) .ootc-qty { display: none; }

/* 割引コード（商品の箱の下端）。「カートを更新する」は隠し、数量を変えたら ootc.js が代わりに押す */
.ootc table.cart tr:has(> .actions) { display: block; padding-top: 30px; }
.ootc table.cart tr:has(> .actions):not(:has(.coupon)) { display: none; } /* 割引コードを使わない設定のとき */
.ootc .cart .coupon {
	display: flex;
	gap: 10px;
	width: min(100%, var(--col));
}
.ootc .cart .coupon .input-text { flex: 1; min-width: 0; }
.ootc .cart .coupon .button { padding-inline: 15px; }
.ootc .cart button[name="update_cart"] { display: none; }

/* 金額の箱：送料無料の案内 → ご注文金額（小計・配送・合計）→ ご購入手続きに進む */
.ootc-free-shipping {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 30px;
	font-size: 12.5px;
	letter-spacing: 0.25em;
}
.ootc-free-shipping.is-free { color: var(--ootc-valid); }
/* 右の箱の表（カートのご注文金額・購入手続きのご注文内容）：幅が狭いので表の列をやめ、
   1行ずつ「項目 … 金額」と並べる。入りきらない行は、金額を次の行の右端へ送る。
   商品名は箱の幅を使い切る（列のままだと、商品名が1〜2文字ずつ折り返すため）。
   上の「表」の罫線と余白は当てない（詳細度を上の表の指定より高くしてある） */
.ootc :is(.cart_totals, .ootc-checkout-summary) :is(table, tbody, tfoot) { display: block; }
.ootc .ootc-checkout-summary thead { display: none; }
.ootc :is(.cart_totals, .ootc-checkout-summary) table.shop_table { border-bottom: 1px solid var(--ootc-line); }
.ootc :is(.cart_totals, .ootc-checkout-summary) tr {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 5px 15px;
	padding-block: 15px;
	border-top: 1px solid var(--ootc-line);
}
.ootc :is(.cart_totals, .ootc-checkout-summary) table.shop_table :is(th, td) { padding: 0; border: 0; }
.ootc :is(.cart_totals, .ootc-checkout-summary) th { white-space: nowrap; }
.ootc :is(.cart_totals, .ootc-checkout-summary) td { margin-left: auto; text-align: right; }
.ootc .ootc-checkout-summary td.product-name { flex-basis: 100%; margin-left: 0; text-align: left; }
.ootc #shipping_method { list-style: none; margin: 0; padding: 0; }
.ootc #shipping_method li + li { margin-top: 10px; }
.ootc #shipping_method li { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
/* 「〒 東京都」（標準で出る配送先）は出さない。全国一律なので送料に関係しない */
.ootc .woocommerce-shipping-destination { display: none; }
.ootc .wc-proceed-to-checkout { margin-top: 30px; }
.ootc .wc-proceed-to-checkout .checkout-button { width: 100%; padding: 18.75px; }

/* ---------- 購入手続き ----------
   左：01 ご請求先情報 → 02 お支払い方法 ／ 右：ご注文内容（画面に付いてくる箱）。
   ログイン・割引コードの案内は、その上に全幅で並ぶ（WooCommerce がフォームの外に出すため） */
.ootc form.checkout {
	display: grid;
	grid-template-columns: 1fr var(--col);
	grid-template-rows: auto auto 1fr;
	grid-template-areas:
		"notice   notice"
		"customer summary"
		"payment  summary";
	column-gap: var(--gap);
	align-items: start;
	counter-reset: ootc-step;
}
/* 名前の無い子（入力の誤りのお知らせ など。WooCommerce がフォームの先頭に足す）は全幅。
   :where() で詳細度を0にして、下の各箱の置き場所の指定に必ず負けるようにする */
:where(.ootc form.checkout > *) { grid-column: 1 / -1; }
.ootc form.checkout > wc-order-attribution-inputs { display: none; } /* 中身は hidden の入力欄だけ */
.ootc #customer_details { grid-area: customer; }
.ootc .ootc-checkout-payment { grid-area: payment; margin-top: 30px; }
.ootc .ootc-checkout-summary {
	grid-area: summary;
	position: sticky;
	top: 135px; /* 固定ヘッダー（上30 + ロゴ45 + 下60）の下で止まる */
}

/* 手順の番号：01 ご請求先情報 / 02 お支払い方法 */
.ootc :is(.woocommerce-billing-fields, .ootc-checkout-payment) > h3::before {
	counter-increment: ootc-step;
	content: counter(ootc-step, decimal-leading-zero);
	margin-right: 15px;
	color: var(--ootc-sub);
}
/* ご請求先とお届け先のあいだを罫線で区切る（同じ箱の中）。
   上の欄の下の余白 22.5px はこの 30px と重なる（大きい方だけが効く）ので、線の上下はどちらも 30px */
.ootc #customer_details .col-2 {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid var(--ootc-line);
}
.ootc .woocommerce-additional-fields { margin-top: 22.5px; }
.ootc .woocommerce-additional-fields .form-row:last-child { margin-bottom: 0; } /* 箱の下の余白を 30px にそろえる */
.ootc .woocommerce-account-fields { margin-bottom: 22.5px; }
.ootc .woocommerce-account-fields div.create-account { margin-top: 22.5px; }

/* お支払い（Stripe のカード入力欄は Stripe の枠の中。まわりだけ整える） */
.ootc .wc_payment_methods { list-style: none; margin: 0; padding: 0; }
.ootc .wc_payment_method { padding: 0 0 30px; }
.ootc .wc_payment_method > label {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	letter-spacing: 0.25em;
}
.ootc .wc_payment_method > label img { display: inline; height: 22.5px; width: auto; }
.ootc .payment_box {
	margin-top: 15px;
	padding: 15px;
	border: 1px solid var(--ootc-line);
	background: rgba(255, 255, 255, 0.5);
}
.ootc .wc-stripe-simple-form { background-color: transparent; }
.ootc .wc-stripe-simple-form label { font-family: var(--ootc-font); font-size: 12.5px; letter-spacing: 0.25em; }
/* 「ご注文を完了する」の行：左に個人情報の扱いの文、右にボタン（1列分 300px）。入りきらなければボタンは次の行の右へ */
.ootc #payment .place-order {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22.5px var(--gap);
	margin: 0;
	padding-top: 30px;
	border-top: 1px solid var(--ootc-line);
}
.ootc .place-order .woocommerce-terms-and-conditions-wrapper { flex: 1 1 var(--col); }
.ootc .woocommerce-terms-and-conditions-wrapper,
.ootc .woocommerce-privacy-policy-text {
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}
.ootc .woocommerce-privacy-policy-text p { margin: 0; }
.ootc .woocommerce-privacy-policy-text a,
.ootc .woocommerce-terms-and-conditions-wrapper a { text-decoration: underline; }
.ootc #place_order { width: var(--col); margin-left: auto; padding: 18.75px; }

/* ---------- ご注文完了 ----------
   上にお礼の文。左：ご注文内容・ご請求先とお届け先 ／ 右：注文番号・日付・合計などの箱 */
.ootc .woocommerce-order {
	display: grid;
	grid-template-columns: 1fr var(--col);
	grid-template-rows: auto auto 1fr;
	grid-template-areas:
		"message  message"
		"details  overview"
		"customer overview";
	column-gap: var(--gap);
	align-items: start;
}
:where(.ootc .woocommerce-order > *) { grid-column: 1 / -1; } /* 決済の案内・注文の失敗 など */
.ootc .woocommerce-order > .woocommerce-order-overview { grid-area: overview; }
.ootc .woocommerce-order > .woocommerce-order-details { grid-area: details; }
.ootc .woocommerce-order > .woocommerce-customer-details { grid-area: customer; margin-top: 30px; }
/* 下の「.woocommerce-order > p」より詳細度を上げるため、> で指定する */
.ootc .woocommerce-order > .woocommerce-thankyou-order-received {
	grid-area: message;
	display: flex;
	align-items: center;
	gap: 15px;
	margin: 0 0 30px;
	padding: 22.5px;
	background: var(--ootc-tint);
	font-size: 15px;
	letter-spacing: 0.25em;
}
.ootc .woocommerce-order-overview {
	list-style: none;
	margin: 0;
	display: grid;
	gap: 22.5px;
}
.ootc .woocommerce-order-overview li {
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}
.ootc .woocommerce-order-overview li + li {
	padding-top: 22.5px;
	border-top: 1px solid var(--ootc-line);
}
.ootc .woocommerce-order-overview strong {
	display: block;
	margin-top: 5px;
	font-size: 15px;
	font-weight: 400;
	color: var(--ootc-main);
	overflow-wrap: anywhere; /* 長いメールアドレスで箱からはみ出さない */
}
.ootc .woocommerce-order > p,
.ootc .woocommerce-MyAccount-content > p {
	margin: 0 0 22.5px;
	font-size: 15px;
	letter-spacing: 0.25em;
}
.ootc .woocommerce-MyAccount-content > p a { text-decoration: underline; text-underline-offset: 2.5px; }
/* マイページの注文の詳細（箱にしない）は、上の文との間をあける */
.ootc .woocommerce-MyAccount-content :is(.woocommerce-order-details, .woocommerce-customer-details) { margin-top: 60px; }
.ootc mark { background: none; color: inherit; }
.ootc .woocommerce address {
	padding: 22.5px;
	border: 1px solid var(--ootc-line);
	font-size: 15px;
	font-style: normal;
	letter-spacing: 0.25em;
}
.ootc .woocommerce address p { margin: 10px 0 0; }

/* 2つ並べる箱（ご請求先とお届け先 / ログインと新規登録 / マイページの住所）。690px未満は縦に積む */
.ootc .woocommerce :is(.woocommerce-columns--addresses, #customer_login, .woocommerce-Addresses) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--col), 100%), 1fr));
	gap: 60px var(--gap);
}
.ootc .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22.5px;
}
.ootc .woocommerce-Address-title h2 { margin: 0; }
.ootc .woocommerce-Address-title .edit { font-size: 12.5px; text-decoration: underline; }
.ootc .lost_password a { font-size: 12.5px; text-decoration: underline; text-underline-offset: 2.5px; }
.ootc .woocommerce-form-login__submit,
.ootc .woocommerce-form-register__submit { margin-top: 22.5px; }
.ootc .woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}
.ootc .woocommerce-form-login .form-row .woocommerce-form-login__submit { margin-top: 0; }

/* ---------- マイページ（ログイン後）：左にメニュー、右に中身 ---------- */
.ootc .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: var(--col) 1fr;
	gap: 60px var(--gap);
	align-items: start;
}
.ootc .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ootc-line);
}
.ootc .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 15px 0;
	border-bottom: 1px solid var(--ootc-line);
	font-size: 15px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
	transition: color 0.5s;
}
.ootc .woocommerce-MyAccount-navigation a:hover,
.ootc .woocommerce-MyAccount-navigation .is-active a { color: #000; }
.ootc .woocommerce-EditAccountForm fieldset {
	margin: 22.5px 0 0;
	padding: 22.5px 0 0;
	border: 0;
	border-top: 1px solid var(--ootc-line);
}
.ootc .woocommerce-EditAccountForm legend { padding: 0; font-size: 15px; letter-spacing: 0.25em; }
.ootc .woocommerce-EditAccountForm em,
.ootc #account_display_name_description { display: block; margin-top: 10px; font-size: 12.5px; color: var(--ootc-sub); }
.ootc .woocommerce-orders-table .button { padding: 5px 15px; font-size: 12.5px; }
.ootc .woocommerce-pagination { display: flex; gap: 10px; margin-top: 30px; }

/* ---------- 商品ページの「カートに追加」 ----------
   数量はカートと同じ − 数字 ＋ の枠（上の「数量」）。高さだけ「カートに追加」（60px）にそろえる
   （上の .ootc .cart .quantity の 45px より詳細度を上げて上書きする） */
.ootc-product-detail__cart form.cart { display: flex; gap: 10px; }
.ootc-product-detail__cart form.cart .quantity { flex: none; height: auto; }
.ootc-product-detail__cart .single_add_to_cart_button { flex: 1; padding: 18.75px; }
.ootc-product-detail__cart .stock {
	margin: 0 0 15px;
	font-size: 12.5px;
	letter-spacing: 0.25em;
	color: var(--ootc-sub);
}
.ootc-product-detail__cart .out-of-stock { margin: 0; color: var(--ootc-accent); font-size: 15px; }

/* ---------- WooCommerce：画面幅ごとの調整 ---------- */
@media (width < 1350px) {
	/* サブスクの案内：「詳しく見る」を文の下へ（横に並べると、文が折り返して箱が高くなるため） */
	.ootc-promo__link {
		grid-template-columns: var(--col) 1fr;
		grid-template-areas: "image text" "image more";
	}
	.ootc-promo__text { padding: 22.5px 30px 15px 0; }
	.ootc-promo__link > .ootc-section__more { padding: 0 30px 22.5px 0; }
}

@media (width < 1020px) {
	/* カート・購入手続き・ご注文完了：右の箱を下へ（縦に積む） */
	.ootc .woocommerce:has(> .cart-collaterals) { grid-template-columns: 1fr; grid-template-rows: none; }
	.ootc .woocommerce:has(> .cart-collaterals) > .cart-collaterals { grid-column: 1; grid-row: auto; margin-top: 30px; }
	/* 購入手続き：01 ご請求先 → ご注文内容 → 02 お支払い（金額を確かめてから支払う順） */
	.ootc form.checkout {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-template-areas: "notice" "customer" "summary" "payment";
	}
	.ootc .ootc-checkout-summary { position: static; margin-top: 30px; }
	.ootc .woocommerce-order {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-template-areas: "message" "overview" "details" "customer";
	}
	.ootc .woocommerce-order > .woocommerce-order-details { margin-top: 30px; }


	.ootc .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; }
	/* マイページのメニューは横に並べる（折り返す） */
	.ootc .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 10px; border: 0; }
	.ootc .woocommerce-MyAccount-navigation a { padding: 10px 15px; border: 1px solid var(--ootc-line); }
	.ootc .woocommerce-MyAccount-navigation .is-active a { border-color: var(--ootc-main); }
}

@media (width < 690px) {
	/* 箱の内側の余白を狭く（30 → 15） */
	.ootc-box,
	.ootc .woocommerce :is(.woocommerce-cart-form, .cart_totals, #customer_details),
	.ootc .woocommerce-order > :is(.woocommerce-order-overview, .woocommerce-order-details) { padding: 15px; }

	/* サブスクの案内：写真を上に、文と「詳しく見る」を下に */
	.ootc-promo__link {
		grid-template-columns: minmax(0, 1fr); /* 中身の幅で箱からはみ出さない */
		grid-template-areas: "image" "text" "more";
	}
	.ootc .ootc-promo__link > img { height: auto; }
	.ootc-promo__text { padding: 15px 15px 10px; }
	.ootc-promo__link > .ootc-section__more { padding: 0 15px 15px; }

	/* 2列の入力欄を1列に */
	.ootc .woocommerce :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, .woocommerce-ResetPassword, .woocommerce-form-login, .checkout_coupon) { grid-template-columns: 1fr; }
	.ootc .woocommerce :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, .woocommerce-ResetPassword, .woocommerce-form-login, .checkout_coupon) > :is(.form-row-first, .form-row-last) { grid-column: 1 / -1; }
	.ootc .woocommerce-EditAccountForm > .form-row-first { grid-row: 2; }
	.ootc .woocommerce-EditAccountForm > .form-row-last { grid-row: 1; }

	/* カートの1商品：写真 90px の右に 名前 → 小計。数量と削除は、その下に全幅で（Amazon のスマホと同じ）。
	   写真の右に数量まで並べると、「削除」の入る幅が残らないため */
	.ootc table.cart .cart_item {
		grid-template-columns: 90px auto 1fr;
		grid-template-rows: auto 1fr auto;
		grid-template-areas:
			"thumb    name     name"
			"thumb    subtotal subtotal"
			"quantity quantity remove";
		gap: 10px 15px;
		padding: 22.5px 0;
	}
	.ootc .cart_item .product-subtotal { text-align: left; }
	.ootc .cart_item .product-thumbnail img { width: 90px; }
	.ootc .cart .coupon { width: 100%; }

	.ootc #place_order { width: 100%; }

	/* 注文履歴の表：1注文ずつ縦に積む（見出しの代わりに各欄の名前を左に出す） */
	.ootc table.woocommerce-orders-table thead { display: none; }
	/* 欄の中身は「金額 1点」のように要素が混ざるので、flex ではなく右寄せ＋名前を左に浮かせる */
	.ootc table.woocommerce-orders-table :is(tbody, tr, td, th) { display: block; }
	.ootc table.woocommerce-orders-table :is(td, th) {
		padding: 5px 0;
		border: 0;
		text-align: right;
	}
	.ootc table.woocommerce-orders-table :is(td, th)[data-title]::before {
		content: attr(data-title);
		float: left;
		font-size: 12.5px;
		line-height: 22.5px; /* 15px の文字の行と高さをそろえる */
		color: var(--ootc-sub);
	}
	.ootc .woocommerce-orders-table tr { padding: 15px 0; border-top: 1px solid var(--ootc-line); }
	.ootc .woocommerce-orders-table tbody tr:last-child { border-bottom: 1px solid var(--ootc-line); }
	.ootc .shop_table tbody tr:last-child > * { border-bottom: 0; }
}

/* ---------- フッター（卸売帯と同じ濃い和紙） ----------
   4カラム（1350px〜）/ 2カラム（690〜1349px）/ 1カラム（〜689px）
   行の構造（アイコン+英名+和名+矢印）はドロワーと同じ作法 */

.ootc-footer {
	background-image: url("washi-dark.webp");
	background-size: 300px;
	background-repeat: repeat;
	color: var(--ootc-white);
}

.ootc-footer__inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 90px var(--gap) 60px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gap);
}

/* ---- ブランド（ロゴ / 社名 / 住所・連絡先） ---- */

.ootc-footer__identity { display: flex; align-items: center; gap: 22.5px; }
.ootc-footer__logo { width: 75px; height: 75px; opacity: var(--o-main); }
.ootc-footer__name {
	margin: 0;
	font-size: 15px;
	line-height: 2; /* 30px。ロゴ(75px)と釣り合う行間にするためここだけ全体の1.5から外す */
}

/* 縦罫線で区切る（1カラムでは横罫線に切り替える） */
.ootc-footer__contact {
	margin-top: 30px;
	padding: 7.5px 0px 7.5px 22.5px;
	border-left: 1px solid var(--ootc-white-sub);
}
.ootc-footer__contact p { margin: 0 0 15px; font-size: 15px; letter-spacing: 0.25em; }
.ootc-footer__contact p:last-child { margin-bottom: 0; }
/* 住所・メールとも行全体が1つのリンク。
   テーマの a:hover（#000）に負けて真っ黒になるため明示的に打ち消す */
.ootc-footer__address a,
.ootc-footer__mail a { transition: color 0.5s; }
.ootc-footer__address a:hover,
.ootc-footer__mail a:hover { color: #fff; }

/* アイコンと文字をまとめてリンク化するため、flexは a 側に置く */
/* inline-flex で文字幅ぴったりにする（列いっぱいに広がるとホバー範囲が過剰になる） */
.ootc-footer__mail a { display: inline-flex; align-items: center; gap: 15px; }
.ootc-footer__mail img {
	width: 15px;
	height: 15px;
	opacity: var(--o-main);
	transition: opacity 0.5s;
}
.ootc-footer__mail a:hover img { opacity: 1; }

/* ---- メニューの見出しと行 ---- */

.ootc-menu__label {
	margin: 0 0 30px;
	font-size: 15px;
	letter-spacing: 0.25em;
	color: var(--ootc-white-sub);
	line-height: 1;
}

.ootc-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 22.5px;
}

/* 行全体が1つのリンク（ドロワーと同じ。上下10px広げて隣と重ねない） */
.ootc-menu__link {
	display: flex;
	align-items: flex-end;
	gap: 15px;
	padding: 10px 0;
	margin: -10px 0;
}
.ootc-menu__link .ootc-menu__icon {
	width: 22.5px;
	height: 22.5px;
	align-self: center;
	opacity: var(--o-main);
	transition: opacity 0.5s;
}
.ootc-menu__link .ootc-menu__arrow {
	width: 10px;
	height: 15px;
	margin-left: auto;
	align-self: center;
	opacity: var(--o-main);
	transition: opacity 0.5s;
}
/* 外部リンク（Instagram / LINE）は別デザインで正方形 */
.ootc-menu__link .ootc-menu__arrow--external { width: 22.5px; height: 22.5px; }
.ootc-menu__en,
.ootc-menu__ja {
	line-height: 1.5;
	letter-spacing: 0.25em;
	color: var(--ootc-white);
	transition: color 0.5s;
}
.ootc-menu__en { font-size: 15px; }
.ootc-menu__ja { font-size: 12.5px; }

.ootc-menu__link:hover .ootc-menu__en,
.ootc-menu__link:hover .ootc-menu__ja { color: #fff; }
.ootc-menu__link:hover .ootc-menu__icon,
.ootc-menu__link:hover .ootc-menu__arrow { opacity: 1; }

/* ---- サブスクのボタン（SHOP MENUの下） ---- */

/* 「.ootc a」の color:inherit（0,1,1）に負けないよう2クラスで指定する（0,2,0） */
.ootc-menu .ootc-menu__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-top: 30px;
	padding: 18.75px;
	/* border だと上下1pxずつ高さが増え、他の列（202.5px）と2pxずれる。
	   box-shadow はレイアウトに影響しないため枠線に使う */
	box-shadow: inset 0 0 0 1px var(--ootc-white-sub);
	font-size: 15px;
	letter-spacing: 0.25em;
	color: var(--ootc-white);
	transition: box-shadow 0.5s, color 0.5s;
}
.ootc-menu .ootc-menu__button img { width: 22.5px; height: 22.5px; opacity: var(--o-main); transition: opacity 0.5s; }
/* ホバー：他の行と同じく #FFF に */
.ootc-menu .ootc-menu__button:hover {
	box-shadow: inset 0 0 0 1px #fff;
	color: #fff;
}
.ootc-menu .ootc-menu__button:hover img { opacity: 1; }

/* ---- 最下部（コピーライト / 決済ブランド） ---- */

.ootc-footer__bottom {
	position: relative;
	max-width: var(--max);
	margin: 0 auto;
	padding: 30px var(--gap) 45px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
}
/* 区切り線はコンテンツ幅（左右のガターを除いた幅）に合わせる */
.ootc-footer__bottom::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--gap);
	right: var(--gap);
	height: 1px;
	background: var(--ootc-white-sub);
}
.ootc-footer__copy {
	margin: 0;
	font-size: 15px;
	color: var(--ootc-white-sub);
}
/* 社名の改行は1カラムのときだけ使う（下のメディアクエリで復帰させる） */
.ootc-footer__copy br { display: none; }
.ootc-footer__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 15px;
}
.ootc-footer__cards img { height: 22.5px; width: auto; }

/* ---------- モバイル ---------- */

/* 3列コンテナ(1020px)未満 */
@media (width < 1020px) {
	/* ヘッダー：ナビを隠してロゴ+ログイン+カート+ハンバーガーのみに（旧A-*と同じ挙動） */
	.ootc-header__nav { display: none; }
	.ootc-header__account { margin-left: auto; }

	/* ヒーローの縦線もヘッダーのナビと同じく隠す（本人指定 2026-09-30） */
	.ootc-hero__scroll { display: none; }

	.ootc-section { padding: 60px var(--gap); }
	.ootc-section__head { margin-bottom: 30px; }

	.ootc-about__inner { padding: 60px var(--gap); }
	.ootc-about__body { grid-template-columns: 1fr; }

	.ootc-wholesale__inner { padding: 60px var(--gap); }

}

/* フッター 2カラム（690〜1349px）
   上段=ブランド / SHOP、下段=MAIN / OTHER。上段の下に区切り線を引く */
@media (width < 1350px) {
	.ootc-footer__inner {
		grid-template-columns: repeat(2, 1fr);
		gap: 60px var(--gap);
		padding: 90px var(--gap) 45px;
	}
	/* ソース順（ブランド→MAIN→SHOP→OTHER）のうちSHOPだけ前に出す */
	.ootc-footer__brand                   { order: 1; }
	.ootc-footer__inner > .ootc-menu--shop { order: 2; }
	.ootc-footer__inner > .ootc-menu:not(.ootc-menu--shop) { order: 3; }

	.ootc-footer__brand,
	.ootc-footer__inner > .ootc-menu--shop {
		padding-bottom: 60px;
		border-bottom: 1px solid var(--ootc-white-sub);
	}
}

/* フッター 1カラム（〜689px）：全ブロックを縦に積み、間を罫線で区切る */
@media (width < 690px) {
	.ootc-footer__inner {
		grid-template-columns: 1fr;
		gap: 45px;
	}
	/* 2カラム用の並べ替えを解除（ソース順どおりに戻す）。
	   2カラムと同じセレクタで書く（「> *」だと詳細度が低く、並べ替えが残って SHOP が MAIN より先に出ていた） */
	.ootc-footer__brand,
	.ootc-footer__inner > .ootc-menu--shop,
	.ootc-footer__inner > .ootc-menu:not(.ootc-menu--shop) { order: 0; }

	.ootc-footer__brand,
	.ootc-footer__inner > .ootc-menu {
		padding-bottom: 45px;
		border-bottom: 1px solid var(--ootc-white-sub);
	}
	/* 最後のブロックは直後に最下部の罫線が来るため、線が二重になるのを防ぐ */
	.ootc-footer__inner > :last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}

	/* 住所ブロックは縦罫線のみ（ロゴとの間に横罫線は引かない） */
	.ootc-footer__contact {
		margin-top: 30px;
	}

	/* 最下部は縦積み中央寄せ（決済ブランドを上に） */
	.ootc-footer__bottom {
		flex-direction: column-reverse;
		gap: 30px;
		padding: 45px var(--gap);
	}
	/* 社名は2行に分けて中央寄せ（文字サイズは15pxのまま） */
	.ootc-footer__copy { text-align: center; }
	.ootc-footer__copy br { display: inline; }
}

/* 2列コンテナ(690px)未満 */
@media (width < 690px) {
	/* セクション見出しの日本語を隠してアイコン+英語のみに */
	.ootc-section__label span,
	.ootc-section__more-ja { display: none; }

	/* お知らせの右端の矢印を隠す（行全体がリンクなので、矢印が無くても押せる） */
	.ootc img.ootc-notice__arrow { display: none; }

	/* ヒーローの英文を1行に収める（22.5pxでは「Japan」だけが2行目に落ちるため）。
	   h1 は30pxのまま「OOTC Imperial / Gyokuro」の2行で自然に折り返す */
	.ootc-hero__text p { font-size: 15px; }
}