@charset "UTF-8";
.mv {
  position: relative;
}
@media screen and (max-width: 767px) {
  .mv {
    margin-top: 60px;
  }
}
.mv-ttl {
  font-size: 92px;
  font-weight: 400;
  left: 50%;
  letter-spacing: 0.8rem;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .mv-ttl {
    font-size: 33px;
  }
}

.general-section {
  container-type: inline-size;
}
.general-section.is-bg {
  background: linear-gradient(180deg, #ffffff 0%, #f8f7f5 40%, #edeae7 100%);
}
.general-section.is-dark {
  background: url(../img/common/bg-dark.webp) center top/1920px;
  color: #fff;
}
.general-section .img-wrapper img {
  max-width: 100%;
  height: auto;
}

main .general-section .inner {
  max-width: 1200px;
}

/* common */
.section-bg {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 140px 20px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .section-bg {
    padding: 70px 20px;
  }
}
.section-bg-ttl {
  color: #fff;
  font-size: 40px;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .section-bg-ttl {
    font-size: 25px;
  }
}
.section-bg .caption {
  bottom: 0;
  position: absolute;
  right: 0;
}

.inner-1000 {
  max-width: 1000px;
}

.main--imgs {
  margin-top: 90px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media screen and (max-width: 767px) {
  .main--imgs {
    margin-top: 40px;
  }
}
.main--imgs--img {
  width: 30.6666666667%;
}
@media screen and (max-width: 767px) {
  .main--imgs--img {
    width: 33%;
  }
}
.main--imgs--img:nth-child(2) {
  margin-top: 40px;
}
.main--imgs--img:nth-child(3) {
  margin-top: 80px;
}

.omotecho2--txtimg {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: flex-start;
}
@media screen and (max-width: 767px) {
  .omotecho2--txtimg {
    flex-direction: column;
    gap: 20px;
  }
}
.omotecho2--txtimg--text {
  width: 44.5394736842%;
}
@media screen and (max-width: 767px) {
  .omotecho2--txtimg--text {
    width: 100%;
  }
}
.omotecho2--txtimg--text--title {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 2em;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .omotecho2--txtimg--text--title {
    font-size: 18px;
    margin-bottom: 1em;
    line-height: 1.5;
  }
}
.omotecho2--txtimg--text--text {
  font-size: 16px;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .omotecho2--txtimg--text--text {
    font-size: 14px;
    line-height: 1.8;
  }
}
.omotecho2--txtimg--text--img {
  margin-top: 2em;
}
.omotecho2--txtimg--img {
  width: 41.25%;
}
@media screen and (max-width: 767px) {
  .omotecho2--txtimg--img {
    width: auto;
  }
}
.omotecho2--txtimg2 {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: flex-end;
}
@media screen and (max-width: 767px) {
  .omotecho2--txtimg2 {
    flex-direction: column;
    gap: 20px;
  }
}
.omotecho2--txtimg2--text {
  width: 32.8947368421%;
}
@media screen and (max-width: 767px) {
  .omotecho2--txtimg2--text {
    width: 100%;
  }
}
.omotecho2--txtimg2--img {
  width: calc(50cqw - 50% + 63.8815789474%);
  margin-left: calc(-50cqw + 50%);
}
@media screen and (max-width: 767px) {
  .omotecho2--txtimg2--img {
    width: auto;
    margin-inline: -18px;
  }
}
.omotecho2 .half-list {
  display: flex;
  flex-wrap: wrap;
  gap: 70px;
}
@media screen and (max-width: 767px) {
  .omotecho2 .half-list {
    gap: 50px;
  }
}
.omotecho2 .half-list--item {
  width: calc(50% - 35px);
}
@media screen and (max-width: 767px) {
  .omotecho2 .half-list--item {
    width: 100%;
  }
}
.omotecho2 .half-list--item--img {
  margin-bottom: 20px;
}
.omotecho2 .half-list--item--title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 767px) {
  .omotecho2 .half-list--item--title {
    font-size: 18px;
  }
}
.omotecho2 .half-list--item--dist {
  font-size: 14px;
  margin-top: 0.5em;
}
@media screen and (max-width: 767px) {
  .omotecho2 .half-list--item--dist {
    font-size: 12px;
  }
}
.omotecho2 .half-list--item--text {
  margin-top: 1em;
  font-size: 14px;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .omotecho2 .half-list--item--text {
    font-size: 14px;
  }
}

/* ================================================
   loc-lead-section: ヘッドライン
================================================ */
.loc-lead-section .inner {
  padding: 80px 0;
}
@media screen and (max-width: 767px) {
  .loc-lead-section .inner {
    padding: 50px 0;
  }
}

.loc-lead-ttl {
  color: #333;
  font-size: 38px;
  font-weight: 500;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .loc-lead-ttl {
    font-size: 22px;
  }
}

/* ================================================
   loc-swiper-section: セクション全体
================================================ */
.loc-swiper-section {
  overflow: hidden;
}

/* Park セクション: 背景色 + 上部パディング */
.loc-swiper-section--park {
  background-color: #EDE7DF;
  padding-top: 80px;
}
@media screen and (max-width: 767px) {
  .loc-swiper-section--park {
    padding-top: 50px;
  }
}

.loc-swiper-section--hospital {
  background-color: #FFFFFF;
  padding-top: 80px;
}
@media screen and (max-width: 767px) {
  .loc-swiper-section--hospital {
    padding-top: 50px;
  }
}

.loc-swiper-section--education {
  background-color: #EDE7DF;
  padding-top: 80px;
}
@media screen and (max-width: 767px) {
  .loc-swiper-section--education {
    padding-top: 50px;
  }
}

/* 固定: ヒーロー画像（1200px幅に揃える） */
.loc-slide-hero {
  margin: 0 auto;
  position: relative;
  width: calc(100% - 64px);
  max-width: 1200px;
}
@media screen and (max-width: 767px) {
  .loc-slide-hero {
    width: calc(100% - 48px);
  }
}
.loc-slide-hero .caption {
  bottom: 5px;
  position: absolute;
  right: 5px;
}

/* 固定: カテゴリ行 "Shopping" + コピー */
.loc-slide-head {
  align-items: baseline;
  display: flex;
  gap: 24px;
  /* general-section .inner の padding: 100px 0 を上書き */
}
.loc-slide-head.inner {
  padding: 60px 0 50px;
}
@media screen and (max-width: 767px) {
  .loc-slide-head {
    flex-direction: column;
    gap: 10px;
  }
  .loc-slide-head.inner {
    padding: 40px 0 30px;
  }
}

.loc-category {
  color: #a68866;
  font-family: "Baskervville", serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .loc-category {
    font-size: 28px;
  }
}

.loc-copy {
  color: #333;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .loc-copy {
    font-size: 16px;
  }
}

/* ================================================
   loc-cards-wrap / Swiper: カードエリア
================================================ */
.loc-cards-wrap {
  padding-bottom: 60px;
  position: relative;
  /* general-section .inner の padding-top を打ち消す */
}
.loc-cards-wrap.inner {
  padding-top: 0;
}
@media screen and (max-width: 767px) {
  .loc-cards-wrap.inner {
    margin-inline: 0;
    padding-inline: 18px;
    width: auto;
  }
}

.loc-swiper {
  position: relative;
}
@media screen and (max-width: 767px) {
  .loc-swiper {
    overflow: visible;
  }
}

/* カード1枚（swiper-slideを兼ねる） */
.loc-card {
  box-sizing: border-box;
  position: relative;
}
.loc-card::after {
  content: "";
  position: absolute;
  right: -42px;
  top: 0;
  bottom: 0;
  border-left: solid 1px #B7B7B7;
}
@media screen and (max-width: 767px) {
  .loc-card::after {
    right: -20px;
  }
}

.loc-card-name {
  color: #333;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 6px;
}
@media screen and (max-width: 767px) {
  .loc-card-name {
    font-size: 18px;
  }
}

.loc-card-dist {
  color: #333;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 14px;
}

/* ================================================
   Swiperナビゲーション: Swiper外・flexboxで制御
================================================ */
/* ← ●○○○ → を横一列に並べるラッパー */
.loc-swiper-nav {
  /* SwiperのCSS変数をゴールドで上書き */
  --swiper-theme-color: #a68866;
  --swiper-navigation-color: #a68866;
  --swiper-navigation-size: 12px;
  align-items: center;
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
}
@media screen and (max-width: 767px) {
  .loc-swiper-nav {
    margin-top: 20px;
    gap: 12px;
  }
}

/* Swiperデフォルトの position:absolute を無効化 */
.loc-swiper-prev,
.loc-swiper-next {
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  /* 円形ボタン */
  align-items: center;
  border: 1px solid #a68866;
  border-radius: 50%;
  display: flex !important;
  flex-shrink: 0;
  height: 36px;
  justify-content: center;
  width: 36px;
}
@media screen and (max-width: 767px) {
  .loc-swiper-prev,
  .loc-swiper-next {
    height: 30px;
    width: 30px;
  }
}
.loc-swiper-prev svg,
.loc-swiper-next svg {
  width: 6px;
  height: auto;
}

/* ページネーションドット */
.loc-swiper-pagination {
  position: static !important;
  width: auto !important;
  bottom: auto !important;
}
.loc-swiper-pagination .swiper-pagination-bullet {
  background: #ccc;
  border-radius: 50%;
  height: 8px;
  margin: 0 4px !important;
  opacity: 1;
  width: 8px;
}
.loc-swiper-pagination .swiper-pagination-bullet-active {
  background: #a68866;
}

/* ================================================
   loc-omote-section: 表町商店街 店舗 PICK UP
================================================ */
.loc-omote-section {
  background: linear-gradient(180deg, #edeae7 0%, #D7D7D7 100%);
  padding: 80px 0;
}
@media screen and (max-width: 767px) {
  .loc-omote-section {
    padding: 60px 0;
  }
}

/* 白いボックス */
.loc-omote-section > .inner {
  background: #fff;
  border: 1px solid #c8b49a;
  padding: 70px 60px;
}
@media screen and (max-width: 767px) {
  .loc-omote-section > .inner {
    padding: 40px 20px;
  }
}

.loc-omote-ttl {
  color: #a68866;
  font-size: 38px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  .loc-omote-ttl {
    font-size: 24px;
    margin-bottom: 30px;
  }
}

/* 左右レイアウト */
.loc-omote-layout {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
@media screen and (max-width: 767px) {
  .loc-omote-layout {
    gap: 40px;
    align-items: stretch;
  }
}

.loc-omote-left {
  flex: 1 1 0;
  min-width: 0;
}

.loc-omote-right {
  flex: 0 0 490px;
}
@media screen and (max-width: 767px) {
  .loc-omote-right {
    flex: none;
    order: -1;
    width: 100%;
  }
}

/* ================================================
   タブ
================================================ */
.loc-omote-tabs {
  margin-bottom: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #a68866;
}
@media screen and (max-width: 767px) {
  .loc-omote-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
}

.loc-omote-tab {
  align-items: center;
  background: #fff;
  border: none;
  color: #a68866;
  cursor: pointer;
  display: flex;
  font-family: "Zen Old Mincho", serif;
  font-size: 20px;
  font-weight: 500;
  height: 60px;
  justify-content: center;
  line-height: 1;
  padding: 0 16px;
  position: relative;
  text-align: center;
  transition: background 0.2s, color 0.2s;
  /* 内側のボーダー */
}
.loc-omote-tab:nth-child(1) {
  border-right: 1px solid #a68866;
}
@media screen and (max-width: 767px) {
  .loc-omote-tab:nth-child(1) {
    border-bottom: 1px solid #a68866;
  }
}
.loc-omote-tab:nth-child(2) {
  border-right: 1px solid #a68866;
}
@media screen and (max-width: 767px) {
  .loc-omote-tab:nth-child(2) {
    border-right: none;
    border-bottom: 1px solid #a68866;
  }
}
.loc-omote-tab:nth-child(3) {
  border-right: 1px solid #a68866;
}
.loc-omote-tab.is-active {
  background: #a68866;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .loc-omote-tab {
    font-size: 13px;
    height: 48px;
    padding: 0 8px;
  }
}

/* アクティブタブのマーカー（absoluteで置くので文字位置に影響しない） */
.loc-omote-tab-mark {
  height: 15px;
  left: 16px;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
}
.loc-omote-tab.is-active .loc-omote-tab-mark {
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .loc-omote-tab-mark {
    height: 12px;
    left: 10px;
    width: 12px;
  }
}

/* タブごとのマーカー色 */
.loc-omote-tab[data-tab=fashion] .loc-omote-tab-mark {
  background: #FFB9A1;
}

.loc-omote-tab[data-tab=life] .loc-omote-tab-mark {
  background: #FFB055;
}

.loc-omote-tab[data-tab=gourmet] .loc-omote-tab-mark {
  background: #EBEB28;
}

.loc-omote-tab[data-tab=service] .loc-omote-tab-mark {
  background: #89ADBF;
}

/* ================================================
   パネル
================================================ */
.loc-omote-panel {
  display: none;
}
.loc-omote-panel.is-active {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 60px;
}
@media screen and (max-width: 767px) {
  .loc-omote-panel.is-active {
    grid-template-columns: auto;
    row-gap: 0;
  }
}

/* ================================================
   エリアブロック
================================================ */
.loc-omote-area {
  align-items: flex-start;
  display: flex;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px dotted #c8b49a;
}
.loc-omote-area:last-child {
  border-bottom: none;
}
@media screen and (max-width: 767px) {
  .loc-omote-area {
    gap: 16px;
    padding: 20px 0;
  }
}

/* 丸エリアラベル（SVG画像） */
.loc-omote-area-circle {
  display: block;
  flex-shrink: 0;
  height: 100px;
  width: 100px;
}
@media screen and (max-width: 767px) {
  .loc-omote-area-circle {
    height: 72px;
    width: 72px;
  }
}

/* 店舗名リスト */
.loc-omote-shops {
  color: #1b1b1b;
  font-family: "Zen Old Mincho", serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 767px) {
  .loc-omote-shops {
    font-size: 15px;
  }
}

/* エリア間の区切り線 */
.loc-omote-divider {
  border: none;
  border-top: 1px dotted #c8b49a;
  margin: 0;
}

/* ================================================
   地図エリア
================================================ */
.loc-omote-zoom-row {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 40px;
}

.loc-omote-zoom-btn {
  align-items: center;
  background: none;
  border: none;
  color: #1b1b1b;
  cursor: pointer;
  display: flex;
  justify-content: center;
  font-family: "Zen Old Mincho", serif;
  font-size: 22px;
  gap: 10px;
  padding: 0;
}
@media screen and (max-width: 767px) {
  .loc-omote-zoom-btn {
    font-size: 16px;
  }
}

/* テキスト下線 */
.loc-omote-zoom-text {
  border-bottom: 2px solid #A68866;
  line-height: 1.6;
}

/* アイコン（SVG画像） */
.loc-omote-zoom-icon {
  display: block;
  height: 35px;
  width: 35px;
}
@media screen and (max-width: 767px) {
  .loc-omote-zoom-icon {
    height: 28px;
    width: 28px;
  }
}

.loc-omote-map {
  display: block;
  width: 100%;
}

/* ================================================
   マップ拡大モーダル
================================================ */
.loc-map-modal {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9000;
}
.loc-map-modal[hidden] {
  display: none;
}
.loc-map-modal__overlay {
  background: rgba(0, 0, 0, 0.75);
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.loc-map-modal__inner {
  max-width: 95svw;
  max-height: 95svh;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .loc-map-modal__inner {
    overflow-x: auto;
  }
}
.loc-map-modal__inner figure {
  display: block;
  margin: 0;
}
.loc-map-modal__inner img {
  display: block;
  height: auto;
  width: 60vw;
}
@media screen and (max-width: 767px) {
  .loc-map-modal__inner img {
    width: 150vw;
  }
}
.loc-map-modal__close {
  align-items: center;
  background: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  font-size: 18px;
  height: 36px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 16px;
  top: 16px;
  width: 36px;
  z-index: 9001;
}
@media screen and (max-width: 767px) {
  .loc-map-modal__close {
    right: 10px;
    top: 10px;
  }
}

/* ================================================
   LIFE INFORMATION
================================================ */
.loc-heading {
  font-family: "Baskervville", serif;
  font-size: 40px;
  font-weight: 500;
  margin-bottom: 2em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .loc-heading {
    font-size: 30px;
    margin-bottom: 0.6em;
  }
}

.life-info {
  background-color: rgba(204, 179, 121, 0.08);
}

.tab-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .tab-container {
    margin-bottom: 1em;
  }
}

.tab {
  align-content: center;
  background-color: #B7B7B7;
  color: #fff;
  cursor: pointer;
  flex: 1;
  font-size: 18px;
  height: 40px;
  line-height: 1.3;
  padding: 4px;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}
.tab.is-active, .tab:hover {
  background-color: #a68866;
}
@media screen and (max-width: 767px) {
  .tab {
    flex: auto;
    font-size: 12px;
    height: 40px;
    width: 25%;
  }
  .tab:nth-child(n+4) {
    width: 20%;
  }
}

.content {
  display: none;
}
.content.is-active {
  display: block;
}

.li-grid {
  display: flex;
  gap: 30px;
  justify-content: space-between;
}
.li-grid figure {
  background: #fff;
  display: block;
  flex: 0 1 auto;
  margin: 0;
}
.li-grid figure img {
  display: block;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .li-grid {
    flex-direction: column;
    gap: 10px;
  }
}

.li-lists-wrap {
  flex: 1 0 320px;
  overflow-y: auto;
  position: relative;
}

.li-lists {
  counter-reset: li-num;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.li-item {
  border-bottom: 1px solid #B7B7B7;
  counter-increment: li-num;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  position: relative;
  width: 100%;
}
.li-item:last-child {
  border-bottom: none;
}

.loc-name {
  align-items: center;
  display: flex;
  font-size: 16px;
  gap: 8px;
  justify-content: flex-start;
  line-height: 1.5;
}
.loc-name::before {
  background: url(../img/location/pin.svg) no-repeat center top/contain;
  box-sizing: border-box;
  color: #BE5A0A;
  content: counter(li-num);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: bold;
  height: 25px;
  line-height: 1;
  padding-bottom: 6px;
  padding-top: 1px;
  width: 22px;
}
@media screen and (max-width: 767px) {
  .loc-name {
    font-size: 13px;
  }
  .loc-name::before {
    font-size: 11px;
    height: 22px;
    width: 22px;
  }
}

.loc-time {
  font-size: 12px;
  padding-left: 34px;
  text-align: right;
}
@media screen and (max-width: 767px) {
  .loc-time {
    padding-left: 30px;
  }
}

.lead2 {
  margin-top: clamp(3em, 10vw, 5em);
}
.lead2 .main--imgs--img {
  width: 100%;
}

.redevelop {
  background: url(../img/location/bg-red.webp) no-repeat top center/cover;
}
.redevelop .secondary-heading {
  padding: 24px 10px;
  background: #eae4dc;
  color: #1b1b1b;
  letter-spacing: 0.1rem;
  line-height: 1.6;
}
.redevelop .lead {
  font-size: clamp(1.7rem, 2.8vw, 2.8rem);
}
.redevelop .note {
  margin-block: 2em 3em;
}

.img-radius {
  overflow: hidden;
  border-radius: 14px;
}

.section-title {
  margin-top: 32px;
  font-family: "Baskervville", serif;
  color: #be9a81;
  text-align: center;
  padding: 16px;
  text-align: center;
  letter-spacing: 0.08em;
  font-size: clamp(2.2rem, 3.6vw, 3.6rem);
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .section-title {
    margin-top: 0;
  }
}/*# sourceMappingURL=location.css.map */