@charset "utf-8";

/** Override **/

.pj-page { min-width:320px; }
.pj-contents { margin-top:0; }

:where(.sc-contents) {
	box-sizing:border-box;
	::before,
	::after,
	* { box-sizing:inherit; }
	
	&:where(.ios *) { font-feature-settings:"palt"; }
	
	:where(picture:not(:only-child) > img) { vertical-align:top; }
	:where(picture:only-child) {
		display:block;
		:where(& > img) {
			margin-inline:auto;
			display:block;
		}
	}
	
	em { font-weight:inherit; }
	a {
		text-decoration:none;
		color:currentColor;
		&:hover { color:currentColor; }
	}
	
	.bs-list--custom > li > :first-child {
		padding-top:0;
		padding-right:0.2em;
		width:0;
	}
	.bs-list--custom:where(ol) > li > :first-child { text-align:right; }
}

@media ( max-width:800px ) {}
@media ( max-width:667px ) {}

/** FontSizeClamp **/

:where(.sc-contents--fs-clamp) {
	--fs-clamp-min:16;
	--fs-clamp-max:18;
	--fs-clamp-base:10;
	--fs-clamp-view-min:801;
	--fs-clamp-view-max:1240;
}
:where(.sc-contents--fs-clamp, .sc-contents--fs-clamp *) {
	--fs-clamp-slope:calc( ( var( --fs-clamp-max ) - var( --fs-clamp-min ) ) / ( var( --fs-clamp-view-max ) - var( --fs-clamp-view-min ) ) );
	--fs-clamp-value:clamp(
		var( --fs-clamp-min ) / var( --fs-clamp-base ) * 1rem,
		( var( --fs-clamp-max ) - var( --fs-clamp-view-max ) * var( --fs-clamp-slope ) ) / var( --fs-clamp-base ) * 1rem + var( --fs-clamp-slope ) * 100dvi,
		var( --fs-clamp-max ) / var( --fs-clamp-base ) * 1rem
	);
}

@media ( max-width:800px ) {
	:where(.sc-contents--fs-clamp) {
		--fs-clamp-min:15;
		--fs-clamp-max:17;
		--fs-clamp-view-min:668;
		--fs-clamp-view-max:800;
	}
}
@media ( max-width:667px ) {
	:where(.sc-contents--fs-clamp) {
		--fs-clamp-min:14;
		--fs-clamp-max:16;
		--fs-clamp-view-min:320;
		--fs-clamp-view-max:667;
	}
}

/** sc-contents **/

.sc-contents {
	margin:auto;
	padding:0;
	position:relative;
	font-family:"Noto Sans JP", sans-serif;
	color:#222;
}
.sc-contents__header { position:relative; }
.sc-contents__body   { position:relative; }
.sc-contents__footer {
	padding-block:40px;
	background-color:#FFF;
	position:relative;
}

.sc-contents__inner {
	margin-inline:auto;
	padding-inline:20px;
	display:block;
	max-width:1240px;
}

@media ( max-width:800px ) {
	.sc-contents__inner { padding-inline:10px; }
}
@media ( max-width:667px ) {}

/** sc-visual **/

.sc-visual {
	position:relative;
	display:block;
	overflow:hidden;
}
.sc-visual__title {
	margin:0 auto;
	position:relative;
	display:block;
	
	img {
		display:block;
		width:100%;
	}
}

@media ( max-width:800px ) {}
@media ( max-width:667px ) {}

/** sc-shopsNav **/

.sc-shopsNav {
	padding:calc( 30 / 1920 * 100% ) 20px calc( 60 / 1920 * 100% );
	background:url( "../img/index/bg_shops_nav.jpg" ) center top / 100% auto repeat-y;
	display:block;
}
.sc-shopsNav__list {
	margin:0 auto;
	padding-left:0;
	display:grid;
	grid-template-columns:repeat( 4, 1fr );
	gap:1.25em calc( 20 / 1200 * 100% );
	max-width:1200px;
	list-style:none;
	
	a {
		display:block;
		transition:filter 0.25s ease-out;
		
		@media ( any-hover:hover ) {
			&:hover { filter:brightness( 1.1 ); }
		}
	}
}

@media ( max-width:800px ) {
	.sc-shopsNav {
		padding-block:calc( 30 / 750 * 100% ) calc( 60 / 750 * 100% );
		background-image:url( "../img/index/bg_shops_nav@sp.jpg" );
	}
	.sc-shopsNav__list {
		grid-template-columns:repeat( 2, 1fr );
		column-gap:calc( 30 / 700 * 100% );
		max-width:700px;
	}
}
@media ( max-width:667px ) {}

/** sc-present **/

.sc-present {
	padding:3em 20px 0;
	background-color:#D1A626;
	display:block;
}
.sc-present__image {
	margin-inline:auto;
	display:block;
	max-width:1000px;
}

@media ( max-width:800px ) {
	.sc-present__image { max-width:720px; }
}
@media ( max-width:667px ) {}

/** sc-shops **/

.sc-shops {
	padding:3em 20px;
	background-color:#D1A626;
	display:block;
}
.sc-shops__inner {
	background-color:#06142F;
	display:block;
}
.sc-shops__head {
	padding-block:2.5em;
	display:block;
}
.sc-shops__body {
	margin-inline:auto;
	padding-inline:20px;
	display:block;
	max-width:1240px;
	color:#FFF;
}
.sc-shops__title {
	--fs-clamp-min:30;
	--fs-clamp-max:38;
	
	margin:0 auto;
	display:grid;
	align-items:center;
	grid-template-columns:1fr auto 1fr;
	column-gap:0.5em;
	width:fit-content;
	font-weight:bold;
	font-size:var( --fs-clamp-value );
	color:#FACB3E;
	
	&::before,
	&::after {
		background:url( "../img/index/icon_laurel.png" ) center center / contain no-repeat;
		display:block;
		width:1.25em;
		aspect-ratio:54 / 115;
		content:"";
	}
	&::after { scale:-1 1; }
}

@media ( max-width:800px ) {
	.sc-shops { padding-inline:calc( 10px * 3 / 4 ); }
	.sc-shops__head { padding-block:2em; }
	.sc-shops__body { padding-inline:10px; }
	.sc-shops__title {
		--fs-clamp-min:27;
		--fs-clamp-max:30;
	}
}
@media ( max-width:667px ) {
	.sc-shops__title {
		--fs-clamp-min:22;
		--fs-clamp-max:27;
	}
}

/** sc-shop **/

.sc-shop {
	border-top:2px solid;
	padding-block:2.5em 5em;
	position:relative;
	display:block;
}
.sc-shop__head {
	padding-bottom:2.5em;
	position:relative;
	display:block;
}
.sc-shop__body {}

.sc-shop__title {
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	gap:0.25em 1em;
}
.sc-shop__name {
	--fs-clamp-min:32;
	--fs-clamp-max:46;
	
	margin-block:0;
	font-weight:900;
	font-size:var( --fs-clamp-value );
}
.sc-shop__kana {
	--fs-clamp-min:18;
	--fs-clamp-max:22;
	
	font-size:var( --fs-clamp-value );
}
.sc-shop__location {
	--fs-clamp-min:14;
	--fs-clamp-max:18;
	
	padding:0.25em 0.5em;
	background-color:#CA0030;
	display:flex;
	justify-content:center;
	align-items:baseline;
	column-gap:0.5em;
	line-height:1.25;
	font-size:var( --fs-clamp-value );
	
	& > small { font-size:80%; }
}

.sc-shop__dish {
	display:grid;
	align-content:start;
	row-gap:0.25em;
	
	& > img {
		display:block;
		width:100%;
	}
	& > img + small{
		display:block;
		text-align: right;
        padding: 0 1em;
        margin-top: -3em;
	}
	& > figcaption {
		--fs-clamp-min:14;
		--fs-clamp-max:18;
		
		font-size:var( --fs-clamp-value );
		
		& > ul {
			margin-block:0;
			padding-left:0;
			list-style:none;
		}
		& > ul > li > em { font-weight:bold; }
		& > ul > li > em + span { margin-left:0.5em; }
	}
}
.sc-shop__desc {
	--fs-clamp-min:16;
	--fs-clamp-max:22;
	
	text-align:justify;
	font-size:var( --fs-clamp-value );
	
	p {
		margin-block:0;
		
		&:where(p + *) { margin-top:1em; }
	}
}
.sc-shop__owner {
	display:grid;
	align-content:start;
	row-gap:0.25em;
	
	& > img { display:block; }
	& > figcaption {
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		align-items:baseline;
		column-gap:0.5em;
		font-size:75%;
	}
}

.sc-shop__image {
	margin-inline:auto;
	width:fit-content;
}

.sc-shop__info { color:#513207; }
.sc-shop__infoHead {
	background-color:#F2C94C;
	
	&:is(.sc-accordion\@Sp *) .sc-accordion__icon {
		&::before,
		&::after {
			border:solid currentColor;
			width:70%;
			aspect-ratio:1;
			rotate:45deg;
		}
		&::before {
			border-width:2px 0 0 2px;
			translate:0 25%;
		}
		&::after {
			border-width:0 2px 2px 0;
			translate:0 -25%;
		}
		&:where(.sc-accordion:not([open]) *)::before { opacity:0; }
	}
}
.sc-shop__infoTitle {
	--fs-clamp-min:18;
	--fs-clamp-max:20;
	
	margin-block:0;
	font-weight:bold;
	font-size:var( --fs-clamp-value );
}
.sc-shop__infoBody {
	padding:1em;
	background-color:#FFF8EA;
	display:block;
}
.sc-shop__infoContent {
	display:grid;
	align-content:start;
	row-gap:1.5em;
}
.sc-shop__infoList {
	--fs-clamp-min:15;
	--fs-clamp-max:18;
	
	margin-block:0;
	padding-left:0;
	position:relative;
	display:grid;
	row-gap:0.5em;
	list-style:none;
	line-height:1.6;
	font-size:var( --fs-clamp-value );
	
	& > * {
		display:grid;
		grid-template-columns:4.5em auto;
		column-gap:0.5em;
	}
	& > :first-child > span:last-child {
		display:flex;
		align-items:baseline;
		column-gap:1.0em;
	}
}
.sc-shop__infoWebLink {
	word-break:break-all;
	
	@media ( any-hover:hover ) {
		&:hover { text-decoration:underline; }
	}
}
.sc-shop__infoMapLink {
	padding:0 0.8em;
	border-radius:2.0em;
	background-color:#513207;
	display:block;
	flex:none;
	color:#FFF;
	
	&[target="_blank"] {
		display:grid;
		grid-template-columns:auto 1fr;
		align-items:center;
		column-gap:0.2em;
		
		&::after {
			background:url( "../img/index/icon_blank.png" ) center center / contain no-repeat;
			display:block;
			width:0.8em;
			height:0.8em;
			content:"";
		}
	}
	
	&:hover { color:#FFF; }
	@media ( any-hover:hover ) {
		&:hover { filter:brightness( 1.15 ); }
	}
}

@media ( min-width:801px ) {
	.sc-shop__body {
		display:grid;
		grid-template:
			"text text dish" auto
			"text text image" 1fr
			"owner info info" auto /
			calc( 200 / 1200 * 100% ) calc( 280 / 1200 * 100% ) calc( 640 / 1200 * 100% );
		;
		gap:2em calc( 40 / 1200 * 100% );
	}
	.sc-shop__dish { grid-area:dish; }
	.sc-shop__desc { display:contents; }
	.sc-shop__text { grid-area:text; }
	.sc-shop__owner { grid-area:owner; }
	.sc-shop__image { grid-area:image; }
	.sc-shop__info { grid-area:info; }
	.sc-shop__infoHead:is(.sc-accordion\@Sp *) {
		padding:0.5em 2em;
		display:block;
	}
	.sc-shop__infoBody { padding-inline:2em; }
}
@media ( max-width:800px ) {
	.sc-shop { padding-block:1.5em 4em; }
	.sc-shop__head { padding-bottom:2em; }
	.sc-shop__body {
		display:grid;
		align-content:start;
		row-gap:2em;
	}
	.sc-shop__name {
		--fs-clamp-min:27;
		--fs-clamp-max:34;
	}
	.sc-shop__kana {
		--fs-clamp-min:18;
		--fs-clamp-max:21;
	}
	.sc-shop__location {
		--fs-clamp-min:16;
		--fs-clamp-max:17;
	}
	.sc-shop__dish {
		margin-inline:-10px;
		
		& > figcaption {
			--fs-clamp-min:16;
			--fs-clamp-max:18;
			
			padding-inline:10px;
		}
	}
	[data-bottom-float] {
		--bottom-float-spacer-size:0;
		
		overflow:hidden;
		
		&::before {
			display:block;
			width:0;
			height:var( --bottom-float-spacer-size );
			float:right;
			content:"";
		}
	}
	.sc-shop__owner,
	[data-bottom-float-target] {
		clear:right;
		float:right;
	}
	.sc-shop__desc {
		--fs-clamp-min:18;
		--fs-clamp-max:20;
	}
	.sc-shop__owner {
		padding-top:0.5em;
		padding-left:calc( 40 / 680 * 100% );
		width:calc( 280 / 680 * 100% );
		max-width:220px;
	}
	.sc-shop__infoTitle {
		--fs-clamp-min:18;
		--fs-clamp-max:20;
	}
	.sc-shop__infoList {
		--fs-clamp-min:16;
		--fs-clamp-max:18;
	}
}
@media ( max-width:667px ) {
	.sc-shop__name {
		--fs-clamp-min:22;
		--fs-clamp-max:27;
	}
	.sc-shop__kana {
		--fs-clamp-min:14;
		--fs-clamp-max:18;
	}
	.sc-shop__location {
		--fs-clamp-min:12;
		--fs-clamp-max:16;
	}
	.sc-shop__dish {
		& > figcaption {
			--fs-clamp-min:14;
			--fs-clamp-max:16;
		}
	}
	.sc-shop__desc {
		--fs-clamp-min:14;
		--fs-clamp-max:18;
	}
	.sc-shop__infoTitle {
		--fs-clamp-min:16;
		--fs-clamp-max:18;
	}
	.sc-shop__infoList {
		--fs-clamp-min:13;
		--fs-clamp-max:16;
	}
}

/** sc-accordion **/

.sc-accordion {
	&::details-content {
		display:grid;
		content-visibility:unset;
		
		@media ( prefers-reduced-motion:no-preference ) {
			transition-property:grid-template-rows, opacity;
			transition-duration:0.3s;
			transition-timing-function:ease;
		}
	}
	&:where(:not([open]))::details-content {
		grid-template-rows:0fr;
		opacity:0;
	}
	&:where([open])::details-content {
		grid-template-rows:1fr;
		opacity:1;
	}
}
.sc-accordion__head {
	padding:0.5em;
	display:grid;
	grid-template:"before content after" / 1fr auto 1fr;
	align-items:center;
	gap:0.5em;
	cursor:pointer;
	
	&:where(summary) {
		list-style:none;
		&::-webkit-details-marker,
		&::marker { display:none; }
	}
	
	&::before,
	&::after { content:""; }
	&::before { grid-area:before; }
	&::after { grid-area:after; }
	
	& > * { margin-block:auto; }
}
.sc-accordion__body {
	display:block;
	overflow:hidden;
}
.sc-accordion__icon {
	position:relative;
	display:grid;
	place-items:center;
	width:0.8em;
	aspect-ratio:1;
	
	&:where(:first-child) {
		grid-area:before;
		justify-self:start;
	}
	&:where(:last-child) {
		grid-area:after;
		justify-self:end;
	}
	
	&::before,
	&::after {
		position:absolute;
		border-top:2px solid;
		display:block;
		width:100%;
		content:"";
	}
	&::after { rotate:90deg; }
	&:where(.sc-accordion[open] *)::after { opacity:0; }
}

@media ( min-width:801px ) {
	.sc-accordion\@Sp {
		&::details-content {
			display:block;
			opacity:1;
			transition:unset;
		}
		:where(.sc-accordion__head) {
			pointer-events:none;
			cursor:auto;
		}
		:where(.sc-accordion__body) { overflow:unset; }
		:where(.sc-accordion__icon) { display:none; }
	}
}
@media ( max-width:800px ) {}
@media ( max-width:667px ) {}