/* ===============================
   鳩環屋 サイト全体の見た目（ヘッダー・4種類の帯・フッター・1列・文字）
   見本帳：dev/design/style-guide.html ／ メニューの見本：dev/design/navigation-options.html
   色は colors.css の変数を使う。文字の大きさ・余白・角の丸みはここで決める
   =============================== */
:root {
	/* 文字（BIZ UDPゴシック。読み込めないときは端末の文字） */
	--prs-font: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;

	/* 文字の大きさ（基本 18px。15px より小さくしない） */
	--prs-f-small: 15px;
	--prs-f-base: 18px;
	--prs-f-large: 20px;
	--prs-f-h2: 24px;
	--prs-f-h1: 28px;
	--prs-lh: 1.8;

	/* 余白（8の倍数） */
	--prs-s-1: 4px;
	--prs-s-2: 8px;
	--prs-s-3: 12px;
	--prs-s-4: 16px;
	--prs-s-5: 24px;
	--prs-s-6: 32px;
	--prs-s-7: 48px;

	/* 角の丸み */
	--prs-r-small: 8px;   /* ボタン・入力欄 */
	--prs-r-large: 12px;  /* 箱・カード */

	/* 中身の最大幅（ノートPC 1536px で真ん中に寄せる） */
	--prs-width: 1100px;
	/* ヘッダー・帯・フッターの左右の余白（広い画面では、ページの中身と左の端がそろうように） */
	--prs-side: max(var(--prs-s-4), calc((100% - var(--prs-width)) / 2 + var(--prs-s-4)));
}

/* ===============================
   テーマ（Welcart Basic）の部品を隠す
   ヘッダー・ヘッダー画像・フッター・「上へ」ボタン・サイドバー
   =============================== */
body.prs-site #masthead,
body.prs-site .main-image,
body.prs-site #colophon,
body.prs-site #toTop,
body.prs-site #secondary {
	display: none !important; /* 「上へ」ボタンはテーマの JS が表示を書きかえるので !important */
}

/* ===============================
   全体の文字と1列の形
   =============================== */
/* 中身が短いページでも、フッターが画面のいちばん下に来るように（縦にならべて、中身をのばす） */
body.prs-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--prs-color-white);
	color: var(--prs-color-text);
	font-family: var(--prs-font);
	font-size: var(--prs-f-base);
	line-height: var(--prs-lh);
}

body.prs-site a {
	color: var(--prs-color-main);
	text-underline-offset: 3px;
}

body.prs-site a:focus-visible,
body.prs-site button:focus-visible,
body.prs-site input:focus-visible {
	outline: 3px solid var(--prs-color-sky);
	outline-offset: 2px;
}

/* テーマは PC で幅 1000px・2列。1列にして、幅は 1100px まで */
body.prs-site #main,
body.prs-site.home #main {
	flex: 1 0 auto;
	width: 100%;
	max-width: var(--prs-width);
	margin: var(--prs-s-6) auto var(--prs-s-7);
	padding: 0 var(--prs-s-4);
}

body.prs-site #main.two-column #content {
	width: 100%;
	float: none;
}

/* ===============================
   ヘッダー（スクロールしても上に残る）
   =============================== */
.prs-head {
	position: sticky;
	top: 0;
	z-index: 100;
	width: auto;
	margin: 0; /* テーマが <header> 全部に下の余白を付けているので消す */
	background: var(--prs-color-white);
	border-bottom: 1px solid var(--prs-color-border);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ログインしているときの WordPress の黒い帯の下に来るように */
.admin-bar .prs-head {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .prs-head {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	/* この幅では黒い帯がスクロールで流れていくので、いちばん上でよい */
	.admin-bar .prs-head {
		top: 0;
	}
}

.prs-head__bar {
	display: flex;
	align-items: center;
	gap: var(--prs-s-2);
	min-height: 70px;
	padding: var(--prs-s-2) var(--prs-side);
}

.prs-logo {
	display: flex;
	align-items: center;
	gap: var(--prs-s-2);
	min-width: 0;
	color: var(--prs-color-text) !important;
	text-decoration: none !important;
}

.prs-logo__mark {
	flex: none;
	width: 44px;
	height: 44px;
}

.prs-logo__text {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap; /* 「鳩環屋」は折り返さない（ボタンが3つになって、せまい画面で1文字ずつ縦に折れたため） */
}

.prs-logo__text small {
	display: block;
	white-space: normal; /* 小さい文字は2行になってもよい */
	font-size: 13px;
	font-weight: 400;
	color: var(--prs-color-note);
}

.prs-head__tools {
	display: flex;
	flex: none; /* ロゴが長くてもボタンはつぶさない */
	gap: var(--prs-s-2);
	margin-left: auto;
}

/* ［トップ］［ログイン］［カート］のボタン（絵＋文字） */
.prs-tool {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	min-height: 54px;
	padding: var(--prs-s-1) var(--prs-s-2);
	border: 2px solid var(--prs-color-main);
	border-radius: var(--prs-r-small);
	background: var(--prs-color-white);
	color: var(--prs-color-main) !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none !important;
}

.prs-tool:hover {
	background: var(--prs-color-main-light);
}

.prs-tool svg {
	width: 24px;
	height: 24px;
}

.prs-tool--cart {
	border-color: var(--prs-color-accent);
	background: var(--prs-color-accent);
	color: var(--prs-color-white) !important;
}

.prs-tool--cart:hover {
	border-color: var(--prs-color-accent-dark);
	background: var(--prs-color-accent-dark);
}

/* カートの数の丸 */
.prs-tool__count {
	position: absolute;
	top: -8px;
	right: -8px;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border: 2px solid var(--prs-color-white);
	border-radius: 12px;
	background: var(--prs-color-main-dark);
	color: var(--prs-color-white);
	font-size: 13px;
	line-height: 20px;
	text-align: center;
}

.prs-tool__count[hidden] {
	display: none;
}

/* せまいスマホ（320px など）：ロゴの小さい文字を2行にしてもよい・ボタンを少し小さく */
@media screen and (max-width: 374px) {
	.prs-logo__mark {
		width: 36px;
		height: 36px;
	}

	.prs-logo__text {
		font-size: 21px;
	}

	.prs-head__tools {
		gap: 4px;
	}

	.prs-tool {
		min-width: 50px;
		padding: var(--prs-s-1) 4px;
		font-size: 12px;
	}
}

/* スマホ：ロゴの上の小さい文字は、ボタンが3つあると何行にも折れるので出さない（同じ言葉はフッターにもある） */
@media screen and (max-width: 430px) {
	.prs-logo__text small {
		display: none;
	}
}

/* もっとせまいスマホ（320px など）：ロゴも少し小さく */
@media screen and (max-width: 359px) {
	.prs-logo__mark {
		width: 32px;
		height: 32px;
	}

	.prs-logo__text {
		font-size: 20px;
	}
}

/* ===============================
   4種類の帯（スマホは 2×2、広い画面は 1列に4つ）
   =============================== */
.prs-kinds {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--prs-color-main-dark); /* すき間の線の色 */
}

.prs-kinds a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--prs-s-1) var(--prs-s-2);
	background: var(--prs-color-main);
	color: var(--prs-color-white) !important;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none !important;
}

.prs-kinds a:hover {
	background: var(--prs-color-main-dark);
}

/* 今見ている種類：濃い青＋下にオレンジの線 */
.prs-kinds a.is-current {
	background: var(--prs-color-main-dark);
	box-shadow: inset 0 -4px 0 var(--prs-color-accent);
}

@media screen and (min-width: 768px) {
	.prs-kinds {
		grid-template-columns: repeat(4, 1fr);
		gap: 0;
		padding: 0 var(--prs-side);
		background: var(--prs-color-main);
	}

	.prs-kinds a {
		min-height: 52px;
		font-size: var(--prs-f-base);
	}
}

/* ===============================
   フッター（濃い青）
   =============================== */
.prs-foot {
	background: var(--prs-color-main-dark);
	color: var(--prs-color-white);
	font-size: var(--prs-f-small);
	line-height: 1.7;
}

.prs-foot__inner {
	padding: var(--prs-s-6) var(--prs-side) var(--prs-s-5);
}

.prs-foot__name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--prs-s-2);
	margin: 0 0 var(--prs-s-4);
	font-size: var(--prs-f-large);
	font-weight: 700;
}

.prs-foot__name img {
	width: 32px;
	height: 32px;
	padding: 3px;
	border-radius: 50%;
	background: var(--prs-color-white);
}

.prs-foot__name small {
	font-size: var(--prs-f-small);
	font-weight: 400;
}

.prs-foot__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--prs-s-1) var(--prs-s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.prs-foot__links a {
	display: inline-block;
	padding: var(--prs-s-1) 0; /* 指で押しやすい高さに */
	color: var(--prs-color-white) !important;
	text-decoration: underline;
}

/* 「このサイトの通信は暗号化（SSL）で守られています。」など */
.prs-foot__safe {
	margin: var(--prs-s-5) 0 0;
	padding: var(--prs-s-4) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.prs-foot__safe span {
	display: block;
}

.prs-foot__safe span:first-child::before {
	content: "🔒 ";
}

.prs-foot__copy {
	margin: var(--prs-s-5) 0 0;
	text-align: center;
	opacity: 0.85;
}

/* ===============================
   「ページの設定」で選んだページ（トップ・サイズを選ぶページ・商品のページ）
   中身は templates/page-*.php。ページの題名はプラグインが大きく出すので、テーマの題名は隠す
   =============================== */
.prs-page--auto .entry-header,
.prs-page--auto .sof .entry-title {
	display: none;
}

.prs-page--auto #content article {
	margin: 0;
}

/* 本文（ページの編集画面で書いたもの）の見た目は content.css */

/* 見出し */
.prs-site .prs-h1 {
	margin: 0 0 var(--prs-s-4);
	padding: 0;
	border: 0;
	font-size: var(--prs-f-h1);
	font-weight: 700;
	line-height: 1.4;
}

.prs-site .prs-h2 {
	margin: var(--prs-s-6) 0 var(--prs-s-4);
	padding: 0 0 0 var(--prs-s-3);
	border: 0;
	border-left: 6px solid var(--prs-color-main);
	font-size: var(--prs-f-h2);
	font-weight: 700;
	line-height: 1.5;
}

.prs-site .prs-lead {
	margin: 0 0 var(--prs-s-5);
	color: var(--prs-color-note);
}

/* トップの大きな写真（アイキャッチ画像） */
.prs-top__hero {
	margin: calc(-1 * var(--prs-s-6)) 0 var(--prs-s-5); /* 上の余白をなくして、ヘッダーにくっつける */
}

.prs-top__hero img {
	display: block;
	width: 100%;
	height: clamp(140px, 28vw, 360px);
	object-fit: cover;
	border-radius: 0 0 var(--prs-r-large) var(--prs-r-large);
}

.prs-top__heading {
	text-align: center;
}

/* トップの4種類の大きなボタン（スマホは 2×2、広い画面は横に4つ） */
.prs-kind-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--prs-s-3);
}

.prs-kind-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 2px solid var(--prs-color-main);
	border-radius: var(--prs-r-large);
	background: var(--prs-color-white);
	color: var(--prs-color-text) !important;
	text-decoration: none !important;
}

.prs-kind-card:hover {
	background: var(--prs-color-main-light);
}

.prs-kind-card__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain; /* 全色を並べた横長の写真も切れないように */
	background: var(--prs-color-white);
}

.prs-kind-card__name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2px;
	padding: var(--prs-s-2) 10px 0;
	color: var(--prs-color-main);
	font-size: var(--prs-f-base); /* スマホで「カラーネーム環」が1行に入る大きさ */
	line-height: 1.3;
}

/* 「押せる」と分かるように、名前の右に › */
.prs-kind-card__name::after {
	content: "›";
	font-size: 24px;
	line-height: 1;
}

.prs-kind-card__note {
	padding: 0 10px var(--prs-s-3);
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
	line-height: 1.5;
}

@media screen and (min-width: 768px) {
	.prs-kind-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--prs-s-4);
	}

	.prs-kind-card__name {
		font-size: 22px;
	}
}

/* サイズを選ぶ大きなカード（スマホは縦に並べる、広い画面は横に2つ） */
.prs-size-cards {
	display: grid;
	gap: var(--prs-s-4);
}

.prs-size-card {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	overflow: hidden;
	border: 2px solid var(--prs-color-main);
	border-radius: var(--prs-r-large);
	background: var(--prs-color-white);
	color: var(--prs-color-text) !important;
	text-decoration: none !important;
}

.prs-size-card:hover {
	background: var(--prs-color-main-light);
}

.prs-size-card__photo {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 160px;
	object-fit: contain;
	background: var(--prs-color-white);
}

.prs-size-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--prs-s-3);
}

.prs-size-card__size {
	color: var(--prs-color-main);
	font-size: 28px;
	line-height: 1.2;
}

.prs-size-card__note {
	font-size: var(--prs-f-small);
	line-height: 1.5;
}

.prs-size-card__go {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-top: auto;
	padding-top: 0;
	border-radius: var(--prs-r-small);
	background: var(--prs-color-main);
	color: var(--prs-color-white);
	font-style: normal;
	font-weight: 700;
}

.prs-size-card__go::after {
	content: "›";
	margin-left: var(--prs-s-2);
	font-size: 24px;
	line-height: 1;
}

@media screen and (min-width: 768px) {
	.prs-size-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--prs-s-5);
	}

	.prs-size-card {
		grid-template-columns: 200px minmax(0, 1fr);
	}

	.prs-size-card__body {
		padding: var(--prs-s-4) var(--prs-s-5);
	}

	.prs-size-card__size {
		font-size: 34px;
	}

	.prs-size-card__note {
		font-size: var(--prs-f-base);
	}
}

/* ご利用ガイド・ほかの環などのボタン（白地に青いふち） */
.prs-link-buttons {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: var(--prs-s-3);
	margin-top: var(--prs-s-5);
}

.prs-link-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--prs-s-2);
	min-height: 56px;
	padding: var(--prs-s-2) var(--prs-s-4);
	border: 2px solid var(--prs-color-main);
	border-radius: var(--prs-r-small);
	background: var(--prs-color-white);
	color: var(--prs-color-main) !important;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none !important;
}

.prs-link-button:hover {
	background: var(--prs-color-main-light);
}

.prs-link-button::after {
	content: "›";
	font-size: 26px;
	line-height: 1;
}

.prs-link-button small {
	display: block;
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
	font-weight: 400;
}

.prs-h2 + .prs-link-buttons {
	margin-top: 0;
}

/* ［‹ トップへ戻る］ */
.prs-back {
	display: inline-flex;
	align-items: center;
	gap: var(--prs-s-1);
	min-height: 48px;
	margin-top: var(--prs-s-6);
	padding: 0 var(--prs-s-5) 0 var(--prs-s-4);
	border: 2px solid var(--prs-color-main);
	border-radius: var(--prs-r-small);
	background: var(--prs-color-white);
	color: var(--prs-color-main) !important;
	font-weight: 700;
	text-decoration: none !important;
}

.prs-back::before {
	content: "‹";
	font-size: 26px;
	line-height: 1;
}

.prs-back:hover {
	background: var(--prs-color-main-light);
}

/* ===============================
   番号つきの流れ（内容の確認の「ご注文の前にご確認ください」・完了の画面・ご利用ガイドで共通）
   =============================== */
.prs-flow {
	margin: var(--prs-s-1) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: prs-flow;
}

.prs-flow li {
	position: relative;
	margin: 0;
	padding: 2px 0 2px 2.2em;
	list-style: none;
	counter-increment: prs-flow;
}

.prs-flow li::before {
	content: counter(prs-flow);
	position: absolute;
	top: 4px;
	left: 0;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--prs-color-main);
	color: var(--prs-color-white);
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1.6em;
	text-align: center;
}

/* ご利用ガイド：1つずつ青い帯に */
body.prs-site .entry-content .prs-flow--large {
	display: grid;
	gap: var(--prs-s-2);
	margin: 0 0 1em;
	padding: 0;
}

body.prs-site .entry-content .prs-flow--large li {
	margin: 0;
	list-style: none; /* テーマの「.entry-content ol li」の番号を出さない（番号は丸の中） */
	padding: var(--prs-s-3) var(--prs-s-4) var(--prs-s-3) calc(var(--prs-s-4) + 2.2em);
	border-radius: var(--prs-r-small);
	background: var(--prs-color-main-light);
}

.prs-flow--large li::before {
	top: calc(var(--prs-s-3) + 2px);
	left: var(--prs-s-4);
}

/* ===============================
   ご利用ガイド（templates/page-guide.php。本文の見た目は content.css）
   =============================== */
.prs-guide__toc {
	margin: 0 0 var(--prs-s-6);
	padding: var(--prs-s-4) var(--prs-s-5);
	border-radius: var(--prs-r-large);
	background: var(--prs-color-beige);
}

.prs-guide__toc-title {
	margin: 0 0 var(--prs-s-2);
	font-weight: 700;
}

.prs-guide__toc ol {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr));
	gap: var(--prs-s-1) var(--prs-s-5);
	margin: 0;
	padding: 0 0 0 1.5em;
}

.prs-guide__toc li {
	margin: 0;
	line-height: 1.8;
}

/* 見出しへ飛んだとき、上に残るヘッダー（約70px）に隠れないように */
.prs-guide [id^="guide-"] {
	scroll-margin-top: 90px;
}

.prs-guide .entry-content h2:first-child {
	margin-top: 0;
}

body.prs-site .entry-content .prs-guide__button {
	max-width: 480px;
	margin: 0 0 1em;
}

/* 発送のお休み（カレンダー）。表の形は本文の表（content.css）より強くする */
.prs-cals {
	display: flex;
	flex-wrap: wrap;
	gap: var(--prs-s-5);
	margin: 0 0 var(--prs-s-2);
}

body.prs-site .prs-cal .prs-cal__table {
	width: auto;
	margin: 0;
	border-collapse: collapse;
}

body.prs-site .prs-cal .prs-cal__title {
	margin: 0 0 var(--prs-s-1);
	font-weight: 700;
	text-align: center;
}

body.prs-site .prs-cal .prs-cal__table :is(th, td) {
	width: 2.6em;
	padding: var(--prs-s-1) 0;
	border: 1px solid var(--prs-color-border);
	background: var(--prs-color-white);
	font-size: var(--prs-f-base);
	font-weight: 400;
	line-height: 1.6;
	text-align: center;
	white-space: nowrap;
}

body.prs-site .prs-cal .prs-cal__table th {
	background: var(--prs-color-beige);
	font-size: var(--prs-f-small);
}

body.prs-site .prs-cal .prs-cal__table td.is-closed {
	background: var(--prs-color-error-bg);
	color: var(--prs-color-error);
	font-weight: 700;
}

/* スマホ：本文の2列の表を上下にする決まり（content.css）は、カレンダーにはかけない */
@media (max-width: 600px) {
	body.prs-site .prs-cal .prs-cal__table tr > :is(th, td) {
		display: table-cell;
		width: 2.4em;
	}

	body.prs-site .prs-cal .prs-cal__table tr > :is(th, td):first-child {
		border-bottom: 1px solid var(--prs-color-border);
	}
}

.prs-cal-legend::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin: 0 var(--prs-s-1) -0.15em 0;
	border: 1px solid var(--prs-color-border);
	background: var(--prs-color-error-bg);
}

body.prs-site .entry-content .prs-cal-legend {
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
}