/* ==========================================================================
   corop — トップページ スタイル（2026-08 デザイン改訂版）
   Figma: PC=node 52:2837 / SP=node 208:5277
   基準: Figma 1280px を ×1.125 でスケール（全ページ共通の換算）
   ※色トークン・フォントは header-footer.css の :root で定義（先に読み込む）
   ========================================================================== */

:root {
	--corop-content: 1080px;      /* 中央コンテンツ最大幅（PC） */
	--corop-light-olive: #dcd7c4; /* 薄オリーブ（Products地） */
}

* { box-sizing: border-box; }

/* ページが短くてもフッターを画面下に貼り付ける（sticky footer）
   body を縦フレックスにして、main を余りの高さで伸ばす。
   コンテンツが長いページでは何も起きない（通常どおり下に伸びる）。 */
body {
	margin: 0;
	min-height: 100vh;
	min-height: 100svh; /* スマホのアドレスバー分を除いた高さ（対応ブラウザのみ上書き） */
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	background: var(--corop-paper, #f3f2f1);
	color: var(--corop-ink, #4c4948);
	font-family: var(--corop-font, "Avenir", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* ヘッダーとフッターの間の領域が、余った高さを引き取る */
.site-main {
	flex: 1 0 auto;
}

img { max-width: 100%; }
a { color: inherit; }

.corop-container {
	max-width: var(--corop-content);
	margin-inline: auto;
	padding-inline: 24px;
}

/* ===== 共通ボタン ===== */
/* テキスト＋矢印のリンク
   通常: 黒文字＋黒矢印 / ホバー: オレンジ文字＋オレンジ矢印＋下線（Figma 118:3463） */
.btn-arrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	color: var(--corop-ink);
	text-decoration: none;
	font-size: 16px;
	letter-spacing: 0.06em;
	transition: color 0.2s ease, border-color 0.2s ease;
}
/* 矢印は1枚のSVGをマスクとして使い、色は文字色（currentColor）に追従させる。
   画像を差し替える方式だとSVGごとの内在サイズの差で幅が変わるため */
.btn-arrow__icon {
	flex: 0 0 auto;
	width: 42px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: url("../images/arrow.svg") no-repeat center / contain;
	mask: url("../images/arrow.svg") no-repeat center / contain;
}
.btn-arrow:hover {
	color: var(--corop-orange, #d79000);
	border-bottom-color: var(--corop-orange, #d79000);
}


.btn-outline-orange {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 226px;  /* Figma 201 × 1.125 */
	height: 62px;  /* Figma 55 × 1.125 */
	border: 2px solid var(--corop-orange, #d79000);
	border-radius: 5px;
	background: var(--corop-paper, #f3f2f1);
	color: var(--corop-orange, #d79000);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
/* ホバー：オレンジで塗りつぶし＋白文字（Figma 118:3553 バリアント2） */
.btn-outline-orange:hover {
	background: var(--corop-orange, #d79000);
	color: var(--corop-paper, #f3f2f1);
}

/* 一覧へのピルボタン（Figma 118:3582 / 118:3598）
   通常: 白地＋オリーブ枠2px＋オリーブ文字 / ホバー: オリーブ塗り＋白文字 */
.btn-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 216px; /* Figma 192 × 1.125 */
	height: 44px;     /* Figma 39 × 1.125 */
	padding: 0 24px;
	border: 2px solid var(--corop-olive, #9d8a3c);
	border-radius: 999px;
	background: var(--corop-white, #fff);
	color: var(--corop-olive, #9d8a3c);
	font-size: 16px; /* Figma 14 × 1.125 */
	font-weight: 500;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-pill:hover {
	background: var(--corop-olive, #9d8a3c);
	color: var(--corop-paper, #f3f2f1);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	padding-top: 0;
}
.hero__inner {
	max-width: 983px; /* Figma 831 × 1.125 ＋ 左右余白 */
	margin-inline: auto;
	padding-inline: 24px;
}
.hero__slider {
	position: relative;
	overflow: hidden;
	height: 549px; /* Figma 488 × 1.125 */
	touch-action: pan-y;
	cursor: grab;
}
/* 横スライド（トラックを translateX で動かす） */
.hero__track {
	display: flex;
	height: 100%;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}
.hero__track.is-dragging {
	transition: none;
}
.hero__slide {
	flex: 0 0 100%;
	height: 100%;
}

/* 画像にリンク先URLが設定されている場合（管理画面「トップページ画像」） */
.hero__link {
	display: block;
	transition: opacity 0.2s ease;
}
.hero__link:hover {
	opacity: 0.88;
}
.hero__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 21px; /* Figma 629-610 = 19 × 1.125 */
}
.hero__dot {
	padding: 0;
	border: 0;
	cursor: pointer;
	width: 11px;
	height: 11px;
	border-radius: 999px;
	background: rgba(157, 138, 60, 0.3);
	transition: width 0.2s ease, background-color 0.2s ease;
}
.hero__dot.is-active {
	width: 34px;
	background: var(--corop-olive, #9d8a3c);
}

/* ==========================================================================
   Intro
   ========================================================================== */
.intro {
	padding-top: 95px; /* Figma 715-629 = 86 × 1.125 */
}
.intro__grid {
	display: flex;
	align-items: flex-start;
	gap: 46px; /* Figma 785-744 = 41 × 1.125 */
	max-width: 978px; /* Figma 827 × 1.125 ＋ 余白 */
}
.intro__body {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 581px; /* Figma 516 × 1.125 */
}
.intro__title { margin: 0 0 30px; }
.intro__title img {
	display: block;
	width: 341px; /* Figma 303 × 1.125 */
	height: auto;
}
.intro__text p {
	margin: 0 0 27px;
	font-size: 15px; /* Figma 13 × 1.125 */
	letter-spacing: 0.05em;
	line-height: 2.08; /* Figma 27 / 13 */
}
.intro__text p:last-child { margin-bottom: 0; }
/* SPだけで入れる改行 / SPでは出さない段落 */
.intro__text .sp-br { display: none; }
.intro__body .btn-arrow { margin-top: 40px; }

.intro__images {
	flex: 0 0 auto;
	width: 304px; /* Figma 270 × 1.125 */
}
.intro__img + .intro__img { margin-top: 30px; }
.intro__img img {
	display: block;
	width: 100%;
	height: 228px; /* Figma 203 × 1.125 */
	object-fit: cover;
}

/* ==========================================================================
   Products（薄オリーブの帯）
   ========================================================================== */
.products {
	position: relative;
	margin-top: 100px;
	padding: 61px 0 84px; /* Figma 1384-1330 = 54 × 1.125 */
	background: var(--corop-light-olive, #dcd7c4);
}
.products__head {
	text-align: center;
	margin-bottom: 26px;
}
.products__title {
	margin: 0;
	color: var(--corop-orange, #d79000);
	font-size: 53px; /* Figma 46.8 × 1.125 */
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.15;
}
.products__sub {
	margin: 6px 0 0;
	color: var(--corop-orange, #d79000);
	font-size: 20px; /* Figma 18.2 × 1.125 */
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.6;
}

/* 肉球（帯の右上に散らす） */
.products__paws {
	position: absolute;
	top: -78px;
	left: 50%;
	width: 243px; /* Figma 216 × 1.125 */
	height: 322px;
	transform: translateX(212px);
	pointer-events: none;
}
.products__paws img {
	position: absolute;
	width: 92px;
	height: auto;
	opacity: 0.9;
}
.products__paws img:nth-child(1) { top: 0;     left: 1px; width: 82px; }
.products__paws img:nth-child(2) { top: 115px; left: 0; }
.products__paws img:nth-child(3) { top: 126px; left: 122px; width: 93px; }
.products__paws img:nth-child(4) { top: 238px; left: 153px; width: 90px; }

.products__body {
	display: flex;
	align-items: center;
	gap: 60px;
	max-width: 888px;
	margin-inline: auto;
}
/* 商品ビジュアルは「袋＋チェック布＋フード皿」を1枚に書き出した画像
   （assets/images/product/product-visual.png）。差し替えは同名で上書き */
.products__visual {
	flex: 0 0 auto;
	width: 494px; /* Figma 439.57 × 1.125 */
}
.products__photo {
	display: block;
	width: 100%;
	height: auto;
}
.products__info {
	flex: 1 1 auto;
	min-width: 0;
}
.products__name {
	margin: 0;
	font-size: 24px; /* Figma 21 × 1.125 */
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.35;
}
.products__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 21px 0 0;
	padding: 0;
	list-style: none;
}
.products__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 2px 22px;
	border-radius: 22px;
	background: var(--corop-orange, #d79000);
	color: var(--corop-paper, #f3f2f1);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.4;
	white-space: nowrap;
	text-indent: 0.2em;
}
.products__desc {
	margin: 25px 0 0;
	font-size: 15px;
	letter-spacing: 0.1em;
	line-height: 1.5;
}
.products__info .btn-outline-orange { margin-top: 49px; }

/* 商品が2件以上のときのスライドショー（ヒーローと同じ横スライド方式） */
.products__slider {
	overflow: hidden;
}
.products__track {
	display: flex;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}
.products__track.is-dragging {
	transition: none;
}
.products__slide {
	flex: 0 0 100%;
	min-width: 0;
	/* 高さの違う商品が混ざっても縦位置が揃うように */
	display: flex;
	align-items: center;
}
.products__slide .products__body {
	width: 100%;
}
.products__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 30px;
}
.products__dot {
	padding: 0;
	border: 0;
	cursor: pointer;
	width: 11px;
	height: 11px;
	border-radius: 999px;
	background: rgba(157, 138, 60, 0.3);
	transition: width 0.2s ease, background-color 0.2s ease;
}
.products__dot.is-active {
	width: 34px;
	background: var(--corop-olive, #9d8a3c);
}

.products__more {
	max-width: 888px;
	margin: 30px auto 0;
	text-align: right;
}

/* ==========================================================================
   NEWS / FAQ
   ========================================================================== */
.newsfaq {
	padding: 96px 0 84px;
}
.newsfaq__grid {
	display: grid;
	grid-template-columns: 369px 383px; /* Figma 328 / 340 × 1.125 */
	justify-content: center;
	gap: 99px; /* Figma 678-590 = 88 × 1.125 */
	max-width: 899px;
}
.sec-head {
	margin-bottom: 26px;
	text-align: center;
}
.sec-head__en {
	margin: 0;
	color: var(--corop-olive, #9d8a3c);
	font-size: 40px; /* Figma 36 × 1.125 */
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.2;
}
.sec-head__ja {
	margin: 2px 0 0;
	font-size: 15px;
	letter-spacing: 0.2em;
	line-height: 1.6;
}

/* NEWS 一覧 */
.news {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px dashed rgba(76, 73, 72, 0.45);
}
.news__item {
	border-bottom: 1px dashed rgba(76, 73, 72, 0.45);
}
.news__item a {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"date  arrow"
		"text  arrow";
	column-gap: 12px;
	padding: 17px 0;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.news__item a:hover { opacity: 0.6; }
.news__date {
	grid-area: date;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 2;
}
.news__text {
	grid-area: text;
	font-size: 15px;
	letter-spacing: 0.03em;
	line-height: 1.85;
}
.news__arrow {
	grid-area: arrow;
	align-self: center;
	width: 29px;
	height: 29px;
}
.news__empty {
	margin: 0;
	font-size: 15px;
	letter-spacing: 0.05em;
}

/* FAQ 抜粋 */
.faq {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.faq__item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 106px; /* Figma 94 × 1.125 */
	padding: 18px 22px;
	border-radius: 11px; /* Figma 10 × 1.125 */
	background: var(--corop-white, #fff);
	color: inherit;
	text-decoration: none;
	font-size: 16px; /* Figma 14 × 1.125 */
	line-height: 1.85;
	transition: opacity 0.2s ease;
}
/* ホバー：薄オリーブの地＋文字を Medium に（Figma 118:3619 バリアント2） */
.faq__item a:hover {
	background: var(--corop-light-olive, #dcd7c4);
	font-weight: 500;
}
.faq__arrow { flex: 0 0 auto; }

.newsfaq__more {
	margin-top: 36px;
	text-align: center;
}

/* ==========================================================================
   Gallery（最下部の写真）
   ========================================================================== */
.gallery {
	display: grid;
	/* 列数は front-page.php が枚数に応じて --gallery-cols で渡す（既定3列） */
	grid-template-columns: repeat(var(--gallery-cols, 3), 1fr);
}
.gallery__item img {
	display: block;
	width: 100%;
	height: 394px; /* Figma 350 × 1.125 */
	object-fit: cover;
}
/* 4枚目はSPのスライドショー専用（PCは Figma どおり3枚並び） */
.gallery__item--sp { display: none; }

/* ==========================================================================
   SP（Figma node 208:5277）
   ========================================================================== */
@media (max-width: 900px) {
	.newsfaq__grid {
		grid-template-columns: 1fr;
		gap: 64px;
		max-width: 520px;
	}
}

@media (max-width: 768px) {
	/* Hero */
	.hero__inner {
		padding-inline: 0;
	}
	.hero__slider {
		height: auto;
		aspect-ratio: 402 / 527;
	}
	.hero__dots {
		margin-top: 14px;
	}

	/* Intro */
	.intro {
		padding-top: 88px;
	}
	.intro__grid {
		display: block;
	}
	.intro__body {
		max-width: none;
	}
	/* ロゴとボタンは中央、本文は左寄せ（Figma SP 準拠） */
	.intro__title {
		margin-bottom: 34px;
		text-align: center;
	}
	.intro__title img {
		width: 209px; /* Figma 224 × 0.933 */
		margin-inline: auto;
	}
	.intro__text {
		text-align: left;
	}
	.intro__text .sp-br { display: inline; }
	.intro__text .is-pc-only { display: none; }
	.intro__text p {
		margin-bottom: 26px;
		font-size: 13px;
		line-height: 2.08; /* Figma 27 / 13 */
	}
	/* SPのボタンは塗りのピル（Figma SP 208:5820 / 226×44） */
	.intro__body .btn-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 226px;
		height: 44px;
		margin: 34px auto 0;
		border-radius: 999px;
		background: var(--corop-olive, #9d8a3c);
		color: var(--corop-white, #fff);
		font-size: 14px;
		letter-spacing: 0.1em;
	}
	.intro__body .btn-arrow .btn-arrow__icon { display: none; }
	.intro__images {
		width: auto;
		margin-top: 40px;
	}
	.intro__img img {
		height: 200px;
	}

	/* Products */
	/* SP は Figma に商品セクションの帯が無い（薄オリーブの帯は FAQ 側だけ） */
	.products {
		margin-top: 88px;
		padding: 48px 0 56px;
		background: transparent;
	}
	.products__paws {
		display: none;
	}
	.products__head {
		margin-bottom: 10px;
	}
	.products__title {
		font-size: 33px;
	}
	.products__sub {
		margin-top: 4px;
		font-size: 15px;
	}
	.products__body {
		flex-direction: column;
		gap: 20px;
		max-width: none;
		text-align: center;
	}
	.products__visual {
		width: 294px;
		margin-inline: auto;
	}
	.products__info {
		width: 100%;
	}
	.products__name { font-size: 21px; }
	.products__badges {
		justify-content: center;
		gap: 8px;
		margin-top: 14px;
	}
	.products__badge {
		min-height: 26px;
		padding: 2px 20px;
		font-size: 12px;
	}
	.products__desc {
		margin-top: 14px;
		font-size: 13px;
	}
	.products__info .btn-outline-orange {
		width: 161px;
		height: 44px;
		margin-top: 20px;
		font-size: 14px;
	}
	/* SPの「商品一覧を見る」は矢印なしの下線つきテキスト（Figma SP 準拠） */
	.products__more {
		margin-top: 24px;
		text-align: center;
	}
	.products__more .btn-arrow {
		display: inline-block;
		padding-bottom: 3px;
		border-bottom: 1px solid var(--corop-ink, #4c4948);
		font-size: 15px;
		letter-spacing: 0.08em;
	}
	.products__more .btn-arrow .btn-arrow__icon { display: none; }

	/* NEWS / FAQ */
	.newsfaq {
		padding: 88px 0 0;
	}
	.newsfaq__grid {
		gap: 0;
	}
	.sec-head__en { font-size: 36px; }
	.sec-head__ja { font-size: 13px; }
	.news__date { font-size: 12px; }
	.news__text { font-size: 14px; }
	.news__arrow { width: 26px; height: 26px; }

	/* SP は FAQ だけ薄オリーブの帯にする（Figma 準拠） */
	.newsfaq__col--faq {
		margin: 80px -24px 0;
		padding: 48px 24px 56px;
		background: var(--corop-light-olive, #dcd7c4);
	}
	.faq__item a {
		min-height: 88px;
		padding: 14px 18px;
		font-size: 14px;
	}
	.newsfaq__more { margin-top: 28px; }

	/* Gallery：SPは横スクロールで1枚ずつ見せる */
	.gallery {
		display: flex;
		/* FAQ の帯と写真をぴったり繋げる（隙間を作らない） */
		margin-top: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.gallery::-webkit-scrollbar { display: none; }
	.gallery__item {
		flex: 0 0 100%;
		scroll-snap-align: center;
	}
	.gallery__item--sp { display: block; }
	.gallery__item img {
		height: 307px; /* Figma 329 × 0.933 */
	}
}

/* 管理者だけに見える未登録の案内（トップページ画像が空のとき） */
.corop-admin-note {
	margin: 0;
	padding: 40px 24px;
	text-align: center;
	font-size: 15px;
	line-height: 1.9;
	color: #8a7f5a;
	background: #f6f3e9;
	border: 1px dashed #c8bd97;
}
.corop-admin-note span {
	font-size: 13px;
	color: #a89f80;
}