/* area.css - 地域紹介（Area）ページ固有スタイル */
/* NOTE: :root は common.css に定義済みのため再定義しない */

/* ============================================================
   パンくずリスト
   ============================================================ */
.area-breadcrumb {
  padding: 8px 0;
  padding-right: var(--container-medium);
  padding-left: var(--container-medium);
}

.area-breadcrumb__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--fontsize-text-small);
  font-family: var(--font-body);
  color: var(--color-font-black-01);
  line-height: 1.6;
}

.area-breadcrumb__link {
  text-decoration: underline;
  color: var(--color-font-black-01);
  letter-spacing: 0.28px;
  transition: opacity 0.2s ease;
}

.area-breadcrumb__link:hover {
  opacity: 0.7;
}

.area-breadcrumb__link:focus {
  outline: 2px solid var(--color-border-key);
  outline-offset: 2px;
  border-radius: 2px;
}

.area-breadcrumb__sep {
  display: block;
  width: 4px;
  height: 5px;
  flex-shrink: 0;
}

.area-breadcrumb__current {
  color: var(--color-font-black-01);
  letter-spacing: 0.28px;
}

/* ============================================================
   ページ全体レイアウト
   ============================================================ */
.area-page-main {
  padding-top: 190.845px;                  /* ヘッダー固定高さ（PC） */
  padding-bottom: var(--margin-block-04);  /* 120px */
  display: flex;
  flex-direction: column;
  gap: var(--margin-block-02);             /* 60px */ 
  overflow:hidden;
}

.area-page-content {
  display: flex;
  flex-direction: column;
  gap: var(--margin-block-03);  /* 120px */
}

/* ============================================================
   パンくずリスト（Breadcrumb）
   ============================================================ */
.breadcrumb {
  font-size: var(--fontsize-text-xsmall);  /* 12px */
  color: var(--color-font-gray-01);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb__item::after {
  content: '>';
  color: var(--color-font-gray-01);
  font-size: var(--fontsize-text-xsmall);
}

.breadcrumb__item--current::after {
  content: none;
}

.breadcrumb__link {
  color: var(--color-font-gray-01);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb__link:hover {
  color: var(--color-font-keycolor);
}

.breadcrumb__link:focus-visible {
  outline: 2px solid var(--color-border-key);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   ページタイトル
   ============================================================ */
.page-ttl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width:100%;
  max-width:1280px;
  margin:0 auto;
}

.page-ttl__en {
  font-family: var(--font-accent);
  font-size: var(--fontsize-text-large);  /* 20px */
  color: var(--color-font-keycolor);
  line-height: 1.4;
}

.page-ttl__ja {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 700;
  color: var(--color-font-black-01);
  letter-spacing: 2.4px;
  line-height: 1.7;
}

/* ============================================================
   Leadセクション
   ============================================================ */
.area-lead {
  display: flex;
  gap: var(--margin-block-03);  /* 80px */
  align-items: center;
  padding-left: calc((100vw - 1280px) / 2);
}

.area-lead__text {
  width: 560px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--margin-block-01);  /* 40px */
}

.area-lead__heading {
  font-family: var(--font-heading);
  font-size: var(--fontsize-heading-top-01);  /* 36px */
  font-weight: 700;
  color: var(--color-font-black-01);
  line-height: 1.7;
  letter-spacing: 0.05em;
}

.area-lead__body {
  font-family: var(--font-body);
  font-size: var(--fontsize-text-normal);  /* 16px */
  color: var(--color-font-black-01);
  line-height: 2;
  letter-spacing: 0.16px;
}

/* フォトスライダー */
.area-lead__slider {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-01);  /* 15px */
  align-items: flex-end;
}

.area-lead__track-wrapper {
  overflow: hidden;
  border-radius: var(--radius-nml);
  width: 100%;
}

@keyframes lead-slider-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-6 * (320px + 15px))); }
}

.area-lead__track {
  display: flex;
  gap: 15px;
  animation: lead-slider-scroll 35s linear infinite;
  will-change: transform;
}

.area-lead__track.is-paused {
  animation-play-state: paused;
}

.area-lead__photo {
  width: 320px;
  height: 500px;
  flex-shrink: 0;
  border-radius: var(--radius-nml);
  overflow: hidden;
}

.area-lead__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 一時停止ボタン */
.area-lead__pause {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  line-height: 0;
  transition: opacity 0.2s ease;
}

.area-lead__pause:hover {
  opacity: 0.6;
}

.area-lead__pause:focus-visible {
  outline: 2px solid var(--color-border-key);
  outline-offset: 2px;
  border-radius: 2px;
}

.area-lead__pause-icon--play {
  display: none;
}

.area-lead__pause.is-paused .area-lead__pause-icon--pause {
  display: none;
}

.area-lead__pause.is-paused .area-lead__pause-icon--play {
  display: block;
}

/* ============================================================
   五感でめぐるセクション
   ============================================================ */
.area-senses {
  display: flex;
  flex-direction: column;
  gap: var(--margin-block-02);  /* 60px */
  max-width:1280px;
  margin:0 auto;
}

.area-senses__ttl {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.area-senses__ttl-en {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: var(--fontsize-text-medium);  /* 18px */
  color: var(--color-font-keycolor);
  line-height: normal;
}

.area-senses__ttl-ja {
  font-family: var(--font-heading);
  font-size: var(--fontsize-heading-section);  /* 32px */
  font-weight: 700;
  color: var(--color-font-black-01);
  line-height: 1.7;
  letter-spacing: 2.24px;
}

.area-senses__blocks {
  display: flex;
  flex-direction: column;
  gap: var(--margin-block-02);  /* 60px */
}

/* ============================================================
   五感ブロック（交互レイアウト）
   ============================================================ */
.area-block {
  display: flex;
  gap: var(--margin-block-02);  /* 60px */
  align-items: center;
}

/* 偶数ブロック（テキストLEFT） */
.area-block--reverse {
  flex-direction: row-reverse;
}

.area-block__img {
  width: 640px;
  height: 409.6px;
  flex-shrink: 0;
  border-radius: var(--radius-nml);
  overflow: hidden;
}

.area-block__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;  /* トラップ回避: width:100%を有効にするためmax-width:noneを指定 */
}

.area-block__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-03);  /* 30px */
  align-items: flex-start;  /* ボタンの伸び防止（トラップ2回避） */
}


.area-block__ttl {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-font-black-01);
  line-height: 1.5;
  letter-spacing: 1.2px;
  border-bottom: 1px dashed var(--color-border-black-01);
  padding-bottom: 15px;
  width: 100%;
}

.area-block__desc {
  font-family: var(--font-body);
  font-size: var(--fontsize-text-normal);  /* 16px */
  line-height: 2;
  letter-spacing: 0.16px;
  color: var(--color-font-black-01);
}


/* ============================================================
   ブロック リンクエリア（Check!バッジ + テキストリンク）
   ============================================================ */
.area-block__link-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* Check!バッジ */
.area-block__check {
  position: relative;
  display: inline-block;
  width: 83px;
  height: 38.738px;
}

.area-block__check-bg {
  position: absolute;
  top: -0.597px;
  right: -0.498px;
  bottom: -0.5px;
  left: -0.49px;
  width: calc(100% + 0.988px);
  height: calc(100% + 1.097px);
  display: block;
  max-width: none;
}

.area-block__check-text {
  position: absolute;
  left: 15px;
  top: 6.59px;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1.4px;
  color: var(--color-font-keycolor);
  white-space: nowrap;
  line-height: normal;
}

/* テキストリンク（ライン型） */
.area-block__line-link {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
}

.area-block__line-link-main {
  display: flex;
  gap: 15px;
  align-items: center;
  padding-bottom: 10px;
}

.area-block__line-link-text {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fontsize-text-normal);  /* 16px */
  color: var(--color-font-black-01);
  line-height: normal;
  transition: color 0.2s ease;
}

.area-block__line-link-text:hover {
  color: var(--color-font-keycolor);
}

.area-block__line-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.area-block__line-link-line {
  height: 1px;
  background-color: var(--color-border-gray-01);  /* #dddddd */
  width: 100%;
}

/* Block 5: 2本横並びリンク */
.area-block__multi-links {
  display: flex;
  gap: var(--space-03);  /* 30px */
  align-items: flex-start;
}

/* Block 6: タイトルボーダーオーバーライド（ソリッド・グレー） */
.area-block__ttl--green {
  border-bottom: 1px solid #8c9eae;
}

/* desc内の段落マージンリセット */
.area-block__desc p {
  margin: 0;
}

/* Block 6: グリーン背景 */
.area-block--green {
  background-color: var(--color-bg-green-01);
  padding: var(--margin-block-02);  /* 60px */
  border-radius: var(--radius-nml);
  align-items: center;
  gap: var(--margin-block-01);
}

.area-block--green .area-block__img {
  width: 480px;
  height: 307.2px;
  position: relative;
  flex-shrink: 0;
}

.area-block--green .area-block__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}


/* ============================================================
   各市町のご紹介（Area Cities Slider）
   ============================================================ */
.area-cities {
  display: flex;
  flex-direction: column;
  gap: var(--margin-block-02);  /* 60px */
  /* area-page-main の左右パディングを打ち消して全幅表示（index.html の .area と同等） */
  /* margin-left: calc(-1 * var(--container-medium));
  margin-right: calc(-1 * var(--container-medium)); 
  padding: var(--margin-block-02) 0; */
  background-color: var(--color-bg-gray-03);
}

.area-cities__ttl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* 負のマージン分をパディングで補正してタイトルをインデント */
  padding-left: var(--container-medium);
  padding-right: var(--container-medium);
}

.area-cities__ttl-en {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: var(--fontsize-text-medium);  /* 18px */
  color: var(--color-font-keycolor);
  line-height: normal;
}

.area-cities__ttl-ja {
  font-family: var(--font-heading);
  font-size: var(--fontsize-heading-section);  /* 32px */
  font-weight: 700;
  color: var(--color-font-black-01);
  line-height: 1.7;
  letter-spacing: 2.24px;
}

/* ============================================================
   アクセスセクション
   ============================================================ */
.area-access {
  display: flex;
  flex-direction: column;
  gap: var(--margin-block-02);
  padding-right: var(--container-medium);
  padding-left: var(--container-medium);
}
}

.area-access__inner {
  display: flex;
  flex-direction: column;
  gap: var(--margin-block-01);  /* 40px — Figma: gap-40px */
}

.area-access__ttl {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.area-access__ttl-en {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: var(--fontsize-text-medium);  /* 18px */
  color: var(--color-font-keycolor);
  line-height: normal;
}

.area-access__ttl-ja {
  font-family: var(--font-heading);
  font-size: var(--fontsize-heading-section);  /* 32px */
  font-weight: 700;
  color: var(--color-font-black-01);
  line-height: 1.7;
  letter-spacing: 2.24px;
}

.area-access__content {
  display: flex;
  gap: var(--margin-block-02);  /* 60px — Figma: gap-60px */
  align-items: flex-start;
}

.area-access__map {
  flex-shrink: 0;
  width: 648px;
}

.area-access__map img {
  width: 100%;
  height: 450px;
  display: block;
  object-fit: cover;
  border-radius: 13.5px;
  border: 1px solid var(--color-border-gray-01);
  max-width: none;  /* トラップ回避: width:100%を有効にするためmax-width:noneを指定 */
}

.area-access__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-02);       /* 20px */
  align-items: flex-start;    /* ボタンの伸び防止（トラップ2回避） */
}

.area-access__text {
  font-family: var(--font-body);
  font-size: var(--fontsize-text-normal);  /* 16px */
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.16px;
  color: var(--color-font-black-01);
  white-space: nowrap;
}

.area-access__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.area-access__list-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.area-access__list-icon {
  width: 4px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;  /* line-height 2 の中央揃え補正 */
  display: block;
}

.area-access__list-text {
  font-family: var(--font-body);
  font-size: var(--fontsize-text-normal);  /* 16px */
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.16px;
  color: var(--color-font-black-01);
  width: 388px;
}

.area-access__btn {
  padding-top: var(--space-02);  /* 20px */
}

/* ============================================================
   エリアカルーセル（Area Cities Slider）
   ============================================================ */

/* ----- Area Carousel ----- */
.area__carousel {
  position: relative;
}

.area__track-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.area__track-wrapper::-webkit-scrollbar { display: none; }

.area__track {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.area__slide {
  flex: 0 0 auto;
  scroll-snap-align: center;
}
.area__slide:first-child { margin-left: calc(50vw - 560px); }
.area__slide:last-child  { margin-right: calc(50vw - 560px); }
.area__slide--ghost { pointer-events: none; }
.area__track > .area__slide--clone:first-child { margin-left: 0; }
.area__track > .area__slide--clone:last-child  { margin-right: 0; }

/* ----- Area Card ----- */
.area-card {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  width: 1120px;
  padding: 40px 40px 40px 64px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-gray-01);
  border-radius: var(--radius-nml);
}
.area-card__content {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
}
.area-card__ttl {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.area-card__tagline {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: var(--fontsize-text-normal);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.16px;
  color: var(--color-font-black-01);
}
.area-card__name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.area-card__pin {
  width: 21px;
  height: 28px;
  flex-shrink: 0;
}
.area-card__name {
  font-family: var(--font-heading);
  font-size: var(--fontsize-text-xxxlarge);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 1.4px;
  color: var(--color-font-black-01);
}
.area-card__summary {
  font-family: var(--font-body);
  font-size: var(--fontsize-text-normal);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.16px;
  color: var(--color-font-black-01);
  margin-top: 16px;
}
.area-card__btn { margin-top: 24px; }

/* ----- Card Images ----- */
.area-card__imgs {
  position: relative;
  flex-shrink: 0;
  width: 614px;
  height: 320px;
}
.area-card__img-main {
  position: absolute;
  top: 0;
  right: 0;
  width: 480px;
  height: 320px;
  border-radius: 12px;
  overflow: hidden;
}
.area-card__img-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.area-card__img-circle {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--color-bg-white);
  z-index: 1;
}
.area-card__img-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----- Nav Buttons ----- */
.area__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}
.area__nav-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.area__nav-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 14px;
}
.area__nav-arrow--prev {
  transform: translate(-50%, -50%) rotate(180deg);
}
.area__nav--prev { left: calc(50vw - 580px); }
.area__nav--next { right: calc(50vw - 580px); }
.area__nav[disabled] { opacity: 0.3; pointer-events: none; }

/* ----- Btn fill-medium (card内) ----- */
.btn--fill-medium {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 15px 30px;
  background: var(--color-bg-keycolor-02);
  color: var(--color-font-white-01);
  border-radius: var(--radius-rounded);
  font-family: var(--font-heading);
  font-size: var(--fontsize-text-normal);
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
}
.btn__icon-circle {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-block;
}
.btn__icon-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.btn__icon-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 10px;
}

/* ============================================================
   レスポンシブ（モバイル: max-width 767px）
   ============================================================ */
@media (max-width: 767px) {
  /* ページ全体 */
  .area-page-main {
    padding-top: 92px;                      /* モバイルヘッダー高さ */
    padding-right: var(--container-medium); /* 20px (auto-override from common.css) */
    padding-bottom: var(--margin-block-03); /* 80px */
    padding-left: var(--container-medium);  /* 20px */
    gap: var(--margin-block-01);            /* 40px */
  }

  .area-page-content {
    gap: var(--margin-block-03);  /* 80px */
  }

  /* ページタイトル */
  .page-ttl__ja {
    font-size: 32px;
    letter-spacing: 1.6px;
  }

  /* Leadセクション */
  .area-lead {
    flex-direction: column;
    gap: var(--margin-block-01);  /* 40px */
  }

  .area-lead__text {
    width: 100%;
  }

  .area-lead__heading {
    font-size: var(--fontsize-heading-section);  /* 32px */
  }

  .area-lead__photo {
    width: 260px;
    height: 400px;
  }

  /* 五感ブロック */
  .area-senses__blocks {
    gap: var(--margin-block-02);  /* 60px */
  }

  .area-block {
    flex-direction: column;
    gap: var(--space-03);  /* 30px */
  }

  .area-block--reverse {
    flex-direction: column;
  }

  .area-block__img {
    width: 100%;
    height: 240px;
  }

  .area-block__img img {
    max-width: 100%;  /* モバイルでは通常のリセット */
  }

  .area-block--green {
    padding: var(--margin-block-01);  /* 40px */
  }

  .area-block--green .area-block__img {
    width: 100%;
    height: 220px;
  }

  .area-block--green .area-block__img img {
    max-width: 100%;
  }

  /* アクセス */
  .area-access__content {
    flex-direction: column;
    gap: var(--margin-block-01);  /* 40px */
  }

  .area-access__map {
    width: 100%;
  }

  .area-access__map img {
    height: auto;
  }

  .area-access__info {
    width: 100%;
  }

  .area-access__list-text {
    width: auto;
  }

  /* ===== Area Carousel モバイル ===== */

  /* navボタン非表示 */
  .area__nav { display: none; }

  /* トラック gap を 8px に */
  .area__track { gap: 8px; }

  /* スライド幅: 中央1枚 + 左右ちょい見せ */
  .area__slide {
    width: calc(100vw - 70px);
  }

  /* 先頭・末尾の実スライドにセンタリング用マージン */
  .area__slide:first-child { margin-left: 35px; }
  .area__slide:last-child  { margin-right: 35px; }

  /* カード: 縦レイアウトに変更 */
  .area-card {
    flex-direction: column;
    gap: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
  }

  /* 画像セクションを上に並べ替え */
  .area-card__imgs {
    order: -1;
    position: relative;
    width: 100%;
    height: 180px;
    padding: 20px 20px 0;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  /* メイン画像: 87%幅 × 144px */
  .area-card__img-main {
    position: absolute;
    top: 20px;
    left: 20px;
    width: calc(87% - 10px);
    height: 144px;
    border-radius: 8px;
    right: auto;
    bottom: auto;
  }

  /* 円形画像: 74×74px、右寄せ、メイン画像と重なる */
  .area-card__img-circle {
    position: absolute;
    top: 105px;
    right: 20px;
    width: 74px;
    height: 74px;
    border: 3px solid var(--color-bg-white);
    border-radius: 50%;
    z-index: 1;
  }

  /* コンテンツセクション */
  .area-card__content {
    padding: 12px 20px 30px;
    box-sizing: border-box;
    width: 100%;
    flex: none;
  }

  /* サマリーの上マージン調整 */
  .area-card__summary { margin-top: 8px; }

  /* ボタンの上マージン調整 */
  .area-card__btn { margin-top: 16px; }
}