@charset "UTF-8";
/* Break point
---------------------------------------------------------- */
/* Placeholder
---------------------------------------------------------- */
:root {
  --common-inner: min(100px,5%) ;
}

@media screen and (min-width: 960px) {
  html {
    scroll-padding-top: calc(var(--headerH) + 3rem);
  }
}

/* intro
---------------------------------------------------------- */
.p-routes__intro .intro-text {
  margin-block: 4em;
  font-family: var(--font-zen-maru);
  font-size: clamp(1.063rem, 0.987rem + 0.32vw, 1.375rem);
  font-weight: 500;
  text-align: center;
  line-height: 2;
}

.p-routes__map {
  margin-block: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* Nav
---------------------------------------------------------- */
.p-routes__nav-block {
  margin-inline: auto;
  max-width: 87rem;
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.p-routes__nav-title {
  margin-bottom: 1em;
  margin-inline: auto;
  padding: 0.3em 0.5em;
  font-size: clamp(1.875rem, 1.496rem + 1.62vw, 3.438rem);
  font-weight: bold;
  background-color: var(--color-point_02);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 0.2em;
  color: #fff;
  justify-self: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-family: var(--font-zen-maru);
}

.p-routes__nav-list {
  margin-bottom: 5em;
  font-size: clamp(1.25rem, 1.098rem + 0.65vw, 1.875rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5em;
}
@media screen and (min-width: 768px) {
  .p-routes__nav-list {
    margin-bottom: 9em;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5em 2em;
  }
}

.p-routes__nav-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  height: 100%;
  max-width: 10em;
}

/* Section
---------------------------------------------------------- */
.p-routes__common-text {
  font-size: var(--font-16-20);
  text-align: center;
  line-height: 2;
}

.p-routes__sec-inner {
  padding-inline: var(--common-inner);
}

.p-routes__point {
  padding-bottom: 1px;
  background-color: var(--color-back_yellow);
  position: relative;
}
.p-routes__point::before {
  content: "";
  display: block;
  font-size: clamp(2.125rem, 1.731rem + 1.68vw, 3.75rem);
  width: 50%;
  height: 1em;
  background-color: var(--color-back_yellow);
  position: absolute;
  bottom: calc(100% - 0.25em);
  left: 0;
  border-top-right-radius: 0.25em;
}
@media screen and (min-width: 768px) {
  .p-routes__point::before {
    height: 2em;
  }
}
.p-routes__point + .p-routes__point {
  margin-top: 5rem;
}
@media screen and (min-width: 768px) {
  .p-routes__point + .p-routes__point {
    margin-top: 10rem;
  }
}

.p-routes__point-title {
  font-size: clamp(2.125rem, 1.731rem + 1.68vw, 3.75rem);
  font-family: var(--font-zen-maru);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  ruby-align: start;
  font-weight: bold;
  gap: 0.25em;
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-routes__point-title {
    top: -1em;
  }
}
.p-routes__point-title rt {
  padding-bottom: 0.25em;
  font-weight: 500;
}
.p-routes__point-title svg {
  width: 1.1em;
  aspect-ratio: 72/105;
}

.p-routes__point-info {
  --color-disc: var(--color-point_03);
  font-family: var(--font-zen-maru);
  font-size: clamp(1.125rem, 1.019rem + 0.45vw, 1.563rem);
}
.p-routes__point-info .data-label {
  padding: 0.25em 0.5em;
  background-color: var(--color-point_03);
  color: #fff;
  border-radius: 0.25em;
  line-height: 1;
  text-align: center;
  justify-self: flex-start;
}
.p-routes__point-info .data-table {
  text-align: left;
}
.p-routes__point-info .data-table th {
  padding: 0.2em 1.5em 0.2em 0;
  font-weight: 500;
}
.p-routes__point-info .data-table th.font-bold {
  font-weight: bold;
}

.p-routes__info-block {
  display: grid;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2rem;
}
@media screen and (min-width: 768px) {
  .p-routes__info-block {
    grid-template-columns: 1fr 1fr;
  }
}

.p-routes__info-data-block {
  container-type: inline-size;
}

.p-routes__info-data {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.5em 2em;
}

@media screen and (min-width: 768px) {
  .p-routes__point-image {
    margin-right: var(--common-inner);
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}

.p-routes__point-map {
  margin-top: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 768px) {
  .p-routes__point-map {
    margin-top: 4rem;
  }
}

.p-routes__point-section {
  margin-block: 2rem;
  padding-block: 1.5rem;
  font-family: var(--font-zen-maru);
  background-color: #fff;
  border-radius: 1.5rem;
}
@media screen and (min-width: 768px) {
  .p-routes__point-section {
    margin-block: 4rem;
    padding-block: 3rem 5rem;
  }
}

.p-routes__sec-title {
  margin-bottom: 1em;
  font-size: clamp(1.563rem, 1.056rem + 2.16vw, 2.813rem);
  text-align: center;
  /* ドット線は .c-title_dot 側でテキスト幅に自動追従するため --line-size の指定は不要 */
}

.p-routes__bubble-title {
  padding: 0.2em 1em;
  margin-inline: auto;
  background-color: var(--bubble-color);
  color: #fff;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  border-radius: 5em;
  position: relative;
  text-align: center;
}
.p-routes__bubble-title::after {
  content: "";
  display: block;
  width: 0.6em;
  height: 0.6em;
  background-color: var(--bubble-color);
  position: absolute;
  top: calc(100% - 0.3em);
  left: calc(50% - 0.3em);
  border-radius: 50%;
}
.p-routes__bubble-title.history {
  margin-block: 2em 1em;
  --bubble-color: var(--color-point_03);
  font-size: clamp(1.5rem, 1.348rem + 0.65vw, 1.875rem);
}
.p-routes__bubble-title.sabou {
  --bubble-color: var(--color-point_03);
}
.p-routes__bubble-title.kankou {
  --bubble-color: #FB8D3E;
}
.p-routes__bubble-title.hirase {
  --bubble-color: gray;
}
.p-routes__bubble-title.north {
  --bubble-color: #22B573;
}
.p-routes__bubble-title.itoshiro {
  --bubble-color: #619d01;
}
.p-routes__bubble-title.pond {
  --bubble-color: #26a8dd;
}
.p-routes__bubble-title.gozengamine {
  --bubble-color: #715508;
}

.p-routes__ribbon-title {
  margin: 2em auto 1em;
  font-size: clamp(1.125rem, 0.821rem + 1.3vw, 1.875rem);
}

/* Calendar
---------------------------------------------------------- */
.p-routes__calendar-table {
  --color-flower: #b482e9;
  --color-autumn: #f39a32;
  --color-tableBorder: #9E9E9E;
  --bar-height: 1.25em;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--font-zen-maru);
  font-size: clamp(0.75rem, 0.547rem + 0.86vw, 1.25rem);
  background-color: #fff;
}
.p-routes__calendar-table th,
.p-routes__calendar-table td {
  padding: 0.6em 0.4em;
  line-height: 1.4;
  font-weight: normal;
}
.p-routes__calendar-table th.border-left-none,
.p-routes__calendar-table td.border-left-none {
  -webkit-border-start: none !important;
          border-inline-start: none !important;
}
.p-routes__calendar-table th.border-right-none,
.p-routes__calendar-table td.border-right-none {
  -webkit-border-end: none !important;
          border-inline-end: none !important;
}
.p-routes__calendar-table thead {
  border-bottom: 4px solid #fff;
}
.p-routes__calendar-table thead th {
  background-color: #F3F3F3;
  border-inline: 1px solid var(--color-tableBorder);
  text-align: center;
}
.p-routes__calendar-table thead th:first-child {
  width: 30%;
}
.p-routes__calendar-table tbody tr:nth-child(odd) {
  background-color: #F3F3F3;
}
.p-routes__calendar-table tbody tr:nth-child(even) {
  background-color: #FDFFDE;
}
.p-routes__calendar-table tbody th {
  text-align: left;
  border-inline: 1px solid var(--color-tableBorder);
}
.p-routes__calendar-table .head-flower {
  background-color: var(--color-flower);
  color: #fff;
}
.p-routes__calendar-table .head-autumn {
  background-color: var(--color-autumn);
  color: #fff;
}
.p-routes__calendar-table tbody td {
  border-inline: 1px solid var(--color-tableBorder);
  position: relative;
}
.p-routes__calendar-table .bloom::before,
.p-routes__calendar-table .autumn::before {
  content: "";
  position: absolute;
  inset-inline: -1px;
  top: 50%;
  height: var(--bar-height);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: var(--bar-color);
}
.p-routes__calendar-table .bloom {
  --bar-color: var(--color-flower);
}
.p-routes__calendar-table .autumn {
  --bar-color: var(--color-autumn);
}

/* Wildlife
---------------------------------------------------------- */
.p-routes__wildlife-title {
  margin-block: 2.5em 1em;
  font-size: clamp(1.25rem, 1.123rem + 0.54vw, 1.563rem);
  font-weight: 500;
  text-align: center;
  font-family: var(--font-zen-maru);
  letter-spacing: 0.2em;
}

.p-routes__wildlife-gallery {
  font-size: clamp(0.75rem, 0.699rem + 0.22vw, 0.875rem);
  margin-block: 2em;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
}
@media screen and (min-width: 768px) {
  .p-routes__wildlife-gallery {
    grid-template-columns: repeat(6, 1fr);
    gap: 2em;
  }
}
.p-routes__wildlife-gallery figure {
  grid-column: span 2;
  /* 2列で余った最後の1つを中央に（SPのみ） */
}
.p-routes__wildlife-gallery figure:nth-child(2n+1):last-child {
  grid-column: 2/span 2;
}
@media screen and (min-width: 768px) {
  .p-routes__wildlife-gallery figure {
    /* 上のSP用ルールを打ち消す。3列用の指定より前に置くこと */
  }
  .p-routes__wildlife-gallery figure:nth-child(2n+1):last-child {
    grid-column: span 2;
  }
  .p-routes__wildlife-gallery figure:nth-child(3n+1):last-child {
    grid-column: 3/span 2;
  }
  .p-routes__wildlife-gallery figure:nth-child(3n+1):nth-last-child(2) {
    grid-column: 2/span 2;
  }
  .p-routes__wildlife-gallery figure:nth-child(3n+2):last-child {
    grid-column: 4/span 2;
  }
}
.p-routes__wildlife-gallery figure img {
  border-radius: 1em;
}
.p-routes__wildlife-gallery figure figcaption {
  margin-top: 0.5em;
  text-align: center;
}

/* Caution
---------------------------------------------------------- */
.p-routes__point-caution {
  margin-block: 2rem 3rem;
  padding-bottom: 3rem;
  background-color: #FFD62B;
  position: relative;
  font-family: var(--font-zen-maru);
}
@media screen and (min-width: 768px) {
  .p-routes__point-caution {
    margin-block: 4rem;
    padding-bottom: 5rem;
  }
}
.p-routes__point-caution::before, .p-routes__point-caution::after {
  content: "";
  display: block;
  width: 100%;
  height: 1.5rem;
  background-image: repeating-linear-gradient(-45deg, #ffd62b, #ffd62b 10px, #000000 10px, #000000 20px);
  position: absolute;
}
.p-routes__point-caution::before {
  top: 0;
  left: 0;
}
.p-routes__point-caution::after {
  bottom: 0;
  left: 0;
}
.p-routes__point-caution .caution-title {
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.p-routes__point-caution .caution-subTitle {
  margin-inline: auto;
  margin-bottom: 0.75em;
  font-size: clamp(1.5rem, 1.348rem + 0.65vw, 1.875rem);
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5em;
  position: relative;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
}
.p-routes__point-caution .caution-subTitle::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 0.15em;
  background-color: currentColor;
  position: absolute;
  left: 0;
  bottom: -0.15em;
  border-radius: 1em;
}
.p-routes__point-caution .caution-subTitle svg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.p-routes__point-caution .bubble-wrapper {
  font-size: clamp(1.125rem, 0.973rem + 0.65vw, 1.5rem);
  margin-block: 2em 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.p-routes__point-caution .caution-button-wrapper {
  margin-block: 2rem 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.p-routes__point-caution .caution-link {
  color: #436eab;
}

.p-routes__caution-button {
  padding: 1em 2em;
  font-size: clamp(1.125rem, 1.024rem + 0.43vw, 1.375rem);
  background-color: #fff;
  color: #C01600;
  display: inline-block;
  border-radius: 3em;
}
@media (any-hover: hover) {
  .p-routes__caution-button:hover {
    background-color: #C01600;
    color: #fff;
  }
  .p-routes__caution-button:focus-visible {
    background-color: #C01600;
    color: #fff;
  }
}