@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600&display=swap');

main.fs-l-main{

  display: block;

  width: 100%;

  max-width: unset;

  padding: 0;

  margin: auto;

}

section.fs-l-pageMain{

  position: relative;

  max-width: 1700px;

  margin: auto;

}

main.fs-l-main section.fs-l-pageMain img{

  width: unset;

  height: unset;

}

*{

  font-family: "Noto Sans JP", serif;

  font-optical-sizing: auto;

  font-weight: 400;

  letter-spacing: 0.3em;

  text-align: center;

  font-style: normal;

  color: #595757;

}

.nonScroll{

  overflow: hidden;

}

.modal-wrapper{

  display: none;

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  z-index: 3;

}

.modal-wrapper.active{

  display: block;

}

.modal-wrapper .modal-bg{

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background: rgba(0, 0, 0, 0.3);

}

.modal-wrapper .modal{

  position: relative;

  width: calc(100% - 40px);

  height: calc(100% - 40px);

  margin: auto;

  pointer-events: none;

}

.modal-wrapper .modal button.close{

  position: absolute;

  top: 20px;

  right: 0;

  width: 40px;

  height: 40px;

  background: #666;

  font-size: 20px;

  font-weight: 700;

  letter-spacing: 0;

  text-align: center;

  line-height: 40px;

  color: #fff;

  pointer-events: auto;

}

.modal-wrapper .modal .modal-inner{

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translate(-50%, 0);

  width: 100%;

  height: calc(100% - 70px);

  background: #FFF;

  overflow-x: hidden;

  overflow-y: scroll;

  pointer-events: auto;

}

header{

  box-shadow: none;

  position: absolute;

  width: 100%;

  height: 100%;

  z-index: 3;

  pointer-events: none;

  overflow: hidden;

}

header.active{

  background: rgba(255, 255, 255, 0.3);

  transition: background 0.5s;

}

header button.menu-button{

  position: absolute;

  top: 20px;

  right: 20px;

  z-index: 4;

  width: 35px;

  height: 25px;

  pointer-events: auto;

}

header button.menu-button span{

  position: absolute;

  display: block;

  width: 100%;

  height: 2px;

  border-radius: 2px;

  background: #FFF;

  box-shadow: rgba(163, 211, 232, 1) 0px 0px 3px 0px;

  transition: transform 0.3s;

}

header button.menu-button span:nth-of-type(1){

  top: 0;

}

header button.menu-button span:nth-of-type(2){

  top: 50%;

  transform: translate(0, -50%);

}

header button.menu-button span:nth-of-type(3){

  bottom: 0;

}

header.active button.menu-button span{

  top: 50%;

  bottom: auto;

}

header.active button.menu-button span:nth-of-type(1){

  transform: translate(0, -50%) rotate(35deg);

}

header.active button.menu-button span:nth-of-type(2){

  display: none;

}

header.active button.menu-button span:nth-of-type(3){

  transform: translate(0, -50%) rotate(-35deg);

}

header nav{

  position: absolute;

  top: 0;

  right: -100%;

  width: 100%;

  height: 100%;

  background: rgba(59, 169, 172, 0.5);

  pointer-events: auto;

  transition: right 0.5s;

}

header.active nav{

  right: 0;

}

header nav ul{

  display: inline-block;

  margin-top: 80px;

}

header nav ul li{

  max-width: 150px;

}

header nav ul li + li{

  margin-top: 30px;

}

#slider{

  position: relative;

}

#slider h1{

  position: absolute;

  left: 0;

  right: 0;

  margin: auto;

  z-index: 2;

  pointer-events: none;

}

#slider .swiper .swiper-pagination{

  bottom: 3%;

}

#slider .swiper .swiper-pagination .swiper-pagination-bullet{

  width: 6px;

  height: 6px;

  background: #FFF;

  opacity: 0.5;

  box-shadow: rgba(135, 170, 167, 0.75) 0px 0px 5px 0px;

  margin: 0 12px;

}

#slider .swiper .swiper-pagination .swiper-pagination-bullet-active{

  background: #FFF;

  opacity: 1;

}

#about{

  padding-top: 22%;

  padding-bottom: 15%;

}

#about .text-area{

  display: inline-block;

  min-width: 315px;

  margin: auto;

}

#about .text-area h2{

  font-size: 19px;

  font-weight: 700;

  letter-spacing: 0.4em;

  text-align: left;

  margin-bottom: 12%;

}

#about .text-area p{

  font-size: 10px;

  line-height: 2.5;

  text-align: left;

}

#about .text-area p + p{

  margin-top: 9%;

}

#about .img-area{

  width: min-content;

  min-width: 315px;

  margin: auto;

  margin-top: 16%;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 55px;

}

#about .img-area > img{

  width: 57%;

}

#about .img-area ul{

  width: 43%;

  display: flex;

  flex-wrap: wrap;

  column-gap: 35px;

  row-gap: 10px;

}

#about .img-area ul li{

  width: calc((100% - 35px) / 2);

}

#line-up{

  background: #F7F7F7;

  padding-top: 15%;

  padding-bottom: 25%;

}

#line-up h2{

  margin-bottom: 8%;

}

section h2 img{

  width: auto;

  max-height: 19px;

}

#line-up p{

  font-size: 14px;

}

#line-up .section-inner{

  width: 90%;

  margin: auto;

  margin-top: 13%;

}

#line-up .section-inner ul.tab-button{

  display: flex;

  align-items: center;

  column-gap: 5px;

}

#line-up .section-inner ul.tab-button li{

  width: calc(100% / 3);

  padding: 6% 0 4% 0;

  box-shadow: rgba(244, 244, 244, 0.75) 6px 6px 4px 0px;

  cursor: pointer;

}

#line-up .section-inner ul.tab-button li:nth-of-type(1){

  background: #FFF;

}

#line-up .section-inner ul.tab-button li:nth-of-type(2){

  background: #DAEDEC;

}

#line-up .section-inner ul.tab-button li:nth-of-type(3){

  background: #E9F4F4;

}

#line-up .section-inner ul.tab-button li:nth-of-type(4){

  background: #e4efef;

}

#line-up .section-inner ul.tab-button li p{

  font-size: 0;

}

#line-up .section-inner ul.tab-button li p img{

  display: block;

  margin: auto;

}

#line-up .section-inner ul.tab-button li p img.en{

  max-width: 42px;

  margin-bottom: 5%;

}

#line-up .section-inner ul.tab-button li p img.jp{

  max-width: 65px;

}

#line-up .section-inner ul.tab-button li > img{

  width: auto;

  max-height: 38px;

  margin-top: 5%;

}

#line-up .section-inner .product-wrapper{

  position: relative;

  box-shadow: rgba(244, 244, 244, 0.75) 4px 4px 3px 0px;

}

#line-up .section-inner .product-wrapper .category-wrapper{

  display: none;

  padding: 10% 6%;

  position: relative;

}

#line-up .section-inner .product-wrapper .category-wrapper.active{

  display: block;

}

#line-up .section-inner .product-wrapper .category-wrapper.shoes-item{

  background: #FFF;

}

#line-up .section-inner .product-wrapper .category-wrapper.health-goods{

  background: #DAEDEC;

}

#line-up .section-inner .product-wrapper .category-wrapper.hair-care{

  background: #E9F4F4;

}

#line-up .section-inner .product-wrapper .category-wrapper.other{

  background: #e4efef;

}

#line-up .section-inner .product-wrapper .category-wrapper > ul{

  display: flex;

  flex-wrap: wrap;

  column-gap: 15px;

  row-gap: 30px;

}

#line-up .section-inner .product-wrapper .category-wrapper > ul.hide{

  padding-bottom: 10%;

}

#line-up .section-inner .product-wrapper .category-wrapper > ul > li{

  width: calc((100% - 15px) / 2);

  position: relative;

  text-align: left;

}

#line-up .section-inner .product-wrapper .category-wrapper > ul > li:nth-of-type(2n):not(:last-of-type)::after{

  content: "";

  position: absolute;

  bottom: -20px;

  left: calc(-100% - 25px);

  right: 0;

  display: block;

  width: calc(200% + 35px);

  height: 1px;

  background: #F7F7F7;

}

#line-up .section-inner .product-wrapper .category-wrapper > ul > li.sp-none{

  display: none;

}

#line-up .section-inner .product-wrapper .category-wrapper > ul > li dl dt{

  overflow: hidden;

  height: calc(1.5* 10px* 2);

  display: flex;

  align-items: end;

}

#line-up .section-inner .product-wrapper .category-wrapper > ul > li dl dt p{

  font-size: 10px;

  font-weight: 400;

  letter-spacing: 0.1em;

  text-align: left;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

}

#line-up .section-inner .product-wrapper .category-wrapper > ul > li dl dd{

  display: flex;

  justify-content: space-between;

  align-items: center;

}

#line-up .section-inner .product-wrapper .category-wrapper > ul > li dl dd p{

  font-size: 10px;

  letter-spacing: 0.1em;

}

#line-up .section-inner .product-wrapper .category-wrapper > ul > li dl dd button{

  max-width: 40%;

}

#line-up .section-inner .product-wrapper .category-wrapper .hideProduct{

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  margin: auto;

  background-image: linear-gradient(transparent 0%, #FFF 30%, #FFF 100%);

  padding: 25% 0 15% 0;

  pointer-events: none;

}

#line-up .section-inner .product-wrapper .category-wrapper .hideProduct button{

  pointer-events: auto;

}

#line-up .section-inner .product-wrapper .category-wrapper .hideProduct button img{

  width: auto;

  max-height: 40px;

}

#line-up .section-inner .product-wrapper .category-wrapper .out-of-stock_product {

  position: absolute;

  right: 4%;

  top: 5%;

  width: 28%;

}

#access{

  width: 75%;

  min-width: 315px;

  margin: auto;

  padding-top: 20%;

  padding-bottom: 5%;

}

#access h2,

#information h2{

  margin-bottom: 13%;

}

#access .section-inner h3{

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0.15em;

  line-height: 1.5;

  text-align: left;

  margin-top: 13%;

}

#access .section-inner h3 span{

  font-size: 14px;

  font-weight: 700;

}

#access .section-inner p{

  font-size: 10.5px;

  letter-spacing: 0.15em;

  line-height: 1.8;

  text-align: left;

  padding: 1.5% 0;

  border-bottom: solid 1px #727171;

}

#access .section-inner .text-area{

  margin-top: 7%;

}

#access .section-inner .text-area + .text-area{

  margin-top: 8px;

}

#access .section-inner .text-area dl{

  display: flex;

  column-gap: 13px;

}

#access .section-inner .text-area dl + dl{

  margin-top: 8px;

}

#access .section-inner .text-area dl dt{

  width: 16%;

  font-size: 8px;

  font-weight: 700;

  text-align-last: justify;

  color: #3BA9AC;

}

#access .section-inner .text-area dl dd{

  width: 84%;

  font-size: 9px;

  letter-spacing: 0.2em;

  text-align: left;

}

#access .section-inner .text-area dl dd a{

  text-decoration: underline;

  color: #3BA9AC;

}

#access .section-inner .text-area dl dd span{

  display: inline-block;

  font-size: 8px;

  line-height: 1.3;

  text-align: left;

}

#access .section-inner .text-area:nth-of-type(2) dl{

  display: initial;

}

#access .section-inner .text-area:nth-of-type(2) dl dt{

  width: unset;

  font-size: 9px;

  text-align-last: initial;

  text-align: left;

}

#access .section-inner .text-area:nth-of-type(2) dl dd{

  width: unset;

  font-size: 10px;

}

#access .section-inner:not(:last-of-type) {

  margin-bottom: 20%;

  }

#information{

  width: 75%;

  min-width: 315px;

  margin: auto;

  padding-top: 20%;

  padding-bottom: 20%;

}

#information ul li{

  box-shadow: rgba(232, 232, 232, 0.75) 3.5px 3.5px 7px 0px;

}

#information ul li + li{

  margin-top: 8%;

}

.store-tag {

  display: inline-flex;

  flex-wrap: wrap;

  gap: 3px;

  text-align: left;

  margin-bottom: 2%;

  justify-content: flex-start;

  align-items: center;

}

.tag-yurakucho, .tag-shinjuku {

  padding: 2px 8px;

  background: #76C3C5;

  color: #FFF;

  border-radius: 5px;

  font-size: 7px;

  letter-spacing: 0.1em;

  display: inline-block;

  white-space: nowrap;

}

.tag-yurakucho:before{/*疑似要素*/

content: '有楽町マルイ店';

}

.tag-shinjuku:before{/*疑似要素*/

content: '新宿マルイ店';

}

/* .tag-sakae:before {

    content: 'ラシック栄';

} */

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

  br.sp{

    display: none;

  }

  header{

    top: 0;

    right: 0;

    max-width: 450px;

  }

  header button.menu-button{

    top: 45px;

    right: 45px;

  }

  #slider .swiper .swiper-pagination .swiper-pagination-bullet{

    width: 8px;

    height: 8px;

    margin: 0 16px;

  }

  #about{

    padding-top: 110px;

    padding-bottom: 110px;

    width: 85%;

    max-width: 1200px;

    margin: auto;

    display: flex;

    justify-content: center;

    align-items: center;

    column-gap: 50px;

  }

  #about .text-area{

    width: auto;

    min-width: unset;

    margin: 0;

  }

  #about .text-area h2{

    margin-bottom: 40px;

  }

  #about .text-area p + p{

    margin-top: 20px;

  }

  #about .img-area{

    width: auto;

    min-width: unset;

    margin: 0;

    flex-flow: column;

    justify-content: space-between;

    align-items: normal;

  }

  #about .img-area > img{

    width: unset;

    max-width: 200px;

  }

  #about .img-area ul{

    width: unset;

    flex-wrap: nowrap;

    justify-content: space-between;

    column-gap: unset;

    row-gap: unset;

  }

  #about .img-area ul li{

    width: unset;

    max-width: 40px;

  }

  #line-up{

    padding-top: 110px;

    padding-bottom: 150px;

  }

  #line-up h2{

    margin-bottom: 50px;

  }

  #line-up .section-inner{

    max-width: 1330px;

    margin: auto;

    margin-top: 80px;

  }

  #line-up .section-inner ul.tab-button{

    column-gap: 15px;

  }

  #line-up .section-inner ul.tab-button li{

    padding: 20px 0 15px 0;

    display: flex;

    flex-direction: row-reverse;

    justify-content: center;

    align-items: center;

    column-gap: 15px;

  }

  #line-up .section-inner ul.tab-button li p{

    display: flex;

    flex-direction: column-reverse;

    align-items: center;

    row-gap: 8px;

  }

  #line-up .section-inner ul.tab-button li p img.en{

    margin: 0;

  }

  #line-up .section-inner ul.tab-button li > img{

    margin: 0;

  }

  #line-up .section-inner .product-wrapper .category-wrapper{

    padding: 50px 60px;

  }

  #line-up .section-inner .product-wrapper .category-wrapper > ul{

    column-gap: 45px;

    row-gap: 50px;

  }

  #line-up .section-inner .product-wrapper .category-wrapper > ul > li{

    width: calc((100% - 90px) / 3);

  }

  #line-up .section-inner .product-wrapper .category-wrapper > ul > li:nth-of-type(2n):not(:last-of-type)::after{

    content: none;

  }

  #line-up .section-inner .product-wrapper .category-wrapper > ul > li:nth-of-type(3n):not(:last-of-type)::after{

    content: "";

    position: absolute;

    bottom: -50px;

    left: calc(-200% - 110px);

    right: 0;

    display: block;

    width: calc(300% + 130px);

    height: 2px;

    background: #F7F7F7;

  }

  #line-up .section-inner .product-wrapper .category-wrapper > ul > li.pc-none{

    display: none;

  }

  #line-up .section-inner .product-wrapper .category-wrapper > ul > li dl dd p small{

    margin-left: 5px;

  }

  #line-up .section-inner .product-wrapper .category-wrapper .hideProduct{

    background-image: linear-gradient(transparent 0%, #FFF 40%, #FFF 100%);

  }

  #access{

    width: 85%;

    max-width: 1200px;

    padding-top: 140px;

    padding-bottom: 70px;

  }

  #access h2,

  #information h2{

    margin-bottom: 70px;

  }

  #access .section-inner{

    display: flex;

    justify-content: center;

    align-items: center;

    column-gap: 40px;

  }

  #access .section-inner h3{

    margin-top: 5%;

  }

   #access .section-inner p{

    padding: 4px 0;

  } 

  #access .section-inner .text-area{

    margin-top: 15px;

  }

  #access .section-inner .text-area dl{

    column-gap: 15px;

  }

  #information{

    width: 85%;

    max-width: 1200px;

    padding-top: 120px;

    padding-bottom: 200px;

  }

  #information ul li + li{

    margin-top: 60px;

  }

  footer{

    max-width: 1700px;

    margin: auto;

  }

}

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

  header button.menu-button{

    width: 40px;

    height: 30px;

  }

  header nav ul li{

    max-width: 270px;

  }

  header nav ul li + li{

    margin-top: 50px;

  }

  section h2 img{

    max-height: 30px;

  }

  #about .text-area h2{

    font-size: 26px;

    letter-spacing: 0.5em;

  }

  #about .text-area p{

    font-size: 13px;

    letter-spacing: 0.5em;

    line-height: 2.8;

  }

  #about .img-area > img{

    max-width: 280px;

  }

  #about .img-area ul li{

    max-width: 45px;

  }

  #line-up p{

    font-size: 20px;

  }

  #line-up .section-inner ul.tab-button li{

    column-gap: 10%;

  }

  #line-up .section-inner ul.tab-button li p img.en{

    max-width: 70px;

  }

  #line-up .section-inner ul.tab-button li p img.jp{

    max-width: 115px;

  }

  #line-up .section-inner ul.tab-button li > img{

    max-height: 45px;

    margin-left: 0px;

  }

  #line-up .section-inner .product-wrapper .category-wrapper > ul.hide{

    

  }

  #line-up .section-inner .product-wrapper .category-wrapper > ul > li dl dt{

    height: calc(2.0* 16px* 2);

  }

  #line-up .section-inner .product-wrapper .category-wrapper > ul > li dl dt p{

    font-size: 16px;

    line-height: 2.0em;

  }

  #line-up .section-inner .product-wrapper .category-wrapper > ul > li dl dd p{

    font-size: 16px;

  }

  #line-up .section-inner .product-wrapper .category-wrapper > ul > li dl dd p small{

    font-size: 12px;

  }

  #line-up .section-inner .product-wrapper .category-wrapper > ul > li dl dd button{

    max-width: 90px;

  }

  #line-up .section-inner .product-wrapper .category-wrapper .hideProduct{

    padding: 260px 0 200px 0;

  }

  #line-up .section-inner .product-wrapper .category-wrapper .hideProduct button img{

    max-height: unset;

    max-width: 200px;

  }

  #access .section-inner {

    display: grid!important;

    align-items: flex-start;

    column-gap: 40px;

    grid-template-columns: 1fr 1fr;

  }

  #access .section-inner h3{

    font-size: 18px;

    margin: 0;

  }

  #access .section-inner h3 span{

    font-size: 20px;

    letter-spacing: 0.2em;

  }

  #access .section-inner p{

    font-size: 14px;

  }

  #access .section-inner .text-area dl dt{

    width: 14%;

    font-size: 11px;

  }

  #access .section-inner .text-area dl dd{

    width: 86%;

    font-size: 12px;

  }

  #access .section-inner .text-area dl dd span{

    font-size: 10px;

  }

  #access .section-inner .text-area:nth-of-type(2) dl dt{

    font-size: 11.5px;

  }

  #access .section-inner .text-area:nth-of-type(2) dl dd{

    font-size: 12.5px;

  }

  #access .section-inner:not(:last-of-type) {

    margin-bottom: 8%;

  }

  .tag-yurakucho, .tag-shinjuku {

    font-size: 10px;

  }

  .tag-yurakucho,.tag-shinjuku {

    margin-right: 6px;

    padding: 5px 10px;

    background: #76C3C5;

    color: #FFF;

    border-radius: 8px;

    font-size: 10px;

    position: relative;

    letter-spacing: 0.1em;

  }

}



/* ↓↓↓モーダルの幅↓↓↓ */

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

  .modal-wrapper .modal{

    max-width: 375px;

  }

}

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

  .modal-wrapper .modal{

    max-width: 750px;

  }

}

/* ↑↑↑モーダルの幅↑↑↑ */



/* ↓↓↓モーダル内LPのswiper↓↓↓ */

.modal-wrapper .swiper-wrapper{

  margin: 0;

  padding: 0;

  list-style: none;

}

.modal-wrapper .swiper-slide{

  cursor: grab;

}

.modal-wrapper .swiper-slide:active{

  cursor: grabbing;

}

.modal-wrapper .swiper-button-next,

.modal-wrapper .swiper-button-prev{

  color: #666;

}

.modal-wrapper .swiper-pagination-bullet-active{

  background: #000;

}

.modal-wrapper .swiper-button-prev,

.modal-wrapper .swiper-container-rtl .swiper-button-next,

.modal-wrapper .swiper-button-next,

.modal-wrapper .swiper-container-rtl .swiper-button-prev{

  background-image: none;

}

/* （追加）swiperスタイル */

.modal-wrapper .slider_variation,

.modal-wrapper .fit_main-slider1,

.modal-wrapper .fit_main-slider2,

.modal-wrapper .fit_main-slider3,

.modal-wrapper .thumbnail_slider{

  position: relative;

  width: 100%;

  overflow-x: hidden;

}

.modal-wrapper .slider_uservoice{

  width: 80%;

  margin-inline: auto;

  overflow-x: hidden;

}

/* ↑↑↑モーダル内LPのswiper↑↑↑ */