@charset "UTF-8";

/* RESET
------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.8;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;font-weight: 400;}:where(h1,h2,h3){line-height:calc(1em + 1rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid #CE242C,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

/* COMMON
------------------------- */
:where(html){ color-scheme: #fff;}

html{
  scroll-behavior: smooth;
  font-size: 100%;
  background: #F7F6F2;
  overflow-x: hidden;}
body{
  margin: 0;
  padding: 0;
  font-family: "Noto Serif JP", sans-serif;
  font-weight: 400;
  color: #000;
  font-size: 100%;
  line-height: 1.8;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;}
a {
  position: relative;
  color: #000;
  display: block;
  text-decoration: none;}

/* font */
.sans {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;}
.serif {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;}

/* weight */
.txw-r { font-weight: 400;}
.txw-m { font-weight: 500;}
.txw-b { font-weight: 700;}

p { font-weight: 400;}

/* color */
.tcl-1 { color: #000; }
.tcl-2 { color: #CE242C; }

/* line-height */
.lh-10 { line-height: 1; }
.lh-15 { line-height: 1.5; }
.lh-16 { line-height: 1.6; }
.lh-18 { line-height: 1.8; }
.lh-20 { line-height: 2; }

/* text-decoration */
.underline { text-decoration: underline; }

/* align */
.txa-c { text-align: center;}
.txa-c-pc { text-align: center;}

/* text */
.txs-14 { font-size: 14px; }
.txs-16 { font-size: 16px; }
.txs-18 { font-size: 18px; }
.txs-25 { font-size: 24px; }
.txs-25 { font-size: 25px; }

/* layout */
.wrap {
  margin: 0 auto;
  padding: 0 4vw;
  width: 100%;}
.contents {
  margin: 0 auto;
  width: 100%;
  max-width: 1080px;}
.flex {
  display: flex;
  flex-wrap: wrap;}

/* fade */
.ef-fade {
	opacity: 0;
	transition-duration: 1s;
	transition-property: opacity, transform;
	transform: translate(0, 50px);}
.is-scrollIn {
  opacity: 1;
	transform: translate(0, 0);}

.d-sp { display: none;}

@media screen and (max-width: 1280px) {
  body { width: 100%; overflow-x: hidden;}
  .contents { padding: 0 4vw;}}
@media screen and (max-width: 768px) {
  .txs-14 { font-size: 12px; }
  .txs-16 { font-size: 14px; }
  .txs-18 { font-size: 16px; }
  .txs-24 { font-size: 22px; }
  .txs-25 { font-size: 22px; }
  .txa-c-pc { text-align: left;}
	.d-sp { display: block;}}


/* FIXED
------------------------- */
#fixed {
  display:none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99;
  width: 140px;}
#fixed .flex {
  justify-content: center;}
#fixed .logo { padding: 40px 0 30px;} 
#fixed a {
  padding-top: 10px;
  text-align: center;
  width: 50px;
  font-weight: 500;
  line-height: 50px;
  height: 180px;
  background: #000;
  color: #fff;
  border-radius: 25px;
  writing-mode: vertical-rl;}
#fixed a img {
  margin-top: 30px;
  display: inline-block;}


/* HERO
------------------------- */
#hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  min-height: 500px;
  background: #000;}
#hero .photo { position: absolute;}
#hero .photo img {
  width: 100vw;
  height: 100vh;
  min-height: 500px;
  object-fit: cover;
  margin: auto;}
#hero h1 {
  position: relative;
  z-index: 2;}
.blur {
	animation-name:blurAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;}
@keyframes blurAnime{
from {
  filter: blur(20px);
  transform: scale(1.05);
  opacity: 0;}
to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;}}
.blurTrigger { opacity: 0;}

/* NEWS
------------------------- */
#news {
  position: relative;
  padding: 30px 0 0;}
#news::after {
  content: "";
  display: block;
  height: 1px;
  width: 80%;
  max-width: 640px;
  margin: 30px auto 0;
  background: #EAE8D8;}
#news .flex {
  justify-content: center;
  align-items: center;
  gap: 10px 44px;}
.modal-window {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 800px;
  background-color: #fff;
  border-radius: 5px;
  z-index: 11;
  padding: 2rem;}
.modal-window h1 { margin-bottom: 10px;}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  z-index: 10;}
.button-close {
  margin: 20px 0 0;
  cursor: pointer;}

/* INTRO
------------------------- */
#intro {
  margin-top: 180px;
  position: relative;}
#intro h2 { margin-bottom: 32px;}
#intro .imgbox {
  position: absolute;
  top: -80px;
  left: 0;
  width: 46vw;
  height: 70%;
  z-index: 2;}
#intro .imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;}
#intro::before {
  position: absolute;
  right: 0;
  content: "";
  display: block;
  width: 95%;
  height: 100%;
  background: #fff;
  z-index: 1;}
#intro .contents {
  position: relative;
  padding-top: 120px;
  padding-bottom: 180px;
  z-index: 2;}
#intro .textbox { padding-left: 50%;}
#intro .contents p+p { margin-top: 20px;}


/* WIDE PHOTO
------------------------- */
#band img {
  width: 100%;
  height: 380px;
  object-fit: cover;}


/* FEATURES
------------------------- */
#feature {
  padding: 160px 0 80px;}
#feature img {
  width: 100%;
  margin-bottom: 20px;
  border-radius: 6px;}
#feature .flex { gap: 80px;}
#feature .item { width: calc(50% - 40px);}
#feature h3 { margin: 20px 0 10px;}
#feature h3 span { margin-right: 24px;}

/*  FOODMENU
------------------------- */
#foodmenu{ margin-top: 20px;}
#foodmenu .flex { gap: 8px;}
#foodmenu .item {
	position: relative;
	width: calc(25% - 6px);}
#foodmenu img { width: 100%;}
#foodmenu h4 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
  color: #fff;
	padding-top: 50px;
	font-size: 12px;
	text-align: center;}

/* CTA
------------------------- */
#cta { padding: 80px 0 100px;}
#cta .item {
  flex: 1;
  border: 1px solid #000;
  padding: 50px 20px 55px;}
#cta h3 span { position: relative;}
#cta h3 span::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #000;}
#cta p { padding-top: 8px;}
#cta .last {
  position: relative;
  left: -1px;}
#cta .item { width: 50%;}

/*  SHOP
------------------------- */
#shop {
  position: relative;
  padding: 100px 0 0;}
#shop .shop-grid {
  height: 540px;
  display: flex;}
#shop .item { width: 40vw;}
#shop .shop-img { width: 30vw;}
#shop .shop-map { width: 30vw;}
#shop .info {
  position: absolute;
  padding: 80px 60px 0;
  top: 60px;
  left: 50vw;
  width: 40vw;
  margin-left: -20vw;
  height: 620px;
  background: #fff;
  box-shadow: 0px 0px 10px #00000014;}
#shop .info h3 {
  margin: 0 auto 60px;
  writing-mode: vertical-rl;}
#shop .info table {
  width: 100%;
  border-top: 1px solid #EAE8D8;
  border-collapse: collapse;}
#shop .info table th, #shop .info table td {
  padding: 14px 6px;
  line-height: 1.5;
  border-bottom: 1px solid #EAE8D8;}
#shop .info table th {
  text-align: left;
  width: 100px;}
#shop .shop-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;}
#shop .shop-map iframe{ filter: grayscale(100%) contrast(1.1);}

/* FOOTER
------------------------- */
#footer {
  padding: 160px 0 60px;
  background: #1A2229;}
#footer p {
  letter-spacing: 2px;
  color: #fff;}


/* RESPONSIVE
------------------------- */
@media screen and (min-width:768px) {
  a{ transition:0.5s all;}
  a:hover{ color: #CE242C;}
  #fixed a:hover { background: #CE242C;}
  #cta h3 span::after { transition:0.5s all;}
  #cta a:hover h3 span::after { background-color: #CE242C;}}
@media screen and (max-width:1280px) {
  #shop .shop-grid { height: auto;flex-wrap: wrap;}
  #shop .item { width: 0%;height: auto;}
  #shop .shop-img { width: 50%; height: 520px;}
  #shop .shop-map { width: 50%; height: 520px;}
  #shop .info { position: relative; width: 90%; margin: 0 auto 80px; left: auto; top: auto;}
  #shop .info h3 { margin-bottom: 4vw;}}
@media screen and (min-width:768px) and (max-width:1280px) {
  #intro .textbox { padding-right: 40px;}
  #feature .flex { gap:60px 40px; }
  #feature .item { width: calc(50% - 60px);}
  #cta .contents { padding-right: 120px;}}
@media screen and (max-width:768px) {
  #fixed { width: 60px;}
  #fixed .logo { display: none;}
  #fixed a {
    padding: 0;
    border-radius: 20px;
    position: fixed;
    bottom: 10px; right: 10px;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    width: 160px;
    font-size: 14px;
    writing-mode:inherit;}
  #fixed a img { margin: 0 0 0 10px;}
  #hero { height: 80vw;}
  #hero .photo img { height: 80vw;}
  #hero h1 { right: -10px;}
  #news .flex { gap:14px;}
  #intro { margin-top: 20vw;}
  #intro .imgbox { width: 90%; height: 60vw;top:-10vw;}
  #intro .contents { padding-top: 0; padding-bottom: 15vw;}
  #intro .textbox { padding: 60vw 0 0;}
  #intro::before { width: 96%;}
  #band img { height: 50vw;}
  #feature { padding: 20vw 0 5vw;}
  #feature .item { width: 100%;}
  #feature .flex { gap:40px 0;}
  #feature h3 { margin-top: -36px;}
  #feature h3 span { display: block; margin-top: -20px;font-size: 24px;}
	#foodmenu .flex { gap: 2px;}
	#foodmenu .item { width: calc(50% - 1px);}
  #cta { padding: 10vw 0 0;}
  #cta .last { left: auto; top: -1px;}
  #cta .flex { display: block;}
  #cta .item { width: 100%;}
  #shop { padding: 15vw 0 0;}
  #shop .info { padding: 10vw 6vw; height: auto; margin-bottom: 10vw;}
  #shop .info h3 { margin-bottom: 6vw;}
  #shop .info table { font-size: 14px;}
  #shop .info table th { width: 80px; padding: 14px 0;}
  #shop .info table td { padding: 14px 0;}
  #shop .shop-img { width:100%; height: 320px;}
  #shop .shop-map { width:100%; height: 320px;}
  #footer p { font-size: 11px;}}

/* LOAD
------------------------- */
#splash {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 999;
  background: #000;
  text-align: center;
  color: #fff;}
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);}
#splash_logo img {
  max-width: 140px;}
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0;}
@keyframes fadeUpAnime {
  0% { opacity: 0; transform: translateY(100px);}
  80% { opacity: 1; transform: translateY(0);}
  100% { opacity: 0; transform: translateY(0);}}