@charset "utf-8";

.p-visual {
	display: grid;
	position: relative;
	width: 100%;
}
.p-visual > * {
	grid-area: 1 / 1;
}
.visual_video {
	width: 100%;
	height: 100%;
	margin: 0;
}
.visual_video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media print, (min-width: 768px) {
	.p-visual {
		aspect-ratio: 1280 / 573;
		height: auto;
	}
}
@media screen and (max-width: 767px) {
	.p-visual {
		height: 93.4375vw;
	}
}

/* :::::: 土佐料理 司 / 土佐料理 祢保希 :::::: */
.visual_logo {
	z-index: 1;
	margin: 18px 0 0 24px;
	transition: opacity .6s .2s;
}
.visual_logo span {
	display: inline-block;
	margin-right: 24px;
}
.visual_logo img {
	display: inline-block;
	width: auto;
	height: 42px;
	vertical-align: top;
}
.visual_logo:lang(en) img {
	margin-top: -6px;
	height: 53px;
}
@media screen and (max-width: 767px) {
	.visual_logo {
		margin: 13px 0 0 16px;
	}
	.visual_logo span {
		margin-right: 16px;
	}
	.visual_logo img {
		height: 32px;
	}
	.visual_logo:lang(en) img {
		margin-top: -4px;
		height: 36px;
	}
}
@media screen and (max-width: 374px) {
	.visual_logo span {
		margin-right: 8px;
	}
	.visual_logo img {
		height: 28px;
	}
	.visual_logo:lang(en) img {
		margin-top: -3px;
		height: 32px;
	}
}

/* :::::: SCROLL DOWN :::::: */
.visual_scroll {
	place-self: flex-end center;
	z-index: 2;
	position: relative;
	padding-block: 4em;
	color: white;
	font-size: min(100cqi * 11 / 1280, 1.1rem);
	line-height: 1;
	letter-spacing: .2em;
	text-decoration: inherit;
	text-transform: uppercase;
}
.visual_scroll::before {
	content: "";
	position: absolute;
	top: 6em;
	left: 50%;
	border-left: 1px solid #fff;
	height: 64px;
}
@media screen and (min-width: 768px) {
	.visual_scroll::before {
		height: 80px;
	}
}
@media screen and (max-width: 767px) {
	.visual_scroll {
		font-size: calc(100cqi * 10 / 375);
		line-height: 1.4;
	}
}

/*
 * トップメインコンテンツ
 * -------------------------------------------------- */
:where(#wrapper[data-page="home"]) {
	--cw: 100cqi;
	--breakout: calc(50% - 50cqi);
	--sidegap: min(var(--cw) * 160 / 1280, 160px);
	--section-space: min(var(--cw) * 160 / 1280, 160px);
}
:where(#wrapper[data-page="home"]) :where(h2,h3,p,ul,.btn) {
	--font-dt: 16;
	--font-md: 13;
	--font-size: min(100vw * var(--font-dt) / 1280, var(--font-dt) * .1rem);
	font-size: var(--font-size);
}
:where(.l-main).page-home {
	position: relative;
	padding: 64px var(--sidegap) 120px;
}
:where(.l-main).page-home figure {
	margin-bottom: 0;
}
@media screen and (max-width: 767px) {
	:where(#wrapper[data-page="home"]) {
		--sidegap: calc(var(--cw) * 32 / 375);
		--section-space: min(var(--cw) * 64 / 375, 64px);
	}
	:where(#wrapper[data-page="home"]) :where(h2,h3,p,ul,.btn) {
		--font-size: calc(100vw * var(--font-md) / 375);
	}
	:where(.l-main).page-home {
		padding-bottom: 0;
	}
}

.home_section {
	z-index: 0;
	position: relative;
	width: min(100%, 960px);
	margin-inline: auto;
	padding-block: var(--section-space);
}
.home_section .underlay {
	z-index: -1;
	position: absolute;
	inset: 0 var(--breakout);
}
.home_section:where(.p-scene) .underlay {
	bottom: calc(var(--section-space) / 2);
}
.home_section .underlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #0001;
	transform: skewY(-8deg);
}
.home_label {
	width: fit-content;
	color: #9e9393;
	fill: currentcolor;
	--font-dt: 128;
	--font-md: 56;
	line-height: 0;
}
.home_label svg {
	width: auto;
	height: 1em;
}
.home_hgroup {
	display: grid;
	gap: calc(var(--section-space) / 4);
}
.home_subject,
.home_paragraph {
	text-align: left;
}
.home_subject {
	--font-dt: 48;
	--font-md: 22;
	line-height: 0;
}
.home_subject > :where(span, b) {
	display: grid;
	gap: .4em;
}
.home_subject > b {
	gap: .25em;
}
.home_subject b {
	font-size: 150%;
}
.home_subject .v-pc b {
	text-indent: 1em;
}
.home_paragraph {
	--font-dt: 16;
	--font-md: 13;
}
@media print, (min-width: 768px) {
	.home_hgroup {
		justify-items: center;
	}
	.home_subject {
		writing-mode: vertical-rl;
	}
	.home_paragraph {
		writing-mode: vertical-rl;
	}
	.home_subject {
		height: fit-content;
	}
	.home_subject svg {
		width: 1em;
		height: auto;
	}
}
@media screen and (max-width: 767px) {
	.home_hgroup {
		width: calc(var(--cw) * 260 / 375);
	}
	.home_subject svg {
		width: auto;
		height: 1em;
	}
	.home_label {
		pointer-events: none;
		z-index: 1;
		position: absolute;
		opacity: .5;
	}
}

/* :::::: 目次 :::::: */
.home_toc {
	--font-dt: 24;
	--font-md: 12;
	line-height: 1;
	text-align: left;
}
.home_toc li {
	border-image: linear-gradient(currentcolor, currentcolor) 0 0 1 / 0 0 1px;
}
.home_toc :where(a, button) {
	display: flex;
	column-gap: .75em;
	width: 100%;
	padding: 1em 1.5em;
	color: black;
}
.home_toc :where(a, button) svg {
	width: auto;
	height: 1em;
	fill: currentcolor;
}
.home_toc :where(a, button) svg:first-of-type {
	color: var(--themecolor);
}
.home_toc :where(a, button) svg:last-of-type {
	margin-left: auto;
	fill: none;
	stroke: currentcolor;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.home_toc .btn-clip .hov {
	display: inherit;
	column-gap: inherit;
	width: 100%;
	background: var(--themecolor);
}
.home_toc .btn-clip .hov svg {
	color: white;
}
.home_toc :where(a, button) svg {
	transition: transform .4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.home_toc :where(a, button):hover svg {
	transform: translateX(.75em);
}
@media screen and (max-width: 767px) {
	.home_toc :where(a, button) {
		padding: 1.25em;
	}
}

/* :::::: レストラン一覧 :::::: */
.p-restaurant {
	display: grid;
	width: min(100%, 1080px + var(--sidegap) * 2);
	padding: calc(var(--section-space) / 2) var(--sidegap) 0;
	font-weight: 700;
}
.restaurants_subject {
	--font-dt: 20;
	--font-md: 16;
	text-align: center;
}
.restaurants_subject svg {
	width: auto;
	height: 1em;
}
.p-restaurant .restaurant_lineup {
	grid-area: 3 / 1;
	justify-content: center;
}

/* :::::: pathline :::::: */
@media print, (min-width: 768px) {
	.page-home .l-pathline {
		--w: min(var(--cw) * 1500 / 1280, 1500px);
		--h: min(var(--cw) * 4600 / 1280, 4600px);
		inset: 64px 0 auto calc(50% - var(--w) / 2);
		width: var(--w);
		height: var(--h);
		mask: linear-gradient(to top, #0000, #000 80px) center / cover no-repeat;
	}
	.page-home .l-pathline svg {
		width: 100%;
		height: 100%;
		fill: none;
		stroke: #d8af4f;
	}
}
@media screen and (max-width: 767px) {
	.page-home .l-pathline {
		display: none;
	}
}

/* :::::: メインのキャッチコピー :::::: */
.p-maincopy {
	display: grid;
	padding-top: 0;
}
.p-maincopy .home_subject {
	--font-dt: 64;
	--font-md: 16;
}
.maincopy_image {
	margin-inline: calc(var(--sidegap) * -1);
}
.maincopy_image.splide .splide__slide {
	transition-duration: .8s !important;
}
.maincopy_image:has(video) {
	display: grid;
	place-content: center;
	overflow: hidden;
	aspect-ratio: 1280 / 503;
	width: min(100% + var(--sidegap) * 2, 1280px);
	height: auto;
}
.maincopy_image video {
	width: 100%;
	height: auto;
}
.maincopy_paragraph .home_paragraph {
	--font-dt: 20;
}
@media print, (min-width: 768px) {
	.p-maincopy {
		grid-template-columns: auto auto;
		column-gap: min(var(--cw) * 80 / 1280, 80px);
	}
	.maincopy_image {
		grid-column: span 2;
	}
	.p-maincopy .home_subject {
		order: 1;
		justify-self: flex-start;
		margin-top: -1em;
	}
	.maincopy_paragraph {
		justify-self: flex-end;
		align-self: flex-end;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		width: fit-content;
		margin-top: 2em;
	}
	:is(.scene_image, .cuisine_image, .room_image, .home_toc) {
		width: min(var(--cw) * 650 / 1280, 650px);
	}
}
@media screen and (max-width: 767px) {
	.p-maincopy {
		row-gap: calc(var(--section-space) / 3);
	}
	.p-maincopy .home_subject b {
		width: fit-content;
		margin-inline: auto;
		font-size: inherit;
	}
	.p-maincopy .home_subject .v-sp svg {
		height: 2.2em;
	}
	.maincopy_paragraph {
		display: flex;
		flex-direction: column;
		gap: 1.5em;
	}
	.maincopy_paragraph p {
		margin-inline: -1em;
		text-align: center;
	}
	.scene_image .splide__track {
		margin-right: calc(var(--sidegap) * -1);
	}
}

/* :::::: 出会いを贅沢に彩る :::::: */
.p-scene {
	display: grid;
	align-content: flex-start;
}
/* scene_image > scene_gallery > (scene_photo, scene_thumb) */
.scene_image {
	display: grid;
}
.scene_image > * {
	grid-area: 1 / 1;
}
.scene_gallery {
	display: grid;
	gap: 12px;
	width: inherit;
}
.scene_gallery:not(.splide) .photos {
	display: grid;
}
.scene_gallery:not(.splide) .photos > * {
	grid-area: 1 / 1;
}
.scene_gallery .thumbs {
	display: flex;
	justify-content: space-between;
	width: inherit;
}
.scene_gallery .thumbs li {
	flex-basis: calc(25% - 9px);
}
.scene_gallery .thumbs button {
	position: relative;
}
.scene_gallery .thumbs button::after {
	content: "";
	position: absolute;
	inset: 0;
	background: white;
	opacity: 0;
	transition: opacity .2s;
}
.scene_gallery .thumbs .is-active::after {
	opacity: .5;
}
.scene_toc .is-tabactive {
	pointer-events: none;
}
.scene_toc .is-tabactive .hov {
	clip-path: inset(0) !important;
}
.scene_toc .is-tabactive svg {
	transform: translateX(.75em);
}
@media print, (min-width: 768px) {
	.p-scene {
		grid-auto-flow: dense;
		grid-template-columns: 1fr auto;
		align-items: flex-start;
		justify-content: space-between;
	}
	.p-scene .home_hgroup {
		grid-row: span 3;
		grid-column: 1;
		padding-right: 20%;
	}
	.p-scene :where(.home_label, .scene_image, .home_toc)   {
		grid-column: 2;
	}
	.p-scene .home_label {
		justify-self: flex-end;
	}
	.scene_gallery > * {
		width: min(var(--cw) * 800 / 1280, 800px);
		margin-right: calc(var(--sidegap) * -1);
	}
	.p-scene .home_toc {
		margin-top: calc(var(--section-space) / 2);
	}
}
@media screen and (max-width: 767px) {
	.p-scene {
		row-gap: calc(var(--section-space) / 3);
		padding-bottom: calc(var(--section-space) * 1.5);
	}
	.p-scene .home_label {
		top: -.25em;
		right: calc(var(--sidegap) * -1);
		transform-origin: right bottom;
		transform: rotate(-90deg);
	}
	.p-scene .home_paragraph br {
		display: none;
	}
	.scene_gallery {
		gap: calc(var(--cw) * 6 / 375);
	}
	.scene_gallery .photos {
		margin-right: calc(var(--sidegap) * -1);
	}
	.scene_gallery .thumbs li {
		flex-basis: calc(25% - var(--cw) * 4 / 375);
	}
}

/* :::::: こだわりの料理 :::::: */
.p-cuisine {
	display: grid;
}
.p-cuisine .btn {
	width: 100%;
	color: white;
	fill: currentcolor;
	--font-bt: 16;
	--font-md: 16;
	background: var(--themecolor);
}
.p-cuisine .btn .hov {
	color: var(--themecolor);
	background: white;
}
.p-cuisine .btn svg {
	width: auto;
	height: 1em;
}
@media print, (min-width: 768px) {
	.p-cuisine {
		grid-auto-flow: dense;
		grid-template-columns: auto 1fr;
		align-items: flex-start;
		justify-content: space-between;
	}
	.p-cuisine .home_hgroup {
		grid-row: span 4;
		grid-column: 2;
		padding-left: 20%;
	}
	.p-cuisine :where(.home_label, .cuisine_image, .home_toc, .btn) {
		grid-column: 1;
	}
	.p-cuisine .home_label {
		justify-self: flex-start;
	}
	.cuisine_image img {
		max-width: min(var(--cw) * 800 / 1280, 800px);
		margin-left: calc(var(--sidegap) * -1);
	}
	.p-cuisine .btn,
	.p-cuisine .btn .hov {
		width: min(var(--cw) * 240 / 1280, 240px);
	}
	.p-cuisine .home_toc {
		margin-top: calc(var(--section-space) / 2);
	}
	.p-cuisine .btn {
		margin-top: calc(var(--section-space) / 4);
	}
}
@media screen and (max-width: 767px) {
	.p-cuisine {
		row-gap: calc(var(--section-space) / 3);
	}
	.p-cuisine .home_hgroup {
		margin-left: auto;
	}
	.p-cuisine .home_label {
		top: 0;
		left: calc(var(--sidegap) * -1);
		transform-origin: left top;
		transform: rotate(-90deg) translateX(-100%);
	}
	.p-cuisine .home_paragraph br {
		display: none;
	}
	.cuisine_image {
		width: calc(var(--cw) * 320 / 375 + var(--sidegap));
		margin-left: calc(var(--sidegap) * -1);
	}
	.p-cuisine .btn {
		width: 80%;
		margin-top: calc(var(--section-space) / 4);
		margin-inline: auto;
	}
}

/* :::::: こだわりの空間 :::::: */
.p-room,
.room_image,
.room_image:not(.splide) .photos {
	display: grid;
}
.room_image:not(.splide) .photos > * {
	grid-area: 1 / 1;
}
.room_image .photos figcaption {
	text-align: left;
}
.room_image.splide .photos figcaption {
	transition: translate .4s cubic-bezier(.3,1,.7,1);
}
.room_image .splide__slide:not(.is-active) figcaption {
	translate: 0 -1em;
}
.room_image .thumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: inherit;
}
.room_image .thumbs button {
	position: relative;
}
.room_image .thumbs button::after {
	content: "";
	position: absolute;
	inset: 0;
	background: white;
	opacity: 0;
	transition: opacity .2s;
}
.room_image .thumbs .is-active::after {
	opacity: .5;
}
.room_image .thumbs img {
	width: 100%;
}
.room_image .thumbs figcaption {
	display: none;
}
@media print, (min-width: 768px) {
	.p-room {
		grid-auto-flow: dense;
		align-items: flex-start;
		justify-content: space-between;
	}
	.room_image {
		width: min(var(--cw) * 650 / 1280, 650px);
	}
	.room_image {
		gap: 24px;
	}
	.room_image .thumbs {
		gap: 12px;
	}
	.room_image > * {
		width: min(var(--cw) * 800 / 1280, 800px);
		margin-right: calc(var(--sidegap) * -1);
	}
	.room_image .thumbs li {
		flex-basis: calc(33.3333% - 8px);
	}
	.p-room .home_hgroup {
		grid-row: span 3;
		grid-column: 1;
	}
	.p-room :where(.home_label, .cuisine_image, .home_toc, .btn) {
		grid-column: 2;
	}
	.p-room .home_label {
		justify-self: flex-end;
	}
}
@media screen and (max-width: 767px) {
	.p-room {
		row-gap: calc(var(--section-space) / 3);
		padding-bottom: calc(var(--section-space) * 1.5);
	}
	.p-room .home_label {
		top: -.25em;
		right: calc(var(--sidegap) * -1);
		transform-origin: right bottom;
		transform: rotate(-90deg);
	}
	.p-room .home_paragraph br {
		display: none;
	}
	.room_image {
		gap: calc(var(--cw) * 12 / 375);
	}
	.room_image .splide__track {
		margin-right: calc(var(--sidegap) * -1);
	}
	.room_image .thumbs {
		gap: calc(var(--cw) * 6 / 375);
	}
	.room_image .photos {
		margin-right: calc(var(--sidegap) * -1);
	}
	.room_image .thumbs li {
		flex-basis: calc(33.3333% - var(--cw) * 4 / 375);
	}
}


/* :::::: inview :::::: */
@media print, (min-width: 768px) {
	.p-visual .js-inview,
	#home .js-inview {
		opacity: 0;
		transform: translateY(64px) scale(.94);
	}
	.p-visual .js-inview.in-view,
	#home .js-inview.in-view {
		opacity: 1;
		transform: none;
		transition: opacity 1s, transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
		will-change: opacity, transform;
	}
}




















/*
 * 固定メニュー (店舗を見る/オンラインショップ)
 * -------------------------------------------------- */
@media print, (min-width: 768px) {
	.fixed-menu {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	#wrapper[data-page="home"] {
		padding-bottom: 64px; /* MEMO: 固定メニューのためのスペース */
	}
	.fixed-menu {
		z-index: 1002;
		display: grid;
		grid-auto-flow: column;
		column-gap: 1px;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		font-size: 1.4rem;
		text-align: center;
		background: #fff;
	}
	.fixed-menu a {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 64px;
		padding: 0 8px;
		color: #fff;
		line-height: 1.4;
		font-weight: 700;
		background: #6d0000;
	}
	.fixed-menu a:hover {
		text-decoration: none;
	}
	.fixed-menu a.is-active {
		background: #b67f80;
	}
}

/*
 * オープニング
 * -------------------------------------------------- */
.l-loading {
	background: #000;
}
body.is-openanima .l-loading {
	transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

body.is-openanima {
	background: #000;
}
header:not(.is-active) .en,
header:not(.is-active) .copy,
header:not(.is-active) + #menuToggle {
	transform: translateY(-100%);
}
@media screen and (max-width: 767px) {
	.l-loading #skip {
		font-size: 1.2rem;
	}
}
body.is-openanima .p-visual .logo,
body.is-openanima header .en,
body.is-openanima #menuToggle {
	will-change: transform;
	transition: transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}
body.is-openanima header .copy {
	will-change: transform;
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
header:not(.is-active) ~ .p-visual .logo {
	transform: translateY(-80px);
}
header:not(.is-active) .copy {
	transform: translateY(-100%) translateY(-80px);
}

/*
 * メインビジュアル
 * -------------------------------------------------- */
[data-page="home"] {
	background: url(../img/bg_paper.jpg) center top;
}
[data-page="home"] header .logo {
	transition: opacity .6s;
}
[data-page="home"] header.inVisual .logo {
	opacity: 0;
	transition-duration: .3s;
}
[data-page="home"] header.inVisual .logo {
	pointer-events: none;
}
[data-page="home"] header .logo .b {
	opacity: 0;
}
[data-page="home"] header .copy .b {
	display: none;
}
[data-page="home"] header .copy .w {
	display: inline-block;
}
[data-page="home"] header .copy {
	color: #fff;
}
[data-page="home"] header .en {
	color: #fff;
}

/* --------------------------------------------------------------------------
   店舗を見る (モバイルデバイスの fixed-menu から開く店舗メニュー)
   -------------------------------------------------------------------------- */
@media print, (min-width: 768px) {
	.shop-menu {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	.shop-menu {
		z-index: 1001;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		position: fixed;
		padding: 20px 20px 63px;
	}
	.shop-menu:not(.is-active) {
		pointer-events: none;
		opacity: 0;
	}
	.shop-menu:not(.is-active) .shop-menu_container {
		transform: translateY(16px);
	}
	.shop-menu.is-anim {
		transition: opacity .3s;
	}
	.shop-menu.is-anim .shop-menu_container {
		transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	.shop-menu.is-anim.is-active,
	.shop-menu.is-anim.is-active .shop-menu_container {
		transition-duration: .6s;
	}
	.shop-menu,
	.shop-menu::before {
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.shop-menu::before {
		content: "";
		position: absolute;
		background: rgba(0,0,0,.6);
	}
	.shop-menu_container {
		position: relative;
		background: #fff;
	}
	.shop-menu_block {
		position: relative;
	}
	.shop-menu_block::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		border-bottom: 1px solid #c4c4c4;
	}
	.shop-menu_block dt {
		padding: 12px;
		border-bottom: 1px solid #c4c4c4;
		font-size: 1.1rem;
		text-align: center;
	}
	.shop-menu_block:last-child dt {
		font-size: 1.4rem;
	}
	.shop-menu_block .logo {
		position: relative;
		top: -1px;
		width: auto;
		height: 20px;
		margin-right: 8px;
	}
	.shop-menu_list {
		display: flex;
		flex-wrap: wrap;
		font-size: 1.2rem;
	}
	.shop-menu_list li {
		flex-basis: 50%;
		border-bottom: 1px solid #c4c4c4;
	}
	.shop-menu_list li:nth-child(2n+1) {
		border-right: 1px solid #c4c4c4;
	}
	.shop-menu_list a {
		display: block;
		position: relative;
		padding: 10px 16px;
	}
	.shop-menu_list a:hover {
		text-decoration: none;
	}
	.shop-menu_list a::after {
		content: "";
		position: absolute;
		top: calc(50% - 3px);
		right: 12px;
		width: 6px;
		height: 6px;
		border-top: 1px solid currentcolor;
		border-right: 1px solid currentcolor;
		transform: rotate(45deg);
	}
	.shop-menu_list .sub {
		font-size: 1rem;
	}
}