@charset "UTF-8";

/* ============================================
GINZA PAGE /ginza/
============================================ */

/* keyvis =================================*/
.ginza.keyvis {
  background-image: url(/imgs/02_store/ginza_key_sp.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.ginza.keyvis::before {
  background-color: #e4e4e4;
  mix-blend-mode: multiply;
}

.ginza .keyvis-inner {
  left: 5vw;
  top: initial;
  bottom: 7vw;
}
.ginza .keyvis-inner-ttl {
  font-size: 9vw;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 6vw;
  letter-spacing: 1.6px;
}
.ginza .keyvis-inner-ttl > span {
  display: block;
  font-size: 14.25vw;
  letter-spacing: 3.2px;
}
.ginza .keyvis-inner .keyvis-inner-sub {
  font-size: 6.5vw;
  margin-bottom: 67vw;
}
.ginza .keyvis-inner-desc {
  font-size: .9em;
  letter-spacing: 1.4px;
}

@media (min-width:769px){
  .ginza.keyvis {
    background-image: url("/imgs/02_store/ginza_key.jpg") ;
  }
  .ginza .keyvis-inner {
    left: 12.73vw;
    top: 7vw;
    bottom: 0;
  }
  .ginza .keyvis-inner-ttl  {
    font-size: 4.2vw;
    letter-spacing: 1.6px;
    margin-bottom: 2.35vw;
  }
  .ginza .keyvis-inner-ttl  > span {
    display: block;
    font-size: 6.6vw;
    letter-spacing: 3.2px;
  }
  .ginza .keyvis-inner .keyvis-inner-sub {
    font-size: 2.73vw;
    margin-bottom: 7.78vw;
  }
  .ginza .keyvis-inner-desc  {
    font-size: 1.1vw;
    margin-bottom: 0;
  }

}/*  */


/* INTRO =================================*/
.store.sec_bloc {
  padding-left: 1.5em;
  padding-right: 1.5em;
  margin-top: 2em;
}
.store_top_slider{
  margin-bottom: 3em;
}

/*swiper===========*/
.store .swiper-button-prev,
.store .swiper-button-next{
  color: #fff;
  opacity: .6;
}
.store .swiper-button-next:after, 
.store .swiper-button-prev:after {
  font-size: 20px;
}
.store .swiper-pagination-bullet-active{
  background-color: #474246;
}
.store_top_txt_wrap{
  padding: 0 1em;
}
.store_top_copy {
  font-size: 1.6em;
  margin: 0 0 1em;
}
.store_top_txt{
  font-size: 1.25em;
  line-height: 2;
  letter-spacing: .05em;
  margin: 0 0 1em;
}

@media (min-width:769px){
  .store_top_slider {
    margin-bottom: 4em;
  }
  .store_top_txt_wrap {
    padding: 1em 0;
  }
  .store_top_copy {
    font-size: 3em;
  }
  .store_top_txt{
    font-size: 1.7em;
    max-width: 38em;
  }
}/*  */


/*MENU_GINZA==============================================*/
.menu-inner{
  position: relative;
  margin-bottom: 2.5em;
}
.menu-text{
  font-size: 1.4em;
  line-height: 2.2;
  text-align: center;
  margin-bottom: 2em;
}
.menu-details ul {
  display: none;
  margin-bottom: 4em;
}
.menu-image img{
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: right;
}

@media (min-width:769px){
  .menu-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .menu-image{
    width: 55%;
  }
  .menu-image img{
    aspect-ratio: 6/7;
  }
  .menu-details{
    margin-right: 7em;
    margin-left: auto;
  }
  .menu-details ul {
    display: block;
  }
  .menu-details > ul li {
    width: fit-content;
  }
  .menu-details > ul a {
    display: block;
    font-size: 1.3em;
    font-weight: 600;
    padding: .4em 0;
  }
  .menu-text{
    font-size: 1.6em;
    text-align: left;
  }
  .menu-details .more {
    font-size: 1.8em;
    text-align: center;
  }
  .menu-details .arrow-text {
    font-size: 1em;
  }
}/*  */



/* ============================================
HARAJUKU PAGE /harajuku/
============================================ */

/* keyvis =================================*/
.harajuku.keyvis {
  background-image: url("/imgs/02_store/harajuku_key_sp.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
.harajuku.keyvis::before {
  background-color: #e4e4e4;
  mix-blend-mode: multiply;
}

.harajuku .keyvis-inner {
  left: 5vw;
  top: initial;
  bottom: 7vw;
  width: 90%;
}
.harajuku .keyvis-inner-ttl {
  font-size: 8vw;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 1.6px;
}
.harajuku .keyvis-inner-ttl > span {
  display: block;
  font-size: 12vw;
  letter-spacing: 3.2px;
}

.harajuku .keyvis-inner .keyvis-inner-sub {
  font-size: 6.5vw;
  margin-bottom: 5vw;
}


.harajuku .keyvis-inner-desc  {
  font-size: .9em;
  letter-spacing: 1.4px;
}

@media (min-width:769px){
  .harajuku.keyvis {
    background-image: url("/imgs/02_store/harajuku_key.jpg")  ;
  }
  .harajuku .keyvis-inner {
    left: 11.73vw;
    top: 7vw;
    bottom: 0;
    max-width: 39vw;
  }
  .harajuku .keyvis-inner-ttl {
    font-size: 4.2vw;
    letter-spacing: 1.6px;
    margin-bottom: 2.35vw;
  }
  .harajuku .keyvis-inner-ttl > span {
    display: block;
    font-size: 6.6vw;
    letter-spacing: 3.2px;
  }
  .harajuku .keyvis-inner .keyvis-inner-sub {
    font-size: 2.73vw;
    margin-bottom: 5.78vw;
  }
  .harajuku .keyvis-inner-desc  {
    font-size: 1.1vw;
    margin-bottom: 0;
  }

}/*  */



/* =========================================
HARAJUKU NOA COFFEE Gelato Kitchen /gelato/ 
========================================= */

/* KEY VISUAL ========================== */
.sec_top_kv {
  height: 64em;
  background-color: var(--c-black);
}
.kv_area{
  position: relative;
  height: 100%;
}
.top_kv_slider_wrap{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.top_kv_slider,
.top_kv_slider .slick-list,
.top_kv_slider .slick-track {
  width: 100%;
  height: 100%;
}
.top_kv_img_box{
  width: 100%;
  height: 100%;
}
.top_kv_img_box img{
  object-fit: cover;
  height: 100%;
}

/* TOP TXT  */
.kv_logo{
  width: 13.5em;
  margin: 1em auto .7em;
}
.kv_ttl_box{
  position: absolute;
  z-index: 10;
  right: 0;
  left: 0;
  top: -5%;
  bottom: 0;
  margin: auto;
  width: fit-content;
  font-size: 1rem;
  height: fit-content;
  color: var(--c-white);
}
.kv_ttl_p {
  font-size: 3.2em;
  letter-spacing: .15em;
  color: #fafafa;
}
.kv_ttl{
  font-size: 1em;
  letter-spacing: 0.1em;
  margin-top: .5em;
}
.kv_txt_box{
  position: absolute;
  z-index: 10;
  right: 0;
  left: 0;
  top: 23vw;
  /* bottom: 0; */
  margin: auto;
  font-size: 1rem;
  text-align: center;
  height: fit-content;
  color: var(--c-white);
}
.kv_txt_main{
  font-size: 2.2em;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.04em;
}
.tline{
  display: block;
}
.kv_txt_genre{
  display: none;
  font-weight: 500;
  padding: 2em 0 0 !important;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--c-white);
}
.page_head .kv_txt_genre{
  display: block;
}

.kv_area::after{
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  /* animation: fadeInOnce 10s forwards 1;  */
  z-index: 1;
  /* background-color: rgba(0, 0, 0, .25) !important; */
  background: linear-gradient(0deg,rgba(0, 0, 0, .1) 0% , rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .7) 100%);
  transition: background-color 1s;
}

.top_kv_line_txt {
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 10;
  opacity: .85;
}
.teaser_txt_wrap {
  font-size: 1.3em;
  margin-top: 1.2em;
}
.kv_sub_copy{
  position: absolute;
  left: 2em;
  bottom: 2em;
  color: #fff;
  font-size: 1em;
  line-height: 1.8em;
  /* opacity: .5; */
  z-index: 5;
}
.kv_sub_copy .tline{
  display: block;
  font-size: 2em;
  margin: .7em 0;
}

@media (min-width: 769px) {
  .sec_top_kv{
    height: 64vw;
  }
  .kv_ttl_box {
    top: 4%;
  }
  .kv_area::after {
    background: linear-gradient(-70deg,rgba(0, 0, 0, 0) 0% , rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 70%, rgba(0, 0, 0, .5) 100%);
    transition: background-color 1s;
  }

  .kv_txt_box {
    width: fit-content;
    /* text-align: left; */
    right: inherit;
    left: 7vw;
    top: 0;
    bottom: 4vw;
  }
  .kv_logo {
    width: 35vw;
    margin: 1.2em 0;
  }

  .top_kv_line_txt {
    display: block;
    width: 100%;
    position: absolute;
    bottom: -2.2vw;
    z-index: 10;
  }
  .kv_txt_main {
    font-size: 2.7em;
  }
  .teaser_txt{
    font-size: 1.2em;
  }
  .kv_sub_copy {
    left: 7vw;
    bottom: 4em;
    font-size: 1.2em;
  }
} 
/* 769 */


/* ==============================
/gelato/ TOP ABOUT
=================================*/

.sec_top_about{
  position: relative;
  /* color: var(--c-white); */
  padding: 4em 0;
}
.sec_caption {
  display: block;
  color: var(--c-grey-txt);
}
.top_about_ttl_wrap {
  padding: 2em 0;
}
.top_about_ttl {
  font-size: 2em;
  font-weight: 500;
  line-height: 1.7;
  padding: .3em 0;
}
.top_about_desc {
  font-size: 1.15em;
  line-height: 2;
  padding: 2em 0;
}
.top_about_desc p {
  padding: .5em 0;
}
.top_about_img_box {
  margin: 1.2em 0;
}
.top_about_img._01 {
  width: calc( 100% + var(--inn-w) );
  padding-left: 3em;
}
.top_about_script{
  width: 76%;
  margin-top: -1.5em;
  margin-left: -1em;
}
.top_about_script img{
  transform: rotateZ(-13deg);
}
.top_about_img_box._b{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-left: -2em;
}
.top_about_img._02 {
  width: 50%;
  padding-bottom: 7em;
}
.top_about_img._03 {
  width: 38%;
  aspect-ratio: 1 / 1;
}
.top_about_img._03 img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 769px){

  .sec_top_about {
    padding: 6em 0 5em;
  }
  .top_about_img_box{
    position: absolute;
  }
  .top_about_pc_wrap{
    width: fit-content;
    margin: auto;
    padding-left: 4em;
  }
  .top_about_ttl {
    font-size: 2.4em;
  }
  .top_about_img_box._a {
    top: 0;
    bottom: 0;
    left: 0;
    width: 28%;
    max-width: 42em;
    height: fit-content;
    margin: auto;
  }
  .top_about_img._01 {
    width: 100%;
    padding: 0;
  }
  .top_about_script {
    width: 80%;
    margin: -2em 1em 0 auto;
  }
  .top_about_img_box._b{
    flex-direction: column;
    align-items: flex-start;
    right: 0;
    bottom: 0;
    width: 28%;
    height: 100%;
    padding: 6vw 0;
    margin: 0;
  }
  .top_about_img._02 {
    width: 75%;
    max-width: 22em;
    margin: 0 3em 0 auto;
    padding: 0;
  }
  .top_about_img._03 {
    width: 55%;
    max-width: 14em;
  }

} /*  */




/* =========================================
/access/ 
========================================= */
.access_list{
  padding: 3em 0;
}
.access_list_box {
  padding: 3em 0;
  border-bottom: 1px solid var(--c-grey);
}
/* .access_list_box:first-child {
  border-top: 1px solid var(--c-grey);
} */
.access_list_img{
  aspect-ratio: 4/3;
}
.access_list_img iframe{
  width: 100%;
  height: 100%;
}
.access_list_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.access_detail{
  padding: 1em 0 0;
  text-align: left;
}
.access_list_ttl{
  font-size: 1em;
  margin-bottom: 1.7em;
}
.access_list_ttl .en {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: 1.9em;
  font-weight: 600;
  white-space: nowrap;
  width: 10em;
  margin: .5em auto .6em;
}
.access_list_ttl .ja {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.1em;
  font-weight: 500;
  text-align: center;
}
.access_desc{
  font-size: 1.05em;
  padding: .4em 0;
  letter-spacing: .1em;
}
.access_desc p{
  padding: .2em 0;
}
.access_desc + p {
  padding: .3em 0 .6em;
}
.open_label {
  display: inline-block;
  /* color: var(--c-grey-d); */
  /* font-size: .9em; */
  /* margin: .5em .5em .5em 0; */
  margin-right: .6em;
}
.btn_wrap {
  display: flex;
  /* justify-content: space-between; */
  margin: 1em 0;
  gap: 1.5em;
}
.btn_wrap a{
  display: block;
  width: 10em;
  text-align: center;
  font-size: 1em;
  padding: .8em 0;
  border: solid 1px #344457;
}

@media (min-width: 769px) {
  /* .access_list {
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
  } */
  .access_list_box{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5%;
    padding: 4em 0;
  }
  .access_list_img {
    width: 45%;
  }
  .access_detail{
    width: 31%;
    font-size: .85em;
    padding: 0;
  }
  .access_desc {
    font-size: 1.15em;
  }
  .access_list_ttl {
    margin-bottom: 1.3em;
  }
  .access_list_ttl .en{
    margin: .5em 0 .8em;
  }
  .access_list_ttl .ja{
    text-align: left;
  }

}/* 769 */ 



/* gelato Access ================== */
.bg_black .access_pc_flex {
  padding-bottom: 2em;
}
.gelato_menu_list{
  padding: 2em 0;
}
.gelato_menu_list_box {
  margin: 0 0 1em;
  padding: 1em 0;
  border-bottom: 1px solid var(--c-grey3);
}
.gelato_menu_list_box:first-child{
  border-top: 1px solid var(--c-grey3);
}
.gelato_menu_list_img{
  width: 100%;
  aspect-ratio: 1.4/1;
}
.gelato_menu_list_detail {
  padding: 1em 0 ;
}
.gelato_menu_list_ttl {
  font-size: 3.6em;
  line-height: 1.3;
  font-weight: 400;
  margin-bottom: .1em;
}

.gelato_menu_desc{
  font-size: 1.15em;
  line-height: 1.8;
  padding: .5em 0;
}

@media (min-width: 769px) {
  .gelato_menu_pc_flex{
    display: flex;
    justify-content: space-between;
  }
  .gelato_menu_left_box {
    position: sticky;
    top: 8em;
    width: 30%;
    height: fit-content;
    margin-bottom: 5.5em;
  }
  .gelato_menu_right_box {
    width: 60%;
  }
  .gelato_menu_list_detail {
    padding: 2em 0 ;
  }
  .gelato_menu_list_img {
    aspect-ratio: 3/2;
  }
  .gelato_menu_list_ttl {
    font-size: 3.6em;
    line-height: 1.2;
    margin-bottom: 0.1em;
  }
  .gelato_menu_desc {
    font-size: 1.2em;
    line-height: 1.8;
    padding: .5em 0;
  }

  .gelato_menu_list {
    padding-bottom: 3em;
  }
}/*  */




/* =================================
NOA COFFEE MATCHA SALON /salon/
================================= */

:root {
  --c-salon-brown: #F5F2ED;
  --c-salon-green: #F1F4EE;
}

/* NEW KEYVIS */
.salon_keyvis_block{
  position: relative;
}

.salon_keyvis_ttl_wrap{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 100%;
  height: fit-content;
  z-index: 10;
  text-align: center;
  padding-top: 3.2em;
}

.salon_keyvis_ttl{
  font-size: 1rem;
  width: 83%;
  margin: auto;
}
.salon_keyvis_ttl .open_txt {
  display: block;
  font-size: 1.3em;
  font-weight: 500;
  text-align: center;
  letter-spacing: .02em;
  margin: .7em 0;
  color: #b09a54;
}
.salon_keyvis_copy{
  font-size: 1.2em;
  font-weight: 500;
  color: #fff;
  letter-spacing: .05em;
}

.slide_media{
  position: relative;
  aspect-ratio: 10/9;
}
.slide_media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slide_media::before{
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  /* background-color: #f00; */
  mix-blend-mode: multiply;
}
._01 .slide_media::before{
  background: linear-gradient(0deg,rgba(3, 3, 3, 1) 0%, rgba(240, 244, 247, 1) 30%);
  opacity: .7;
}
._02 .slide_media::before{
  background: linear-gradient(180deg, rgb(95,  77, 62) 0% ,rgb(95,  77, 62) 10% , rgba(255, 255, 255, 1) 45%);
}
.salon_keyvis_slide_inner{
  position: relative;
}
.slide_txt{
  display: none;
  position: absolute;
  right: 4vw;
  bottom: 3.5vw;
  font-size: .9em;
  letter-spacing: .02em;
  color: var(--c-bg);
  z-index: 10;
}

#salon_keyvis_splide .splide__spinner{
  display: none !important;
}
.salon_floor_slider_wrap .splide__arrow{
  background: transparent;
}
.salon_floor_slider_wrap .splide__arrow svg {
  fill: #fff;
}

.video-bg{
  width: 100%;
  height: 190vw;
}
.video-bg video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.keyvis_video .salon_keyvis_ttl_wrap::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  content: "";
  display: block;
  width: 70%;
  height: 70%;
  border-radius: 13em;
  background-color: #5b4f41;
  filter: blur(15vw);
  mix-blend-mode: multiply;
  opacity: .3;
}

@media (min-width:769px){
  .salon_keyvis_ttl_wrap {
    position: absolute;
    left: 4vw;
    right: initial;
    bottom: 4vw;
    top: initial;
    width: 34%;
  }
  .slide_media {
    position: relative;
    aspect-ratio: 16 / 10;
  }
  .salon_keyvis_ttl .open_txt ,
  .salon_keyvis_copy {
    font-size: 1.4em;
  }
  ._01 .slide_media::before{
    background: linear-gradient(25deg,rgba(3, 3, 3, 1) 0%, rgba(240, 244, 247, 1) 40%);
  }
  ._02 .slide_media::before{
    background: linear-gradient(25deg, rgb(95, 77, 62) 0%, rgb(95, 77, 62) 10%, rgba(255, 255, 255, 1) 50%);
  }
  .slide_txt{
    display: block;
  }

  .video-bg{
    height: 62.5vw;
    max-height: 70em;
  }
  .keyvis_video .salon_keyvis_ttl_wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: 36%;
    max-width: 36em;
    padding-top: 3.6em;
    height: fit-content;
  }
}/*  */


/* SALON INTRO ===============*/
.salon_intro_sec{
  margin-bottom: 3em;
}
/* .ncc_ttl{
  font-size: 1rem;
  width: 20em;
  padding: 2em 0;
  margin: 0 auto 2em;
}
.ncc_ttl .open_txt {
  display: block;
  font-size: 1.2em;
  font-weight: 500;
  text-align: center;
  margin: 1.5em 0 0;
} */

.ncc_copy_wrap{
  position: relative;
  padding: 1em 0 ;
}
.ncc_copy {
  font-size: 1.45em;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.02em;
  padding: .5em 0;
  margin-bottom: 2em;
}
.ncc_top_desc {
  /* font-size: 1.15em; */
  line-height: 1.7;
  /* padding: 1.8em 2.2em; */
  letter-spacing: .02em;
  /* background-color: var(--c-bg); */
}
/* .ncc_top_desc p{
  padding: .5em 0;
} */
.ncc_copy_sub_ttl {
  font-family: var(--font-serif);
  font-size: 1.5em;
  line-height: 1.4;
  padding: .4em 0;
  margin-bottom: .8em;
}
.ncc_copy_floor_box {
  text-align: center;
  margin-bottom: 1em;
}
.ncc_copy_floor_txt{
  /* display: flex;
  gap: 1.1em; */
  font-family: var(--font-serif);
  padding: 1.5em .5em 2em;
  border-bottom: .5px solid var(--c-gold);
}

.ncc_copy_floor_txt:first-child{
  border-top: .5px solid var(--c-gold);
}
.floor_icon {
  display: block;
  width: 4.5em;
  margin: 1.2em auto 1.6em;
}
.floor_num {
  display: block;
  font-size: 1.6em;
  line-height: 1.4;
  color: var(--c-gold);
  margin: .6em 0;
}
.floor_txt {
  font-size: 1.2em;
  letter-spacing: .02em;
}

.ncc_copy_img{
  display: block;
  width: 100%;
  aspect-ratio: 3/2;
  background-color: #aaa;
}
.ncc_copy_img_wrap.left {
  margin: 3em 0 0;
}
.ncc_copy_img_wrap.left .ncc_copy_img:first-child{
  width: 52%;
  /* margin-left: auto; */
}
.ncc_copy_img_wrap.left .ncc_copy_img:last-child{
  width: 52%;
  margin-top: -13em;
  margin-left: auto;
}

.ncc_copy_img_wrap.right {
  margin-top: 3em;
}
.ncc_copy_img_wrap.right .ncc_copy_img:first-child{
  width: 56%;
  margin: auto;
}
.ncc_copy_img_wrap.right .ncc_copy_img:nth-child(2){
  width: 58%;
  margin-left: auto;
  margin-top: -2em;
}
.ncc_copy_img_wrap.right .ncc_copy_img:last-child{
  width: 38%;
  margin-top: -10em;
  margin-left: 1.5em;
}

.ncc_top_img_wrap {
  position: relative;
  z-index: 5;
}
.ncc_top_img_wrap .slick-dots li{
  margin: 0;
}

@media (min-width:769px){

  .ncc_copy_floor_box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1em;
  }
  .ncc_copy_floor_txt {
    width: calc(100% / 3);
    font-size: 1.1em;
    padding: 0 2em 1.2em;
    border-bottom: none;
    border-right: .5px solid var(--c-gold);
  }
  .ncc_copy_floor_txt:first-child {
    border-top: none;
    border-left: .5px solid var(--c-gold);
  }

  .floor_icon {
    width: 4em;
    margin: 1em auto 1.6em;
  }
  .floor_txt {
    font-size: 1.05em;
  }
  
  .ncc_top_img_wrap {
    width: 100%;
    aspect-ratio: 5/3;
    max-width: 70em;
  }
  .ncc_top_img_wrap div {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ncc_top_img_wrap .slick-dots {
    bottom: -35px;
  }
  .ncc_copy_wrap {
    /* display: flex;
    justify-content: space-between; */
    margin-top: 2em;
    margin-bottom: 2em;
  }
  /* .ncc_copy_wrap_left {
    width: fit-content;
  }
  .ncc_copy_wrap_right {
    width: 42%;
  } */
  .ncc_ttl {
    font-size: 1.3rem;
    margin: 2em auto 2em;
  }

  .ncc_copy {
    font-size: 1.8em;
    padding-top: 0;
  }

  /* .ncc_top_desc {
    font-size: 1.3em;
  } */
  .ncc_copy_img_wrap{
    position: absolute;
    top: 0;
    width: 29em;
  }
  .ncc_copy_img_wrap.left {
    left: 0;
    top: 13em;
  }
  .ncc_copy_img_wrap.left .ncc_copy_img:first-child {
    width: 80%;
    /* margin-right: -1.5em; */
    margin-left: auto;
  }
  .ncc_copy_img_wrap.left .ncc_copy_img:last-child {
    width: 60%;
    margin-top: -2.5em;
    /* margin-left: 2em; */
  }
 .ncc_copy_img_wrap.right {
    right: 0;
    margin-top: 5em;
  }
  .ncc_copy_img_wrap.right .ncc_copy_img:first-child {
    width: 65%;
    margin: 0 0 0 2em;
  }
 .ncc_copy_img_wrap.right .ncc_copy_img:nth-child(2) {
    width: 56%;
    margin-left: auto;
    margin-top: -3em;
  }
 .ncc_copy_img_wrap.right .ncc_copy_img:last-child {
    width: 42%;
    margin: 6em auto 0 6em;
  }
}/*  */


/* intro_nav_link  =============== */
.intro_nav_link{
  display: none !important;
}
.intro_nav_link_box{
  background-color: var(--c-salon-green);
  margin: 1.5em 0;
}
.intro_nav_link_box_inner{
  display: flex;
}
.intro_nav_link_img{
  width: 40%;
  aspect-ratio: 6 / 5;
}
.intro_nav_link_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;

}
.intro_nav_link_detail{
  position: relative;
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.2em 1em 1.1em;
}
.intro_nav_link_ttl{
  font-family: var(--font-serif);
  font-size: 2.4em;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.5;
}
.intro_nav_floor{
  color: var(--c-gold);
  font-size: 1.15em;
  font-weight: 500;
  padding-left: .1em;
}
.intro_nav_arrow{
  position: absolute;
  right: 1.3em;
  top: 0;
  bottom: 0;
  margin: auto;
  display: block;
  width: 1.3em;
  height: fit-content;
}

@media (min-width:769px){
  .intro_nav_link{
    display: flex;
    justify-content: space-between;
  }
  .intro_nav_link_box_inner {
    display: block;
  }
  .intro_nav_link_box{
    width: 31%;
    margin: 2em 0;
  }
  .intro_nav_link_img {
    width: 100%;
    aspect-ratio: 3 / 2;
  }
  .intro_nav_link_detail {
    width: 100%;
  }
}/*  */



/* STORE BLOCK ================= */
.ncc_store_block {
  margin-top: 1em;
}
.st_slider{
  opacity: 0;
  transition: opacity .5s;
}
.st_slider.slick-initialized{
  opacity: 1;
}
.ncc_floors {
  font-size: 6em;
  font-weight: 600;
  /* text-align: center; */
  margin-bottom: .3em;
  line-height: 1.1;
}
.floor_logo {
  display: inline-block;
  width: 2.05em;
  vertical-align: 0;
  margin-left: .4em;
}
.ncc_store_ttl {
  max-width: 16em;
  height: 4.5em;
  margin: 2em auto;
}
.ncc_store_ttl img{
  height: 100%;
  object-fit: contain;
}
.ncc_store_img_wrap{
  display: flex;
  width: calc(100% + 3em);
  margin-left: -1.5em;
  gap: 1%;
}

.ncc_store_flex {
  padding: 3em 0;
}
.ncc_store_img._01{
  width: 67%;
  aspect-ratio: 34 / 33;
}
.img_box_right{
  width: 32%;
}
.ncc_store_img._02 {
  aspect-ratio: 128 / 171;
  margin-bottom: 3%;
}

.ncc_store_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ncc_store_desc_wrap{
  padding: 2em 0 0;
}
.ncc_store_sub {
  font-size: 1.5em;
  font-weight: 500;
  margin: .5em 0;
}
.ncc_store_desc {
  font-size: 1.1em;
  line-height: 2;
  margin: 1.5em 0 0;
}
.ncc_store_flex:first-of-type .floor_logo{
  width: 2.8em;
  vertical-align: .1em;
}

@media (min-width:769px){
  .ncc_store_block:last-of-type{
    margin-bottom: 7em;
  }
  .ncc_floors {
    /* font-size: 5.2em; */
    margin-bottom: 0.5em;
  }
  .ncc_store_ttl {
    max-width: 20em;
    height: 5.5em;
    margin-bottom: 3em;
  }
  .ncc_store_flex{
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: flex-start;
  }
  .ncc_store_flex:first-of-type{
    margin-bottom: 3em;
  }
  .ncc_store_img_wrap{
    width: 60%;
    margin-left: 0;
  }
  .ncc_store_desc_wrap {
    width: 36%;
    padding: 0;
  }
  /* .ncc_store_sub {
    font-size: 3em;
  } */
  /* .ncc_store_desc {
    font-size: 1.25em;
    line-height: 2.1;
    margin-bottom: 0;
  } */
}/*  */


/* BACKGROUND CIRCLE ========= */
.bg_circle{
  position: fixed;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 60em;
  opacity: .3;
  pointer-events: none;
  z-index: -1;
}
.circle_img{
  position: absolute;
  height: auto;
  transform: scale(1);

  animation: circle_opacity 16s ease-out infinite;

  &._01{ animation-delay: 0s; }
  &._02{ animation-delay: 8s; }
  &._03{ animation-delay: 4s; }
}
.circle_img._01{
  width: 70%;
  top: -16%;
  left: -30%;
}
.circle_img._02 {
  width: 75%;
  top: 24%;
  right: -50%;
}
.circle_img._03{
  width: 120%;
  max-width: inherit;
  left: -45%;
  bottom: -20%;
}
@keyframes circle_opacity {
  0%   { opacity: 80%; transform: translateY(0);}
  25%  { opacity: 50%; transform: translateY(2%);}
  50%  { opacity: 20%; transform: translateY(0);}
  75%  { opacity: 50%; transform: translateY(-2%);}
  100% { opacity: 80%; transform: translateY(0);}
}
@media (min-width:769px){
  .bg_circle {
    min-height: 100vw;
  }
  .circle_img._01{
    width: 50%;
    top: -32%;
    left: -14%;
  }
  .circle_img._02 {
    width: 40%;
    top: 22%;
    right: -20%;
  }
  .circle_img._03{
    width: 100%;
    bottom: -38%;
    left: -38%;
  }
}/*  */


/* ACCESS ================== */
.access{
  max-width: 80em;
  margin: 0 auto;
}
.access_iframe_box {
  width: 100%;
  aspect-ratio: 3/2;
  margin-bottom: 3em;
}
.access_iframe_box iframe{
  width: 100%;
  height: 100%;
}
.access_pc_flex {
  padding: 1em 0;
}
.access_details{
  width: fit-content;
  margin: 0 auto;
  text-align: left;
}
.access_name{
  font-size: 1em;
  margin-bottom: 1.5em;
}
.access_name .en{
font-family: 'Lato', sans-serif;
font-size: 1.7em;
font-weight: 400;
}
.access_details .ja{
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.1em;
}
.accessAddress,.accessTime,.accessTel,.accessRoute{
  font-size: 1.15em;
  line-height: 1.7;
  letter-spacing: .02em;
  margin-bottom: .5em;
}
/* .accessAddress{
  margin-bottom: 1em;
} */
.accessTime img,
.accessTel img{
  width: fit-content;
  height: 1.3em;
  margin-right: .5em;
}
.accessRoute{
  padding-top: 1em;
}
/* .accessTime{
float: left;
}
.accessTel{
margin-left: 140px;
} */
.accessRoute span{
  display: block;
  /* margin-top: 18px; */
  line-height: 1.5;
}

@media (min-width:769px){
  .ncc_access_block .sec_ttl {
    padding-top: .5em;
  }
  .access_pc_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em 0;
  }
  .access_iframe_box {
    width: 58%;
    margin-bottom: 0;
  }
  .access_details{
    width: 36%;
    margin: 0;
  }
}/*  */


/* SALON MENU ================== */
/* .salon_menu_block{
  background-color: #ecf0eb;
} */
.salon_menu_img_box {
  width: calc(100% + 4em);
  margin-left: -2em;
  padding: 1.5em 0;
}
.salon_menu_detail_box{
  padding: 2em 0 .5em;
}
.salon_menu_copy{
  font-size: 2.6em;
  font-weight: 600;
  line-height: 1.3;
  padding: .2em 0;
}

/* .slide_txt{
  animation: 1s cubic-bezier(0.2, 1, 0.2, 1) both;
  opacity: 0;
}
.splide__slide.anm-started .slide_txt{
  animation-name: mv02-fadeIn;
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
}
.splide__slide.anm-finished .slide_txt{
  animation-name: mv02-fadeOut;
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
}

@keyframes mv02-fadeIn {
  0% {
    transform: translateY(2rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes mv02-fadeOut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-2rem);
    opacity: 0;
  }
}  */

@media (min-width: 769px) {
  .salon_menu_block{
    padding-top: 0;
    margin-bottom: 3.5em;
  }
  .salon_menu_pc_flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .salon_menu_img_box{
    width: 65%;
  }
  .salon_menu_detail_box{
    width: 32%;
    padding: 0;
  }

}/*  */


/* SALON ANNEX SEC ================== */
.salon_annex_sec{
  position: relative;
  padding: 4em 0;
  background-color: #e8e2dc;
}

.salon_annex_img {
  /* width: calc(100% + 4em);
  margin-left: -2em; */
  padding: 1.5em 0;
}
.salon_annex_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.salon_annex_ttl {
  width: 9.5em;
  margin: 0 auto .8em;
}
.salon_annex_txt_wrap{
  padding: 1em 0 2em;
}
.salon_annex_copy{
  font-size: 1.6em;
  line-height: 1.8em;
  padding: .7em 0;
}
.salon_annex_desc{
  font-size: 1.1em;
  line-height: 1.8em;
  padding: 1em 0;
}
.salon_annex_desc p{
  padding: .3em 0;
}

.salon_annex_banner{
  background-color: #fff;
  padding: .8em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1em;
  /* border-radius: .3em; */
}
.salon_annex_banner_img{
  width: 11em;
  aspect-ratio: 5 / 4;
}
.salon_annex_banner_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.salon_annex_banner_txt{
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .03em;
  color: #000;
}
.salon_annex_banner_wrap{
  margin-top: 3.5em;
}
@media (min-width: 769px) {
  /* .salon_annex_sec{
    padding-top: 0;
  } */
  .salon_annex_img{
    padding: 0;
    aspect-ratio: 3 / 1;
  }
  .salon_annex_inner{
    padding: 2em 3em 0;
    display: flex;
    justify-content: space-between;
  }
  .salon_annex_txt_wrap{
    width: 50%;
  }
  .salon_annex_ttl {
    width: 11em;
    margin: 0 auto 1.8em ;
  }
  .salon_annex_copy{
    font-size: 1.7em;
    text-align: left;
    margin-top: .8em;
  }
  /* .salon_annex_desc {
    font-size: .95em;
  } */
  .salon_annex_banner_wrap{
    display: flex;
    justify-content: space-between;
    gap: 0.3em;
  }
}/*  */


/* salon_coffee_sec ================= */
.salon_sec_bloc{
  position: relative;
  z-index: 1;
  margin-bottom: 1em;
}
.salon_sec_bloc::before{
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 86%;
  height: 85em;
  background-color: var(--c-salon-green);
  background: linear-gradient(-20deg, rgb(255 255 255) 20%, rgb(241 244 238));
}
/* .salon_coffee_sec::before{
  background-color: var(--c-salon-brown);
} */
/* .salon_coffee_sec{
  background-color: #F9F7F4;
} */
.salon_floor_ttl{
  font-size: 1em;
  padding: 1em 0;
}
.salon_floor_ttl > span{
  display: block;
}
.salon_floor_ttl ._floor {
  font-family: var(--font-serif);
  font-size: 2.3em;
  font-weight: 500;
  padding-left: .1em;
  margin-bottom: .3em;
  color: var(--c-gold);
}
.salon_floor_ttl ._ttl {
  font-family: var(--font-serif);
  font-size: 3.2em;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
  white-space: nowrap;
}
._floor .small3 {
  vertical-align: .15em;
}

/* SALON SLIDER */
.salon_floor_slider_wrap{
  position: relative;
  padding: 1.5em 0;
}
.salon_floor_slider_img{
  width: 100%;
  aspect-ratio: 3/2;
}

.salon_floor_copy {
  font-family: var(--font-serif);
  font-size: 1.3em;
  font-weight: 500;
  padding: .5em 0;
  line-height: 1.7;
  letter-spacing: .03em;
}
.salon_floor_desc {
  font-size: 1.1em;
  line-height: 2;
  /* padding-left: 1.8em; */
  margin: .5em 0;
}
.salon_floor_desc p{
  padding: .3em 0;
}
.desc_sado_logo{
  display: block;
  width: 8em;
  padding: 1.5em 0;
}

@media (min-width: 769px) {
  .salon_sec_bloc::before {
    width: 63%;
    height: 77em;
  }
  .salon_copy_pc_flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1.5em 0;
  }
  .salon_floor_copy{
    /* width: 50%; */
    font-size: 1.8em;
  }
  .salon_floor_desc{
    width: 41%;
    font-size: 1.25em;
  }
  .salon_floor_ttl {
    font-size: 1.3em;
    padding: .6em 0;
    margin-bottom: .5em;
  }
  .desc_sado_logo {
    margin-top: -.4em;
  }
  .salon_floor_slider_wrap{
    padding: 1.5em var(--inn-w);
  }
  #school .salon_floor_slider_wrap{
    width: 54%;
    padding: 0;
    margin: 0;
  }
  /* #school .salon_floor_slider_img{
    aspect-ratio: 2.8 / 1;
  } */
  #school .salon_floor_slider_img img{
    object-position: bottom;
  }

}/*  */


/* salon_coffee_sec ================= */

.salon_chikusuian_sec{
  background-color: #F1F4ED;
}

/* salon_kamakura_sec ================= */
.salon_kamakura_sec{
  position: relative;
  /* background-color: var(--c-green); */
  background-image: url(/imgs/chikusuian_garden_01.jpg);
  background-size: cover;
  background-position: center right -6em;
  padding: 1.6em;
  margin-bottom: 2em;
}
.salon_kamakura_sec::before {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #011801;
  z-index: 1;
  mix-blend-mode: multiply;
  opacity: .7;
}
.salon_kamakura_inner{
  position: relative;
  background-color: #fff;
  padding: 2em;
  z-index: 5;
}
.salon_kamakura_label{
  position: relative;
  font-family: var(--font-serif);
  font-size: 1.2em;
  font-weight: 400;
  color: var(--c-gold);
  padding-left: .5em;
  margin: 1em 0 2em;
}
.salon_kamakura_label::before{
  content: "";
  position: absolute;
  left: -2em;
  top: 0;
  bottom: 0;
  margin: auto;
  display: block;
  width: 2.2em;
  height: 1px;
  background-color: currentColor;
}
.salon_kamakura_logo{
  width: 10em;
  margin-bottom: 1em;
}

.salon_kamakura_img{
  margin: 1em 0;
}
.salon_kamakura_copy {
  font-family: var(--font-serif);
  font-size: 1.7em;
  font-weight: 500;
  padding: .5em 0;
  line-height: 1.7;
}
.salon_kamakura_desc{
  font-size: 1em;
  line-height: 1.8;
  padding: .5em 0;
}
.salon_kamakura_desc p{
  padding: .3em 0;
}

@media (min-width: 769px) {

  .salon_school_sec {
    margin-bottom: 6em;
  }
  .salon_coffee_sec .menu_step_pc_flex{
    padding-bottom: 0;
  }

  .salon_kamakura_sec {
    width: calc(100% - 10em);
    padding: 3em;
    background-position: center;
  }
  .salon_kamakura_inner {
    padding: 3em 3.5em;
  }
  .salon_kamakura_label {
    margin: .5em 0 2em;
  }
  .salon_kamakura_label::before {
    left: -3em;
    width: 3.2em;
  }
  .salon_kamakura_img{
    top: 0;
    right: 0;
    position: absolute;
    width: 50%;
    height: 100%;
    padding: 4em 4em;
    margin: 0;
  }
  .salon_kamakura_detail_wrap{
    width: 50%;
  }
  .salon_kamakura_logo {
    width: 14em;
  }
  .salon_kamakura_copy {
    font-size: 1.7em;
  }
}/*  */


/* EX PLAN ================*/
.ex_plan_num{
  position: relative;
  font-size: 1.2em;
  font-weight: 500;
  color: var(--c-gold);
  margin-bottom: .5em;
}
.ex_plan_num::before{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  content: "";
  display: block;
  width: calc(100% - 5em);
  height: 1px;
  background-color: var(--c-gold);
}

.ex_plan_list{
  padding: .5em 0;
}
.ex_plan_list_box{
  padding: 2em 0;
}
.ex_plan_list_box:last-child {
  border-bottom: 1px solid var(--c-gold);
  padding-bottom: 3em;
  margin-bottom: 2em;
}
.ex_plan_ttl{
  font-family: var(--font-serif);
  font-size: 1em;
  padding: 1em 0;
}
.ex_plan_img_wrap {
  margin: .7em 0;
}
.ex_plan_ttl .copy{
  display: block;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.6;
}
.ex_plan_ttl .ttl{
  font-size: 2.7em;
  font-weight: 500;
}
.ex_plan_ttl .sub{
  display: block;
  font-size: 1.1em;
  margin-top: .2em;
}

.link-branch a {
  position: relative;
  display: block;
  font-family: var(--font-serif);
  font-size: 1.4em;
  padding: 1.1em 1em;
  line-height: 1.4;
  transition: opacity .5s;
  color: #fff;
  font-weight: 500;
  background: var(--c-gold);
  text-align: center;
}

@media (min-width: 769px) {
  .ex_plan_pc_flex{
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
  }
  /* .ex_plan_list_box:first-child .ex_plan_pc_flex{ 
    align-items: flex-end;
    margin-top: -9.5em;
  } */
  .ex_plan_list_box:last-child {
    padding-bottom: 5em;
  }
  .ex_plan_list_box:last-child .ex_plan_pc_flex{ 
    margin-top: 1em;
  }
  .ex_plan_list_box_inner{
    padding: 0 7em;
  }
  .ex_plan_img_wrap{
    width: 52%;
    margin: 0;
  }
  .ex_plan_txt_wrap{
    width: 42%;
  }
  .ex_plan_ttl {
    font-size: 1.2em;
  }
  .ex_plan_num {
    margin-bottom: 1em;
  }
  .ex_plan_ttl .sub{
    display: inline-block;
  }
  .ex_plan_txt_wrap .sec_desc{
    padding-top: 0;
  }
}/*  */


/* ROOM DETAIL ============= */
.room_detail_list_block{
  padding: 1em 0;
}
.room_detail_list{
  display: flex;
  gap: .8em;
  font-size: 1.05em;
  padding: 1.2em 0;
  border-bottom: 1px solid var(--c-grey);
}
.room_detail_list:first-child{
  border-top: 1px solid var(--c-grey);
}
.room_detail_list dt{
  font-size: 1em;
  /* font-weight: 600; */
  line-height: 2.2;
  min-width: 4.5em;
  color: var(--c-black-3);
}
.room_detail_list dd{
  letter-spacing: .02em;
  line-height: 1.9;
}
@media (min-width: 769px) {
  .room_list {
    padding: 5em 0 ;
  }
  .room_list_box{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: calc(100% + 5em);
    padding: 4em 0 6em;
  }
  .room_list_box:last-child{
    padding-bottom: 1em;
  }
  .room_list_box:nth-child(odd){
    flex-direction: row-reverse;
    margin-left: -5em;
  }
  .room_list_detail_wrap{
    width: 35%;
  }
  .room_list_img_box,
  .room_list_img_wrap{
    width: 62%;
    margin: 0;
  }
  .room_list_img_wrap{
    aspect-ratio: 3 / 2;
  }
  .room_list_ttl {
    font-size: 1.2em;
    padding-top: 0;
  }
  .room_desc {
    font-size: 1em;
  }
  .room_detail_list{
    flex-direction: row;
    gap: 2%;
    font-size: .9em;
  }
  .room_detail_list dt{
    width: 18%;
    min-width: 9em;
  }
  .room_detail_list dd{
    width: 80%;
  }
  .room_detail_list_block.column2{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .room_detail_list_block.column2 .room_detail_list{
    width: 48%;
  }
  .room_detail_list_block.column2 .room_detail_list:nth-child(2) {
    border-top: 1px solid var(--c-grey-l);
  }
  .room_detail_pc_flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5%;
    max-width: 66em;
    margin: 3em auto 6em;
  }
  .room_detail_box{
    width: 32%;
  }
  /* .room_detail_list_block{
    padding-bottom: 0;
  } */

}/*  */


/* menu_step ============================ */
.rec_menu_sec {
  padding: 4em 0;
}
.menu_step_pc_flex{
  padding: 3em 0 0;
}
.menu_step_list{
  padding: .5em 0 1em;
}
.menu_step_list_box{
  position: relative;
  padding: 2em 1em ;
  border-bottom: 1px solid var(--c-grey)  ;
}
.menu_step_list_box:first-child{
  border-top: 1px solid var(--c-grey)  ;
}


.menu_step_list_num{
  position: relative;
  display: block;
  font-size: 1.5em;
  color: var(--c-gold);
  margin-bottom: .4em;
}
.menu_step_list_ttl{
  font-size: 1em;
  padding: .5em 0;
}

.step_wrap {
  display: flex;
  gap: 1em;
  font-family: var(--font-en);
  font-size: 1.2em;
  font-weight: 500;
  margin-bottom: .7em;
  color: var(--c-gold);
}
.menu_step_list_ttl .ja{
  font-family: var(--font-serif);
  font-size: 2.1em;
  font-weight: 500;
}
.menu_step_list_img{
  margin: 1em 0 0;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.menu_step_list_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menu_step_txt {
  font-size: 1.1em;
  font-weight: 400;
  line-height: 1.7;
  padding: .5em 0;
}
.menu_step_txt p {
  padding: .3em 0;
}

@media (min-width:769px){
  .rec_menu_sec {
    padding: 5em 0;
  }
  /* .menu_step_pc_flex{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  } */
  .menu_step_list_num {
    width: 100%;
    font-size: 1.8em;
    /* margin-top: -.75em; */
    margin-bottom: 1em;
  }
  /* .menu_step_wrap {
    width: 90%;
    margin-left: auto;
  } */
  .menu_step_pc_flex {
    padding: 3em 0 1.5em;
  }
  .menu_step_list_ttl {
    font-size: 1.1em;
  }
  .menu_step_list_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2em 3em;
  }
  .menu_step_list_detail_box{
    width: 45%;
    margin-bottom: .5em;
  }
  .menu_step_txt {
    font-size: 1.2em;
  }
  .menu_step_list_img{
    width: 48%;
  }
}/*  */


/* =================================
Custom Matcha Latte /salon/custom/
================================= */
body[data-page="custum_matcha_latte"]{
  color: #003529;
}

/* custom matcha keyvis ============= */

.custom_kv_slider{
  opacity: 0;
  transition: opacity .5s;
}
.custom_kv_slider.slick-initialized {
  opacity: 1;
}

.slide-animation{
  animation: fadezoom 8000ms 0s forwards;
}
@keyframes fadezoom {
  0%   { transform: scale(1.1);}
  100% { transform: scale(1); }
}

.custom_matcha_kv{
  position: relative;
}
.custom_matcha_kv_ttl_block{
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 2em;
  padding: 0 1.2em;
}
.custom_matcha_kv_logo{
  width: 13em;
  margin-bottom: 1.5em;
}
.custom_matcha_kv_ttl{
  font-size: 1em;
}
.custom_matcha_kv_ttl .serif{
  display: block;
}
.custom_matcha_kv_ttl ._line1{
  display: block;
  font-size: 4.3em;
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin-bottom: .1em;
}
.custom_matcha_kv_ttl ._line2{
  display: block;
  font-size: 1.6em;
}
.custom_matcha_kv_price{
  position: absolute;
  right: 1em;
  bottom: .2em;
  width: fit-content;
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1;
  padding: .5em 1em;
  border-radius: 1.275em;
  color: var(--c-white);
  background-color: var(--c-matcha);
}

@media (min-width:769px){
  .custom_matcha_kv_ttl_block {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: fit-content;
    padding: 5vw 0 0 6.5vw;
  }
  .custom_matcha_kv_logo {
    width: 14vw;
  }
  .custom_matcha_kv_ttl ._line1 {
    font-size: 5.9vw;
  }
  .custom_matcha_kv_ttl ._line2 {
    font-size: 1.7vw;
  }
  .custom_matcha_kv_price {
    position: initial;
    font-size: 1.4vw;
    margin-top: 1em;
  }

}/*  */


/* custom_flow_sec ============= */

.custom_flow_sec{
  font-family: var(--font-serif);
  padding: 6em 0;
  overflow: hidden;
}
.custom_flow_sec .sec_ttl .en {
  display: block;
  font-size: 3.5em;
  line-height: 1.1;
  margin-bottom: .1em;
}

/* flow list ============= */
/* .custom_flow_list{
  padding: 2em 0;
} */
.custom_flow_list_box{
  position: relative;
  padding: 1.2em 0 4.2em;
}
.custom_flow_list_box::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
  width: 4em;
  height: 3em;
  background-image: url(/imgs/icon_arrow_down_green.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.custom_flow_ttl_box{
  position: relative;
  padding: 0 0 1em;
  z-index: 1;
}
.custom_flow_cloud {
  position: absolute;
  right: -5em;
  top: 5em;
  z-index: -1;
  width: 14em;
}
.custom_flow_cloud img{
  mix-blend-mode: difference;
  opacity: .5;
}

.custom_flow_ttl{
  font-size: 3.3em;
  font-weight: 400;
}
.custom_flow_desc{
  font-size: 1.1em;
  padding-left: 2.3em;
  color: var(--c-black4);
}

/* custom matcha list */
.custom_matcha_list{
  border-radius: .8em;
  /* margin: 2em 0; */
}
.custom_matcha_list_box{
  padding: 1.5em;
  background-color: #fff;
  border-radius: .8em;
  margin: 1.5em 0;
}
@media (max-width:768px){
  .custom_matcha_list_box,
  .custom_topping_list_box{
    animation-delay: initial;
  }
}
.custom_matcha_list_header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.3em;
  border-bottom: 1px solid var(--c-matcha);
  margin-bottom: 1.3em;
}
.custom_matcha_tea_icon{
  display: block;
  width: 21%;
  aspect-ratio: 5/6;
  mask-position: center center;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-image: url(/imgs/icon_tea_leaf.svg);
  background-color: #9BCB60;
}
.m_2{ background-color: #64A531; }
.m_3{ background-color: #32833A; }

.custom_matcha_tea_detail{
  width: 72%;
}
.custom_matcha_tea_detail h4{
  font-size: 2.8em;
  font-weight: 300;
  letter-spacing: .05em;
}
.custom_matcha_tea_detail p{
  font-family: var(--font-ja);
  font-size: 1.05em;
}

.custom_matcha_data_list{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 1.12em;
}
.custom_matcha_data_list_box{
  display: flex;
  justify-content: flex-start;
  gap: .5em;
  padding: .3em 0;
}
.custom_matcha_data_list_box:nth-child(odd){
  width: 42%;
}
.custom_matcha_data_list_box:nth-child(even){
  width: 50.5%;
}
.custom_matcha_data_list_box:nth-child(even) dt{
  width: 4em;
}
.custom_matcha_data_list_box dd{
  width: 6.4em;
  display: block;
  background-image: url(/imgs/icon_data_tea_leaf.svg);
  background-repeat: repeat-x;
  background-size: calc(6.4em / 5);
  background-position: center left;
}
.l_1{  width: calc(6.4em / 5) !important;}
.l_2{  width: calc(6.4em / 5 * 2) !important;}
.l_3{  width: calc(6.4em / 5 * 3) !important;}
.l_4{  width: calc(6.4em / 5 * 4) !important;}

@media (min-width:769px){
  .custom_flow_sec .sec_ttl {
    font-size: 1.4em;
    padding: 2.5em 0;
  }

  .custom_matcha_list {
    display: flex;
    flex-wrap: wrap;
    gap: 4%;
    font-size: 1.1em;
  }
  .custom_matcha_list_box{
    width: 48%;
  }

  .custom_matcha_tea_detail h4 {
    font-size: 3.2em;
  }
  .custom_matcha_data_list_box dd{
    width: 7.4em;
    background-size: calc(7.4em / 5);
  }
  .l_1{  width: calc(7.4em / 5) !important;}
  .l_2{  width: calc(7.4em / 5 * 2) !important;}
  .l_3{  width: calc(7.4em / 5 * 3) !important;}
  .l_4{  width: calc(7.4em / 5 * 4) !important;}

}/*  */


/* custom_topping_list ================ */
.custom_topping_list_box {
  display: flex;
  align-items: center;
  gap: 1em;
  width: 100%;
  padding: 1.2em 1.2em;
  background-color: #fff;
  border-radius: .8em;
  margin: 1.1em 0;
}

.custom_topping_img{
  width: 4.5em;
  aspect-ratio: 1/1;
  background-image: url(/imgs/icon_matcha_topping.svg);
  background-size: 100%;
}
.t_2{ background-position: 0 9.090909%;}
.t_3{ background-position: 0 18.181818%;}
.t_4{ background-position: 0 27.272727%;}
.t_5{ background-position: 0 36.363636%;}
.t_6{ background-position: 0 45.454545%;}
.t_7{ background-position: 0 54.545454%;}
.t_8{ background-position: 0 63.636363%;}
.t_9{ background-position: 0 72.727272%;}
.t_10{ background-position: 0 81.818181%;}
.t_11{ background-position: 0 90.90909%;}
.t_12{ background-position: 0 100%;}

.custom_topping_ttl{
  font-size: 1.8em;
  font-weight: 600;
}
.custom_topping_price{
  background-color: var(--c-matcha);
  color: var(--c-white);
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1;
  padding: .5em 1em;
  border-radius: 1.275em;
  margin-left: auto;
}

@media (min-width:769px){

  .custom_flow_list_box:nth-child(2) .custom_topping_list{
    gap: 3em;
  }
  .custom_flow_list_box {
    padding: 2em 0 4.5em;
  }
  .custom_flow_ttl_box {
    display: flex;
    align-items: flex-end;
    font-size: 1.3em;
    letter-spacing: .1em;
    padding: 0 0 1.2em;
  }
  .custom_flow_ttl {
    line-height: 1;
  }
  .custom_flow_cloud {
    right: -9em;
    top: -1em;
    width: 14em;
  }

  .custom_topping_list {
    display: flex;
    gap: 1.5em;
  }
  .custom_topping_list_box {
    flex-direction: column;
    justify-content: center;
    gap: 0.3em;
    padding: 1.5em 1.2em;
  }
  .custom_flow_list_box:last-child {
    padding-bottom: 7.5em;
  }
  .custom_topping_ttl .small5{
    position: absolute;
    bottom: -4em;
  }
  .custom_topping_img {
    width: 7em;
    margin: .5em 0;
  }
  .custom_topping_price {
    position: absolute;
    bottom: -1.1em;
    font-size: 1.3em;
  }
}/*  */


/* custom_flow_finish_block ========== */
.custom_flow_finish_block{
  position: relative;
  padding: 2em 0 0;
}
.custom_flow_finish_txt {
  font-size: 1.8em;
  font-weight: 600;
  text-align: center;
  margin: 1em 0 ;
}
.custom_flow_img{
  position: relative;
}
.custom_flow_finish_cloud {
  position: absolute;
  right: -5em;
  top: -2em;
  width: 14em;
}
.custom_flow_finish_cloud img{
  mix-blend-mode: difference;
  opacity: .5;
}
.custom_flow_finish_cloud._b{
  width: 12em;
  right: initial;
  top: initial;
  left: -5em;
  bottom: -.5em;
}
.custom_flow_finish_cloud._b img{
  transform: scale(-1, 1);
}

@media (min-width:769px){

  .custom_flow_finish_block {
    width: 55%;
    padding: 3em 0 0;
    margin: auto;
  }
  .custom_flow_finish_txt {
    font-size: 2.3em;
  }
}/*  */