@charset "UTF-8";

/* fv */
#fv {
  margin: 0 calc(50% - 50vw);
  background-color: rgb(0, 73, 126);
}
#fv h1 {
  display: flex;
  align-items: center;
  min-height: 11.4rem;
  font-family: var(--ZenKakuGothicNew);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.6;
  color: rgb(255, 255, 255);
  -webkit-clip-path: polygon(0px 0px, 0px 100%, 100% 100%, 100% 0px);
  clip-path: polygon(0px 0px, 0px 100%, 100% 100%, 100% 0px);
}
@media screen and (min-width: 768px) {
  #fv h1 {
    min-height: 24.5rem;
    font-size: 4.5rem;
  }
}
#fv h1 > span {
  padding-left: 3.2rem;
  position: fixed;
}
@media screen and (min-width: 768px) {
  #fv h1 > span {
    padding-left: calc(50vw - 55rem);
  }
}
#fv h1 .sm {
  font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
  #fv h1 .sm {
    font-size: 3.5rem;
  }
}
#fv section {
  padding: 8rem 3.2rem;
  display: flex;
  flex-direction: column;
  border-radius: 30px 30px 0 0;
  position: relative;
  z-index: 0;
  background-color: rgb(255, 255, 255);
}
@media screen and (min-width: 768px) {
  #fv section {
    padding: 11rem calc(50vw - 55rem) 5.8rem calc(50vw - 55rem);
  }
}
#fv section h2 {
  margin: -1.6rem 0 0 0;
  padding-left: 1.8rem;
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  color: rgb(255, 255, 255);
}
@media screen and (min-width: 768px) {
  #fv section h2 {
    padding-left: 5rem;
    margin-top: -1.7rem;
    font-size: 3.5rem;
  }
}
#fv section h2 span {
  padding: 0.2em 0.25em 0.2287em 0.25em;
  margin-bottom: 0.2em;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  word-break: keep-all;
  background-color: rgb(0, 161, 128);
}
#fv section .photo {
  order: -10;
}
@media screen and (min-width: 768px) {
  #fv section .photo {
    z-index: -10;
  }
}
#fv section .photo .image {
  aspect-ratio: 329 / 220;
}
@media screen and (min-width: 768px) {
  #fv section .photo .image {
    aspect-ratio: auto;
  }
}
#fv section .photo .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* toc */
#toc h2 {
  padding: 0.3em 0;
  margin: 0;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  color: rgb(0, 73, 126);
}
@media screen and (min-width: 768px) {
  #toc h2 {
    font-size: 4rem;
  }
}
#toc dl {
  padding: 3rem 0;
  margin: 0;
}
@media screen and (min-width: 768px) {
  #toc dl {
    padding: 4rem 0;
  }
}
#toc dl > div {
  margin-bottom: 7rem;
  border-top: 1px solid rgb(176, 178, 183);
}
@media screen and (min-width: 768px) {
  #toc dl > div {
    margin-bottom: 5rem;
    display: flex;
    border-top: none;
  }
  #toc dt {
    flex-basis: 16rem;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  #toc dd {
    flex-basis: 94rem;
    box-sizing: border-box;
  }
}
#toc dt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 6.4rem;
  border-bottom: 1px solid rgb(176, 178, 183);
  box-sizing: border-box;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: rgb(0, 73, 126);
  background-color: rgb(244, 244, 244);
}
@media screen and (min-width: 768px) {
  #toc dt {
    min-height: auto;
    border-top: 1px solid rgb(176, 178, 183);
    border-right: 1px solid rgb(176, 178, 183);
    font-size: 1.8rem;
  }
}
#toc dt span {
  display: block;
  font-size: 1.2rem;
}
#toc dd {
  margin: 0;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: calc(0.48 / 16 * 1em);
}
@media screen and (min-width: 768px) {
  #toc dd {
    font-size: 1.6rem;
  }
}
#toc dd li {
  border-bottom: 1px solid rgb(219, 219, 219);
}
#toc dd li:last-of-type {
  border-bottom-color: rgb(176, 178, 183);
}
@media screen and (min-width: 768px) {
  #toc dd li:nth-of-type(3n - 2):nth-last-of-type(-n + 3),
  #toc dd li:nth-of-type(3n - 1):nth-last-of-type(-n + 2),
  #toc dd li:nth-of-type(3n):nth-last-of-type(-n + 1) {
    border-bottom-color: rgb(176, 178, 183);
  }
  #toc dd li:nth-of-type(-n + 3) {
    border-top: 1px solid rgb(176, 178, 183);
  }
}
@media screen and (min-width: 768px) {
  #toc dd ul {
    display: flex;
    flex-wrap: wrap;
  }
  #toc dd li:nth-of-type(3n - 2) {
    flex-basis: 32rem;
    border-right: 1px dashed rgb(219, 219, 219);
    box-sizing: border-box;
  }
  #toc dd li:nth-of-type(3n - 1) {
    flex-basis: 30rem;
    border-right: 1px dashed rgb(219, 219, 219);
    box-sizing: border-box;
  }
  #toc dd li:nth-of-type(3n) {
    flex-basis: 32rem;
    box-sizing: border-box;
  }
}
#toc dd a {
  padding: 0 0.2rem 0 2.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5.3rem;
}
@media screen and (min-width: 768px) {
  #toc dd a {
    padding: 0 0.4rem 0 2rem;
    min-height: 6rem;
  }
}
#toc dd a[href]:not([href=""]) {
  font-weight: bold;
  color: rgb(0, 79, 142);
  overflow: hidden;
}
#toc dd a:not([href]),
#toc dd a[href=""] {
  pointer-events: none;
}
#toc dd a::after {
  content: "";
  display: inline-block;
  width: 6rem;
  height: 1.5rem;
  background: no-repeat 50% 50% / contain;
  rotate: 90deg;
}
@media screen and (min-width: 768px) {
  #toc dd a::after {
    width: 4.6rem;
  }
}
#toc dd a[href]:not([href=""])::after {
  background-image: url(../images/ico_arrow_01.svg);
}
#toc dd span {
  margin-left: auto;
  font-size: 1.4rem;
}

/* news */
#news {
  padding: 0 0 10rem 0;
}
@media screen and (min-width: 768px) {
  #news {
    padding: 10rem 0;
  }
}
#news a {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background-color: rgb(0, 73, 126);
}
@media screen and (min-width: 768px) {
  #news a {
    flex-direction: row;
    width: 96rem;
  }
  #news a > h2 {
    flex-basis: 50%;
    box-sizing: border-box;
  }
  #news a > .photo {
    flex-basis: 50%;
    box-sizing: border-box;
  }
}
#news h2 {
  padding: 1.4rem 3rem 0 4.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 20rem;
  box-sizing: border-box;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05em;
  color: rgb(255, 255, 255);
}
@media screen and (min-width: 768px) {
  #news h2 {
    padding: 2.5rem 6.8rem 0 8.3rem;
    min-height: auto;
    font-size: 2rem;
    line-height: 2.3;
  }
}
#news h2::after {
  content: "";
  margin-top: -0.4rem;
  margin-left: auto;
  display: inline-block;
  width: 5.4rem;
  height: 5.4rem;
  border: solid 2px rgb(255, 255, 255);
  border-radius: 10px;
  box-sizing: border-box;
  background: url(../images/ico_arrow_03.svg) no-repeat 50% 50% / 1.9rem 1.5rem;
}
@media screen and (min-width: 768px) {
  #news h2::after {
    margin-top: -1.8rem;
  }
}
#news a:hover h2::after {
  -webkit-animation: 0.4s scroll-arrow-bg ease;
  animation: 0.4s scroll-arrow-bg ease;
}
#news h2 em {
  margin-right: 0.25em;
  font-size: 2.3rem;
  font-style: normal;
}
@media screen and (min-width: 768px) {
  #news h2 em {
    font-size: 3rem;
  }
}
#news .photo {
  order: -10;
}
#news .photo .image img {
  width: 100%;
  aspect-ratio: 329 / 200;
  -o-object-fit: cover;
  object-fit: cover;
}
@media screen and (min-width: 768px) {
  #news .photo .image img {
    aspect-ratio: auto;
  }
}

/* details */
@media screen and (max-width: 767px) {
  #details h2 {
    display: none;
  }
  #details .container {
    padding: 0 3.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 7rem;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(0, 0, 0, 0.5);
    overflow: auto;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    cursor: pointer;
    opacity: 0;
    translate: -100% 0;
  }
  #details .container:not(.view) {
    transition: 0.4s opacity ease-out, 0s translate 0.4s;
  }
  #details .container.view {
    opacity: 1;
    translate: none;
    transition: 0.4s opacity ease-out;
  }
  #details section:not(.target),
  #details h3 {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  #details {
    padding: 8rem 0;
  }
  #details h2 {
    padding: 0.3em 0;
    margin: 0;
    font-size: 4rem;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
    color: rgb(0, 73, 126);
  }
  #details .container {
    padding: 2rem 0 4rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #details .container > section {
    flex-basis: 54rem;
    box-sizing: border-box;
  }
  #details .container > h3 {
    flex-basis: 100%;
  }
}
#details .container h3 {
  padding: 0.2em 0;
  margin: 0;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgb(0, 73, 126);
}
#details .container h3:not(:first-of-type) {
  margin-top: 4.4rem;
}
#details section {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background-color: rgb(244, 244, 244);
}
@media screen and (min-width: 768px) {
  #details section {
    padding: 5rem;
    margin-top: 2rem;
  }
}
#details h4 {
  padding: 0.3em 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(219, 219, 219);
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: calc(0.6 / 20 * 1em);
  color: rgb(0, 73, 126);
}
@media screen and (min-width: 768px) {
  #details h4 {
    font-size: 2rem;
  }
}
#details dl {
  padding: 0.44em 0;
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.88;
}
@media screen and (min-width: 768px) {
  #details dl > div {
    display: flex;
  }
}
#details dt {
  color: rgb(65, 129, 170);
}
@media screen and (max-width: 767px) {
  #details dt {
    padding-top: 0.48em;
    line-height: 1.4;
  }
}
@media screen and (min-width: 768px) {
  #details dt {
    min-width: 6em;
    box-sizing: border-box;
    -moz-text-align-last: justify;
    text-align-last: justify;
  }
}
@media screen and (min-width: 768px) {
  #details dt::after {
    content: "\FF1A";
  }
}
#details dd {
  margin: 0;
  color: rgb(112, 112, 112);
}
#details .slider {
  order: -10;
}
#details .photos {
  display: flex;
  aspect-ratio: 269 / 180;
  background: rgb(219, 219, 219) url(../images/ogp-image.png) no-repeat 50% 50% / cover;
  background-blend-mode: lighten;
  overflow: auto;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
@media screen and (min-width: 768px) {
  #details .photos {
    aspect-ratio: 440 / 250;
  }
}
#details .photos::-webkit-scrollbar {
  display: none;
}
#details .photos .image {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  scroll-snap-align: center;
}
#details .photos .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
#details .indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.7rem;
}
@media screen and (min-width: 768px) {
  #details .indicator {
    height: 3.3rem;
  }
}
#details .indicator span {
  margin: 0 0.5rem;
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 1px solid transparent;
  box-sizing: content-box;
  background-clip: padding-box;
  background-color: rgb(219, 219, 219);
  cursor: pointer;
  transition: 0.2s background-color ease-out, 0.2s border-color ease-out;
}
@media screen and (min-width: 768px) {
  #details .indicator span {
    margin: 0 0.75rem;
    width: 1rem;
    height: 1rem;
  }
}
#details .indicator span:first-of-type:last-of-type {
  display: none;
}
#details .indicator span.current,
#details .indicator span:hover {
  background-color: rgb(0, 73, 126);
}
@media screen and (min-width: 768px) {
  #details .indicator span.current,
  #details .indicator span:hover {
    border-color: rgb(0, 73, 126);
  }
}