@charset "utf-8";
/* ============================================================
   site.css — chimoto.net 共通スタイル(全ページで読み込む1本)

   書き方のルール
   - クラス名は「部品名」(.site-header, .photo-grid など)と
     「状態・種類」(.two-columns, .is-open など)だけ。部品の中身は
     意味のあるタグ(nav, ul, figure, figcaption …)で指定する。
   - 色・余白・文字サイズは下の :root の変数を使う。
   - スマホ用は各部品の直後の @media (max-width: 640px) に書く。
   - ページの最上部の色帯は <body class="accent-green"> のように指定する。
   - 1ページでしか使わないスタイルは、そのページ専用のCSS
     (index.css / about.css / menu.css / warabimochi.css / thanks.css)に書く。

   目次
   1. 変数
   2. リセット・基本
   3. サイト共通の枠(ヘッダー・メニュー・フッター)
   4. 見出し・本文
   5. 部品(ボタン・写真グリッド など)
   ============================================================ */

/* ---------- 1. 変数 ---------- */
:root {
	--text: #444444;          /* 本文 */
	--text-sub: #555555;      /* 補助的な文字 */
	--text-dark: #434343;     /* フッター店舗情報など */
	--link: #5c8730;          /* リンク・メニュー */
	--green: #456e1c;         /* 小見出し・区切り線 */
	--green-hover: #4a7119;   /* ホバー時 */
	--brown: #6b1b00;         /* ヘッダーのキャッチコピー */
	--paper: #eff1ea;         /* 本文エリアの背景色(模様の下地) */
	--footer-bg: #333333;

	--font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic, Meiryo, sans-serif;
	--font-tel: Futura, "Century Gothic", Avenir, sans-serif;

	--content-width: 980px;   /* 本文の最大幅(左右の余白を含む) */
	--gutter: 30px;           /* 本文の左右の余白 */

	--accent: #333333;        /* ページごとのアクセントカラー(上部の帯) */
}
@media (max-width: 640px) {
	:root { --gutter: 20px; }
}

/* ページごとのアクセントカラー(CLAUDE.mdの一覧と対応) */
.accent-purple { --accent: #4c1130; } /* about */
.accent-brown  { --accent: #783f04; } /* coffee */
.accent-yellow { --accent: #c9b026; } /* softcream */
.accent-orange { --accent: #d66a35; } /* warabidrink */
.accent-green  { --accent: #456e1c; } /* warabimochi, thanks, policy */
.accent-grey   { --accent: #333333; } /* index, menu */

/* ---------- 2. リセット・基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }   /* ページ内リンクをなめらかにスクロール */
}
body, h1, h2, h3, h4, p, ul, ol, figure, address, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; vertical-align: middle; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

body {
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.9;
	color: var(--text-sub);
}
/* ページ最上部のアクセントカラーの帯 */
body::before {
	content: "";
	display: block;
	height: 20px;
	background: var(--accent);
}

a { color: var(--link); text-decoration: none; transition: opacity .2s ease; }
a:hover { opacity: .4; }
@media (max-width: 640px) {
	a:hover { opacity: 1; }
}

/* ---------- 3. サイト共通の枠 ---------- */

/* ヘッダー: 左にロゴ、右上に電話番号、右下にメニュー */
.site-header {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-areas:
		"logo tel"
		"logo nav";
	align-items: start;
	padding: 10px;
}
.site-logo {
	grid-area: logo;
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: .1em;
	color: var(--brown);
	text-shadow: #fff 0 1px 0;
}
.site-logo:hover { opacity: 1; }
.site-logo span { display: block; }
.site-logo img { display: block; }

.header-tel {
	grid-area: tel;
	justify-self: end;
	margin-right: 30px;
	padding: 6px 18px;
	border: 1px solid var(--text-dark);
	font-family: var(--font-tel);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.9;
	white-space: nowrap;
	color: var(--link);
	transition: background-color .2s, color .2s, border-color .2s;
}
.header-tel b { font-size: 1.15em; }        /* 数字 */
.header-tel span { font-size: .7em; margin: 0 1px; }  /* ハイフン */
.header-tel:hover { opacity: 1; background: var(--green-hover); border-color: var(--green-hover); color: #fff; }

/* メインメニュー(PC: ヘッダー内に横並び / スマホ: 右から出る全画面メニュー) */
.global-nav {
	grid-area: nav;
	margin-top: 12px;
	text-align: center;
}
.global-nav ul { margin-bottom: 10px; font-size: 0; }
.global-nav li { display: inline-block; font-size: 14px; line-height: 35px; }
.global-nav a { display: block; padding: 0 20px; font-weight: 600; letter-spacing: .02em; }
.global-nav a:hover { opacity: .4; color: var(--green-hover); }
.menu-toggle, .menu-close { display: none; }

@media (max-width: 640px) {
	.site-header { display: block; padding: 15px; }
	.site-logo { margin: 14px 0; padding: 14px 0; text-align: center; }
	.site-logo img { margin: 0 auto; }
	.header-tel { display: none; }

	/* 三本線ボタン(画面右上に固定) */
	.menu-toggle {
		display: block;
		position: fixed;
		z-index: 99;
		top: 10px;
		right: 20px;
		width: 48px;
		height: 48px;
		border: 2px solid #fff;
		border-radius: 50%;
		background: #fff;
		opacity: .8;
	}
	.menu-toggle span,
	.menu-toggle span::before,
	.menu-toggle span::after {
		position: absolute;
		left: 6px;
		width: 32px;
		border-top: 3px solid var(--green);
	}
	.menu-toggle span { top: 10px; }
	.menu-toggle span::before,
	.menu-toggle span::after { content: ""; left: 0; }
	.menu-toggle span::before { top: 7px; }
	.menu-toggle span::after { top: 17px; }

	/* 全画面メニュー(閉じているときは画面の右外) */
	.global-nav {
		position: fixed;
		z-index: 100;
		inset: 0 auto 0 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		margin: 0;
		padding-top: 50px;
		overflow: auto;
		background: rgba(51, 51, 51, .95);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .4s ease-in-out, visibility 0s .4s;
	}
	.global-nav.is-open {
		transform: none;
		visibility: visible;
		transition: transform .4s ease-in-out;
	}
	.global-nav ul { margin: 0; }
	.global-nav li { display: block; font-size: 16px; line-height: 40px; }
	.global-nav a {
		padding: 0 16px 8px;
		color: #fff;
		border-bottom: 1px solid rgba(255, 255, 255, .15);
	}
	.global-nav a:hover { opacity: 1; color: #fff; }

	/* ×ボタン */
	.menu-close {
		display: block;
		position: relative;
		width: 32px;
		height: 32px;
		margin: 10px 20px 21px auto;
	}
	.menu-close::before,
	.menu-close::after {
		content: "";
		position: absolute;
		top: 15px;
		left: 2px;
		width: 28px;
		border-top: 2px solid #fff;
		transform: rotate(45deg);
	}
	.menu-close::after { transform: rotate(-45deg); }

	html.menu-open { overflow: hidden; }   /* メニューを開いている間は背面をスクロールさせない */
}

/* 本文エリア・フッターの背景(和紙風の模様) */
main, .site-footer {
	background: var(--paper) url(../images/ui-main-bg.webp);
}

/* フッター */
.site-footer { padding-top: 10px; }
.store-info {
	padding: 10px 0;
	border-top: 1px solid var(--green);
	font-size: 16px;
	text-align: center;
	color: var(--text-dark);
}
@media (min-width: 641px) {
	/* PCでは店舗情報を非表示(about.htmlと重複するため)。高さは残す */
	.store-info { visibility: hidden; }
}
.footer-bar {
	padding: 15px;
	background: var(--footer-bg);
	color: #fff;
	text-align: center;
}
.footer-bar a { color: #fff; }
.footer-nav ul { padding-left: 15px; font-size: 0; }
.footer-nav li { display: inline-block; font-size: 13px; line-height: 60px; }
.footer-nav a { display: block; padding-right: 1em; }
.footer-bar p { margin-top: 12px; }
.footer-bar small { font-size: 11.67px; }
.back-to-top {
	display: inline-block;
	width: 58px;
	height: 58px;
	border-radius: 14px;
	overflow: hidden;
	background: url(../images/ui-back-to-top.png);
}
@media (max-width: 640px) {
	.footer-nav { display: none; }   /* スマホは三本線メニューと重複するため非表示 */
}

/* ---------- 4. 見出し・本文 ---------- */

/* 本文の入れ物(最大幅+左右の余白) */
.container {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* 大きな見出し(ページ名・セクション名)。下に飾り線 */
.page-title h1,
.section-title {
	margin: 30px 0;
	padding-bottom: .6em;
	background: url(../images/ui-divider-h2.png) no-repeat center bottom;
	font-size: 26.6px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .1em;
	text-align: center;
	color: var(--text);
}

/* 中くらいの見出し。下に菱形の飾り */
.headline {
	margin-bottom: 1em;
	padding-bottom: 20px;
	background: url(../images/ui-h3-marker-dark.png) no-repeat center bottom;
	font-size: 22.4px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}
@media (max-width: 640px) {
	.headline { margin-top: 15px; }
}

/* 本文の段落 */
main p {
	margin-bottom: 10px;
	font-size: 16px;
	color: var(--text);
}
/* 本文中の小見出し(緑) */
.prose h2,
.prose h3 {
	font-size: 18.2px;
	font-weight: 700;
	color: var(--green);
}

/* ページ名の見出しブロック */
.page-title {
	padding: 60px 0;
	text-align: center;
}
@media (max-width: 640px) {
	.page-title { padding: 20px; }
}

/* 導入文(中央寄せ・太字・下に菱形の飾り) */
main .lead {
	margin-bottom: 22.4px;
	padding-bottom: 20px;
	background: url(../images/ui-h3-marker-dark.png) no-repeat center bottom;
	font-size: 15.68px;
	font-weight: 700;
	line-height: 35.84px;
	text-align: center;
	color: var(--text-sub);
}
@media (max-width: 640px) {
	main .lead { margin-top: 15px; }
}

/* ---------- 5. 部品 ---------- */

/* ページ上部の写真見出し(ヒーロー)。写真はページ別CSSまたは下の .hero-* で指定 */
.page-hero {
	padding: 200px 30px 150px;
	background: #333 no-repeat center / cover;
}
.page-hero h1 {
	font-size: 42px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: .1em;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, .7), 0 4px 14px rgba(0, 0, 0, .5);
}
@media (max-width: 640px) {
	.page-hero { padding: 50px 0; }
	.page-hero h1 { padding: 1em 0; font-size: 28px; text-align: center; }
}
.hero-about       { background-image: url(../images/hero-about.webp); }
.hero-coffee      { background-image: url(../images/hero-coffee.webp); }
.hero-menu        { background-image: url(../images/hero-menu.webp); }
.hero-softcream   { background-image: url(../images/hero-softcream.webp); }
.hero-warabidrink { background-image: url(../images/hero-warabidrink.webp); }
.hero-warabimochi { background-image: url(../images/hero-warabimochi.webp); }

/* 導入文の白い帯(ヒーローの直下) */
.intro { background: #fff; }
.intro .container { padding-block: 30px 60px; }
@media (max-width: 640px) {
	/* スマホでは導入文を左揃えに(長い文章の中央揃えは行頭がそろわず読みにくい) */
	.intro p:not(.button-row) { text-align: left; }
}
@media (max-width: 640px) {
	.intro .container { padding: 15px; }
}

/* 文章と写真を左右に並べる紹介ブロック(HTMLの順に左→右。スマホは縦に並ぶ) */
.feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 6%;
	align-items: start;
	max-width: 1020px;
	margin-inline: auto;
	padding: 60px;
}
.feature img { display: block; width: 100%; }
.feature > div > :last-child { margin-bottom: 0; }
/* 写真を左に置く帯。HTMLは常に「見出し・文章 → 写真」の順に書き、PC幅でだけ写真を左へ
   (スマホの1列表示では、どの帯も 題名 → 内容 → 写真 の順になる) */
@media (min-width: 641px) {
	.feature.reverse > img { order: -1; }
}
@media (max-width: 640px) {
	.feature { grid-template-columns: 1fr; padding: 15px; }
	.feature > * { margin-top: 4%; }
	.feature > div:last-child > :last-child { margin-bottom: 10px; }   /* 旧ページと同じく、帯の最後の段落の下に少し余白 */
	.feature .headline { margin-top: 0; }
}

/* 緑の区切り線 */
hr.divider {
	max-width: 1020px;
	margin: 10px auto;
	border: 0;
	border-top: 1px solid var(--green);
}
@media (max-width: 640px) {
	hr.divider { width: calc(95% - 30px); margin-block: 25px; }
}

/* 写真を並べるグリッド。列の数は .three-columns / .four-columns(スマホは2列) */
.photo-grid {
	display: grid;
	grid-template-columns: repeat(var(--columns, 3), 1fr);
	gap: 55px 6%;
	text-align: center;
}
.photo-grid.four-columns { --columns: 4; }
.photo-grid img { display: block; width: 100%; }
.photo-grid figcaption {
	margin-bottom: 10px;
	font-size: 16px;
	line-height: 1.9;
	color: var(--text);
}
.photo-grid.round img { border-radius: 50%; }   /* 丸く切り抜く */
@media (max-width: 640px) {
	.photo-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 4%; }
}

/* 白い帯の中で、導入文に続けて写真グリッドを置くとき */
.intro.with-photos .container { padding-bottom: 30px; }
.intro.with-photos .photo-grid { margin-top: 70px; }
@media (max-width: 640px) {
	.intro.with-photos .container { padding-bottom: 15px; }
	.intro.with-photos .photo-grid { margin-top: 40px; }
}

/* ボタン */
.button {
	display: inline-block;
	min-width: 4em;
	max-width: 100%;
	padding: .5em 3em;
	border: 1px solid currentColor;
	line-height: 1.8;
	text-align: center;
	transition: all .2s;
}
.button:hover { opacity: 1; }
.button.brown { background: #764103; border-color: #764103; color: #fff; }
.button.brown:hover { background: #a55900; }
.button-row { margin-top: 10px; font-size: 14px; text-align: center; }

/* クリックで拡大できる画像(印刷メニュー・価格表など) */
.zoomable {
	max-width: 620px;   /* 画像560px + 左右の余白 */
	margin: 0 auto;
	padding: 30px;
}
.zoomable a, .zoomable img { display: block; }
.zoomable a:hover { opacity: 1; }
@media (max-width: 640px) {
	.zoomable { max-width: none; padding: 30px 15px 15px; }
}
/* 見出し+拡大できる画像1枚のセクション */
@media (max-width: 640px) {
	.price-sheet { padding: 15px 15px 0; }
	.price-sheet .zoomable { padding-inline: 0; }
}
/* 拡大表示(main.jsが<dialog>を作る) */
.zoom-dialog {
	max-width: 90vw;
	max-height: 90vh;
	padding: 10px;
	border: 0;
	box-shadow: #000 0 0 5px;
	overflow: auto;
}
.zoom-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.zoom-dialog img { display: block; max-width: calc(90vw - 20px); max-height: calc(90vh - 20px); }
.zoom-close {
	position: absolute;
	top: 20px;
	right: 10px;
	width: 30px;
	height: 30px;
	background: rgba(255, 255, 255, .5);
}
.zoom-close::before,
.zoom-close::after {
	content: "";
	position: absolute;
	top: 14px;
	left: 7px;
	width: 16px;
	border-top: 1px solid #333;
	transform: rotate(45deg);
}
.zoom-close::after { transform: rotate(-45deg); }

/* 中央揃えの文章 */
.centered { text-align: center; }


/* セクションの上下の余白 */
.section { padding-block: 30px; }
.section.spacious { padding-block: 60px; }
@media (max-width: 640px) {
	.section { padding-block: 0 30px; }
	.section.spacious { padding-block: 20px; }
}