@charset "UTF-8";

/*normalize: http://necolas.github.io/normalize.css/*/

/* Box sizing rules */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
ul,
ol,
dd {
  margin: 0;
  padding: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul,
ol{
  list-style: none;
}

/* Set core root defaults */

/* html:focus-within {
  scroll-behavior: smooth;
} */

/* Set core body defaults */

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
  font: inherit;
}

:root {
  --text-color:#ffffff;
  --base-color:#222222;
  

  --body-font:'Noto Sans','Noto Sans JP','Noto Sans CJK JP','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','游ゴシック','游ゴシック体', 'YuGothic M', YuGothic,'メイリオ',Meiryo,sans-serif;
  --en-font:'DIN 2014',"din-2014", sans-serif;

  --color-black:#111111;
  --color-gray:#707070;

  --wp--preset--color--base:#fff;
}

/* ==========================================================================
  アニメーション
========================================================================== */

@keyframes menuFadeIn {
  0%{
    display: block;
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

@keyframes menuFadeOut {
  0%{
    opacity: 1;
  }
  99%{
    opacity: 0;
  }
  100%{
    display: none;
    opacity: 0;
  }
}

/* ==========================================================================
   英語フォント
========================================================================== */

.enFont{
  font-family: 'DIN 2014',"din-2014", sans-serif;
  font-family: var(--en-font);
}

/* ==========================================================================
   明朝フォント
========================================================================== */

.fontM {
  font-family: "Zen Old Mincho", serif;
}

/* ==========================================================================
   共通設定
========================================================================== */

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
	overflow-y:scroll;
  scroll-padding-top: 80px;
}

body {
  font-family: 'Noto Sans','Noto Sans JP','Noto Sans CJK JP','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','游ゴシック','游ゴシック体', 'YuGothic M', YuGothic,'メイリオ',Meiryo,sans-serif;
  font-family: var(--body-font);
	font-feature-settings : 'pkna';
  color: #ffffff;
  color: var(--text-color);
	background:#222222;
	background:var(--base-color);
	text-align: justify;
	hanging-punctuation: allow-end;
	width:100%;
  min-width: 1190px;
	font-size: 1.4rem;
	line-height: 1.5;
	overflow: hidden;
}

img{
	vertical-align:bottom;
	max-width: 100%;
	height: auto;
  backface-visibility: hidden;
}

a{
	color: #ffffff;
	color: var(--text-color);
	text-decoration: none;
  display: inline-block;
}

a:hover{
  opacity: .8;
}

.spShow{
	display: none;
}

.pcShow{
	display: inline-block;
}

button{
  background: none;
  border: none;
  padding: 0;
  outline: none;
  color: #222222;
  color: var(--base-color);
}

button:focus{
    outline: none;
  }

button:disabled{
    opacity:1;
    color: #222222;
    color: var(--base-color);
  }

/* ==========================================================================
   ヘッダー
========================================================================== */

.header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  min-width: 1190px;
  height: 80px;
  background: transparent;
  padding-left: 53px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap:0 50px;
  transition: background-color .4s linear;
}

.header .siteTitle{
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    max-width: 300px;
    height: 40px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 3;
  }

.header .siteTitle img{
      max-width: 100%;
      max-height: 100%;
      -o-object-fit: contain;
         object-fit: contain;
      -o-object-position: left;
         object-position: left;
    }

.header .gNav{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

.fixHeader{
  background: rgba(0,0,0,0.5);
}

/* ==========================================================================
   gNav
========================================================================== */

.gNav{
  display: flex;
}

.gNav ul{
    display: flex;
    align-items: center;
    gap: 0 96px;
    font-size: 1.4rem;
    letter-spacing: -.05em;
  }

.gNav .reservationLink{
    margin-left: 83px;
    width: 160px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    letter-spacing: -.05em;
    font-weight: 500;
    color: #111111;
    color: var(--color-black);
  }

/* ==========================================================================
   footer
========================================================================== */

.footer{
  background: #111111;
  background: var(--color-black);
  color: #fff;
  padding: 54px 0 51px;
}

.footer a{
    color: #fff;
  }

.footer .footerInner{
    width: min(100% - 40px,1320px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 500px 1fr;
    grid-template-rows: auto 1fr;
  }

.footer .footereLogo{
    grid-column: 1;
    grid-row: 1;
  }

.footer .pageLink{
    grid-column: 2;
    grid-row: 2;
    margin-top: 18px;
  }

.footer .pageLink ul{
      display: flex;
      justify-content: flex-end;
      letter-spacing: -.05em;
      gap:0 95px;
    }

.footer .sns{
    grid-column: 2;
    grid-row: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap:0 30px;
  }

.footer .sns a{
      display: block;
    }

.footer .copyright{
    grid-column: 1;
    grid-row: 2;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    color: #646262;
    font-family: "futura-pt", sans-serif;
    margin-top: 5px;
  }

/* ==========================================================================
   homePage
========================================================================== */

.homePage .mv{
    height: 100dvh;
    min-height: 600px;
    background: url('../../img/home_mv.jpg') no-repeat center center / cover;
    display: grid;
    place-content:center;
  }

.homePage .mv p{
      text-align: center;
      font-size: 2.4rem;
    }

.homePage .secTitle{
    font-size: 4rem;
    text-align: center;
    letter-spacing: -.03em;
    font-weight: 700;
    line-height: 1;
  }

.homePage .about{
    max-width: 1000px;
    margin: 100px auto 0;
  }

.homePage .about .secTitle{
      margin-bottom: 55px;
    }

.homePage .about .innerSec{
      background: #fff;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

.homePage .about .imgBox{
      grid-column: 1;
      grid-row: 1;
    }

.homePage .about .textBox{
      padding: 50px;
      grid-column: 2;
      grid-row: 1;
      align-self: center;
      color: #111111;
      color: var(--color-black);
    }

.homePage .about .textBox h2{
        font-size: 2.6rem;
        font-weight: 700;
        padding-left: 24px;
        border-left: 1px solid #707070;
        border-left: 1px solid var(--color-gray);
        line-height: 1.39;
      }

.homePage .about .textBox p{
        margin-top: 14px;
        font-size: 1.5rem;
        line-height: 2;
      }

.homePage .menu{
    max-width: 700px;
    margin: 100px auto 0;
  }

.homePage .menu .secTitle{
      margin-bottom: 55px;
    }

.homePage .menu .menuPriceSec >h2{
        font-size: 2.4rem;
        font-weight: 600;
        line-height: 1.29;
        text-box: trim-both cap alphabetic;
        padding-bottom: 17px;
        border-bottom: 1px solid #707070;
        border-bottom: 1px solid var(--color-gray);
        margin-bottom: 20px;
      }

.homePage .menu .menuPriceSec >p{
        line-height: 1.42;
        max-width: 550px;
      }

.homePage .menu .menuPriceSec >dl{
        margin-top: 21px;
        display: grid;
        grid-template-columns: 550px 1fr;
        gap:13px;
      }

.homePage .menu .menuPriceSec >dl dt{
          grid-column: 1;
          font-size: 1.6rem;
          font-weight: 500;
          align-self: center;
        }

.homePage .menu .menuPriceSec >dl .price{
          grid-column: 2;
          align-self: center;
          justify-self: end;
          font-size: 2.2rem;
          font-weight: 600;
          line-height: 1;
        }

.homePage .menu .menuPriceSec >dl .price .en{
            font-size: 1.6rem;
            font-weight: 500;
          }

.homePage .menu .menuPriceSec + .menuPriceSec{
      margin-top: 50px;
    }

.homePage .menu .notice{
      margin-top: 40px;
      font-size: 1.3rem;
    }

.homePage .reservation{
    max-width: 680px;
    margin: 100px auto 0;
  }

.homePage .reservation .secTitle{
      margin-bottom: 55px;
    }

.homePage .instagramSec{
		margin: 110px auto 0;
    width: min(calc(100% - 40px),1197px);
	}

.homePage .instagramSec .secTitle{
			margin-bottom: 55px;
		}

.homePage .instagramSec .instagramGallery .instagramLink{
	      background: #444444;
	      height: 50px;
	      border-radius: 3px;
	      display: flex;
	      justify-content: center;
	      align-items: center;
	    }

.homePage .instagramSec .instagramGallery .instagramLink img{
	        width: 25px;;
	      }

.homePage .instagramSec .instagramGallery .follow{
	      background: #444444;
	      height: 50px;
	      border-radius: 3px;
	      display: flex;
	      justify-content: center;
	      align-items: center;
	      text-align: center;
	      font-size: 1.7rem;
	      font-weight: 600;
	    }

.homePage .access{
    margin-top: 90px;
  }

.homePage .access .secTitle{
      margin-bottom: 55px;
    }

.homePage .access .addr{
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      min-height: 46px;
      padding: 5px;
      color: #111111;
      color: var(--color-black);
    }

.homePage .access .addr dt{
        font-weight: 500;
      }

.homePage .access .addr dt::after{
          content: '：';
          padding: 0 .1em;
        }

.homePage .access iframe{
      width: 100%;
      height: 500px;
			vertical-align: bottom;
    }

/* ==========================================================================
   end
========================================================================== */

@media only screen and (max-width: 767px) {
  html{
    font-size: 2.5641vw;
    scroll-padding-top: 20.51282vw;
  }
body {
  min-width: 0;
	width:100%;
}
img{
	width: 100%;
}
.spShow{
	display: inline-block;
}
.pcShow{
	display: none;
}
/* ==========================================================================
   ヘッダー
========================================================================== */
.header{
  width: 100%;
  min-width: 0;
  height: 20.51282vw;
  padding: 0 5.12821vw 0;
  grid-template-columns: minmax(auto,58.97436vw) 1fr;
  gap:0 12.82051vw;
}
  .header .siteTitle{
    height: 7.69231vw;
  }
  .header .menuBtn{
    grid-column: 2;
    grid-row: 1;
    width: 9.74359vw;
    justify-self: end;
    align-self: center;
    display: grid;
    justify-content: center;
  }
    .header .menuBtn button{
      line-height: 1;
      display: grid;
      grid-template-columns: 100%;
      grid-template-rows: auto auto 1fr;
      gap: 1.79487vw 0;
      font-size: 1.4rem;
      font-weight: 500;
      color: #ffffff;
      color: var(--text-color);
    }
      .header .menuBtn button .line{
        justify-self: center;
        background: #ffffff;
        background: var(--text-color);
        width: 100%;
        height: 0.25641vw;
        transition: rotate .2s linear;
      }
    .header .menuBtn .menuBtnOpen{
      gap:0;
    }
      .header .menuBtn .menuBtnOpen .line{
        background: #fff;
      }
      .header .menuBtn .menuBtnOpen .line1{
        grid-row: 1;
        transform-origin: left;
        rotate: 15deg;
      }
      .header .menuBtn .menuBtnOpen .line2{
        grid-row: 2;
        transform-origin: left;
        margin-top: 2.5641vw;
        rotate: -15deg;
      }
      .header .menuBtn .menuBtnOpen .name{
        grid-row: 3;
        color: #fff;
        margin-top: 1.28205vw;
      }
.header:has(.menuBtnOpen){
  background: #111111;
  background: var(--color-black);
}
.fixHeader{
  background: #111111;
  background: var(--color-black);
}
/* ==========================================================================
   gNav
========================================================================== */
.gNav{
  display: none;
  position: fixed;
  top: 20.51282vw;
  left: 0;
  width: 100vw;
  height: 76.92308vw;
  background: #111111;
  background: var(--color-black);
  padding: 12.82051vw 0;
  overflow-y: auto;
  overscroll-behavior-y: none;
}
  .gNav ul{
    justify-content: center;
    gap: 0 24.61538vw;
  }
  .gNav .reservationLink{
    margin: 13.07692vw auto 0;
    width: 61.53846vw;
    height: 12.82051vw;
  }
.navOpen{
  display: block;
  animation: menuFadeIn .4s 1 0s linear forwards;
}
.navClose{
  animation: menuFadeOut .2s 1 0s linear forwards;
}
/* ==========================================================================
   footer
========================================================================== */
.footer{
  padding: 7.69231vw 0 1.28205vw;
}
  .footer .footerInner{
    width: 100%;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto 1fr;
    gap:0;
  }
  .footer .footereLogo{
    grid-column: 1;
    grid-row: 2;
    max-width: 76.92308vw;
    margin: 32.82051vw auto 0;
  }
  .footer .pageLink{
    grid-column: 1;
    grid-row: 1;
  }
    .footer .pageLink ul{
      justify-content: center;
      gap:0 24.35897vw;
    }
  .footer .sns{
    grid-column: 1;
    grid-row: 3;
    margin-top: 28.97436vw;
    justify-content: center;
    gap:0 7.69231vw;
  }
    .footer .sns .instagram{
      width: 4.87179vw;
    }
    .footer .sns .x{
      width: 4.87179vw;
    }
    .footer .sns .tiktok{
      width: 4.35897vw;
    }
    .footer .sns .youtube{
      width: 4.10256vw;
    }
    .footer .sns .facebok{
      width: 2.5641vw;
    }
    .footer .sns .note{
      width: 9.48718vw;
    }
  .footer .copyright{
    grid-column: 1;
    grid-row: 4;
    margin-top: 6.41026vw;
    text-align: center;
  }
/* ==========================================================================
   homePage
========================================================================== */
  .homePage .mv{
    min-height: 300px;
    background: url('../../img/sp_home_mv.jpg') no-repeat center center / cover;
    padding: 0 3.84615vw;
  }
    .homePage .mv p{
      font-size: 2.4rem;
    }
  .homePage .about{
    max-width: none;
    margin: 25.64103vw auto 0;
  }
    .homePage .about .secTitle{
      margin-bottom: 14.10256vw;
    }
    .homePage .about .innerSec{
      background:none;
      display: grid;
      grid-template-columns: 100%;
      grid-template-rows: auto;
    }
    .homePage .about .imgBox{
      grid-column: 1;
      grid-row: 1;
      z-index: 1;
    }
    .homePage .about .textBox{
      margin-top: 38.46154vw;
      width: 94.87179vw;
      background: #fff;
      padding: 12.82051vw 7.69231vw;
      grid-column: 1;
      grid-row: 1;
      z-index: 2;
    }
      .homePage .about .textBox h2{
        padding-left: 0;
        border-left: none;
      }
      .homePage .about .textBox p{
        margin-top: 5.12821vw;
        font-size: 1.4rem;
        line-height: 1.78;
      }
  .homePage .menu{
    max-width: 89.74359vw;
    margin: 25.64103vw auto 0;
  }
    .homePage .menu .secTitle{
      margin-bottom: 14.10256vw;
    }
      .homePage .menu .menuPriceSec >h2{
        padding-bottom: 4.35897vw;
        border-bottom: 0.25641vw solid #707070;
        border-bottom: 0.25641vw solid var(--color-gray);
        margin-bottom: 5.12821vw;
      }
      .homePage .menu .menuPriceSec >p{
        line-height: 1.42;
        max-width: none;
      }
      .homePage .menu .menuPriceSec >dl{
        margin-top: 5.12821vw;
        display: block;
      }
        .homePage .menu .menuPriceSec >dl dt:not(:first-child){
          margin-top: 5.12821vw;
        }
    .homePage .menu .menuPriceSec + .menuPriceSec{
      margin-top: 7.69231vw;
    }
    .homePage .menu .notice{
      margin-top: 7.69231vw;
    }
  .homePage .reservation{
    max-width: 89.74359vw;
    margin: 25.64103vw auto 0;
  }
    .homePage .reservation .secTitle{
      margin-bottom: 14.10256vw;
    }
  .homePage .instagramSec{
    margin: 25.64103vw auto 0;
    width: 100%;
  }
    .homePage .instagramSec .secTitle{
      margin-bottom: 14.10256vw;
    }
      .homePage .instagramSec .instagramGallery .instagramLink{
        height: 12.82051vw;
        border-radius: 0.76923vw;
      }
        .homePage .instagramSec .instagramGallery .instagramLink img{
          width: 6.41026vw;
        }
      .homePage .instagramSec .instagramGallery .follow{
        height: 12.82051vw;
        border-radius: 0.76923vw;
      }
  .homePage .access{
    margin-top: 25.12821vw;
  }
    .homePage .access .secTitle{
      margin-bottom: 14.10256vw;
    }
    .homePage .access .addr{
      min-height: 11.79487vw;
      padding: 1.28205vw 5.12821vw;
    }
    .homePage .access iframe{
      height: 128.20513vw;
    }
/*end*/
}