@charset "UTF-8";
/* ==================================================================
   チロリア 八鹿支店 — top_2校 / second_2校 の実装。
   版面は 1400px のアートボード、内容の柱が 1036px。
   数値は2校から実測した値をそのまま置いている。
   ================================================================== */

:root {
	/* 色は2校からの拾い出し */
	--tr-maroon-deep: #570015; /* ヘッダー・フッターの地 */
	--tr-maroon:      #790025; /* トップの内容の柱 */
	--tr-red:         #c63118; /* ロゴの箱 */
	--tr-logotype:    #e30016; /* チロリアの赤 */
	--tr-gold:        #fbca5d; /* 金の文字 */
	--tr-gold-rule:   #e9e2a3; /* 金の罫 */
	--tr-gold-hot:    #fccc00; /* 帯の中央 */
	--tr-grad-red:    #c44745; /* 帯の両端 */
	--tr-cream:       #f8f7ec; /* セカンドの地 */
	--tr-ink:         #221815; /* 焦茶。ボタンと本文 */
	--tr-ink-2:       #3a2b23;
	--tr-weave:       #d6ccc2; /* 織り目 */

	/* 本店への案内に引く薄い青のライン */
	--tr-blue:      #e4eef5;

	--tr-col:   1036px; /* 内容の柱 */
	--tr-head:  102px;  /* ヘッダーの高さ */
	--tr-grad:  14px;   /* 帯の高さ */

	--tr-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
	--tr-sans:  "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* ---- 土台 -------------------------------------------------------- */

body {
	background-color: #fff;
	background-image: url(../img/texture.png);
	background-size: 10px 10px;
	color: var(--tr-ink);
	font-family: var(--tr-sans);
	font-feature-settings: "palt" 1;
	letter-spacing: 0.04em;
	line-height: 1.9;
}

/* ---- ページの切り替え -------------------------------------------- */

/* 同一サイト内の遷移をクロスフェードにする。
   対応していないブラウザでは、何も起きずに従来どおり切り替わる。 */
@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: tr-page-out 0.16s ease both;
}

::view-transition-new(root) {
	animation: tr-page-in 0.36s ease both;
}

@keyframes tr-page-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes tr-page-out {
	to {
		opacity: 0;
	}
}

/* View Transitions が無いブラウザは、読み込み時にふわっと出すだけにする。 */
@supports not (view-transition-name: none) {
	body {
		animation: tr-page-in 0.36s ease both;
	}
}

/* 動きを減らす設定のときは切り替えを挟まない。 */
@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	::view-transition-old(root),
	::view-transition-new(root),
	body {
		animation: none;
	}
}

/* 親テーマの版面をこのデザイン用に外す。
   WooCommerce のページ（カート・レジ・マイページ）は親の版面のまま使う。 */
.tr-designed #content.site-content {
	padding: 0;
}

.tr-designed #content > .col-full {
	max-width: none;
	margin: 0;
	padding: 0;
}

.tr-designed .site-content .col-full::before,
.tr-designed .site-content .col-full::after {
	content: none;
}

img {
	max-width: 100%;
	height: auto;
}

/* 親テーマは a / input / textarea / button の :focus に紫（#7f54b3）の2px枠を出す。
   マウスで押した直後にも残るので、写真や数量欄を触るたびに紫の箱が出て見える。
   ただしキーボードで辿るときの目印はいるので、消さずに :focus-visible に絞る。
   （マウス操作では出ない／Tab キーでは出る）色も売り場の色に替える。 */
a:focus,
input:focus,
textarea:focus,
select:focus,
button:focus {
	outline: none;
}

a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
	outline: 2px solid var(--tr-maroon-deep);
	outline-offset: 2px;
}

/* 入力欄の地。親テーマは #f2f2f2 の灰色＋枠なし＋内側の影で、
   生成りの面に置くと沈んだ箱に見える。白地にする。
   枠なしのまま白にすると生成りとの境が消えるので、
   お問合せフォーム（.tr-form）で使っている白地＋織り目色の1px罫に揃える。
   親テーマが付ける内側の影は、罫が付くと二重になるので落とす。 */
body input[type="text"],
body input[type="number"],
body input[type="email"],
body input[type="tel"],
body input[type="url"],
body input[type="password"],
body input[type="search"],
body textarea,
body .input-text {
	border: 1px solid var(--tr-weave);
	background-color: #fff;
	box-shadow: none;
}

/* 親テーマは focus で #ededed に変える。白のまま保つ。 */
body input[type="text"]:focus,
body input[type="number"]:focus,
body input[type="email"]:focus,
body input[type="tel"]:focus,
body input[type="url"]:focus,
body input[type="password"]:focus,
body input[type="search"]:focus,
body textarea:focus,
body .input-text:focus {
	border-color: var(--tr-maroon);
	background-color: #fff;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* 赤→金→赤の帯。ヘッダーの下端とフッターの上端に置く。 */
.tr-gradline {
	display: block;
	height: var(--tr-grad);
	background: linear-gradient(
		90deg,
		var(--tr-grad-red) 0%,
		var(--tr-grad-red) 21%,
		var(--tr-gold-hot) 50%,
		var(--tr-grad-red) 79%,
		var(--tr-grad-red) 100%
	);
}

/* ---- ヘッダー ---------------------------------------------------- */

.tr-header {
	position: sticky;
	top: 0;
	/* 商品ギャラリーの虫眼鏡アイコン（親テーマで z-index: 99）より前に出す。 */
	z-index: 200;
	background-color: var(--tr-maroon-deep);
}

/* 親テーマは #page に overflow-x: hidden を掛けており、
   これがスクロール枠を作って sticky を殺してしまう。
   clip なら枠を作らずに横のはみ出しだけ止められる。 */
#page.site {
	overflow-x: clip;
}

/* ページ内リンクの着地点が、固定したヘッダーの下に潜らないように。 */
html {
	scroll-padding-top: var(--tr-head);
}

/* ロゴ｜ナビ｜売り場の3列。両端を 1fr で受けると、
   ロゴとボタンの幅が違ってもナビが版面の中央に来る。 */
.tr-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: var(--tr-head);
	padding-right: 20px;
}

.tr-header__logo {
	justify-self: start;
	flex: 0 0 auto;
	line-height: 0;
	position: relative;
	z-index: 2;
}

/* 帯に乗り出さないよう、ロゴはヘッダーの高さに収める。
   上下に 6px ずつ余白を残す（--tr-head が変わっても追従する）。 */
.tr-header__logo img {
	display: block;
	width: auto;
	height: calc(var(--tr-head) - 12px);
}

.tr-nav {
	min-width: 0;
}

.tr-nav__list,
.tr-footer__nav .tr-nav__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ヘッダーのナビだけ中央寄せ。フッターはロゴの右に続けて置く。 */
.tr-nav > .tr-nav__list {
	justify-content: center;
}

.tr-nav__item {
	position: relative;
}

.tr-nav__item::before {
	content: "｜";
	color: rgba(255, 255, 255, 0.45);
	font-size: 15px;
}

.tr-nav__item a {
	display: inline-block;
	padding: 6px 18px;
	color: #fff;
	font-family: var(--tr-serif);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-decoration: none;
	transition: color 0.2s;
}

.tr-nav__item a:hover,
.tr-nav__item.is-current a {
	color: var(--tr-gold);
}

.tr-nav__item.is-current a {
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-thickness: 1px;
}

/* 売り場への導線と、かご。役割が違うので並べて置く。 */
.tr-shopnav {
	position: relative;
	justify-self: end;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
}

.tr-shopbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 180px;
	height: 54px;
	border: 1px solid var(--tr-gold);
	color: var(--tr-gold);
	font-family: var(--tr-serif);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-indent: 0.14em;
	transition: background-color 0.2s, color 0.2s;
}

.tr-shopbtn:hover {
	background-color: var(--tr-gold);
	color: var(--tr-maroon-deep);
}

/* ---- かご（ミニカート） ------------------------------------------ */

.tr-minicart {
	position: relative;
	flex: 0 0 auto;
}

.tr-minicart__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	padding: 0;
	border: 1px solid var(--tr-gold);
	background: none;
	color: var(--tr-gold);
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.tr-minicart__toggle:hover,
.tr-minicart.is-open .tr-minicart__toggle {
	background-color: var(--tr-gold);
	color: var(--tr-maroon-deep);
}

.tr-minicart__icon {
	width: 23px;
	height: 23px;
}

/* 点数バッジ。ボタンの右肩に載せる。 */
.tr-minicart__count {
	position: absolute;
	top: -10px;
	right: -10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 23px;
	height: 23px;
	padding: 0 6px;
	border-radius: 999px;
	background-color: var(--tr-gold);
	color: var(--tr-maroon-deep);
	font-family: var(--tr-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
}

/* 空のかごではバッジを出さない。要素は fragment の受け皿として残す。 */
.tr-minicart__count.is-empty {
	display: none;
}

.tr-minicart__toggle:hover .tr-minicart__count,
.tr-minicart.is-open .tr-minicart__count {
	background-color: var(--tr-maroon-deep);
	color: var(--tr-gold);
}

/* 開いたときの札。ヘッダーの帯より前に出す。 */
.tr-minicart__panel {
	position: absolute;
	top: calc(100% + 18px);
	right: 0;
	z-index: 20;
	width: 340px;
	max-height: calc(100vh - var(--tr-head) - 40px);
	overflow-y: auto;
	padding: 22px 22px 24px;
	border: 1px solid var(--tr-gold-rule);
	background-color: var(--tr-cream);
	color: var(--tr-ink);
	font-family: var(--tr-serif);
	box-shadow: 0 18px 40px rgba(34, 24, 21, 0.28);
}

.tr-minicart__panel[hidden] {
	display: none;
}

.tr-minicart__head {
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--tr-weave);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	text-indent: 0.14em;
}

/* WooCommerce のミニカートを、生成りの札に合わせる。 */
.tr-minicart__panel .woocommerce-mini-cart,
.tr-minicart__panel ul.cart_list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tr-minicart__panel .woocommerce-mini-cart-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px dotted var(--tr-weave);
	font-size: 15px;
	line-height: 1.6;
}

.tr-minicart__panel .woocommerce-mini-cart-item img {
	order: -1;
	width: 56px;
	height: 56px;
	margin: 0;
	object-fit: cover;
	float: none;
}

.tr-minicart__panel .woocommerce-mini-cart-item a:not(.remove) {
	color: var(--tr-ink);
	text-decoration: none;
}

.tr-minicart__panel .woocommerce-mini-cart-item a:not(.remove):hover {
	text-decoration: underline;
}

.tr-minicart__panel .quantity {
	display: block;
	color: #55483f;
	font-family: var(--tr-sans);
	font-size: 13px;
	letter-spacing: 0.02em;
}

/* 削除の × は行の右端に小さく置く。 */
.tr-minicart__panel a.remove {
	position: absolute;
	top: 14px;
	right: 0;
	width: 20px;
	height: 20px;
	color: #8a7c72 !important;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
}

.tr-minicart__panel a.remove:hover {
	background: none !important;
	color: var(--tr-logotype) !important;
}

.tr-minicart__panel .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--tr-weave);
	font-size: 16px;
	font-weight: 600;
}

.tr-minicart__panel .woocommerce-mini-cart__empty-message {
	margin: 0;
	color: #55483f;
	font-size: 15px;
}

/* かごを見る／レジへ進む */
.tr-minicart__panel .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 18px 0 0;
}

.tr-minicart__panel .woocommerce-mini-cart__buttons a.button {
	display: block;
	width: 100%;
	padding: 12px 10px;
	border: 1px solid var(--tr-ink);
	border-radius: 0;
	background-color: transparent;
	color: var(--tr-ink);
	font-family: var(--tr-serif);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-align: center;
	text-indent: 0.12em;
	text-decoration: none;
}

.tr-minicart__panel .woocommerce-mini-cart__buttons a.button:hover {
	background-color: var(--tr-ink);
	color: var(--tr-gold);
}

/* 「レジへ進む」はヘッダーと同じ地色に、文字は白。 */
.tr-minicart__panel .woocommerce-mini-cart__buttons a.checkout {
	border-color: var(--tr-maroon-deep);
	background-color: var(--tr-maroon-deep);
	color: #fff;
}

.tr-minicart__panel .woocommerce-mini-cart__buttons a.checkout:hover {
	border-color: var(--tr-maroon);
	background-color: var(--tr-maroon);
	color: #fff;
}

.tr-navtoggle {
	display: none;
}

/* ---- トップ ------------------------------------------------------ */

/* 下端の空き。「商品購入」の帯まで地続きなので、この値がそのまま
   店舗セクションとボタンの間になる。 */
.tr-col {
	width: var(--tr-col);
	margin: 0 auto;
	padding-bottom: 96px;
	background-color: var(--tr-maroon);
}

/* ヒーロー */
.tr-hero {
	position: relative;
	width: 100%;
	aspect-ratio: 1036 / 678;
	overflow: hidden;
	background-color: #1b1b1b;
}

.tr-hero__slides {
	margin: 0;
	padding: 0;
	list-style: none;
	height: 100%;
}

.tr-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.1s ease;
}

.tr-hero__slide.is-active {
	opacity: 1;
}

.tr-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* コピーとロゴ組みは、画像とaltだけの運用にした2026-09-04以降は出していない。
   画像側に文字が入らないケースで戻せるよう、指定だけ残す。 */
.tr-hero__copy {
	position: absolute;
	right: 57px;
	top: 84px;
	text-align: right;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.tr-hero__catch {
	margin: 0;
	color: #fff;
	font-family: var(--tr-serif);
	font-size: 40px;
	font-weight: 400;
	letter-spacing: 0.2em;
	line-height: 1.3;
	text-indent: 0.2em;
}

.tr-hero__brand {
	margin: 40px 0 0;
	line-height: 1;
	text-shadow: none;
}

.tr-hero__brand-lead {
	display: block;
	color: var(--tr-gold);
	font-family: var(--tr-sans);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-bottom: 6px;
}

.tr-hero__brand-mark {
	display: block;
	width: 152px;
	height: auto;
	margin-left: auto;
}

.tr-hero__brand-year {
	display: block;
	margin-top: 6px;
	color: var(--tr-gold);
	font-family: var(--tr-sans);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-indent: 0.24em;
}

.tr-hero__dots {
	position: absolute;
	right: 20px;
	bottom: 18px;
	display: flex;
	gap: 10px;
}

.tr-hero__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.tr-hero__dot.is-active {
	background: var(--tr-gold);
	border-color: var(--tr-gold);
}

/* 紙のカード */
.tr-intro {
	padding-top: 81px;
}

.tr-intro__card {
	width: 715px;
	min-height: 338px;
	margin: 0 auto;
	padding: 44px 46px 34px;
	background: url(../img/washi.png) center / cover no-repeat;
	color: #3d2312;
	text-align: center;
}

.tr-intro__title {
	margin: 0 0 20px;
	color: #3d2312;
	font-family: var(--tr-serif);
	font-size: 27px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.65;
}

.tr-intro__body {
	margin: 0;
	font-family: var(--tr-serif);
	font-size: 21px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.95;
	text-align: justify;
}

.tr-intro__more {
	margin: 14px 0 0;
	text-align: right;
	font-family: var(--tr-serif);
	font-size: 20px;
	letter-spacing: 0.06em;
}

.tr-intro__more a {
	color: #3d2312;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* セクション見出し */
.tr-section {
	padding: 0 18px;
}

.tr-items {
	padding-top: 77px;
}

.tr-news,
.tr-store {
	padding-top: 78px;
}

.tr-sechead {
	margin-bottom: 53px;
}

.tr-sechead__jp {
	margin: 0 0 10px;
	color: var(--tr-gold);
	font-family: var(--tr-serif);
	font-size: 32px;
	font-weight: 500;
	letter-spacing: 0.34em;
	line-height: 1.2;
	text-align: center;
	text-indent: 0.34em;
}

.tr-sechead__en {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
}

.tr-sechead__en::before,
.tr-sechead__en::after {
	content: "";
	flex: 1 1 auto;
	height: 2px;
	background-color: var(--tr-gold-rule);
}

/* 「item,s」のカンマ。ベースラインから持ち上げてアポストロフィの位置に置く。
   transform なので行の高さには効かない。 */
.tr-sechead__comma {
	display: inline-block;
	transform: translateY(-1.05em);
}

.tr-sechead__en span {
	color: var(--tr-gold);
	font-family: var(--tr-sans);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.22em;
	line-height: 1;
	text-indent: 0.22em;
	transform: translateY(-7px);
}

/* 商品 */
/* カテゴリーは管理画面から増やせるので、3つ以上になったら折り返す。 */
.tr-items__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 56px 116px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tr-items__item {
	width: 372px;
}

/* カード全体を商品ページへのリンクにする。色は継承させて見た目を変えない */
.tr-items__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.tr-items__item img {
	display: block;
	width: 372px;
	height: 251px;
	object-fit: cover;
	transition: opacity 0.3s;
}

.tr-items__link:hover img {
	opacity: 0.85;
}

/* 写真と「販売休止中」の札を重ねるための枠 */
.tr-items__photo {
	position: relative;
	display: block;
	line-height: 0;
}

/*
 * 販売休止中。
 * 買える商品が1点も無い区分は、写真を沈ませて札を重ねる。
 * リンクは殺さない（区分のページで、どれが止まっているか見てもらう）。
 */
.tr-items__closed {
	position: absolute;
	inset: auto 0 0;
	padding: 10px 0;
	background: rgba(34, 24, 21, 0.78);
	color: #fff;
	font-family: var(--tr-serif);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1;
	text-align: center;
	text-indent: 0.18em;
}

.tr-items__item.is-closed img {
	filter: saturate(0.35) brightness(0.92);
}

/*
 * サイズと価格。（税込）は改行して右端で揃える。
 * 1行目は写真より長くなることがあるので nowrap のまま左へはみ出させる（支給デザインどおり）。
 */
.tr-items__caption {
	margin: 10px 0 0;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-align: right;
	white-space: nowrap;
}

/* 焦茶に金のボタン */
.tr-btnwrap {
	margin: 0;
	text-align: center;
}

.tr-items .tr-btnwrap {
	margin-top: 101px;
}

/* おしらせは罫を持たないぶん、見出しと一覧を近づける。 */
.tr-news .tr-sechead {
	margin-bottom: 30px;
}

.tr-news .tr-btnwrap {
	margin-top: 34px;
}

.tr-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 258px;
	height: 46px;
	background-color: var(--tr-ink);
	color: var(--tr-gold);
	font-family: var(--tr-sans);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-decoration: none;
	text-indent: 0.2em;
	transition: background-color 0.2s;
}

.tr-btn:hover {
	background-color: #3a2a24;
	color: var(--tr-gold);
}

.tr-btn__arw {
	position: absolute;
	right: 26px;
	width: 9px;
	height: 9px;
	border-top: 1px solid var(--tr-gold);
	border-right: 1px solid var(--tr-gold);
	transform: rotate(45deg);
}

/* おしらせ */
.tr-news__list {
	width: 834px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.tr-news__row {
	min-height: 95px;
	padding: 12px 12px 12px 11px;
}

.tr-news__line {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 10px 0 0 14px;
	min-height: 71px;
}

/*
 * アイキャッチ。設定のある記事だけ、日付の上に中央で置く。
 * 無いときはマークアップごと出さないので、行は従来どおり1行のまま。
 */
.tr-news__row--figure {
	padding-top: 24px;
	padding-bottom: 24px;
}

.tr-news__row--figure .tr-news__line {
	min-height: 0;
}

.tr-news__thumb {
	display: block;
	width: 120px;
	height: 87px;
	margin: 0 auto 15px;
	line-height: 0;
}

.tr-news__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tr-news__date {
	flex: 0 0 auto;
	width: 174px;
	color: #fff;
	font-family: var(--tr-sans);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.1em;
}

/*
 * タイトルは16文字まで。超えたら「…」で切る。
 * 字送りは 1em + letter-spacing 0.06em なので 16字＝16.96em、
 * これに「…」の1字ぶんを足した 18em を上限にすると、17字目から切れる。
 */
.tr-news__title {
	max-width: 18em;
	overflow: hidden;
	color: #fff;
	font-family: var(--tr-serif);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tr-news__title:hover {
	color: var(--tr-gold);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.tr-news__empty {
	color: #fff;
	text-align: center;
}

/* 店舗 */
.tr-store__map {
	width: 928px;
	height: 250px;
	margin: 0 auto;
	background-color: #d3d3d3;
	line-height: 0;
}

/* 地図は色を落として、写真とえんじの中で浮かないようにする。 */
.tr-store__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(1);
}

.tr-store__info {
	margin-top: 44px;
	color: #fff;
	text-align: center;
}

.tr-store__name {
	margin: 0;
	font-size: 21px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.7;
}

.tr-store__addr,
.tr-store__hours {
	margin: 2px 0 0;
	font-size: 19px;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.7;
}

.tr-store__band {
	position: relative;
	width: var(--tr-col);
	height: 289px;
	margin: 42px -18px 0;
	overflow: hidden;
}

.tr-store__bandimg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tr-store__band .tr-btnwrap {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
}

.tr-store__photo {
	position: absolute;
	right: 44px;
	top: 26px;
	display: block;
	width: 236px;
	height: 224px;
	object-fit: cover;
	background-color: #d3d3d3;
}

/* ---- セカンドページ ---------------------------------------------- */

.tr-page {
	background-color: var(--tr-cream);
}

/* 404（404.php）。地は .tr-page から継ぐのでセカンドページと同じ生成り。
   置くのは一言とトップへの導線だけなので、上下に広く取って中央に据える。 */
.tr-404__inner {
	max-width: 920px;
	margin: 0 auto;
	padding: 118px 20px 138px;
	text-align: center;
}

.tr-404__lead {
	margin: 0;
	color: var(--tr-ink);
	font-family: var(--tr-serif);
	font-size: clamp(20px, 3.4vw, 28px);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.7;
}

/* 「商品購入」の帯（.tr-cta__btn）は地が生成りなので、
   生成りの面に置くと消える。売り場のボタンと同じえんじ地にする。 */
.tr-404__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 448px;
	max-width: 100%;
	height: 60px;
	margin-top: 46px;
	background-color: var(--tr-maroon-deep);
	color: #fff;
	font-family: var(--tr-serif);
	font-size: 18px;
	letter-spacing: 0.12em;
	text-indent: 0.12em;
	text-decoration: none;
	transition: background-color 0.2s;
}

.tr-404__btn:hover,
.tr-404__btn:focus {
	background-color: var(--tr-maroon);
	color: #fff;
}

/*
 * セカンドページの記事面。
 * 2校では本文と図版キャプションがゴシック、見出し（tr-lead/sublead/subhead）だけ明朝。
 */
.tr-article {
	max-width: 920px;
	margin: 0 auto;
	padding: 59px 10px 0;
	color: var(--tr-ink);
	font-family: var(--tr-sans);
}

.tr-article strong {
	font-weight: 700;
}

.tr-article > *:first-child {
	margin-top: 0;
}

/* 見出し */
.tr-lead {
	margin: 74px 0 0;
	color: var(--tr-ink);
	font-family: var(--tr-serif);
	font-size: 38px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-align: center;
	text-indent: 0.12em;
}

.tr-sublead {
	margin: 22px 0 28px;
	color: var(--tr-ink);
	font-family: var(--tr-serif);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.16em;
	line-height: 1.6;
	text-align: center;
	text-indent: 0.16em;
}

/* 見出し行の中では、下のアキは .tr-leadrow 側で持つ。 */
.tr-leadrow .tr-sublead {
	margin-bottom: 0;
}

/*
 * リード直下のサブリードだけ、大きく太い。
 * 単独で立つ中見出し（h2.tr-sublead）は素の .tr-sublead 側＝22px・normal。
 */
.tr-lead + .tr-sublead {
	margin-top: 16px;
	font-size: 27px;
	font-weight: 700;
}

/* ---- 投稿詳細（おしらせ） ---------------------------------------- */

/* 日付は見出しの上に小さく置く。記事面の一番上に来る要素。 */
.tr-post__date {
	margin: 0;
	color: #6b5d52;
	font-family: var(--tr-sans);
	font-size: 16px;
	letter-spacing: 0.12em;
	text-align: center;
}

/* 日付が付くぶん、見出しの上アキ（74px）は詰める。 */
.tr-post__date + .tr-lead {
	margin-top: 12px;
}

/* おしらせ一覧。
   生成りの記事面に置くので、トップ（小豆地）の .tr-news__* とは別に組む。
   アイキャッチの有無で日付の左端がずれないよう、写真の列は常に確保する。 */
.tr-archive {
	max-width: 834px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--tr-weave);
}

.tr-archive__row {
	border-bottom: 1px solid var(--tr-weave);
}

.tr-archive__link {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 20px 6px;
	color: var(--tr-ink);
	text-decoration: none;
	transition: color 0.2s;
}

.tr-archive__thumb {
	flex: 0 0 auto;
	width: 120px;
	height: 87px;
	line-height: 0;
}

.tr-archive__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s;
}

.tr-archive__body {
	flex: 1 1 auto;
	min-width: 0;
}

.tr-archive__date {
	display: block;
	color: var(--tr-ink-2);
	font-family: var(--tr-sans);
	font-size: 15px;
	letter-spacing: 0.1em;
}

.tr-archive__title {
	display: block;
	overflow: hidden;
	margin-top: 7px;
	font-family: var(--tr-serif);
	font-size: 21px;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tr-archive__arw {
	flex: 0 0 auto;
	color: var(--tr-weave);
	font-family: var(--tr-sans);
	font-size: 15px;
	transition: color 0.2s, transform 0.2s;
}

.tr-archive__link:hover {
	color: var(--tr-maroon);
}

.tr-archive__link:hover .tr-archive__arw {
	color: var(--tr-maroon);
	transform: translateX(3px);
}

.tr-archive__link:hover img {
	opacity: 0.85;
}

.tr-archive__empty {
	margin: 48px 0;
	color: var(--tr-ink-2);
	text-align: center;
}

/* ページ送り */
.tr-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 48px;
}

.tr-pager .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border: 1px solid var(--tr-weave);
	color: var(--tr-ink);
	font-family: var(--tr-sans);
	font-size: 16px;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.tr-pager .page-numbers:hover {
	border-color: var(--tr-maroon);
	color: var(--tr-maroon);
}

.tr-pager .page-numbers.current {
	background-color: var(--tr-maroon);
	border-color: var(--tr-maroon);
	color: #fff;
}

.tr-pager .page-numbers.dots {
	border-color: transparent;
}

/* 一覧への戻り。本文の締めなので、商品購入の帯との間に間を取る。 */
.tr-post__back {
	margin: 56px 0 0;
	text-align: center;
}

.tr-post__back a {
	padding-bottom: 2px;
	border-bottom: 1px solid currentColor;
	color: var(--tr-ink);
	font-family: var(--tr-sans);
	font-size: 17px;
	letter-spacing: 0.08em;
	text-decoration: none;
}

.tr-post__back a:hover,
.tr-post__back a:focus {
	color: var(--tr-maroon);
}

/* 本文中の改行のうち、狭い画面でだけ効かせたいもの。 */
.tr-br-sp {
	display: none;
}

/* 本文中の改行のうち、広い画面でだけ効かせたいもの（tr-br-sp の逆）。 */
.tr-br-pc {
	display: inline;
}

/* 中見出し（チロリア 本店　店主・塩見　豊） */
.tr-subhead {
	margin: 58px 0 26px;
	font-family: var(--tr-serif);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.6;
}

/*
 * 本文。
 * 素の `.tr-article p` は、クラス1つ（0,1,0）で組んだ .tr-sublead などに
 * 勝ってしまい、サイズ・ウェイト・寄せをまとめて奪う。
 * 除外を並べる形だと詳細度が上がりすぎて、今度は .tr-form__note や
 * .tr-contact__num のような「柱の中の部品」まで奪ってしまうので、
 * 素の段落＝クラスを持たない直接の子、だけを指す。
 */
.tr-article > p:not([class]) {
	margin: 0 0 30px;
	font-size: 21px;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.83;
	text-align: justify;
}

.tr-lead + p,
.tr-sublead + p,
.tr-subhead + p {
	margin-top: 0;
}

.tr-article p:last-child {
	margin-bottom: 0;
}

/* 同じ理由で、注記も本文より詰めた指定が通るように柱ごと指す。 */
.tr-article .tr-note {
	font-size: 19px;
	color: #55483f;
}

/*
 * 京都・福知山の本店への案内。
 * 本文の流れは崩さず、この一節の行box全体を薄い青で塗って目を留めさせる。
 * 折り返しても両端が欠けないよう box-decoration-break は clone。
 *
 * 記事面のリンクは既定で下線が付く（.tr-article a:not(.button)）。
 * ここは塗りで示すので下線は要らない。詳細度で確実に勝つよう :not(.button) を足す。
 */
.tr-article a.tr-honten:not(.button),
.tr-article a.tr-honten:not(.button):hover {
	color: inherit;
	text-decoration: none;
	background-color: var(--tr-blue);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	transition: background-color 0.2s;
}

.tr-article a.tr-honten:not(.button):hover {
	background-color: #cfe1ee;
}

/* 破線の区切り */
/*
 * 織り目の罫。CSSで組んでいた破線を、支給素材 line.png（1059x10・周期11px）に置き換えた。
 * 素材の地が白なので、生成りの上で白く浮かないよう multiply で抜いている。
 */
.tr-divider {
	height: 10px;
	margin: 46px 0;
	border: 0;
	background: url(../img/line.png) center / auto 10px repeat-x;
	mix-blend-mode: multiply;
}

/*
 * 表記事項の対照表。特定商取引法・返品・プライバシーの各ページで使う。
 * 項目名と内容の2列。項目名の幅を決め打ちにすると、内容の左端が縦に揃って追いやすい。
 * table ではなく dl なのは「項目とその説明」そのものだからで、
 * 狭い画面では列を落として積むだけで済む。
 */
.tr-spec {
	margin: 40px 0;
	border-top: 1px solid var(--tr-weave);
}

.tr-spec__row {
	display: grid;
	grid-template-columns: 15em 1fr;
	gap: 0 28px;
	padding: 22px 4px;
	border-bottom: 1px solid var(--tr-weave);
}

.tr-spec dt {
	font-family: var(--tr-serif);
	font-weight: 600;
}

.tr-spec dd {
	margin: 0;
}

.tr-spec dd > * {
	margin: 0 0 10px;
}

.tr-spec dd > *:last-child {
	margin-bottom: 0;
}

/* 手数料の段。金額を右に寄せて桁を揃える */
.tr-spec__fee {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tr-spec__fee li {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	max-width: 22em;
	padding: 3px 0;
	border-bottom: 1px dotted var(--tr-weave);
}

/*
 * 原稿がまだ来ていない項目。
 * 法定の記載事項は埋め忘れると公開できないので、地を変えて目に付くようにしておく。
 */
.tr-tbd {
	padding: 1px 8px;
	border-radius: 2px;
	background: #f4e3c4;
	font-family: var(--tr-sans);
	font-size: 0.9em;
	white-space: nowrap;
}

/* 写真 */
.tr-fig {
	margin: 44px 0;
	line-height: 0;
}

.tr-fig img {
	display: block;
	width: 100%;
	height: auto;
}

.tr-fig figcaption,
.tr-cap {
	margin-top: 12px;
	color: #4a3f38;
	font-family: var(--tr-sans);
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.7;
	text-align: left;
}

/*
 * 締めの人物写真。素材は711pxしかないので柱920pxに広げると眠くなる。
 * 半分に落として、キャプションごと中央に置く。
 */
.tr-fig--center {
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
}

.tr-fig--center figcaption {
	text-align: center;
}

/*
 * 和紙に載せた写真（歴史のヒーロー）。
 * 額（クラフト紙のマット）は差し替えた history-hero.png に焼き込み済みなので、
 * CSS側では背景も余白も持たせない。
 */
.tr-fig--washi {
	margin-top: 0;
}

/* 2枚並び */
.tr-figs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px;
	margin: 44px 0;
}

.tr-figs figure {
	margin: 0;
	line-height: 0;
}

.tr-figs img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * 柱からはみ出させる2枚並び。記事面は900pxだが、写真の段だけ1200pxまで広げる。
 * 画面が狭いときは 100vw-40px まで自動で縮むので、ブレークポイントは要らない。
 */
.tr-figs--wide {
	width: min(1200px, calc(100vw - 40px));
	margin-left: 50%;
	transform: translateX(-50%);
}

.tr-figs--tallright {
	grid-template-columns: 1.55fr 1fr;
	align-items: start;
}

/* 高さを揃えて並べるので、写真は元の縦横比のまま。切らない。 */
.tr-figs--tallright img {
	height: auto;
	object-fit: fill;
}

/* 見出しの脇に置く小さな人物写真 */
.tr-portrait {
	float: left;
	width: 160px;
	margin: 0 26px 12px 0;
	line-height: 0;
}

/*
 * 素材は人物を縦位置で切り出したもの（167x226）。
 * 正方形に切ると人が切れるので、幅だけ決めて高さは元の比率に任せる。
 */
.tr-portrait img {
	display: block;
	width: 100%;
	height: auto;
}

.tr-clear {
	clear: both;
}

/* 中央寄せの縦長写真。2校は柱930pxに対して728px。 */
/* 帯のように敷く横長写真。素材は3:2なので、上下を均等に落として2.29:1にする。 */
.tr-fig--band img {
	aspect-ratio: 2.29 / 1;
	object-fit: cover;
	object-position: center;
}

.tr-fig--narrow {
	max-width: 78.3%;
	margin-left: auto;
	margin-right: auto;
}

/* 商品購入の帯。セカンドページは生成りの版面に置くので、地は白のまま。 */
.tr-cta {
	margin-top: 74px;
	padding: 33px 20px 118px;
	background-color: #fff;
	background-image: url(../img/texture.png);
	background-size: 10px 10px;
	text-align: center;
}

/* トップだけ、上の .tr-col と同じ幅・同じえんじ地で境目なく続ける。
   上の空きは .tr-col の padding-bottom が持つので、ここでは足さない。 */
.tr-top .tr-cta {
	width: var(--tr-col);
	margin: 0 auto;
	padding-top: 0;
	background-color: var(--tr-maroon);
	background-image: none;
}

.tr-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 46px;
	width: 448px;
	max-width: 100%;
	height: 60px;
	background-color: var(--tr-cream);
	color: var(--tr-maroon);
	font-family: var(--tr-serif);
	text-decoration: none;
	transition: background-color 0.2s;
}

.tr-cta__btn:hover {
	background-color: #fff;
	color: var(--tr-maroon);
}

.tr-cta__label {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
}

.tr-cta__arw {
	font-size: 22px;
	letter-spacing: 0.02em;
}

/* ---- フッター ---------------------------------------------------- */

.tr-footer {
	position: relative;
	background-color: var(--tr-maroon-deep);
	padding-bottom: 34px;
}

.tr-footer .tr-gradline {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--tr-grad) * -1);
}

/* 位置はリンク側が持つ。画像は寸法だけ。 */
.tr-footer__badge-link {
	display: block;
	position: absolute;
	left: 50%;
	top: -83px;
	line-height: 0;
	transform: translateX(-50%);
}

.tr-footer__badge {
	display: block;
	width: 187px;
	height: 187px;
}

.tr-footer__inner {
	display: flex;
	align-items: center;
	max-width: 1240px;
	margin: 0 auto;
	padding: 46px 20px 0;
}

.tr-footer__brand {
	flex: 0 0 auto;
	width: 196px;
	text-align: center;
}

.tr-footer__home {
	display: block;
	line-height: 0;
}

.tr-footer__lockup {
	display: block;
	position: relative;
	/* 丸バッジと重なったときはロゴを前に出す。 */
	z-index: 1;
	width: 191px;
	height: auto;
	margin: 0 auto;
}

.tr-footer__sns {
	display: inline-block;
	margin-top: 12px;
	color: var(--tr-gold);
	line-height: 0;
}

.tr-footer__sns:hover {
	color: #fff;
}

.tr-footer__nav {
	flex: 1 1 auto;
	margin-left: 4px;
}

.tr-footer__nav .tr-nav__item a {
	font-size: 20px;
	letter-spacing: 0.18em;
	padding: 6px 22px;
	/* 「お問い合せ」のような項目名は途中で折らない。 */
	white-space: nowrap;
}

.tr-footer__copy {
	margin: 26px 0 0;
	color: #f2e7e9;
	font-family: var(--tr-sans);
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-align: center;
}

/* ==================================================================
   画面幅への追従。2校は 1400px の版面なので、
   それより狭いときは柱を可変にして同じ比率で縮める。
   ================================================================== */

@media (max-width: 1180px) {
	:root {
		--tr-col: calc(100vw - 40px);
	}

	.tr-header__bar {
		padding-right: 12px;
	}

	.tr-nav__item a {
		font-size: 17px;
		padding: 6px 10px;
	}

	.tr-shopnav {
		gap: 10px;
	}

	.tr-shopbtn {
		width: 154px;
		height: 48px;
		font-size: 16px;
	}

	.tr-minicart__toggle {
		width: 48px;
		height: 48px;
	}

	.tr-minicart__icon {
		width: 21px;
		height: 21px;
	}

	.tr-hero__catch {
		font-size: clamp(24px, 3.2vw, 40px);
	}

	.tr-hero__copy {
		right: 5%;
		top: 12%;
	}

	.tr-intro__card {
		width: min(715px, 100% - 40px);
	}

	.tr-items__list {
		gap: 6%;
	}

	.tr-items__item {
		width: 42%;
	}

	.tr-items__item img {
		width: 100%;
		height: auto;
		aspect-ratio: 372 / 251;
	}

	.tr-items__caption {
		font-size: 20px;
		white-space: normal;
	}

	.tr-news__list,
	.tr-store__map {
		width: min(834px, 100% - 40px);
	}

	.tr-store__map {
		width: min(928px, 100% - 40px);
		height: auto;
		aspect-ratio: 928 / 250;
	}

	.tr-store__band {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	/* 1024px あたりでフッターの項目名が折り返すので、少し小さくする。
	   ロゴ 196px ＋ ナビ ＋ 左右 40px が画面幅に収まる寸法にしている。 */
	.tr-footer__nav .tr-nav__item a {
		font-size: 17px;
		letter-spacing: 0.12em;
		padding: 6px 12px;
	}
}

/* 1024px 以下はナビを畳んでハンバーガーに切り替える。
   ここより下は、ロゴ・かご・トグルの横並びになる。 */
@media (max-width: 1024px) {
	/* ナビは開閉式の札になるので、3列の組みは解いて横並びに戻す。 */
	.tr-header__bar {
		display: flex;
	}

	.tr-navtoggle {
		display: block;
		order: 3;
		width: 46px;
		height: 46px;
		margin-left: 12px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.5);
		background: transparent;
		cursor: pointer;
	}

	.tr-navtoggle__bars,
	.tr-navtoggle__bars::before,
	.tr-navtoggle__bars::after {
		display: block;
		width: 22px;
		height: 1px;
		margin: 0 auto;
		background: #fff;
		transition: transform 0.2s;
	}

	.tr-navtoggle__bars::before,
	.tr-navtoggle__bars::after {
		content: "";
		position: relative;
	}

	.tr-navtoggle__bars::before {
		top: -7px;
	}

	.tr-navtoggle__bars::after {
		top: 6px;
	}

	.tr-navtoggle[aria-expanded="true"] .tr-navtoggle__bars {
		background: transparent;
	}

	.tr-navtoggle[aria-expanded="true"] .tr-navtoggle__bars::before {
		transform: translateY(7px) rotate(45deg);
	}

	.tr-navtoggle[aria-expanded="true"] .tr-navtoggle__bars::after {
		transform: translateY(-6px) rotate(-45deg);
	}

	.tr-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		max-height: calc(100vh - var(--tr-head));
		overflow-y: auto;
		margin: 0;
		background: var(--tr-maroon-deep);
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		box-shadow: 0 18px 30px rgba(0, 0, 0, 0.25);
		display: none;
	}

	/* 右から差し込む。閉じるときは同じ道を戻る。 */
	.tr-nav.is-open {
		display: block;
		animation: tr-nav-in 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	.tr-nav.is-closing {
		animation: tr-nav-out 0.26s cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
	}

	@keyframes tr-nav-in {
		from {
			transform: translateX(100%);
			opacity: 0;
		}
		to {
			transform: translateX(0);
			opacity: 1;
		}
	}

	@keyframes tr-nav-out {
		from {
			transform: translateX(0);
			opacity: 1;
		}
		to {
			transform: translateX(100%);
			opacity: 0;
		}
	}

	/* 動きを減らす設定のときは、その場で出す。 */
	@media (prefers-reduced-motion: reduce) {
		.tr-nav.is-open,
		.tr-nav.is-closing {
			animation: none;
		}
	}

	/* 縦積みになるのはヘッダーのナビだけ。フッターのナビは横並びのまま。 */
	.tr-nav .tr-nav__list {
		flex-direction: column;
		align-items: stretch;
		padding: 8px 0 14px;
	}

	.tr-nav .tr-nav__item::before {
		content: none;
	}

	.tr-nav .tr-nav__item a {
		display: block;
		padding: 12px 22px;
		font-size: 18px;
	}

	.tr-shopnav {
		order: 2;
		margin-left: auto;
	}
}

@media (max-width: 900px) {
	:root {
		--tr-head: 78px;
	}

	/* 「購入手続きへ進む」は8文字あり、既定の字送りだと折り返す。
	   画面幅に比例させたうえで、折り返し自体を禁じておく。 */
	.tr-shop #content a.checkout-button.button {
		padding-left: 3vw;
		padding-right: 3vw;
		font-size: clamp(14px, 4.2vw, 19px);
		letter-spacing: 0.04em;
		white-space: nowrap;
	}

	/* 画面が狭いときは、売り場の上の余白を詰める。 */
	.tr-shop.woocommerce-shop #content.site-content > .col-full,
	.tr-shop.single-product #content.site-content > .col-full {
		padding-top: 36px;
	}

	/* 商品名・ページ見出しは親テーマの h1（約59px）が効いていて、
	   スマートフォンでは大きすぎる。画面幅に合わせて詰める。 */
	.tr-shop #content .product_title,
	.tr-shop #content .entry-title,
	.tr-shop #content .woocommerce-products-header__title {
		font-size: clamp(25px, 6.6vw, 34px);
		letter-spacing: 0.06em;
		line-height: 1.45;
	}

	.tr-shopnav {
		gap: 8px;
	}

	.tr-shopbtn {
		width: 132px;
		height: 42px;
		font-size: 14px;
	}

	.tr-minicart__toggle {
		width: 42px;
		height: 42px;
	}

	.tr-minicart__icon {
		width: 19px;
		height: 19px;
	}

	.tr-minicart__count {
		top: -8px;
		right: -8px;
		min-width: 20px;
		height: 20px;
		font-size: 11px;
	}

	/* 画面が狭いときは、札を画面幅に合わせて縮める。 */
	.tr-minicart__panel {
		top: calc(100% + 12px);
		right: -12px;
		width: min(320px, calc(100vw - 24px));
		padding: 18px;
	}

	.tr-col {
		padding-bottom: 54px;
	}

	.tr-intro {
		padding-top: 48px;
	}

	.tr-intro__card {
		padding: 30px 26px;
	}

	/* SPは3行に割った（tr-br-sp）ので最長行は「創成期からの製法を」の9字、
	   字送り込みで約9.8em に短縮。デスクトップの27pxに近いサイズまで許容できるので
	   450px 以上で 27px 頭打ちにする。 */
	.tr-intro__title {
		font-size: clamp(18px, 6vw, 27px);
	}

	.tr-intro__body,
	.tr-intro__more {
		font-size: 17px;
	}

	.tr-items,
	.tr-news,
	.tr-store {
		padding-top: 54px;
	}

	.tr-sechead {
		margin-bottom: 32px;
	}

	.tr-sechead__jp {
		font-size: 25px;
	}

	/* カードは実質 42vw 弱の幅で、「直径9cm　10個入り：3,500円」1行分（約13em）を収める。
	   3.5vw だと 360〜390px 幅でまだ折り返すため係数を詰め、500px 以上で 15px 頭打ちにする。 */
	.tr-items__caption {
		font-size: clamp(9px, 3vw, 15px);
	}

	.tr-items .tr-btnwrap {
		margin-top: 48px;
	}

	.tr-news__row {
		min-height: 0;
		padding: 18px 6px;
	}

	.tr-news__line {
		flex-direction: column;
		align-items: flex-start;
		min-height: 0;
		gap: 4px;
	}

	.tr-news__row--figure {
		padding-top: 18px;
		padding-bottom: 18px;
	}

	.tr-news__thumb {
		width: 96px;
		height: 70px;
		margin-bottom: 12px;
	}

	.tr-news__date,
	.tr-news__title {
		font-size: 16px;
		width: auto;
	}

	.tr-store__info {
		margin-top: 28px;
	}

	.tr-store__name {
		font-size: 17px;
	}

	.tr-store__addr,
	.tr-store__hours {
		font-size: 15px;
	}

	.tr-store__band {
		height: 200px;
	}

	/* 帯（200px）の中で上下センター。 */
	.tr-store__photo {
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
		width: 132px;
		height: 124px;
	}

	.tr-article {
		padding: 32px 20px 0;
	}

	/* SPは画面幅に追従させる。狭い端末で 22px、900px手前で 34px に頭打ち。 */
	.tr-lead {
		margin-top: 40px;
		font-size: clamp(22px, 6.4vw, 34px);
	}

	.tr-archive__link {
		gap: 16px;
		padding: 16px 2px;
	}

	.tr-archive__thumb {
		width: 88px;
		height: 64px;
	}

	.tr-archive__date {
		font-size: 13px;
	}

	.tr-archive__title {
		margin-top: 5px;
		font-size: 16px;
	}

	.tr-pager {
		gap: 6px;
		margin-top: 36px;
	}

	.tr-pager .page-numbers {
		min-width: 34px;
		height: 34px;
		font-size: 14px;
	}

	.tr-br-sp {
		display: inline;
	}

	.tr-br-pc {
		display: none;
	}

	.tr-sublead {
		font-size: 18px;
		margin-bottom: 20px;
	}

	.tr-lead + .tr-sublead {
		font-size: 19px;
	}

	.tr-subhead {
		font-size: 19px;
		margin-top: 40px;
	}

	.tr-article > p:not([class]) {
		font-size: 16px;
		margin-bottom: 24px;
	}

	.tr-fig,
	.tr-figs {
		margin: 28px 0;
	}

	/* SPは幅が足りないので、写真は柱いっぱいまで使う。 */
	.tr-fig--narrow,
	.tr-fig--half {
		max-width: 100%;
	}

	.tr-fig--center {
		max-width: 68%;
	}

	/* SPは柱の外に余白が無い。丸も小さくして、はみ出しを詰める。 */
	.tr-lead--left::before {
		top: -16px;
		left: -16px;
		width: 104px;
		height: 104px;
	}

	.tr-figs {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.tr-figs--tallright {
		grid-template-columns: 1fr;
	}

	.tr-figs--wide {
		width: auto;
		margin-left: 0;
		transform: none;
	}

	.tr-portrait {
		width: 108px;
		margin-right: 18px;
	}

	.tr-cta {
		margin-top: 44px;
		padding: 26px 20px 96px;
	}

	.tr-top .tr-cta {
		padding-top: 0;
	}

	.tr-cta__btn {
		width: 320px;
		height: 54px;
		gap: 24px;
	}

	.tr-cta__label {
		font-size: 18px;
	}

	/* 丸バッジは 130px のうち 72px がフッターに入り込むので、
	   ロゴがその下に来るまで内側を下げる（72 + 余白 20）。 */
	.tr-footer__inner {
		flex-direction: column;
		gap: 18px;
		padding-top: 92px;
	}

	.tr-footer__nav {
		margin-left: 0;
		width: 100%;
	}

	.tr-footer__nav .tr-nav__list {
		flex-wrap: wrap;
		justify-content: center;
	}

	.tr-footer__nav .tr-nav__item a {
		font-size: 15px;
		padding: 4px 10px;
	}

	.tr-footer__nav .tr-nav__item::before {
		font-size: 12px;
	}

	.tr-footer__badge-link {
		top: -58px;
	}

	.tr-footer__badge {
		width: 130px;
		height: 130px;
	}

	.tr-footer__copy {
		margin-top: 20px;
		font-size: 11px;
		letter-spacing: 0.02em;
	}
}

/* ==================================================================
   セカンドページの追加部品。
   2校ではページごとに見出しの寄せ方が違うので、そこだけ別に持つ。
   ================================================================== */

/* 見出しの左に小さな人物写真が入る組み（歴史） */
/*
 * 人物写真を重ねた見出し（歴史）。
 * 2校では写真が和紙の額の左下に食い込み、柱の外へ 65px はみ出す。
 * 見出しは柱いっぱいで中央揃えなので、写真は流し込みから外して重ねるだけにしてある。
 */
.tr-leadrow {
	position: relative;
	margin: 52px 0 30px;
}

.tr-leadrow .tr-portrait {
	float: none;
	width: 160px;
	margin: 0 auto 20px;
}

.tr-leadrow .tr-lead {
	margin-top: 0;
}

/* 柱の外へ 65px 出せる幅があるときだけ、額の左下へ重ねる。 */
@media (min-width: 1100px) {
	.tr-leadrow .tr-portrait {
		position: absolute;
		top: -90px;
		left: -65px;
		margin: 0;
	}
}

/* 左に寄せる見出し（工程） */
.tr-lead--left {
	position: relative;
	isolation: isolate;
	text-align: left;
	text-indent: 0;
}

/*
 * 見出しの起こしに敷く白い丸。柱の左から40pxはみ出し、
 * 見出しと副題のあいだに中心が来る大きさ（2校の実測148px）。
 */
.tr-lead--left::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -23px;
	left: -40px;
	width: 148px;
	height: 148px;
	border-radius: 50%;
	background: #fff;
}

.tr-sublead.tr-sublead--left {
	position: relative;
	z-index: 1;
	text-align: left;
	text-indent: 0;
	font-weight: 400;
	color: #3d322b;
}

/* リード直下でも太らせないサブリード。読み物の副題を静かに置きたいとき。 */
.tr-sublead.tr-sublead--normal {
	font-weight: 400;
}

/* 本文の途中に置く、幅を抑えた写真。2校は柱930pxに対して858px。 */
.tr-fig--half {
	max-width: 92.3%;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 900px) {
	/*
	 * SPでもデスクトップと同じく、人物写真を左に寄せて上の写真へ食い込ませる。
	 * 柱の外へは出せないので左端に揃え、見出しは写真の下から始まるよう上に場所を空ける。
	 */
	.tr-leadrow {
		margin: 28px 0 24px;
		padding-top: 60px;
	}

	.tr-leadrow .tr-portrait {
		position: absolute;
		top: -104px;
		left: 16px;
		width: 108px;
		margin: 0;
	}

	/*
	 * 「バウムクーヘンの源流がここに。」は15字。SPでも1行に収める。
	 * 柱は 100vw - 40px なので、字間を詰めたうえで幅から逆算した大きさに抑える。
	 */
	.tr-leadrow .tr-lead {
		font-size: min(5.6vw, 34px);
		letter-spacing: 0.02em;
		text-indent: 0.02em;
		white-space: nowrap;
	}
}

/* ---- オンラインショップ ------------------------------------------ */

/* 版面（幅・余白）は親テーマのまま。地色だけをセカンドページと揃える。
   縞のテクスチャは敷かず、生成りのべた地にする。 */
.tr-shop #content.site-content {
	background-color: var(--tr-cream);
}

/* 商品一覧・商品ページの余白。生成りの面を上下に少し伸ばす。 */
.tr-shop #content.site-content > .col-full {
	padding-top: 44px;
	padding-bottom: 74px;
}

/* 並び替えセレクトと件数表示は右に寄せる。
   親テーマはどちらも float:left で左に置いている。
   DOM 順が「並び替え → 件数」なので、両方 float:right にすると
   右端から順に積まれて［件数］［並び替え］の並びになる。 */
.tr-shop .storefront-sorting .woocommerce-ordering,
.tr-shop .storefront-sorting .woocommerce-result-count {
	float: right;
}

/* 左寄せ前提で右側に入っていた間隔を、寄せる向きに合わせて左側へ移す。 */
.tr-shop .storefront-sorting .woocommerce-ordering {
	margin-right: 0;
	margin-left: 1em;
}

/* 親テーマの既定のリンク色（WooCommerce の紫 #7f54b3）を使わない。
   色ではなく下線でリンクだと分かるようにし、色は本文と揃える。 */
.tr-shop #content a:not(.button):not(.added_to_cart):not(.woocommerce-LoopProduct-link):not(.remove),
.tr-article a:not(.button) {
	color: var(--tr-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.tr-shop #content a:not(.button):not(.added_to_cart):not(.woocommerce-LoopProduct-link):not(.remove):hover,
.tr-article a:not(.button):hover {
	color: var(--tr-maroon);
	text-decoration-thickness: 2px;
}

/* 商品カードは面全体がリンクなので、下線は商品名にだけ、ホバーで出す。 */
.tr-shop .woocommerce-LoopProduct-link {
	color: var(--tr-ink);
	text-decoration: none;
}

.tr-shop .woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

/* 見出しと本文はセカンドページと同じ明朝で受ける。 */
.tr-shop .woocommerce-products-header__title,
.tr-shop .product_title,
.tr-shop .entry-title,
.tr-shop .woocommerce-loop-product__title {
	color: var(--tr-ink);
	font-family: var(--tr-serif);
	font-weight: 600;
	letter-spacing: 0.08em;
}

.tr-shop .woocommerce-products-header__title,
.tr-shop .entry-title {
	text-align: center;
}

/* 商品詳細だけは左寄せ。写真と説明が左右に組まれる版面に頭を揃える。 */
.tr-shop.single-product #content .product_title,
.tr-shop.single-product #content .entry-title {
	text-align: left;
}

/* 商品詳細の版面。親テーマは写真 39.13%・説明 56.52% で、主役の写真の側が小さい。
   撮り下ろしを大きく見せたいので、写真を広げて説明を締める。
   親テーマの該当ルールが @media(min-width:768px) の中にあるので、同じ条件で上書きする。
   （body を噛ませているのは、親テーマと同じ詳細度で後勝ちに頼らないため） */
@media (min-width: 768px) {
	body.tr-shop.single-product div.product .woocommerce-product-gallery {
		width: 54%;
		margin-right: 4%;
	}

	body.tr-shop.single-product div.product .summary {
		width: 42%;
	}
}

/* 親テーマは商品写真に幅を与えていないため、img が登録サイズ（416px）の実寸のまま出る。
   列を広げても写真が広がらないので、枠いっぱいに伸ばす。
   （WooCommerce 本体の div.images img ルールは Storefront が自前CSSに差し替えていて読み込まれない） */
.tr-shop.single-product div.product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* 写真に重ねると拡大される（jquery.zoom）が、見た目は何も変わらないので
   触れる前に分からない。カーソルを虫めがねにして、拡大できることを示す。
   .zoomImg は zoom が実寸の画像を上に重ねる要素で、ここが最前面に来るため
   これにも同じカーソルを与えないと矢印に戻ってしまう。
   ズーム自体がタッチ端末では働かないので、hover できる環境だけに掛ける。 */
@media (hover: hover) and (min-width: 768px) {
	.tr-shop.single-product div.product .woocommerce-product-gallery__image,
	.tr-shop.single-product div.product .woocommerce-product-gallery__image a,
	.tr-shop.single-product div.product .woocommerce-product-gallery__image img,
	.tr-shop.single-product div.product .woocommerce-product-gallery .zoomImg {
		cursor: zoom-in;
	}
}

/* 商品名・ページ見出し。親テーマの h1（2.617924em ≒ 42px）はこの版面では大きい。
   スマートフォン側の clamp 上限（34px）に合わせて、PC も同じ高さで止める。 */
@media (min-width: 901px) {
	.tr-shop #content .product_title,
	.tr-shop #content .entry-title,
	.tr-shop #content .woocommerce-products-header__title {
		font-size: 34px;
		line-height: 1.45;
	}
}

/* 金額の色。親テーマの既定（#43454b の青灰）は本文の焦茶から浮くので、
   商品名・本文と同じ色に揃える。 */
.tr-shop #content .price,
.tr-shop #content .price .woocommerce-Price-amount,
.tr-shop #content .woocommerce-Price-amount {
	color: var(--tr-ink);
}

/* 割引前の価格だけは沈めて、取り消し線が分かるようにする。 */
.tr-shop #content .price del,
.tr-shop #content .price del .woocommerce-Price-amount {
	color: #8a7c72;
}

/* 号数を選んだ後に出る金額（.woocommerce-variation-price）。
   上の「¥2,000 – ¥7,000」は幅を示す目安だが、こちらは実際に払う額なので大きく出す。
   書体はタイトル下の p.price と同じ（body から継ぐ --tr-sans）に揃え、
   違いは大きさだけにする。
   このかたまりは JS が後から差し込むため、親テーマ側に寸法の指定がない。 */
.tr-shop.single-product #content .woocommerce-variation-price .price,
.tr-shop.single-product #content .woocommerce-variation-price .price .woocommerce-Price-amount {
	font-size: clamp(26px, 2.6vw, 32px);
	font-family: var(--tr-sans);
	line-height: 1.3;
}

/* 「（税込）」は添え物なので、金額に対する比率で小さく保つ。 */
.tr-shop.single-product #content .woocommerce-variation-price .price .woocommerce-price-suffix {
	font-size: 0.5em;
	letter-spacing: 0.08em;
}

/* 売り場のボタンは一括でヘッダーと同じ地色＋白文字。
   親テーマの灰色（既定 #eeeeee／ホバー #dad8da）はここで全部止める。
   #content を噛ませているのは、親テーマの inline CSS より強くするため。 */
.tr-shop #content .button,
.tr-shop #content .added_to_cart,
.tr-shop #content button:not(.woocommerce-product-gallery__trigger),
.tr-shop #content input[type="submit"],
.tr-shop #content input[type="button"] {
	border-radius: 0;
	border-color: var(--tr-maroon-deep);
	background-color: var(--tr-maroon-deep);
	color: #fff;
	font-family: var(--tr-serif);
	letter-spacing: 0.12em;
	text-decoration: none;
}

.tr-shop #content .button:hover,
.tr-shop #content .added_to_cart:hover,
.tr-shop #content button:not(.woocommerce-product-gallery__trigger):hover,
.tr-shop #content input[type="submit"]:hover,
.tr-shop #content input[type="button"]:hover {
	border-color: var(--tr-maroon);
	background-color: var(--tr-maroon);
	color: #fff;
}

/* 押せないボタン（変更前の「カートを更新」など）は沈めておく。 */
.tr-shop #content .button:disabled,
.tr-shop #content .button:disabled:hover,
.tr-shop #content button:disabled,
.tr-shop #content button:disabled:hover {
	border-color: #b3a79f;
	background-color: #b3a79f;
	color: #fff;
	cursor: not-allowed;
	opacity: 1;
}

/* 商品詳細の「かごに入れる」。ヘッダーと同じ地色に白文字。 */
.tr-shop #content button.single_add_to_cart_button {
	border-color: var(--tr-maroon-deep);
	background-color: var(--tr-maroon-deep);
	color: #fff;
}

.tr-shop #content button.single_add_to_cart_button:hover {
	border-color: var(--tr-maroon);
	background-color: var(--tr-maroon);
	color: #fff;
}

/* お知らせ帯の中の「かごを見る」は、地色を持たせず文字リンクとして置く。
   帯そのものが色地（親テーマの緑 #0f834d）なので、文字は帯と同じ白のまま。 */
.tr-shop #content .woocommerce-message .button,
.tr-shop #content .woocommerce-info .button,
.tr-shop #content .woocommerce-error .button {
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	letter-spacing: 0.06em;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.tr-shop #content .woocommerce-message .button:hover,
.tr-shop #content .woocommerce-info .button:hover,
.tr-shop #content .woocommerce-error .button:hover {
	border: 0;
	background: none;
	color: #fff;
	text-decoration-thickness: 2px;
}

/* /cart/ の「購入手続きへ進む」。かごの中で一番進めたいボタンなので、
   親テーマの既定色ではなく赤で立てる。 */
.tr-shop #content a.checkout-button.button {
	border-radius: 0;
	background-color: #b80a2f;
	color: #fff;
	font-family: var(--tr-serif);
	letter-spacing: 0.12em;
}

.tr-shop #content a.checkout-button.button:hover {
	background-color: #9c0827;
	color: #fff;
}

/* /checkout/ の「注文する」も同じ赤で受ける。 */
.tr-shop #content button#place_order,
.tr-shop #content #place_order {
	border-radius: 0;
	background-color: #b80a2f;
	color: #fff;
	font-family: var(--tr-serif);
	letter-spacing: 0.12em;
}

.tr-shop #content button#place_order:hover,
.tr-shop #content #place_order:hover {
	background-color: #9c0827;
	color: #fff;
}

/* 生成りの上に白い箱が浮かないよう、入力欄まわりだけ地を白のままにする。
   （テーブル・フォームは親テーマの白地が読みやすい） */
.tr-shop .woocommerce table.shop_table,
.tr-shop .woocommerce-checkout #payment,
.tr-shop .woocommerce .cart-collaterals .cart_totals {
	background-color: #fff;
}

/* 商品一覧と商品詳細は、ヘッダーとの間を広く取る。 */
.tr-shop.woocommerce-shop #content.site-content > .col-full,
.tr-shop.single-product #content.site-content > .col-full {
	padding-top: 88px;
}

/* カートの見出しと表がくっついて見えるので、見出しの下を空ける。 */
.tr-shop.woocommerce-cart #content .tr-lead {
	margin-bottom: 46px;
}

/* カートだけは下に余白を足す。合計とレジのボタンが
   フッターの帯に近づきすぎて、押す前に区切りが要るため。 */
.tr-shop.woocommerce-cart #content.site-content > .col-full {
	padding-bottom: 130px;
}

/* 「カート合計」の見出し。白い箱の角に貼り付いて見えるので、
   箱に左右の余白を持たせ、見出しには上下の余白を入れる。 */
.tr-shop #content .cart-collaterals .cart_totals {
	padding: 0 26px 26px;
}

.tr-shop #content .cart-collaterals .cart_totals h2 {
	margin: 0;
	padding: 26px 0 20px;
	color: var(--tr-ink);
	font-family: var(--tr-serif);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-indent: 0.12em;
}

/* 箱に余白が付いたぶん、中の表は幅いっぱいのままにする。 */
.tr-shop #content .cart-collaterals .cart_totals table.shop_table {
	margin: 0;
	width: 100%;
}

/* ==================================================================
   お問合せ（Contact Form 7）
   フォームの版面は本文側の div で組み、CF7 は入力部品だけを出す。
   （自動 <p> は functions.php の wpcf7_autop_or_not で止めている）
   ================================================================== */

/* ---- 電話・FAX・受付時間 ------------------------------------------ */

.tr-article .tr-contact {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border: 1px solid var(--tr-weave);
	background-color: #fff;
}

.tr-article .tr-contact__item {
	padding: 30px 30px 32px;
	border-right: 1px solid #e6ded6;
}

.tr-article .tr-contact__item:last-child {
	border-right: 0;
}

.tr-article .tr-contact__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #6c5d54;
	font-family: var(--tr-sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1;
	text-align: left;
}

.tr-article .tr-contact__num {
	margin: 12px 0 0;
	font-family: var(--tr-serif);
	font-size: 31px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-align: left;
}

.tr-article .tr-contact__num--sm {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.5;
}

/* 電話番号のリンクは本文リンクの下線を外す。 */
.tr-article .tr-contact__num a {
	color: var(--tr-ink);
	text-decoration: none;
}

.tr-article .tr-contact__num a:hover {
	color: var(--tr-maroon);
	text-decoration: none;
}

.tr-article .tr-contact__sub {
	margin: 10px 0 0;
	color: #6c5d54;
	font-family: var(--tr-sans);
	font-size: 14px;
	letter-spacing: 0.04em;
	line-height: 1.6;
	text-align: left;
}

/* ---- フォームの枠組み --------------------------------------------- */

.tr-subhead--form {
	margin-top: 62px;
	margin-bottom: 8px;
}

.tr-article .tr-form__hint {
	margin: 0 0 34px;
	color: #6c5d54;
	font-family: var(--tr-sans);
	font-size: 15px;
	letter-spacing: 0.04em;
	text-align: left;
}

.tr-article .tr-form__hint span {
	color: #b80a2f;
}

.tr-form {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.tr-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px;
}

.tr-form__field {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.tr-form__label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--tr-serif);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.1em;
}

.tr-form__req {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 7px;
	background-color: #b80a2f;
	color: #fff;
	font-family: var(--tr-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
}

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

.tr-form .wpcf7-form-control-wrap {
	display: block;
}

.tr-form input.wpcf7-text,
.tr-form input.wpcf7-tel,
.tr-form input.wpcf7-email,
.tr-form select.wpcf7-select,
.tr-form textarea.wpcf7-textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--tr-weave);
	border-radius: 0;
	background-color: #fff;
	color: var(--tr-ink);
	font-family: var(--tr-sans);
	font-size: 16px;
	letter-spacing: 0.02em;
	transition: border-color 0.2s;
}

.tr-form input.wpcf7-text,
.tr-form input.wpcf7-tel,
.tr-form input.wpcf7-email,
.tr-form select.wpcf7-select {
	height: 54px;
	padding: 0 16px;
	line-height: 1.4;
}

.tr-form textarea.wpcf7-textarea {
	min-height: 168px;
	padding: 15px 16px;
	line-height: 1.9;
	resize: vertical;
}

.tr-form ::placeholder {
	color: #9b8f86;
	opacity: 1;
}

.tr-form input.wpcf7-text:focus,
.tr-form input.wpcf7-tel:focus,
.tr-form input.wpcf7-email:focus,
.tr-form select.wpcf7-select:focus,
.tr-form textarea.wpcf7-textarea:focus {
	border-color: var(--tr-maroon);
	outline: 1px solid var(--tr-maroon);
	outline-offset: -2px;
}

/* 選択欄。ブラウザ既定の矢印を外して、自前の山形を右に置く。 */
.tr-form select.wpcf7-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c5d54' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 18px 18px;
}

/* ---- 同意 ---------------------------------------------------------- */

.tr-form__accept {
	padding: 20px 22px;
	background-color: #f2eee1;
}

.tr-form__accept .wpcf7-list-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
}

.tr-form__accept .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
}

.tr-form__accept input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 4px 0 0;
	accent-color: var(--tr-maroon-deep);
}

.tr-form__accept .wpcf7-list-item-label {
	font-family: var(--tr-sans);
	font-size: 15px;
	letter-spacing: 0.02em;
	line-height: 1.8;
}

/* ---- 送信 ---------------------------------------------------------- */

.tr-form__submit {
	margin-top: 8px;
	text-align: center;
}

.tr-form input.wpcf7-submit {
	width: 448px;
	max-width: 100%;
	height: 60px;
	/* 親テーマの上下 padding が残ると、行が下にずれて字面が中央に来ない。
	   padding を落とし、行の高さをボタンの高さに合わせる。 */
	padding: 0;
	line-height: 60px;
	border: 0;
	border-radius: 0;
	background-color: var(--tr-maroon-deep);
	color: #fff;
	font-family: var(--tr-serif);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	cursor: pointer;
	transition: background-color 0.2s;
}

.tr-form input.wpcf7-submit:hover {
	background-color: var(--tr-maroon);
}

.tr-article .tr-form__note {
	margin: 32px 0 0;
	color: #6c5d54;
	font-family: var(--tr-sans);
	font-size: 14px;
	letter-spacing: 0.04em;
	text-align: center;
}

/* ---- 検証と結果の表示 ---------------------------------------------- */

.tr-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: #b80a2f;
	font-family: var(--tr-sans);
	font-size: 14px;
	letter-spacing: 0.02em;
}

.tr-form .wpcf7-not-valid {
	border-color: #b80a2f;
	background-color: #fffafa;
}

.wpcf7 form .wpcf7-response-output {
	margin: 30px 0 0;
	padding: 16px 20px;
	border: 1px solid var(--tr-weave);
	border-radius: 0;
	color: var(--tr-ink);
	font-family: var(--tr-sans);
	font-size: 15px;
	letter-spacing: 0.02em;
	line-height: 1.8;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--tr-maroon-deep);
	background-color: var(--tr-cream);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: #b80a2f;
	background-color: #fffafa;
}

.tr-form .wpcf7-spinner {
	background-color: var(--tr-weave);
}

/* ---- 狭い画面 ------------------------------------------------------ */

@media (max-width: 900px) {
	.tr-article .tr-contact {
		grid-template-columns: 1fr;
	}

	.tr-article .tr-contact__item {
		padding: 20px 20px 22px;
		border-right: 0;
		border-bottom: 1px solid #e6ded6;
	}

	.tr-article .tr-contact__item:last-child {
		border-bottom: 0;
	}

	.tr-article .tr-contact__num {
		font-size: 26px;
	}

	.tr-article .tr-contact__num--sm {
		font-size: 20px;
	}

	/* 電話番号は指で押せる帯にする。 */
	.tr-article .tr-contact__item:first-child .tr-contact__num {
		margin-top: 10px;
	}

	.tr-article .tr-contact__item:first-child .tr-contact__num a {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 54px;
		background-color: var(--tr-maroon-deep);
		color: #fff;
		font-size: 24px;
		letter-spacing: 0.06em;
	}

	.tr-article .tr-contact__item:first-child .tr-contact__sub {
		text-align: center;
	}

	.tr-subhead--form {
		margin-top: 40px;
	}

	.tr-article .tr-form__hint {
		margin-bottom: 24px;
		font-size: 13px;
	}

	.tr-form,
	.tr-form__row {
		gap: 20px;
	}

	.tr-form__row {
		grid-template-columns: 1fr;
	}

	.tr-form__label {
		font-size: 16px;
	}

	.tr-form input.wpcf7-text,
	.tr-form input.wpcf7-tel,
	.tr-form input.wpcf7-email,
	.tr-form select.wpcf7-select {
		height: 52px;
		padding: 0 14px;
		font-size: 15px;
	}

	.tr-form textarea.wpcf7-textarea {
		min-height: 150px;
		padding: 13px 14px;
		font-size: 15px;
	}

	.tr-form__accept {
		padding: 16px;
	}

	.tr-form__accept .wpcf7-list-item-label {
		font-size: 13px;
	}

	.tr-form input.wpcf7-submit {
		width: 100%;
		height: 56px;
		line-height: 56px;
		font-size: 18px;
	}

	.tr-article .tr-form__note {
		margin-top: 16px;
		font-size: 12px;
	}
}

/* 対照表は狭い画面では2列に足りないので、項目名と内容を積む */
@media (max-width: 900px) {

	.tr-spec__row {
		grid-template-columns: 1fr;
		gap: 6px;
		padding: 18px 2px;
	}

	.tr-spec__fee li {
		max-width: none;
	}
}