@charset "utf-8";

/* ------------------------------------------------------
* Elements List
------------------------------------------------------ */
:root {
  --hover-opacity: 0.6;
  --transition: .5s;
  --north-color: #EE82B6;
  --north-bold-color: #DA5495;
  --south-color: #74C9A3;
  --south-bold-color: #3CB47F;
  --white-color: #fff;
  --font-color: #000;
  --leading-trim: calc((1em - 1lh) / 2);
}

@supports not (top: 1lh) {
  :root {
    --leading-trim: 0px;
  }
}

/* fix-nav
----- */
.fix-nav {
  position: fixed;
  right: 0;
  bottom: 50%;
  transform: translateY(-50%);
  z-index: 100;
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--transition);
  letter-spacing: 0.075em;
  line-height: calc(29/18);
}

.fix-nav.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.fix-nav__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 10px 16px 18px;
  background: #555;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: .05em;
  border-radius: 5px 0 0 5px;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid #fff;
  transition: background var(--transition), opacity var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .fix-nav__link:hover {
    background: #333;
    opacity: 1;
  }
}

a.fix-nav__link:hover {
  text-decoration: none;
}

.fix-nav__link::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* common
----- */
.pc_cont {
  display: block;
}

.sp_cont {
  display: none;
}

#main,
#main * {
  box-sizing: border-box;
  font-family: 'Noto Sans JP', sans-serif;
}

#contents__wrapper {
  font-size: 10px;
}

#contents__wrapper {
  max-width: 960px;
  width: calc(960 / 1020 * 100%);
  margin: 0 auto;
}

/* content__title 
----- */
.content__title {
  margin-bottom: min(30px, calc(30 / 960 * 100%));
}

.content__head {
  position: relative;
  background: var(--white-color); 
}

.content__head::before,
.content__head::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.content__head::before {
  background: linear-gradient(to top, rgba(238, 130, 182, 0.3) 0%, transparent 45%);
}

.content__head::after {
  background: linear-gradient(to top, rgba(116, 201, 163, 0.3) 0%, transparent 45%);
}

.content__head.is-north::before {
  opacity: 1;
}

.content__head.is-south::after {
  opacity: 1;
}

/* tab
----- */
.tab__wrapper {
  width: 100%;
  position: relative;
  z-index: 10;
}

.tab__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
  justify-content: center;
  overflow: hidden;
}

.tab__item {
  max-width: 266px;
  width: 100%;
  padding-block: min(13px ,calc( 13 / 266 * 100% ));
  padding-inline: min(50px ,calc( 50 / 266 * 100% ));
  text-align: center;
  font-size: 2.8em;
  font-weight: bold;
  line-height: calc(40 / 28);
  letter-spacing: .075em;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  background: var(--white-color);
  transition: opacity var(--transition);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

.tab__item.north {
  border-top: 1px solid var(--north-bold-color);
  border-left: 1px solid var(--north-bold-color);
  border-right: 1px solid var(--north-bold-color);
  background: linear-gradient(to bottom, var(--white-color) 0%, var(--white-color) 60%, #FCECF4 100%);
  color: var(--north-bold-color);
}

.tab__item.south {
  border-top: 1px solid var(--south-bold-color);
  border-left: 1px solid var(--south-bold-color);
  border-right: 1px solid var(--south-bold-color);
  background: linear-gradient(to bottom, var(--white-color) 0%, var(--white-color) 60%, #E7F7F0 100%);
  color: var(--south-bold-color);
}

.tab__item.is-active.north {
  background: var(--north-color);
  border-top: 1px solid var(--north-color);
  border-left: 1px solid var(--north-color);
  border-right: 1px solid var(--north-color);
  color: var(--white-color);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
}

.tab__item.is-active.south {
  background: var(--south-color);
  border-top: 1px solid var(--south-color);
  border-left: 1px solid var(--south-color);
  border-right: 1px solid var(--south-color);
  color: var(--white-color);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
}

@media (hover: hover) and (pointer: fine) {
  .tab__item:not(.is-active):hover {
    opacity: var(--hover-opacity);
  }
}

.tab__panel {
  display: none;
  padding: min(33px, calc(33 / 960 * 100%)) 0;
}

.tab__panel.is-active {
  display: block;
}

#tab-north.tab__panel.is-active {
  border-top: 2px solid var(--north-color);
}

#tab-south.tab__panel.is-active {
  border-top: 2px solid var(--south-color);
}

.tab__panel {
  padding-block-start: min(33px, calc(33 / 960 * 100%));
}


/* floor
----- */
.floor-tab__list {
  display: flex;
  column-gap: 20px;
  row-gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-block-end: min(30px ,calc( 30 / 960 * 100% ));
}

.floor-tab__item {
  display: block;
  width: 60px;
  height: 60px;
  padding-block: min(11px ,calc( 11 / 60 * 100% )) min(13px ,calc( 13 / 60 * 100% ));
  padding-inline: min(5px ,calc( 5 / 60 * 100% ));
  word-break: keep-all;
  text-align: center;
  font-size: 2.2em;
  font-weight: bold;
  line-height: calc(32 / 22);
  letter-spacing: .075em;
  border-radius: 100px;
  cursor: pointer;
  background: var(--white-color);
  border: 2px solid var(--font-color);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

#tab-north .floor-tab__item {
  border-color: var(--north-bold-color);
  color: var(--north-bold-color);
}

#tab-north .floor-tab__item.is-active {
  background-color: var(--north-color);
  border-color: var(--north-color);
  color: var(--white-color);
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
}

#tab-south .floor-tab__item {
  border-color: var(--south-bold-color);
  color: var(--south-bold-color);
}

#tab-south .floor-tab__item.is-active {
  background-color: var(--south-color);
  border-color: var(--south-color);
  color: var(--white-color);
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
}

@media (hover: hover) and (pointer: fine) {
  .floor-tab__item:not(.is-active):hover {
    transition: var(--transition);
    opacity: var(--hover-opacity);
  }
}

.floor-tab__title {
  margin-inline: auto;
  font-size: 2.9em;
  font-weight: bold;
  text-align: center;
  line-height: calc(20 / 14);
  letter-spacing: .075em;
  background: var(--white-color);
  padding-block: min(11px ,calc( 11 / 60 * 100% )) min(13px ,calc( 13 / 60 * 100% ));
  max-width: 560px;
  position: relative;
}

.floor-tab__title p {
  position: relative;
  display: inline;
  padding-inline: min(20px ,calc( 20 / 182 * 100% ));
  background: var(--white-color);
  z-index: 10;
}

.floor-tab__title::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--font-color);
  transform: translateY(-50%);
  z-index: 1;
}

#tab-north .floor-tab__title::before {
  background: var(--north-bold-color);
}

#tab-south .floor-tab__title::before {
  background: var(--south-bold-color);
}

.floor-tab__title-floor {
  padding-left: 1%;
}

#tab-north .floor-tab__title {
  border-color: var(--north-bold-color);
  color: var(--north-bold-color);
}

#tab-south .floor-tab__title {
  border-color: var(--south-bold-color);
  color: var(--south-bold-color);
}

.floor-tab__map {
  display: block;
  width: 100%;
  max-width: 670px;
  margin-inline: auto;
  margin-block-start: min(10px, calc(10 / 375 * 100%));
}

.floor-tab__map-img {
  transition: opacity 0.4s ease;
}

.floor-tab__map-img.is-fading {
  opacity: 0;
}

/* shop list
----- */
.floor-tab__shop-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: min(60px, calc(60 / 960 * 100%)) 0 0;
  padding: 0;
  border-left: 1px solid #ccc;
}

.floor-tab__shop-item {
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.floor-tab__shop-item:nth-of-type(n+5) {
  border-top: none;
}

@media (max-width: 1024px) {
  .floor-tab__shop-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .floor-tab__shop-item:nth-of-type(n+4) {
    border-top: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  a.floor-tab__shop-link:hover {
    background: #ffeaf9;
    text-decoration: none;
  }
}

.floor-tab__shop-link {
  display: block;
  height: 100%;
  padding: min(20px, calc(20 / 240 * 100%)) min(16px, calc(16 / 240 * 100%));
  letter-spacing: 0.04em;
}

.floor-tab__shop-logo {
  border: 1px solid #ccc;
  background: var(--white-color);
  aspect-ratio: 8 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-inline: min(16px, calc(16 / 200 * 100%));
  margin-bottom: min(10px, calc(10 / 200 * 100%));
}

.floor-tab__shop-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.floor-tab__shop-name {
  font-size: 1.6em;
  font-weight: bold;
  line-height: calc(24/16);
  color: var(--font-color);
  margin-bottom: 4px;
}

.floor-tab__shop-category {
  font-size: 1.2em;
  color: #666;
  line-height: 1.5;
}

.floor-tab__shop-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 14px;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 100px;
  color: var(--white-color);
  background: #6B9FD4;
  line-height: 1.6;
}

.floor-tab__shop-tag.is-kantohatsu {
  background: #7A6A5A;
}

.floor-tab__shop-empty {
  font-size: 1.8em;
  margin: min(30px, calc(30 / 960 * 100%)) 0 0;
  text-align: center;
}

.area_option .article_ico {
  height: auto;
}

.area_option .article_ico .area-badge {
  font-size: 1.4em;
  width: auto;
  max-width: 102px;
  margin-inline: 0 auto;
  margin-block-start: min(8px, calc(8 / 102 * 100%));
  padding-bottom: 3px;
}