/* custom font-face: NotoSerifJP */
@font-face {
    font-family: Marion;
    src: url(fonts/Marion-Regular.ttf);
    
}

/* custom font-face: NotoSerifJP */
@font-face {
    font-family: NotoSerifJP;
    src: url(fonts/NotoSerifJP-Regular.otf);
    
}
/* custom font-face: NotoSansJP */
@font-face {
    font-family: NotoSansJP;
    src: url(fonts/NotoSansJP-Regular.otf);
}


:root {

    /* fonts */
    --marion: 'Marion', Marion, NotoSansJP, sans-serif;
    --notoSerif: 'NotoSerifJP', NotoSerifJP, sans-serif;
    --notoSans: 'NotoSansJP', NotoSansJP, sans-serif;

    /* colors */
    --white-color: #ffffff;
    --dark-brown-color: #7f6c4d;
    --brown-color: #A68B61;
    --light-brown-color: #EFE8D8;
    --font-color: #010101;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body{
    overflow-x: hidden;
    background-color: var(--white-color);
    color: var(--font-color);
}

h1{
    font-size: 4rem;
    color: var(--brown-color);
    font-family: var(--marion);
    font-weight: 500;
}


header {
    position: sticky;
    top: 0;
    width: 100%;
    overflow: hidden;
    background-color: rgb(255, 255, 255, 0.8);
    transition: opacity 0.3s, position 1s;
    z-index: 1000;
    transition: 0.5s;
    box-shadow: 0 5px 2px -2px rgba(0,0,0,.2);
    padding: 32px 60px;
}

nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.brand a {
    margin-right: auto;
    font-family: var(--marion);
    text-decoration: none;
    font-size: 30px;
    font-weight: 500;
    color: var(--brown-color);
    background-color: transparent;
    display: flex;
    align-items: center;
}

.nav__contents{
    transition: all 0.3s ease 0s;
}

.nav__contents > a {
    display: none;
}

ul.nav__links {
    list-style: none;
    display: flex;
    text-align: center;
    align-items: center;
    width: 100%;
    cursor: pointer;
    justify-content: space-between;
}

.nav__contents[data-visible="true"]{
    transform: translateY(0%);
    opacity: 1;
}

.reveal{
  position: relative;
  
}


ul.nav__links > li {
    padding-left: 30px;
    background-color: transparent;
}

ul.nav__links > li > a{
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: 0.5s all ease-in-out;
    font-size: 0.875rem;
    color: var(--brown-color);
    font-family: var(--marion);
}

ul.nav__links > li > a:hover{
  text-decoration: underline var(--brown-color) 2px;
  text-underline-offset: 5px;
}

.mobile-nav-toggle{
    display: none;
}

@media only screen and (max-width: 390px){
    header {
        padding: 32px 30px;
    }

    .brand a {
        font-size: 20px;
    }
}

@media only screen and (max-width: 865px){
    header {
        background-color: rgb(255, 255, 255, 0);
        box-shadow: 0 5px 2px -2px rgba(0,0,0,0);
    }

    .brand a {
        display: none;
    }

    .nav__contents > a {
        display: grid;
        place-items: center;
    }

    .sp-logo{
        margin-top: 81px;
        max-width: 320px;
        max-height: 135.47px;
    }

    .nav__links > ul > img{
        display: block;
    }

    .nav__contents{
        position: fixed;
        inset: 0;
        transform: translateY(-100%);
        transition: transform opacity 500ms ease-out;
        z-index: -1;
        background-color: var(--white-color);
        opacity: 0;
        transition: 600ms all ease;
    }

    ul.nav__links{
        display: grid;
        place-content: center;
        grid-template-columns: repeat(2, auto);
        grid-gap: 60px;
        background-color: var(--white-color);
        padding: 50px;
        justify-content: center;
        justify-items: start;
    }

    ul.nav__links > li {
        display: flex;
        padding-left: 0;
    }


    .mobile-nav-toggle{
        background-color: transparent;
        border: none;
        outline: none;
        cursor: pointer;
        display: block;
        position: fixed;
        top: 1.3rem;
        right: 1.2rem;
    }

    .mobile-nav-toggle .line{
        display: block;
        width: 40px;
        height: 3px;
        background-color: var(--brown-color);
        margin-block: 10px;
        border-radius: 4px;
        transition: transform .5s;
        opacity: .25s;
    }

    .mobile-nav-toggle[aria-expanded=true] .line:nth-child(1){
        transform: translateY(13px) rotate(45deg);

    }
    .mobile-nav-toggle[aria-expanded=true] .line:nth-child(2){
        opacity: 0;
        
    } 
    .mobile-nav-toggle[aria-expanded=true] .line:nth-child(3){
        transform: translateY(-13px) rotate(-45deg);
        
    } 
}


.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
  }

.reveal.active{
  transform: translateY(0);
  opacity: 1;
  }

.carousel__active, .slider:hover{
  background-color: var(--dark-brown-color);
}
    
/** ------------- HOME SECTION -------------- */


section.home > .home-wrapper{
  display: flex;
  /* flex-wrap: wrap; */
}

section.home > .home-wrapper > .home-left{
  flex: 50%;
  padding-left: 120px;
}

.top-logo{
  margin: 182px 0 47px 0;
  width: 320px;
  height: 135.47px;
}


.heading{
  font-size: 3rem;
  font-family: var(--notoSerif);
  margin-bottom: 52px;
}

.sub-heading{
  font-size: 1.5rem;
  font-family: var(--marion);
  line-height: 38.4px;
  color: var(--brown-color);
}

section.home > .home-wrapper > .home-right{
  position: relative;
  flex: 50%;
  z-index: 900;
  margin-top: -100px;
}

section.home > .home-wrapper > .home-right > img.image1{
  width: 100%;
  height: auto;
}

section.home > .home-wrapper > .home-right > .background-rectangle{
  position: relative;
  height: 1100px;
  width: 980px;
  background-color: var(--light-brown-color);
  margin-left: -100px;
  margin-top: -1024px;
  z-index: -9999;
}

@media only screen and (max-width: 1412px){
  section.home > .home-wrapper > .home-right > .background-rectangle{
    position: relative;
    height: 915px;
    width: 640px;
    background-color: var(--light-brown-color);
    margin-left: -100px;
    margin-top: -832px;
    z-index: -9999;
  }
}


/** ------------- CONCEPT SECTION -------------- */
section.concept{
  padding-top: 134px;
}

.concept-wrapper{
  display: flex;
  /* flex-wrap: wrap; */
}

.concept-left, .concept-right{
  flex: 50%;
}

.concept-left > img{
  width: 100%;
  height: auto;
  padding-right: 120px;
}

.concept-left > .concept-left-row2{
  display: flex;
  /* gap: 48px; */
  justify-content: space-between;
  padding: 0 60px;
  margin-top: 51px;
}

.concept-left > .concept-left-row2 > .concept-image3{
  width: 100%;
  height: auto;
}

.concept-left > .concept-left-row2 > .concept-image4{
  max-width: 100%;
  max-height: 216px;
  height: auto;
}

.concept-right{
  padding: 40px 0 0 60px;
}

.concept-right > .concept-subheading{
  font-size: 1rem;
  margin: 30px 0 40px 0;
  color: var(--brown-color);
  font-family: var(--notoSerif);
}

.concept-right > .concept-content > .content-heading{
  font-size: 2.5rem;
  margin-bottom: 40px;
  font-family: var(--notoSerif);
}

.concept-right > .concept-content > .content{
  font-size: 1.2rem;
  font-family: var(--notoSans);
  line-height: 40px;
  letter-spacing: 0.08em;
}

@media only screen and (max-width: 1300px){
  .concept-right > .concept-content > .content{
    font-size: 0.875rem;
    line-height: 30.8px;
  }
}

/** ------------- CHOICES SECTION -------------- */
section.choices{
  padding: 0 120px;
  color: var(--brown-color);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1200px;
}

.choices-heading-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 60px 0 40px 0;
}

.choices-heading-wrapper > p{
  font-family: var(--notoSerif);
  font-size: 2rem;
  
}

.choices-wrapper{
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.card{
  padding: 60px 50px;
  background-color: #F2E9E6;
  border-radius: 4px;
}

.card > .card-number{
  font-family: var(--marion);
  font-size: 2.25rem;
  margin-bottom: 20px;
}

.card > .card-heading{
  font-family: var(--notoSerif);
  font-size: 1.125rem;
  line-height: 32.4px;
  margin-bottom: 20px;
}

.card > .card-content{
  font-family: var(--notoSans);
  font-size: 0.875rem;
  line-height: 25.2px;
  letter-spacing: 0.08em;
}




/** ------------- GREETING SECTION -------------- */
section.greeting{
  padding-top: 134px;
  /* margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1200px; */
}

.greeting-wrapper{
  display: flex;
  /* flex-wrap: wrap; */
  padding-bottom: 183px;
}

.greeting-left, .greeting-right{
  flex: 50%;
}

.greeting-right > img.greeting-image-desktop-size{
  max-width: 100%;
  max-height: 1169px;
  height: auto;
  padding: 0 120px 0 60px;
  position: relative;
}

.greeting-right > img.greeting-image-sp-size{
  display: none;
}

.greeting-right > .grey-bg{
  background-color: var(--light-brown-color);
  opacity: 0.5;
  height: 856px;
  width: 480px;
  position: absolute;
  margin-top: -568px;
  right: 0;
  z-index: -9999;
}

.greeting-left{
  padding: 0 60px 0 120px;
}

.greeting-left > .greeting-subheading{
  font-size: 1rem;
  margin: 30px 0 40px 0;
  color: var(--brown-color);
  font-family: var(--notoSerif);
}

.greeting-left > .greeting-content > .content-heading{
  font-size: 2.5rem;
  margin-bottom: 40px;
  font-family: var(--notoSerif);
}


.greeting-left > .greeting-content > .content{
  font-size: 0.875rem;
  font-family: var(--notoSans);
  line-height: 30.8px;
  letter-spacing: 0.08em;
  margin-bottom: 40px;
}

.greeting-left > .greeting-content > .director{
  text-align: end;
  font-family: var(--notoSans);
  font-size: 1.25rem;
  color: var(--brown-color);
  line-height: 28.8px;
  letter-spacing: 0.08em;
}

.greeting-left > .greeting-content > .director > .director-name{
  font-weight: 500;
}

.greeting-left > .greeting-content > .director > .director-title{
  font-size: 1rem;
  font-weight: 400;
}


/** ------------- IMAGEINBETWEEN -------------- */
main > img{
  width: 100%;
  height: auto;
  display: block;
}

main > img.aboveMenuImage-sp{
  display: none;
}



/** ------------- MENU SECTION -------------- */
section.menu{
  background-image:url('images/menu-bg.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:top;
  z-index: -9999;
}

section.menu .menu-wrapper{
  padding:  120px 60px;
}

.menu-heading{
  padding-left: 60px;
  margin-bottom: 85px;
}

.menu-heading > h1{
  margin-bottom: 30px;
}

.menu-heading > p{
  font-family: var(--notoSerif);
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--brown-color);
}

.catalog-wrapper{
  display: flex;
  align-items: center;
  margin-bottom: 120px;
  /* position: relative; */
}

img.arrow-icon{
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.swiper-button-next{
  content: url('images/arrow-right.svg');
}

.swiper-button-prev{
  content: url('images/arrow-left.svg');
}

.swiper-pagination{
  margin-top: 20px;
}

.catalog{
  display: flex;
  background-color: var(--white-color);
  min-width: 100%;
  max-width: 100%;
}

.catalog-image, .catalog-details{
  flex: 50%;
}

.catalog-image{
  padding-right: 60px;
  padding-left: 24px;
}

.catalog-image img{
  width: 100%;
  height: auto;
}

/* .catalog-image img.imageMenu-sp{
  display: none;
} */

.catalog-details { 
  padding: 30px 60px 17px 0;
}


.catalog-details-title{
  color: var(--brown-color);
  font-family: var(--marion);
  font-size: 1.5rem;
  line-height: 100%;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

.catalog-details-translation{
  font-family: var(--notoSerif);
  font-size: 3rem;
  margin: 15px 0;
  letter-spacing: 0.08em;
  line-height: 100%;
}

.catalog-details-content > p {
  font-family: var(--notoSans);
  font-size: 1.5rem;
  line-height: 35px;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

.additional-options-title{
  font-family: var(--notoSans);
  color: var(--brown-color);
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.additional-options-list > .list > p{
  font-family: var(--notoSans);
  font-size: 1.5rem;
  color: var(--brown-color);
}

@media only screen and (max-width: 1530px){
  .catalog-details-title{
    font-size: 1.2rem;
  }
  
  .catalog-details-translation{
    font-size: 2.5rem;
  }
  
  .catalog-details-content > p {
    font-size: 1rem;
  }
  
  .additional-options-title{
    color: var(--brown-color);
  }
  .additional-options-list > .list > p{
    font-size: 1rem;
  }
}

@media only screen and (max-width: 1350px){
  .catalog-details-title{
    font-size: 1.125rem;
  }
  
  .catalog-details-translation{
    font-size: 2rem;
  }
  
  .catalog-details-content > p {
    font-size: 0.875rem;
    line-height: 25px;
  }
  
  .additional-options-title{
    font-size: 0.875rem;
  }
  .additional-options-list > .list > p{
    font-size: 0.875rem;
  }
}

@media only screen and (max-width: 1150px){
  .catalog-details-title{
    font-size: 1rem;
  }
  
  .catalog-details-translation{
    font-size: 1.5rem;
  }
  
  .catalog-details-content > p {
    font-size: 0.7rem;
    line-height: 25px;
  }

  .additional-options-title{
    font-size: 0.75rem;
  }

  .additional-options-list > .list > p{
    font-size: 0.7rem;
  }
}


.additional-options-list{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.additional-options-list > .list{
  padding: 12px 14px;
  border: 1px solid var(--brown-color);
  border-radius: 5px;
}


.swiper-pagination{
  display: none;
}


.menu-button{
  border: 2px var(--brown-color) solid;
  border-radius: 5px;
  margin: 0 60px;
  padding: 51px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: var(--white-color);
  background-color: var(--brown-color);
  transition: all 0.1s ease-in-out;
}


.menu-button:hover{
border: 2px var(--brown-color) solid;
background-color: var(--white-color);
color: var(--brown-color);
}


.menu-button img{
  width: 20px;
  height: 19.05px;
  margin-right: 18px;
}

.menu-button p{
  font-family: var(--notoSans);
  font-weight: 700;
  letter-spacing: 0.1em;
}


/** ------------- INFORMATION SECTION -------------- */
section.information{
  background-color: rgb(239, 232, 216, 0.5);
  padding: 120px 120px 175px 120px;
}

.information-wrapper{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1200px;
}

.information-heading{
  text-align: center;
  margin-bottom: 79px;
}

.information-subheading{
  font-family: var(--notoSerif);
  color: var(--brown-color);
  font-size: 1rem;
  margin-top: 33px;
}

@media only screen and (min-width: 1200px){
  .information-content-wrapper{
    margin-left: 95px;
  }
}

@media only screen and (max-width: 1429px){
  .information-content-wrapper{
    margin-left: 0;
  }
}

.information-content-wrapper{
  display: flex;
}

.information-details{
  background-color: var(--white-color);
  padding: 0 0 0 60px;
  max-width: 508px;
  min-width: 508px;
  position: relative;
}

.store-name{
  padding-left: 18px;
  padding-top: 58px;
  color: var(--brown-color);
  font-family: var(--marion);
  margin-bottom: 51px;
}

.store-name p:first-child{
  font-size: 1.125rem;
}

.store-name p{
  font-size: 4.375rem;
}

.information-contact-details{
  line-height: 25.2px;
  letter-spacing: 0.08em;
  margin-bottom: 87px;
}

.information-contact-details > p{
  font-family: var(--notoSans);
  font-size: 0.875rem;
}

.information-map{
  position: absolute;
  top: 58px;
  left: 452px;
}

.information-map > iframe{
  width: 508px;
  height: 550px;
}

.information-wrapper{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1200px;
}


/** ------------- BOOKING SECTION -------------- */
section.booking{
  padding: 120px;
  text-align: center;
}

.booking-wrapper{
  color: var(--brown-color);
  font-family: var(--notoSans);
}

.booking-heading, .booking-subheading{
  margin-bottom: 30px;
}

.booking-heading > p{
  font-size: 4rem;
  font-family: var(--marion);
}

.booking-subheading > p{
  font-size: 1rem;
  font-family: var(--notoSerif);
}

.booking-content{
  margin-bottom: 80px;
}

.booking-content > p{
  color: var(--font-color);
  line-height: 25.2px;
  letter-spacing: 0.08em;
  font-size: 0.875rem;
}

.booking-button{
  border: 2px var(--brown-color) solid;
  border-radius: 5px;
  padding: 51px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: var(--brown-color);
  transition: all 100ms ease-in;
}

.booking-button:hover{
background-color: var(--light-brown-color);
}

.booking-button img{
  width: 20px;
  height: 19.05px;
  margin-right: 18px;
}

.booking-button p{
  font-weight: 700;
  letter-spacing: 0.1em;
}

/** ---------- FOOTER ---------- */
.footer-wrapper{
  display: flex;
  background-color: var(--brown-color);
  padding: 60px;
  color: var(--white-color);
}


.footer-left{
  padding-left: 39px;
  flex: 60%;
}

.footer-left > .salon-name {
  margin-bottom: 58px;
  display: flex;
}

.footer-left > .salon-name > div{
  font-family: var(--marion);
  color: var(--white-color);
  font-size: 4.375rem;
}

.footer-left > .salon-name > div > p:first-child{
  font-size: 1.125rem;
}

.social-media{
  display: flex;
}

.social-media > p{
  font-size: 0.75rem;
  font-family: var(--notoSans);
  letter-spacing: 0.09em;
  padding-right: 30px;
}

.social-media > ul{
  display: flex;
  justify-content: space-around;
  gap: 20px;
  text-decoration: none;
  list-style: none;
}

.social-media > ul > li > a > img{
  height: 15px;
  width: 15px;
}

.social-media > ul > li > a > img:hover{
opacity: 0.8;
}

.footer-right{
  padding-right: 60px;
  
  flex: 40%;
}

.footer-right > .nav-links-wrapper{
  display: flex;
  justify-content: end;
  gap: 60px;
  margin-bottom: 17px;
}

.nav-links-wrapper > ul{
  list-style: none;
}

.nav-links-wrapper > ul > li{
  margin-bottom: 23px;
}

.nav-links-wrapper > ul > li > a{
  text-decoration: none;
  font-family: var(--marion);
  color: white;
  letter-spacing: 0.05em;
}

.nav-links-wrapper > ul > li > a:hover{
text-decoration: underline var(--white-color) 2px;
text-underline-offset: 5px;
}

a.shop-button {
  padding: 17px 0;
  border: 1px solid var(--white-color);
  border-radius: 5px;
  background-color: var(--brown-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--white-color);
  font-family: var(--marion);
  transition: all 100ms ease-in;
}

a.shop-button:hover{
background-color: var(--dark-brown-color);
}

a.shop-button > img{
  height: 22px;
  width: 22px;
  margin-right: 13px;
}

a.shop-button > p{
  font-size: 0.875rem;
  letter-spacing: 0.1em;
}

.copyright{
  padding: 19px 0 19px 0;
  line-height: 25px;
  width: 100%;
  background-color: var(--gray-color);
  display: grid;
  place-items: center;
}

.copyright > p{
  color: var(--font-color);
  font-size: 0.75rem;
  font-family: var(--notoSans);
}


/* ------ MEDIA QUERIES ------- */
@media only screen and (max-width: 1072px){
  /** ------------- HOME SECTION --------------- */
  section.home > .home-wrapper{
      flex-direction: column;
  }

  section.home > .home-wrapper > .home-left{
      padding-left: 30px;
  }
  .top-logo{
      margin: 68px 0 47px 0;
      text-align: center;
  }

  .heading{
      font-size: 2.5rem;
  }

  .sub-heading{
      font-size: 1.25rem;
  }

  section.home > .home-wrapper > .home-right{
      padding-left: 60px;
      margin-top: 49px;
  }

  section.home > .home-wrapper > .home-right > .background-rectangle{
      position: relative;
      margin-left: -30px;
      margin-right: 30px;
      position: relative;
      width: 100%;
      height: 448px;
      margin-top: -420px
  }
}

@media only screen and (max-width: 1000px){
  /** ------------- CONCEPT SECTION -------------- */
    section.concept {
      padding-top: 80px;
  }

  .concept-wrapper{
      flex-direction: column-reverse;
  }

  .concept-left > img{
      padding-right: 30px;
  }

  .concept-left > .concept-left-row2{
      gap: 33px;
      padding: 0 0 0 30px;
      margin-top: 35px;
  }

  .concept-right{
      padding: 0 30px 0 30px;
  }

  .concept-right > .concept-subheading{
      margin: 10px 0 20px 0;
  }

  .concept-right > .concept-content > .content-heading{
      font-size: 2rem;
      margin-bottom: 20px;
  }

  .concept-right > .concept-content > .content{
      margin-bottom: 60px;
  }

  /** ------------- CHOICES SECTION -------------- */
  section.choices{
    padding: 0 30px;
    margin-bottom: 0;
  }

  .choices-wrapper{
    flex-direction: column;
  }

  .choices-heading-wrapper{
    justify-content: start;
  }

  .choices-heading-wrapper > p{
    font-size: 1.45rem;
  }

  .choices-wrapper .card > .card-content > br.page-break{
    display: none;
  }

}


@media only screen and (max-width: 1000px){
  
}

@media only screen and (max-width: 1021px){
  /** ------------- MENU SECTION -------------- */
  section.menu > .menu-wrapper {
    padding: 0 30px;
  }

    section.menu {
      padding: 79px 20px;
  }

  .menu-heading {
      padding-left: 0;
      margin-bottom: 40px;
  }

  .menu-heading > h1{
      margin-bottom: 20px;
  }

  .menu-button{ 
      padding: 33px 0;
      margin: 0;
  }

  .menu-button p{
      font-size: 0.875rem;
  }

  .catalog-wrapper {
    margin-bottom: 17px;
  }

  .catalog-wrapper > a > img{
      display: none;
  }

  .catalog{
      flex-direction: column-reverse;
  }


  .catalog-image{
      padding-right: 20px;
      padding-left: 20px;
      padding-bottom: 20px;
  }

  /* .catalog-image > img.imageMenu-sp{
      display: block;
  } */

  /* .catalog-image > img.imageMenu-d{
      display: none;
  } */

  .catalog-details { 
      padding: 20px;
  }

  .catalog-details-translation{
      font-size: 1.5rem;
  }

  .swiper-button-next, .swiper-button-prev{
    display: none !important;
  }

  .swiper-pagination{
    display: block;
  }
  
  .swiper-pagination-bullet-active{
    background: var(--dark-brown-color) !important;
  }

  .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: -2px !important;
    left: 0;
    width: 100%;
}

  .swiper-pagination-bullet{
    margin-top: 20px !important;
    width: 30px !important;
    height: 5px !important;
    border-radius: 0 !important;
  }
/* 
  .slider:first-child{
    background-color: var(--brown-color);
  } */
}
  
/* ------ MEDIA QUERIES ------- */
@media only screen and (max-width: 865px){
    h1{
        font-size: 3rem;
    }    

    /** ------------- GREETING SECTION -------------- */
    section.greeting{
        padding-top: 80px;
    }

    .greeting-wrapper{
        flex-direction: column;
        padding-bottom: 80px;
    }

    .greeting-right > img.greeting-image-desktop-size{
        display: none;
    }

    .greeting-right > img.greeting-image-sp-size{
        display: block;
        max-width: 100%;
        max-height: 1171px;
        height: auto;
        padding: 0 30px;
        margin-top: 50px;
    }

    .greeting-right > .grey-bg{
        margin-top: -313px;
        width: 100%;
        height: 400px;
    }

    .greeting-left{
        padding-left: 30px;
        padding-right: 25px;
    }

    .greeting-left > .greeting-subheading{
        margin: 10px 0 20px 0;
    }

    .greeting-left > .greeting-content > .greeting-heading{
        font-size: 2rem;
        margin-bottom: 20px;
    }
    
    .greeting-left > .greeting-content > .content{
        margin-bottom: 31px;
    }

    .greeting-left > .greeting-content > .content-heading{
      font-size: 2rem;
      margin-bottom: 40px;
      font-family: var(--notoSerif);
    }

    .greeting-left > .greeting-content > .director{
        font-size: 1rem;
    }

    
    .greeting-left > .greeting-content > .director > .director-title{
        font-size: 0.875rem;
    }


    /** ------------- ABOVEMENUIMAGE -------------- */
    main > img.aboveMenuImage-sp{
        display: block;
    }

    main > img.aboveMenuImage-d{
        display: none;
    }


    /** ------------- BOOKING SECTION -------------- */
    section.booking{
        padding: 0 30px;
        margin-top: 60px;
        margin-bottom: 60px;
    }

    
    .booking-heading, .booking-subheading{
        margin-bottom: 20px;
    }
    
    .booking-heading > p{
        font-size: 3rem;
    }
    
    .booking-subheading > p{
        font-size: 0.875rem;
    }
    
    .booking-content{
        margin-bottom: 40px;
        text-align: justify;
    }
    
    .booking-button{
        padding: 33px 0;
    }
    
    .booking-button p{
        font-size: 0.875rem;
    }

}

@media only screen and (max-width: 1080px){
      /** ------------- INFORMATION SECTION -------------- */
    section.information{
        padding: 60px 30px;
    }

    .information-heading{
        text-align: justify;
        margin-bottom: 60px;
    }

    .information-subheading{
        font-size: 0.875rem;
        margin-top: 15px;
    }


    .store-name{
        padding-left: 0;
        padding-top: 58px;
        color: var(--brown-color);
        font-family: var(--marion);
        margin-bottom: 20px;
        display: grid;
        place-items: center;
    }


    .information-contact-details{
        line-height: 25.2px;
        letter-spacing: 0.08em;
        margin-bottom: 87px;
    }

    .information-contact-details > p{
        font-family: var(--notoSans);
        font-size: 0.875rem;
    }

    .information-map{
        position: relative;
        top: 0;
        left: 0;
        margin-top: -60px;
        text-align: center;
    }

    .information-map > iframe{
        width: 255px;
        height: auto;
        
    }

  .information-content-wrapper{
    display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }

  .information-details{
    background-color: var(--white-color);
    padding: 0 30px 30px 30px;
    min-width: 315px;
    /* min-width: 315px; */
    position: relative;
}
}


@media only screen and (max-width: 1166px){
    
}

@media only screen and (max-width: 1323px){
    
}

.show-break{
    display: none;
}

@media only screen and (max-width: 842px){
    footer{
        display: none;
    }

    footer > .copyright{
        display: block;
    }
}

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

    
    .concept-left > .concept-left-row2 > .concept-image4{
        max-width: 100%;
        max-height: 150.28px;
        height: auto;
    }

    /* -------- CHOICES SECTION ------- */
    .booking-content{
        margin-bottom: 40px;
        text-align: justify;
    }

    .page-break{
        display: none;
    }

    .show-break{
        display: inline-block;
    }
}

/*スライダー*/