/* =====================================================
   SHIROITABI PAGE — assets/css/shiroitabi.css
   ===================================================== */

/* =====================================================
   HERO / MV
   ===================================================== */

.shiroitabi-mv {
  position: relative;
  height: clamp(220px, 30.9vw, 593px);
  overflow: hidden;
}

.shiroitabi-mv__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  .shiroitabi-mv {
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 180px;
  }
}

/* =====================================================
   HEADING TITLE
   ===================================================== */

.shiroitabi-heading {
  text-align: center;
  padding-top: clamp(32px, 4.2vw, 80px);
  padding-bottom: clamp(16px, 2vw, 40px);
}

.shiroitabi-heading__img {
  max-width: clamp(200px, 26vw, 357px);
  height: auto;
  display: inline-block;
}

/* =====================================================
   INTRO
   ===================================================== */

.shiroitabi-intro {
  text-align: center;
  padding-top: clamp(40px, 5.5vw, 106px);
  padding-bottom: clamp(40px, 5vw, 80px);
  max-width: calc(1382px + clamp(32px, 5vw, 80px) * 2);
  margin-inline: auto;
  padding-inline: clamp(16px, 4.17vw, 80px);
}

.shiroitabi-intro__area {
  font-family: var(--font-mincho);
  font-size: clamp(1.5rem, 1.98vw, 2.375rem);
  font-weight: 700;
  color: #4d4c4c;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.shiroitabi-intro__time {
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: clamp(0.875rem, 1.15vw, 1.375rem);
  color: #4d4c4c;
  letter-spacing: 0.05em;
  margin-top: 8px;
  line-height: 1.75;
}

.shiroitabi-intro__text {
  margin-top: clamp(24px, 3vw, 56px);
}

.shiroitabi-intro__lead-heading {
  font-family: var(--font-mincho);
  font-size: clamp(1rem, 1.25vw, 1.5rem);
  font-weight: 700;
  color: #4d4c4c;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

.shiroitabi-intro__text p {
  font-family: var(--font-mincho);
  font-size: clamp(0.875rem, 1.04vw, 1.25rem);
  line-height: 2.25;
  color: #4d4c4c;
  letter-spacing: 0.02em;
}

.shiroitabi-intro__deco {
  margin: clamp(24px, 4vw, 60px) auto 0;
  max-width: min(438px, 60vw);
  mix-blend-mode: multiply;
}

.shiroitabi-intro__deco img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  .shiroitabi-intro {
    padding-top: 32px;
    padding-bottom: 40px;
  }

  .shiroitabi-intro__text {
    text-align: left;
  }

  .shiroitabi-intro__text p {
    font-size: 0.9375rem;
    line-height: 2;
  }

  .shiroitabi-intro__deco {
    max-width: 70vw;
  }
}

/* =====================================================
   OVERVIEW MAP + LEGEND
   ===================================================== */

.shiroitabi-overview {
  padding-inline: clamp(16px, 10.57vw, 203px);
  padding-bottom: clamp(40px, 5vw, 80px);
}

.shiroitabi-overview__inner {
  max-width: 1514px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 771px 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  border: 1px solid #4d4c4c;
  padding: clamp(16px, 2.5vw, 40px);
}

.shiroitabi-overview__map {
  display: block;
  width: 100%;
  height: auto;
}

.shiroitabi-overview__legend {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Legend image */
.shiroitabi-legend__img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Legend list */
.shiroitabi-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shiroitabi-legend__item {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Route text labels */
.shiroitabi-legend__route {
  font-family: 'Meiryo', 'Hiragino Kaku Gothic ProN', var(--font-gothic);
  font-weight: 700;
  font-size: clamp(0.75rem, 0.94vw, 1.125rem);
  min-width: 80px;
  display: inline-block;
  flex-shrink: 0;
}

.shiroitabi-legend__route--a { color: #D91C65; }
.shiroitabi-legend__route--b { color: #00de28; }
.shiroitabi-legend__route--c { color: #0082ff; }

/* Dashed line indicators */
.shiroitabi-legend__line {
  display: inline-block;
  width: 48px;
  height: 3px;
  flex-shrink: 0;
}

.shiroitabi-legend__line--ridge {
  background: repeating-linear-gradient(
    90deg,
    #888 0, #888 8px,
    transparent 8px, transparent 13px
  );
}

.shiroitabi-legend__line--planned {
  background: repeating-linear-gradient(
    90deg,
    #bbb 0, #bbb 6px,
    transparent 6px, transparent 11px
  );
}

/* Marker icons (start/goal/point) */
.shiroitabi-legend__marker {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}

.shiroitabi-legend__marker--start { background: #3a5a3a; }
.shiroitabi-legend__marker--goal  { background: #c8a84b; }
.shiroitabi-legend__marker--point {
  background: #fff;
  border: 2px solid #4d4c4c;
}

.shiroitabi-legend__name {
  font-family: var(--font-gothic);
  font-size: clamp(0.8125rem, 0.94vw, 1.125rem);
  font-weight: 700;
  color: #4d4c4c;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.shiroitabi-legend__name small {
  font-size: 0.85em;
  font-weight: 400;
}

.shiroitabi-overview__map-credit {
  font-family: var(--font-gothic);
  font-size: 0.75rem;
  color: #4d4c4c;
  line-height: 1.75;
  margin-top: 4px;
}

@media (max-width: 1200px) {
  .shiroitabi-overview__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .shiroitabi-overview {
    padding-inline: 16px;
    padding-bottom: 40px;
  }

  .shiroitabi-overview__inner {
    padding: 16px;
  }
}

/* =====================================================
   ROUTE SECTIONS (A / B / C)
   ===================================================== */

.shiroitabi-route {
  padding-inline: clamp(16px, 10.57vw, 203px);
  padding-top: clamp(48px, 6.25vw, 120px);
  padding-bottom: clamp(40px, 5vw, 80px);
}

/* Route header */
.shiroitabi-route__header {
  max-width: 1514px;
  margin-inline: auto;
  margin-bottom: clamp(16px, 2vw, 32px);
}

.shiroitabi-route__label {
  font-family: 'Meiryo', 'Hiragino Kaku Gothic ProN', var(--font-gothic);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.08vw, 2.5rem);
  line-height: 1;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.shiroitabi-route--a .shiroitabi-route__label { color: #D91C65; }
.shiroitabi-route--b .shiroitabi-route__label { color: #00de28; }
.shiroitabi-route--c .shiroitabi-route__label { color: #0082ff; }

.shiroitabi-route__title {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.125vw, 3.75rem);
  color: #4d4c4c;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

.shiroitabi-route__time {
  font-size: clamp(0.875rem, 1.25vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Route description */
.shiroitabi-route__desc {
  font-family: var(--font-mincho);
  font-size: clamp(0.9375rem, 1.25vw, 1.5rem);
  line-height: 2;
  color: #4d4c4c;
  margin-bottom: clamp(24px, 3vw, 48px);
  max-width: 1028px;
  margin-inline: auto;
}

/* Route map image */
.shiroitabi-route__map-wrap {
  max-width: 1514px;
  margin-inline: auto;
  margin-bottom: clamp(32px, 4vw, 64px);
  border: 2px solid;
}

.shiroitabi-route--a .shiroitabi-route__map-wrap { border-color: #d50404; }
.shiroitabi-route--b .shiroitabi-route__map-wrap { border-color: #0082ff; }
.shiroitabi-route--c .shiroitabi-route__map-wrap { border-color: #ffc800; }

.shiroitabi-route__map {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .shiroitabi-route {
    padding-inline: 16px;
    padding-top: 48px;
  }

  .shiroitabi-route__title {
    font-size: 1.75rem;
  }

  .shiroitabi-route__desc {
    font-size: 0.9375rem;
  }
}

/* =====================================================
   SPOT CARDS
   ===================================================== */

.shiroitabi-spot {
  display: grid;
  grid-template-columns: 1028fr 453fr;
  gap: clamp(16px, 1.72vw, 33px);
  max-width: 1514px;
  margin-inline: auto;
  margin-bottom: clamp(32px, 3.7vw, 55px);
  align-items: start;
}

.shiroitabi-spot__main {
  overflow: hidden;
}

.shiroitabi-spot__photo {
  display: block;
  width: 100%;
  height: clamp(220px, 34.2vw, 657px);
  object-fit: cover;
}

.shiroitabi-spot__info {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.5vw, 20px);
}

.shiroitabi-spot__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border-radius: 30%;
  font-family: var(--font-gothic);
  font-size: clamp(0.875rem, 1vw, 1.125rem);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.4em;
}

.shiroitabi-spot__num--a { background-color: #D91C65; }
.shiroitabi-spot__num--b { background-color: #00a020; }
.shiroitabi-spot__num--c { background-color: #0062cc; }

.shiroitabi-spot__title {
  font-family: var(--font-gothic);
  font-size: clamp(1rem, 1.46vw, 1.75rem);
  font-weight: 700;
  color: #4d4c4c;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.shiroitabi-spot__desc {
  font-family: var(--font-mincho);
  font-size: clamp(0.8125rem, 0.83vw, 1rem);
  line-height: 1.75;
  color: #4d4c4c;
}

.shiroitabi-spot__photo-sub {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 453 / 431;
  object-fit: cover;
}

@media (max-width: 1100px) {
  .shiroitabi-spot {
    grid-template-columns: 1fr;
  }

  .shiroitabi-spot__photo {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 767px) {
  .shiroitabi-spot {
    margin-bottom: 32px;
  }

  .shiroitabi-spot__title {
    font-size: 1.0625rem;
  }

  .shiroitabi-spot__desc {
    font-size: 0.875rem;
  }
}