@charset "UTF-8";

/* ===========================
NOA COFFEE - CHIKUSUIAN -
=========================== */
.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_top_img_wrap{
  display: flex;
  width: 100%;
  aspect-ratio: 3/2;
}
.ncc_top_img_wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
} */
.ncc_copy_wrap{
  position: relative;
  padding: 4em 0;
}
.ncc_copy {
  font-size: 1.9em;
  font-weight: 400;
  padding: .5em 0;
  letter-spacing: .03em;
}
.ncc_top_desc{
  font-size: 1.25em;
  padding: .5em 0;
  letter-spacing: .03em;
}
.ncc_top_desc p{
  padding: .5em 0;
}

.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: 70%;
  margin-right: 2.5em;
  margin-left: auto;
}
.ncc_copy_img_wrap.left .ncc_copy_img:last-child{
  width: 48%;
  margin-top: -3.5em;
}

.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: 48%;
  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;
}

@media (min-width:769px){
  .ncc_top_img_wrap {
    width: 100%;
    aspect-ratio: 5/3;
    max-width: 70em;
  }
  .ncc_top_img_wrap * {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ncc_ttl {
    font-size: 1.3rem;
    margin: 2em auto 2em;
  }
  .ncc_copy_wrap {
    padding: 6em 0;
  }
  .ncc_copy {
    font-size: 2.4em;
  }
  .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: 86%;
    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: 11em;
  }
  .ncc_copy_img_wrap.right .ncc_copy_img:first-child {
    width: 65%;
    margin: 0;
  }
 .ncc_copy_img_wrap.right .ncc_copy_img:nth-child(2) {
    width: 56%;
    margin-left: auto;
    margin-top: -6em;
  }
 .ncc_copy_img_wrap.right .ncc_copy_img:last-child {
    width: 44%;
    margin: 6em auto 0 5em;
  }

  .ncc_top_desc {
    font-size: 1.4em;
    line-height: 1.8;
  }
}/*  */


/* STORE BLOCK ================= */
.ncc_store_block {
  margin-top: 4em;
}
.ncc_floors {
  font-size: 4em;
  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%;
}
.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: 2.7em;
  font-weight: 500;
  margin: .5em 0;
}
.ncc_store_desc {
  font-size: 1.3em;
  line-height: 2;
  margin: 1.5em 0 0;
}
@media (min-width:769px){
  .ncc_store_block:last-of-type{
    margin-bottom: 7em;
  }
  .ncc_floors {
    font-size: 5.2em;
  }
  .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;
    /* padding: 0 5em; */
  }
  .ncc_store_flex:first-of-type{
    margin-bottom: 3em;
  }
  .ncc_store_img_wrap{
    width: 61%;
    margin-left: 0;
  }
  .ncc_store_desc_wrap {
    width: 34%;
    padding: 0;
  }
  .ncc_store_sub {
    font-size: 3em;
  }
  .ncc_store_desc {
    font-size: 1.25em;
    line-height: 2.1;
    margin-bottom: 0;
  }
}/*  */


.bg_circle{
  position: fixed;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 60em;
  opacity: .4;
  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{
  max-width: 80em;
  margin: 0 auto;
}

.access_iframe_box {
  width: 100%;
  aspect-ratio: 3/2;
  margin-bottom: 3em;
}
.access iframe{
  width: 100%;
  height: 100%;
}

.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;
}
/* .access_detailsWrapper{
  overflow: hidden;
} */
.accessAddress,.accessTime,.accessTel,.accessRoute{
  font-size: 1.15em;
  line-height: 1.7;
  letter-spacing: .02em;
  margin-bottom: 1em;
}
.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){
  .access_pc_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .access_iframe_box {
    width: 58%;
    margin-bottom: 0;
  }
  .access_details{
    width: 36%;
    margin: 0;
  }
}/*  */



/* =========================================
/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_box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 40em;
  margin: 0 0 1px;
  color: #fff;
  background-size: cover;
  z-index: 1;
}
.access_list_bg{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.access_list_bg::before{
  position: absolute;
  top: 0;left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000;
  mix-blend-mode: multiply;
  opacity: .35;
}
.access_list_bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* .access_list_box.harajuku {
  background-image: url("/img/05_access/access_top_harajuku.jpg");
} */
/* .access_list_box.ginza {
  background-image: url("/img/05_access/access_top_ginza.jpg");
}
.access_list_box.gelato {
  background-image: url("/img/gelato_thum.jpg")
}
.access_list_box.salon {
  background-image: url("/img/matcha_thum.jpg")
} */

.access_list_logo {
  width: 18em;
  padding: 2em 0;
  margin: 0 auto;
}
.access_list_logo .ja{
  display: block;
  font-size: 1.1em;
  padding: 1em 0 .7em;
}

.accessLink {
  display: block;
  box-sizing: border-box;
  width: 68%;
  /* min-width: 16em; */
  font-size: 1.4em;
  padding: .9em 0;
  border: 1px solid #fff;
  margin: 0 auto 1em;
  color: #fff;
}


@media (min-width: 769px){
  .access_list_logo img {
    height: 4.5em;
  }
  .access_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .access_list_box{
    width: calc(50% - .5px);
    height: 28em;
  }
  .accessLinkWrapper {
    display: flex;
    justify-content: space-between;
    width: 70%;
    margin: 0 auto;
  }
  .accessLink {
    width: 46%;
    font-size: 1.1em;
  }
  .access_list_logo .ja {
    font-size: 1em;
  }
} /*  */