@charset "UTF-8";
/*===============================
Bootstrap CSS読み込み
================================*/
/*===============================
メディアクエリ
================================*/
#nav__ .nav__contents li:nth-of-type(1) a {
  background-image: linear-gradient(135deg, #b2d9f3, #e5f4fc);
  border-radius: 1em 0 0 0;
}

/*===============================
ヘッダー
================================*/
#mainvisual h1 {
  font-weight: 800;
  color: #fff;
  text-shadow: 0px 0px 20px #000; /* 右に2px, 下に2px, ぼかし半径5px, 色は赤 */
}

#information th {
  width: 9em;
}

#contents img {
  -webkit-transition: -webkit-transform 1s ease;
  transition: -webkit-transform 1s ease;
  transition: transform 1s ease;
  transition: transform 1s ease, -webkit-transform 1s ease; /* transformプロパティを0.3秒かけて滑らかに変化させる */
  /* マウスオーバー時のスタイル */
}
#contents img:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05); /* 1.1倍に拡大する (お好みの倍率に調整してください) */
}
#contents figure {
  border-radius: 50% 0 0 0;
  overflow: hidden;
  position: relative;
}
#contents figure figcaption {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  margin-bottom: 1em;
  margin-right: 1em;
  padding: 0.5em 1em;
  font-weight: 700;
  font-size: 1.2em;
}
#contents li {
  background: none;
}
#contents li a::after {
  content: "\f138"; /* fa-solid fa-circle-chevron-right のUnicode */
  font-family: "Font Awesome 6 Free"; /* または "Font Awesome 6 Free" など、使用しているフォントのスタイルによる */
  font-weight: 900; /* fa-solid の場合は 900 */
  position: absolute;
  right: 0;
  color: #4899ff;
}
#contents li:has(a):hover {
  cursor: pointer;
  position: relative;
}
#contents li:has(a):hover::after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  -webkit-transform-origin: left;
          transform-origin: left;
}
#contents li:has(a)::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  background-color: #4899ff;
  opacity: 0.2;
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: right;
          transform-origin: right;
  pointer-events: none;
}

.header__text {
  background: url(../202508/saiyou_top_map.png) no-repeat right;
  background-size: 60%;
}
@media screen and (max-width: 767px) {
  .header__text {
    background-size: 100%;
    background-position: center 50px;
  }
}
.header__text h2 {
  line-height: 1.8 !important;
}
.header__text h2 span {
  font-size: 1.4em;
}
.header__text p {
  font-size: 1.1em;
}

.header__lead {
  border-top: #055a91 5px solid;
  border-bottom: #055a91 5px solid;
  padding: 1em 0;
  margin-top: 1em !important;
  margin-bottom: 1em !important;
}

.story {
  -moz-column-count: 2;
  -webkit-column-count: 2;
          column-count: 2; /* 2段に分割 */
  -moz-column-gap: 30px;
  -webkit-column-gap: 2em;
          column-gap: 2em;
}
@media screen and (max-width: 575px) {
  .story {
    -moz-column-count: 1;
    -webkit-column-count: 1;
            column-count: 1;
  }
}

#information table,
#information tr {
  border: none !important;
}
#information table tr td:first-child {
  padding: 1em;
  width: 9em !important;
  border-bottom: 1px solid #4899ff;
  margin: 0;
  color: #055a91;
}
#information table tr td:last-child {
  padding: 1em;
  width: calc(100% - 9em) !important;
  background-color: #fff;
  border-bottom: 1px solid rgb(204, 204, 204);
}
@media screen and (max-width: 575px) {
  #information table table,
  #information table thead,
  #information table tbody,
  #information table th,
  #information table td,
  #information table tr {
    display: block;
  }
  #information table tr td:first-child {
    width: 100% !important;
    border-bottom: none !important;
    padding-bottom: 0;
  }
  #information table tr td:last-child {
    width: 100% !important;
    padding-top: 0;
  }
}