@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,
.tag-sakae,
.tag-namba,
.tag-fabs,
.tag-hakata,
.tag-umeda,
.tag-mizoguchi {
  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: 'ラシック栄';
}

.tag-namba:before {
  content: 'なんばマルイ店';
}

.tag-fabs:before {
  content: 'FABS';
}

.tag-hakata:before {
  content: '博多阪急店';
}
.tag-umeda:before {
  content: '阪神梅田店';
}

.tag-mizoguchi: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 * 16px * 2);
  }

  #line-up .section-inner .product-wrapper .category-wrapper > ul > li dl dt p {
    font-size: 16px;

    line-height: 2em;
  }

  #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,
  .tag-sakae,
  .tag-namba,
  .tag-fabs,
  .tag-hakata,
  .tag-umeda,
  .tag-mizoguchi {
    font-size: 10px;
  }

  .tag-yurakucho,
  .tag-shinjuku,
  .tag-sakae,
  .tag-namba,
  .tag-fabs,
  .tag-hakata,
  .tag-umeda,
  .tag-mizoguchi {
    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↑↑↑ */