@charset "UTF-8";
/* =====================
  important
===================== */
.important {
  margin-block: calc((100 / 750) * 116 * 1vw) 0;
  text-align: center;
}
.important .unit {
  padding-block: 0;
  padding-inline: calc((100 / 750) * 35 * 1vw);
}
.important .unit h2 {
  text-align: center;
  font-size: calc((100 / 750) * 26 * 1vw);
  line-height: 1;
}
.important .unit h2::before {
  display: block;
  margin-bottom: calc((100 / 750) * 14 * 1vw);
  line-height: 1;
  color: var(--blue);
  font-family: var(--title);
  text-transform: uppercase;
  font-size: calc((100 / 750) * 56 * 1vw);
}
.important .unit ul {
  margin-top: calc((100 / 750) * 70 * 1vw);
  text-align: left;
  border-block: 1px solid var(--grey);
  padding-inline: calc((100 / 750) * 24 * 1vw);
  padding-block: calc((100 / 750) * 50 * 1vw);
  font-size: calc((100 / 750) * 24 * 1vw);
}
.important .unit ul li + li {
  margin-top: calc((100 / 750) * 60 * 1vw);
}
.important .unit .anchor p {
  margin-top: 2.8vw;
  line-height: 1.8;
}
.important .unit .anchor .date {
  color: var(--blue);
  font-family: var(--title);
}

/* =====================
  shop
===================== */
.article[data-id='1'] {
  position: relative;
  padding-bottom: 17vw;
  padding-top: 19vw;
  padding-inline: calc((100 / 750) * 35 * 1vw);
}
.article[data-id='1'] .inner {
  position: relative;
  z-index: 1;
}
.article[data-id='1']::after {
  content: '';
  display: block;
  pointer-events: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
  background-image: url('../../img/top/bg_2x.png');
  width: 100%;
  height: calc((100 / 750) * 620 * 1vw);
}

/* ==== tab ui ==== */
.tab {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-areas:
    'tab-before tab-button'
    'tab-before tab-after';
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  text-align: center;
  gap: 0 1.4vw;
  padding-block: 3vw 3.1vw;
  position: relative;
  border: 1px solid transparent;
  border-color: currentColor;
}
.tab label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tab[orange]::before {
  mask-image: url('../../img/common/gourmet.svg');
  width: calc((100 / 750) * 31 * 1vw);
  height: calc((100 / 750) * 57 * 1vw);
}
.tab[green]::before {
  mask-image: url('../../img/common/shopping.svg');
  width: 22px;
  height: 30px;
}
.tab[pink]::before {
  mask-image: url('../../img/common/fashion.svg');
  width: 33px;
  height: 30px;
}
.tab[cyan]::before {
  mask-image: url('../../img/common/other.svg');
  width: 30px;
  height: 31px;
}
.tab button {
  line-height: 1;
  grid-area: tab-button;
  width: 100%;
  font-size: calc((100 / 750) * 32 * 1vw);
  font-weight: 600;
  position: relative;
}
.tab::before,
.tab::after {
  display: block;
}
.tab::before {
  content: '';
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  grid-area: tab-before;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform: translateX(-5px);
}
.tab::after {
  grid-area: tab-after;
  line-height: 1;
  font-size: calc((100 / 750) * 22 * 1vw);
  font-family: var(--title);
  text-transform: uppercase;
  margin-top: 2.3vw;
}
.tab {
  color: white;
  pointer-events: none;
}
.tab[orange],
.tab[orange] label::after {
  background: var(--orange);
}
.tab[green],
.tab[green] label::after {
  background: var(--green);
}
.tab[pink],
.tab[pink] label::after {
  background: var(--pink);
}
.tab[cyan],
.tab[cyan] label::after {
  background: var(--cyan);
}
.tab label::after {
  height: 0px;
  transition: height 400ms ease 0s;
  content: '';
  pointer-events: none;
}
.tab label::after {
  width: calc((100 / 750) * 30 * 1vw);
  height: calc((100 / 750) * 9 * 1vw);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 15.3vw;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
}

/* ==== tab-contents ==== */
.tab-contents {
  padding-top: 6.2vw;
}
.tab-contents + .js-tab {
  margin-top: calc((100 / 750) * 80 * 1vw);
}

/* =====================
  parking
===================== */
.article[data-id='2'] {
  position: relative;
  padding-block: 19vw 0;
  padding-inline: calc((100 / 750) * 35 * 1vw);
}
.article[data-id='2'] .inner {
  padding-block: calc((100 / 750) * 55 * 1vw) calc((100 / 750) * 211 * 1vw);
  margin-inline: auto;
  border: calc((100 / 750) * 10 * 1vw) solid var(--grey2);
  background-image: url('../../img/top/parking_2x.png');
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: calc((100 / 750) * 494 * 1vw) calc((100 / 750) * 162 * 1vw);
}
.article[data-id='2'] .inner h2 {
  width: max-content;
  margin-inline: auto;
  font-size: calc((100 / 750) * 36 * 1vw);
  font-weight: bold;
}
.article[data-id='2'] .inner .unit[data-id='1'] {
  margin-top: 2.9vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.article[data-id='2'] .inner .unit[data-id='1'] span:nth-child(1) {
  font-size: calc((100 / 750) * 32 * 1vw);
}
.article[data-id='2'] .inner .unit[data-id='1'] span:nth-child(2) {
  padding-inline: 3.7vw;
  font-size: calc((100 / 750) * 96 * 1vw);
  transform: translateX(1.6vw);
}
.article[data-id='2'] .inner .unit[data-id='1'] span:nth-child(3) {
  font-size: calc((100 / 750) * 48 * 1vw);
}
.article[data-id='2'] .inner .unit[data-id='2'] {
  margin-inline: auto;
  padding-inline: calc((100 / 750) * 31 * 1vw);
  margin-top: 3vw;
  font-size: calc((100 / 750) * 26 * 1vw);
  align-items: center;
}
.article[data-id='2'] .inner .unit[data-id='2'] h3 {
  width: max-content;
  border: 1px solid currentColor;
  color: var(--blue);
  padding: calc((100 / 750) * 5 * 1vw) calc((100 / 750) * 14 * 1vw);
  margin-bottom: 2vw;
}
.article[data-id='2'] .inner .unit[data-id='2'] p {
  font-size: calc((100 / 750) * 28 * 1vw);
  line-height: 1.8;
}
.article[data-id='2'] .inner .unit[data-id='3'] {
  font-size: calc((100 / 750) * 24 * 1vw);
  margin-top: 3.1vw;
  padding-inline: calc((100 / 750) * 31 * 1vw);
  margin-inline: auto;
}
.article[data-id='2'] .inner .unit[data-id='3'] li {
  line-height: 1.8;
}
.article[data-id='2'] .inner .unit[data-id='3'] li + li {
  margin-top: 0vw;
}
.article[data-id='2'] .inner .unit[data-id='3'] li::before {
  content: '※';
}

/* =====================
  aside banner
===================== */
.main aside.banner {
  padding-block: calc((100 / 750) * 140 * 1vw) calc((100 / 750) * 120 * 1vw);
  padding-inline: calc((100 / 750) * 35 * 1vw);
}
.main aside.banner ul {
  display: grid;
  gap: calc((100 / 750) * 64 * 1vw) 0;
}
.main aside.banner ul li picture {
  display: block;
}
.main aside.banner ul li picture img {
  max-width: 100%;
  height: auto;
}
.main aside.banner ul li a {
  display: block;
  margin-inline: auto;
  text-align: center;
}