/*
Theme Name: 岩木十和薬長寿庵
Theme URI: https://nature-labo.jp/
Author: NATURE LABO（株式会社ナチュールプロビジョン）
Author URI: https://nature-labo.vercel.app/
Description: エール産業株式会社様のブランド「岩木十和薬長寿庵」のためのブロックテーマ。サイト全体は「和」（紺・朱赤・和紙色／明朝体／縦書き）、商品詳細ページだけは商品パッケージの世界観「洋」（クリーム・ゴールドのミニマル）という二層構造で作ってあります。静的HTMLモックアップ全11ページからの移植版。
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: 私有（NATURE LABO）
License URI: https://nature-labo.vercel.app/
Text Domain: iwaki
Tags: block-theme, full-site-editing, japanese, food
*/

/* =====================================================================
   このファイルについて
   ---------------------------------------------------------------------
   色・書体・余白・レイアウト幅は theme.json 側で決めています（管理画面から
   変更できるようにするため）。このファイルには、theme.json では表現できない
   ものだけを書いています。具体的には次の4つです。

     1. 縦書き（writing-mode）
     2. 写真がまだ無い場所に出す「【写真】」の枠
     3. 和紙のテクスチャ背景
     4. トップページの、写真に重ねる透けたヘッダー

   ⚠️ 色の値をここに直接書かないこと。theme.json の色を
      var(--wp--preset--color--navy) のように呼び出して使います。
      （管理画面で色を変えたときに、ここだけ変わらない事故を防ぐため）
   ===================================================================== */


/* =====================================================================
   1. 縦書き
   ---------------------------------------------------------------------
   ブロックエディタの「スタイル」から「縦書き」を選ぶと付く見た目です。
   （functions.php の register_block_style で登録しています）

   ⚠️ 縦書きは「高さ」を決めないと1行に収まりません。既定で 16rem の高さを
      与え、管理画面から高さを変えれば上書きできるようにしてあります。
   ===================================================================== */

.is-style-tategaki {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	block-size: auto;
	max-block-size: 100%;
}

/* 段落・見出しに縦書きを付けたとき、既定の高さを与える */
p.is-style-tategaki,
h1.is-style-tategaki,
h2.is-style-tategaki,
h3.is-style-tategaki,
h4.is-style-tategaki {
	height: 16rem;
	margin-inline: 0;
}

/* グループに縦書きを付けたときは、中の段落を横に並べる（右から左へ） */
.wp-block-group.is-style-tategaki {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	gap: 2rem;
	height: auto;
}

.wp-block-group.is-style-tategaki > * {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	height: 16rem;
	margin: 0;
}

/* 縦書きの見出しは、字間を広めに */
.is-style-tategaki:is(h1, h2, h3) {
	letter-spacing: 0.15em;
}

/* --- スマホでは横書きに戻す ---------------------------------------
   縦書きのまま狭い画面に入れると、1行が画面から溢れて読めなくなるため。
   （モックアップ styles.css の @media (max-width: 900px) と同じ判断）    */
@media (max-width: 900px) {
	.is-style-tategaki,
	.wp-block-group.is-style-tategaki > * {
		writing-mode: horizontal-tb !important;
		height: auto !important;
		text-align: center;
	}

	.wp-block-group.is-style-tategaki {
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
	}
}

/* ナビゲーションのリンクを縦書きにする（トップページのヘッダーで使用） */
.iwaki-nav-vertical .wp-block-navigation__container > .wp-block-navigation-item > a {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	padding-block: 0.15rem;
}

@media (max-width: 900px) {
	.iwaki-nav-vertical .wp-block-navigation__container > .wp-block-navigation-item > a {
		writing-mode: horizontal-tb;
	}
}


/* =====================================================================
   2. 写真がまだ無い場所に出す枠（プレースホルダー）
   ---------------------------------------------------------------------
   モックアップの .img-frame をそのまま持ってきたものです。
   実際の写真が届いたら、この枠のグループごと「画像ブロック」に
   置き換えてください（README の「写真の入れ方」参照）。
   ===================================================================== */

.iwaki-photo-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background-image: repeating-linear-gradient(
		45deg,
		rgba(26, 58, 92, 0.06),
		rgba(26, 58, 92, 0.06) 10px,
		rgba(26, 58, 92, 0.1) 10px,
		rgba(26, 58, 92, 0.1) 20px
	);
	border: 1px dashed rgba(26, 58, 92, 0.4);
	color: var(--wp--preset--color--navy);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

.iwaki-photo-slot p {
	margin: 0;
}

.iwaki-photo-slot--circle {
	border-radius: 50%;
	font-size: 0.65rem;
}

.iwaki-photo-slot--wide {
	aspect-ratio: 16 / 7;
	border-radius: 4px;
}

/* 洋（商品ページ）側では、枠の色も洋にそろえる */
.is-style-yo-western .iwaki-photo-slot,
.iwaki-tpl-product .iwaki-photo-slot {
	background-image: repeating-linear-gradient(
		45deg,
		rgba(58, 54, 48, 0.08),
		rgba(58, 54, 48, 0.08) 12px,
		rgba(58, 54, 48, 0.13) 12px,
		rgba(58, 54, 48, 0.13) 24px
	);
	border-color: rgba(58, 54, 48, 0.4);
	color: var(--wp--preset--color--charcoal);
}


/* =====================================================================
   3. 和紙のテクスチャ背景
   ---------------------------------------------------------------------
   グループブロックの「高度な設定 → 追加CSSクラス」に
   iwaki-washi-white / iwaki-washi-gold
   と入れると、その背景が和紙になります。
   ===================================================================== */

.iwaki-washi-white,
.iwaki-washi-gold {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.iwaki-washi-white {
	background-image:
		linear-gradient(rgba(250, 246, 236, 0.7), rgba(250, 246, 236, 0.7)),
		url(assets/images/washi-white.jpg);
}

.iwaki-washi-gold {
	background-image:
		linear-gradient(rgba(243, 237, 224, 0.68), rgba(243, 237, 224, 0.68)),
		url(assets/images/washi-gold.jpg);
}

/* ⚠️ 3種類目の和紙（washi-cream.jpg）は、どこからも使われておらず
      ファイルが8.7MBと非常に重かったため、テーマから外しました（2026-08-04）。
      必要になったら mockup/assets/images/ から取り直し、
      必ず軽量化してから入れてください。 */


/* =====================================================================
   4. ヘッダー
   ===================================================================== */

/* 通常ページのヘッダー：スクロールしても上に貼り付く */
.iwaki-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid rgba(26, 58, 92, 0.15);
}

/* --- トップページ用：写真に重ねる透けたヘッダー ---------------------
   ページの一番上では透明で、少しスクロールすると和紙色の帯になります。
   （assets/js/header.js が is-scrolled を付け外ししています）          */
.iwaki-header--overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent !important;
	border-bottom: 1px solid transparent;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.iwaki-header--overlay a,
.iwaki-header--overlay .wp-block-navigation a {
	color: var(--wp--preset--color--white);
}

/* ページの一番上にいる間は、ロゴを白抜きにする
   （モックアップでは白いロゴ画像に差し替えていた部分を、
     1枚のロゴを白く変換することで実現しています。
     ロゴを1か所で管理でき、差し替え忘れが起きないため）        */
.iwaki-header--overlay:not(.is-scrolled) .wp-block-site-logo img {
	filter: brightness(0) invert(1);
}

.iwaki-header--overlay.is-scrolled {
	position: fixed;
	background: var(--wp--preset--color--washi-light) !important;
	border-bottom-color: rgba(26, 58, 92, 0.15);
}

.iwaki-header--overlay.is-scrolled a,
.iwaki-header--overlay.is-scrolled .wp-block-navigation a {
	color: var(--wp--preset--color--ink);
}

/* --- ナビの一番右の「お問い合わせ」だけ、丸いボタンにする ------------- */
.iwaki-nav-cta a,
.wp-block-navigation-item.iwaki-nav-cta > a {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white) !important;
	border-radius: 999px;
	padding: 0.75rem 0.6rem;
	font-weight: 700;
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

/* 写真に重ねている間は、和紙色のボタンに反転させる（写真の上でも読めるように） */
.iwaki-header--overlay:not(.is-scrolled) .iwaki-nav-cta a {
	background: var(--wp--preset--color--washi-light);
	color: var(--wp--preset--color--navy) !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

@media (max-width: 900px) {
	.iwaki-nav-cta a,
	.wp-block-navigation-item.iwaki-nav-cta > a {
		writing-mode: horizontal-tb;
		padding: 0.75rem 1.5rem;
	}
}

/* ロゴの大きさ（ヘッダー内） */
.iwaki-logo img {
	height: 56px;
	width: auto;
}

@media (max-width: 600px) {
	.iwaki-logo img {
		height: 44px;
	}
}

/* ハンバーガーメニューを開いたときの中身は、常に読める色に戻す */
.wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--ink) !important;
}


/* =====================================================================
   5. 細かい部品
   ===================================================================== */

/* 白い細枠（トップの「知る」バナーで使用） */
.iwaki-frame {
	border: 1px solid rgba(255, 255, 255, 0.7);
	padding: 3rem 2.5rem;
}

@media (max-width: 900px) {
	.iwaki-frame {
		padding: 2rem 1.5rem;
	}
}

/* 見出しの上に置く小さな英字・カテゴリ名 */
.iwaki-eyebrow {
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--red);
	margin-bottom: 0.25rem;
}

/* 中央に短い横線を引く（「コンセプトについて」の上の線） */
.iwaki-rule-top {
	position: relative;
	padding-top: 1.25rem;
}

.iwaki-rule-top::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2.5rem;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}

/* おしらせの一覧（日付＋見出しの1行） */
.iwaki-newslist .wp-block-post {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem 1.5rem;
	padding: 1rem 0;
	margin: 0;
	border-bottom: 1px solid rgba(26, 58, 92, 0.15);
	font-size: 0.9rem;
}

.iwaki-newslist .wp-block-post-date {
	flex-shrink: 0;
	color: var(--wp--preset--color--navy);
	margin: 0;
}

.iwaki-newslist .wp-block-post-title {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.8;
}

/* カテゴリの小さな囲み */
.iwaki-tag {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--red);
	border-radius: 2px;
	padding: 0.15rem 0.5rem;
	font-size: 0.7rem;
	color: var(--wp--preset--color--red);
	line-height: 1.6;
}

/* 会社概要などの表 */
.iwaki-infotable table {
	width: 100%;
	border-collapse: collapse;
}

.iwaki-infotable th,
.iwaki-infotable td {
	text-align: left;
	padding: 0.9rem 1rem;
	border-bottom: 1px solid rgba(26, 58, 92, 0.15);
	border-inline: none;
}

.iwaki-infotable th {
	width: 200px;
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	vertical-align: top;
}

@media (max-width: 640px) {
	.iwaki-infotable th,
	.iwaki-infotable td {
		display: block;
		width: auto;
	}

	.iwaki-infotable th {
		padding-bottom: 0.25rem;
		border-bottom: none;
	}

	.iwaki-infotable td {
		padding-top: 0;
	}
}

/* 注意書きの帯（「ここは仮の文章です」等） */
.iwaki-note {
	background: rgba(168, 50, 42, 0.08);
	color: var(--wp--preset--color--red);
	border-radius: 4px;
	padding: 0.75rem 1rem;
	font-size: 0.8rem;
	line-height: 1.8;
}

/* トップのヒーローに置く、最新のおしらせ */
.iwaki-hero-notice {
	background: rgba(250, 246, 236, 0.94);
	color: var(--wp--preset--color--ink);
	border-radius: 4px;
	padding: 0.75rem 1.25rem;
	font-size: 0.8rem;
	line-height: 1.5;
	box-shadow: 0 4px 20px rgba(16, 37, 61, 0.25);
	max-width: 360px;
	margin-inline-start: auto;
}

/* キャッチコピー画像（縦組みの画像なので、幅を抑える） */
.iwaki-hero-catch img {
	width: clamp(120px, 14vw, 170px);
	height: auto;
	margin-inline: auto;
}

@media (max-width: 900px) {
	.iwaki-hero-catch img {
		width: clamp(170px, 46vw, 220px);
	}
}

/* フッターのロゴ（濃い背景の上に白抜きで置く） */
.iwaki-logo-invert img {
	filter: brightness(0) invert(1);
	opacity: 0.9;
}


/* =====================================================================
   6. 洋（商品詳細ページ）だけの見た目
   ---------------------------------------------------------------------
   色と書体は styles/yo-western.json（セクションスタイル「洋」）が担当します。
   ここに書くのは、theme.json では書けない配置まわりだけです。
   ===================================================================== */

/* 商品ページのテンプレートを使ったときは、ページの地色もクリームにする */
.iwaki-tpl-product {
	background-color: var(--wp--preset--color--cream);
}

/* 欧文の大きな商品名 */
.iwaki-latin-xl {
	font-family: var(--wp--preset--font-family--latin);
	font-size: clamp(2.5rem, 6vw, 3.8rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.02em;
}

.iwaki-latin-hero {
	font-family: var(--wp--preset--font-family--latin);
	font-size: clamp(3rem, 9vw, 5.5rem);
	font-weight: 500;
	line-height: 1.1;
	margin: 0;
}

/* 囲み罫のタグ（HERBAL DRINK 等） */
.iwaki-outline-tag {
	display: inline-block;
	border: 1px solid currentColor;
	padding: 0.3rem 1rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	line-height: 1.6;
}

/* 丸いバッジ（自然の恵みを10の力に。） */
.iwaki-badge-round {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	border: 1px solid currentColor;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.iwaki-badge-round p {
	margin: 0;
}

/* 成分アイコンを10個並べる列（狭い画面では5個→3個に折り返す） */
.iwaki-ingredient-row {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 1rem;
	text-align: center;
}

.iwaki-ingredient-row > * {
	margin: 0;
}

.iwaki-ingredient-name {
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.5;
	margin: 0.6rem 0 0.25rem;
}

.iwaki-ingredient-desc {
	font-size: 0.62rem;
	line-height: 1.4;
	opacity: 0.75;
	margin: 0;
}

@media (max-width: 960px) {
	.iwaki-ingredient-row {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media (max-width: 640px) {
	.iwaki-ingredient-row {
		grid-template-columns: repeat(3, 1fr);
	}
}


/* =====================================================================
   7. 全体のこまごま
   ===================================================================== */

/* カバーブロック（全面写真の帯）の中の文字は、既定で白 */
.wp-block-cover .wp-block-heading,
.wp-block-cover p {
	color: inherit;
}

/* 画像は枠からはみ出さない */
img {
	max-width: 100%;
	height: auto;
}

/* 商品カード等のリンクは、触ると少しだけ薄くなる */
.iwaki-card a:hover img,
.iwaki-card:hover .iwaki-photo-slot {
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

/* 読み上げソフト専用の見出し（画面には出さない） */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* 表全体の横スクロール（スマホで表がはみ出さないように） */
.wp-block-table {
	overflow-x: auto;
}