@charset "utf-8";

:root{
	--brown:#6f4a2d;
	--brown-dark:#4a3323;
	--gold:#c99a4b;
	--cream:#fff8e9;
	--paper:#fbf4e4;
	--line:#d8c5a7;
	--shadow:0 18px 45px rgba(103,70,39,.12);
}

html{
	font-size:100%;
	scroll-behavior:smooth;
	overflow-x:hidden;
}

body{
	font-family:"Yu Mincho","Hiragino Mincho ProN","Yu Gothic",Meiryo,serif;
	color:var(--brown);
	font-size:16px;
	line-height:1.9;
	background:
		radial-gradient(circle at 20% 10%, rgba(255,255,255,.9), transparent 30%),
		linear-gradient(180deg,#fffaf0 0%,#f8edda 100%);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	overflow-x:hidden;
}

a{
	color:inherit;
	text-decoration:none;
	transition:opacity .3s ease, transform .3s ease, background .3s ease, color .3s ease;
}

a:hover{
	opacity:.78;
}

img{
	display:block;
	width:100%;
	height:auto;
}
ul,ol{
	list-style: none;
	padding: 0;
}
main{
	width:100%;
	overflow:hidden;
}

section{
	position:relative;
	padding:clamp(54px,7vw,96px) 0;
}

.inner{
	width:min(92%,1600px);
	max-width:100%;
	margin:0 auto;
}
.section-en{
	margin-bottom:10px;
	font-size:12px;
	letter-spacing:.12em;
	color:#7d684f;
}

h2{
	color:var(--brown);
	font-size:clamp(30px,3.4vw,48px);
	font-weight:500;
	letter-spacing:.1em;
	line-height:1.65;
}

h3{
	font-weight:600;
	letter-spacing:.08em;
}

p{
	letter-spacing:.08em;
}
.pmg p{
	margin-bottom: 10px;
}
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:230px;
	margin-top:30px;
	padding:10px 34px;
	border:1px solid #9c8062;
	border-radius:999px;
	background:rgba(255,255,255,.55);
	color:var(--brown);
	font-size:14px;
	letter-spacing:.12em;
}

.btn::after{
	content:"→";
	margin-left:18px;
	transition:transform .3s ease;
}

.btn:hover{
	background:#fff;
	transform:translateY(-2px);
}

.btn:hover::after{
	transform:translateX(5px);
}

.btn.dark{
	border-color:transparent;
	background:var(--brown);
	color:#fff;
}

.btn-center{
	display:flex;
	width:max-content;
	margin:34px auto 0;
}

.fade-up{
	opacity:0;
	transform:translateY(34px);
	transition:opacity .8s ease, transform .8s ease;
}

.fade-up.is-visible{
	opacity:1;
	transform:translateY(0);
}

/* ==========================
FV
========================== */

.fv{
	position:relative;
	height:100vh;
	min-height:55vh;
	overflow:hidden;
	background:#fff;
}

/* ---------- slide ---------- */

.fv-slide{
	position:absolute;
	inset:0;

	opacity:0;
	pointer-events:none;

	transition:
		opacity 1.6s ease;
}

.fv-slide.active{
	opacity:1;
	pointer-events:auto;
	z-index:2;
}

/* 背景画像 */

.fv-slide::before{
	content:"";
	position:absolute;
	inset:0;

	background-image:var(--bg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;

	transform:scale(1);
	transition:transform 7s linear;
}

.fv-slide.active::before{
	transform:scale(1.08);
}

/* 左側グラデーション */

.fv-slide::after{
	content:"";
	position:absolute;
	inset:0;

	background:
	linear-gradient(
		90deg,
		rgba(255,250,240,.96) 0%,
		rgba(255,250,240,.88) 28%,
		rgba(255,250,240,.35) 58%,
		rgba(255,250,240,0) 100%
	);

	z-index:1;
}

/* ---------- copy ---------- */

.fv-copy{
	position:absolute;
	top:50%;
	left:8%;
	transform:translateY(-50%);
	z-index:5;
	color:var(--brown);
}

.center-copy{
	text-align:center;
}

.fv-sub{
	margin-bottom:12px;
	font-size:clamp(22px,3vw,48px);
	font-style:italic;
	letter-spacing:.04em;
}

.fv-title{
	font-size:clamp(32px,4vw,60px);
	font-weight:600;
	line-height:1.55;
	letter-spacing:.1em;
}

.fv-lead{
	margin-top:30px;
	font-size:clamp(16px,1.3vw,22px);
	line-height:2.2;
	font-weight:500;
}

/* ---------- badge ---------- */

.fv-badge{
	position:absolute;
	right:50%;
	bottom:10%;
	z-index:10;

	width:clamp(120px,10vw,180px);

	filter:drop-shadow(0 12px 20px rgba(0,0,0,.15));

	animation:badgeFloat 4s ease-in-out infinite;
}

@keyframes badgeFloat{

	0%,100%{
		transform:translateY(0);
	}

	50%{
		transform:translateY(-10px);
	}

}

/* ---------- dots ---------- */

.fv-dots{
	position:absolute;
	left:50%;
	bottom:30px;
	transform:translateX(-50%);

	display:flex;
	gap:10px;

	z-index:20;
}

.fv-dots span{
	width:8px;
	height:8px;

	border-radius:999px;

	background:rgba(107,77,51,.3);

	transition:.4s;
}

.fv-dots span.active{
	width:28px;
	background:#6b4d33;
}

/* ==========================
SP
========================== */

@media(max-width:767px){

	.fv{
		height:70vh;
		min-height:55vh;
	}

	.fv-slide::before{
		background-position:70% center;
	}

	.fv-slide::after{
		background:
		linear-gradient(
			180deg,
			rgba(255,250,240,.88) 0%,
			rgba(255,250,240,.65) 40%,
			rgba(255,250,240,.25) 100%
		);
	}

	.fv-copy{
		left:6%;
		right:6%;
		max-width:none;
	}

	.fv-title{
		font-size:30px;
		line-height:1.5;
	}

	.fv-lead{
		font-size:14px;
		line-height:1.9;
		margin-top:18px;
	}

	.fv-badge{
		width:90px;
		right:20px;
		bottom:80px;
	}
}

/*ぼうちーず*/
.signature{
	position:relative;
	height:520px;
	background:	url("../img/index/boucheese.png");
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;

	display:flex;
	align-items:center;
	z-index:1;
}

.signature .inner{
	width:min(1200px,92%);
	margin:auto;
	position:relative;
	z-index:2;	
}

.signature-text{
	max-width:500px;
	position:relative;
	z-index:10;
	max-width:520px;	
}

.signature-text h2{
	margin:12px 0 24px;
	font-size:clamp(42px,4vw,70px);
	color:#5d3f27;
}

.signature-text p{
	line-height:2;
	color:#6f5a48;
	font-weight: 600;
}


.pickup{
	padding-top:36px;
}

.product-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:24px;
}

.product-card{
	position:relative;
	display:block;
	aspect-ratio: 16 / 9;
	min-height:240px;
	overflow:hidden;
	border-radius:24px;
	background:#f6dcc7;
	box-shadow:var(--shadow);
}

.product-card img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position: left;
	transition:transform .55s ease;
}

.product-card div{
	position:relative;
	z-index:1;
	width:54%;
	min-width:275px;
	margin-left:auto;
	padding:clamp(20px,2.8vw,42px) clamp(12px,1.4vw,20px) clamp(20px,2.8vw,42px) clamp(18px,2.4vw,35px);
	background:linear-gradient(
		to right,
		rgba(246,220,199,0) 0%,
		rgba(246,220,199,.82) 22%,
		rgba(246,220,199,.96) 100%
	);
}

.product-card h3{
	margin-bottom:clamp(6px,.6vw,10px);
	font-size:clamp(17px,1.7vw,25px);
}

.product-card p{
	line-height:1.8;
	word-break: auto-phrase;
}

.product-card .link{
	margin-top:18px;
	margin-left: auto;
	padding-bottom:2px;
	text-align: end;
	display: table;
	border-bottom: 1px solid;
}

.product-card:hover img{
	transform:scale(1.06);
}

.wholecake{
	padding-top:42px;
	text-align:center;
}

.ornament{
	font-size:28px;
	color:#b18a61;
}

.wholecake h2{
	margin-bottom:34px;
	font-size:clamp(24px,2.3vw,34px);
}

.cake-list{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:14px;
	margin:0 auto;
}

.cake-list img{
	aspect-ratio:1.55/1;
	object-fit:cover;
	border-radius:18px;
	box-shadow:0 10px 28px rgba(89,57,28,.11);
	transition:transform .35s ease;
}

.cake-list img:hover{
	transform:translateY(-5px);
}

.about{
	background:rgba(239,222,198,.5);
}

.about-inner{
	display:grid;
	grid-template-columns:.85fr 1fr;
	align-items:center;
	gap:72px;
}

.about-text h2{
	margin-bottom:28px;
	font-size: clamp(25px, 3.2vw, 40px);
}

.about-text p:not(.section-en){
	max-width:520px;
}

.about-photos{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:14px;
}

.about-photos img{
	aspect-ratio:1.38/1;
	object-fit:cover;
}

.online{
	padding:76px 0;
	background:#fff8eb;
}

.online-banner{
	position:relative;
	min-height:410px;
	overflow:hidden;
	display:flex;
	align-items:center;
	padding:60px 8%;
	color:var(--brown);
	box-shadow:var(--shadow);
}

.online-banner img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
}

.online-banner::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,rgba(255,240,209,.92),rgba(255,240,209,.42),rgba(255,240,209,0));
}

.online-banner div{
	position:relative;
	z-index:1;
}

.online-banner h2{
	margin:12px 0;
}

.shopinfo{
	padding:100px 0 120px;
	background:#fffaf0;
}

.center-title{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:28px;
	margin-bottom:70px;
	font-size:clamp(28px,2vw,38px);
	font-weight:400;
	letter-spacing:.08em;
	text-align:center;
	color:var(--brown);
}

.center-title::before,
.center-title::after{
	content:"";
	width:140px;
	height:1px;
	background:#d8c8b4;
}

.shop-cards{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:48px;
}

.shop-card{
	display:grid;
	grid-template-columns:88px 1fr 260px;
	gap:34px;
	padding:clamp(1.375rem, -5.898rem + 11.36vw, 2.625rem);
	background:#fff;
	border:1px solid #e8dccd;
	border-radius:20px;

	box-shadow:
		0 8px 24px rgba(98,65,35,.04),
		0 20px 50px rgba(98,65,35,.06);

	transition:.35s ease;
}

.shop-card:hover{
	transform:translateY(-3px);
	box-shadow:
		0 12px 32px rgba(98,65,35,.08),
		0 24px 60px rgba(98,65,35,.12);
}

.shop-card > span{
	display:grid;
	place-items:center;

	width:84px;
	height:84px;

	border-radius:50%;

	background:linear-gradient(
		135deg,
		#d8b083 0%,
		#c79a67 100%
	);

	color:#fff;
	font-size:18px;
	letter-spacing:.08em;
}

.shop-card h3{
	margin-bottom:10px;
	font-size:30px;
	font-weight:500;
	line-height:1.2;
}

.shop-card p{
	margin-bottom:18px;
	font-size:14px;
	line-height:1.9;
	color:#6f5b47;
}

.shop-card dl{
	display:flex;
	gap:10px;
	margin-bottom:8px;

	font-size:13px;
	line-height:1.8;
}

.shop-card dt{
	width:84px;
	flex-shrink:0;
	color:#8d755d;
}

.shop-card dd{
	color:#4e3d2c;
}

.shop-card img{
	width:100%;
	height:210px;
	object-fit:cover;
	border-radius:14px;
}

/*===============
Footer
=====================================*/
.footer{
	padding:55px 0 20px;
	background:#fff;
	border-top:1px solid #ece1d5;
}

.footer-inner{
	max-width:1400px;
	display:grid;
	grid-template-columns:170px 1fr auto;
	align-items:center;
	gap:clamp(1.375rem, -5.069rem + 13.43vw, 5rem);
}

.footer-logo img{
	width:170px;
	display:block;
}

.footer-nav ul{
	display:flex;
	justify-content:center;
	flex-wrap: wrap;
	gap:15px clamp(1.25rem, -1.861rem + 6.48vw, 3rem);
}

.footer-nav li{
	text-align:center;
}

.footer-nav a{
	font-size:13px;
	font-weight:500;
	letter-spacing:.04em;
	color:var(--brown);
	transition:.3s;
}

.footer-nav a:hover{
	opacity:.7;
}

.footer-sns{
	display:flex;
	align-items:center;
}

.footer-sns a{
	display:flex;
	align-items:center;
	gap:14px;
	text-decoration:none;
	color:var(--brown);
}

.footer-sns .shop-link{
	padding-right:38px;
	border-right:1px solid #d8c8b4;
	word-break: keep-all;
    width: 100%;
}

.insta-link{
	padding-left:38px;
    width: 100%;
}

.footer .shop-link img{
	width:34px;
	height:auto;
}
.insta-link i{
	font-size: 30px;
}


.footer-sns strong{
	display:block;
	font-size:15px;
	font-weight:500;
	line-height:1.3;
}

.footer-sns small{
	display:block;
	margin-top:2px;
	font-size:10px;
	letter-spacing:.05em;
	color:#9b846a;
}

.copy{
	margin-top:24px;
	padding-top:16px;

	font-size:11px;
	text-align:center;
	letter-spacing:.08em;

	color:#9b846a;
}

/* 1560px: shop-card を早めに2段組みへ（3列だとコンテンツ列が極端に狭くなるため） */
@media (max-width:1560px){
	.shop-card{
		grid-template-columns:76px 1fr;
		padding:36px 32px;
		gap:22px;
	}

	.shop-card img{
		grid-column:1 / -1;
		height:210px;
	}

	.shop-card > span{
		width:72px;
		height:72px;
		font-size:16px;
	}
}

@media (max-width:1400px){

	/* 3列→2列に早めに切り替え（3列時の被りを防ぐ） */
	.product-grid{
		grid-template-columns:repeat(2,1fr);
		gap:22px;
	}

	.product-card{
		aspect-ratio:unset;
		min-height:200px;
	}

	.product-card div{
		width:60%;
		min-width:250px;
		padding:clamp(20px,2.4vw,36px) clamp(14px,1.4vw,20px) clamp(20px,2.4vw,36px) clamp(18px,2vw,30px);
	}
}

@media (max-width:1100px){

	.product-grid{
		gap:20px;
	}

	.product-card div{
		width:62%;
		min-width:250px;
		padding:24px 18px 24px 22px;
	}

	.product-card h3{
		font-size:20px;
		margin-bottom:8px;
	}

	.shop-cards{
		gap:28px;
	}

	.shop-card{
		grid-template-columns:70px 1fr;
		padding:30px 26px;
		gap:18px;
	}

	.shop-card img{
		grid-column:1 / -1;
		height:200px;
	}

	.shop-card > span{
		width:66px;
		height:66px;
		font-size:15px;
	}
}

@media (max-width:767px){
	body{
		font-size:15px;
	}

	section{
		padding:52px 0;
	}

	.fv-slide{
		background-image:linear-gradient(180deg,rgba(255,250,240,.96) 0%,rgba(255,250,240,.72) 42%,rgba(255,250,240,0) 74%),var(--bg);
		background-position:62% center;
	}

/*
	.fv-copy,
	.fv-copy.center-copy{
		top:140px;
		left:6%;
		right:6%;
		text-align:left;
	}
*/

	.fv-title{
		font-size:34px;
	}

	.fv-sub{
		font-size:24px;
	}

	.fv-lead{
		font-size:15px;
	}

	.fv-badge{
		left:auto;
		right:22px;
		top:70%;
		width:116px;
	}

	.signature-inner,
	.about-inner,
	.product-grid,
	.cake-list,
	.shop-cards,
	.footer-inner{
		grid-template-columns:1fr;
	}

	.signature figure{
		margin:0 -4vw;
	}

	.product-card{
		min-height:210px;
		border-radius:18px;
	}

	.product-card div{
		width:62%;
		min-width:250px;
		padding:24px 16px 24px 20px;
	}

	.product-card h3{
		font-size:18px;
		margin-bottom:6px;
	}

	/* word-break: auto-phrase を解除 */
	.product-card p{
		word-break:normal;
	}

	.cake-list{
		grid-template-columns:repeat(2,1fr);
	}

	.about-inner{
		gap:34px;
	}

	.about-photos{
		gap:8px;
	}

	.online-banner{
		min-height:400px;
		width:100%;
		align-items:flex-start;
		padding:44px 8%;
	}

	.online-banner::after{
		background:linear-gradient(180deg,rgba(255,240,209,.95),rgba(255,240,209,.62),rgba(255,240,209,0));
	}

	.center-title::before,
	.center-title::after{
		width:48px;
	}

	.footer{
		text-align:center;
	}

	.footer img{
		margin:0 auto;
	}

	.footer ul,
	.footer-links{
		flex-wrap:wrap;
		justify-content:center;
		gap:18px;
	}

	/* footer-inner gap */
	.footer-inner{
		gap:28px;
	}

	/* footer-sns: 縦並びに変更してオーバーフロー解消 */
	.footer-sns{
		flex-direction:column;
		align-items:center;
		gap:0;
		width:100%;
	}
	.footer-sns .shop-link{
		width:auto;
		padding-right:0;
		padding-bottom:18px;
		border-right:none;
		border-bottom:1px solid #d8c8b4;
	}
	.insta-link{
		padding-left:0;
		padding-top:18px;
        justify-content: center;
	}

	/* shop-card mobile */
	.shop-card{
		grid-template-columns:72px 1fr;
		padding:24px 20px;
		gap:16px;
	}
	.shop-card > span{
		width:66px;
		height:66px;
		font-size:15px;
	}
	.shop-card h3{
		font-size:22px;
	}
	.shop-card dl{
		font-size:13px;
	}
	.shop-card dt{
		width:80px;
	}
	.shop-card img{
		grid-column:1 / -1;
		height:180px;
	}
	/* shopinfo */
	.shopinfo{
		padding:70px 0 80px;
	}
	.shop-cards{
		gap:20px;
	}
	.center-title{
		margin-bottom:48px;
		font-size:clamp(22px,5vw,32px);
	}
	.center-title::before,
	.center-title::after{
		width:36px;
	}
	/* signature */
	.signature{
		height:auto;
		min-height:400px;
		padding:60px 0;
	}
	.signature-text{
		max-width:360px;
	}
	.signature-text h2{
		font-size:clamp(36px,8vw,56px);
	}
	/* footer padding for sticky cta */
	.footer{
		padding-bottom:72px;
	}
}

/* ==========  1024px  ========== */
@media(max-width:1024px){
	.footer-inner{
		gap:40px;
	}
	.about-inner{
		gap:40px;
	}
	.online-banner{
		padding:54px 7%;
	}
	/* shop-card: padding を抑えてdl内テキストの圧迫を解消 */
	.shop-card{
		padding:30px 28px;
		gap:24px;
	}
	.shop-card dt{
		width:76px;
	}
	.shop-card dl{
		font-size:12.5px;
	}
}

/* ==========  550px  ========== */
@media(max-width:550px){
	body{
		font-size:14px;
	}
	section{
		padding:44px 0;
	}
	h2{
		font-size:clamp(22px,6.5vw,34px);
	}
	/* FV */

	.fv-title{
		font-size:clamp(22px,7vw,32px);
		line-height:1.5;
	}
	.fv-lead{
		font-size:13px;
		margin-top:14px;
		line-height:1.9;
	}
	.fv-badge{
		width:84px;
		right:14px;
	}
	/* product card: vertical */
	.product-card{
		aspect-ratio:unset;
		display:block;
		border-radius:16px;
	}
	.product-card img{
		position:static;
		width:100%;
		height:190px;
		object-fit:cover;
		object-position:center;
	}
	.product-card div{
		position:static;
		width:100%;
		min-width:unset;
		margin-left:0;
		padding:18px 22px 22px;
		background:none;
	}
	.product-card h3{
		font-size:19px;
		margin-bottom:8px;
	}
	.product-card .link{
		text-align:left;
		margin-left:0;
	}
	/* cake */
	.cake-list{
		gap:8px;
	}
	.cake-list img{
		border-radius:12px;
	}
	/* signature */
	.signature{
		min-height:320px;
	}
	.signature-text{
		max-width:270px;
	}
	/* shop card */
	.shop-card{
		grid-template-columns:60px 1fr;
		padding:20px 16px;
		gap:14px;
	}
	.shop-card > span{
		width:58px;
		height:58px;
		font-size:13px;
	}
	.shop-card h3{
		font-size:20px;
		margin-bottom:6px;
	}
	.shop-card dl{
		font-size:12px;
	}
	.shop-card dt{
		width:76px;
	}
	.shop-card img{
		height:155px;
	}
	/* online banner */
	.online-banner{
		min-height:320px;
		padding:36px 6%;
	}
	.online-banner h2{
		font-size:clamp(18px,5.5vw,26px);
	}
	/* btn */
	.btn{
		min-width:188px;
		font-size:13px;
		padding:9px 26px;
	}
	/* footer */
	.footer-inner{
		gap:16px;
	}
}

/* ==========  380px  ========== */
@media(max-width:380px){
	body{
		font-size:13px;
	}
	section{
		padding:36px 0;
	}
	/* FV */
	.fv{
		height:500px;
	}
	.fv-copy{
		left:5%;
		right:5%;
	}
	.fv-title{
		font-size:21px;
	}
	.fv-lead{
		font-size:12px;
	}
	.fv-badge{
		width:72px;
		right:10px;
	}
	/* h2 */
	h2{
		font-size:clamp(20px,5.5vw,28px);
	}
	/* product card */
	.product-card img{
		height:160px;
	}
	.product-card div{
		padding:14px 16px 18px;
	}
	.product-card h3{
		font-size:17px;
	}
	/* cake */
	.cake-list img{
		border-radius:10px;
	}
	/* shop */
	.shop-card{
		grid-template-columns:52px 1fr;
		padding:16px 14px;
		gap:10px;
	}
	.shop-card > span{
		width:48px;
		height:48px;
		font-size:11px;
	}
	.shop-card h3{
		font-size:18px;
	}
	.shop-card img{
		height:130px;
	}
	/* online */
	.online-banner{
		min-height:280px;
		padding:28px 5%;
	}
	.online-banner h2{
		font-size:clamp(17px,4.8vw,22px);
	}
	/* btn */
	.btn{
		min-width:158px;
		font-size:12px;
		padding:8px 20px;
	}
	/* center-title */
	.center-title{
		font-size:19px;
		gap:14px;
		margin-bottom:34px;
	}
	.center-title::before,
	.center-title::after{
		width:20px;
	}
	/* footer */
	.footer-nav ul{
		gap:10px 18px;
		font-size:12px;
	}
	.footer-logo img{
		width:130px;
	}
}