@charset "UTF-8";

/* =========================================================
   Font Face
========================================================= */
@font-face {
  font-family: "neue-kaine";
  src:
    url("neue-kaine.eot?") format("eot"),
    url("neue-kaine.woff2") format("woff2"),
    url("neue-kaine.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "nimbus";
  src: url("nimbus.eot?") format('eot'),
       url("nimbus.woff2") format('woff2'),
       url("nimbus.woff") format('woff');
}


:root {
  --ff-futura: "futura-pt";
  --ff-neue-kaine: "neue-kaine";
  --ff-baskerville: "baskerville-display-pt", sans-serif;
  --ff-nimbus: "nimbus-sans-extended", sans-serif;
  --ff-grotesk: niveau-grotesk, sans-serif;
  --ff-yu-gothic: "yu-gothic-pr6n", sans-serif;
  --ff-yu-mincho: "yu-mincho-pr6n", serif;
}



/* ===== Base Reset ===== */
html, body {
  margin: 0;
  padding: 0;
}

/* ===== List Reset ===== */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0;
  padding: 0;
}


body {
font-family: var(--ff-futura), var(--ff-yu-gothic);
font-size: clamp(11px, 1vw, 14px);
color: #fff;
background-color: #000;

}

html.no-scroll,
body.no-scroll {
  overflow: hidden; /* ← 高さは指定しない。position も触らない。 */
}



a {
font-family: var(--ff-futura), var(--ff-yu-gothic);
font-size: clamp(11px, 1vw, 14px);
color: #fff;
}

a:hover {
text-decoration: underline;
}

/* --- 初期状態（PC想定） --- */
br.sp {
  display: none;
}
br.pc {
  display: inline;
}

/* --- スマホ用（幅768px以下など） --- */
@media (max-width: 768px) {
  br.sp {
    display: inline;
  }
  br.pc {
    display: none;
  }
}



footer {
font-family: var(--ff-yu-gothic);
font-size: 13px;
background: #2E2E2E;
width: 100%;
padding-left:  max(25px, calc(50% - 690px));
padding-right: max(25px, calc(50% - 690px));
box-sizing: border-box;
line-height: 1.7;
padding-bottom: 20px;
}


html:lang(en) footer {
font-family: var(--ff-futura);
font-size: 13px;
background: #2E2E2E;
width: 100%;
padding-left:  max(25px, calc(50% - 690px));
padding-right: max(25px, calc(50% - 690px));
box-sizing: border-box;
line-height: 1.7;
padding-bottom: 20px;
}



footer a{
text-decoration: none;
font-family: var(--ff-yu-gothic);
}

html:lang(en) footer a{
text-decoration: none;
font-family: var(--ff-futura);
}




div.footer {
display: flex;
margin: 0;
padding: 36px 0;
max-width: 960px;
gap: 30px;
}

div.footer div.logo{
width: 167px;
height: auto;
}

div.footer div.logo img{
width: 100%;
height: auto;
}


div.footer div.adress {padding-right: 140px;}
div.footer div.sns {
padding-top: 57px;
}

div.footer div.menu01 {padding-right: 30px; line-height: 1.85;letter-spacing: 0.78px;}
div.footer div.menu02 {padding-right: 30px; line-height: 1.85;letter-spacing: 0.78px;}




ul.sns.pc {
    display: flex;
    gap: 12px;
    width: max-content;
    align-items: center;
}

ul.sns.sp {
    display: none;
}




ul.sns li{
flex:1;
}

ul.sns i{
font-size: 17px;
}



i.x-icon::before {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15.115' height='15.459' viewBox='0 0 15.115 15.459'><path d='M9,6.547,14.622,0H13.289L8.4,5.684,4.5,0H0L5.9,8.592,0,15.459H1.333l5.16-6,4.12,6h4.5ZM7.169,8.673l-.6-.854L1.813,1.005H3.862L7.7,6.5l.6.854L13.293,14.5H11.244L7.173,8.668Z' fill='%23fff'/></svg>");
width: 15px;
height: 15px;
}

footer small {
display: block;
font-family: var(--ff-futura);
font-size: 10px;
line-height: 21px;
letter-spacing: 0.6px;
text-align: right
}

@media (max-width: 767px) {


div.footer {
display: flex;
margin: 0;
padding: 36px 0;
max-width: 100%;
box-sizing: border-box;
gap: 30px;
flex-direction: column;
}


div.footer div.logo{
width: 135px;
height: auto;
}


div.footer div.adress {padding: 0;}

div.footer div.sns {
padding: 0;
}

div.footer div.menu01 {padding: 0; line-height: 1.77;letter-spacing: 0.78px;}
div.footer div.menu02 {padding: 0; line-height: 1.77;letter-spacing: 0.78px;margin-top: -30px;}


ul.sns.sp {
    display: flex;
    gap: 12px;
    width: max-content;
    align-items: center;
padding-top: 27px;
padding-bottom: 35px;
}

ul.sns.pc {
    display: none;
}

footer small {
text-align: center
}



}



/*==========Header==========*/

header{
display: flex;
    position: fixed;
    z-index: 5;
    width: 100%;
    height: 90px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

header .logo{
    width: 206px;
    height: 100px;
    box-sizing: border-box;
    position: relative;
    padding: 10px;
}

header .logo a{
display: block;
    width: 100%;
    height: 100%;
}


header .logo img.pc{
display: block;
}

header .logo img.sp{
display: none;
}

@media (max-width: 767px) {
header{
display: flex;
    position: fixed;
    z-index: 4;
    width: 100%;
    height: 60px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
gap: 22px;
}

header .logo{
    width: 175px;
    height: 30px;
    box-sizing: border-box;
    position: relative;
    padding: 0;
    padding-left: 10px;
}



header .logo img.pc{
display: none;
}

header .logo img.sp{
display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

}

header .logo img{width: 100%;height: auto;    position: absolute;z-index:6;}


ul.main_menu {
display: flex;
margin: 0 auto;
width: max-content;
max-width: calc(100vw - 422px);
overflow: hidden;
gap: 30px;
padding-left: 22px;
}






ul.main_menu li{
display: block;
width: max-content;
white-space: nowrap;
}



@media screen and (max-width: 999px) {
ul.main_menu li{
    display: none;
  }
}


@media screen and (max-width: 1050px) {
  .main_menu li:nth-child(4) {
    display: none;
  }
}



@media screen and (max-width: 1230px) {
  .main_menu li:nth-child(5) {
    display: none;
  }
}


@media screen and (max-width: 1350px) {

  .main_menu li:nth-child(6) {
    display: none;
  }
}



ul.main_menu li a{
font-family: var(--ff-futura), var(--ff-yu-gothic);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.96px;
text-decoration: none;
}

/* ハンバーガーアイコン */
.hamburger-icon {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 58px;
  height: 16px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 4;
  padding-right: 27px;
    box-sizing: border-box;
}

/* ハンバーガーの線 */
.hamburger-icon span {
  width: 32px;
  height: 1px;
  background: #fff;
  transition: transform 0.3s, opacity 0.3s;
  position: absolute;
}


@media (max-width: 767px) {
ul.main_menu {
display: none;
}



.hamburger-icon {
  gap: 4px;
  width: 35px;
  height: 11px;
  padding-right: 15px;
}

/* ハンバーガーの線 */
.hamburger-icon span {
  width: 20px;
}

}



.hamburger-icon span:nth-child(1) {
  top: 0;
}

.hamburger-icon span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.hamburger-icon span:nth-child(3) {
  bottom: 0;
}

/* フルスクリーンメニュー */
nav.menu {
position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
    overflow:hidden;
    box-sizing: border-box;
    padding-left: 37px;
    padding-top: 90px;
}


nav.menu div.menu{
    width: 100%;
    overflow:auto;
    height: max-content;
    box-sizing: border-box;
}



/* メニューが開いたとき */
nav.menu.active {
  opacity: 1;
  visibility: visible;
}

nav.menu div.menu {
width: 87.5%;
margin: 0 auto;
display: flex;
gap: 100px;
padding-top: 40px;
}

/* メニューのリンク */
.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.menu li {
  margin: 0;
}

.menu li:empty {
  padding: 0.75em;
}

.menu a {
color: #FFF;
font-family: var(--ff-futura), var(--ff-yu-gothic);
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 1.88;
letter-spacing: 1.08px;
text-decoration: none;
}

.menu ul.menu01 a {
color: #FFF;
font-family: var(--ff-futura), var(--ff-yu-gothic);
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 1.88;
letter-spacing: 1.08px;
text-decoration: none;
}

.menu ul.menu01 li.mini a {
font-size: 20px;
}

.menu ul.menu02 a {
color: #FFF;
font-family: var(--ff-futura), var(--ff-yu-gothic);
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 1.88;
letter-spacing: 1.08px;
text-decoration: none;
}

.menu ul.sns.pc{
padding-top: 40px;
}




.menu a:hover {
  color: #ddd;
}

.hamburger-menu.active .hamburger-icon span {
  background: #fff;
}
/* ハンバーガーアイコンが「×」に変形 */
.hamburger-menu.active .hamburger-icon span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger-menu.active .hamburger-icon span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active .hamburger-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}





div.open_menu {
position: fixed;
width: 100%;
max-width: 560px;
display: flex;
top:0;
right: 0;
height: 100%;
overflow: auto;
background-color: #fff;
z-index: 7;
align-items: center;
transform: translateX(100%);
opacity: 0;
visibility: hidden;
min-height: 100vh;
}

/* open_menu 表示 */
div.open_menu.active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

/* ページ右上の reservation ボタン */

div.reservation {
width: 115px;
height: 30px;
position: relative;
margin-right: 25px;
margin-left:0;
}

div.reservation a {
 cursor: pointer;
color: #000;
text-align: center;
font-family: var(--ff-futura), var(--ff-yu-gothic);
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.78px;
padding: 7px 14px;
background: #fff;
text-decoration: none;
width: 115px;
height: 30px;
box-sizing: border-box;
position: absolute;
z-index: 1;
}



div.open_menu .hamburger-icon{
position: absolute;
right:0;
top: 26px;
}

/* ハンバーガーアイコンが「×」に変形 */
div.open_menu .hamburger-icon span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
background: #000;
}

div.open_menu .hamburger-icon span:nth-child(2) {
  opacity: 0;

}

div.open_menu .hamburger-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
background: #000;
}



@media (max-width: 767px) {

nav.menu {
    padding-left: 37px;
    padding-top: 60px;
}

nav.menu div.menu {
    width: 100%;
    margin: 0 auto;
    display: flex;
    gap: 38px;
    flex-direction: column;
padding-top: 0;
}

.menu ul.menu01 a {
font-size: 18px;
}

.menu ul.menu01 li.mini a {
font-size: 18px;
}


div.reservation {
width: 115px;
height: 30px;
position: relative;
margin-right: 0;
margin-left: 10%;
}


/* ハンバーガーアイコンが「×」に変形 */
.hamburger-menu.active .hamburger-icon span:nth-child(1) {
  transform: translateY(3px) rotate(45deg);
}
.hamburger-menu.active .hamburger-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ハンバーガーアイコンが「×」に変形 */
div.open_menu .hamburger-icon span:nth-child(1) {
  transform: translateY(3px) rotate(45deg);
background: #000;
}

div.open_menu .hamburger-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
background: #000;
}



}



div.open_menu h2{
color: #000;
text-align: left;
font-family: var(--ff-futura), var(--ff-yu-gothic);
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.78px;
padding-bottom: 50px;
}

div.open_menu nav.open_menu {
display: block;
padding-left: 37px;
}


div.open_menu a{
color: #000;
font-family: var(--ff-futura), var(--ff-yu-gothic);
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 46px; /* 230% */
letter-spacing: 1.2px;
text-decoration: none;
}

@media (max-width: 767px) {


div.open_menu {
width: 100%;
max-width: 100%;
max-height: 520px;
}


div.open_menu a{
color: #000;
font-family: var(--ff-futura), var(--ff-yu-gothic);
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 44px; /* 244.444% */
letter-spacing: 1.08px;
text-decoration: none;

}
}




/*==========TOP==========*/

body.top main {
width: 100%;
height: 100svh;
position: relative;
}

body.top main::after {
content: "";
width: 100%;
height: 100svh;
position: absolute;
background-color: rgba(0, 0, 0, 0.50);
z-index:1;
}

body.top main div{
color: #fff;
text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
z-index:2;
width: max-content;
}

body.top main img{
width: 100%;
height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
object-fit: cover;
z-index:0;
}


body.top main div h1{
font-family: var(--ff-baskerville);
font-weight: 400;
font-style: normal;
font-size: clamp(20px, 3.8vw, 55px);
line-height: 1; /* 98.182% */
letter-spacing: 1.65px;
text-transform: uppercase;
    position: relative;
padding-bottom: 20px;
}




body.top main div p{
font-family: var(--ff-baskerville), var(--ff-yu-mincho);
color: #FFF;
text-align: center;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 26px;
}

body.top main .bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
z-index:1;
}







body.top main .bg-video.is-active {
  opacity: 1;
}



@media (max-width: 767px) {
body.top main div h1{
font-size: 30px;
letter-spacing: 3px;
}

body.top main div p{
font-family: var(--ff-futura), var(--ff-yu-gothic);
}

}

body.top section {
width: 100%;
height: 50vw;
display: flex;
}



body.top section.restaurant02,
body.top section.restaurant04,
body.top section.restaurant06 {
flex-direction: row-reverse;
}


body.top section div.main{
width: 50%;
height: 50vw;
position: relative;
overflow:hidden;
}






body.top section div.main img{
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
}

body.top section div.main::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.50);
z-index:1;
top: 0;
left: 0;
}




body.top section div.main img.logo{
position: absolute;
z-index:2;
}


body.top section div.sub{
width: 50%;
height: 50vw;
display: flex;
flex-direction: column;
}





body.top section div.sub_area {
display: flex;
width: 100%;
}




body.top section.restaurant03 div.sub_area,
body.top section.restaurant04 div.sub_area {
flex-direction: row-reverse;
}


body.top section div.sub_area a {
display: block;
width: 50%;
height: 25vw;
overflow:hidden;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
background-color: #000;
box-sizing: border-box;
padding: 2vw;
text-decoration: none;
}


body.top section div.sub_area a:hover {
  background-color: #222;
}




body.top section div.sub_ttl {

}




body.top section div.sub_ttl p {
text-align: center;
font-family: var(--ff-yu-gothic);
font-style: normal;
font-weight: 500;
line-height: 1.64;
padding-bottom: 3.3vw;
}

html:lang(en) body.top section div.sub_ttl p {
padding-bottom: 1.6vw;
font-family: var(--ff-futura);
}



body.top section div.sub_ttl ul {
margin:0 auto;
display: flex;
gap: 30px;
font-size: clamp(11px, 1vw, 14px);
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.84px;
font-family: var(--ff-futura);
padding-top: 25px;
}

body.top section div.sub_ttl ul a{
color: #fff;
text-decoration: none;
}

body.top section div.sub_ttl span {
color: #FFF;
text-align: center;
font-family: var(--ff-baskerville);
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 19px; /* 126.667% */
text-transform: uppercase;
display: block;
}


body.top section div.sub_ttl span.kinds {
position:relative;
width: 100%;
padding-bottom: 25px;
}


body.top section div.sub_ttl span.kinds::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 13px;
  width: 28px;
  height: 1px;
  background-color: #fff;
  transform: translateX(-50%);
}


body.top section div.sub_ttl span.name {
font-size: clamp(20px, 2vw, 30px);
font-style: normal;
font-weight: 400;
line-height: 1.13; /* 113.333% */
}

body.top section div.sub_img {
width: 50%;
height: 25vw;
position: relative;
overflow:hidden;
}


body.top section div.sub_img::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.50);
z-index:1;
top: 0;
left: 0;
}



body.top section div.sub_img img{
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
}

body.top section div.landscape {
width: 100%;
height: 25vw;
position: relative;
overflow:hidden;
}





body.top section div.landscape::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.50);
z-index:1;
top: 0;
left: 0;
}


body.top section div.landscape img{
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
}


@media (max-width: 767px) {

body.top section {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
}

body.top section.restaurant02,
body.top section.restaurant04,
body.top section.restaurant06 {
flex-direction: column;
}


body.top section div.main{
width: 100%;
height: 100vw;
position: relative;
}


body.top section div.sub{
width: 100%;
height: 100vw;
display: flex;
flex-direction: column;
}

body.top section div.sub_ttl {
width: 100%;
height: auto;
min-height: 100vw;
box-sizing: border-box;
padding: 0 45px;
}

body.top section div.sub_ttl p {
    text-align: center;
    font-family: var(--ff-yu-gothic);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 1.64;
padding-bottom: 48px;
}

body.top section div.sub_ttl span {
    color: #FFF;
    text-align: center;
    font-family: var(--ff-baskerville);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.27;
    text-transform: uppercase;
    display: block;
}

body.top section div.sub_ttl span.name {
font-size: 30px;
font-style: normal;
font-weight: 400;
    line-height: 1.13;
}

body.top section div.sub_ttl ul {
    margin: 0 auto;
    display: flex;
    gap: 27px;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.84px;
    font-family: var(--ff-futura);
    padding-top: 40px;
}


body.top section div.sub_img {display: none;}
body.top section div.landscape {display: none;}

}

@media (min-width: 768px) and (max-width: 1279px) {
body.top section div.sub_ttl p {
display: none;
}

body.top section div.sub_ttl {
  transform: scale(0.9);
  transform-origin: center center; /* 必要に応じて */
  padding: 0.7vw;
}
}

/*==========TOP-news==========*/
body.top section.news {
display: block;
padding: 80px 0 100px 0;
height: auto;
}

body.top section.news h2{
color: #FFF;
text-align: center;
font-family: var(--ff-baskerville);
font-size: 50px;
font-style: normal;
font-weight: 400;
line-height: 54px; /* 108% */
letter-spacing: 1.5px;
text-transform: uppercase;
padding-bottom: 60px;
}

body.top section.news ul{
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
gap: 50px;
}

body.top section.news ul li{
flex: 1;
display: block;
max-width: 212px;
}

body.top section.news ul li div.news_img{
width: 100%;
position: relative;
aspect-ratio: 1/1;
}

body.top section.news ul li div.news_img img{
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
}

body.top section.news ul li a{
text-decoration: none;
}

body.top section.news ul li div.news_ctgry {
padding-top: 20px;
padding-bottom: 10px;
}

@media (max-width: 767px) {
body.top section.news {
display: block;
padding: 50px 0 0 0;
height: auto;
}


body.top section.news ul{
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
gap: 10px;
overflow: auto;
padding-bottom: 50px;
}


body.top section.news ul li{
flex: none;
display: block;
width: 180px;
}

body.top section.news ul li:first-child {
width: 200px;
padding-left: 20px;
}

body.top section.news h2{
color: #FFF;
text-align: center;
font-family: var(--ff-baskerville);
font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: 1;
letter-spacing: 0.9px;
text-transform: capitalize;
}
}

/*==========TOP-online==========*/
body.online h1{

display: block;
padding: 100px 0 80px 0;
height: auto;
text-align: center;

text-align: center;
font-family: var(--ff-baskerville);
font-size: 50px;
font-style: normal;
font-weight: 400;
line-height: 21px; /* 42% */
letter-spacing: 1.5px;
text-transform: capitalize;
}


body section.online {
width: 80%;
max-width: 1000px;
margin:0 auto;
display: block;
padding: 80px 0 100px 0;
height: auto;
}

body section.online h2{
color: #FFF;
text-align: left;
font-size: 26px;
font-style: normal;
font-weight: 400;
line-height: 1.08;
letter-spacing: 1.5px;
text-transform: uppercase;
padding-bottom: 30px;
}

body section.online ul{
width: 100%;
margin: 0 auto;
display: flex;
gap: 32px;
padding-bottom: 80px;
flex-direction: row;
flex-wrap: wrap;
}

body section.online ul li{
flex: 1;
display: block;
max-width: 226px;
min-width: calc((100% - 96px) / 4);
}


body section.online ul li div._img{
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    position: relative;
}

body section.online ul li div._img img{
object-fit: cover;
position: absolute;
width: 100%;
height: 100%;
}


body section.online ul li div._ctgry {
margin-top: 20px;
width: 100px;
height: 30px;
box-sizing: border-box;
background: #808080;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 169.231% */
letter-spacing: 0.78px;
text-transform: uppercase;
text-align: center;
padding: 5px;
}

body section.online ul li div._ttl{
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 1.53;
letter-spacing: 1.02px;
text-transform: uppercase;
padding: 20px 0 10px 0;
}


body section.online ul.category{
width: 100%;
    margin: 0 auto;
    display: flex;
    gap: 32px;
    flex-direction: row;
    flex-wrap: wrap;
}

body section.online ul.category li{
flex: unset;
display: block;
max-width: 480px;
}




body section.online ul li div.online_img{
width: 100%;
}

body section.online ul li div.online_img img{
width: 100%;
}

body section.online ul li a{
text-decoration: none;
}

body section.online ul li div.online_ctgry {
padding-top: 20px;
padding-bottom: 10px;
}

@media (max-width: 767px) {

body.online h1{

display: block;
padding: 40px 0 40px 0;
height: auto;
text-align: center;

text-align: center;
font-family: var(--ff-baskerville);
font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: 1;
letter-spacing: 1.5px;
text-transform: capitalize;
}


body section.online {
display: block;
padding: 50px 0 0 0;
height: auto;
}


body section.online ul{

        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        gap: 60px;
        overflow: hidden;
        padding-bottom: 50px;
        flex-direction: column;

}


body section.online ul li{
flex: none;
display: block;
width: 100%;
max-width: 100%;
}

body section.online ul li:first-child {
width: 100%;
padding-left: 0;
}

body section.online h2{
color: #FFF;
text-align: center;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 1.3;
text-transform: uppercase;
}

body section.online ul li div._ttl {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 1.02px;
    text-transform: uppercase;
}


body section.online ul li div._price {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 1.02px;
    text-transform: uppercase;
}


}

/*==========PAGE==========*/

body.page main {
width: 100%;
height: auto;
position: relative;
}


body.page main div.reservation {
margin: 0 auto;
}

body.page main div.main{
width: 100%;
height: 670px;
position: relative;
margin-bottom: 40px;
}


body.page main div.lead {
margin: 0 auto;
padding: 20px 0 50px 0;
width: 90%;
max-width: 950px;
text-align: center;
color: #FFF;
text-align: center;
font-size: 17px;
font-style: normal;
font-weight: 500;
line-height: 1.65;
}

body.page.talent main div.lead {
width: 80%;
max-width: 1000px;
font-size: 17px;
font-style: normal;
font-weight: 500;
line-height: 1.65;
color: #000;
}


body.page main div.lead div.time{
padding-top: 60px;
position: relative;
font-size: 13px;
}


body.page main div.lead div.tel{
padding-top: 20px;
position: relative;
font-size: 13px;
}


body.page main div.lead div.time::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 30px;
  width: 28px;
  height: 1px;
  background-color: #fff;
  transform: translateX(-50%);
}









body.page main div.main h1{
font-family: var(--ff-baskerville);
    font-size: 65px;
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    text-align: center;
    justify-content: center;
    align-items: center;
  opacity: 1;
}

body.page main div.main:has(video) h1 {
  opacity: 0;
}


body.page main div.main h1 img{
height: 100%;
width: auto;
}

body.page main div.main::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.30);
z-index: 2;
}

body.page main div.main video{
width: 100%;
height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
object-fit: cover;
z-index:2;
}

body.page.nineteeneighty div.main video{
object-fit: contain;
background-color: #000;
}

@media (max-width: 767px) {

body.page.nineteeneighty div.main video{
object-fit: cover;
background-color: #000;
}
}



body.page main div.main img{
width: 100%;
height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
object-fit: cover;
z-index:1;
}

body.page main div.reservation a {
background: #fff;
color: #000;
}

/*reservation color*/
/*
body.page.crossroadskitchen main div.reservation a {
background: #BD202E;
color: #fff;
}

body.page.nineteeneighty main div.reservation a {
background: #323F27;
color: #fff;
}

body.page.hisuikyu main div.reservation a {
background: #E3AF24;
color: #000;
}

body.page.eaudevie main div.reservation a {
background: #690001;
color: #fff;
}

body.page.shinjukunadaman main div.reservation a {
background: #2D2B68;
color: #fff;
}
*/


@media (max-width: 767px) {

body.page main div.main{
max-height: 600px;
}

body.page main div.main h1 {
font-family: var(--ff-baskerville);
font-size: 40px;
line-height: 1.5;
display: flex;
        width: 90%;
        height: 100%;
        position: absolute;
        left: 5vw;
        align-content: center;
        justify-content: center;
        align-items: center;
font-weight: normal;
}

body.page main div.main h1 img{
    display: block;
    width: 100%;
    height: auto;
    margin:0 auto;
}

body.page main div.lead {
margin: 0 auto;
padding: 20px 0 25px 0;
width: 80%;
text-align: center;
color: #FFF;
text-align: center;
font-size: 14px;
}


}




body.page section.img_view {
width: 100%;
height: 50vw;
max-height: 720px;
position: relative;
}

body.page section.img_view img{
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
}


body.page section.page_section {
width: 100%;
height: 50vw;
display: flex;
}


body.page section.section02,
body.page section.section04,
body.page section.section06 {
flex-direction: row-reverse;
}

body.page section div.img{
width: 50%;
height: 50vw;
position: relative;
}

body.page section div.text{
    width: 50%;
    height: 50vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

body.page section div.text div.logo_{
width: 36vw;
max-width: 215px;
aspect-ratio: 1/1;
}

body.page section div.text div.logo_ img{
width: 100%;
height: auto;
}

/*OPTION*/
body.page section.option {
    width: 100%;
    height: auto;
    display: flex;
}


body.page section.option div.img{
width: 50%;
max-width: 100%;
height: auto;
position: relative;
}



body.page section.option div.text{
    width: 50%;
max-width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 40px 0;
}




body.page section.option  div.text h2{
color: #FFF;
text-align: center;
font-size: 35px;
font-style: normal;
text-transform: capitalize;
padding-bottom: 16px;
}

body.page section.option div.text p{
width: 90%;
max-width: 700px;
text-align: center;
display: block;
color: #FFF;
font-family: var(--ff-yu-gothic);
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 1.73;
position: relative;
}

body.page section.option div.text p.shoulder{
padding-bottom: 28px;
}

body.page section.option div.text p.lead{
padding-bottom: 4px;
}

body.page section.option div.text p.text{
padding-bottom: 9px;
}


body.page section.option div.text p.caution{
padding-bottom: 34px;
color: #FFF;
text-align: center;
font-size: 9px;
line-height:  1.44;
}

body.page section.option div.text p.contact
{
padding-top: 13px;
}

body.page section.option div.text p.contact::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -4px;
    width: 28px;
    height: 1px;
    background-color: #fff;
    transform: translateX(-50%);
}



/*CHEF*/


/* dots */
.chef-pagination {
 width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 30px 0;
  position: relative;
  bottom: 0;
    background: #000;
}

.chef-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  cursor: pointer;
  padding:0;
}

.chef-dot.is-active {
  background: #fff;
}

body.page .chef-slider {
position: relative;
    background: #808080;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body.page section.chef {
    width: 100%;
    height: auto;
  display: none;
    background-color: #808080;
  opacity: 0;
  display: none;
}

body.page.team section.chef {
    width: 70%;
    max-width: 1100px;
    padding: 0 50px;
    height: auto;
    background-color: transparent;
  opacity: 1;
  display: flex;
margin: 0 auto;
gap: 100;
padding-bottom: 80px;
}

body.page.team section.chef div.img {
    width: 50%;
    max-width: 400px;
    height: auto;
    position: relative;
    overflow: hidden;
}

body.page.team section.chef div.text {
    width: 50%;
    max-width: calc(100% - 450px);
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

body.page.team section.chef div.text * {
width: auto;
max-width: unset;
}

body.page.team section.chef div.text h2 {
    font-size: 13px;
    line-height: 1.7;
}

body.page.team section.chef div.text p.name {
    text-align: left;
    display: block;
    color: #FFF;
    font-family: var(--ff-futura), var(--ff-yu-gothic);
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.08;
    position: relative;
letter-spacing: 1.56px;
}


@media (max-width: 767px) {

body.page.team.news section.news {
    display: block;
    padding: 50px 0 0 0;
    height: auto;
    margin: 0 auto;
    width: 80%;
    max-width: 1000px;
}


body.page.team section.chef {
    width: 80%;
    max-width: 80%;
    padding: 0;
    height: auto;
    background-color: transparent;
  opacity: 1;
  display: flex;
margin: 0 auto;
gap: 100;
padding-bottom: 80px;
}

body.page.team section.chef div.img {
    width: 100%;
    max-width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

body.page.team section.chef div.text {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

body.page.team section.chef div.text {
        padding-top: 0;
        margin-top: 34px;
        padding-bottom: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: unset;
        overflow: auto;
    }

body.page.team section.chef div.text * {
width: 100%;
max-width: unset;
}

body.page.team section.chef div.text h2 {
    font-size: 13px;
    line-height: 1.7;
}

body.page.team section.chef div.text p.name {
    text-align: left;
    display: block;
    color: #FFF;
    font-family: var(--ff-futura), var(--ff-yu-gothic);
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.08;
    position: relative;
letter-spacing: 1.56px;
}

}






body.page section.chef.is-active {
  display: flex;
  opacity: 1;
  display: flex;
}


body.page section.chef div.img{
width: 34%;
max-width: 480px;
height: auto;
position: relative;
overflow: hidden;z1z
}


body.page section.chef div.text{
    width: 66%;
max-width: calc(100% - 480px);
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 30px 0;
}


body.page section.chef  div.text h2{
width: 90%;
max-width: 700px;
color: #FFF;
text-align: left;
font-size: 35px;
font-style: normal;
text-transform: capitalize;
padding-bottom: 0;
line-height: 1;
}

body.page section.chef div.text p{
width: 90%;
max-width: 700px;
text-align: left;
display: block;
color: #FFF;
font-family: var(--ff-yu-gothic);
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 1.73;
position: relative;
}

body.page section.chef div.text p.name{
padding-bottom: 32px;
}


body.page.crossroadskitchen section.chef div.text p.name{
font-size: 24px;
line-height: 1;
text-transform: capitalize;
}

/*FONT FAMILY*/

body.page.crossroadskitchen section.chef div.text p.name{
font-family: var(--ff-neue-kaine);
}
body.page.nineteeneighty section.chef div.text p.name{
font-family: var(--ff-nimbus);
}
body.page.hisuikyu section.chef div.text p.name{
font-family: var(--ff-grotesk);
font-weight: 500;
}




body.page section.chef div.text p.text{
padding-bottom: 9px;
}


/*contact*/

body.page section.contact {
padding-top: 78px;
padding-bottom: 120px;
}



body.page section.contact h2 {
font-family: var(--ff-baskerville);
color: #FFF;
text-align: center;
font-size: 30px;
font-style: normal;
text-transform: capitalize;
padding-bottom: 16px;
}



body.page section.contact div.lead {
margin: 0 auto;
padding: 20px 0 50px 0;
width: 90%;
max-width: 950px;
text-align: center;
color: #FFF;
text-align: center;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 1.65;
}


body.page section.contact div.time{
padding-top: 60px;
position: relative;
font-size: 15px;
}


body.page section.contact div.tel{
padding-top: 20px;
position: relative;
font-size: 15px;
}


body.page section.contact div.time::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 30px;
  width: 28px;
  height: 1px;
  background-color: #fff;
  transform: translateX(-50%);
}







body.page section.shop {
width: 100%;
padding: 0 0 120px 0;
}




body.page section.shop div.shop {
    width: 90%;
    max-width: 1260px;
    height: auto;
    display: flex;
    gap :20px;
    margin:0 auto;
}


body.page section.shop div.shop_link{
flex:1;
width: 100%;
max-width: 300px;
}


@media (max-width: 767px) {
body.page section.shop {
padding: 60px 0 80px 0;
}

body.page section.shop div.shop {
width: 90%;
    max-width: 1260px;
    height: auto;
    display: flex;
    gap: 20px;
    margin: 0 auto;
    flex-wrap: wrap;
    flex-direction: row;
}


body.page section.shop div.shop_link{
flex:auto;
width: 43%;
max-width: 300px;
}

}


body.page section div.text h2{
color: #FFF;
text-align: center;
font-size: 60px;
font-style: normal;
text-transform: capitalize;
}

body.page section div.text p{
width: 90%;
max-width: 530px;
text-align: center;
display: block;
color: #FFF;
font-family: var(--ff-yu-gothic);
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 1.73;
position: relative;
}

body.page section div.text p span{
font-size: 0.8em;
}


@media (max-width: 767px) {
body.page section.page_section {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
}


body.page section.chef {
    display: none;
}

body.page section.chef.is-active {
    display: flex;
}


body.page section.section02,
body.page section.section04,
body.page section.section06 {
flex-direction: column;
}

body.page section div.img{
width: 100%;
height: 100vw;
max-width: 100%;
position: relative;
}

body.page section.chef div.img{
width: 100%;
max-width: 100%;
height: auto;
position: relative;
}


body.page section.option div.img{
width: 100%;
min-width: auto;
max-width: unset;
height: auto;
position: relative;
}

body.page section div.text{
width: 100%;
height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:40px 0;
}

body.page section.chef div.text{
padding-top: 0;
margin-top: 34px;
padding-bottom: 62px;
width: 100%;
max-width: 100%;
height: auto;
    display: block;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 250px;
    overflow: auto;
}




body.page section.option div.text{
width: 90%;
height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 32px;
    padding-bottom: 48px;

}


body.page section div.text h2{
font-size: 34px;
line-height: 1;
padding-bottom: 20px;
}


body.page section.option div.text h2{
font-size: 24px;
    padding-bottom: 17px;
line-height: 1.34;
}


body.page section.chef div.text h2{
    margin:0 auto;
    width: 74%;
font-size: 30px;
    padding-bottom: 0;
line-height: 1.34;
}


body.page section.chef div.text p {
    margin:0 auto;
    width: 74%;
    font-size: 14px;
}

body.page section div.text p {
    font-size: 14px;
}

body.page section.option div.text p.shoulder {
    font-size: 15px;
    padding-bottom: 39px;
}

body.page section.option div.text p.lead {
    font-size: 15px;
    padding-bottom: 8px;
}

body.page section.option div.text p.caution {
    padding-bottom: 30px;
    text-align: center;
    font-size: 10px;
    line-height: 1.5;
}

body.page section.option div.text p {
   width: 90%;
    font-size: 13px;
}


}


/*FONT FAMILY*/
body.page.crossroadskitchen section div.text h2{
font-family: var(--ff-neue-kaine);
}
body.page.nineteeneighty section div.text h2{
font-family: var(--ff-nimbus);
}
body.page.hisuikyu section div.text h2{
font-family: var(--ff-grotesk);
font-weight: 500;
}
body.page.meeting section div.text h2,
body.page.spa section div.text h2{
font-family: var(--ff-baskerville);
font-weight: 500;
}





body.page section div.text div.menu{
padding-top: 50px;
position: relative;

}

body.page section div.text div.menu a{
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: capitalize;
display: block;
text-align: center;
line-height: 1.625;
}

body.page section div.text div.menu::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 25px;
  width: 28px;
  height: 1px;
  background-color: #fff;
  transform: translateX(-50%);
}





/*==========PAGE-news & Event==========*/
body.page section.news {
display: block;
padding: 80px 0 100px 0;
height: auto;}




body.page.news section.news {
display: block;
padding: 80px 0 100px 0;
height: auto;
margin: 0 auto;
width: 80%;
max-width: 1000px;
}

body.page.artwork section.news {
display: block;
padding: 80px 0 0 0;
height: auto;
margin: 0 auto;
width: 80%;
max-width: 1000px;
}



body.page.news section.news main{
display: flex;
gap: 100px;
}


body.page.news section div.news_img {
    width: 50%;
    height: auto;
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
position: relative;
}


body.page.news section div.news_img img{
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
}

body.page.news section div.text {
width: calc(50% - 100px);
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

body.page.news section div.news_ctgry {
padding-top: 20px;
padding-bottom: 10px;
}

body.page.news section div.news_ttl {
font-size: 17px;
font-style: normal;
font-weight: 500;
line-height: 1.53;
letter-spacing: 1.02px;
}

body.page.news.single section div.news_ttl {
font-size: 34px;
font-style: normal;
font-weight: 500;
line-height: 1.26;
letter-spacing: 2.04px;
}

body.page.news section div.feld {
margin: 100px 0;
}


body.page.news section div.feld03 a {
margin:0 auto;

width: 500px;
max-width: 100%;
text-align: center;
display: block;
background-color: #fff;
color: #000;
font-size: 20px;
padding: 16px;
box-sizing: border-box;
text-decoration: none;
}



body.page.news section div.feld strong{
margin-top: 50px;
font-size: 26px;
font-style: normal;
font-weight: 500;
line-height: 1.1;
letter-spacing: 1.56px;
display: block;
}

body.page.news section div.feld p{
margin-top: 20px;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 1.73;
letter-spacing: 1.56px;
}



body.page.news section div.feld div.img{
margin-top: 50px;
width: 100%;
height: auto;
    position: relative;
}

body.page.news section div.feld02 div.img{
width: 100%;
height: auto;
position: relative;
display: flex;
gap: 40px;
}

body.page.news section div.feld02 div.img img{
flex: 1;
width: calc(50% - 20px);
height: auto;
}


.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
max-width: 225px;
margin:0 auto;
}






@media (max-width: 767px) {


body.page.news section.news main{
display: flex;
gap: 20px;
flex-direction: column;
}


body.page.news section div.feld02 div.img{
width: 100%;
height: auto;
position: relative;
display: flex;
gap: 28px;
flex-direction: column;
}

body.page.news section div.feld02 div.img img{
flex: auto;
width: 100%;
height: auto;
}



body.page.news section div.news_img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

body.page.news section div.text {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

body.page.news section div.feld strong{
margin-top: 30px;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 1.5;
letter-spacing: 1.08px;
display: block;
}

body.page.news section div.feld p{
margin-top: 20px;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: 1.73;
letter-spacing: 1.56px;
}

body.page.news section div.news_ctgry {
font-size: 12px;
padding-top: 20px;
padding-bottom: 10px;
}


body.page.news section div.news_ttl {
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 1.45;
letter-spacing: 1.2px;
}



body.page.news section div.feld03 a {
margin:0 auto;
max-width: 100%;
text-align: center;
display: block;
background-color: #fff;
color: #000;
font-size: 18px;
padding: 16px;
box-sizing: border-box;
text-decoration: none;
}




body.page.news section div.feld {
margin: 60px 0;
}



body.page.news section div.feld02 div.img img{
flex: auto;
width: 100%;
height: auto;
}

.pagination {
max-width: 100%;
margin:0 auto;
}

}




.page-link {
  position: relative;
  padding: 0.5em 1.5em;
  text-decoration: none;
  color: #fff;
  font-weight: 500;
}

/* 共通の矢印 */
.page-link::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%);
}

/* Prev（左向き） */
.page-link.prev::before {
  left: 0;
  transform: translateY(-50%) rotate(-135deg);
}

/* Next（右向き） */
.page-link.next::before {
  right: 0;
  transform: translateY(-50%) rotate(45deg);
}





body.page section.news h1 {
color: #FFF;
text-align: center;
font-size: 50px;
font-style: normal;
font-weight: 400;
line-height: 54px; /* 108% */
letter-spacing: 1.5px;
text-transform: capitalize;
padding: 100px 0;
font-family: var(--ff-baskerville);
}





body.page.artwork section.news h1 {
color: #FFF;
text-align: center;
font-size: 50px;
font-style: normal;
font-weight: 400;
line-height: 54px; /* 108% */
letter-spacing: 1.5px;
text-transform: capitalize;
padding: 100px 0 50px 0;
font-family: var(--ff-baskerville);
}



/*FONT FAMILY*/


body.page section.news h2 {
color: #FFF;
text-align: center;
font-size: 50px;
font-style: normal;
font-weight: 400;
line-height: 54px; /* 108% */
letter-spacing: 1.5px;
text-transform: capitalize;
padding: 60px 0;
font-family: var(--ff-baskerville);
}

body.page.crossroadskitchen section h2{
font-family: var(--ff-neue-kaine);
}

body.page.nineteeneighty section h2{
font-family: var(--ff-nimbus);
}

body.page.hisuikyu section h2{
font-family: var(--ff-grotesk);
font-weight: 500;
}

body.page.meeting section h2{
font-family: var(--ff-baskerville);
font-weight: 500;
}

body.page.spa section h2{
font-family: var(--ff-baskerville);
font-weight: 500;
}


body.page.meeting.talent section h2{
font-family: var(--ff-futura);
font-weight: 500;
}




body.page section.news ul{
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
gap: 50px;
}

body.page section.news ul li{
flex: 1;
display: block;
max-width: 300px;
}

@media (max-width: 767px) {
body.page.news section.news ul li{
flex: auto;
display: block;
max-width: 300px;
}
}

body.page.news section.news ul {
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 60px;
}


body.page.news section.news div.viewmore {

margin:0 auto;
max-width: max-content;
padding: 20px 0;

color: #FFF;

text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 1.2px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}



body.page section.news ul li{
flex: auto;
width: 100%;
display: block;
max-width: 212px;
}

@media (max-width: 767px) {
body.page.news section.news ul li{
flex: auto;
display: block;
max-width: 300px;
}
}



body.page section.news ul li div.news_img{
width: 100%;
position: relative;
aspect-ratio: 1/1;
}

body.page section.news ul li div.news_img img{
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
}

body.page section.news ul li a{
text-decoration: none;
}

body.page section.news ul li div.news_ctgry {
padding-top: 20px;
padding-bottom: 10px;
}

@media (max-width: 767px) {
body.page section.news {
display: block;
padding: 50px 0 0 0;
height: auto;
}






body.page section.news ul{
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
gap: 10px;
overflow: auto;
padding-bottom: 50px;
}





body.page section.news ul li{
flex: none;
display: block;
width: 180px;
}

body.page.news section.news h1,
body.page.news section.news h2{
font-size: 30px;
line-height: 1.16;
padding: 40px 0;
font-family: var(--ff-baskerville);
}


body.page.news section.news ul {
width: 80%;
max-width: 1000px;
margin: 0 auto;
display: flex;
gap: 60px;
overflow: auto;
padding-bottom: 0;
}

body.page.news section.news ul li{
flex: auto;
display: block;
max-width: 100%;
}

body.page.news section.news ul li a div.news_ctgry{
font-size: 12px;
}


body.page.news section.news ul li a div.news_ttl{

font-size: 17px;
font-style: normal;
font-weight: 500;
line-height: 1.53;
letter-spacing: 1.02px;
}


body.page.news section.news ul li:first-child {
padding:0;
flex: auto;
display: block;
max-width: 100%;
}




body.page section.news ul li:first-child {
width: 200px;
padding-left: 20px;
}





body.page section.news h2{
color: #FFF;
text-align: center;
font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: 1;
letter-spacing: 0.9px;
text-transform: capitalize;
}
}



/*==========PAGE-gallery==========*/
body.page section.gallery {
display: block;
padding: 80px 0 100px 0;
height: auto;
}

body.page.artwork section.gallery {
display: block;
width: 80%;
max-width: 1000px;
padding: 0 0 0 0;
height: auto;
margin:0 auto;
}

body.page.artwork section.lead {
display: block;
max-width: 1000px;
padding: 0;
height: auto;
margin:0 auto;
}


body.page.artwork section.lead p{
width: 80%;
max-width: 1000px;
display: block;
margin:0 auto;
padding-bottom: 78px;
text-align: center;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 1.73;
letter-spacing: 0.9px;
}


@media (max-width: 767px) {
body.page.sdgs section.lead p {
text-align: left;
}

body.page.sdgs section.lead p br{
display: none;
}
}

body.page.artwork section.lead ul li {
display: block;
width: 80%;
max-width: 330px;
position:relative;
}

@media (max-width: 767px) {
body.page.artwork section.lead ul li {
margin:0 auto;
}
}



body.page.artwork section.lead ul li::before {
    content: "";
    position: absolute;
    top: 10px;
    width: 8px;
    height: 8px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(135deg);
    right: 0;
}


body.page.artwork section.lead ul li a{
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 110% */
letter-spacing: 1.2px;
padding-bottom: 30px;
display: block;
text-decoration: none;
}

body.page.artwork section.gallery {
margin-bottom: 180px;
}

@media (max-width: 767px) {

body.page.artwork section.gallery {
margin-bottom: 80px;
}
}

body.page section.gallery h2{
color: #FFF;
text-align: center;
font-size: 50px;
font-style: normal;
font-weight: 400;
line-height: 54px; /* 108% */
letter-spacing: 1.5px;
text-transform: capitalize;
}

body.page.artwork section.gallery h2{
padding-top: 80px;
padding-bottom: 30px;
color: #FFF;
text-align: left;
font-size: 26px;
font-style: normal;
font-weight: 400;
line-height: 1.08;
text-transform: capitalize;
}

body.page.artwork .swiper {
    width: 100%;
    max-width: 100%;
    margin: 30px auto 60px auto;
    overflow: hidden;
}

body.page.artwork .swiper-slide {
    width: 100%;
    height: auto;
    max-height: 720px;
    aspect-ratio: 1000/562;
    display: block;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

body.page.artwork .swiper-slide img{
width: 100%;
height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
object-fit: cover;
}



body.page.artwork section.gallery p{
width: 100%;
max-width: 738px;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 1.73;
letter-spacing: 0.9px;
}





@media (max-width: 767px) {

body.page.artwork section.gallery h2{
padding-top: 80px;
padding-bottom: 20px;
color: #FFF;
text-align: left;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 1.16;
text-transform: capitalize;
}


body.page.artwork section.gallery p{
font-size: 13px;
line-height: 1.7;
}
}


body.page.crossroadskitchen section.gallery h2{
font-family: var(--ff-neue-kaine);
}

body.page .swiper-pagination {
    position: relative;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 1;
    bottom: auto;
}


@media (max-width: 767px) {
body.page section.gallery {
display: block;
padding: 50px 0 0 0;
height: auto;
}


body.page section.gallery h2{
color: #FFF;
text-align: center;
font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: 1;
letter-spacing: 0.9px;
text-transform: capitalize;
}


}


body.page section.talent {
width: 80%;
max-width: 1000px;
margin:0 auto;
padding: 20px 0 66px 0;
}


body.page section.talent h2{
font-size: 26px;
font-style: normal;
font-weight: 300;
line-height: 1.08;
letter-spacing: 1.56px;
padding-bottom: 20px;
}

body.page section.talent p{
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 1.73;
letter-spacing: 0.9px;
}

body.page section.talent p span{
font-size: 15px;
line-height: 1.73;
letter-spacing: 0.9px;
display: block;
padding-bottom: 2em;
}

body.page section.talent p strong{
display: block;
padding-bottom: 1em;
font-size: 17px;
font-style: normal;
font-weight: 500;
line-height: 1.65;
letter-spacing: 1.02px;
  text-shadow:
    0.003em 0 0 currentColor,
   -0.003em 0 0 currentColor;
}


body.page section.talent p a{
display: block;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 146.667% */
letter-spacing: 0.9px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}


body.page section.talent div.talent{
padding-bottom: 100px;
}

.job-accordion {
padding-bottom: 80px;
}

.job-accordion details {

}

.job-accordion summary {
  position: relative;
  padding: 0 40px 0 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none; /* デフォルト三角を消す */

font-size: 17px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 164.706% */
letter-spacing: 1.02px;
}

.job-accordion summary::-webkit-details-marker {
  display: none;
}

/* くの字矢印 */
.job-accordion summary::after {
  content: "";
  position: absolute;
  left: 380px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  transform: translateY(-60%) rotate(45deg); /* 下向き */
  transition: transform 0.3s ease;
}

/* 開いたら上向きに */
.job-accordion details[open] summary::after {
  transform: translateY(-40%) rotate(-135deg);
}

.job-accordion dd {
  margin: 0;
  padding: 0 0 16px 0;
  line-height: 1.7;
color: #000;
font-size: 15px;

letter-spacing: 0.9px;
}




/* =========================
   Carousel
========================= */
.swiper {
  width: 100%;
  max-width: 100%;
  margin: 80px auto 0 auto;
  overflow: hidden;
}


@media (max-width: 767px) {
.swiper {
  margin: 50px auto 0 auto;
}

}

.swiper-slide {
  width: 100%;
  height: auto;
  max-height: 720px;
  display: block;
  cursor: pointer;
  overflow: hidden;
  display: flex;
}

.swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.swiper-pagination {
padding: 20px 0;
}



.swiper-pagination-bullet {
  background: #999;
  opacity: 1;
  width: 6px;
  height: 6px;
}

.swiper-pagination-bullet-active {
  background: #fff;
}


body.talent .swiper-pagination-bullet-active {
  background: #000;
}

@media (max-width: 767px) {
.swiper-slide {
aspect-ratio: 3/4;


}


body.page.artwork .swiper-slide {
aspect-ratio: 30/17;
}


body.page.sdgs .swiper-slide {
aspect-ratio: 4/3;
}

.swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
}


/*==========PAGE-access==========*/

body.page.access section.access {
display: block;
padding: 80px 0 0 0;
height: auto;
margin: 0 auto;
width: 80%;
max-width: 1000px;
}

body.page.access section.access h1 {
    color: #FFF;
    text-align: center;
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: 54px;
    letter-spacing: 1.5px;
    text-transform: capitalize;
    padding: 100px 0;
    font-family: var(--ff-baskerville);
}

body.page.access section.lead {
text-align: center;
padding-bottom: 60px;
}

body.page.access section.lead div.tel{
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 146.667% */
letter-spacing: 0.9px;
text-decoration-line: underline;
}

body.page.access section.lead p {
    width: 80%;
    max-width: 1000px;
    display: block;
    margin: 0 auto;
    padding-bottom: 28px;
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.73;
    letter-spacing: 0.9px;
}

body.page.access section.map {
width: 100%;
height: 720px;
overflow:hidden;
position: relative;
}

body.page.access section.map iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

body.page.access section.address {
padding-left: calc(50% - 500px);
padding-bottom: 120px;
}

body.page.access section.address div.address{
width: 100%;
max-width: 1200px;
display: flex;
    gap: 40px;
}

body.page.access p{
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 2.27;
}


body.page.access section div.text{
   margin:0;
    padding:0;
    width: 50%;
    height: auto;
    display: block;
}


body.page.access section div.img{
   padding-top: 160px;
    width: 50%;
    max-width: 450px;
}

body.page.access section div.img img{
object-fit: contain;
}

body.page.access div.text p {
    width: 100%;
    max-width: 600px;
    text-align: left;
    display: block;
    color: #FFF;
    font-family: var(--ff-yu-gothic);
line-height: 2.27;
}



body.page.access div.text p span{
line-height: 1.73;
}


body.page.access div.text p strong{
padding-top: 100px;
padding-bottom: 30px;
display: block;
padding-bottom: 1em;
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 1.65;
letter-spacing: 1.02px;
}


body.page.access p span{
line-height: 1.73;
}


body.page.access p strong{
padding-top: 100px;
padding-bottom: 30px;
display: block;
padding-bottom: 1em;
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 1.65;
letter-spacing: 1.02px;
}

@media (max-width: 767px) {
body.page.access section.access {
display: block;
padding: 80px 0 0 0;
height: auto;
margin: 0 auto;
width: 80%;
max-width: 1000px;
}

body.page.access section.access h1 {
    color: #FFF;
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.17;
    letter-spacing: 1.5px;
    text-transform: capitalize;
    padding: 40px 0;
    font-family: var(--ff-baskerville);
}

body.page.access section.lead {
text-align: left;
padding-bottom: 60px;
width: 80%;
margin:0 auto;
}

body.page.access section.lead div.tel{
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 146.667% */
letter-spacing: 0.9px;
text-decoration-line: underline;
}

body.page.access section.lead p {
    width: 100%;
    max-width: 1000px;
    display: block;
    margin: 0 auto;
    padding-bottom: 28px;
    text-align: left;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.73;
    letter-spacing: 0.9px;
}

body.page.access section.map {
width: 100%;
height: 500px;
}


body.page.access section.address {
padding:0;
width: 80%;
margin:0 auto;
padding-bottom: 100px;
}

body.page.access section.address div.address{
width: 100%;
        max-width: 1200px;
        display: flex;
        gap: 30px;
        flex-direction: column;
}

body.page.access p{
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: 2.27;
}


body.page.access section div.text{
   margin:0;
    padding:0;
    width: 100%;
    height: auto;
    display: block;
}


body.page.access section div.img{
   padding-top: 0;
    width: 100%;
    max-width: 450px;
    height: auto;
}

body.page.access div.text p {
    width: 100%;
    max-width: 600px;
    text-align: left;
    display: block;
    color: #FFF;
    font-family: var(--ff-yu-gothic);
line-height: 2.27;
}



body.page.access div.text p span{
line-height: 1.73;
}


body.page.access div.text p strong{
padding-top: 100px;
padding-bottom: 30px;
display: block;
padding-bottom: 1em;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 1.65;
letter-spacing: 1.02px;
}


body.page.access p span{
line-height: 1.73;
}


body.page.access p strong{
padding-top: 100px;
padding-bottom: 30px;
display: block;
padding-bottom: 1em;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 1.65;
letter-spacing: 1.02px;
}




}

/*==========PAGE-access==========*/

body.page.access section.company {
display: block;
padding: 0 0 160px 0;
height: auto;
margin: 0 auto;
width: 80%;
max-width: 1000px;
text-align: center;
}

body.page.access section.company.policy {
text-align: left;
}


body.page.access section.company.policy *{
font-size: 15px;
line-height: 1.73;
}

body.page.access section.company.policy h2{
font-size: 26px;
line-height: 1.08;
letter-spacing: 1.56px;
margin-top: 80px;
margin-bottom: 30px;
}


ol {
  counter-reset: item;
  padding-left: 1em;
  margin: 1.5em 0;
}

ol li {
  counter-increment: item;
  list-style: none;
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.75em;
  line-height: 1.6;
}

ol li::before {
  content: counter(item) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: #fff;
}


body.page.access section.company p {
    padding: 0;
    display: block;
    padding-bottom: 1em;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 1.02px;
}


body.page.access section.company p strong {
    padding: 0;
    display: block;
    padding-bottom: 1em;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 1.02px;
}


@media (max-width: 767px) {
body.page.access section.company {
text-align:left;
padding: 0 0 80px 0;
}

body.page.access section.company p {
    font-size: 13px;
}


body.page.access section.company p strong {
    font-size: 13px;
}


body.page.access section.company.policy h2{
font-size: 20px;
line-height: 1.08;
letter-spacing: 0;
margin-bottom: 20px;
}

}


/* =========================
   Modal
========================= */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.modal.is-open {
  display: block;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  cursor: pointer;
}

.modal__content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    margin: 5vh auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.modal__content img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
}

h4#modalTitle {
margin-top: 12px;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 1.45;
letter-spacing: 1.2px;
  text-align: left;
  white-space: pre-line;
}


p#modalSubtitle {
margin-top: 12px;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 1.45;
letter-spacing: 1.2px;
  text-align: left;
  white-space: pre-line;
}

p#modalLead {
  margin-top: 12px;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  white-space: pre-line;
}

.modal__caption {
  margin-top: 12px;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  white-space: pre-line;
}



.modal__caption {
  margin-top: 12px;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  white-space: pre-line;
}

/* close button */
.modal__close {
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
}

/*Talent*/

body.talent {
color: #000;
background-color: #fff;
}



body.talent main div.main h1{
color: #fff;
}

body.talent div.footer div.adress {
color: #fff;
}

body.talent header.black img {
  filter: invert(1) brightness(0);
}


body.talent header.active img {
  filter: unset;
}


header.black {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); /* Safari用 */
}

body.talent header.black a {
  color: #000;
}

body.talent header.active a {
  color: #fff;
}

body.talent header.active .div.open_menu a {
  color: #000;
}


body.talent header.active .menu a {
  color: #fff;
}



body.talent header.black div.reservation a {
    color: #fff;
    background: #000;
}


body.talent header.active div.reservation a {
    color: #000;
    background: #fff;
}

body.talent header.black .hamburger-icon span {
    background: #000;
}

.talent-accordion .accordion-content {
  display: none;
}


.talent-accordion .accordion-content a{
color: #000;
}



.talent-accordion .accordion-item.active .accordion-content {
  display: block;
}

.talent-accordion .accordion-title {
  cursor: pointer;
  position: relative;
  padding-right: 24px;
}

.talent-accordion .accordion-title::after {
  content: "＋";
  position: absolute;
  right: 0;
  font-weight: 200;
}

.talent-accordion .accordion-item.active .accordion-title::after {
  content: "－";
  font-weight: 200;
}





body.page div.img {
overflow: hidden;
}

body.page div.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transform: scale3d(1.2, 1.2, 1);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: transform, opacity;
}

body.page div.img img.is-show {
  opacity: 1;
  transform: scale3d(1, 1, 1);
}



/* スクロール演出対象（restaurant 共通） */
.main > img.image,
.sub_img > img.image,
.landscape > img.image {
  opacity: 0;
  transform: scale(1.2);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

/* 表示状態 */
.main > img.image.is-show,
.sub_img > img.image.is-show,
.landscape > img.image.is-show {
  opacity: 1;
  transform: scale(1);
}




div.language-switcher {
position: absolute;
display: block;
width: max-content;
top: 7px;
right:23px;
}

@media (max-width: 767px) {
div.language-switcher {
position: absolute;
display: block;
width: max-content;
top: 4px;
right: 6px;
}
}


div.language-switcher a{
text-decoration: none;
color: #fff;
}



div.language-switcher a.active{
text-decoration: underline;
color: #fff;
}

span.divider {
color: #fff;
}

body.talent .black span.divider {
color: #000;
}