@charset "UTF-8";

/*
 * ACCESS page
 * 静かな旅程を、既存ページの余白・縦組み・細い罫線で編集する。
 */
.access_page {
  --access-ink: #292c28;
  --access-muted: #747a71;
  --access-accent: #687866;
  --access-line: #d9d9d2;
  --access-paper: #f5f4ef;
  --access-shadow: 0 calc(16 * var(--u)) calc(36 * var(--u)) rgba(0, 0, 0, 0.1);
  color: var(--access-ink);
}

.access_page #kv.access_kv {
  background-image: url('../images/access/img_fv-pc.jpg');
  background-position: center center;
}

.access_page #kv.access_kv::before {
  background: linear-gradient(90deg, rgba(18, 27, 20, 0.42), rgba(18, 27, 20, 0.08) 70%, rgba(18, 27, 20, 0.18));
}

.access_skip {
  position: fixed;
  top: calc(-48 * var(--u));
  left: calc(20 * var(--u));
  z-index: 40000;
  padding: calc(10 * var(--u)) calc(18 * var(--u));
  background: #fff;
  color: var(--access-ink);
  font-size: calc(14 * var(--u));
}

.access_skip:focus {
  top: calc(16 * var(--u));
}

.access_main {
  overflow: hidden;
  color: var(--access-ink);
}

.access_page .access_main .container {
  max-width: var(--max-width);
  padding-right: calc(60 * var(--u));
  padding-left: calc(60 * var(--u));
}

.access_intro {
  padding-top: calc(120 * var(--u));
  padding-bottom: calc(92 * var(--u));
}

.access_intro_inner {
  display: grid;
  grid-template-columns: minmax(calc(460 * var(--u)), auto) 1fr;
  gap: calc(80 * var(--u));
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-right: calc(60 * var(--u));
  padding-left: calc(60 * var(--u));
}

.access_intro_copy {
  padding-left: calc(28 * var(--u));
  border-left: 1px solid var(--access-line);
}

.access_kicker,
.access_section_head > .en,
.access_sightseeing_copy > .en,
.access_subhead > .en,
.access_card_label {
  display: block;
  margin: 0 0 calc(20 * var(--u));
  color: var(--access-accent);
  font-size: calc(14 * var(--u));
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.access_intro_title {
  margin: 0 0 calc(34 * var(--u));
  font-size: calc(38 * var(--u));
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.access_body {
  margin: 0;
  font-size: calc(16 * var(--u));
  line-height: calc(36 * var(--u));
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.access_intro_media {
  position: relative;
  width: 100%;
  max-width: calc(780 * var(--u));
  margin: 0 0 0 auto;
  aspect-ratio: 1170 / 780;
}

.access_intro_media::before {
  position: absolute;
  top: calc(20 * var(--u));
  left: calc(-20 * var(--u));
  width: 100%;
  height: 100%;
  border: 1px solid var(--access-line);
  content: '';
}

.access_intro_media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.access_intro_media figcaption {
  position: absolute;
  right: calc(20 * var(--u));
  bottom: calc(18 * var(--u));
  z-index: 2;
  color: #fff;
  font-size: calc(13 * var(--u));
  letter-spacing: 0.2em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.access_anchor_wrap {
  max-width: var(--max-width);
  margin: calc(86 * var(--u)) auto 0;
  padding-right: calc(60 * var(--u));
  padding-left: calc(60 * var(--u));
}

.access_anchor_nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: calc(720 * var(--u));
  margin: 0 auto;
  border-top: 1px solid var(--access-line);
}

.access_anchor_nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  min-height: calc(80 * var(--u));
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  border-bottom: 1px solid var(--access-line);
  font-size: calc(16 * var(--u));
  letter-spacing: 0.12em;
  transition: color 0.25s ease, padding 0.25s ease;
}

.access_anchor_nav a + a {
  border-left: 1px solid var(--access-line);
}

.access_anchor_nav a:hover {
  padding-left: calc(26 * var(--u));
  color: var(--access-accent);
}

.access_anchor_no {
  color: #a7aca5;
  font-size: calc(13 * var(--u));
  letter-spacing: 0.12em;
}

.access_anchor_arrow {
  position: relative;
  width: calc(30 * var(--u));
  height: 1px;
  margin-left: auto;
  background: var(--access-line);
  transition: width 0.25s ease, background 0.25s ease;
}

.access_anchor_arrow::after {
  position: absolute;
  top: calc(-3 * var(--u));
  right: 0;
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  content: '';
  transform: rotate(45deg);
}

.access_anchor_nav a:hover .access_anchor_arrow {
  width: calc(42 * var(--u));
  background: currentColor;
}

.access_main .sec {
  padding-top: calc(130 * var(--u));
  padding-bottom: calc(130 * var(--u));
}

.access_location {
  scroll-margin-top: calc(24 * var(--u));
  background: #fff;
}

.access_section_head {
  max-width: calc(700 * var(--u));
  margin: 0 auto calc(58 * var(--u));
  text-align: center;
}

.access_section_head > .en,
.access_sightseeing_copy > .en {
  margin-bottom: calc(16 * var(--u));
  color: #a2a9a0;
}

.access_section_head h2,
.access_sightseeing_copy h2 {
  margin: 0 0 calc(18 * var(--u));
  font-size: calc(36 * var(--u));
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16em;
}

.access_section_head p,
.access_sightseeing_copy > p {
  margin: 0;
  color: var(--access-muted);
  font-size: calc(15 * var(--u));
  line-height: calc(32 * var(--u));
  letter-spacing: 0.04em;
}

.access_section_head_center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.access_location_grid {
  display: grid;
  grid-template-columns: calc(500 * var(--u)) 1fr;
  gap: calc(70 * var(--u));
  align-items: stretch;
  max-width: var(--max-width);
}

.access_address_card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(460 * var(--u));
  padding: calc(56 * var(--u));
  background: var(--access-paper);
  align-items: center;
}

.access_address_card .access_card_label {
  margin-bottom: calc(28 * var(--u));
}

.access_address_card h3 {
  margin: 0 0 calc(26 * var(--u));
  font-size: calc(28 * var(--u));
  font-weight: 500;
  letter-spacing: 0.16em;
}

.access_address {
  margin: 0 0 calc(24 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: calc(32 * var(--u));
  letter-spacing: 0.04em;
}

.access_phone {
  margin: 0 0 calc(34 * var(--u));
  font-size: calc(20 * var(--u));
  letter-spacing: 0.08em;
}

.access_phone a:hover {
  color: var(--access-accent);
}

.access_map_button {
  width: calc(250 * var(--u)) !important;
  margin: 0;
}

.access_map_frame {
  min-height: calc(460 * var(--u));
}

.access_map_frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: calc(460 * var(--u));
  border: 0;
}

.access_route_section {
  background: var(--access-paper);
}

.access_route_group {
  max-width: var(--max-width);
  margin: 0 auto calc(92 * var(--u));
}

.access_route_group:last-of-type {
  margin-bottom: calc(78 * var(--u));
}

.access_subhead {
  display: flex;
  align-items: baseline;
  gap: calc(24 * var(--u));
  margin-bottom: calc(28 * var(--u));
  padding-bottom: calc(18 * var(--u));
  border-bottom: 1px solid var(--access-line);
}

.access_subhead > .en {
  margin: 0;
  color: #a2a9a0;
}

.access_subhead h3 {
  margin: 0;
  font-size: calc(24 * var(--u));
  font-weight: 500;
  letter-spacing: 0.12em;
}

.access_route_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(18 * var(--u));
}

.access_route_card,
.access_car_route {
  display: grid;
  grid-template-columns: calc(170 * var(--u)) 1fr calc(120 * var(--u));
  min-height: calc(118 * var(--u));
  border: 1px solid var(--access-line);
  background: #fff;
}

.access_route_from,
.access_route_line,
.access_route_to {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(20 * var(--u));
}

.access_route_from {
  font-size: calc(16 * var(--u));
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.access_route_line {
  position: relative;
  align-items: center;
  gap: calc(6 * var(--u));
  color: var(--access-muted);
  text-align: center;
  font-size: calc(13 * var(--u));
  letter-spacing: 0.04em;
}

.access_route_line::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(22 * var(--u));
  height: 1px;
  background: var(--access-line);
  content: '';
}

.access_route_line::after {
  position: absolute;
  top: calc(50% - 3 * var(--u));
  left: calc(18 * var(--u));
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-top: 1px solid var(--access-accent);
  border-right: 1px solid var(--access-accent);
  content: '';
  transform: rotate(45deg);
}

.access_route_line strong {
  color: var(--access-ink);
  font-weight: 500;
  letter-spacing: 0.08em;
}

.access_route_to {
  align-items: center;
  border-left: 1px solid var(--access-line);
  text-align: center;
}

.access_route_to span {
  color: #a2a9a0;
  font-size: calc(12 * var(--u));
  letter-spacing: 0.16em;
}

.access_route_to strong {
  margin-top: calc(5 * var(--u));
  font-size: calc(17 * var(--u));
  font-weight: 500;
  letter-spacing: 0.12em;
}

.access_car_group {
  margin-bottom: calc(84 * var(--u));
}

.access_car_route {
  max-width: calc(900 * var(--u));
  margin: 0 auto;
}

.access_support_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(48 * var(--u));
  max-width: var(--max-width);
}

.access_support_card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: calc(28 * var(--u));
  align-items: center;
  padding-top: calc(28 * var(--u));
  border-top: 1px solid var(--access-line);
}

.access_support_copy .access_card_label {
  margin-bottom: calc(16 * var(--u));
  color: #a2a9a0;
}

.access_support_copy h3 {
  margin: 0 0 calc(18 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.12em;
}

.access_support_copy p:last-child {
  margin: 0;
  color: var(--access-muted);
  font-size: calc(14 * var(--u));
  line-height: calc(29 * var(--u));
  letter-spacing: 0.025em;
}

.access_support_card figure {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.access_support_card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.access_support_card:hover img {
  transform: scale(1.04);
}

.access_sightseeing_map {
  scroll-margin-top: calc(24 * var(--u));
  background: #ebe9e1;
}

.access_sightseeing_inner {
  display: grid;
  grid-template-columns: calc(470 * var(--u)) 1fr;
  gap: calc(120 * var(--u));
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-right: calc(60 * var(--u));
  padding-left: calc(60 * var(--u));
}

.access_sightseeing_copy {
  padding-left: calc(28 * var(--u));
  border-left: 1px solid rgba(104, 120, 102, 0.45);
}

.access_distance_note {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  margin-top: calc(48 * var(--u));
  padding-top: calc(18 * var(--u));
  border-top: 1px solid rgba(104, 120, 102, 0.35);
}

.access_distance_note strong {
  color: var(--access-accent);
  font-size: calc(22 * var(--u));
  font-weight: 400;
  letter-spacing: 0.18em;
}

.access_distance_note span {
  color: var(--access-muted);
  font-size: calc(14 * var(--u));
  letter-spacing: 0.08em;
}

.access_sightseeing_map_image {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: calc(34 * var(--u));
  background: rgba(255, 255, 255, 0.44);
}

.access_sightseeing_map_image img {
  display: block;
  width: 100%;
  max-width: calc(660 * var(--u));
  height: auto;
}

.access_spots .access_section_head {
  max-width: calc(1000 * var(--u));
}

.access_spots .access_section_head h2 {
  white-space: nowrap;
}

.access_spots_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(62 * var(--u)) calc(30 * var(--u));
  max-width: var(--max-width);
}

.access_spot_card {
  margin: 0;
}

.access_spot_card figure {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--access-paper);
}

.access_spot_card figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.access_spot_card:hover figure img {
  transform: scale(1.045);
}

.access_spot_body {
  min-height: calc(108 * var(--u));
  padding: calc(20 * var(--u)) calc(10 * var(--u)) 0 0;
  border-top: 1px solid var(--access-line);
  text-align: center;
}

.access_spot_body h3 {
  margin: 0 0 calc(14 * var(--u));
  font-size: calc(21 * var(--u));
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.12em;
}

.access_spot_time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  margin: 0;
  color: var(--access-muted);
  font-size: calc(13 * var(--u));
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.access_spot_time span {
  display: block;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border: 1px solid var(--access-accent);
  border-radius: 50%;
}

/* STAYのエクスカーションへの導線ボタン */
.access_spots_more {
  margin-top: calc(56 * var(--u));
  text-align: center;
}

@media (max-width: 991px) {
  .access_page .access_main .container,
  .access_intro_inner,
  .access_anchor_wrap,
  .access_sightseeing_inner {
    padding-right: 20px;
    padding-left: 20px;
  }

  .access_skip {
    top: -48px;
    left: 20px;
    padding: 10px 18px;
    font-size: 14px;
  }

  .access_skip:focus {
    top: 16px;
  }

  .access_intro {
    padding-top: 80px;
    padding-bottom: 68px;
  }

  .access_intro_inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .access_intro_copy {
    max-width: 640px;
    margin: 0 auto;
    padding-left: 16px;
  }

  .access_kicker,
  .access_section_head > .en,
  .access_sightseeing_copy > .en,
  .access_subhead > .en,
  .access_card_label {
    margin-bottom: 14px;
    font-size: 12px;
  }

  .access_intro_title {
    margin-bottom: 22px;
    font-size: 28px;
    line-height: 1.65;
    letter-spacing: 0.12em;
    white-space: normal;
  }

  .access_body {
    max-width: none;
    font-size: 14px;
    line-height: 2.2;
    white-space: normal;
  }

  .access_intro_media {
    max-width: 760px;
    margin: 0 auto;
    aspect-ratio: 16 / 10;
  }

  .access_intro_media::before {
    top: 12px;
    left: -12px;
  }

  .access_intro_media figcaption {
    right: 16px;
    bottom: 14px;
    font-size: 11px;
  }

  .access_anchor_wrap {
    margin-top: 64px;
  }

  .access_anchor_nav {
    max-width: 640px;
  }

  .access_anchor_nav a {
    min-height: 62px;
    gap: 12px;
    padding: 12px 14px;
    font-size: 14px;
  }

  .access_anchor_nav a:hover {
    padding-left: 18px;
  }

  .access_anchor_no {
    font-size: 11px;
  }

  .access_anchor_arrow {
    width: 24px;
  }

  .access_anchor_arrow::after {
    top: -3px;
    width: 6px;
    height: 6px;
  }

  .access_main .sec {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .access_section_head {
    max-width: 640px;
    margin-bottom: 42px;
  }

  .access_section_head h2,
  .access_sightseeing_copy h2 {
    margin-bottom: 14px;
    font-size: 26px;
    line-height: 1.6;
    letter-spacing: 0.11em;
  }

  .access_section_head p,
  .access_sightseeing_copy > p {
    font-size: 14px;
    line-height: 2;
  }

  .access_location_grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .access_address_card {
    min-height: auto;
    padding: 36px 28px;
  }

  .access_address_card h3 {
    margin-bottom: 18px;
    font-size: 24px;
  }

  .access_address {
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 2;
  }

  .access_phone {
    margin-bottom: 24px;
    font-size: 18px;
  }

  .access_map_button {
    width: 250px !important;
    max-width: 100%;
  }

  .access_map_frame,
  .access_map_frame iframe {
    min-height: 360px;
    height: 360px;
  }

  .access_route_group {
    margin-bottom: 58px;
  }

  .access_subhead {
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 14px;
  }

  .access_subhead h3 {
    font-size: 20px;
  }

  .access_route_list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .access_route_card,
  .access_car_route {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 20px;
    gap: 14px;
    text-align: center;
  }

  .access_route_from,
  .access_route_line,
  .access_route_to {
    padding: 0;
  }

  .access_route_from {
    font-size: 15px;
    white-space: normal;
  }

  .access_route_line {
    gap: 4px;
    font-size: 13px;
  }

  .access_route_line::before,
  .access_route_line::after {
    display: none;
  }

  .access_route_to {
    padding-top: 14px;
    border-top: 1px solid var(--access-line);
    border-left: 0;
  }

  .access_route_to span {
    font-size: 11px;
  }

  .access_route_to strong {
    font-size: 15px;
  }

  .access_car_group {
    margin-bottom: 56px;
  }

  .access_support_grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .access_support_card {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding-top: 20px;
  }
  
  .access_support_copy {
    align-items: center;
    text-align: center;
  }

  .access_support_copy h3 {
    margin-bottom: 12px;
    font-size: 18px;
  }

  .access_support_copy p:last-child {
    font-size: 13px;
    line-height: 1.9;
  }

  .access_sightseeing_inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .access_sightseeing_copy {
    max-width: 640px;
    margin: 0 auto;
    padding-left: 16px;
  }

  .access_distance_note {
    max-width: 280px;
    margin-top: 28px;
    padding-top: 14px;
  }

  .access_distance_note strong {
    font-size: 20px;
  }

  .access_distance_note span {
    font-size: 13px;
  }

  .access_sightseeing_map_image {
    max-width: 680px;
    margin: 0 auto;
    padding: 24px;
  }

  .access_spots {
    padding-bottom: 90px !important;
  }

  .access_spots .access_section_head h2 {
    white-space: normal;
  }

  .access_spots_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 42px 20px;
  }

  .access_spot_body {
    min-height: 96px;
    padding: 16px 0 0;
  }

  .access_spot_body h3 {
    margin-bottom: 10px;
    font-size: 18px;
    letter-spacing: 0.08em;
  }

  .access_spot_time {
    gap: 8px;
    font-size: 12px;
  }

  .access_spot_time span {
    width: 7px;
    height: 7px;
  }

  .access_spots_more {
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .access_page #kv.access_kv {
    background-position: 56% center;
  }

  .access_intro {
    padding-top: 60px;
    padding-bottom: 56px;
  }

  .access_intro_inner {
    gap: 32px;
  }

  .access_intro_title {
    font-size: 24px;
    letter-spacing: 0.1em;
  }

  .access_anchor_wrap {
    margin-top: 50px;
  }

  .access_anchor_nav {
    grid-template-columns: 1fr;
  }

  .access_anchor_nav a + a {
    border-left: 0;
  }

  .access_location_grid {
    gap: 16px;
  }

  .access_address_card {
    padding: 30px 22px;
  }

  .access_map_frame,
  .access_map_frame iframe {
    min-height: 280px;
    height: 280px;
  }

  .access_support_card {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .access_support_card figure {
    order: -1;
  }

  .access_sightseeing_inner {
    gap: 28px;
  }

  .access_sightseeing_map_image {
    padding: 14px;
  }

  .access_spots_grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .access_spot_body {
    min-height: auto;
    padding-bottom: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .access_page .anime_fade,
  .access_page .anime_fade2 {
    opacity: 1 !important;
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }

  .access_page .access_anchor_nav a,
  .access_page .access_anchor_arrow,
  .access_page .access_support_card img,
  .access_page .access_spot_card figure img {
    transition: none !important;
  }
}

/* 英語版（.lang-en）H2・H3 見出しの動的スケーリング（PC端サイズ維持・小画面動的縮小） */
.lang-en .access_intro_title {
  font-size: clamp(22px, calc(18px + 1.4vw), calc(38 * var(--u)));
  line-height: 1.4;
  letter-spacing: 0.08em;
}

.lang-en .access_section_head h2,
.lang-en .access_sightseeing_copy h2 {
  font-size: clamp(20px, calc(17px + 1.2vw), calc(34 * var(--u)));
  line-height: 1.4;
  letter-spacing: 0.06em;
}

.lang-en .access_location h3,
.lang-en .access_route h3 {
  font-size: clamp(16px, calc(14px + 0.5vw), calc(20 * var(--u)));
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.lang-en .access_spot_body h3 {
  font-size: clamp(15px, calc(13px + 0.4vw), calc(18 * var(--u)));
  line-height: 1.4;
  letter-spacing: 0.03em;
}

.lang-en .access_route_from,
.lang-en .access_spots .access_section_head h2 {
  white-space: normal;
}