@charset "UTF-8";
/* =====================
  Nav
===================== */
.main .nav {
  display: flex;
  margin-top: 85px;
  justify-content: space-between;
  font-weight: bold;
}
.main .nav a {
  width: 50%;
  display: grid;
  place-content: center;
  background: white;
  font-size: 18px;
  line-height: 1;
  padding-block: 27px;
  position: relative;
  transition: background 250ms ease 0s;
}
.main .nav a.on {
  pointer-events: none;
  background: var(--blue);
  color: white;
}
.main .nav a.on::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
  width: 20px;
  background: var(--blue);
  height: 6px;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
}
.main .localnav {
  margin-top: 38px;
}
.main h2 {
  margin-top: 71px;
  font-weight: bold;
  font-size: 18px;
}
.main h2 span {
  font-weight: bold;
}
.main h2 span:last-child {
  font-weight: 500;
  font-size: 16px;
  padding-inline: 3px;
}

/* =====================
  main
===================== */
.main:is([category], [floor]) {
  background: #eceff3;
}

/* =====================
  カテゴリー別
===================== */
.main[category] .localnav .tablist {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.main[category] .localnav .tablist button {
  background: white;
  transition: all 250ms ease 0s;
}
.main[category] .localnav .tablist button {
  min-height: 212px;
  text-align: center;
  line-height: 1;
  font-weight: 600;
  font-size: 20px;
  position: relative;
}
.main[category] .localnav .tablist button + button {
  border-left: 1px dashed #959595;
}
.main[category] .localnav .tablist button::before {
  content: '';
  display: block;
  mask-repeat: no-repeat;
  margin-bottom: 10px;
  mask-size: contain;
  mask-position: center;
  margin-inline: auto;
  transform: translateY(-11px);
  background-color: currentColor;
}
.main[category] .localnav .tablist button::after {
  display: block;
  text-align: center;
  font-family: var(--title);
  font-weight: normal;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  transform: translateY(14px);
}

/* ==== Color ==== */
.main[category] .localnav .tablist button[gourmet] {
  color: var(--orange);
}
.main[category] .localnav .tablist button[shopping] {
  color: var(--green);
}
.main[category] .localnav .tablist button[fashion] {
  color: var(--pink);
}
.main[category] .localnav .tablist button[other] {
  color: var(--cyan);
}

/* ==== selected ==== */
.main[category] .localnav .tablist button[aria-selected='true'] {
  pointer-events: none;
}
.main[category] .localnav .tablist button[gourmet][aria-selected='true'],
.main[category] .localnav .tablist button[gourmet]:hover {
  background: var(--orange-hover);
}
.main[category] .localnav .tablist button[shopping][aria-selected='true'],
.main[category] .localnav .tablist button[shopping]:hover {
  background: var(--green-hover);
}
.main[category] .localnav .tablist button[fashion][aria-selected='true'],
.main[category] .localnav .tablist button[fashion]:hover {
  background: var(--pink-hover);
}
.main[category] .localnav .tablist button[other][aria-selected='true'],
.main[category] .localnav .tablist button[other]:hover {
  background: var(--cyan-hover);
}

/* ==== icon ==== */
.main[category] .localnav .tablist button[gourmet]::before {
  mask-image: url('../../img/common/gourmet-o.svg');
  aspect-ratio: 41 / 70;
  width: 41px;
}
.main[category] .localnav .tablist button[shopping]::before {
  mask-image: url('../../img/common/shopping.svg');
  aspect-ratio: 22 / 30;
  width: 42px;
  margin-bottom: 24px;
  transform: translateY(-4px);
}
.main[category] .localnav .tablist button[fashion]::before {
  mask-image: url('../../img/common/fashion.svg');
  aspect-ratio: 33 / 30;
  width: 54px;
  margin-bottom: 33px;
  transform: translateY(-1px);
}
.main[category] .localnav .tablist button[other]::before {
  mask-image: url('../../img/common/other.svg');
  aspect-ratio: 30 / 31;
  width: 54px;
  margin-bottom: 25px;
  transform: translateY(-3px);
}
.main article[role='tabpanel'] {
  margin-top: 36px;
  padding-bottom: 120px;
}

/* =====================
  フロア別
===================== */
.main[floor] .localnav .tablist {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.main[floor] .localnav .tablist button {
  background: white;
  transition: all 250ms ease 0s;
}
.main[floor] .localnav .tablist button {
  min-height: 132px;
  text-align: center;
  line-height: 1;
  font-size: 20px;
  position: relative;
}
.main[floor] .localnav .tablist button + button {
  border-left: 1px dashed #959595;
  font-family: var(--title);
}
.main[floor] .localnav .tablist button[aria-selected='true'],
.main[floor] .localnav .tablist button:hover {
  background: var(--orange-hover);
}

/* =====================
  detail
===================== */
/* ==== Grid system ==== */
.main[detail] .item-contents .wrap {
  display: grid;
  grid-template-areas:
    'img logo info'
    'img logo h1'
    'img p p'
    'img table table';
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto auto 1fr;
}
.main[detail] .item-contents .img {
  grid-area: img;
}
.main[detail] .item-contents .logo {
  grid-area: logo;
}
.main[detail] .item-contents .info {
  grid-area: info;
}
.main[detail] .item-contents .h1 {
  grid-area: h1;
}
.main[detail] .item-contents .p {
  grid-area: p;
}
.main[detail] .item-contents .table {
  grid-area: table;
}

/* ==== common ==== */
.main[detail] .item-contents {
  padding-bottom: 120px;
}
.main[detail] .item-contents .wrap {
  margin-top: 85px;
  padding-bottom: 125px;
}

/* ==== info ==== */
.main[detail] .item-contents .info {
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-weight: normal;
  padding-top: 3px;
  gap: 7px;
}
.main[detail] .item-contents .info span {
  word-break: break-all;
}
.main[detail] .item-contents .info span + span::before {
  content: '｜';
  margin-right: 3px;
}

/* ==== logo ==== */
.main[detail] .item-contents .logo {
  margin-right: 32px;
  display: flex;
  align-items: center;
}
.main[detail] .item-contents .logo img {
  max-width: 152px;
  width: auto;
  max-height: 92px;
  vertical-align: middle;
}

/* ==== img ==== */
.main[detail] .item-contents .img {
  margin-right: 64px;
}
.main[detail] .item-contents .img img {
  max-width: 540px;
  height: auto;
}

/* ==== h1 ==== */
.main[detail] .item-contents h1 {
  font-size: 24px;
  font-weight: bold;
  word-break: break-all;
}

/* ==== p ==== */
.main[detail] .item-contents p {
  font-size: 15px;
  margin-top: 40px;
  font-weight: 500;
  line-height: 1.8;
}
.main[detail] .item-contents p .topics {
  background: #eceff3;
  margin-top: 24px;
  display: block;
  padding-block: 24px;
  padding-inline: 24px;
  font-size: 15px;
  font-weight: 600;
}
.main[detail] .item-contents p .topics .u-link {
  font-size: 12px;
  display: block;
  width: max-content;
  margin-top: 18px;
  margin-inline: auto 0;
  text-align: right;
  font-weight: 500;
}

/* ==== table ==== */
.main[detail] .item-contents .table {
  margin-top: 49px;
}
.main[detail] .item-contents .table table {
  width: 100%;
}
.main[detail] .item-contents .table th {
  font-weight: 600;
  width: 168px;
}
.main[detail] .item-contents .table :where(th, td) {
  line-height: 1.8;
  word-break: break-all;
  text-align: left;
  font-size: 15px;
  padding-block: 14.5px;
  padding-inline: 15px;
  vertical-align: top;
  border-block: 1px solid #959595;
}
.main[detail] .item-contents .table td .anchor {
  display: inline-flex;
  margin-inline: 36px;
  background: var(--blue);
  color: white;
  font-size: 12px;
  line-height: 1;
  padding: 6.5px 8px;
}
.main[detail] .u-button {
  text-align: center;
  max-width: 352px;
  margin-inline: auto;
}