:root {
	/* PC/SP基準フォント。SPはvw、PCはpxを採用 */
	--font-pc: 18px;
	--font-sp: 4vw;
	--container-max: 1000px;
	--bg: #ffffff;
	--fg: #111111;
	--muted: #666666;
}
/*共通部分*/
html {
	overflow-y: scroll;
}
body {
	font-family: Hiragino Kaku Gothic Pro, Osaka, "メイリオ", "ＭＳ Ｐゴシック", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-feature-settings: "palt";
	line-height: 2.0;
	color: #333333;
	background: #FFF;
}
body, div, span, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, select, p, table, tbody, th, td, pre {
	margin: 0;
	padding: 0;
}
table, tbody, th, td {
	border-spacing: 0;
	border-collapse: collapse;
}
h1, h2, h3, h4 {
	font-size: 100%;
}
img, abbr, acronym, fieldset {
	border: 0;
}
img {
	display: block;
}
em, var {
	font-style: normal;
}
li {
	list-style-type: none;
}
a {
	color: #111;
	text-decoration: underline;
	transition: 0.3s;
}
* {
	box-sizing: border-box;
}
html, body {
	margin: 0;
	padding: 0;
}
body {
	font-family: 'Noto Sans JP', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
	color: var(--fg);
	background: var(--bg);
	line-height: 2.0;
}
/* PC基準: px */
html {
	font-size: var(--font-pc);
}
/* SP基準: vw */
@media screen and (max-width: 767px) {
	html {
		font-size: var(--font-sp);
	}
}
.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 1rem;
}
/* FV */
.fv {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100svh;
	z-index: 10;
	overflow: hidden;
}
/* iOS等のアドレスバー対策（対応ブラウザでは100dvhを優先） */
@supports (height: 100dvh) {
  .fv { height: 100dvh; }
}

/* スライドラッパー */
.fv__slides {
  position: absolute;
  inset: 0;
}

/* スライド（背景レイヤー） */
.fv__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s;
  will-change: opacity;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 表示中 */
.fv__slide.is-active { opacity: 1; }

/* ロゴのオーバーレイ */
.fv__overlay {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  height: 100%;
  pointer-events: none;
}

.fv__logo {
  width: min(48vw, 440px);
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.18));
}

/* 固定FVの下に本文を押し出す（被り防止） */
.content {
  margin-top: 100svh;
}
@supports (height: 100dvh) {
  .content { margin-top: 100dvh; }
}

/* 低減モーション対応 */
@media (prefers-reduced-motion: reduce) {
  .fv__slide { transition: none; }
}

.fv__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.fv__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.fv__logo {
	width: 50vw;
	height: auto;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .25));
}

.fv__slides {
  position: absolute;
  inset: 0;
}

.fv__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* 画像のトリミング基準 */
  opacity: 0;
  transition: opacity 1.2s;  /* フェード速度（JS側と合わせると綺麗） */
  will-change: opacity;
}

/* 表示中スライド */
.fv__slide.is-active {
  opacity: 1;
}

/* 既存ロゴがあればそのまま、なければ最低限 */
.fv__overlay {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  height: 100%;
  pointer-events: none;
}

.fv__logo {
  width: min(48vw, 440px);
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.18));
}
/* --- Loader --- */
.fv__loader {
  position: absolute;
  inset: 0;
  z-index: 3;                 /* ロゴより前に */
  display: grid;
  place-items: center;
  background: #beb9ae;           /* 読込中は黒背景（お好みで） */
  transition: opacity .5s ease, visibility .5s ease;
}
.fv__spinner {
  width: 56px;
  height: 56px;
  border: 3px solid rgba(255,255,255,.28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fvspin 1s linear infinite;
}
@keyframes fvspin { to { transform: rotate(360deg); } }
.fv__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 初期はスライド＆ロゴを隠す（ローダーのみ表示） */
.fv__slides, .fv__overlay { opacity: 0; transition: opacity .6s ease; }

/* 準備ができたらローダー消して中身をフェードイン */
.fv--ready .fv__loader { opacity: 0; visibility: hidden; }
.fv--ready .fv__slides,
.fv--ready .fv__overlay { opacity: 1; }

/* 既存：固定FVの下に本文を押し出す（重なり回避） */
.content { margin-top: 100svh; }
@supports (height: 100dvh) { .content { margin-top: 100dvh; } }

/* 低減モーション対応 */
@media (prefers-reduced-motion: reduce) {
  .fv__spinner { animation: none; }
  .fv__slides, .fv__overlay, .fv__loader { transition: none; }
}

/* Content */
.content {
	position: relative;
	z-index: 20;
	background: #fff;
	box-shadow: 0 -8px 24px rgba(0, 0, 0, .12);
	margin-top: 100vh;
}
h2.section__title {
	font-size: 2.5rem;
	font-family: "Sen", sans-serif;
	font-weight: 600;
}
.section--bg {
	width: 100%;
	background: linear-gradient(180deg, #fafafa, #f2f2f2);
}
.section--bg__inner {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 20rem;
	margin-bottom: 4rem;
	text-align: center;
	color: #FFF;
}
/* ABOUT */
#about {
	padding: 3rem 0;
	text-align: center;
}
#about h2 {
	margin: 0 auto 3rem;
	width: 18rem;
}
#about h2 img {
	width: 100%;
	height: auto;
}
#about p {
	margin-bottom: 1.25rem;
	font-family: "Noto Serif JP", serif;
	font-size: 1.25rem;
}
/* MENU */
#menu {
	padding: 0 0 3rem;
}
#menu .section--bg__inner {
	background: url("images/bg_menu.webp") center center no-repeat;
	background-size: cover;
}
.menu-explain {
	margin-bottom: 3rem;
	font-size: 1rem;
}
.menu-explain small {
	font-size: 0.8rem;
}
#menu h3 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5rem;
	font-weight: 600;
	margin: 4rem 0 1rem;
}
#menu h3 img {
	margin-right: 0.5rem;
}
.menu-list {
	display: block;
	list-style: none;
	padding: 0;
	margin: 0;
}
.menu-card {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 2rem;
	line-height: 1.4;
}
.menu-card img {
	width: 6.5rem;
	height: auto;
}
.menu-card h4 {
	margin-bottom: 0.25rem;
	font-size: 1.1rem;
}
.menu-explain.donuts-category {
	font-size: 1.05rem;
	font-family: "Noto Serif JP", serif;
}
.menu-card .menu-card__info {
	width: calc(100% - 6.5rem - 1.5rem);
}
.menu-card .menu-card__info__explain {
	font-size: 1rem;
	margin-bottom: 0.5rem;
}
.menu-card .menu-card__info__price var {
	font-size: 1.5rem;
	font-family: "Sen", sans-serif;
	font-weight: 600;
}
.menu-card .menu-card__info__price small {
	margin-left: 0.25rem;
	font-size: 0.8rem;
}
.menu-card .menu-card__info__allergy {
	font-size: 0.8rem;
	font-weight: 100;
	color: #666;
}
/* SHOP */
#shop {
	padding: 0 0 4rem;
}
#shop .section--bg__inner {
	background: url("images/bg_shop.webp") center center no-repeat;
	background-size: cover;
}
#shop .shop-logo {
	width: 15.5rem;
	margin-bottom: 2rem;
}
#shop .shop-logo img {
	width: 100%;
	height: auto;
}
#shop p.shop-info {
	margin-bottom: 1.5rem;
	font-size: 1rem;
}
#shop p.shop-info small {
	font-size: 0.8rem;
}
#shop p.shop-openhourdetail {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: #FBF6EC;
	font-size: 0.8rem;
}
/* KITCHEN CAR */
#kitchencar .section--bg__inner {
	margin-bottom: 0;
	background: url("images/bg_kitchencar.webp") center center no-repeat;
	background-size: cover;
}
/* ACCESS */
#access {
	padding: 0 0 4rem;
}
.section--map {
	width: 100%;
}
.map-embed iframe {
	width: 100%;
	height: 520px;
	display: block;
	border: 0;
}
/* SNS*/
.sns {
	padding: 2rem 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.sns li {
	margin-right: 1rem;
	width: 3rem;
}
.sns li:last-child {
	margin-right: 0;
}
.sns li img {
	width: 100%;
	height: auto;
}

/* FOOTER*/
footer {
	padding: 3rem 0;
	text-align: center;
	font-size: 0.9rem;
}
/* PC */
@media(min-width:768px) {
	a:hover {
		opacity: 0.7;
	}
	br.sp {
		display: none;
	}
	.fv__logo {
		width: 350px;
	}
	.section--bg__inner {
		height: 650px;
	}
	.menu-explain {
		text-align: center;
	}
	.menu-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
		max-width: var(--container-max);
		margin: 0 auto;
	}
	.menu-card {
		margin: 0;
	}
}