@charset "UTF-8";
/* =========================================================
   稲垣機料 共通スタイル（2026年版）
   これまでのデザイン（杼の写真・明朝の見出し・色分けしたカテゴリ・
   赤茶の注文ボタン・波模様の見出し帯）を手がかりに、
   今の横長のモニターとスマホに合わせて作り直したもの。
   ・PC（1024px〜）：最大 1200px。左にカテゴリ、右に本文
   ・タブレット／スマホ（〜1023px）：1段組。メニューはボタンで開く

   ■ 文字のきまり
   ・書体は 2 つだけ
       明朝（--serif）… 社名と見出しだけ
       ゴシック（--sans）… 本文・メニュー・ボタン・一覧などそれ以外すべて
   ・大きさは 6 段階（--fs-xs〜--fs-xxl）。新しく足すときもこの中から選ぶ
   ・太さは 普通（400）と 太字（700）。メニュー帯の文字だけ明朝の中間（500）
   ・Google Fonts の Noto を読み込むので、Windows / Mac / iPhone でほぼ同じ見た目になる
   ========================================================= */

:root {
	/* 書体 */
	--sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "YuGothic", "Meiryo", sans-serif;
	--serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;

	/* 文字の大きさ（6段階） */
	--fs-xs: 12px;   /* 注記・英字の飾り・コピーライト */
	--fs-s: 14px;    /* 日付・表の見出し・小さなボタン・フッター */
	--fs-m: 16px;    /* 本文・メニュー・ボタン・一覧 */
	--fs-l: 18px;    /* 小見出し（お知らせの題・カテゴリ名の帯など） */
	--fs-xl: 22px;   /* 見出し・電話番号 */
	--fs-xxl: 30px;  /* 社名 */

	/* 色 */
	--ink: #3d352e;           /* 本文の文字色 */
	--muted: #6f665d;         /* 補足の文字色 */
	--link: #0b5cad;          /* リンクの青 */
	--bg: #fcfcfa;            /* ページの地色（ごく薄い生成り） */
	--card: #ffffff;
	--line: #e2ddd5;
	--brown: #2f2c27;         /* 黒茶（これまでのメニュー帯の色） */
	--order: #a34734;         /* ご注文フォームの赤茶（これまでと同じ） */
	--order-dark: #86361f;
	--contact: #4a423a;       /* お問い合わせボタンの黒茶 */
	--contact-dark: #2f2c27;
	--red: #c0261b;           /* お知らせの日付・値段の赤 */
	--tools: #b09935;  --tools-bar: #625545;   /* 手織道具（金茶） */
	--yarn: #586988;   --yarn-bar: #4b4446;    /* 糸（藍ねず） */
	--dye: #8a331e;    --dye-bar: #5c463b;     /* 染料（赤茶） */
	--fiber: #5b8250;  --fiber-bar: #545044;   /* 織物用素材（緑） */
	--band-bg: #f1efeb url(../img/new/title_bg.jpg) right center / auto 100% repeat-x;  /* 波模様の帯 */

	--wrap: 1200px;
	--radius: 8px;
	--shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 3px 12px rgba(0, 0, 0, .05);
}

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0; background: var(--bg); color: var(--ink);
	font-family: var(--sans); font-size: var(--fs-m); font-weight: 400; line-height: 1.8; letter-spacing: .02em;
}
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
a { color: var(--link); }
a:hover { color: #083f78; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 700; line-height: 1.45; letter-spacing: .06em; }
small { font-size: var(--fs-xs); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 10px; top: 10px; z-index: 100; background: #fff; padding: 8px 12px; }
main [id], #side { scroll-margin-top: 64px; }
.sp-only, .btn.sp-only, .intro .actions.sp-only { display: none; }
.nobr { white-space: nowrap; }  /* 言葉の途中で折り返さない */

/* ---------- ヘッダー：社名・杼の写真・電話 ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.site-header .wrap { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; min-height: 120px; }
.logo { text-decoration: none; color: #111; display: block; }
.logo .name { display: block; font-family: var(--serif); font-weight: 700; font-size: var(--fs-xxl); letter-spacing: .14em; line-height: 1.3; }
.logo .sub { display: block; font-size: var(--fs-s); color: var(--muted); margin-top: 4px; }
.logo .en { display: block; font-size: var(--fs-xs); color: #8a8178; letter-spacing: .06em; }
.header-photo { align-self: stretch; background: url(../img/new/header_shuttles_wide.jpg) right center / auto 100% no-repeat; min-height: 120px; position: relative; }
/* PC：前のヘッダーを左右反対にした形。社名は左、杼の写真は右半分いっぱいに大きく敷く。
   写真はヘッダーの中だけ（メニュー帯には重ねない）。左端は白にぼかしてある */
@media (min-width: 1024px) {
	.site-header .wrap { grid-template-columns: 1fr 62%; min-height: 130px; gap: 0 20px; }
	.header-photo { min-height: 130px; background: url(../img/new/header_shuttles_wide.jpg) right center / cover no-repeat; }
}
.header-contact { text-align: right; }
.header-contact .tel { display: block; font-weight: 700; font-size: var(--fs-xl); color: #111; text-decoration: none; letter-spacing: .04em; line-height: 1.3; }
.header-contact .tel small { font-weight: 400; margin-right: 6px; }
.header-contact .hours { display: block; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- ボタン ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px;
	border-radius: 4px; text-decoration: none; font-size: var(--fs-m); font-weight: 700; line-height: 1.4; border: 2px solid transparent;
}
.btn-plain { background: #fff; color: var(--ink); border-color: #cfc8bd; }
.btn-plain:hover { border-color: var(--brown); color: var(--ink); }
.btn-pdf::before { content: "PDF"; font-size: var(--fs-xs); background: var(--red); color: #fff; border-radius: 3px; padding: 0 5px; }

/* ---------- メニュー帯（お知らせの見出しと同じ、波模様の明るい帯） ---------- */
.nav-bar {
	/* 波模様に白を薄く重ねて、文字を読みやすく */
	background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .45)), var(--band-bg); background-position: center; position: sticky; top: 0; z-index: 30;
}
/* 帯の下の境目：3px のうすいグラデーション */
.nav-bar::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none;
	background: linear-gradient(rgba(60, 50, 40, .18), rgba(60, 50, 40, 0));
}
.nav-bar .wrap { display: flex; align-items: center; min-height: 0; }
.global-nav { display: flex; align-items: center; flex: 1; }
.global-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; flex: 1; }
.global-nav li a {
	display: block; position: relative; padding: 4px 28px 4px 26px; line-height: 1.6; color: #1f1b17; text-decoration: none;
	text-shadow: 0 0 2px #fff, 0 0 4px rgba(255, 255, 255, .9);
	font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: .04em;
}
.global-nav li a::before { content: ""; position: absolute; left: 12px; top: 50%; margin-top: -4px; border: 4px solid transparent; border-left: 6px solid #8b8a8e; border-right: 0; }
.global-nav li a:hover { color: #000; background: rgba(255, 255, 255, .55); }
.global-nav li a[aria-current="page"] { color: #000; font-weight: 700; box-shadow: inset 0 -4px 0 #000; }
.global-nav li a[aria-current="page"]::before { border-left-color: #000; }
/* 右端の2つのボタン（お問い合わせ・ご注文フォーム）：同じ形で色違い */
.global-nav li.nav-btn { display: flex; align-items: stretch; padding: 3px 0; }  /* 帯の上下いっぱい（上下3pxだけ空ける） */
.global-nav li.nav-btn.contact { margin-left: auto; }
.global-nav li.nav-btn a {
	display: flex; align-items: center; justify-content: center; padding: 0 25px 2px 23px; margin-left: 8px; border-radius: 6px; color: #fff; font-size: var(--fs-l); font-weight: 700; letter-spacing: 0; line-height: 1;  /* 文字を上下左右の真ん中に */
	box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.global-nav li.nav-btn a::before { display: none; }
.global-nav li.nav-btn a { text-shadow: none; font-family: var(--sans); }  /* ボタンはゴシック */
.global-nav li.nav-btn.contact a { background: var(--contact); }
.global-nav li.nav-btn.contact a:hover { background: var(--contact-dark); color: #fff; }
.global-nav li.nav-btn.order a { background: var(--order); }
.global-nav li.nav-btn.order a:hover { background: var(--order-dark); color: #fff; }
.nav-buttons { display: none; }

/* ---------- 2段組 ---------- */
.layout { display: grid; grid-template-columns: 250px 1fr; gap: 24px; padding-top: 28px; padding-bottom: 40px; }
.side { grid-column: 1; grid-row: 1; }
.main { grid-column: 2; grid-row: 1; min-width: 0; }

/* ---------- 左：カテゴリ ---------- */
.cat-head {
	isolation: isolate;
	position: relative; display: flex; align-items: center; height: 48px; padding-left: 18px; margin: 0;
	color: #fff; font-size: 21px; letter-spacing: .12em; border-radius: 10px 4px 0 0;  /* 左上だけ大きめに丸く */
	text-shadow: 0 1px 2px rgba(0, 0, 0, .3); overflow: hidden;
}

.cat-head::after {
	content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 76px; pointer-events: none; z-index: -1;  /* 文字の後ろ */
	background: var(--deco) right center / cover no-repeat;  /* 写真がほぼ全体見える大きさ（枠＝写真の幅） */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px); mask-image: linear-gradient(90deg, transparent 0, #000 22px);  /* 左端だけ短く溶け込ませる */
}
.cat-head.tools { --deco: url(../img/new/m2_syo_deco.jpg); }
.cat-head.yarn  { --deco: url(../img/new/m2_syo_ito_deco.jpg); }
.cat-head.dye   { --deco: url(../img/new/m2_syo_kusaki_deco.jpg); }
.cat-head.fiber { --deco: url(../img/new/m2_syo_sonota_deco.jpg); }
.cat-head.tools { --bar: var(--tools-bar); background: linear-gradient(90deg, var(--tools), #d1c274 60%, #f0e7c0); }
.cat-head.yarn  { --bar: var(--yarn-bar);  background: linear-gradient(90deg, var(--yarn), #969db4 60%, #e1dfea); }
.cat-head.dye   { --bar: var(--dye-bar);   background: linear-gradient(90deg, var(--dye), #b57960 60%, #ebd4c9); }
.cat-head.fiber { --bar: var(--fiber-bar); background: linear-gradient(90deg, var(--fiber), #a1b392 60%, #e3e9dc); }
.cat-list { list-style: none; margin: 0 0 18px; padding: 0; background: var(--card); border: 1px solid var(--line); border-top: 0; border-left: 4px solid var(--cat, var(--brown)); border-radius: 0 0 4px 0; }  /* 左にカテゴリの色の線 */
/* 見出しと左の線のつなぎ目の内側の角を丸く（カテゴリの色で内側の角を埋める） */
.cat-list { position: relative; }
.cat-list::before {
	content: ""; position: absolute; left: 0; top: 0; width: 5px; height: 5px; z-index: 1; pointer-events: none;
	background: radial-gradient(circle at 100% 100%, transparent 4.5px, var(--cat, var(--brown)) 5px);
}
.cat-list a { position: relative; display: flex; align-items: center; gap: 12px; padding: 6px 10px; text-decoration: none; color: var(--ink); font-size: var(--fs-l); transition: background-color .15s; }
.cat-list a::after { content: "›"; margin-left: auto; color: #b3aa9e; }
/* 項目の下に、写真アイコンの右から続く 3px の帯（区切り線を兼ねる） */
.cat-list a { background: linear-gradient(var(--cat-band, #e8e6e2), var(--cat-band, #e8e6e2)) no-repeat 46px 100% / calc(100% - 46px) 3px; }
/* マウスを乗せると：背景がほんのり色づき、帯が濃くなり、左端にカテゴリの色の線 */
.cat-list a:hover { background-color: var(--cat-soft, #f7f5f1); background-image: linear-gradient(var(--cat-band-hover, #bdb9b2), var(--cat-band-hover, #bdb9b2)); color: #000; }
.cat-list li:last-child a, .cat-list li:last-child a:hover { background-image: none; }  /* 最後の項目は枠の下線と二重にならないよう帯なし */
.cat-list a[aria-current="page"] { background-color: var(--cat-soft, #f7f5f1); font-weight: 700; }
.cat-head.tools + .cat-list { --cat: var(--tools); --cat-soft: #f6f3e6; }
.cat-head.yarn + .cat-list  { --cat: var(--yarn); --cat-soft: #eff0f4; }
.cat-head.dye + .cat-list   { --cat: var(--dye); --cat-soft: #f6ede9; }
.cat-head.fiber + .cat-list { --cat: var(--fiber); --cat-soft: #eff3ed; }
.cat-list img { width: 36px; height: 36px; object-fit: cover; border: 1px solid #ddd; border-radius: 3px; flex: none; }
.side-links { display: grid; gap: 8px; margin-bottom: 20px; }
.side-links a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; text-decoration: none; color: var(--ink); font-size: var(--fs-m); font-weight: 700; }
.side-links a::before { content: ""; width: 3px; height: 16px; background: var(--brown); }
.side-links a:hover { border-color: var(--brown); }
/* 商品メニューの下のカード（稲垣機料＋・Instagram・催し物案内・綿の種）
   商品メニューとははっきり離し、枠や影のない静かな見た目に */
/* 稲垣機料＋：ほかの案内とは別の、写真付きの独立した案内 */
.side-plus {
	display: block; margin: 56px 0 0; background: var(--card); border: 1px solid var(--line); border-top: 3px solid #5b8250;
	border-radius: 4px; overflow: hidden; text-decoration: none; color: var(--ink); transition: box-shadow .2s;
}
.side-plus:hover { box-shadow: var(--shadow); color: var(--ink); }
.side-plus img { display: block; width: 100%; aspect-ratio: 5 / 2; object-fit: cover; }
.side-plus-body { display: block; padding: 12px 14px 14px; }
.side-plus-label { display: inline-block; padding: 1px 8px; border-radius: 2px; background: #e8f0e4; color: #5b8250; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; }
.side-plus strong { display: block; margin-top: 6px; font-size: var(--fs-m); line-height: 1.4; }
.side-plus small { display: block; margin-top: 2px; color: #8a8178; font-size: var(--fs-xs); line-height: 1.5; }
.side-plus-note { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px dotted #d6cfc4; color: var(--ink); font-size: var(--fs-xs); line-height: 1.6; }
.side-plus-more { display: block; margin-top: 8px; color: #5b8250; font-size: var(--fs-s); font-weight: 700; }
.side-plus:hover .side-plus-more { text-decoration: underline; }

.side-banners {
	list-style: none; margin: 20px 0 0; padding: 4px 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
	background: var(--card); border: 1px solid var(--line); border-radius: 4px;  /* ひとまとまりの白い枠で囲む */
}
.side-card { min-width: 0; }
.side-card + .side-card { border-top: 1px dotted #d6cfc4; }
/* アイコン｜題名と説明｜› を上下中央でそろえ、各行の余白を同じに */
.side-card a { display: flex; align-items: center; gap: 12px; padding: 14px 0; text-decoration: none; color: var(--ink); }
.side-card a::after { content: "›"; flex: none; margin-left: auto; color: #b3aa9e; font-size: var(--fs-l); line-height: 1; }
/* 線のアイコン：項目ごとに色（薄い地に色の線、マウスを乗せるとその色の地に白） */
.side-icon {
	flex: none; width: 44px; height: 44px; padding: 9px; border-radius: 4px; background: var(--ic-soft); color: var(--ic);
	fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: background .2s, color .2s;
}
.side-card a:hover .side-icon { background: var(--ic); color: #fff; }
.side-card.insta { --ic: #c0456b; --ic-soft: #f9e6ec; }   /* Instagram：桜がかった赤 */
.side-card.event { --ic: #3f6aa6; --ic-soft: #e5ecf6; }   /* 催し物案内：藍 */
.side-card a > span { display: block; min-width: 0; font-weight: 700; font-size: var(--fs-s); line-height: 1.4; letter-spacing: .02em; }
.side-card small { display: block; margin-top: 2px; font-weight: 400; color: #8a8178; font-size: var(--fs-xs); line-height: 1.5; }

/* ---------- 見出し（波模様の帯） ---------- */
.band {
	display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 16px;
	background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--brown); border-radius: 0 4px 4px 0;  /* 瓦模様はメニュー帯だけに使う */
}
.band h2 { font-size: var(--fs-xl); letter-spacing: .08em; }
.band .en { font-size: var(--fs-xs); letter-spacing: .2em; color: #8a8178; text-transform: uppercase; }
.band .more { margin-left: auto; font-size: var(--fs-s); }
.section + .section { margin-top: 32px; }

/* ---------- TOP：看板と営業案内 ---------- */
.intro { display: grid; grid-template-columns: 197px 1fr; gap: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
/* 縦書きの看板：前の看板（img/index/top.jpg 250×494）の配置を、看板の幅に対する割合でそのまま再現。
   写真の上に細い灰色の枠、文字の後ろに半透明の白い帯、社名は極太の明朝。文字は画像ではなくページの文字 */
.intro .sign { --sw: 197px; position: relative; width: var(--sw); aspect-ratio: 250 / 494; align-self: start; margin-top: 12.9px;  /* 灰色の枠の上下を、営業のご案内の枠の上とカレンダーの下にそろえる */ container-type: inline-size; background: #fff; overflow: hidden; }
.intro .sign img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 0; }
.intro .sign::before {   /* 細い灰色の枠 */
	content: ""; position: absolute; left: calc(var(--sw) * .068); right: calc(var(--sw) * .068); top: calc(var(--sw) * .068); bottom: calc(var(--sw) * .068); border: 1px solid #a0a0a0; z-index: 2; pointer-events: none;
}
.intro .sign::after {    /* 文字の後ろの半透明の白い帯 */
	content: ""; position: absolute; left: 25.6cqw; right: 18cqw; top: 18cqw; bottom: 21.4cqw; z-index: 1;  /* 文字から上下左右とも 4cqw 外側 */
	background: rgba(255, 255, 255, .8);
}
.sign-text { position: absolute; inset: 0; margin: 0; z-index: 3; font-family: var(--serif); color: #111; line-height: 1; }
.sign-text span { position: absolute; writing-mode: vertical-rl; white-space: nowrap; }
.sign-text i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; inline-size: .55em; block-size: 1em; overflow: visible; }  /* 「・」の前後を詰める */
.sign-name { right: 26cqw; top: 22cqw; font-size: 18.4cqw; font-weight: 900; letter-spacing: .02em; }
.sign-sub { top: 26cqw; font-size: 8.6cqw; font-weight: 700; letter-spacing: .14em; }
.sign-sub:nth-child(2) { right: 48cqw; }
.sign-sub:nth-child(3) { right: 60cqw; }
.intro .lead { font-family: var(--serif); font-size: var(--fs-xl); font-weight: 700; line-height: 1.5; margin-bottom: 10px; letter-spacing: .06em; }
/* 営業のご案内：カレンダーと同じ角丸の枠。項目名は小さな札、TEL と FAX は横に並べる */
.intro-info { margin-bottom: 16.7px; }  /* 画面上15px（PCは90%表示） */
.intro-info h3, .intro-calendar h3 { font-family: var(--sans); font-size: var(--fs-s); letter-spacing: .02em; margin: 0 0 6px; }
.info-list { display: grid; grid-template-columns: 1fr 1fr; margin: 0; background: #fff; border: 1px solid #d9d3c9; border-radius: 2px; overflow: hidden; }
.info-list > div { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-top: 1px solid #ece8e1; }
.info-list > div:first-child { border-top: 0; }
.info-list > div.half { grid-column: auto; }
.info-list > div.half + div.half { border-left: 1px solid #ece8e1; }
.info-list dt { flex: none; min-width: 5em; padding: 2px 8px; border-radius: 1px; background: #f6f4f0; color: var(--muted); font-size: var(--fs-xs); text-align: center; line-height: 1.6; }
.info-list dd { margin: 0; line-height: 1.5; }
.info-list dd small { display: inline-block; font-size: var(--fs-s); color: var(--muted); }  /* 途中で折り返さない */
.info-list .tel { color: var(--ink); text-decoration: none; }
.intro .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.intro-calendar { margin-top: 0; }
.info-grid.single { grid-template-columns: 1fr; }
.catalog { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.catalog > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.catalog h3 { font-family: var(--sans); font-size: var(--fs-s); letter-spacing: .02em; margin-bottom: 8px; }
.catalog .btns { display: flex; flex-wrap: wrap; gap: 8px; }
.catalog .btn { padding: 6px 12px; font-size: var(--fs-s); }

/* ---------- TOP：お知らせ ---------- */
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.news-item { display: grid; grid-template-columns: 1fr 200px; gap: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; }
.news-item.no-thumb { grid-template-columns: 1fr; }
.news-item time { color: var(--red); font-size: var(--fs-s); font-weight: 700; }
.news-item h3 { font-size: var(--fs-l); margin: 2px 0 8px; }
.news-item h3 a { color: var(--ink); }
.news-item p { margin: 0 0 .4em; }
.news-item .thumb img { border-radius: 4px; border: 1px solid var(--line); width: 100%; }
.price-change { list-style: none; margin: 6px 0 0; padding: 0; }
.price-change li { padding: 3px 0; border-bottom: 1px dashed var(--line); }
.price-change .old { color: var(--muted); text-decoration: line-through; white-space: nowrap; }
.price-change .new { color: var(--red); font-weight: 700; white-space: nowrap; }

/* ---------- TOP：営業日・アクセス ---------- */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.box h3 { font-size: var(--fs-l); margin-bottom: 12px; }
.calendars { display: flex; flex-wrap: wrap; gap: 14px; }
/* 営業日カレンダー（js/calendar.js が作る）：幅いっぱい・外枠は角丸。マス目は淡い線、休みと今日は角の丸い四角 */
.calendars { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cal { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #d9d3c9; border-radius: 2px; overflow: hidden; font-size: var(--fs-s); line-height: 1; }
.cal th, .cal td { padding: 0; text-align: center; font-weight: 400; border-right: 1px solid #ece8e1; border-bottom: 1px solid #ece8e1; }
.cal tr > :last-child { border-right: 0; }
.cal tbody tr:last-child td { border-bottom: 0; }
.cal th.title { padding: 7px 0; background: #eef8f8; color: #3d4a4a; font-size: var(--fs-s); font-weight: 700; letter-spacing: .06em; border-right: 0; border-bottom: 1px solid #d9d3c9; }
.cal thead tr + tr th { padding: 5px 0; background: #f6f4f0; color: #6f665d; font-size: var(--fs-xs); }
.cal thead tr + tr th.w0 { background: #fde8ea; color: #d4142a; }
.cal thead tr + tr th.w6 { background: #ececf7; color: #4b55a3; }
.cal td { height: 28px; padding: 2px; }
.cal td span { display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 1px; }
.cal td.off span { background: #fde0e3; color: #d4142a; }
.cal td.today span { box-shadow: inset 0 0 0 2px #3d352e; font-weight: 700; }

/* ---------- TOP：関連サイト ---------- */
.link-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.link-cards a { display: block; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); }
.link-cards a:hover { box-shadow: var(--shadow); }
.link-cards img { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; }
.link-cards span { display: block; padding: 10px 14px; font-weight: 700; }
.link-cards small { display: block; font-size: var(--fs-s); font-weight: 400; color: var(--muted); }

/* ---------- フッター ---------- */
.site-footer { background: var(--brown); color: #ddd6cb; font-size: var(--fs-s); }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-top: 36px; padding-bottom: 28px; }
.site-footer .name { font-family: var(--serif); font-size: var(--fs-l); font-weight: 700; color: #fff; letter-spacing: .12em; margin-bottom: 8px; }
.site-footer h3 { font-family: var(--sans); font-size: var(--fs-xs); color: #b7ada0; margin-bottom: 6px; letter-spacing: .1em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 2px 0; }
.site-footer a { color: #fff; }
.copyright { background: #665e5b; color: #fff; text-align: center; font-size: var(--fs-xs); padding: 10px 16px; margin: 0; }

/* =========================================================
   下層ページ（商品価格表・ご注文方法・会社概要・アクセスなど）
   ========================================================= */
.breadcrumb { margin: 0 0 10px; font-size: var(--fs-xs); color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb span { margin: 0 6px; }
.page-title { margin: 0 0 20px; padding: 0 2px 8px; line-height: 1.5; border-bottom: 2px solid var(--brown); font-size: 26px; letter-spacing: .1em; }
.band.tools { border-left-color: var(--tools); } .band.yarn { border-left-color: var(--yarn); }
.band.dye { border-left-color: var(--dye); }     .band.fiber { border-left-color: var(--fiber); }

/* 白い枠の本文 */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 2px; padding: 20px 24px; }
.card + .card { margin-top: 14px; }
.card h3 { margin: 0 0 10px; padding-left: 10px; border-left: 3px solid var(--brown); font-size: var(--fs-l); }
.card h4 { margin: 18px 0 6px; font-size: var(--fs-m); font-weight: 700; }
.card h4:first-child { margin-top: 0; }
.card p { margin: 0 0 .6em; }
.card ul { margin: 0 0 .6em; padding-left: 1.3em; }
.card li { margin: 2px 0; }
.card figure { margin: 14px 0 0; }
.card figure img { border: 1px solid var(--line); }
.card figcaption { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.formula { display: inline-block; margin: 2px 0 6px; padding: 3px 10px; background: #f6f4f0; border-radius: 2px; font-weight: 700; }
.c-red { color: var(--red); } .c-blue { color: #0b5cad; }
.small { font-size: var(--fs-s); }
.tel-big { font-size: var(--fs-l); font-weight: 700; }
/* お支払方法：前のページの色ラベル（橙・緑・青）を引き継いだカード */
.pay-points { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: pt; }
.card .pay-points li { display: flex; gap: 8px; align-items: baseline; margin: 0 0 6px; counter-increment: pt; }
.pay-points li::before { content: counter(pt); flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--brown); color: #fff; font-size: var(--fs-xs); font-weight: 700; line-height: 1.6em; text-align: center; }
.card .pay-points p { margin: 0; }
.free-badge { display: inline-block; margin-right: 2px; padding: 0 10px; border-radius: 6px; background: #0b5cad; color: #fff; font-weight: 700; }
.pay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pay-1 { --pay: #dc8a4f; --pay-soft: #fdf3eb; }   /* 橙 */
.pay-2 { --pay: #6f9e24; --pay-soft: #f2f7e9; }   /* 緑 */
.pay-3 { --pay: #2286b3; --pay-soft: #e9f4f9; }   /* 青 */
.pay-tile { display: flex; flex-direction: column; border: 1px solid var(--pay); border-radius: 4px; overflow: hidden; background: #fff; }
.card .pay-tile h4 { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; background: var(--pay); color: #fff; font-size: var(--fs-l); line-height: 1.3; }
.pay-tile h4 small { display: block; font-size: var(--fs-xs); }
.pay-icon { flex: none; width: 36px; height: 36px; padding: 6px; border-radius: 50%; background: #fff; color: var(--pay); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pay-body { flex: 1; padding: 12px 14px 14px; }
.card .pay-body p:last-child { margin-bottom: 0; }
.card .eq { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 3px; margin: 0 0 12px; padding: 8px 10px; border-radius: 3px; background: var(--pay-soft); font-size: var(--fs-xs); font-weight: 700; line-height: 1.4; }
.eq span { padding: 2px 7px; border-radius: 2px; background: #fff; border: 1px solid #ddd6cc; }
.eq .eq-total { background: var(--pay); border-color: var(--pay); color: #fff; }
.eq .pack { color: #0b5cad; border-color: #9cbde0; }
.eq .op { padding: 0; border: 0; background: none; color: var(--muted); }
.bank-logo img { display: block; }
.card .pay-logos { margin: 12px 0 0; }
/* 使えるカード（画像ではなく文字で） */
.brands { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding-top: 12px; border-top: 1px dotted #c9c3ba; }
.brands-icon { flex: none; width: 26px; height: 26px; margin-top: 1px; color: var(--pay); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card .brand-list { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.card .brand-list li { margin: 0; padding: 2px 8px; border: 1px solid #ddd6cc; border-radius: 3px; background: #faf9f6; font-size: var(--fs-xs); font-weight: 700; line-height: 1.5; color: #4a423a; white-space: nowrap; }
.card .pay-logos img { display: block; max-width: 100%; height: auto; border: 0; }

/* 会社概要の表 */
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { padding: 8px 6px; border-bottom: 1px solid #ece8e1; text-align: left; vertical-align: top; }
.spec th { width: 9em; color: var(--muted); font-weight: 400; white-space: nowrap; }

/* 地図（埋め込みは画面幅に合わせる） */
.map-embed { position: relative; aspect-ratio: 16 / 10; margin-top: 10px; border: 1px solid var(--line); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 商品価格表 */
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.toc a { display: block; padding: 5px 12px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--toc, var(--brown)); border-radius: 2px; color: var(--ink); text-decoration: none; font-size: var(--fs-s); font-weight: 700; }
.toc a:hover { background: #f7f5f1; }
.toc .tools a { --toc: var(--tools); } .toc .yarn a { --toc: var(--yarn); } .toc .dye a { --toc: var(--dye); } .toc .fiber a { --toc: var(--fiber); }
.price-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); font-size: var(--fs-s); }
.price-table thead th { padding: 7px 10px; background: #f6f4f0; color: var(--muted); font-weight: 400; text-align: left; border-bottom: 1px solid var(--line); }
.price-table td, .price-table tbody th { padding: 7px 10px; border-bottom: 1px solid #ece8e1; text-align: left; vertical-align: top; }
.price-table tbody th { font-weight: 400; color: var(--muted); white-space: nowrap; width: 6.5em; }
.price-table .unit { white-space: nowrap; width: 4.5em; }
.price-table .price { white-space: nowrap; width: 7.5em; text-align: right; font-weight: 700; }
.price-table thead .price { text-align: right; }
.price-table .cat td { padding: 9px 10px 7px; background: #fbfaf7; font-family: var(--serif); font-weight: 700; font-size: var(--fs-m); color: var(--ink); border-bottom: 1px solid var(--line); }
.price-table a { color: var(--link); }
.price-table tbody tr:not(.cat):hover { background: #fbfaf7; }
.section + .section.price-sec { margin-top: 36px; }
.back-toc { margin: 8px 0 0; text-align: right; font-size: var(--fs-xs); }

@media (max-width: 767px) {
	.page-title { padding: 0 2px 6px; font-size: 21px; }
	.card { padding: 16px; }
	.pay-grid { grid-template-columns: 1fr; }
	.price-table { font-size: 13px; }
	.price-table td, .price-table tbody th, .price-table thead th { padding: 6px 6px; }
	.price-table tbody th { width: auto; }
	.price-table .unit { width: auto; }
	.price-table .price { width: auto; }
	.spec th { width: 6em; }
}

/* ページ上部へ戻る */
.to-top { position: fixed; right: 14px; bottom: 14px; z-index: 40; text-decoration: none; opacity: 0; pointer-events: none; transition: opacity .3s; }
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top span { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--brown); color: #fff; font-size: var(--fs-xs); line-height: 1.1; text-align: center; box-shadow: var(--shadow); }

/* PC も 100% の大きさで表示する（以前の 90% 縮小はやめた） */

/* 少し狭いモニター（1024〜1199px）：メニュー帯を1行に収める */
@media (min-width: 1024px) and (max-width: 1199px) {
	.global-nav li a { padding: 4px 16px 4px 22px; letter-spacing: 0; }
	.global-nav li a::before { left: 8px; }
	.global-nav li.nav-btn a { padding: 0 17px 2px 15px; margin-left: 6px; }
}

/* =========================================================
   タブレット・スマホ（〜1023px）
   ========================================================= */
@media (max-width: 1023px) {
	:root { --fs-xl: 20px; --fs-xxl: 24px; }
	.wrap { padding: 0 16px; }
	.site-header .wrap { grid-template-columns: 1fr auto; min-height: 0; padding-top: 10px; padding-bottom: 10px; }
	.logo .en { display: none; }
	.header-photo { min-height: 64px; background-size: auto 64px; width: 200px; }
	.header-contact { display: none; }

	.nav-bar .wrap { padding: 0; min-height: 0; }
	.nav-buttons { display: flex; width: 100%; }
	.nav-buttons > * {
		flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
		color: var(--brown); text-decoration: none; font-family: var(--sans); font-size: var(--fs-m); font-weight: 700;
		background: none; border: 0; border-right: 1px solid rgba(0, 0, 0, .12); cursor: pointer;
	}
	.nav-buttons > *:last-child { border-right: 0; }
	.nav-buttons .order { background: var(--order); color: #fff; margin: 5px; min-height: 34px; border-radius: 6px; border-right: 0; font-size: var(--fs-s); }
	.nav-buttons svg { width: 18px; height: 18px; fill: currentColor; }
	.menu-icon { display: inline-flex; flex-direction: column; gap: 4px; }
	.menu-icon i { display: block; width: 18px; height: 2px; background: var(--brown); }

	.global-nav { display: none; position: fixed; left: 0; right: 0; top: var(--nav-bottom, 44px); bottom: 0; overflow-y: auto; background: #fcfcfa; padding: 0 16px 24px; z-index: 29; border-top: 1px solid #d9d3c9; }
	.global-nav.open { display: block; }
	body.menu-open { overflow: hidden; }
	body.menu-open .to-top { display: none; }
	.global-nav ul { flex-direction: column; }
	.global-nav li a { padding: 14px 4px 14px 22px; border-bottom: 1px solid rgba(0, 0, 0, .1); font-size: var(--fs-l); }
	.global-nav li a::before { left: 4px; }
	.global-nav li a[aria-current="page"] { box-shadow: none; }
	.global-nav .sp-only { display: block; }
	.global-nav li.nav-btn.order { display: none; }
	.global-nav li.nav-btn, .global-nav li.nav-btn.contact { display: block; margin-left: 0; }
	.global-nav li.nav-btn.contact a { margin: 0; padding: 14px 4px 14px 22px; border-radius: 0; background: none; color: var(--brown); box-shadow: none; font-family: var(--serif); font-size: var(--fs-l); font-weight: 500; }
	.global-nav li.nav-btn.contact a::before { display: block; }
	.global-nav li.nav-btn.contact a:hover { background: rgba(255, 255, 255, .6); color: #000; }
	.intro .sp-only { display: inline-flex; }
	.intro .actions.sp-only { display: flex; }

	.layout { grid-template-columns: 1fr; gap: 0; padding-top: 20px; }
	.main { grid-column: 1; grid-row: 1; }
	.side { grid-column: 1; grid-row: 2; margin-top: 40px; }
	.cat-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
	.side-links { grid-template-columns: 1fr 1fr; }
	.side-banners { grid-template-columns: minmax(0, 1fr); }

	.intro { grid-template-columns: 200px 1fr; }
	.intro .sign { --sw: 200px; width: 200px; }
	.site-footer .wrap { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   スマホ（〜767px）
   ========================================================= */
@media (max-width: 767px) {
	:root { --fs-xxl: 22px; }
	.site-header .wrap { grid-template-columns: 1fr; }
	.header-photo { display: none; }
	.logo .name { letter-spacing: .1em; }
	.intro { grid-template-columns: 1fr; padding: 18px; }
	.intro .sign { --sw: 200px; width: 200px; justify-self: center; margin-top: 0; }
	.intro .lead { font-size: var(--fs-l); text-align: center; }
	.catalog { grid-template-columns: 1fr; }
	.info-list > div.half { grid-column: 1 / -1; }
	.info-list > div.half + div.half { border-left: 0; border-top: 1px solid #ece8e1; }
	.calendars { grid-template-columns: 1fr; }
	.news-item { grid-template-columns: 1fr; padding: 16px; }
	.news-item .thumb { max-width: 240px; }
	.info-grid, .link-cards { grid-template-columns: 1fr; }
	.cat-groups { grid-template-columns: 1fr; }
	.side-links { grid-template-columns: 1fr; }
	.side-banners { grid-template-columns: minmax(0, 1fr); }
	.site-footer .wrap { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- ご注文方法：電話・FAX・メール ---------- */
.order-ways { list-style: none; margin: 0; padding: 0; }
.card .order-ways li.way { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; margin: 0; padding: 16px 0; border-top: 1px dotted #c9c3ba; }
.card .order-ways li.way:first-child { border-top: 0; padding-top: 0; }
.card .order-ways li.way:last-child { padding-bottom: 0; }
.order-ways h4 { margin-top: 2px; }
.order-ways p:last-child { margin-bottom: 0; }
.way-icon {
	width: 52px; height: 52px; padding: 11px; border-radius: 4px; background: var(--ic-soft); color: var(--ic);
	fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.way.tel  { --ic: #a34734; --ic-soft: #f6e6e1; }   /* 電話：ご注文フォームと同じ赤茶 */
.way.fax  { --ic: #586988; --ic-soft: #e7ebf2; }   /* FAX：藍鼠 */
.way.mail { --ic: #5b8250; --ic-soft: #e7efe3; }   /* メール：緑 */
@media (max-width: 600px) {
	.card .order-ways li.way { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; }
	.way-icon { width: 42px; height: 42px; padding: 8px; }
}

/* ---------- 梱包費・送料・発送でのお願い ---------- */
.way.pack     { --ic: #b09935; --ic-soft: #f5f0dc; }   /* 金茶 */
.way.fee      { --ic: #0b5cad; --ic-soft: #e6eef8; }   /* 梱包費の青 */
.way.ship-way { --ic: #6f9e24; --ic-soft: #eef5e3; }   /* 緑 */
.way.date     { --ic: #dc8a4f; --ic-soft: #fbeee3; }   /* 橙 */
.way.ask      { --ic: #a34734; --ic-soft: #f6e6e1; }   /* 赤茶 */
.ship .way > div > * + * { margin-top: 10px; }
.card .ship p { margin-bottom: 0; }
/* 2つを並べて比べる箱 */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 460px; }
.cmp { display: flex; flex-direction: column; align-items: center; padding: 8px 10px 10px; border: 1px solid #ddd6cc; border-radius: 4px; background: #faf9f6; text-align: center; }
.cmp-head { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.cmp-val { white-space: nowrap; font-size: var(--fs-xl); font-weight: 700; line-height: 1.3; color: var(--ic); }
.cmp.free { border-color: var(--ic); background: var(--ic-soft); }
/* 配送会社 */
.card .carriers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 460px; margin: 0; padding: 0; list-style: none; }
.card .carriers li { margin: 0; padding: 8px 6px; border-radius: 4px; background: var(--cr); color: #fff; font-weight: 700; text-align: center; white-space: nowrap; }
.carriers .c-post   { --cr: #b5533f; }   /* 赤茶 */
.carriers .c-yamato { --cr: #6f9e24; }   /* 緑 */
.carriers .c-sagawa { --cr: #2286b3; }   /* 青 */
.card .ship .hurry { margin-top: 6px; font-size: var(--fs-s); }
.hurry b { color: #6f9e24; }
.card .note-box { padding: 8px 12px; border-left: 3px solid #c9c3ba; background: #faf9f6; }
/* できる・できない */
.yesno { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.yesno > div { padding: 12px 14px; border-radius: 4px; }
.card .yesno > div > * + * { margin-top: 8px; }
.card .yn-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-m); }
.card .yn-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.card .yn-chips li { margin: 0; padding: 1px 8px; border-radius: 3px; background: #fff; border: 1px solid #ddd6cc; font-size: var(--fs-xs); font-weight: 700; line-height: 1.6; }
.yes .yn-chips li { border-color: #b9d39a; color: #4f7a12; }
.yesno .yes { background: #eef5e3; border: 1px solid #b9d39a; }
.yesno .no { background: #f4f2ee; border: 1px solid #ddd6cc; }
.yn-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: 700; line-height: 26px; text-align: center; }
.yes .yn-mark { background: #6f9e24; }
.no .yn-mark { background: #9a9187; }
.card .checks { margin: 0; padding: 0; list-style: none; }
.card .checks li { position: relative; margin: 0 0 4px; padding-left: 1.5em; }
.checks li::before { content: ""; position: absolute; left: .2em; top: .45em; width: .45em; height: .75em; border: solid var(--ic); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 600px) {
	.yesno { grid-template-columns: 1fr; }
	.cmp-val { font-size: var(--fs-l); }
	.card .carriers { grid-template-columns: 1fr; max-width: 240px; }
}

/* 使えるカードのロゴ（4つずつ×3段） */
.card .card-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; max-width: 260px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px dotted #c9c3ba; list-style: none; }
.card .card-logos li { display: flex; align-items: center; justify-content: center; height: 38px; margin: 0; border: 1px solid #e3ded6; border-radius: 3px; background: #fff; }
.card-logos img { display: block; max-width: 90%; height: auto; }

/* ---------- 商品価格表：4つの大分類 ---------- */
.toc-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.toc-groups .cat-head { height: 56px; border-radius: 10px 4px 4px 4px; font-weight: 700; text-decoration: none; transition: filter .2s; }
.toc-groups .cat-head:hover { filter: brightness(1.08); }
.group-head { margin: 34px 0 14px; border-radius: 10px 4px 4px 4px; font-weight: 700; }
.band h3 { margin: 0; font-size: var(--fs-l); letter-spacing: .08em; }
@media (max-width: 767px) {
	.toc-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.toc-groups .cat-head { height: 50px; padding-left: 12px; font-size: 18px; letter-spacing: .06em; }
}
/* 目次から飛んだとき、見出しがメニュー帯に隠れないように */
.group-head, .price-sec { scroll-margin-top: 80px; }

/* 節見出し：帯はなし。細い灰色の下線を引き、左端だけ4つの分類の色（明るくしたもの） */
.band { position: relative; padding: 4px 0 0; background: none; border: 0; border-bottom: 1px solid #d8d1c6; border-radius: 0; }
/* 4色は見出しの文字（英語も含む）の長さに合わせる */
.band { align-items: flex-end; flex-wrap: nowrap; }
.band .more { flex: none; }
.band-ttl { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 14px; padding-bottom: 12px; }
.band .more { padding-bottom: 10px; }
.band-ttl::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 6px; background: linear-gradient(90deg, #d2bd5c 0 25%, #8195b8 25% 50%, #c0664a 50% 75%, #84ad76 75% 100%); }
/* 分類の中の見出し（価格表の綿糸など）は、その分類の色の濃淡 */
.band.yarn .band-ttl::after { background: linear-gradient(90deg, #6f84ab 0 25%, #8195b8 25% 50%, #a9b6cf 50% 75%, #d3dae7 75% 100%); }
.band.fiber .band-ttl::after { background: linear-gradient(90deg, #6f9a61 0 25%, #84ad76 25% 50%, #a8c69c 50% 75%, #d0e0c8 75% 100%); }

/* 見出しの前の黒い四角（■） */
.band-ttl h2::before, .band-ttl h3::before { content: ""; display: inline-block; width: 12px; height: 12px; margin: 0 10px 0 1px; vertical-align: 1px; background: var(--ink, #2b2522); }

/* ページ見出し：節の見出し（お知らせなど）と同じ形。細い灰色の下線＋文字の長さの4色 */
.page-title { border-bottom: 1px solid #d8d1c6; padding: 0; }
.pt-ttl { position: relative; display: inline-block; padding-bottom: 12px; }
.pt-ttl::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 6px; background: linear-gradient(90deg, #d2bd5c 0 25%, #8195b8 25% 50%, #c0664a 50% 75%, #84ad76 75% 100%); }
/* 4色の線の右端：上の角を丸くして、下の細い灰色の線へなめらかにつなぐ */
.band-ttl::after, .pt-ttl::after { border-top-right-radius: 6px 6px; }
/* 4色の線を文字の右端より少し先まで伸ばす（画面上で約7px。PCは90%表示なので 8px） */
.band-ttl::after, .pt-ttl::after { right: -8px; }

/* アクセスの地図（SVGで描き直し）。スマホでは文字が小さくなりすぎないよう横にスクロール */
.shop-map { margin-top: 10px; border: 1px solid var(--line); border-radius: 4px; overflow-x: auto; }
.shop-map svg { display: block; width: 100%; min-width: 640px; height: auto; font-family: "Noto Sans JP", sans-serif; }

/* ---------- 商品一覧（手織機など） ---------- */
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 12px 0 0; padding: 0; list-style: none; }
.product-card { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.product-card:hover { border-color: #bdb4a6; box-shadow: 0 3px 10px rgba(60, 45, 30, .08); }
.product-card figure { margin: 0; border-bottom: 1px solid #ece8e1; background: #fff; }
.product-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.pc-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.pc-body h3 { margin: 0 0 8px; font-family: "Noto Serif JP", serif; font-size: var(--fs-l); font-weight: 700; letter-spacing: .06em; }
.pc-badge { display: inline-block; margin-left: 10px; padding: 1px 8px; border-radius: 3px; background: #d9412b; color: #fff; font-family: "Noto Sans JP", sans-serif; font-size: var(--fs-xs); letter-spacing: 0; vertical-align: 3px; }
.pc-body p { margin: 0 0 10px; font-size: var(--fs-s); line-height: 1.75; }
.pc-price { margin-top: auto !important; font-size: var(--fs-l) !important; font-weight: 700; }
.pc-more { align-self: flex-end; font-size: var(--fs-s); color: #0b5cad; }
.product-card:hover .pc-more { text-decoration: underline; }
/* 関連ページへのカード（一式価格表など） */
.link-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.link-cards a { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; color: var(--ink); text-decoration: none; }
.link-cards a:hover { border-color: #bdb4a6; }
.link-cards img { display: block; width: 100%; height: 96px; object-fit: contain; background: #fff; border-bottom: 1px solid #ece8e1; }
.link-cards span { padding: 10px 14px 12px; font-size: var(--fs-s); line-height: 1.7; }
.link-cards b { display: block; font-size: var(--fs-m); }
@media (max-width: 600px) {
	.product-grid, .link-cards { grid-template-columns: 1fr; }
}

/* ---------- 手織機の詳しいページ ---------- */
.loom-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.loom-photo { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.loom-photo img { display: block; width: 100%; height: auto; }
.loom-photo figcaption { padding: 0 14px 10px; text-align: right; font-size: var(--fs-xs); color: var(--muted); }
.loom-buy { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 18px; }
.price-box { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.price-box thead th { padding: 0 0 6px; text-align: left; font-weight: 400; color: var(--muted); font-size: var(--fs-xs); border-bottom: 1px solid var(--line); }
.price-box thead th:last-child { text-align: right; }
.price-box tbody th { padding: 10px 8px 10px 0; text-align: left; font-weight: 700; border-bottom: 1px solid #ece8e1; }
.price-box tbody td { padding: 10px 0; text-align: right; white-space: nowrap; font-weight: 700; font-size: var(--fs-l); border-bottom: 1px solid #ece8e1; }
.period { margin: 12px 0 0; font-size: var(--fs-s); }
.period span { margin-right: 6px; color: var(--muted); font-size: var(--fs-xs); }
.loom-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 0; }
.loom-btns a { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 6px; color: #fff; font-weight: 700; text-decoration: none; }
.loom-btns .btn-order { background: #a34734; } .loom-btns .btn-contact { background: #4a423a; }
.loom-btns a:hover { filter: brightness(1.1); }
.loom-tel { margin: 14px 0 0; padding-top: 12px; border-top: 1px dotted #c9c3ba; font-size: var(--fs-s); text-align: center; line-height: 1.7; }
.loom-tel b { font-size: var(--fs-l); } .loom-tel b a { color: inherit; text-decoration: none; }
.loom-tel span { display: block; font-size: var(--fs-xs); color: var(--muted); }
.loom-lead { margin-bottom: 8px; }
.media { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; align-items: start; padding: 18px 0; border-top: 1px dotted #c9c3ba; }
.card > .media:first-child { padding-top: 0; border-top: 0; }
.media figure { margin: 0; }
.media img { display: block; width: 100%; height: auto; border: 1px solid #ece8e1; }
.media h3 { margin: 0 0 8px; font-size: var(--fs-m); font-weight: 700; }
.media p { margin: 0 0 .7em; }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 18px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px dotted #c9c3ba; }
.card .photo-grid li { margin: 0; }
.photo-grid figure { margin: 0; } .photo-grid img { display: block; width: 100%; height: auto; }
.photo-grid figcaption { margin-top: 6px; font-size: var(--fs-s); color: var(--ink); }
.spec-img { margin: 14px 0 0; } .spec-img img { border: 0 !important; }
.made-to-order { margin-bottom: 18px; }
.made-to-order h3 { margin: 0 0 8px; font-family: "Noto Serif JP", serif; font-size: var(--fs-l); font-weight: 700; }
.work-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 8px; padding: 0; list-style: none; }
.card .work-photos li { margin: 0; } .work-photos img { display: block; width: 100%; height: auto; border-radius: 3px; }
.opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.card .opt-grid li { margin: 0; padding: 12px; border: 1px solid #ece8e1; border-radius: 4px; background: #fff; }
.opt-grid figure { margin: 0 0 10px; } .opt-grid img { display: block; width: 100%; height: auto; }
.opt-grid h3 { margin: 0 0 6px; font-size: var(--fs-m); font-weight: 700; }
.opt-grid p { margin: 0 0 .5em; font-size: var(--fs-s); }
.opt-link { margin: 14px 0 0; }
@media (max-width: 767px) {
	.loom-hero, .media { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.opt-grid, .photo-grid { grid-template-columns: 1fr; }
}
.card .photo-grid, .card .work-photos, .card .opt-grid { padding-left: 0; }
/* オプションのカード：写真は枠なしでカードの上いっぱいに */
.card .opt-grid li { padding: 0; overflow: hidden; }
.card .opt-grid figure { margin: 0; }
.card .opt-grid figure img { border: 0; aspect-ratio: 4 / 3; object-fit: cover; }
.opt-grid h3 { margin: 12px 14px 6px; }
.opt-grid p { margin: 0 14px .5em; }
.opt-grid li > p:last-child { margin-bottom: 14px; }
/* オプション：カードの外枠はなくし、写真のまわりの枠だけ残す */
.card .opt-grid li { border: 0; border-radius: 0; background: none; overflow: visible; }
.card .opt-grid figure img { border: 1px solid var(--line); }
.opt-grid h3 { margin: 10px 0 6px; }
.opt-grid p { margin: 0 0 .5em; }
.opt-grid li > p:last-child { margin-bottom: 0; }
.card .opt-grid { row-gap: 26px; }
/* オプション：カードの枠と写真の枠の2つ */
.card .opt-grid li { padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.card .opt-grid { row-gap: 16px; }
.opt-free { display: inline-block; margin-left: 10px; padding: 1px 10px; border-radius: 6px; background: #0b5cad; color: #fff; font-family: "Noto Sans JP", sans-serif; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; vertical-align: 2px; }

/* 織機のサイズ/付属品：左に寸法の表、右に付属品 */
.spec-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.spec-split .spec { margin: 0; }
.spec-acc { padding: 14px 16px; background: #faf9f6; border: 1px solid var(--line); border-radius: 4px; }
.spec-acc h3 { margin: 0 0 8px; font-size: var(--fs-m); font-weight: 700; }
.card .spec-acc ul { margin: 0; padding: 0; list-style: none; }
.card .spec-acc li { position: relative; margin: 0 0 4px; padding-left: 1.1em; }
.spec-acc li::before { content: "●"; position: absolute; left: 0; font-size: .7em; top: .45em; color: var(--muted); }
.spec-acc .small { margin: 8px 0 0; }
.spec-acc .spec-img { margin: 12px 0 0; }
.spec-acc .spec-img img { display: block; max-width: 100%; height: auto; }
@media (max-width: 767px) { .spec-split { grid-template-columns: 1fr; } }
/* 上段：右の価格の囲みの下端を、左の織機の写真の下端にそろえる */
.loom-hero { align-items: stretch; }
.loom-photo { display: flex; flex-direction: column; justify-content: center; }
.loom-buy { display: flex; flex-direction: column; }
.loom-buy .loom-tel { margin-top: auto; }
.loom-buy .loom-btns { margin-bottom: 16px; }
/* 付属品の囲みを、左の寸法の表と同じ高さに */
.spec-split { align-items: stretch; }
.spec-acc { display: flex; flex-direction: column; }
.spec-acc .spec-img { margin-top: auto; padding-top: 12px; }

/* サイズを見て分かる形に：奥行・高さ・横巾は大きな数字、ほかは札 */
.dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.card .dims li { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 14px 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: 4px; text-align: center; }
.dims svg { width: 34px; height: 34px; margin-bottom: 4px; fill: none; stroke: #a34734; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dim-label { font-size: var(--fs-xs); color: var(--muted); letter-spacing: .1em; }
.dims b { font-size: var(--fs-xl); font-weight: 700; line-height: 1.3; white-space: nowrap; }
.dims small { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.spec-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.spec-chips > div { display: flex; flex-direction: column; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-left: 3px solid #c9b58a; border-radius: 3px; }
.spec-chips dt { font-size: var(--fs-xs); color: var(--muted); }
.spec-chips dd { margin: 0; font-weight: 700; }
@media (max-width: 600px) {
	.dims b { font-size: var(--fs-l); }
	.spec-chips { grid-template-columns: 1fr; }
}
.card .dims { padding-left: 0; }
.spec-chips > .wide { grid-column: 1 / -1; }
/* 札は1列に並べ、項目名を左・内容を右に */
.spec-chips { grid-template-columns: 1fr; gap: 6px; }
.spec-chips > div { flex-direction: row; align-items: baseline; gap: 12px; padding: 9px 12px; }
.spec-chips dt { flex: none; width: 4.5em; }

/* 手織機の一覧：先頭のマスに一式価格表・ロクロの2枚を縦に重ねる */
.link-stack .link-cards { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; height: 100%; }
.link-stack .link-cards a { justify-content: center; }
.link-stack .link-cards img { height: auto; flex: 1; min-height: 90px; max-height: 180px; }
/* 一例価格表・ロクロ（サブの案内）：淡いベージュの囲みにまとめ、各カードは画像の下に文字の2段 */
.product-grid > .link-stack { padding: 12px; background: #f3efe7; border-radius: 4px; }
.link-stack .link-cards { grid-template-rows: 1fr 1fr; gap: 12px; height: 100%; }
.link-stack .link-cards a { flex-direction: column; justify-content: flex-start; border: 0; background: #fff; }
.link-stack .link-cards img { flex: 1; width: 100%; min-height: 70px; max-height: none; height: auto; object-fit: contain; padding: 8px 12px; box-sizing: border-box; }
.link-stack .link-cards span { font-size: var(--fs-xs); }
.link-stack .link-cards b { font-size: var(--fs-s); }

/* ---------- 手織機 一例・一式価格表 ---------- */
.set-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.set-intro figure { margin: 0; } .set-intro img { display: block; width: 100%; height: auto; }
.set-total { margin-top: 14px !important; padding: 12px 16px; background: #faf7f0; border: 1px solid #e3d9c4; border-radius: 4px; font-size: var(--fs-xxl); font-weight: 700; line-height: 1.3; }
.set-total span { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.set-total small { margin-left: 4px; font-size: var(--fs-s); }
.set-table tbody th { width: 3em; text-align: center; font-size: var(--fs-m); color: #a34734; }
.set-table tfoot th, .set-table tfoot td { padding: 12px 10px; background: #faf7f0; border-top: 2px solid #c9b58a; font-weight: 700; font-size: var(--fs-l); }
.set-table tfoot th { text-align: right; }
.hosoku { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: h; display: grid; gap: 10px; }
.card .hosoku li { position: relative; margin: 0; padding: 10px 14px 10px 46px; background: #faf9f6; border: 1px solid #ece8e1; border-radius: 4px; counter-increment: h; }
.hosoku li::before { content: counter(h); position: absolute; left: 12px; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--brown); color: #fff; font-size: var(--fs-xs); font-weight: 700; line-height: 24px; text-align: center; }
.hosoku b { display: block; margin-bottom: 2px; }
.card .hosoku p { margin: 0; font-size: var(--fs-s); }
.orico-card { display: flex; align-items: center; gap: 18px; padding: 14px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; color: var(--ink); text-decoration: none; }
.orico-card:hover { border-color: #bdb4a6; }
.orico-card img { flex: none; width: 150px; height: auto; }
.orico-card span { flex: 1; font-size: var(--fs-s); line-height: 1.8; }
.orico-card i, .rokuro-list i { font-style: normal; font-size: 28px; color: #a34734; }
.contact-box { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; }
.contact-box .loom-tel { margin: 0; padding: 0; border: 0; }
.contact-box .loom-btns { margin: 0; }
/* 並ロクロ・二段ロクロ */
.rokuro-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.rokuro-list a { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 30px; gap: 18px; align-items: center; padding: 14px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; color: var(--ink); text-decoration: none; }
.rokuro-list a:hover { border-color: #bdb4a6; box-shadow: 0 3px 10px rgba(60, 45, 30, .08); }
.rokuro-list figure { margin: 0; } .rokuro-list img { display: block; width: 100%; height: auto; }
.rokuro-list b { display: block; margin-bottom: 4px; font-family: "Noto Serif JP", serif; font-size: var(--fs-xl); }
.rokuro-list span { font-size: var(--fs-s); }
@media (max-width: 767px) {
	.set-intro, .contact-box { grid-template-columns: 1fr; }
	.rokuro-list a { grid-template-columns: 1fr 24px; }
	.rokuro-list figure { grid-column: 1 / -1; }
	.orico-card { flex-wrap: wrap; }
}
.set-table thead th { white-space: nowrap; }

/* ---------- 並ロクロ・二段ロクロ ---------- */
.roku-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.roku-intro figure, .roku-size figure { margin: 0; }
.roku-intro img, .roku-size img { display: block; width: 100%; height: auto; }
.card .roku-points { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.card .roku-points li { margin: 0; padding: 8px 12px 8px 12px; background: #faf9f6; border: 1px solid #ece8e1; border-left: 3px solid #c9b58a; border-radius: 3px; font-size: var(--fs-s); }
.roku-points b { display: block; font-size: var(--fs-xs); color: var(--muted); }
.roku-lead { font-weight: 700; }
.roku-size-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.roku-form { margin: 14px 0 8px; padding: 12px 16px; background: #fff; border: 1px dashed #bfb5a5; border-radius: 4px; }
.roku-form > div { display: flex; gap: 12px; padding: 4px 0; }
.roku-form dt { flex: none; width: 5em; font-weight: 700; }
.roku-form dd { margin: 0; }
.roku-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.roku-prices.one { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.roku-table caption { padding: 8px 10px; text-align: left; font-weight: 700; background: #faf7f0; border: 1px solid var(--line); border-bottom: 0; }
.roku-table tbody th { width: auto; color: var(--ink); }
.roku-order { margin: 14px 0 0; font-size: var(--fs-s); }
@media (max-width: 767px) {
	.roku-intro, .roku-size-grid, .roku-prices { grid-template-columns: 1fr; }
}
.roku-points b { font-size: var(--fs-s); font-weight: 700; color: var(--ink); margin-bottom: 2px; }

/* ---------- 商品カテゴリの一覧（織機用具など） ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.cat-grid a { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.cat-grid a:hover { border-color: #bdb4a6; box-shadow: 0 3px 10px rgba(60, 45, 30, .08); }
.cat-grid figure { margin: 0; background: #fff; border-bottom: 1px solid #ece8e1; }
.cat-grid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.cat-grid span { position: relative; padding: 10px 28px 11px 14px; font-weight: 700; font-size: var(--fs-m); line-height: 1.5; }
.cat-grid span::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #a34734; font-size: 20px; }
@media (max-width: 767px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cat-grid span { font-size: var(--fs-s); padding: 8px 24px 9px 10px; } }

/* ---------- 商品ページ（古いページを変換したもの） ---------- */
.item-sec, .item-sec .anchor { scroll-margin-top: 80px; }
.item-card > * + * { margin-top: 14px; }
.item-card p { margin: 0 0 .6em; }
.item-card img { max-width: 100%; height: auto; vertical-align: top; }
.item-card .img-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.item-card .media { padding: 0; border: 0; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
.item-card .media figure { display: flex; flex-direction: column; gap: 8px; }
.item-card .media img { border: 1px solid #ece8e1; }
.item-card .media + .media { padding-top: 16px; border-top: 1px dotted #c9c3ba; }
.item-card b.big { font-size: var(--fs-l); }
.item-spec { margin: 0; }
.item-spec th { width: 7.5em; }
.item-spec td.price, .item-price td.price { font-weight: 700; white-space: nowrap; }
.item-spec th.sub { background: #faf7f0; text-align: left; }
.item-price tbody th { width: 5em; color: var(--muted); font-weight: 400; }
.item-price td b { font-weight: 700; }
.video { display: block; position: relative; max-width: 480px; aspect-ratio: 16 / 9; margin: 10px 0; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.item-card ul, .item-card ol { margin: 0 0 .6em; padding-left: 1.3em; }
@media (max-width: 767px) {
	.item-price thead { display: none; }
	.item-price tr { display: grid; grid-template-columns: auto 1fr; }
	.item-price tbody th { grid-row: 1 / 3; }
	.item-price td.price { text-align: left; padding-top: 0; }
	.item-price td { border-bottom: 0; }
	.item-price tbody tr { border-bottom: 1px solid #ece8e1; }
}
.item-card { overflow-wrap: anywhere; }
.item-card table { width: 100%; }
.item-card .media > div { min-width: 0; }
@media (max-width: 767px) { .item-spec td.price, .item-price td.price { white-space: normal; } .item-spec th { width: 5.5em; } }
/* カテゴリ一覧のカードを小さく：パソコンは4列 */
.cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cat-grid span { padding: 8px 24px 9px 10px; font-size: var(--fs-s); }
.cat-grid span::after { right: 9px; font-size: 18px; }
@media (max-width: 767px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .cat-grid span { font-size: var(--fs-xs); padding: 6px 18px 7px 8px; } .cat-grid span::after { right: 6px; font-size: 15px; } }
@media (max-width: 600px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cat-grid span { font-size: var(--fs-s); } }
/* 商品写真：枠を取った写真に、細い枠を1本だけ */
.item-card .img-row img, .item-card .media img { border: 1px solid #ece8e1; border-radius: 3px; }
/* 商品ページ：商品名の見出しは【】で囲み、前の■はなし */
.item-band .band-ttl h2::before { display: none; }
/* 縦長の写真が大きくなりすぎないように */
.item-card .media figure { align-items: center; }
.item-card .media img { width: auto; max-width: 100%; max-height: 260px; }
/* 元の形のまま残す表（行をまたぐ見出しなど） */
.item-grid th { width: 6em; vertical-align: middle; text-align: center; background: #faf7f0; }
.item-grid td { padding: 5px 10px; }
.item-grid td.price { vertical-align: middle; text-align: center; font-size: var(--fs-l); border-left: 1px solid #ece8e1; }
/* 古いページのボタン（受注製作のページへ など） */
.btn-link { display: inline-block; margin: 4px 0; padding: 6px 14px; border: 1px solid #a34734; border-radius: 4px; color: #a34734; font-weight: 700; text-decoration: none; }
.btn-link:hover { background: #a34734; color: #fff; }
/* 行をまたぐ表は、中身に合わせた幅でコンパクトに */
.item-card table.item-grid { width: auto; min-width: 0; max-width: 100%; font-size: var(--fs-s); }
.item-grid td { padding: 2px 16px; line-height: 1.6; }
.item-grid th { padding: 4px 14px; width: auto; }
.item-grid td.price { padding: 4px 22px; font-size: var(--fs-m); }
/* 受注製作のページ */
.order-price { display: inline-flex; align-items: baseline; gap: 6px; margin: 0 0 14px !important; padding: 8px 18px; background: #faf7f0; border: 1px solid #e3d9c4; border-radius: 4px; color: var(--red); font-weight: 700; }
.order-price span { margin-right: 8px; padding: 1px 10px; border-radius: 6px; background: var(--red); color: #fff; font-size: var(--fs-xs); }
.order-price b { font-size: var(--fs-xxl); line-height: 1.2; }
.card .hosoku li > p { margin: 6px 0 0; }
.hosoku .img-row { margin-top: 10px; }
.order-period { font-size: var(--fs-m); }
.order-period span { display: inline-block; margin-right: 10px; padding: 1px 10px; border-radius: 6px; background: var(--brown); color: #fff; font-size: var(--fs-xs); font-weight: 700; vertical-align: 2px; }
.item-card .hosoku { padding-left: 0; }
/* 行をまたぐ表：外側を枠で囲む、cm の列 */
.item-card table.item-grid { border: 1px solid #cfc7bb; border-collapse: collapse; }
.item-grid td.cm { padding-left: 4px; color: var(--muted); font-size: var(--fs-xs); }
.btn-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.btn-note { font-weight: 700; font-size: var(--fs-l); }
/* 受注製作などのボタン：塗りつぶし・白い文字 */
.btn-link { background: #a34734; border-color: #a34734; color: #fff; padding: 8px 18px; }
.btn-link:hover { background: #8a3a2a; border-color: #8a3a2a; color: #fff; }
.btn-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; line-height: 1; }
.btn-link { padding: 0 18px 0 10px; }
.btn-link { padding: 0 16px 0 12px; }
.btn-link { padding: 0 16px 1px 7px; }   /* 【 の左の空きの分だけ左を詰め、文字が見た目で真ん中に来るように */

/* 伸子の寸法：帯用・着尺用の箱と寸法の札 */
.sz-wrap { border: 1px solid #cfc7bb; border-radius: 4px; overflow: hidden; background: #fff; }
.sz-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 16px; background: #faf7f0; border-bottom: 1px solid #e3d9c4; }
.sz-no { font-size: var(--fs-xs); color: var(--muted); }
.sz-head > b { font-size: var(--fs-l); }
.sz-price { margin-left: auto; display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-xl); color: var(--red); }
.sz-price small { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
.sz-box { padding: 14px 16px 16px; }
.sz-box + .sz-box { border-top: 1px dotted #c9c3ba; }
.sz-box h4 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: var(--fs-m); }
.sz-box h4::before { content: ""; width: 4px; height: 1em; background: #b09935; align-self: center; }
.sz-box h4 small { font-weight: 400; font-size: var(--fs-xs); color: var(--muted); }
.card .sz-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.card .sz-chips li { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 6px 4px; border: 1px solid #e3ddd3; border-radius: 4px; background: #fcfbf8; line-height: 1.35; }
.sz-chips b { font-size: var(--fs-m); }
.sz-chips span { font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 600px) { .card .sz-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sz-price { margin-left: 0; } }
/* 商品ページの写真：まわりの枠線はなし */
.item-card .img-row img, .item-card .media img { border: 0; border-radius: 0; }
@media (max-width: 767px) { .item-card .media { grid-template-columns: 1fr; } }

/* 杼・管：商品名と価格の帯、寸法の札 */
.hi-spec { border: 1px solid #e3ddd3; border-radius: 4px; overflow: hidden; background: #fff; }
.hi-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 14px; background: #faf7f0; border-bottom: 1px solid #e3ddd3; }
.hi-no { font-size: var(--fs-xs); color: var(--muted); }
.hi-head > b { font-size: var(--fs-l); }
.hi-price { margin-left: auto; font-size: var(--fs-xl); font-weight: 700; color: var(--red); }
.card .hi-dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 12px 14px 0; list-style: none; }
.card .hi-dims li { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 8px 4px; border: 1px solid #ece8e1; border-radius: 4px; background: #fcfbf8; line-height: 1.3; }
.hi-dims svg { width: 22px; height: 22px; fill: none; stroke: #a34734; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hi-dims span { font-size: var(--fs-xs); color: var(--muted); }
.hi-dims b { font-size: var(--fs-l); }
.card .hi-note { margin: 0; padding: 10px 14px 12px; font-size: var(--fs-s); }
.hi-dims + .hi-note { padding-top: 10px; }
@media (max-width: 600px) { .hi-price { margin-left: 0; } }

.hi-spec + .hi-spec { margin-top: 10px; }

.card .hi-dims li.hi-em { border-color: #e7b3a8; background: #fdf1ee; }
.hi-dims li.hi-em b { color: var(--red); }

.hi-spec .hi-head:last-child { border-bottom: 0; }

/* 杼・管：「杼」「管」のまとまりの見出し */
.group-title { display: flex; align-items: center; gap: 14px; margin: 40px 0 18px; font-family: "Noto Serif JP", serif; font-size: var(--fs-xxl); font-weight: 700; letter-spacing: .2em; }
.group-title::after { content: ""; flex: 1; height: 1px; background: #cfc7bb; }
.page-title + .group-title { margin-top: 8px; }
.group-title + .section { margin-top: 0 !important; }
/* 杼・管：杼の写真は左寄せ */
.page-hi .item-card .img-row { justify-content: flex-start; }

/* 杼の説明文を囲みの中、寸法の下に */
.card .hi-desc { margin: 0; padding: 0 14px; font-size: var(--fs-s); line-height: 1.8; }
.hi-spec .hi-desc:first-of-type { margin-top: 0; padding-top: 10px; border-top: 1px dotted #e3ddd3; }
.hi-spec .hi-desc:last-child { padding-bottom: 12px; }
.hi-dims + .hi-desc { margin-top: 12px; }

/* ページ見出し（TOP・商品価格表・ご注文方法…）：文字の右に細い線が伸びる形 */
.page-title { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding: 0; border-bottom: 0; font-family: "Noto Serif JP", serif; font-size: var(--fs-xxl); font-weight: 700; letter-spacing: .2em; line-height: 1.4; }
.page-title::after { content: ""; flex: 1; height: 1px; background: #cfc7bb; }
.page-title .pt-ttl { padding-bottom: 0; }
.page-title .pt-ttl::after { display: none; }
@media (max-width: 767px) { .page-title { font-size: 24px; letter-spacing: .12em; } }
.group-title { font-size: var(--fs-xl); letter-spacing: .15em; margin-top: 44px; }   /* ページ見出しより一回り小さく */
.page-hi .item-card .media { align-items: center; }   /* 管の写真は文章の高さの真ん中に */

/* 画像だった案内文を文字で */
.lead-box { padding: 4px 0 6px; }
.card .lead-big { margin: 0 0 2px; font-family: "Noto Serif JP", serif; font-size: var(--fs-xl); font-weight: 700; letter-spacing: .06em; }
.card .lead-small { margin: 0; font-size: var(--fs-s); color: var(--muted); }
.osa-two { gap: 20px; }
/* 金筬：竹筬式・アルミチャンネル式の2枚のカード */
.card .osa-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 6px 0 0; padding: 0; list-style: none; }
.card .osa-cards > li { margin: 0; }
.osa-cards a { display: flex; flex-direction: column; height: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.osa-cards a:hover { border-color: #bdb4a6; box-shadow: 0 3px 10px rgba(60, 45, 30, .08); }
.osa-ttl { font-family: "Noto Serif JP", serif; font-size: var(--fs-l); font-weight: 700; }
.osa-cards figure { margin: 10px 0; text-align: center; }
.osa-cards figure img { width: 100%; max-width: 263px; height: auto; }
.card .osa-pts { margin: 0; padding: 0; list-style: none; }
.card .osa-pts li { position: relative; margin: 0 0 2px; padding-left: 1.1em; font-size: var(--fs-s); }
.osa-pts li::before { content: "●"; position: absolute; left: 0; top: .3em; font-size: .7em; color: #a34734; }
.osa-more { margin-top: auto; padding-top: 10px; align-self: flex-end; font-size: var(--fs-s); color: #0b5cad; }
.card .osa-cards figure img { border: 0; }
/* 金筬の2枚：枠をなくし、間に縦の点線だけ */
.osa-cards a { padding: 6px 4px; border: 0; border-radius: 0; background: none; }
.osa-cards a:hover { box-shadow: none; }
.osa-cards a:hover .osa-ttl { color: #a34734; }
.card .osa-cards { gap: 0; }
.card .osa-cards > li + li { padding-left: 20px; border-left: 1px dotted #c9c3ba; margin-left: 0; }
.card .osa-cards > li:first-child { padding-right: 20px; }
@media (max-width: 600px) { .card .osa-cards { grid-template-columns: 1fr; } .card .osa-cards > li + li { padding: 16px 0 0; border-left: 0; border-top: 1px dotted #c9c3ba; } .card .osa-cards > li:first-child { padding: 0 0 16px; } }
/* 杼・管：囲みはそのまま、寸法は小さな札を横に並べてコンパクトに */
.hi-head { padding: 8px 14px; }
.hi-head > b { font-size: var(--fs-m); }
.hi-price { font-size: var(--fs-l); }
.card .hi-dims { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; }
.card .hi-dims li { flex-direction: row; align-items: center; gap: 5px; padding: 3px 10px; line-height: 1.5; }
.hi-dims svg { width: 15px; height: 15px; }
.hi-dims b { font-size: var(--fs-s); }
.card .hi-note { padding: 6px 14px 0; font-size: var(--fs-xs); color: var(--muted); }
.card .hi-note:last-child { padding-bottom: 10px; }
.hi-spec .hi-desc:first-of-type { margin-top: 8px; padding-top: 8px; }
.hi-spec .hi-desc:last-child { padding-bottom: 10px; }
.card .hi-desc { line-height: 1.7; }
.card .hi-note + .hi-desc, .card .hi-dims + .hi-desc { margin-top: 8px; padding-top: 7px; border-top: 1px dotted #e3ddd3; }
/* 価格だけの商品（金ヒゴ・板杼・管など）は1つの囲みに行で並べる */
.hi-list .hi-head { padding: 6px 14px; background: #fff; border-bottom: 1px solid #ece8e1; }
.hi-list .hi-head:first-child { background: #faf7f0; }
.hi-list .hi-head:last-child { border-bottom: 0; }
.hi-list .hi-head > b { font-size: var(--fs-s); }
.hi-list .hi-price { font-size: var(--fs-m); }
.hi-list .hi-head { background: #fff !important; }
/* 杼・管：価格だけの商品（金ヒゴ・板杼・管など）は写真の右に価格の行 */
.page-hi .item-card:has(> .img-row):has(> .hi-list) { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 0 22px; align-items: center; }
.page-hi .item-card:has(> .img-row):has(> .hi-list) > * { margin-top: 0; }
.page-hi .item-card:has(> .img-row):has(> .hi-list) > :not(.img-row):not(.hi-list) { grid-column: 1 / -1; margin-top: 12px; }
.page-hi .item-card:has(> .img-row):has(> .hi-list) .img-row img { max-width: 100%; height: auto; }
@media (max-width: 767px) {
	.page-hi .item-card:has(> .img-row):has(> .hi-list) { grid-template-columns: 1fr; gap: 12px; }
}
/* 板杼はほかの杼と同じ（写真の下に価格の行） */
.page-hi .item-card:has(img[src*="itahi2"]) { display: block; }
.page-hi .item-card:has(img[src*="itahi2"]) > * + * { margin-top: 14px; }
.page-hi .item-card:has(> .img-row):has(> .hi-list):has(img[src*="itahi2"]) { display: block; }
.page-hi .item-card:has(> .img-row):has(> .hi-list):has(img[src*="itahi2"]) > * + * { margin-top: 14px; }

/* 管立て：小と大を左右に */
.kt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: end; }
.kt-col figure { margin: 0 0 8px; text-align: center; }
.kt-col figure img { max-width: 100%; height: auto; }
.kt-col .hi-head > b { font-size: var(--fs-s); }
@media (max-width: 600px) { .kt-grid { grid-template-columns: 1fr; } }
.card .kt-col figure img { border: 0; }
/* 杼入箱も板杼と同じ（写真の下に価格の行） */
.page-hi .item-card:has(> .img-row):has(> .hi-list):has(img[src*="hiire"]) { display: block; }
.page-hi .item-card:has(> .img-row):has(> .hi-list):has(img[src*="hiire"]) > * + * { margin-top: 14px; }
.page-hi .item-card:has(img[src*="hiire"]) .img-row img { max-width: 420px; width: 100%; height: auto; }
.page-hi .item-card .img-row img[src*="hiire"] { width: 100%; max-width: 480px !important; height: auto; }

/* 自動筬通し：番手ごとのカード */
.card .jd-lead { font-size: var(--fs-m); font-weight: 700; }
.card .jd-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.card .jd-cards > li { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 14px 10px 12px; border: 1px solid #e3ddd3; border-radius: 4px; background: #fcfbf8; text-align: center; }
.jd-no { font-size: var(--fs-xs); color: var(--muted); }
.jd-ban { font-family: "Noto Serif JP", serif; font-size: 34px; line-height: 1.2; color: #a34734; }
.jd-ban small { margin-left: 2px; font-size: var(--fs-s); color: var(--ink); }
.jd-name { font-size: var(--fs-xs); color: var(--muted); }
.card .jd-fit { margin: 10px 0; padding: 8px 6px; width: 100%; border-top: 1px dotted #c9c3ba; border-bottom: 1px dotted #c9c3ba; }
.jd-fit dt { font-size: var(--fs-xs); color: var(--muted); }
.jd-fit dd { margin: 0; font-weight: 700; }
.jd-fit .jd-cm { font-weight: 400; font-size: var(--fs-xs); }
.jd-price { margin-top: auto; font-size: var(--fs-l); font-weight: 700; color: var(--red); }
@media (max-width: 600px) { .card .jd-cards { grid-template-columns: 1fr; } }
.jd-cards + p { margin-top: 12px; }

/* ---------- 竹筬式・アルミチャンネル式 金筬 ---------- */
.osa-main { margin: 0 0 16px; }
.osa-main img { display: block; width: 100%; height: auto; }
.osa-spec { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 16px; align-items: center; }
.osa-spec figure { margin: 0; }
.osa-spec img { display: block; max-width: 100%; height: auto; border: 0 !important; }
.card .osa-oni { margin: 0; padding: 12px 16px; background: #faf7f0; border: 1px solid #e3d9c4; border-radius: 4px; }
.osa-oni > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 4px 0; }
.osa-oni dt { font-size: var(--fs-s); color: var(--muted); }
.osa-oni dd { margin: 0; font-size: var(--fs-l); font-weight: 700; }
.osa-oni .osa-ex { margin-top: 4px; padding-top: 8px; border-top: 1px dotted #c9c3ba; }
.osa-oni .osa-ex dd { color: #a34734; }
.osa-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 14px; padding: 0; list-style: none; }
.osa-links a { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 44px 16px 18px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid #a34734; border-radius: 4px; color: var(--ink); text-decoration: none; }
.osa-links a:hover { border-color: #bdb4a6; border-left-color: #a34734; box-shadow: 0 3px 10px rgba(60, 45, 30, .08); }
.osa-l-ttl { font-family: "Noto Serif JP", serif; font-size: var(--fs-l); font-weight: 700; }
.osa-links span + span { font-size: var(--fs-s); color: var(--muted); }
.osa-links i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 28px; color: #a34734; }
.osa-note { margin: 0 0 8px; }
@media (max-width: 767px) { .osa-spec { grid-template-columns: auto auto; } .card .osa-oni { grid-column: 1 / -1; } .osa-links { grid-template-columns: 1fr; } }

/* ---------- 金筬の在庫表・注文製作 ---------- */
.zk-date { font-weight: 700; font-size: var(--fs-m); }
.zk-tel { margin: 6px 0 0 !important; }
.zk-tel a { display: inline-block; padding: 6px 16px; border-radius: 6px; background: #a34734; color: #fff; font-weight: 700; font-size: var(--fs-l); text-decoration: none; }
.zk-table tbody th { width: 2.5em; text-align: center; }
.zk-table td.unit { white-space: nowrap; }
.zk-st span { display: inline-block; padding: 0 8px; border-radius: 3px; background: #eef5e3; color: #4f7a12; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.zk-detail { margin: 0; text-align: center; } .zk-detail img { max-width: 100%; height: auto; }
.tyu-big { font-size: var(--fs-l); }
.tyu-big b { font-family: "Noto Serif JP", serif; font-size: var(--fs-xl); color: #a34734; letter-spacing: .05em; }
.unit-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 0; padding: 12px 16px; background: #faf7f0; border: 1px solid #e3d9c4; border-radius: 4px; }
.unit-box > div { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline; }
.unit-box dt { font-weight: 700; min-width: 6em; } .unit-box dd { margin: 0; } .unit-box small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.card .ha-list { display: grid; gap: 8px; margin: 0; }
.ha-list > div { padding: 8px 12px; border-left: 3px solid #c9b58a; background: #faf9f6; }
.ha-list dt { font-weight: 700; } .ha-list dd { margin: 0; font-size: var(--fs-s); }
.tyu-fig { margin: 0; } .tyu-fig img { max-width: 100%; height: auto; }
.card .ex-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.card .ex-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 0; padding: 10px 14px; border: 1px solid #e3ddd3; border-radius: 4px; background: #fff; }
.ex-price { font-weight: 700; color: var(--red); font-size: var(--fs-l); }
.ex-sum { font-size: var(--fs-s); color: var(--muted); }
.ex-note { flex-basis: 100%; font-size: var(--fs-s); }
@media (max-width: 767px) {
	.unit-box { grid-template-columns: 1fr; }
	.zk-table thead { display: none; }
	.zk-table tr { display: grid; grid-template-columns: 2em 1fr auto; }
	.zk-table tbody th { grid-row: 1 / 3; }
	.zk-table td:nth-child(2) { grid-column: 2 / 4; border-bottom: 0; padding-bottom: 0; }
	.zk-table td.price { text-align: left; }
	.zk-table td.unit { display: none; }
}

/* 価格の表（ロクロ・金筬在庫表・一式価格表）も商品ページの帯と同じ見た目に */
.roku-table, .zk-table, .set-table { border: 1px solid #e3ddd3; border-radius: 4px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff; }
.roku-table thead th, .zk-table thead th, .set-table thead th { background: #faf7f0; font-size: var(--fs-xs); color: var(--muted); border-bottom: 1px solid #e3ddd3; }
.roku-table tbody th, .zk-table tbody th, .set-table tbody th { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.roku-table td, .zk-table td, .set-table td { font-weight: 700; font-size: var(--fs-s); }
.roku-table td.price, .zk-table td.price, .set-table td.price { color: var(--red); font-size: var(--fs-m); }
.roku-table tbody tr:last-child > *, .zk-table tbody tr:last-child > * { border-bottom: 0; }
.roku-table caption { border-radius: 4px 4px 0 0; }
.roku-table tbody th { font-size: var(--fs-s); font-weight: 700; color: var(--ink); }
.roku-table th, .roku-table td, .zk-table th, .zk-table td, .set-table th, .set-table td { vertical-align: middle; padding-top: 9px; padding-bottom: 9px; }
.roku-table caption { border: 0; background: none; padding: 0 2px 6px; }

/* 商品のNo.を分類の色（手織道具＝金茶）の札に */
.hi-no { display: inline-block; padding: 1px 8px; border-radius: 3px; background: #b09935; color: #fff; font-weight: 700; letter-spacing: .02em; }
.hi-head { background: #fff; }
.hi-spec { border-color: #e6dcbd; }

/* 商品名の後ろの補足（※写真左 など）は列をそろえる */
.hi-head:has(.hi-sub) > b { min-width: 13em; }
.hi-sub { font-size: var(--fs-s); font-weight: 700; color: var(--ink); }
@media (max-width: 600px) { .hi-head:has(.hi-sub) > b { min-width: 0; } }
/* 価格：4,400円（税込） */
.yen { white-space: nowrap; }
.yen-u { font-size: .8em; margin-left: 1px; }
.yen .tax { margin-left: 6px; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.yen .tax { margin-left: 1px; letter-spacing: 0; }
.yen { font-size: 1.15em; }
.yen .tax { color: var(--red); font-size: .62em; }
.yen .tax { font-size: .68em; }
/* 寸法の札のマークを少し大きく、線を太めにしてつぶれないように */
.hi-dims svg { width: 19px; height: 19px; stroke-width: 2; }
.hi-dims svg { color: #a34734; stroke: currentColor; }
.yen { color: var(--red); font-weight: 700; }
.item-card > .img-row + p { margin-top: 26px; }   /* 写真のすぐ下の文章との間をあける */
.card .sz-note { margin: 0; padding: 8px 16px; border-bottom: 1px dotted #c9c3ba; font-size: var(--fs-s); }
.sz-note b { color: #a34734; }
/* 伸子の表のNo.もほかの商品と同じ金茶の札に */
.sz-no { display: inline-block; padding: 1px 8px; border-radius: 3px; background: #b09935; color: #fff; font-weight: 700; letter-spacing: .02em; }
/* 金筬の2つ：普段は枠なし、マウスを乗せたときだけほかのカードと同じうすい枠と影 */
.osa-cards a { padding: 10px 12px; border: 1px solid transparent; border-radius: 4px; transition: border-color .2s, box-shadow .2s, background .2s; }
.osa-cards a:hover { border-color: #bdb4a6; background: #fff; box-shadow: 0 3px 10px rgba(60, 45, 30, .08); }
.osa-cards a:hover .osa-ttl { color: inherit; }
.osa-ttl { font-size: var(--fs-xl); letter-spacing: .04em; }
.osa-pts li::before { color: var(--ink); }

/* 自動筬通し：ほかの商品と同じ帯＋寸法の札の形 */
.jd-list > .hi-spec + .hi-spec { margin-top: 10px; }
.jd-list .hi-note:empty { padding: 0 0 10px; }
.jd-list + p { margin-top: 12px; }
/* 自動筬通しの番手カード：ほかの商品と同じ色づかい（白地・うすい金茶の枠・No.は金茶の札） */
.card .jd-cards > li { background: #fff; border-color: #e6dcbd; }
.jd-no { display: inline-block; padding: 1px 8px; border-radius: 3px; background: #b09935; color: #fff; font-size: var(--fs-xs); font-weight: 700; }
.jd-ban { margin-top: 6px; color: var(--ink); }
.card .jd-fit { border-color: #e6dcbd; }
.jd-cards + p { margin-top: 12px; }
.osa-main img { border: 0 !important; }
.osa-l-ttl { font-size: var(--fs-xl); letter-spacing: .04em; }
/* 金筬の詳細：言葉の説明は文字、図は3つに分けて枠なし */
.card .zk-terms { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0 0 14px; }
.zk-terms > div { display: flex; gap: 6px; align-items: baseline; }
.zk-terms dt { font-weight: 700; } .zk-terms dd { margin: 0; }
.zk-figs { display: grid; gap: 16px; }
.zk-figs figure { margin: 0; }
.zk-figs img { display: block; max-width: 100%; height: auto; border: 0 !important; }
.zk-figs .zk-side img { max-width: 260px; }
.zk-side figcaption { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- 竹筬 ---------- */
.card .tk-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; padding: 0; list-style: none; }
.card .tk-facts li { display: flex; flex-direction: column; margin: 0; padding: 8px 16px; border: 1px solid #e6dcbd; border-radius: 4px; background: #fff; }
.tk-facts span { font-size: var(--fs-xs); color: var(--muted); }
.tk-facts b { font-size: var(--fs-l); }
.item-card .note-box p { margin: 0 0 6px; } .item-card .note-box p:last-child { margin: 0; }
.tk-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.tk-type { padding: 14px 16px; border: 1px solid #e6dcbd; border-radius: 4px; background: #fff; }
.tk-type h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: "Noto Serif JP", serif; font-size: var(--fs-l); }
.tk-type h3 span { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #b09935; color: #fff; font-family: "Noto Sans JP", sans-serif; font-size: var(--fs-s); }
.tk-type p { font-size: var(--fs-s); }
.tk-table tbody th { width: auto; text-align: center; font-weight: 700; color: var(--ink); font-size: var(--fs-s); }
.tk-table td { text-align: center; }
.tk-table td.price { text-align: right; }
@media (max-width: 767px) {
	.tk-types { grid-template-columns: 1fr; }
	.tk-table thead { display: table-header-group; }
	.tk-table tr { display: table-row; }
	.tk-table td, .tk-table th { display: table-cell; font-size: var(--fs-xs); padding: 6px 4px; }
}
.tk-type h3::before { display: none !important; }
.tk-type h3 { border: 0; padding: 0; }
.tk-table th, .tk-table td { vertical-align: middle !important; padding-top: 9px; padding-bottom: 9px; }
.tk-table th:first-child, .tk-table td:nth-child(2) { width: 22%; text-align: center; }
.tk-table thead th { text-align: center; }
.tk-table thead th.price { text-align: right; }
@media (max-width: 767px) {
	.tk-table td:nth-child(2) { border-bottom: 1px solid #ece8e1; padding: 6px 4px; }
	.tk-table tbody tr:last-child td { border-bottom: 0; }
	.tk-table td.price { font-size: var(--fs-s); }
}
.tk-table thead th { font-size: var(--fs-s); font-weight: 700; color: var(--ink); }
.tk-table thead th:nth-child(2) { white-space: nowrap; }
.tk-table td:nth-child(2) { font-weight: 700; font-size: var(--fs-s) !important; color: var(--ink); }
@media (max-width: 767px) {
	.tk-table th, .tk-table td { padding-left: 3px !important; padding-right: 3px !important; }
	.tk-table tbody th, .tk-table td:nth-child(2) { font-size: var(--fs-xs) !important; white-space: nowrap; }
	.tk-table thead th { font-size: var(--fs-xs); }
	.tk-table td.price { font-size: var(--fs-xs) !important; }
	.tk-table td.price .yen, .tk-table td.price { letter-spacing: 0; }
}
/* 竹筬の価格表：縦線 */
.tk-table th + th, .tk-table th + td, .tk-table td + td { border-left: 1px solid #e3ddd3; }
/* 海外織機用・金筬の価格表（列が多いのでスマホは横にスクロール） */
.tbl-scroll { overflow-x: auto; }
.kg-table { min-width: 640px; }
.kg-table thead th small { display: block; font-weight: 400; font-size: .85em; }
.kg-table tbody th { white-space: nowrap; }
.kg-table td.price { font-size: var(--fs-s) !important; }
.kg-table { table-layout: fixed; }
.kg-table th:first-child { width: 20%; }
.kg-table td:nth-child(2) { width: auto; text-align: right; font-weight: 700; color: var(--red); }
.kg-table thead th.price, .kg-table td.price { text-align: center; }
.fig-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.tyu-fig img { border: 0 !important; }
.hi-made { display: inline-block; padding: 1px 10px; border-radius: 6px; background: #a34734; color: #fff; font-size: var(--fs-s); font-weight: 700; }

/* ボタンの文字：ふつうは左右同じ余白。「【」で始まるものだけ、【の左の空きの分を詰める */
.btn-link { padding: 0 18px 1px; }
.btn-link.btn-kakko { padding: 0 16px 1px 7px; }
/* 綜絖：33cm・26cmの規格の案内（画像だった文を文字に） */
.card .sk-lead { font-family: "Noto Serif JP", serif; font-size: var(--fs-l); font-weight: 700; line-height: 1.7; }
.sk-33 { color: #d01e1e; } .sk-26 { color: #2a3fa0; }
/* 綜絖：33cm・26cmの規格を左右に */
.card .sk-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.card .sk-cards > li { margin: 0; }
.sk-cards a { display: flex; flex-direction: column; height: 100%; padding: 14px 16px; border: 1px solid #e6dcbd; border-radius: 4px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.sk-cards a:hover { border-color: #bdb4a6; box-shadow: 0 3px 10px rgba(60, 45, 30, .08); }
.sk-cards h3 { margin: 0 0 8px; font-family: "Noto Serif JP", serif; font-size: var(--fs-xl); }
.sk-c33 h3 { color: #d01e1e; } .sk-c26 h3 { color: #2a3fa0; }
.sk-cards figure { margin: 0 0 10px; text-align: center; }
.sk-cards figure img { max-width: 100%; height: auto; border: 0 !important; }
.card .sk-pts { margin: 0 0 8px; padding: 0; list-style: none; }
.card .sk-pts li { position: relative; margin: 0 0 3px; padding-left: 1.1em; font-size: var(--fs-s); }
.sk-pts li::before { content: "●"; position: absolute; left: 0; top: .3em; font-size: .7em; }
.sk-more { margin-top: auto; align-self: flex-end; font-size: var(--fs-s); color: #0b5cad; }
@media (max-width: 600px) { .card .sk-cards { grid-template-columns: 1fr; } }
.sk-cards h3::before { display: none !important; } .sk-cards h3 { border: 0; padding: 0; }

/* 綜絖の規格カード：特徴の札・仕様の表・特徴の文 */
.sk-cards a { padding: 0; overflow: hidden; border-top: 4px solid var(--sk); }
.sk-c33 { --sk: #d01e1e; --sk-soft: #fdf0ee; } .sk-c26 { --sk: #2a3fa0; --sk-soft: #eef0f9; }
.sk-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 12px 16px 8px; }
.sk-top h3 { margin: 0 !important; color: var(--sk) !important; }
.sk-tag { padding: 2px 10px; border-radius: 12px; background: var(--sk); color: #fff; font-size: var(--fs-xs); font-weight: 700; }
.sk-cards figure { margin: 0 16px 10px; }
.card .sk-spec { width: auto; margin: 0 16px; border-collapse: collapse; font-size: var(--fs-s); }
.sk-spec th, .sk-spec td { padding: 6px 4px; border-bottom: 1px dotted #ddd6cc; text-align: left; vertical-align: top; }
.sk-spec th { width: 8.5em; font-weight: 400; color: var(--muted); white-space: nowrap; }
.sk-spec td { font-weight: 700; }
.card .sk-note { margin: 12px 16px 0; padding: 8px 12px; border-radius: 4px; background: var(--sk-soft); font-size: var(--fs-s); line-height: 1.7; }
.sk-more { margin: 10px 16px 14px auto; }
/* 種類ごとの説明（#27ワイヤー大目 など：見出しの画像を文字にしたもの） */
.item-card .sub-item { margin-top: 22px; padding: 10px 14px; border-left: 4px solid #b09935; background: #faf8f1; border-radius: 0 4px 4px 0; }
.item-card .sub-item p { margin: 0; font-size: var(--fs-s); line-height: 1.8; }
.sub-head { display: block; margin-bottom: 4px; font-family: "Noto Serif JP", serif; font-size: var(--fs-l); }
.item-card .sub-item + .hi-spec { margin-top: 8px; }
.sub-head + br { display: none; }
/* 商品名の見出し：全角のかっこの前後の空きを詰める（文字の形はそのまま） */
.item-band h2 { font-feature-settings: "palt"; }
/* 見出しの全角かっこ：（ は左、） は右の余白を詰める */
.kk-l { margin-left: -.45em; }
.kk-r { margin-right: -.45em; }
/* 見出しの中の半角英数字（33cm など）は字間を空けない */
.page-title .hw, .item-band h2 .hw { letter-spacing: .02em; }
/* 33cm・26cmのカード：見出し・写真・表・説明・リンクの高さを左右でそろえる */
.card .sk-cards { grid-template-rows: auto auto auto auto auto; }
.sk-cards > li { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
.sk-cards a { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
.sk-cards figure { display: flex; align-items: center; justify-content: center; }
.card .sk-spec { align-self: start; width: calc(100% - 32px); }
.card .sk-note { align-self: stretch; }
@media (max-width: 600px) { .sk-cards > li, .sk-cards a { grid-row: auto; grid-template-rows: none; display: block; } .sk-cards a { display: flex; } }
@media (max-width: 600px) {
	.card .sk-note br { display: none; }
	.sk-spec td br { display: none; }
	.card .sk-note { margin-top: 12px; }
}
.page-title .nk { margin-left: .16em; margin-right: -.16em; }   /* ・の左右の空きをそろえる */
.page-title, .item-band h2 { text-spacing-trim: space-all; }   /* Chromeだけの自動の詰めを止め、ブラウザで同じ見え方に */
.page-title .nk { margin-left: -.07em; margin-right: .07em; }
/* 33cm用 綜絖枠・受注製作 */
.tk-facts small { display: block; font-size: var(--fs-xs); font-weight: 700; }
.sk2-cap { margin: 0 0 8px; }
.sk2-table { max-width: 460px; }
.sk2-table th:first-child { width: 50%; }
.card + .sk2-cap { margin-top: 22px; }
/* 価格の前の注記（在庫なし など） */
.hi-stock { margin-left: auto; padding: 1px 8px; border-radius: 3px; background: #f3e3df; color: var(--red); font-size: var(--fs-xs); font-weight: 700; }
.hi-stock + .hi-price { margin-left: 10px; }
.sk2-other { margin: 0; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; }

/* ヘルドの種類：左に説明と札、右に該当のヘルドを赤で囲んだ写真 */
.item-card .hd-item { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 16px; align-items: center; }
.hd-body .sub-head { margin-bottom: 8px; font-size: 1.5rem; font-weight: 700; letter-spacing: .02em; }
.card .hd-text { margin: 0 0 8px; padding: 0; list-style: none; }
.card .hd-text li { position: relative; margin: 0 0 2px; padding-left: 1em; font-size: var(--fs-s); }
.hd-text li::before { content: "●"; position: absolute; left: 0; top: .35em; font-size: .6em; color: #b09935; }
.card .hd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.card .hd-chips li { display: flex; flex-direction: column; margin: 0; padding: 4px 10px; border: 1px solid #e6dcbd; border-radius: 4px; background: #fff; line-height: 1.4; }
.hd-chips span { font-size: var(--fs-xs); color: var(--muted); }
.hd-chips b { font-size: var(--fs-s); }
.card .hd-chips li.hd-em { border-color: #e7b3a8; } .hd-chips li.hd-em b { color: var(--red); }
.hd-fig { margin: 0; }
.hd-fig img { display: block; width: 100%; height: auto; border: 1px solid #ece8e1 !important; border-radius: 3px; background: #fff; }
@media (max-width: 600px) { .item-card .hd-item { grid-template-columns: 1fr; } .hd-fig { max-width: 260px; } }
.card .hd-chips li.hd-blue { border-color: #a9c0de; } .hd-chips li.hd-blue b { color: var(--blue, #1f5fae); }

/* 糸綜絖・受注製作：お見積りに必要な7点と注文表 */
.ito-qs { margin-top: 6px; }
.ito-q { padding: 16px 0; border-top: 1px dashed #e3ddd3; }
.ito-q:last-child { padding-bottom: 0; }
.card .ito-q h3 { margin: 4px 0 6px; font-family: "Noto Serif JP", serif; font-size: var(--fs-l); }
.ito-q .q-body > p { margin: 0 0 6px; }
.ito-q .q-note { font-size: var(--fs-s); color: var(--muted); }
.card .q-opts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.card .q-opts li { display: flex; flex-direction: column; margin: 0; padding: 4px 12px; border: 1px solid #e6dcbd; border-radius: 4px; background: #fff; font-weight: 700; line-height: 1.4; }
.q-opts small { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.ito-sheet { width: 100%; border-collapse: collapse; border: 2px solid #4a4038; }
.ito-sheet caption { padding: 8px 12px; background: #e8e2cc; border: 2px solid #4a4038; border-bottom: 0; caption-side: top; text-align: left; }
.ito-sheet caption b { font-size: var(--fs-l); } .ito-sheet caption span { float: right; margin-top: .4em; font-size: var(--fs-xs); }
.ito-sheet th, .ito-sheet td { padding: 10px 12px; border: 1px solid #4a4038; text-align: left; vertical-align: middle; }
.ito-sheet th { width: 36%; font-weight: 700; background: #faf8f1; }
.ito-sheet .tdw { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.ito-sheet .blank { display: inline-flex; gap: 0; white-space: nowrap; } .ito-sheet .blank span { display: inline-block; width: 9em; }
.ito-sheet .opt { white-space: nowrap; }
.ito-sheet .opt::before { content: "□"; margin-right: 4px; color: #8a7d6e; }
.ito-sheet .opt .blank span { width: 6em; }
.btn-row { margin: 14px 0 6px; }
@media (max-width: 600px) { .ito-sheet th { width: 40%; } .ito-sheet .blank span { width: 5em; } .ito-sheet .opt .blank span { width: 3em; } }
/* Chromeで（）・の詰めがあると幅の見積りが少し足りず、短いタイトルが2段になる → PC幅では折り返さない */
@media (min-width: 768px) { .page-title .pt-ttl { flex: none; white-space: nowrap; } }

/* スプリング：長さごとのまとまり */
.sp-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.sp-group { border: 1px solid #e3ddd3; border-radius: 6px; background: #fff; overflow: hidden; }
.card .sp-len { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; margin: 0; padding: 10px 14px; background: #f6f1e4; border-bottom: 1px solid #e3ddd3; }
.sp-len b { font-family: "Noto Serif JP", serif; font-size: var(--fs-l); }
.sp-len span { font-size: var(--fs-s); }
.sp-len small { margin-left: auto; padding: 1px 8px; border: 1px solid #c9b58a; border-radius: 3px; background: #fff; font-size: var(--fs-xs); }
.card .sp-list { margin: 0; padding: 0; list-style: none; }
.card .sp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no power price"; align-items: center; gap: 6px 12px; margin: 0; padding: 12px 14px; border-top: 1px dashed #e3ddd3; }
.sp-row:first-child { border-top: 0; }
.sp-row .hi-no { grid-area: no; }
.sp-power { grid-area: power; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.sp-power b { white-space: nowrap; }
.sp-power b { order: -1; flex-basis: 100%; }   /* 1行目に「バネの強さ【弱】」、2行目に線の太さ */
.sp-wire { white-space: nowrap; font-size: var(--fs-s); color: var(--muted); }
.sp-row .hi-price { grid-area: price; white-space: nowrap; }
@media (max-width: 600px) { .card .sp-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "no price" "power power"; } .sp-row .hi-price { justify-self: end; } }
@media (max-width: 900px) { .sp-groups { grid-template-columns: 1fr; } }
.cat-grid .cat-sub { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
/* 商品カード：名前を大きく、価格を読みやすく、マウスを乗せても文字を青くしない */
.pc-body h3 { font-size: var(--fs-xl); }
.pc-price .yen { font-size: 24px; }
.pc-price .pc-kara { margin-left: 4px; font-size: 16px; font-weight: 400; color: var(--red); }
.product-card:hover, .link-cards a:hover { color: var(--ink); }
/* 整経の各ページ：価格の表のNo.、消耗品・部品の囲み、整経機用の道具、仕様変更の一覧 */
.price-box tbody th .hi-no { margin-right: 8px; vertical-align: 1px; }
.parts-box { margin-top: 14px; padding: 10px 14px; border: 1px solid #e3d9c4; border-radius: 4px; background: #faf7f0; }
.card .parts-box h3 { margin: 0 0 4px; font-size: var(--fs-s); }
.card .parts-box ul { margin: 0; padding: 0; list-style: none; }
.card .parts-box li { margin: 0; } .parts-box li a::after { content: " ›"; }
.tool-item + .tool-item { margin-top: 18px; }
.card .tool-ttl { margin: 0 0 12px; font-family: "Noto Serif JP", serif; font-size: var(--fs-l); }
.tool-figs { display: grid; gap: 8px; } .tool-figs figure { margin: 0; } .tool-figs img { display: block; max-width: 100%; height: auto; }
.card .custom-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.card .custom-list li { display: grid; gap: 2px; margin: 0; padding: 8px 12px; border-left: 3px solid #c9b58a; background: #faf9f6; }
.custom-list span { font-size: var(--fs-s); }
/* 手織機：写真の横に寸法と付属品、価格はその下の帯に */
.hero-spec { gap: 14px; }
.hero-spec .hero-spec-ttl { margin: 0; font-family: "Noto Serif JP", serif; font-size: var(--fs-l); font-weight: 700; }
.hero-spec .spec-acc { margin-top: 0; }
.loom-price .price-box tbody td { font-size: var(--fs-xl); }
/* 手織機 S-5型（試作・B案）：左＝写真・付属品、右＝価格・寸法詳細。4枚のカードの端をそろえて全体を四角に */
.loom-hero.hero-b { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "photo price" "photo spec" "acc spec"; gap: 16px; row-gap: 16px; align-items: stretch; }
.loom-hero.hero-b > * { margin: 0 !important; min-width: 0; }
.hero-b .hb-photo { grid-area: photo; display: flex; align-items: center; justify-content: center; }
.hero-b .hb-price { grid-area: price; padding: 14px 20px; }
.hero-b .hb-spec { grid-area: spec; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; }
.hero-b .hb-spec .spec-vis { display: flex; flex-direction: column; gap: 10px; }
.hero-b .hb-spec .spec-img { margin: auto 0 0; } .hero-b .hb-spec .spec-img img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.hero-b .hb-spec .dims, .hero-b .hb-spec .spec-chips { margin: 0; }
.hero-b .hb-acc { grid-area: acc; padding: 0; overflow: hidden; }
.hero-b .hb-acc .spec-acc { height: 100%; margin: 0; border: 0; border-radius: 0; padding: 16px 20px; }
.hero-b .price-box tbody tr:last-child th, .hero-b .price-box tbody tr:last-child td { border-bottom: 0; }
.hero-b .hero-spec-ttl { margin: 0; font-family: "Noto Serif JP", serif; font-size: var(--fs-l); font-weight: 700; }
@media (max-width: 767px) { .loom-hero.hero-b { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "price" "spec" "acc"; } }
/* S-5型の並べ方の比較（A～D）。Bは上の既定の並び */
.loom-hero.hero-b.lay-a { grid-template-areas: "photo spec" "price acc"; }
.loom-hero.hero-b.lay-c { grid-template-areas: "photo photo" "price spec" "acc spec"; }
.loom-hero.hero-b.lay-c .hb-photo img { max-width: 560px; }
.loom-hero.hero-b.lay-d { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "photo price" "spec acc"; }
@media (max-width: 767px) { .loom-hero.hero-b.lay-a, .loom-hero.hero-b.lay-c, .loom-hero.hero-b.lay-d { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "price" "spec" "acc"; } }
.loom-hero.hero-b.lay-d .hb-price { display: flex; flex-direction: column; justify-content: center; }
.loom-hero.hero-b.lay-d .hb-acc .spec-acc { display: flex; flex-direction: column; justify-content: center; }
/* 手織機（S-5型以外）：写真の横の「織機のサイズ/付属品」を上下に短く。札と付属品を2列、寸法の箱の余白を小さく */
.hero-spec .dims { gap: 8px; margin: 0; }
.card.hero-spec .dims li { padding: 8px 6px 7px; }
.hero-spec .dims svg { width: 26px; height: 26px; margin-bottom: 2px; }
.hero-spec .spec-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.hero-spec .spec-chips > div { padding: 5px 10px; }
.hero-spec .spec-acc { padding: 10px 14px; }
.hero-spec .spec-acc h3 { margin-bottom: 4px; }
.card.hero-spec .spec-acc ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.card.hero-spec .spec-acc li { margin-bottom: 2px; }
.hero-spec .spec-acc .small { margin-top: 4px; }
.hero-spec .spec-chips { grid-auto-flow: row dense; }
@media (max-width: 600px) { .card.hero-spec .spec-acc ul { grid-template-columns: 1fr; } }
/* 手織機（S-5型以外）：奥行・高さ・横巾の箱をさらに小さく（矢印と名前を1行に、数字を一回り小さく） */
.card.hero-spec .dims li { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; gap: 0 4px; padding: 6px 6px 5px; }
.hero-spec .dims svg { width: 16px; height: 16px; margin: 0; }
.hero-spec .dims .dim-label { margin: 0; font-size: var(--fs-xs); line-height: 1.6; }
.hero-spec .dims b { flex-basis: 100%; font-size: var(--fs-l); line-height: 1.35; }
.hero-spec .dims small { flex-basis: 100%; line-height: 1.3; }
.hero-spec .dims small { font-size: 11px; }
.hero-spec .spec-vis .dims { margin-bottom: 6px; }
/* 手織機：織機の写真を大きく（写真の列を広げ、写真の白い余白の分だけ拡大） */
.loom-hero:not(.hero-b) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.loom-photo:has(img[src*="img/new/looms/"]) { overflow: hidden; }
.loom-photo img[src*="img/new/looms/"] { width: 100%; height: 100%; object-fit: contain; transform: scale(1.18); }
@media (max-width: 767px) { .loom-hero:not(.hero-b) { grid-template-columns: minmax(0, 1fr); } }
.card.hero-spec .spec-acc ul { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.6em), 1fr)); gap: 0 8px; }
.card.hero-spec .spec-acc li { font-size: var(--fs-s); }
@media (max-width: 767px) { .loom-photo img[src*="img/new/looms/"] { height: auto; transform: none; } }
/* 手織機の価格：織機の名前を大きく、補足は2段目に小さく */
.loom-price .price-box tbody th, .hero-b .price-box tbody th { font-size: var(--fs-m); }
.price-box .pb-note { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
@media (min-width: 768px) { .loom-price .price-box tbody th, .hero-b .price-box tbody th { font-size: var(--fs-l); } }
/* 手織機：納期を価格の表とは別の札で */
.lead-time { display: flex; align-items: baseline; gap: 14px; margin: 14px 0 0; padding: 10px 14px; background: #faf7f0; border: 1px solid #e3d9c4; border-left: 3px solid #c9b58a; border-radius: 3px; }
.lead-time span { font-size: var(--fs-s); color: var(--muted); }
.lead-time b { font-size: var(--fs-l); }
.hero-spec > .lead-time { margin: 0; }
.hero-b .hb-acc { display: flex; flex-direction: column; }
.hero-b .hb-acc .spec-acc { flex: 1; height: auto; }
.hero-b .hb-acc > .lead-time { margin: 0 16px 16px; }
.hero-spec .spec-chips dt { width: auto; min-width: 4.5em; white-space: nowrap; }
/* 手織機：特徴の項目の見出しを大きく */
.feat-card .media h3 { margin-bottom: 10px; font-family: "Noto Serif JP", serif; font-size: var(--fs-xl); }
/* 手織機：特徴の上の説明文と、最初の項目の間をあける */
.feat-card .loom-lead { margin-bottom: 0; padding-bottom: 22px; border-bottom: 1px dotted #c9c3ba; }
.feat-card .loom-lead + .media { margin-top: 0; padding-top: 24px; border-top: 0; }
.feat-card .media { align-items: center; }
/* S-5型：カマチ・組み立ての写真を大きく（元の写真の幅451pxまで） */
@media (min-width: 768px) { .feat-card .media:has(img[src*="img/s-10/"]) { grid-template-columns: minmax(0, 451px) minmax(0, 1fr); } }
/* 特徴の文章で指定した改行は、スマホでは使わず自然に折り返す */
@media (max-width: 767px) { .feat-card .media p br { display: none; } }
.feat-card .photo-grid { margin-top: 28px; padding-top: 28px; }
/* 手織機：特徴の写真を番号の札付きのカードに */
.card .pg-cards li { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; }
.pg-cards figure { display: flex; flex-direction: column; height: 100%; }
.pg-cards img { border: 0 !important; }
.pg-cards figcaption { display: flex; flex: 1; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; background: #faf7f0; border-top: 1px solid #ece4cf; font-size: var(--fs-s); line-height: 1.6; color: var(--ink); }
.pg-cards .pg-no { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #b09935; color: #fff; font-size: 13px; font-weight: 700; font-family: "Noto Sans JP", sans-serif; }
.pg-cards .pg-t { font-weight: 700; }
/* 手織機：変更・追加オプションの項目名を大きく */
.card .opt-grid h3 { font-family: "Noto Serif JP", serif; font-size: var(--fs-xl); }
.card .opt-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: 10px; padding-top: 8px; border-top: 1px dotted #d8d1c6; font-weight: 700; }
.opt-price .opt-plus { color: var(--red); font-size: 1.3em; white-space: nowrap; }
/* 手織機の全ページ：特徴の写真をS-5型と同じく大きく（改良点の小さい写真は元の大きさまで） */
@media (min-width: 768px) { .feat-card:not(.imp-card) .media { grid-template-columns: minmax(0, 451px) minmax(0, 1fr); } }
.imp-card .media img { width: auto; max-width: 100%; margin: 0 auto; }
.imp-card > p { margin-bottom: 4px; }
/* 特徴の文章：S-5型（改行位置を指定済み）以外は、指定の改行を使わず文節で自然に折り返す */
.feat-card .media p { word-break: auto-phrase; }
.feat-card:not(.keep-br) .media p br { display: none; }
.feat-card .media figure { display: flex; justify-content: center; }
.feat-card .media img { width: auto; max-width: 100%; }
/* 特徴：写真のない項目は見出しと文章を横いっぱいに */
.feat-card .media.no-img { grid-template-columns: minmax(0, 1fr) !important; }
.feat-card .loom-lead:empty { display: none; }
.feat-card > .media:first-child { border-top: 0; padding-top: 4px; }
.card .made-to-order h3 { font-family: "Noto Serif JP", serif; font-size: 26px; letter-spacing: .04em; }
@media (max-width: 767px) { .card .made-to-order h3 { font-size: 21px; } }
/* 特徴の箇条書き（見出し付き） */
.card .feat-points { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.card .feat-points li { margin: 0; padding: 8px 12px; border-left: 3px solid #c9b58a; background: #faf9f6; }
.feat-points b { display: block; margin-bottom: 2px; }
.feat-points li > p { margin: 0 0 4px; }
.card .fp-sub { margin: 4px 0 6px; padding: 0; list-style: none; }
.card .fp-sub li { position: relative; margin: 0 0 4px; padding: 0 0 0 1.1em; border: 0; background: none; }
.fp-sub li::before { content: "●"; position: absolute; left: 0; top: .45em; font-size: .6em; color: #b09935; }
.fp-sub b { display: inline; margin: 0 .3em 0 0; }
/* 京機：ケイベン機の写真は最初の箇条の中に。箇条書きはPCで2列 */
.feat-points .fp-fig { margin: 10px 0 0; } .feat-points .fp-fig img { display: block; width: 100%; height: auto; border: 1px solid #ece8e1; background: #fff; }
@media (min-width: 768px) { .media.no-img .feat-points:has(.fp-fig) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .media.no-img .feat-points:has(.fp-fig) > li:first-child { grid-row: span 3; } }
@media (min-width: 768px) { .media.no-img .feat-points:has(.fp-fig):has(> li:nth-child(5)) > li:first-child { grid-row: span 4; } }
.fp-sub b { display: block; margin: 0 0 1px; }
@media (min-width: 768px) { .media.no-img .feat-points:has(.fp-fig):not(:has(> li:nth-child(4))) > li:first-child { grid-row: span 2; } }
/* 綴機（箇条3つ）：頑丈な構造は横いっぱい。4項目を2×2、その下に「これにより…」と写真を横並び。下の段に残り2つを横並び */
@media (min-width: 768px) {
  .media.no-img .feat-points:has(.fp-fig):not(:has(> li:nth-child(4))) > li:first-child { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: center; }
  .media.no-img .feat-points:has(.fp-fig):not(:has(> li:nth-child(4))) > li:first-child > b, .media.no-img .feat-points:has(.fp-fig):not(:has(> li:nth-child(4))) > li:first-child > .fp-sub { grid-column: 1 / -1; }
  .media.no-img .feat-points:has(.fp-fig):not(:has(> li:nth-child(4))) > li:first-child .fp-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
  .media.no-img .feat-points:has(.fp-fig):not(:has(> li:nth-child(4))) > li:first-child > .fp-fig { margin: 0; padding: 0; }
}
/* 整経台（大）：縦長の写真は高さを抑える */
@media (min-width: 768px) { .loom-photo img[src*="seikei/c_ko"], .loom-photo img[src*="seikei/c_oo"] { width: auto; max-width: 100%; max-height: 500px; margin: 0 auto; } }
.loom-lead .feat-points { margin-top: 10px; }
@media (min-width: 768px) { .loom-lead .feat-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card .photo-grid figcaption.c-red { color: var(--red); font-weight: 700; }
/* 小型ドラム整経機：特徴の写真3枚を横並びに */
@media (min-width: 768px) { .card .photo-grid:has(img[src*="seikei/dr_"]), .card .photo-grid:has(img[src*="seikei/tms_"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; } }
.item-card .media p { word-break: auto-phrase; }
.card .price-note { margin: 12px 0 0; font-size: var(--fs-s); color: var(--muted); }
.card .tool-ttl { font-size: var(--fs-xl); }
/* 整経機用道具：写真の列を広げて大きく */
@media (min-width: 768px) { .tool-item .media { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: center; } }
.item-card .tool-figs img[src*="tama_1"] { width: 100%; max-height: none; }
.item-card .tool-figs img[src*="tama_2"] { width: 55%; max-height: none; }
@media (min-width: 768px) and (max-width: 1199px) { .tool-item .media { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); } }
/* 経巻台：巻取側・太鼓側の寸法と、延長棒ごとの奥行 */
.sd-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sd-g { padding: 10px; border: 1px solid #e3d9c4; border-radius: 4px; background: #faf7f0; }
.card .sd-g h4, .card .sd-depth h4 { margin: 0 0 8px; font-size: var(--fs-s); font-weight: 700; text-align: center; }
.card .sd-g .dims { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.sd-g .spec-chips:empty { display: none; }
.sd-depth { margin-top: 10px; padding: 10px 12px; border: 1px solid #e3d9c4; border-radius: 4px; background: #faf7f0; }
.card .sd-depth h4 { display: flex; align-items: center; justify-content: center; gap: 4px; }
.sd-depth svg { width: 16px; height: 16px; fill: none; stroke: #a34734; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card .sd-depth ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.card .sd-depth li { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.sd-depth li span { font-size: var(--fs-xs); color: var(--muted); }
.sd-depth li b { font-size: var(--fs-l); }
/* 経巻台（小型）：横長の3枚目は説明と一緒に上下中央へ（説明を写真のすぐ下に） */
@media (min-width: 768px) { .card .photo-grid:has(img[src*="seikei/tms_"]) { align-items: center; } .photo-grid img[src*="seikei/tms_3"] + figcaption { margin-top: 6px; } }
/* 経巻台（小型）：横長の写真は横いっぱいに、サイズ/付属品はその下で左右に分割 */
.loom-hero.hero-wide { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 768px) {
  .hero-wide .hero-spec { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px 20px; align-items: start; }
  .hero-wide .hero-spec > .hero-spec-ttl { grid-column: 1 / -1; }
  .hero-wide .hero-spec > .spec-acc { height: 100%; }
}
.hero-wide .loom-photo { padding: 20px; } .hero-wide .loom-photo img { max-width: 900px; margin: 0 auto; }
/* 経巻台（小型）：写真とサイズ/付属品を1枚のカードのように */
.loom-hero.hero-wide { gap: 0 !important; }
.hero-wide .loom-photo { border-bottom: 0; border-radius: 4px 4px 0 0; padding-bottom: 8px; }
.hero-wide .hero-spec { margin-top: 0 !important; border-top: 1px dashed #d8d1c6; border-radius: 0 0 4px 4px; }
.sd-groups + .spec-chips { margin-top: 10px; }
/* 経巻台：写真の高さを抑え、納期は右の列（箱千切の下）に */
.hero-wide .loom-photo img[src*="c_tatemaki_wide"] { max-height: 380px; width: auto; max-width: 100%; }
@media (min-width: 768px) {
  .hero-wide .hero-spec { grid-template-rows: auto auto 1fr; }
  .hero-wide .hero-spec > .spec-vis { grid-row: 2 / span 2; }
  .hero-wide .hero-spec > .spec-acc { height: auto; align-self: start; }
  .hero-wide .hero-spec > .lead-time { grid-column: 2; grid-row: 3; align-self: start; margin: 0; }
}
.price-box .pb-note { font-size: var(--fs-s); margin-top: 3px; }
/* 手織機の一覧：一式価格表・ロクロのカードの題をタイトルらしく */
.link-stack .link-cards b { display: block; margin-bottom: 4px; font-family: "Noto Serif JP", serif; font-size: var(--fs-l); letter-spacing: .04em; }
.link-stack .link-cards b { font-size: var(--fs-xl); }
.link-stack .link-cards span { font-size: var(--fs-s); font-weight: 400; line-height: 1.75; }
/* 織の道具：カードを大きく（PCは3列） */
@media (min-width: 768px) { .cat-grid:has(img[src*="new/oridogu/"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .cat-grid:has(img[src*="new/oridogu/"]) span { font-size: var(--fs-m); padding: 10px 28px 12px 14px; } }
.pc-plabel { margin-right: 8px; font-size: var(--fs-s); font-weight: 400; color: var(--ink); }
/* 絣の道具：左に写真、右に説明と価格の横長の行（元のページの並び） */
.card .row-items, .row-items { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.row-items .ri-item { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 20px; align-items: center; margin: 0; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; }
.ri-item figure { margin: 0; } .ri-item figure img { display: block; width: 100%; height: auto; border: 1px solid #ece8e1; border-radius: 3px; }
.ri-item a:hover img { border-color: #bdb4a6; }
.ri-body h3 { margin: 0 0 8px; font-family: "Noto Serif JP", serif; font-size: var(--fs-xl); }
.ri-body h3 a { color: var(--ink); text-decoration: none; } .ri-body h3 a:hover { text-decoration: underline; }
.ri-body > p { margin: 0 0 10px; font-size: var(--fs-s); line-height: 1.75; }
.ri-body > p small { font-size: var(--fs-xs); color: var(--muted); }
.ri-body .hi-spec { margin: 0; }
.ri-body .ri-more { margin: 8px 0 0; text-align: right; font-size: var(--fs-s); }
@media (max-width: 767px) { .row-items .ri-item { grid-template-columns: 1fr; } }
/* 絣の道具：詳細ページへのボタン（商品名の右） */
.ri-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ri-head h3 { margin: 0 !important; }
a.ri-more { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid #a34734; border-radius: 999px; background: #fff; color: #a34734; font-size: var(--fs-s); font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
a.ri-more span { font-size: 1.2em; line-height: 1; }
a.ri-more:hover { background: #a34734; color: #fff; }
/* 絣の道具：詳細ボタンは価格の右、角ばった濃い色の帯 */
.ri-buy { display: flex; align-items: center; gap: 12px; }
.ri-buy .hi-spec { flex: 1; min-width: 0; }
a.ri-more { align-self: stretch; padding: 0 18px; border: 0; border-radius: 3px; background: #444441; color: #fff; }
a.ri-more:hover { background: #2c2c2a; color: #fff; }
@media (max-width: 600px) { .ri-buy { flex-direction: column; align-items: stretch; } a.ri-more { justify-content: center; padding: 10px 18px; } }
.ri-buy a.ri-more { margin: 0; border-radius: 4px; }
/* 絣の道具：詳細ボタン。乗せると少し白っぽくなるだけ */
.ri-buy a.ri-more { transition: background .15s; cursor: pointer; }
.ri-buy a.ri-more:hover { background: #85847e; color: #fff; }
.ri-buy a.ri-more:focus-visible { outline: 2px solid #444441; outline-offset: 2px; }
/* 一覧の行：説明の横に小さな写真（回転計のUPなど） */
.ri-desc { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
.ri-desc > p { flex: 1; margin: 0; font-size: var(--fs-s); line-height: 1.75; }
.ri-sub { flex: none; width: 150px; margin: 0; }
.ri-sub img { display: block; width: 100%; height: auto; border: 1px solid #ece8e1; border-radius: 3px; }
.ri-sub figcaption { margin-top: 3px; font-size: var(--fs-xs); color: var(--muted); text-align: center; }
@media (max-width: 600px) { .ri-sub { width: 120px; } }
@media (max-width: 767px) { .row-items .ri-item { grid-template-columns: minmax(0, 1fr); } }
.ri-desc > p { min-width: 0; overflow-wrap: anywhere; }
/* 動画（16:9） */
.movie-box { position: relative; max-width: 720px; margin: 0 auto; aspect-ratio: 16 / 9; }
.movie-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 4px; }
/* 金筬在庫表・選択 */
.card .osa-lead { margin: 0 0 14px; text-align: center; font-family: "Noto Serif JP", serif; font-size: var(--fs-l); font-weight: 700; }
.card .osa-note { margin: 14px 0 0; text-align: center; font-size: var(--fs-s); }
.item-card .feat-points { margin: 8px 0 0; } @media (min-width: 768px) { .item-card .feat-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.item-card .hi-list + p { margin-top: 12px; }
.feat-points .fp-price { display: block; margin-top: 6px; font-weight: 700; }
.feat-points .fp-note { display: block; font-size: var(--fs-xs); color: var(--muted); }
/* 消耗品：バンコードの太さごとのカード */
.ban-wrap { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; align-items: start; }
.ban-fig { margin: 0; } .ban-fig img { display: block; width: 100%; height: auto; }
.ban-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ban-card { padding: 12px 14px; border: 1px solid #e6dcbd; border-radius: 6px; background: #fff; }
.ban-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed #e3ddd3; }
.ban-size { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #c0392b; color: #fff; font-size: 24px; font-weight: 700; line-height: 1; }
.ban-size small { font-size: 11px; font-weight: 400; }
.ban-card:nth-child(2) .ban-size { width: 64px; height: 64px; font-size: 28px; }
.ban-ttl { display: grid; gap: 2px; } .ban-ttl .hi-no { justify-self: start; } .ban-ttl b { font-size: var(--fs-m); }
.ban-price { color: var(--red); font-weight: 700; font-size: var(--fs-l); }
.card .ban-cap { margin: 10px 0 6px; font-size: var(--fs-xs); color: var(--muted); }
.card .ban-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.card .ban-tools li { margin: 0; padding: 4px 10px; border: 1px solid #e3d9c4; border-radius: 4px; background: #faf7f0; font-size: var(--fs-s); line-height: 1.5; }
.ban-tools li a { color: var(--ink); text-decoration: none; font-weight: 700; } .ban-tools li a:hover { text-decoration: underline; }
.ban-tools li small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.card .ban-note { margin: 10px 0 0; font-size: var(--fs-s); font-weight: 700; color: #0b5cad; }
@media (max-width: 767px) { .ban-wrap, .ban-cards { grid-template-columns: minmax(0, 1fr); } .ban-fig { max-width: 160px; } }
/* バンコード：落ち着いた見た目に（色を抑え、道具は札でなく一覧の行に） */
.ban-cards { align-items: stretch; }
.ban-card { border-color: var(--line); border-radius: 4px; }
.ban-size, .ban-card:nth-child(2) .ban-size { width: 46px; height: 46px; border: 2px solid #b09935; background: #fff; color: #6b5a2a; font-size: 20px; }
.ban-head { align-items: center; }
.ban-ttl { grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; width: 100%; }
.ban-ttl .hi-no { grid-row: 1; } .ban-ttl b { grid-row: 1; }
.ban-ttl .ban-price { grid-column: 1 / -1; font-size: var(--fs-m); }
.card .ban-cap { margin: 10px 0 2px; font-weight: 700; color: var(--ink); }
.card .ban-tools { display: block; }
.card .ban-tools li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 10px; padding: 6px 0; border: 0; border-top: 1px dotted #e3ddd3; border-radius: 0; background: none; }
.card .ban-tools li:first-child { border-top: 0; }
.ban-tools li a { font-weight: 400; color: var(--link); }
.ban-tools li small { display: inline; }
.card .ban-note { font-weight: 400; color: var(--muted); }
.ban-ttl { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.ban-ttl b { white-space: nowrap; }
.ban-ttl .ban-price { flex-basis: 100%; }
.card .ban-side .ban-note { margin: 8px 0 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: #faf9f6; text-align: center; font-size: var(--fs-s); color: var(--ink); line-height: 1.6; }
@media (max-width: 767px) { .ban-side { display: flex; align-items: center; gap: 12px; } .card .ban-side .ban-note { margin: 0; } .ban-fig { width: 120px; flex: none; } }
.card .ban-side .ban-fig { margin: 0 !important; }
.item-card > p { word-break: auto-phrase; }
/* 消耗品：回転計セットの「セット内容」 */
.ks-media { align-items: center; }
.card .ks-lead { margin: 0 0 10px; font-weight: 700; }
.ks-box { padding: 10px 14px; border: 1px solid var(--line); border-radius: 4px; background: #faf9f6; }
.card .ks-cap { margin: 0 0 6px; font-size: var(--fs-xs); color: var(--muted); }
.card .ks-items { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.card .ks-items li { margin: 0; padding: 3px 10px; border: 1px solid #e3d9c4; border-radius: 3px; background: #fff; font-size: var(--fs-s); }
.card .ks-doc { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--muted); }
/* 消耗品：使用している道具を1行に */
.card .use-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 10px 0 0; font-size: var(--fs-s); }
.use-line .use-cap { margin-right: 4px; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.use-line a { padding: 2px 10px; border: 1px solid #e3d9c4; border-radius: 3px; background: #faf7f0; color: var(--ink); text-decoration: none; }
.use-line a:hover { border-color: #b09935; }
.use-line .use-cap { flex-basis: 100%; margin: 0 0 2px; }
.card .gear-note { margin: 10px 0 0; font-size: var(--fs-s); } .item-card > .ks-box { margin-top: 10px; }
/* 別注道具：元のページのように大きな写真の下に説明と価格 */
/* 別注道具：主写真と、その横に部分のアップ写真（線や枠は付けない） */
.bf-gallery { margin: 0 0 16px; text-align: center; }
.bf-gallery figure { margin: 0; }
.bf-gallery img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.bf-gallery.has-sub { display: flex; justify-content: center; align-items: flex-end; gap: 32px; }
.bf-gallery.has-sub .bf-main { flex: 0 1 auto; min-width: 0; }
.bf-subs { display: grid; gap: 14px; flex: 0 0 240px; }
.bf-subs img { width: 100%; border-radius: 6px; }
.bf-item .bf-gallery img { border: 0 !important; box-shadow: none !important; }
/* 板車・紙管巻と絣梯子台のアップは背景が白いので枠を付ける */
.bf-item .bf-gallery .bf-subs img[src*="sub_ita_si"], .bf-item .bf-gallery .bf-subs img[src*="sub_hasigo_dai"] { border: 1px solid #e2ddd5 !important; }
@media (max-width: 640px) {
  .bf-gallery.has-sub { flex-direction: column; align-items: stretch; gap: 14px; }
  .bf-subs:has(> figure:only-child) { width: 70%; margin: 0 auto; }
  .bf-subs { flex: none; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
}
.bf-item > p { margin: 0 0 12px; }
.bf-lead { margin: 0 0 6px; font-size: var(--fs-s); color: var(--muted); }

/* 小道具：静輪の説明（前置き → 2つの箱 → ご注意点） */
.zz-lead { margin: 0 0 16px; }
.zz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 14px; }
.zz-box { background: #faf8f4; border-radius: 8px; padding: 16px 18px; }
.zz-box h3 { margin: 0 0 8px; font-size: 1rem; color: #5a4a3a; }
.zz-box p { margin: 0; }
.zz-unit { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 4px 0 10px !important; color: #8a6d1e; }
.zz-unit b { font-size: 1.5rem; }
.zz-note { border-left: 4px solid #b5432f; background: #fbf3f1; border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 0 0 16px; font-size: .92rem; }
.zz-note p { margin: 0; }
.zz-note .zz-note-ttl { font-weight: 700; color: #b5432f; margin-bottom: 4px; }
@media (max-width: 640px) {
  .zz-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 小道具：綜絖通しの対応するワイヤーの目（大目～極小目） */
.wire-range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0; padding: 0 14px; }
.wr-lbl { font-size: .85rem; color: #6b5d4f; }
.wr-cells { display: inline-flex; border-radius: 6px; overflow: hidden; border: 1px solid #e2ddd5; }
.wr-cell { min-width: 4.2em; padding: 4px 10px; text-align: center; font-size: .85rem; color: #b9b1a6; background: #faf8f4; }
.wr-cell + .wr-cell { border-left: 1px solid #e2ddd5; }
.wr-cell.on { color: #fff; background: #8a6d1e; font-weight: 700; }
.wr-cell.on + .wr-cell.on { border-left-color: rgba(255,255,255,.35); }

/* 小道具：メガネ各種（自動筬通しのカードを流用） */
.jd-ban.mg-ban { font-size: 26px; }
.jd-fit .mg-note { margin-top: 4px; line-height: 1.6; }
.mg-size { margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); }

/* 写真と文章の横並びで、写真を文章の上下中央に（小道具のハサミなど） */
.media.mid { align-items: center; }

/* 綴れ用・爪ヤスリ：使い方の写真2枚を同じ高さで横に */
.ty-photos { display: flex; gap: 10px; margin-top: 10px; }
.card .ty-photos img { height: 110px; width: auto; max-width: none; border-radius: 6px; border: 0; }
@media (max-width: 480px) { .card .ty-photos img { height: 90px; } }

/* 小道具：メガネ各種の写真（番号・目盛りの名前は文字で。以前の画像の並びに合わせる） */
.mg-photos { max-width: 600px; margin: 0 auto 18px; }
.mg-all { position: relative; margin: 0 0 14px; }
.mg-all img { display: block; width: 100%; height: auto; border: 0 !important; }
.mg-num { position: absolute; transform: translate(-50%, -50%); font-family: "Noto Serif JP", serif; font-size: 22px; font-weight: 700; color: #3d352e; line-height: 1; }
.card .mg-all .mg-names { display: grid; grid-template-columns: 33% 26% 41%; margin-top: 8px; text-align: center; font-family: "Noto Serif JP", serif; font-size: 17px; font-weight: 700; color: #3d352e; }
.mg-detail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mg-col { margin: 0; padding: 0 12px; display: flex; flex-direction: column; align-items: center; }
.mg-col + .mg-col { border-left: 2px solid #ddd8cf; }
.mg-frame { display: grid; grid-template-columns: 1.4em minmax(0, 1fr) 1.4em; grid-template-rows: 1.6em auto 1.6em; align-items: center; width: 100%; }
.mg-t, .mg-b { grid-column: 2; text-align: center; font-size: 12px; font-weight: 700; color: #a34734; white-space: nowrap; }
.mg-t { grid-row: 1; } .mg-b { grid-row: 3; }
.mg-l, .mg-r { grid-row: 2; writing-mode: vertical-rl; justify-self: center; font-size: 12px; font-weight: 700; color: #a34734; white-space: nowrap; }
.mg-l { grid-column: 1; } .mg-r { grid-column: 3; }
.mg-pic { grid-column: 2; grid-row: 2; position: relative; }
.mg-pic img { display: block; width: 100%; height: auto; border: 0 !important; }
.mg-dim { position: absolute; height: 8px; border: 2px solid #a34734; border-top: 0; transform: translateY(-50%); }
.mg-fold { width: 100%; margin-top: 10px; padding: 0 1.4em; text-align: center; }
.mg-fold img { display: block; width: 100%; height: auto; border: 0 !important; }
.mg-fold span { display: block; font-size: 12px; font-weight: 700; color: #3d352e; }
@media (max-width: 600px) {
  .card .mg-all .mg-names { font-size: 11px; white-space: nowrap; letter-spacing: -.02em; }
  .mg-num { font-size: 15px; }
  .mg-fold span { white-space: nowrap; }
  .mg-col { padding: 0 4px; }
  .mg-frame { grid-template-columns: 1.2em minmax(0, 1fr) 1.2em; }
  .mg-t, .mg-b, .mg-l, .mg-r, .mg-fold span { font-size: 10px; }
  .mg-fold { padding: 0 1.2em; }
  .mg-fold span { margin: 0 -1.2em; }
  .mg-yomi { display: none; }
}

/* 小道具：巻尺の表・裏のメモリ */
.card .mk-table { width: auto; min-width: 300px; margin-top: 10px; border-collapse: collapse; font-size: var(--fs-s); }
.mk-table th, .mk-table td { padding: 5px 16px; border-bottom: 1px solid #e6e0d6; text-align: center; }
.mk-table thead th { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.mk-table tbody th { font-weight: 700; color: #8a6d1e; }
.mk-table td { font-weight: 700; }

/* 説明の横に添える小さな写真：文章の高さにぴったり合わせ、説明は写真の上に重ねる */
.ri-desc { align-items: stretch; }
.ri-sub { position: relative; display: flex; flex-direction: column; width: 140px; min-height: 80px; overflow: hidden; border-radius: 4px; }
.ri-sub img { flex: 1 1 0; min-height: 0; width: 100%; height: auto; object-fit: cover; border: 0; }
.ri-sub figcaption { position: absolute; left: 4px; bottom: 4px; margin: 0; padding: 0 6px; border-radius: 3px; background: rgba(255,255,255,.88); font-size: 11px; line-height: 1.6; color: #3d352e; }
@media (max-width: 600px) { .ri-sub { width: 110px; max-height: 110px; } }

/* 絣用自在枠・回転計付：特徴の写真3枚を横並び */
@media (min-width: 768px) { .card .photo-grid:has(img[src*="kz/zk.jpg"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }

/* 回転計セットの中身：広い画面では1列に */
@media (min-width: 1240px) {
  .card .ks-items { flex-wrap: nowrap; gap: 5px; }
  .card .ks-items li { padding: 3px 8px; font-size: var(--fs-xs); white-space: nowrap; }
}

/* 絹糸（s_kinu.html） */
.kn-intro { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; align-items: center; padding: 16px; }
.kn-compare { position: relative; margin: 0; }
.kn-compare img { display: block; width: 100%; height: auto; border-radius: 6px; }
.kn-lb { position: absolute; bottom: 10px; transform: translateX(-50%); padding: 2px 12px; border-radius: 3px; background: rgba(255,255,255,.92); font-family: "Noto Serif JP", serif; font-weight: 700; font-size: 15px; }
.kn-lb.se, .kn-tag.se { color: #2f6aa3; }
.kn-lb.ki, .kn-tag.ki { color: #b5432f; }
.kn-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.kn-cards li { margin: 0; }
.kn-cards a { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border: 1px solid var(--line, #e3ddd3); border-radius: 6px; background: #fff; color: var(--ink); text-decoration: none; transition: background .15s; }
.kn-cards a:hover { background: #faf8f4; }
.kn-cards figure { flex: none; width: 120px; margin: 0; }
.kn-cards img { display: block; width: 100%; height: auto; border-radius: 4px; }
.kn-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kn-tag { font-size: var(--fs-xs); font-weight: 700; }
.kn-txt b { font-family: "Noto Serif JP", serif; font-size: 18px; line-height: 1.4; }
.kn-go { flex: none; font-size: 22px; color: #8a8378; }
.kn-note p { margin: 0 0 10px; font-size: var(--fs-s); line-height: 1.8; }
.kn-note p:last-child { margin: 0; }
@media (max-width: 600px) {
  .kn-intro { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .kn-cards { grid-template-columns: minmax(0, 1fr); }
  .kn-cards figure { width: 100px; }
  .kn-txt b { font-size: 16px; }
}
.kn-tag.co, .kn-tag.asa { color: #8a6d1e; }
.kn-sub { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.kn-note a { color: #2f6aa3; }

/* オーガニックコットン（s_ito_og.html）・糸の商品カード */
.og-hero { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; }
.og-hero figure { margin: 0; } .og-hero img { display: block; width: 100%; height: auto; }
.og-hero p { margin: 0 0 10px; font-size: var(--fs-s); line-height: 1.85; }
.og-hero .og-brand { font-family: "Noto Serif JP", serif; font-size: 20px; font-weight: 700; letter-spacing: .06em; }
.og-hero a { color: #2f6aa3; }
.yc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.yc-cards > li { display: flex; flex-direction: column; margin: 0; padding: 10px 12px 12px; border: 1px solid #e6dcbd; border-radius: 6px; background: #fff; }
.yc-cards figure { margin: 0 0 8px; } .yc-cards img { display: block; width: 100%; height: auto; border-radius: 3px; }
.yc-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.yc-ban { font-family: "Noto Serif JP", serif; font-size: 22px; line-height: 1.3; }
.yc-sub { font-size: var(--fs-xs); color: var(--muted); }
.yc-spec { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 8px 0; padding: 6px 0; border-top: 1px dotted #d8cfb8; border-bottom: 1px dotted #d8cfb8; font-size: var(--fs-xs); }
.yc-spec dt { color: var(--muted); } .yc-spec dd { margin: 0; text-align: right; font-weight: 700; }
.yc-foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; }
.yc-unit { font-size: var(--fs-xs); color: var(--muted); }
.yc-price { font-size: var(--fs-l); font-weight: 700; color: var(--red); }
.yc-price .tax { font-size: 11px; font-weight: 400; }
.yc-note { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.7; }
.yb-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.yb-list { margin: 0; padding-left: 1.2em; font-size: var(--fs-s); line-height: 1.8; }
.yb-list li { margin-bottom: 8px; } .yb-list small { color: var(--muted); }
.yb-disc { padding: 12px 14px; border-radius: 6px; background: #faf8f4; border: 1px solid #ece6dc; }
.yb-disc .yb-cap { margin: 0 0 6px; font-size: var(--fs-xs); font-weight: 700; color: #8a6d1e; }
.yb-disc ul { margin: 0; padding: 0; list-style: none; }
.yb-disc li { display: flex; align-items: baseline; gap: 6px; padding: 4px 0; border-bottom: 1px dotted #d8cfb8; font-size: var(--fs-s); }
.yb-disc li b { min-width: 3.6em; font-size: 17px; } .yb-disc li span { margin-left: auto; } .yb-disc em { font-style: normal; font-weight: 700; color: var(--red); }
.yb-disc .yb-small { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 600px) {
  .og-hero { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
  .yb-card { grid-template-columns: minmax(0, 1fr); }
  .yc-cards { grid-template-columns: minmax(0, 1fr); }
}

/* 糸の商品カード：以前の表の並び（商品名・画像｜詳細｜単位・状態｜価格）で横長に、縦に並べる */
.yc-cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.yc-cards > li { display: grid; grid-template-columns: 210px minmax(0, 1fr) auto auto; grid-template-areas: "head spec unit price" "fig spec unit price"; align-items: center; gap: 4px 20px; padding: 10px 16px; }
.yc-cards .yc-head { grid-area: head; }
.yc-cards figure { grid-area: fig; margin: 0; }
.yc-cards .yc-spec { grid-area: spec; margin: 0; padding: 0 0 0 18px; border: 0; border-left: 1px dotted #d8cfb8; font-size: var(--fs-s); max-width: 260px; }
.yc-cards .yc-foot { display: contents; }
.yc-cards .yc-unit { grid-area: unit; font-size: var(--fs-s); color: var(--ink); white-space: nowrap; }
.yc-cards .yc-price { grid-area: price; white-space: nowrap; }
.yc-cards .yc-ban { font-size: 20px; }
@media (max-width: 600px) {
  .yc-cards > li { grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "head head" "fig spec" "unit price"; gap: 6px 12px; padding: 10px 12px; }
  .yc-cards .yc-spec { padding: 0 0 0 10px; border-left: 1px dotted #d8cfb8; max-width: none; font-size: var(--fs-xs); }
  .yc-cards .yc-price { justify-self: end; }
  .yc-cards .yc-unit { font-size: var(--fs-xs); color: var(--muted); }
}

/* 糸の商品カード：詳細を小さなタイルに、単位・状態を札に */
.yc-cards .yc-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 360px; padding: 0; border: 0; list-style: none; }
.yc-cards .yc-spec li { margin: 0; padding: 6px 4px; border-radius: 6px; background: #faf8f4; text-align: center; line-height: 1.35; }
.yc-cards .yc-spec small { display: block; font-size: 11px; color: var(--muted); }
.yc-cards .yc-spec b { font-size: 15px; }
.yc-cards .yc-unit { display: flex; gap: 4px; }
.yc-cards .yc-unit i { font-style: normal; padding: 1px 8px; border: 1px solid #e3d9c4; border-radius: 999px; font-size: var(--fs-xs); color: var(--ink); background: #fff; }
.yc-cards .yc-unit i.yc-st { border-color: #e6dcbd; background: #fbf6e8; color: #8a6d1e; }
.yc-cards .yc-price { font-size: 22px; }
@media (max-width: 600px) {
  .yc-cards .yc-spec { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 0; border: 0; }
  .yc-cards .yc-spec li { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 8px; text-align: left; }
  .yc-cards .yc-spec small { display: inline; }
  .yc-cards .yc-spec b { font-size: 13px; }
  .yc-cards .yc-price { font-size: 20px; }
}

/* 糸のご購入について：発送・来店の2枚と梱包の囲み */
.yb-ways { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.yb-way { padding: 12px 14px; border: 1px solid #ece6dc; border-radius: 6px; background: #fff; }
.yb-way p { margin: 0; font-size: var(--fs-xs); line-height: 1.7; color: var(--muted); }
.yb-way .yb-way-ttl { display: inline-block; margin-bottom: 4px; padding: 1px 10px; border-radius: 999px; background: #8a6d1e; color: #fff; font-weight: 700; }
.yb-way + .yb-way .yb-way-ttl { background: #6b5d4f; }
.yb-way .yb-way-big { margin: 2px 0 4px; font-size: var(--fs-s); color: var(--ink); }
.yb-way .yb-way-big b { margin: 0 2px; font-family: "Noto Serif JP", serif; font-size: 28px; line-height: 1; color: var(--red); }
.yb-pack { margin-top: 10px; padding: 10px 14px; border-left: 3px solid #c9b77a; background: #faf8f4; border-radius: 0 6px 6px 0; }
.yb-pack .yb-pack-ttl { margin: 0 0 4px; font-size: var(--fs-s); font-weight: 700; }
.yb-pack ul { margin: 0; padding-left: 1.2em; font-size: var(--fs-xs); line-height: 1.8; }
@media (max-width: 600px) { .yb-ways { grid-template-columns: minmax(0, 1fr); } }

/* 糸のご購入について：左（発送・来店・梱包）と右（割引）の上下をそろえる */
.yb-card { align-items: stretch; }
.yb-main { display: flex; flex-direction: column; }
.yb-main .yb-pack { flex: 1; }
.yb-disc { display: flex; flex-direction: column; }
.yb-disc ul { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.yb-disc li { padding: 8px 0; }
@media (max-width: 600px) { .yb-disc ul { flex: none; } }
.yb-disc .yb-cap { align-self: flex-start; padding: 1px 10px; border-radius: 999px; background: #a34734; color: #fff; }

/* 糸見本帳の写真を大きめに */
.item-card .media.mid:has(img[src*="og/mihon"]) { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.item-card .media img[src*="og/mihon"] { width: 100%; max-width: 400px; max-height: none; }
@media (max-width: 600px) { .item-card .media.mid:has(img[src*="og/mihon"]) { grid-template-columns: minmax(0, 1fr); } }
.yc-head { align-items: center; }
.yc-head .yc-no { font-size: 11px; }

/* 糸の商品カード：補足の文字と写真を少し大きく */
.yc-cards .yc-sub { font-size: var(--fs-s); color: #5a4f45; }
.yc-cards > li { grid-template-columns: 240px minmax(0, 1fr) auto auto; }
@media (max-width: 600px) { .yc-cards > li { grid-template-columns: 136px minmax(0, 1fr); } }

/* 綿糸（s_ito_men.html）：生成・精練の2つの価格を持つ糸のカード */
.men-hero { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.yc-multi > li { grid-template-columns: 240px minmax(0, 1fr) auto 230px; grid-template-areas: "head mid unit prs" "fig mid unit prs"; }
.yc-multi .yc-mid { grid-area: mid; }
.yc-multi .yc-mid .yc-spec { grid-area: auto; }
.yc-multi .yc-prs { grid-area: prs; display: flex; flex-direction: column; gap: 6px; }
.yc-pr { display: flex; align-items: center; gap: 8px; }
.yc-pr .yc-no { font-size: 11px; }
.yc-pr .yc-st { font-style: normal; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); border: 1px solid #e6dcbd; background: #fbf6e8; color: #8a6d1e; }
.yc-pr .yc-st.se { border-color: #cfdcea; background: #f1f6fb; color: #2f6aa3; }
.yc-pr .yc-price { margin-left: auto; font-size: 20px; }
.yc-use { margin: 0 0 6px; font-size: var(--fs-xs); color: #5a4f45; }
.yc-about { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid #c9b77a; border-radius: 0 6px 6px 0; background: #faf8f4; font-size: var(--fs-s); line-height: 1.8; }
.yc-about p { margin: 0; }
.yc-about .yc-about-ttl { font-weight: 700; color: #8a6d1e; }
.yc-about2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.yc-lead { margin: 0 0 10px; font-size: var(--fs-s); font-weight: 700; color: var(--red); }
@media (max-width: 900px) and (min-width: 601px) {
  .yc-multi > li { grid-template-columns: 200px minmax(0, 1fr) 210px; grid-template-areas: "head head prs" "fig mid prs" "unit mid prs"; }
}
@media (max-width: 600px) {
  .men-hero { grid-template-columns: minmax(0, 1fr); }
  .yc-multi > li { grid-template-columns: 136px minmax(0, 1fr); grid-template-areas: "head head" "fig mid" "unit unit" "prs prs"; }
  .yc-multi .yc-prs { gap: 4px; padding-top: 6px; border-top: 1px dotted #d8cfb8; }
  .yc-about2 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
.men-hero { grid-template-columns: minmax(0, 340px); justify-content: center; }

/* 綿糸：生成と精練の写真（価格の札と同じ色の札で） */
.men-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 150px)); justify-content: center; gap: 24px; padding: 16px; }
.men-cmp figure { margin: 0; text-align: center; }
.men-cmp .mc-pic img { display: block; width: 100%; height: auto; border-radius: 6px; }
.men-cmp figcaption { margin-top: 8px; }
.men-cmp .yc-st { display: inline-block; font-style: normal; padding: 2px 18px; border-radius: 999px; font-size: var(--fs-s); font-weight: 700; border: 1px solid #e6dcbd; background: #fbf6e8; color: #8a6d1e; }
.men-cmp .yc-st.se { border-color: #cfdcea; background: #f1f6fb; color: #2f6aa3; }
@media (max-width: 600px) { .men-cmp { gap: 12px; padding: 12px; } }
@media (max-width: 600px) { .men-cmp { grid-template-columns: repeat(2, minmax(0, 130px)); } }

/* 綿糸：一番上に生成・精練の写真と「糸のご購入について」を1枚に */
.men-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; padding: 18px; }
.men-top .men-cmp { padding: 0; gap: 12px; grid-template-columns: repeat(2, 130px); }
.ybc { font-size: var(--fs-xs); line-height: 1.7; }
.ybc p { margin: 0; }
.ybc .ybc-ttl { margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid #e6e0d6; font-family: "Noto Serif JP", serif; font-size: 16px; font-weight: 700; }
.ybc-ways { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 8px; }
.ybc-ways > div, .ybc-disc { padding: 8px 10px; border: 1px solid #ece6dc; border-radius: 6px; background: #fff; }
.ybc-tag { display: inline-block; padding: 0 9px; border-radius: 999px; background: #8a6d1e; color: #fff; font-size: 11px; font-weight: 700; }
.ybc-tag2 { background: #6b5d4f; } .ybc-tag3 { background: #a34734; }
.ybc .ybc-big { margin: 2px 0; font-size: var(--fs-s); }
.ybc-big b { margin: 0 2px; font-family: "Noto Serif JP", serif; font-size: 22px; line-height: 1; color: var(--red); }
.ybc .ybc-txt { color: var(--muted); }
.ybc-disc { margin-top: 8px; }
.ybc-disc ul { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 2px; padding: 0; list-style: none; font-size: var(--fs-s); }
.ybc-disc b { margin-right: 2px; } .ybc-disc em { margin-left: 3px; font-style: normal; font-weight: 700; color: var(--red); }
.ybc-pack { margin-top: 8px; padding: 6px 10px; border-left: 3px solid #c9b77a; border-radius: 0 6px 6px 0; background: #faf8f4; }
.ybc .ybc-pack-ttl { font-weight: 700; color: var(--ink); }
@media (max-width: 760px) {
  .men-top { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; }
  .men-top .men-cmp { justify-content: center; }
  .ybc-ways { grid-template-columns: minmax(0, 1fr); }
}

/* 糸見本帳（小さい版） */
.ymc { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px 18px; }
.ymc figure { margin: 0; } .ymc img { display: block; width: 100%; height: auto; }
.ymc p { margin: 0; }
.ymc .ybc-ttl { margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #e6e0d6; font-family: "Noto Serif JP", serif; font-size: 16px; font-weight: 700; }
.ymc-lead { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 6px !important; }
.ymc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.ymc-list li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px dotted #d8cfb8; font-size: var(--fs-xs); }
.ymc-list .hi-no { flex: none; font-size: 10px; }
.ymc-nm { flex: 1; min-width: 0; line-height: 1.5; }
.ymc-pr { flex: none; font-weight: 700; color: var(--red); white-space: nowrap; }
.ymc-pr .tax { display: none; }
@media (max-width: 760px) {
  .ymc { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
  .ymc figure { width: 160px; margin: 0 auto; }
  .ymc-list { grid-template-columns: minmax(0, 1fr); }
}

/* 糸のご購入について（小さい版）：3つを1列に、梱包は1行 */
.ybc-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.4fr); gap: 8px; }
.ybc-row > div { padding: 8px 10px; border: 1px solid #ece6dc; border-radius: 6px; background: #fff; }
.ybc-row .ybc-disc { margin: 0; }
.ybc-row .ybc-disc ul { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 2px 12px; margin: 4px 0 2px; }
.ybc-row .ybc-disc li { white-space: nowrap; }
.ybc-row .ybc-disc em { margin-left: 2px; }
.ybc > .ybc-pack { margin-top: 8px; padding: 5px 10px; border-left: 3px solid #c9b77a; border-radius: 0 6px 6px 0; background: #faf8f4; color: var(--muted); }
@media (max-width: 1100px) { .ybc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ybc-row .ybc-disc { grid-column: 1 / -1; } }
.ybc-row .ybc-disc ul { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 4px 0; font-size: var(--fs-xs); }
.ybc-row .ybc-disc li { display: flex; justify-content: space-between; padding: 1px 0; border-bottom: 1px dotted #e3ddd3; }
.ybc-row .ybc-disc li b { font-size: var(--fs-s); }
@media (max-width: 1100px) { .ybc-row .ybc-disc ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; } }
.ybc-row .ybc-disc li { justify-content: flex-start; gap: 4px; }
.ybc-row .ybc-disc li em { margin-left: auto; }
@media (max-width: 600px) { .ybc-row .ybc-disc ul { grid-template-columns: minmax(0, 1fr); } }

/* 糸のご購入について：発送と来店を1つの箱に */
.ybc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ybc-row .ybc-disc { grid-column: auto; }
.ybc-qty { display: flex; flex-direction: column; justify-content: center; gap: 0; }
.ybc-q { display: grid; grid-template-columns: 6.6em auto; align-items: center; gap: 0 8px; padding: 6px 0; }
.ybc-q + .ybc-q { border-top: 1px dotted #e3ddd3; }
.ybc-q .ybc-tag { justify-self: start; text-align: center; min-width: 6.4em; }
.ybc-q .ybc-txt { grid-column: 1 / -1; margin-top: 2px !important; }
@media (max-width: 1100px) { .ybc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ybc-row .ybc-disc { grid-column: auto; } .ybc-row .ybc-disc ul { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .ybc-row { grid-template-columns: minmax(0, 1fr); } }
.ybc-q { grid-template-columns: max-content auto; }
.ybc-q .ybc-tag { white-space: nowrap; min-width: 7.2em; }
.ybc-q { grid-template-columns: max-content minmax(0, 1fr); }
.ybc-q .ybc-big { white-space: nowrap; justify-self: start; }

/* 糸のご購入について：左右の箱を同じ作り（見出し・行・※）に */
.ybc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.ybc-box { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid #ece6dc; border-radius: 6px; background: #fff; }
.ybc-box .ybc-tag { align-self: flex-start; }
.ybc-rows { flex: 1; display: flex; flex-direction: column; justify-content: center; margin: 6px 0; padding: 0; list-style: none; }
.ybc-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dotted #e3ddd3; }
.ybc-rows li > span { font-size: var(--fs-s); font-weight: 700; color: var(--ink); white-space: nowrap; }
.ybc-rows em { font-style: normal; font-size: var(--fs-s); color: var(--ink); white-space: nowrap; }
.ybc-rows em b { margin: 0 2px; font-family: "Noto Serif JP", serif; font-size: 20px; line-height: 1; color: var(--red); }
@media (max-width: 600px) { .ybc-row { grid-template-columns: minmax(0, 1fr); } }
.card .ybc-rows { padding: 0; margin: 6px 0; }
.card .ybc-rows li { margin: 0; }
.ybc-box .ybc-tag { padding: 2px 12px; font-size: var(--fs-s); }
.ybc .ybc-ttl { font-size: 19px; }
.ymc .ybc-ttl { font-size: 19px; }

/* 糸見本帳（小さい版）：1冊ずつのカードとセット */
.ymc { align-items: start; }
.ymc-free { margin-left: 10px; padding: 1px 10px; border-radius: 999px; background: #a34734; color: #fff; font-family: inherit; font-size: 12px; font-weight: 700; vertical-align: middle; }
.card .ymb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.card .ymb li { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; padding: 8px 8px 10px; border: 1px solid #ece6dc; border-radius: 6px; background: #fff; text-align: center; }
.ymb .hi-no { font-size: 10px; }
.ymb-k { margin-top: 2px; font-family: "Noto Serif JP", serif; font-size: 30px; line-height: 1.2; color: #3d352e; }
.ymb-nm { font-size: var(--fs-xs); font-weight: 700; }
.ymb-in { font-size: 11px; line-height: 1.5; color: var(--muted); }
.ymb-st { font-size: 11px; color: #8a6d1e; }
.ymb-pr { margin-top: auto; padding-top: 4px; font-size: 17px; font-weight: 700; color: var(--red); white-space: nowrap; }
.ymb-pr .tax { font-size: 10px; font-weight: 400; }
.card .yms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.card .yms li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border: 1px solid #e6dcbd; border-radius: 6px; background: #fbf8ef; }
.yms .hi-no { font-size: 10px; }
.yms-nm { font-size: var(--fs-xs); font-weight: 700; } .yms-nm b { margin-left: 2px; font-size: 16px; }
.yms-in { font-size: 11px; color: var(--muted); }
.yms .ymb-pr { margin: 0 0 0 auto; padding: 0; }
@media (max-width: 1100px) { .card .ymb { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card .yms { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .yms li { flex-wrap: wrap; } }
.card .yms li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no nm pr" "no in pr"; gap: 0 10px; align-items: center; }
.yms .hi-no { grid-area: no; } .yms-nm { grid-area: nm; white-space: nowrap; } .yms-in { grid-area: in; } .yms .ymb-pr { grid-area: pr; margin: 0; }
@media (max-width: 600px) { .card .yms li { grid-template-areas: "no nm nm" "in in pr"; } }
.card .yms li { grid-template-columns: auto max-content minmax(0, 1fr); padding: 8px 10px; }
.yms .ymb-pr { justify-self: end; font-size: 16px; }
.yms-nm b { font-size: 15px; }

/* 糸見本帳：写真を背景に（白い薄幕を重ね、カードは白で読みやすく） */
.ymc.ymc-bg { position: relative; display: block; overflow: hidden; padding: 22px 24px; background: url(../img/new/og/mihon_bg.jpg) center / cover no-repeat; }
.ymc.ymc-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.80), rgba(255,255,255,.62)); }
.ymc.ymc-bg > div { position: relative; }
.ymc.ymc-bg .ybc-ttl { border-bottom-color: rgba(138,109,30,.35); }
.ymc.ymc-bg .ymc-lead { color: #4a4038; }
.ymc.ymc-bg .ymb li { background: rgba(255,255,255,.94); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.ymc.ymc-bg .yms li { background: rgba(251,248,239,.95); }
@media (max-width: 600px) { .ymc.ymc-bg { padding: 14px 12px; } }
.ymc.ymc-bg { background: #fff url(../img/new/og/mihon_bg.jpg) right 12px center / auto 92% no-repeat; }
.ymc.ymc-bg::before { background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.80) 55%, rgba(255,255,255,.55) 100%); }
@media (max-width: 600px) { .ymc.ymc-bg { background-position: center bottom 8px; background-size: 90% auto; } }

/* 糸見本帳：写真は左に小さく、カードは右 */
.ymc.ymc-side { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; align-items: center; }
.ymc.ymc-side figure { margin: 0; } .ymc.ymc-side img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .ymc.ymc-side { grid-template-columns: minmax(0, 1fr); } .ymc.ymc-side figure { width: 180px; margin: 0 auto; } }
.ymc.ymc-side .yms li { grid-template-columns: auto minmax(0, 1fr) auto; }
.ymc.ymc-side .yms-nm { white-space: normal; }
.ymc.ymc-side .yms-nm b { white-space: nowrap; }

/* 糸見本帳：写真を大きく、右側を2列の横長カードに詰める */
@media (min-width: 761px) {
  .ymc.ymc-side { grid-template-columns: 300px minmax(0, 1fr); gap: 18px; }
  .ymc.ymc-side .ymb { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
  .ymc.ymc-side .ymb li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "k no pr" "k nm pr" "k in in"; align-items: center; gap: 0 8px; padding: 6px 10px; text-align: left; }
  .ymc.ymc-side .ymb .hi-no { grid-area: no; justify-self: start; }
  .ymc.ymc-side .ymb-k { grid-area: k; margin: 0; font-size: 34px; text-align: center; }
  .ymc.ymc-side .ymb-nm { grid-area: nm; }
  .ymc.ymc-side .ymb-in { grid-area: in; font-size: 10.5px; line-height: 1.45; }
  .ymc.ymc-side .ymb-st { display: none; }
  .ymc.ymc-side .ymb-pr { grid-area: pr; margin: 0; padding: 0; font-size: 15px; align-self: center; }
  .ymc.ymc-side .ymb-pr .tax { display: block; text-align: right; }
  .ymc.ymc-side .yms { gap: 6px; }
  .ymc.ymc-side .yms li { padding: 6px 10px; }
  .ymc.ymc-side .yms .ymb-pr .tax { display: inline; }
}
@media (min-width: 761px) {
  .ymc.ymc-side .yms { grid-template-columns: minmax(0, 1fr); }
  .ymc.ymc-side .ymb li { grid-template-areas: "k no pr" "k nm pr" "k in in" "k st st"; }
  .ymc.ymc-side .ymb-st { display: block; grid-area: st; font-size: 10.5px; }
}

/* オーガニックコットン：テンプレートの一番上（写真1枚＋紹介＋ご購入について） */
.og-top .og-cmp { grid-template-columns: 200px; }
.og-intro { margin-bottom: 10px; font-size: var(--fs-xs); line-height: 1.8; }
.og-intro p { margin: 0; }
.og-intro .og-brand { margin-bottom: 2px; font-family: "Noto Serif JP", serif; font-size: 19px; font-weight: 700; letter-spacing: .05em; }
.og-intro a { color: #2f6aa3; }
@media (max-width: 760px) { .og-top .og-cmp { grid-template-columns: 160px; } }
.yc-pr .yc-no, .yc-pr .yc-st { flex: none; white-space: nowrap; }
.yc-pr .yc-price { white-space: nowrap; }
.card.og-intro { margin: 0; padding: 16px 20px; font-size: var(--fs-s); }
.card.og-intro .og-brand { font-size: 21px; }

/* 絹糸の詳細ページ：詳細の項目が多いのでタイルを自動で並べる */
.yc-multi .yc-spec { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); max-width: 470px; }
.yc-spec .yc-sv { display: block; font-size: 10px; line-height: 1.35; color: var(--muted); }
.men-cmp-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kn-link { margin: 0; font-size: var(--fs-xs); } .kn-link a { color: #2f6aa3; }
@media (max-width: 600px) { .yc-multi .yc-spec { max-width: none; } }
.yc-pr .yc-st small { display: block; margin-top: -1px; font-size: 9.5px; line-height: 1.2; opacity: .85; }
.yc-pr .yc-st:has(small) { border-radius: 8px; padding: 2px 8px; text-align: center; line-height: 1.3; }
.yc-multi > li { grid-template-columns: 240px minmax(0, 1fr) auto minmax(230px, auto); }
@media (max-width: 900px) and (min-width: 601px) { .yc-multi > li { grid-template-columns: 200px minmax(0, 1fr) minmax(210px, auto); } }
@media (max-width: 600px) {
  .yc-multi > li { grid-template-columns: 136px minmax(0, 1fr); }
  .yc-multi .yc-spec { grid-template-columns: minmax(0, 1fr); }
  .yc-multi .yc-spec li { flex-wrap: wrap; }
  .yc-multi .yc-spec .yc-sv { display: inline; margin-left: 4px; }
}

/* 価格が1つの糸のカード（1列）：詳細を1段に、右に札と価格をまとめる */
@media (min-width: 601px) {
  .yc-multi > li.yc-one { grid-template-columns: 200px minmax(0, 1fr) 150px; grid-template-areas: "head mid unit" "fig mid prs"; gap: 4px 16px; }
  .yc-one .yc-spec { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 4px; max-width: none; }
  .yc-one .yc-spec li { padding: 5px 2px; }
  .yc-one .yc-spec small { font-size: 10px; }
  .yc-one .yc-spec b { font-size: 13.5px; white-space: nowrap; }
  .yc-one .yc-spec .yc-sv { font-size: 9px; }
  .yc-one .yc-use { margin-bottom: 4px; }
  .yc-one .yc-unit { align-self: end; justify-self: end; }
  .yc-one .yc-prs { align-self: start; }
  .yc-one .yc-pr { flex-wrap: wrap; justify-content: flex-end; gap: 4px 6px; }
  .yc-one .yc-pr .yc-st { order: -1; }
  .yc-one .yc-pr .yc-price { margin-left: 0; width: 100%; text-align: right; font-size: 22px; }
  .yc-one .yc-unit { display: none; }
  .yc-one .yc-pr::before { content: "１綛"; order: -2; padding: 1px 8px; border: 1px solid #e3d9c4; border-radius: 999px; font-size: var(--fs-xs); background: #fff; }
  .yc-multi > li.yc-one { grid-template-areas: "head mid prs" "fig mid prs"; }
  .yc-one .yc-prs { align-self: center; }
}
.yc-spec .yc-se { margin-left: 1px; font-size: 10px; font-weight: 700; color: #2f6aa3; }

/* 生糸／精練のご注文はこちら：ボタンの形に */
.kn-link a { display: inline-block; padding: 5px 14px; border: 1px solid #b9cde3; border-radius: 999px; background: #f1f6fb; color: #2f6aa3; font-weight: 700; text-decoration: none; transition: background .15s; }
.kn-link a:hover { background: #e3eef8; }
.kn-link a[href="s_kinu_ki.html"] { border-color: #e2d3a6; background: #fbf6e8; color: #8a6d1e; }
.kn-link a[href="s_kinu_ki.html"]:hover { background: #f5ecd2; }
.kn-link { margin-top: 10px; }
.kn-link a { padding: 9px 22px; font-size: var(--fs-s); }
@media (min-width: 761px) {
  .men-top .men-cmp-wrap { align-self: stretch; justify-content: flex-start; }
  .men-top .men-cmp-wrap .kn-link { margin-top: auto; }
}
@media (max-width: 760px) { .kn-link { margin-top: 16px; } }

/* 写真の下の札：写真と同じ幅の角ばった帯に */
.men-cmp figcaption { margin-top: 0; }
.men-cmp .mc-pic img { border-radius: 6px 6px 0 0; }
.men-cmp .yc-st { display: block; width: 100%; padding: 4px 0; border-radius: 0 0 6px 6px; border-top: 0; }
.men-cmp-wrap { align-items: stretch; }
.men-cmp-wrap .men-cmp { justify-content: stretch; }
.kn-link { text-align: center; }
.kn-link a { display: block; border-radius: 6px; }

/* ご注文はこちら：行き先の写真の下に、写真と同じ幅で */
.kn-link { display: grid; grid-template-columns: repeat(2, 130px); gap: 12px; justify-content: center; }
.kn-link a { padding: 8px 4px; font-size: var(--fs-xs); line-height: 1.4; }
.kn-link a[href="s_kinu_ki.html"] { grid-column: 1; }
.kn-link a[href="s_kinu_se.html"] { grid-column: 2; }
@media (max-width: 760px) { .kn-link { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.men-cmp-wrap .men-cmp, .kn-link { grid-template-columns: repeat(2, 146px); gap: 12px; justify-content: center; }
.kn-link a { white-space: nowrap; font-size: 12.5px; }
@media (max-width: 760px) { .men-cmp-wrap .men-cmp, .kn-link { grid-template-columns: repeat(2, 146px); } }
.ybc-box .ybc-txt { font-size: 11px; }
.men-cmp .yc-st.kami { border-color: #e3ddd3; background: #f7f4ee; color: #5a4f45; }

/* 麻糸：こんにゃく糊加工の説明と写真 */
.yc-about-img { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: center; }
.yc-about-img figure { margin: 0; } .yc-about-img img { display: block; width: 100%; height: auto; border-radius: 4px; }
@media (max-width: 760px) { .yc-about-img { grid-template-columns: minmax(0, 1fr); } }

/* 金糸（s_kin.html・本金糸・ソフト紛い金糸・五色） */
.kin-top { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 24px; align-items: center; }
.kin-top figure { margin: 0; } .kin-top img { display: block; width: 100%; height: auto; border-radius: 6px; }
.kin-desc p { margin: 0 0 10px; font-size: var(--fs-s); line-height: 1.85; }
.kin-desc p:last-child { margin: 0; }
.kin-core { display: inline-block; margin: 0 6px 4px 0; padding: 2px 10px; border-radius: 4px; background: #faf8f4; border: 1px solid #ece6dc; }
.kin-core b { color: #8a6d1e; }
.kin-list .hi-head { flex-wrap: wrap; }
.kin-sp { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 4px; }
.kin-sp i { font-style: normal; padding: 0 8px; border-radius: 999px; border: 1px solid #e3d9c4; background: #fff; font-size: var(--fs-xs); color: #5a4f45; }
.kin-comp { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 8px 12px; border-radius: 6px; background: #faf8f4; font-size: var(--fs-s); font-weight: 700; }
.kin-comp small { margin-right: 6px; font-weight: 400; color: var(--muted); }
.kgo-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.kgo-cards li { margin: 0; padding: 12px; border: 1px solid #e6dcbd; border-radius: 6px; background: #fff; }
.kgo-cards figure { margin: 0 0 8px; } .kgo-cards img { display: block; width: 100%; height: auto; border-radius: 4px; }
.kgo-txt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.kgo-txt b { font-family: "Noto Serif JP", serif; font-size: 17px; }
.kgo-pr { margin-left: auto; font-size: 20px; font-weight: 700; color: var(--red); }
.kgo-pr .tax { font-size: 11px; font-weight: 400; }
.kin-mihon .hi-list { margin-top: 6px; }
.kl-cards { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.kl-cards li { margin: 0; }
.kl-cards a { display: grid; grid-template-columns: 250px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 14px 16px; border: 1px solid var(--line, #e3ddd3); border-radius: 6px; background: #fff; color: var(--ink); text-decoration: none; transition: background .15s; }
.kl-cards a:hover { background: #faf8f4; }
.kl-cards figure { margin: 0; } .kl-cards img { display: block; width: 100%; height: auto; border-radius: 4px; }
.kl-txt b { display: block; font-family: "Noto Serif JP", serif; font-size: 20px; line-height: 1.4; }
.kl-txt small { display: block; margin-bottom: 6px; font-size: var(--fs-xs); color: #8a6d1e; font-weight: 700; }
.kl-txt p { margin: 0; font-size: var(--fs-xs); line-height: 1.8; color: #5a4f45; }
@media (max-width: 760px) {
  .kin-top { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .kgo-cards { grid-template-columns: minmax(0, 1fr); }
  .kl-cards a { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .kl-cards .ri-more { justify-self: stretch; text-align: center; }
}

/* 特定商取引法に基づく表記 */
.law-dl { margin: 0; }
.law-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); border-bottom: 1px solid #ece6dc; }
.law-row:last-child { border-bottom: 0; }
.law-row dt { padding: 12px 14px; background: #faf8f4; font-size: var(--fs-s); font-weight: 700; color: #5a4a3a; }
.law-row dd { margin: 0; padding: 12px 16px; font-size: var(--fs-s); line-height: 1.8; }
.law-row dd p { margin: 0 0 6px; } .law-row dd p:last-child { margin-bottom: 0; }
.law-row dd a { color: #2f6aa3; }
.law-sub { font-weight: 700; color: #8a6d1e; }
.law-ol { margin: 4px 0 0; padding-left: 1.6em; }
.law-ships { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.law-ship { border: 1px solid #ece6dc; border-radius: 6px; overflow: hidden; }
.law-ship-ttl { margin: 0 !important; padding: 6px 10px; background: #f3efe7; font-weight: 700; font-size: var(--fs-s); }
.law-ship-ttl small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.law-ship table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.law-ship th, .law-ship td { padding: 3px 10px; border-top: 1px dotted #e3ddd3; }
.law-ship th { text-align: left; font-weight: 400; } .law-ship td { text-align: right; font-weight: 700; white-space: nowrap; }
@media (max-width: 760px) {
  .law-row { grid-template-columns: minmax(0, 1fr); }
  .law-row dt { padding: 8px 12px; }
  .law-ships { grid-template-columns: minmax(0, 1fr); }
}

/* このサイトについて */
.about-item { padding: 16px 4px; border-bottom: 1px solid #ece6dc; }
.about-item:first-child { padding-top: 4px; } .about-item:last-child { border-bottom: 0; padding-bottom: 4px; }
.about-item h2 { margin: 0 0 6px; padding-left: 10px; border-left: 3px solid #b09935; font-family: "Noto Serif JP", serif; font-size: 17px; line-height: 1.5; color: #3d352e; }
.about-item p { margin: 0; font-size: var(--fs-s); line-height: 1.9; }
.about-item a { color: #2f6aa3; }

/* サイトマップ */
.sm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.sm-group { margin: 0; background: #fff; border: 1px solid var(--line, #e3ddd3); border-radius: 6px; overflow: hidden; }
.sm-group:first-child { grid-row: span 3; }
.sm-group .cat-head { margin: 0; }
.cat-head.info { background: #6b5d4f; }
.sm-list { margin: 0; padding: 8px 14px 12px; list-style: none; }
.sm-list > li { margin: 0; padding: 6px 0; border-bottom: 1px dotted #e3ddd3; }
.sm-list > li:last-child { border-bottom: 0; }
.sm-list a { color: var(--ink); text-decoration: none; }
.sm-list a:hover { text-decoration: underline; }
.sm-top { font-weight: 700; font-size: var(--fs-s); }
.sm-top::before { content: "›"; margin-right: 6px; color: #b09935; }
.sm-list ul { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 4px 0 0 14px; padding: 0; list-style: none; }
.sm-list ul li { margin: 0; font-size: var(--fs-xs); }
.sm-list ul a { color: #5a4f45; }
@media (max-width: 760px) { .sm-grid { grid-template-columns: minmax(0, 1fr); } .sm-group:first-child { grid-row: auto; } }
.sm-grid { display: block; columns: 2; column-gap: 16px; }
.sm-group { break-inside: avoid; margin-bottom: 16px; display: inline-block; width: 100%; }
.sm-group:first-child { grid-row: auto; }
@media (max-width: 760px) { .sm-grid { columns: 1; } }
.sm-grid { display: grid; columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.sm-col { display: flex; flex-direction: column; gap: 16px; }
.sm-group { display: block; margin: 0; }
@media (max-width: 760px) { .sm-grid { grid-template-columns: minmax(0, 1fr); } }

/* 板ふのり */
.funo-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.funo-top figure { margin: 0; } .funo-top img { display: block; width: 100%; height: auto; border-radius: 6px; }
.funo-lead { margin: 0 0 14px; font-size: var(--fs-m); line-height: 1.9; font-weight: 700; }
.funo-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.funo-box { padding: 12px 16px; border-radius: 6px; background: #faf8f4; border: 1px solid #ece6dc; font-size: var(--fs-s); line-height: 1.8; }
.funo-box p { margin: 0; } .funo-box ol { margin: 0; padding-left: 1.4em; }
.funo-ttl { margin-bottom: 6px !important; font-weight: 700; color: #8a6d1e; }
.funo-small { color: var(--muted); font-size: var(--fs-xs); }
.funo-box dl { margin: 0; } .funo-box dt { font-weight: 700; } .funo-box dt::before { content: "●"; margin-right: 4px; color: #b09935; }
.funo-box dd { margin: 0 0 6px 1.2em; }
.funo-other { grid-column: 1 / -1; }
.funo-pack { display: flex; align-items: center; gap: 20px; }
.funo-pack figure { flex: none; width: 110px; margin: 0; } .funo-pack img { display: block; width: 100%; height: auto; border-radius: 4px; }
.funo-pack p { margin: 0; font-size: var(--fs-s); line-height: 1.8; }
@media (max-width: 760px) { .funo-top, .funo-use { grid-template-columns: minmax(0, 1fr); } }

/* 織物用素材（手紡ぎ用・綿・実綿）：写真と説明・価格 */
.mat-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.mat-item figure { margin: 0; } .mat-item img { display: block; width: 100%; height: auto; border-radius: 6px; }
.mat-desc { margin: 0 0 12px; font-size: var(--fs-s); line-height: 1.9; }
@media (max-width: 760px) { .mat-item { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* 天然染料・媒染剤・助剤 */
.dc-disc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.dc-disc p { margin: 0; }
.dc-disc-ttl { width: 100%; font-weight: 700; font-size: var(--fs-s); }
.dc-disc ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dc-disc li { padding: 6px 14px; border-radius: 6px; background: #faf8f4; border: 1px solid #ece6dc; font-size: var(--fs-s); }
.dc-disc li b { font-size: 16px; } .dc-disc em { margin-left: 6px; font-style: normal; font-weight: 700; color: var(--red); }
.dc-note { font-size: var(--fs-xs); color: var(--muted); }
.dc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.dc { display: flex; flex-direction: column; margin: 0; padding: 12px; border: 1px solid var(--line, #e3ddd3); border-radius: 6px; background: #fff; }
.dc figure { margin: 0 0 8px; } .dc img { display: block; width: 100%; height: auto; }
.dc h3 { margin: 0 0 6px; font-family: "Noto Serif JP", serif; font-size: 18px; }
.dc-pr { margin: auto 0 0; padding: 0; list-style: none; }
.dc-pr li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px dotted #e3ddd3; }
.dc-pr .hi-no { font-size: 11px; } .dc-g { font-size: var(--fs-s); font-weight: 700; }
.dc-p { margin-left: auto; font-size: 18px; font-weight: 700; color: var(--red); } .dc-p .tax { font-size: 10px; font-weight: 400; }
.dye-item { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 22px; align-items: start; }
.dye-item figure { margin: 0; } .dye-item img { display: block; width: 100%; height: auto; border-radius: 6px; }
.dye-how { margin-top: 12px; padding: 10px 14px; border-left: 3px solid #c9b77a; border-radius: 0 6px 6px 0; background: #faf8f4; font-size: var(--fs-s); line-height: 1.8; }
.dye-how p { margin: 0; } .dye-how ul { margin: 2px 0 0; padding: 0; list-style: none; }
.dye-how-ttl { font-weight: 700; color: #8a6d1e; }
.dye-more, .dye-sds { margin: 6px 0 0; font-size: var(--fs-xs); }
.dye-sds { margin-top: 10px; color: #a34734; }
.dye-item a, .dye-how a { color: #2f6aa3; }
@media (max-width: 760px) { .dc-cards, .dye-item { grid-template-columns: minmax(0, 1fr); } }

/* 天然染料：1列の横長カード（写真｜名前と価格） */
.dc-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.dc { display: grid; grid-template-columns: 380px minmax(0, 1fr); grid-template-areas: "fig name" "fig pr"; align-items: center; gap: 4px 24px; padding: 10px 16px 10px 10px; }
.dc figure { grid-area: fig; margin: 0; }
.dc h3 { grid-area: name; align-self: end; margin: 0; font-size: 20px; }
.dc-pr { grid-area: pr; align-self: start; margin: 4px 0 0; max-width: 360px; }
@media (max-width: 760px) {
  .dc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "fig" "pr"; padding: 12px; }
  .dc-pr { max-width: none; }
}
@media (min-width: 761px) {
  .dc { grid-template-columns: 460px minmax(0, 1fr); gap: 6px 28px; padding: 16px 22px 16px 14px; }
  .dc h3 { font-size: 23px; }
  .dc-pr li { padding: 8px 0; }
  .dc-g { font-size: var(--fs-m); }
  .dc-p { font-size: 21px; }
}
@media (min-width: 761px) { .dc { grid-template-columns: 560px minmax(0, 1fr); } }
@media (min-width: 761px) and (max-width: 1100px) { .dc { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }

/* Oricoショッピングクレジット */
.orico-lead p { margin: 0 0 14px; font-size: var(--fs-m); line-height: 1.9; }
.orico-lead b { color: var(--red); }
.orico-lead figure { margin: 0; } .orico-lead img { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; }
.orico-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.orico-steps li { display: flex; align-items: center; gap: 14px; margin: 0; padding: 12px 16px; border: 1px solid var(--line, #e3ddd3); border-radius: 6px; background: #fff; }
.orico-steps li + li { position: relative; }
.orico-steps li + li::before { content: ""; position: absolute; left: 33px; top: -9px; border: 5px solid transparent; border-top-color: #c9b77a; border-bottom: 0; }
.os-no { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #c0392b; color: #fff; font-weight: 700; font-size: 18px; }
.orico-steps p { margin: 0; font-size: var(--fs-s); line-height: 1.8; }
.orico-steps small { color: var(--muted); }
.orico-note { margin: 10px 0 0; font-size: var(--fs-s); }
.orico-sim p { margin: 0 0 12px; font-size: var(--fs-s); }
.orico-btn { padding: 12px 28px; border: 0; border-radius: 6px; background: #c0392b; color: #fff; font-size: var(--fs-m); font-weight: 700; cursor: pointer; font-family: inherit; }
.orico-btn:hover { background: #a93226; }

/* これまでのお知らせ */
.news-list { margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--line, #e3ddd3); border-radius: 6px; }
.news-list li { margin: 0; padding: 14px 18px; border-bottom: 1px dotted #e3ddd3; }
.news-list li:last-child { border-bottom: 0; }
.nw-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; }
.nw-head time { flex: none; min-width: 8.5em; font-size: var(--fs-xs); color: #8a6d1e; font-weight: 700; }
.nw-head b { font-size: var(--fs-s); color: #3d352e; }
.nw-body { margin: 6px 0 0; padding-left: calc(8.5em + 14px); font-size: var(--fs-xs); line-height: 1.8; color: #5a4f45; }
.nw-body img { max-width: 100%; height: auto; }
@media (max-width: 600px) { .nw-body { padding-left: 0; } }
.news-list { max-width: 100%; overflow-wrap: anywhere; }
.news-list table { max-width: 100%; display: block; overflow-x: auto; }

/* 催し物案内 */
.ev-years { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-years a { padding: 4px 12px; border: 1px solid #e3d9c4; border-radius: 999px; font-size: var(--fs-xs); color: var(--ink); text-decoration: none; background: #fff; }
.ev-years a:hover { background: #faf8f4; }
.ev-years a[aria-current="page"] { background: #8a6d1e; border-color: #8a6d1e; color: #fff; font-weight: 700; }
.ev-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ev-card { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; margin: 0; padding: 16px; border: 1px solid var(--line, #e3ddd3); border-radius: 6px; background: #fff; }
.ev-card.ev-noimg { grid-template-columns: minmax(0, 1fr); }
.ev-card figure { display: grid; gap: 8px; margin: 0; }
.ev-card img { display: block; width: 100%; height: auto; border-radius: 4px; }
.ev-txt { font-size: var(--fs-s); line-height: 1.8; overflow-wrap: anywhere; }
.ev-txt > b:first-child { display: block; margin-bottom: 4px; font-family: "Noto Serif JP", serif; font-size: 17px; color: #3d352e; }
.ev-txt a { color: #2f6aa3; }
@media (max-width: 600px) { .ev-card { grid-template-columns: minmax(0, 1fr); } .ev-card figure { max-width: 300px; } }

/* お問い合わせ・ご注文フォーム：フォーム本体（iframe）を囲むだけ */
.form-wrap { padding: 12px; }
.form-wrap iframe { display: block; }

/* 少し狭いPC（〜1199px）では、長いページ見出しは折り返す（100%表示にしたため） */
@media (min-width: 768px) and (max-width: 1199px) { .page-title .pt-ttl { flex: 0 1 auto; min-width: 0; white-space: normal; } }
/* 板ふのり：説明の囲みは1列（文が途中で折り返さないように） */
.funo-use { grid-template-columns: minmax(0, 1fr); }
.funo-pack-in { gap: 12px; margin-top: 12px; }
.funo-pack-in figure { width: 100px; }
.funo-pack-in p { font-size: var(--fs-xs); }

/* 手紡ぎ用・綿・実綿：価格を1行に詰める（商品名は見出しにあるので量だけ） */
.mat-item .hi-head { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.mat-item .hi-head > b { display: none; }
.mat-item .hi-head .hi-sub { margin: 0; font-size: var(--fs-m); font-weight: 700; color: var(--ink); }
.mat-item .hi-head .hi-price { margin-left: auto; }
/* 板ふのり：袋の写真と説明を枠で囲む */
.funo-pack-in { padding: 10px 12px; border: 1px solid #ece6dc; border-radius: 6px; background: #faf8f4; }
.mat-item .hi-head .hi-no, .mat-item .hi-head .hi-sub { flex: none; white-space: nowrap; }
@media (max-width: 600px) { .mat-item .hi-head { gap: 8px; padding-left: 10px; padding-right: 10px; } .mat-item .hi-head .hi-sub { font-size: var(--fs-s); } }
@media (max-width: 600px) { .mat-item .hi-head { gap: 6px; } .mat-item .hi-head .hi-price, .mat-item .hi-head .hi-price .yen { font-size: 18px; white-space: nowrap; } .mat-item .hi-head .hi-price .tax { font-size: 10px; } }

/* 板ふのり：価格も1行に詰める（手紡ぎ用・綿と同じ） */
.funo-top .hi-head { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.funo-top .hi-head > b { display: none; }
.funo-top .hi-head .hi-no, .funo-top .hi-head .hi-sub { flex: none; white-space: nowrap; }
.funo-top .hi-head .hi-sub { margin: 0; font-size: var(--fs-m); font-weight: 700; color: var(--ink); }
.funo-top .hi-head .hi-price { margin-left: auto; }
@media (max-width: 600px) { .funo-top .hi-head { gap: 6px; padding-left: 10px; padding-right: 10px; } .funo-top .hi-head .hi-sub { font-size: var(--fs-s); } .funo-top .hi-head .hi-price, .funo-top .hi-head .hi-price .yen { font-size: 18px; white-space: nowrap; } .funo-top .hi-head .hi-price .tax { font-size: 10px; } }

/* 媒染剤・助剤：価格を1行に（商品名は見出しにあるので量だけ） */
.dye-item .hi-head { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.dye-item .hi-head > b { display: none; }
.dye-item .hi-head .hi-no, .dye-item .hi-head .hi-sub { flex: none; white-space: nowrap; }
.dye-item .hi-head .hi-sub { margin: 0; font-size: var(--fs-m); font-weight: 700; color: var(--ink); }
.dye-item .hi-head .hi-price { margin-left: auto; }
@media (max-width: 600px) { .dye-item .hi-head { gap: 6px; padding-left: 10px; padding-right: 10px; } .dye-item .hi-head .hi-sub { font-size: var(--fs-s); } .dye-item .hi-head .hi-price, .dye-item .hi-head .hi-price .yen { font-size: 18px; white-space: nowrap; } .dye-item .hi-head .hi-price .tax { font-size: 10px; } }
.dye-how ul.num li { padding-left: 1em; text-indent: -1em; }
.dye-how .nw { display: inline-block; text-indent: 0; }
.dye-how .dye-more { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #d8cba3; }
.dye-more a.nw { display: inline-block; }
/* 手紡ぎ用・綿：3枚組の写真（左に袋と糸、右に繊維のアップ） */
.mat-trio { display: grid; grid-template-columns: minmax(0, 401fr) minmax(0, 159fr); grid-template-rows: auto auto; gap: 6px; }
.mat-item .mat-trio img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.mat-trio .t-fiber { grid-column: 2; grid-row: 1 / span 2; }
/* 金糸の価格一覧：番号・名前・太さ・長さ・デニール・価格を縦にそろえる */
@media (min-width: 700px) {
  .kin-list { display: grid; grid-template-columns: auto max-content max-content max-content max-content minmax(0, 1fr); }
  .kin-list .hi-head { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; column-gap: 10px; }
  .kin-list .kin-sp { display: contents; }
  .kin-list .kin-sp i { text-align: center; }
  .kin-list .hi-head > b { min-width: 0; }
  .kin-list .hi-price { justify-self: end; margin-left: 0; }
}
/* 糸の詳細：写真を大きく（帯の写真は元の幅 280px まで） */
.yc-cards > li { grid-template-columns: 280px minmax(0, 1fr) auto auto; }
.yc-multi > li { grid-template-columns: 280px minmax(0, 1fr) auto minmax(230px, auto); }
.men-cmp-wrap .men-cmp, .men-top .men-cmp-wrap .men-cmp, .kn-link { grid-template-columns: repeat(2, 166px); }
@media (min-width: 901px) { .yc-multi > li.yc-one { grid-template-columns: 280px minmax(0, 1fr) 150px; } }
@media (max-width: 900px) and (min-width: 601px) {
  .yc-multi > li { grid-template-columns: 240px minmax(0, 1fr) minmax(210px, auto); }
  .yc-multi > li.yc-one { grid-template-columns: 240px minmax(0, 1fr) 150px; }
}
@media (max-width: 600px) {
  .yc-cards > li, .yc-multi > li, .yc-multi > li.yc-one { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "spec" "mid" "unit" "price" "prs"; }
  .yc-cards .yc-spec { padding: 0; border-left: 0; }
  .yc-cards figure img { width: 100%; }
  .men-cmp-wrap .men-cmp, .men-top .men-cmp-wrap .men-cmp, .kn-link { grid-template-columns: repeat(2, minmax(0, 166px)); }
}
.men-top .men-cmp { grid-template-columns: repeat(2, 166px); }
@media (max-width: 600px) { .men-top .men-cmp { grid-template-columns: repeat(2, minmax(0, 166px)); } }
@media (min-width: 901px) {
  .yc-multi > li { column-gap: 14px; }
  .yc-multi .yc-spec { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 5px; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .yc-cards > li { grid-template-columns: 240px minmax(0, 1fr) auto auto; }
  .yc-multi > li { grid-template-columns: 240px minmax(0, 1fr) auto minmax(230px, auto); }
  .yc-multi > li.yc-one { grid-template-columns: 240px minmax(0, 1fr) 150px; }
}
@media (min-width: 1200px) { .men-top { gap: 18px; } .men-top .ybc-box .ybc-tag { white-space: nowrap; padding: 2px 10px; } .men-top .ybc-box .ybc-tag3 { font-size: 13px; } }
@media (min-width: 761px) and (max-width: 1199px) { .men-top .men-cmp, .men-top .men-cmp-wrap .men-cmp, .men-top .kn-link { grid-template-columns: repeat(2, 130px); } }
@media (min-width: 601px) { .yc-cards .yc-spec:has(> li:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 400px; } }
@media (min-width: 601px) { .yc-one .yc-spec b:has(.yc-se) { white-space: normal; } .yc-one .yc-spec .yc-se { display: block; } }
/* 「10綛以上のご注文は…」：言葉の途中で折り返さない */
.ybc-pack span { display: inline-block; }
/* 糸見本帳の中身：「・」の区切りでだけ折り返す */
.ymb-in > span { display: inline-block; }
/* 「※糸の種類を問わず組み合わせ自由」は1行で */
.ybc-box:has(.ybc-one) { container-type: inline-size; }
.ybc .ybc-one { white-space: nowrap; font-size: min(var(--fs-xs), 6cqw); }
/* 「10綛以上は…」は2行で（枠が狭いときは文字を少し小さく） */
.ybc-pack2 { container-type: inline-size; }
.ybc-pack2 span { display: block; white-space: nowrap; font-size: min(var(--fs-xs), 3.6cqw); }
.ymb-in { text-wrap: balance; }
/* 糸見本帳：中くらいの画面では写真を小さくし、見本帳を1列に */
@media (min-width: 761px) and (max-width: 1199px) {
  .ymc.ymc-side { grid-template-columns: 190px minmax(0, 1fr); }
  .ymc.ymc-side .ymb { grid-template-columns: minmax(0, 1fr); }
}
/* 麻糸：糸のカードを1列に */
.kn-cards.kn-one { grid-template-columns: minmax(0, 1fr); }
/* 糸のカード：文字を一段大きく */
.kn-tag { font-size: var(--fs-s); }
.kn-txt b { font-size: 21px; }
.kn-sub { font-size: var(--fs-s); }
@media (max-width: 760px) { .kn-txt b { font-size: 18px; } }
.kn-sub .kn-p { display: inline-block; }
/* ソフト金糸：芯糸の使い分け */
.kin-use { display: block; padding: 10px 14px; border-left: 3px solid #c9b77a; border-radius: 0 6px 6px 0; background: #faf8f4; }
.kin-use .kin-use-ttl { display: block; margin-bottom: 4px; color: #8a6d1e; }
.kin-use .kin-core { display: block; margin: 0; padding: 2px 0; border: 0; background: none; }
/* ソフト金糸：写真を上、文章を下の全幅に */
.kin-top.kin-stack { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.kin-stack figure { width: min(100%, 560px); justify-self: center; }
.kin-stack .kin-desc p { margin-bottom: 14px; }
.kin-use { padding: 12px 16px; }
.kin-use .kin-core { display: grid; grid-template-columns: 13.5em minmax(0, 1fr); gap: 0 14px; align-items: baseline; padding: 6px 0; border-top: 1px dotted #d8cfb8; }
.kin-use .kin-core b { color: #5a4f45; }
.kin-use .kin-use-ttl + .kin-core { border-top: 0; }
@media (max-width: 600px) { .kin-use .kin-core { grid-template-columns: minmax(0, 1fr); } }
/* 糸の一覧：カードの写真を大きく（元の幅 246px） */
.kn-cards figure { width: 200px; }
.kn-cards a { gap: 20px; }
@media (max-width: 760px) { .kn-cards figure { width: 130px; } .kn-cards a { gap: 12px; } }
.kn-sub .kn-p { max-width: 100%; }
@media (max-width: 600px) {
  .kn-cards figure { width: 120px; }
  .kn-cards a { padding-right: 10px; }
  .kn-go { display: none; }
  .kn-txt b { font-size: 17px; }
  .kn-sub { font-size: 13px; }
}
.yc-spec .yc-se.ki { color: #8a6d1e; }
/* 縦長の写真のカード（整経台（大）など）：写真の枠を高くし、上下に余白 */
.product-card figure.pc-tall img { aspect-ratio: 1 / 1; padding: 18px 0; box-sizing: border-box; }
/* 大型の道具（ドラム整経機・経巻台）：1列の横長カード */
.product-grid.pg-wide { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 761px) {
  .pg-wide .product-card { flex-direction: row; }
  .pg-wide .product-card figure { flex: none; width: 52%; border-bottom: 0; border-right: 1px solid #ece8e1; display: flex; align-items: center; }
  .pg-wide .product-card figure img { width: 100%; }
  .pg-wide .pc-body { justify-content: center; padding: 20px 24px; }
}
/* お知らせ：箇条書き */
.news-item .news-sub { margin: 10px 0 2px; font-weight: 700; color: #8a6d1e; }
.news-points { margin: 0 0 10px; padding: 8px 14px 8px 30px; border-radius: 6px; background: #faf8f4; }
.news-points li { padding: 2px 0; line-height: 1.7; }
.news-item h3 { text-wrap: balance; }
/* 糸枠（小枠・織枠）：メガネ各種と同じ横並びのカード */
.card .wk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wk-cards .wk-pic { display: flex; align-items: flex-end; justify-content: center; width: 100%; aspect-ratio: 556 / 696; margin: 0 0 12px; border-radius: 4px; background: #f8f1e3; overflow: hidden; }
.wk-cards .wk-pic img { display: block; width: 100%; height: auto; }
.wk-cards .jd-ban { font-size: 28px; }
.wk-desc { margin: 8px 0 0; font-size: var(--fs-s); line-height: 1.8; text-align: left; }
.card .wk-size { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.wk-size > div + div { border-left: 1px dotted #e6dcbd; }
.wk-fold { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; }
.wk-fold img { width: 140px; height: auto; border: 1px solid #ece6dc; border-radius: 4px; }
.wk-fold figcaption { font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 600px) { .card .wk-cards { grid-template-columns: minmax(0, 1fr); } }
.wk-cards .wk-pic { width: 75%; margin-left: auto; margin-right: auto; }
.wk-fold { justify-content: center; gap: 8px; margin: 6px 0 0; }
.wk-fold img { width: 110px; }
.card .wk-fold + .wk-size { margin-top: 6px; }
.wk-cards .wk-desc { margin-bottom: 0; }
/* 大管：写真を左、説明・寸法・価格を右 */
.ok-item { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; align-items: center; }
.ok-pic { margin: 0; } .ok-pic img { display: block; width: 100%; height: auto; }
.ok-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.ok-head b { font-family: "Noto Serif JP", serif; font-size: 24px; }
.ok-head .jd-price { margin: 0 0 0 auto; }
.ok-desc { margin: 0 0 10px; font-size: var(--fs-s); line-height: 1.8; }
.ok-item .wk-size { margin: 0; padding: 8px 0; border-top: 1px dotted #e6dcbd; border-bottom: 1px dotted #e6dcbd; text-align: center; }
.ok-item .wk-size dt { font-size: var(--fs-xs); color: var(--muted); }
.ok-item .wk-size dd { margin: 0; font-weight: 700; }
@media (max-width: 600px) { .ok-item { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.card .ok-pic img { border: 0; box-shadow: none; border-radius: 0; }
/* 価格の行のすぐ下の説明：線が二重に見えないよう、上の点線を外す */
.hi-spec .hi-head + .hi-desc { border-top: 0; }
/* 整経・小道具：s_syo と同じ並び（説明の下に寸法の囲み） */
.item-card .sy-box { margin-top: 10px; }
.card .sy-note { margin: 8px 0 0; font-size: var(--fs-s); color: var(--muted); }
/* 見出しの最後の数文字だけが次の行に落ちないように */
main h1, main h2, main h3, .jd-ban, .kn-txt b, .yc-ban { text-wrap: balance; }
/* 小さな注記：「約31ｇ）」を途中で切らない */
.yc-sv .nw { display: inline-block; }
/* メガネ（スマホ）：下の目盛りの名前は横幅いっぱいを使う */
@media (max-width: 600px) { .mg-b { grid-column: 1 / -1; } }
/* 価格の枠の中の「サイズ」の囲み */
.hi-spec .sy-box { margin: 0 14px 12px; }
.hi-spec .hi-desc + .sy-box { margin-top: 2px; }
.mg-photos { max-width: 480px; }
/* サイズの囲み：入りきらない時は次の行へ */
.card .sy-box .ks-items { flex-wrap: wrap; }
.card .sy-box .ks-items li { white-space: normal; max-width: 100%; }
.item-card .img-row img[src$="kodogu/mine.jpg"] { width: 420px; max-width: 100%; height: auto; }
/* 左メニュー（案B 一本線）：アイコンの枠の下辺が、そのまま細い区切り線になって右へのびる */
.cat-list a { padding: 7px 10px 0; min-height: 45px; background-image: linear-gradient(#d9d2c5, #d9d2c5); background-size: calc(100% - 10px) 1px; background-position: 10px 100%; }
.cat-list a:hover { background-image: linear-gradient(#b7ad9c, #b7ad9c); }
.cat-list img { width: 38px; height: 38px; border: 1px solid #d9d2c5; border-bottom: 0; border-radius: 3px 3px 0 0; align-self: flex-end; }
/* 最後の項目は線なし（枠の下線と重ならない）。アイコンは四辺とも枠を付けて上下中央に */
.cat-list li:last-child a, .cat-list li:last-child a:hover { padding-bottom: 7px; background-image: none; }
.cat-list li:last-child img { height: 38px; border-bottom: 1px solid #d9d2c5; border-radius: 3px; align-self: center; }
/* 区切り線は写真より手前に描く（背景だとアイコンの写真に隠れて、アイコンの下だけ線が切れる） */
.cat-list a, .cat-list a:hover { background-image: none; }
.cat-list a::before { content: ""; position: absolute; left: 10px; right: 0; bottom: 0; height: 1px; background: #d9d2c5; z-index: 1; pointer-events: none; }
.cat-list a:hover::before { background: #b7ad9c; }
.cat-list li:last-child a::before { display: none; }
/* 左メニューのアイコンを 40px に */
.cat-list a { min-height: 47px; }
.cat-list img, .cat-list li:last-child img { width: 40px; height: 40px; }
/* 各グループの最後の項目も同じデザインに：カードの下の枠線を消し、最後の項目の区切り線をそのまま下の枠にする */
.cat-list { border-bottom: 0; border-radius: 0; }
.cat-list li:last-child a { padding-bottom: 0; }
.cat-list li:last-child a::before { display: block; }
.cat-list li:last-child img { border-bottom: 0; border-radius: 3px 3px 0 0; align-self: flex-end; }
/* 最後の線の下にも、カードの余白をとる */
.cat-list { padding-bottom: 10px; }
/* 最後の項目にマウスを乗せても高さが変わらないように（古い :hover の指定を打ち消す） */
.cat-list li:last-child a:hover, .cat-list li:last-child a[aria-current="page"] { padding-bottom: 0; }
/* 左メニュー：グループ（手織道具・糸・染料・織物用素材）の間を少し広く */
.cat-list { margin-bottom: 28px; }
/* 上のメニューの帯を少しだけ太く（40px → 46px） */
@media (min-width: 1024px) {
  .global-nav li a { padding-top: 7px; padding-bottom: 7px; }
  .global-nav li.nav-btn { padding: 4px 0; }
}

/* トップ：営業のご案内を少しだけ見やすく（高さは変えない＝看板の枠とのそろいを保つ） */
.intro-info h3, .intro-calendar h3 { display: flex; align-items: center; gap: 6px; color: #5a4a2a; }
.intro-info h3::before, .intro-calendar h3::before { content: ""; width: 16px; height: 16px; flex: none; background: center / contain no-repeat; }
.intro-info h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6d1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l2-6h14l2 6'/%3E%3Cpath d='M3 10h18v1a3 3 0 0 1-6 0 3 3 0 0 1-6 0 3 3 0 0 1-6 0z'/%3E%3Cpath d='M5 13v8h14v-8M10 21v-5h4v5'/%3E%3C/svg%3E"); }
.intro-calendar h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6d1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4M8 14h2M12 14h2M16 14h0M8 17h2M12 17h2'/%3E%3C/svg%3E"); }
.info-list { border-color: #e2d8c4; box-shadow: 0 1px 3px rgba(80, 60, 30, .06); }
.info-list dt { display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: #f6efe0; color: #7a5f22; font-weight: 700; }
.info-list dt::before { content: ""; width: 14px; height: 14px; flex: none; background: center / contain no-repeat; }
.info-list > div:nth-child(1) dt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6d1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.info-list > div:nth-child(2) dt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6d1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4M9.5 13.5l5 4M14.5 13.5l-5 4'/%3E%3C/svg%3E"); }
.info-list > div:nth-child(3) dt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6d1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.info-list > div:nth-child(4) dt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6d1e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6'/%3E%3Crect x='3' y='9' width='18' height='9' rx='2'/%3E%3Cpath d='M7 15h10v6H7z'/%3E%3C/svg%3E"); }
.info-list > div:nth-child(2) dd { color: #b0402c; font-weight: 700; }
.info-list .tel { font-weight: 700; letter-spacing: .03em; }
.info-list > div:nth-child(4) dd { letter-spacing: .03em; }
/* TEL・FAX の番号は途中で折り返さない（狭い画面では項目名を詰める） */
.info-list .half dd { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .info-list > div.half { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .info-list .half dt { min-width: 0; padding: 2px 7px; }
  .info-list .tel, .info-list > div:nth-child(4) dd { letter-spacing: 0; }
}
/* 営業のご案内：4つの札（営業時間・定休日・TEL・FAX）を同じ大きさに。アイコンと文字は左から同じ位置に */
.info-list dt, .info-list .half dt { box-sizing: border-box; width: 86px; min-width: 86px; justify-content: flex-start; padding: 2px 8px 2px 10px; }
.info-list dt, .info-list .half dt { width: 92px; min-width: 92px; white-space: nowrap; padding: 2px 6px 2px 10px; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .info-list dt, .info-list .half dt { width: 76px; min-width: 76px; padding: 2px 4px 2px 7px; gap: 4px; font-size: 11px; line-height: 19.2px; }
  .info-list dt::before { width: 12px; height: 12px; }
  .info-list .half dd { font-size: 15px; line-height: 24px; }
}
/* TEL・FAX の札は、アイコンと文字をまとめて真ん中に */
.info-list .half dt { justify-content: center; padding-left: 4px; padding-right: 4px; }