@charset "utf-8";
main {
  position: relative;
}

main .circle {
  position: absolute;
  top: -265px;
  right: min(48px, calc((48 + 96) * ((100vw - 769px) / (1280 - 769)) - 96px));
  width: 480px;
}

@media (max-width: 768px) {
  main .circle {
    top: -25px;
    right: -95px;
    width: 217px;
  }
}

main .circle img {
  animation: circle 26s linear 0s infinite;
}

@media (max-width: 768px) {
  main .circle img {
    animation: circle 18s linear 0s infinite;
  }
}

.txt {
  text-align: justify;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}
/* ↓↓↓ fv ↓↓↓ */
.fv {
  position: relative;
  padding: 200px min(4.296875vw, 55px) 0;
  z-index: 1;
}

@media (max-width: 768px) {
  .fv {
    padding: 80px 22px 0;
  }
}

.fv .page-ttl {
  position: relative;
  max-width: 1012px;
  margin: 0 auto;
  container-type: inline-size;
}

.fv .page-ttl .sub-ttl {
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  line-height: 1;
}

.fv .page-ttl .ttl {
  font-family: var(--text-josefin);
  font-size: 9.48617cqw;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .fv .page-ttl .ttl {
    font-size: min(9.6rem, 16.91844cqw);
    margin-top: 10px;
  }
}
/* ↑↑↑ fv ↑↑↑ */

/* ↓↓↓ content ↓↓↓ */
.content {
  max-width: 1280px;
  margin: max(-110px, -10.54689vw) auto 88px;
  padding: 177px min(10.3125vw, 132px) 120px;
  border-radius: 160px;
  background-color: #DCF2F6;
}

@media (max-width: 768px) {
  .content {
    margin: -100px auto 48px;
    padding: 137px 28px 64px 29px;
    border-radius: 80px;
  }
}

.content .ttl {
  max-width: 800px;
  font-size: 2.4rem;
  font-weight: 700;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .content .ttl {
    max-width: 100%;
    font-size: 2.0rem;
  }
}

.content .movie-box {
  display: block;
  max-width: 800px;
  aspect-ratio: 800 / 450;
  height: fit-content;
  overflow: hidden;
  margin: 16px auto 0;
}

@media (max-width: 768px) {
  .content .movie-box {
    aspect-ratio: 318 / 179;
    margin-top: 8px;
  }
}

.content .movie-box iframe {
  width: 100%;
  height: 100%;
}

/* ↑↑↑ content ↑↑↑ */

/* ↓↓↓ history ↓↓↓ */
.history {
  width: 100%;
  max-width: 1280px;
  position: relative;
  overflow: hidden;
  padding: 0 min(132px, 10.305%);
  margin: 0 auto;
}

@media (max-width: 768px) {
  .history {
    max-width: 100%;
    padding: 0 22px 0 23px;
    margin: 0 auto;
  }
}

.history .inner {
  position: relative;
  max-width: 957px;
  margin: 0 auto 0 0;
  display: grid;
  grid-template-rows: repeat(10, auto);
  overflow: hidden;
  padding-bottom: 7.62%;
}

@media (max-width: 768px) {
  .history .inner {
      width: 100%;
      padding-bottom: 13.3333vw;
      row-gap: 2vw;
  }
}

.history .inner::before {
  content: "";
  position: absolute;
  background-image: url(../img/history/history-bg_pc.svg);
  background-repeat: repeat-y;
  position: absolute;
  top: 0;
  left: 58%;
  transform: translateX(-50%);
  display: block;
  width: 32.15vw;
  height: 100%;
  /* opacity: 0; */
  z-index: -1;
}

.history .inner .history-line {
  display: grid;
  grid-template-columns: 10.45% repeat(2, 35.95%);
  justify-content: space-between;
}

@media (max-width: 768px) {
  .history .inner .history-line {
    grid-template-columns: 15.15% 76.97%;
    grid-row-gap: 5vw;
  }
}

.history .inner .history-line + .history-line {
  margin-top: 48px;
}

.history .inner .history-line__date-wrap {
  position: relative;
  overflow: hidden;
}

.history .inner .history-line__date {
  display: block;
  font-family: var(--text-josefin);
  font-size: min(3.125vw, 4.0rem);
  color: #0094A0;
  line-height: 1;
}

@media (max-width: 768px) {
  .history .inner .history-line__date {
    font-size: 1.9rem;
  }
}

.history .inner .history-line__item {
  position: relative;
  margin-top: 24px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

@media (max-width: 768px) {
  .history .inner .history-line__item {
    margin-top: 0;
    width: 90.71%;
    margin-left: 27px;
  }
}

.history .inner .history-line__item.noborder {
  margin-top: 0;
}
.history .inner .history-line__item.noborder::before {
  display: none;
}
.history .inner .history-line__item picture {
  margin-inline: auto;
}
.history .inner .history-line__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #0094A0;
  width: 100%;
  height: 2px;
  z-index: 1;
}

.history .inner .history-line__item-head {
  font-size: 1.6rem;
  font-weight: 500;
  color: #0094A0;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .history .inner .history-line__item-head {
    font-size: 1.2rem;
    font-weight: 500;
    color: #0094A0;
    margin-bottom: 7px;
  }
}

.history .inner .history-line__item-img {
  width: 62.6%;
  margin: 0 auto 5.987%;
}

@media (max-width: 768px) {
  .history .inner .history-line__item-head {
    font-size: 1.2rem;
    font-weight: 500;
    color: #0094A0;
    margin-bottom: 7px;
  }
}

.history .inner .history-line__item-img.wide {
  width: 82.26%;
  margin: 0 0 24px;
}

@media (max-width: 768px) {
  .history .inner .history-line__item-img.wide {
    width: 78.745%;
    margin: 0 auto 16px;
  }
}

.history .inner .history-line__item-img.single {
  width: min(50vw, 640px);
  margin: 0 auto 4%;
}

@media (max-width: 768px) {
  .history .inner .history-line__item-img.single {
    width: 100%;
    margin: 0 auto 16px;
  }
}

.history .inner .history-line__item-sub {
  color: #0094A0;
  position: relative;
  margin-bottom: 10px;
  font-size: 1.6rem;
  line-height: 1;
}

@media (max-width: 768px) {
  .history .inner .history-line__item-sub {
    font-size: 1.2rem;
    margin-bottom: 7px;
  }
}

.history .inner .history-line__item-sub::after {
  content: "";
  position: absolute;
  width: 85.72%;
  height: 1px;
  background-color: #0094A0;
  left: 14.28%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.history .inner .history-line__item-sub.long::after {
  width: 100%;
  left: 10%;
}

@media (max-width: 768px) {
  .history .inner .history-line__item-sub.long::after {
    width: 100%;
    left: 27%;
  }
}

.history .inner .history-line__item-text {
  text-align: justify;
  align-items: center;
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.08em;
}

@media (max-width: 768px) {
  .history .inner .history-line__item-text {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 768px) {
  .history .inner .history-line__item {
    grid-column: 2/4;
  }
}
.history .inner .history-line__item[data-history="2007-1"], .history .inner .history-line__item[data-history="2009-1"], .history .inner .history-line__item[data-history="2012-2"], .history .inner .history-line__item[data-history="2012-3"], .history .inner .history-line__item[data-history="2012-4"], .history .inner .history-line__item[data-history="2015-2"], .history .inner .history-line__item[data-history="2015-3"], .history .inner .history-line__item[data-history="2017-4"], .history .inner .history-line__item[data-history="2019-4"], .history .inner .history-line__item[data-history="2020-4"], .history .inner .history-line__item[data-history="2021-4"], .history .inner .history-line__item[data-history="2021-5"], .history .inner .history-line__item[data-history="2023-5"] {
  grid-column: 3/4;
}
@media screen and (max-width: 768px) {
  .history .inner .history-line__item[data-history="2007-1"], .history .inner .history-line__item[data-history="2009-1"], .history .inner .history-line__item[data-history="2012-2"], .history .inner .history-line__item[data-history="2012-3"], .history .inner .history-line__item[data-history="2012-4"], .history .inner .history-line__item[data-history="2015-2"], .history .inner .history-line__item[data-history="2015-3"], .history .inner .history-line__item[data-history="2017-4"], .history .inner .history-line__item[data-history="2019-4"], .history .inner .history-line__item[data-history="2020-4"], .history .inner .history-line__item[data-history="2021-4"], .history .inner .history-line__item[data-history="2021-5"], .history .inner .history-line__item[data-history="2023-5"] {
    grid-column: 2/4;
  }
}
.history .inner .history-line__item[data-history="2014-2"], .history .inner .history-line__item[data-history="2017-2"], .history .inner .history-line__item[data-history="2017-3"], .history .inner .history-line__item[data-history="2018-1"], .history .inner .history-line__item[data-history="2018-2"], .history .inner .history-line__item[data-history="2019-2"], .history .inner .history-line__item[data-history="2019-3"], .history .inner .history-line__item[data-history="2020-2"], .history .inner .history-line__item[data-history="2020-3"], .history .inner .history-line__item[data-history="2021-2"], .history .inner .history-line__item[data-history="2021-3"], .history .inner .history-line__item[data-history="2022-2"], .history .inner .history-line__item[data-history="2022-3"], .history .inner .history-line__item[data-history="2022-4"], .history .inner .history-line__item[data-history="2022-5"], .history .inner .history-line__item[data-history="2022-6"], .history .inner .history-line__item[data-history="2022-7"], .history .inner .history-line__item[data-history="2023-2"], .history .inner .history-line__item[data-history="2023-3"] {
  grid-column: 2/3;
  margin-top: var(--m40);
}
@media screen and (max-width: 768px) {
  .history .inner .history-line__item[data-history="2014-2"], .history .inner .history-line__item[data-history="2017-2"], .history .inner .history-line__item[data-history="2017-3"], .history .inner .history-line__item[data-history="2018-1"], .history .inner .history-line__item[data-history="2018-2"], .history .inner .history-line__item[data-history="2019-2"], .history .inner .history-line__item[data-history="2019-3"], .history .inner .history-line__item[data-history="2020-2"], .history .inner .history-line__item[data-history="2020-3"], .history .inner .history-line__item[data-history="2021-2"], .history .inner .history-line__item[data-history="2021-3"], .history .inner .history-line__item[data-history="2022-2"], .history .inner .history-line__item[data-history="2022-3"], .history .inner .history-line__item[data-history="2022-4"], .history .inner .history-line__item[data-history="2022-5"], .history .inner .history-line__item[data-history="2022-6"], .history .inner .history-line__item[data-history="2022-7"], .history .inner .history-line__item[data-history="2023-2"], .history .inner .history-line__item[data-history="2023-3"] {
    grid-column: 2/4;
    margin-top: 0;
  }
}
.history .inner .history-line__item[data-history="2023-4"] {
  grid-column: 2/4;
  margin-top: 3.81%;
}
.history .inner .history-line__item[data-history="2014-3"], .history .inner .history-line__item[data-history="2017-4"], .history .inner .history-line__item[data-history="2018-3"], .history .inner .history-line__item[data-history="2019-4"], .history .inner .history-line__item[data-history="2020-4"], .history .inner .history-line__item[data-history="2021-4"], .history .inner .history-line__item[data-history="2023-5"] {
  grid-row: 1;
}
@media screen and (max-width: 768px) {
  .history .inner .history-line__item[data-history="2014-3"], .history .inner .history-line__item[data-history="2017-4"], .history .inner .history-line__item[data-history="2018-3"], .history .inner .history-line__item[data-history="2019-4"], .history .inner .history-line__item[data-history="2020-4"], .history .inner .history-line__item[data-history="2021-4"], .history .inner .history-line__item[data-history="2023-5"] {
    grid-row: initial;
  }
}
.history .inner .history-line__item[data-history="2017-5"], .history .inner .history-line__item[data-history="2021-5"] {
  grid-row: 2;
}
@media screen and (max-width: 768px) {
  .history .inner .history-line__item[data-history="2017-5"], .history .inner .history-line__item[data-history="2021-5"] {
    grid-row: initial;
  }
}
@media screen and (min-width: 769px) {
  .history .inner .history-line__item[data-history="2012-4"], .history .inner .history-line__item[data-history="2013-3"] {
    margin-top: 6.86%;
  }
  .history .inner .history-line__item[data-history="2018-3"] {
    margin-top: 4%;
  }
}
@media screen and (max-width: 768px) {
  .history .inner .history-line__item[data-history="2021-3"] {
    margin-bottom: 2vw;
  }
  .history .inner .history-line__item[data-history="2017-4"] {
    grid-row: 1;
  }
  .history .inner .history-line__item[data-history="2019-2"]::before {
    display: block;
  }
  .history .inner .history-line__item[data-history="2019-4"] {
    grid-row: 2;
  }
  .history .inner .history-line__item[data-history="2021-4"] {
    grid-row: 1;
  }
  .history .inner .history-line__item[data-history="2021-5"] {
    grid-row: 2;
  }
}

.js-fade-in {
  opacity: 0;
}

.js-scroll-in {
  animation: is-show 0.7s;
  transition-duration: 500ms;
  transition-property: opacity, transform;
  opacity: 1;
}

.js-appear-in {
  animation: is-appear 0.7s;
  transition-duration: 500ms;
  transition-property: opacity, transform;
  opacity: 1;
}

.js-scroll-right {
  animation: is-showRight 0.7s;
  transition-duration: 500ms;
  transition-property: opacity, transform;
  opacity: 1;
}

.js-scroll-left {
  animation: is-showLeft 0.7s;
  transition-duration: 500ms;
  transition-property: opacity, transform;
  opacity: 1;
}

.history .inner.is-show .heading-wrap::before {
  animation: line-in 0.6s ease 0.2s 1 forwards;
}
.history .inner.is-show .heading-wrap .heading-group__sub {
  animation: is-centerIn 0.6s ease 0.4s 1 forwards;
}
.history .inner.is-show .heading-wrap .heading-group__name {
  animation: is-centerIn 0.6s ease 0.5s 1 forwards;
}
.history .inner.is-show .heading-wrap .heading-group__caption {
  animation: is-centerIn 0.6s ease 0.6s 1 forwards;
}
.history.is-show .inner::before {
  animation: is-appear 4s ease 0.4s 1 forwards;
}
.history .inner.is-show .history::after {
  animation: bg-show 8s ease 0.8s 1 forwards;
}
.history .inner .history-line__date {
  opacity: 0;
}
.history .inner .history-line__date.js-scroll-left {
  opacity: 1;
}
.history .inner .history-line__item {
  top: 5%;
}
.history .inner .history-line__item.js-scroll-in {
  top: 0;
}

@keyframes is-show {
  0% {
    opacity: 0;
    transform: translateY(2%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes is-showScale {
  0% {
    opacity: 0;
    transform: translateY(1%) scale(0.6);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes is-appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes is-showRight {
  0% {
    opacity: 0;
    transform: translateX(2%) scaleX(0.9);
    transform-origin: bottom right;
  }
  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
    transform-origin: bottom right;
  }
}
@keyframes is-showLeft {
  0% {
    opacity: 0;
    transform: translateX(-30%);
    transform-origin: bottom left;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    transform-origin: bottom left;
  }
}
@keyframes is-centerIn {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes is-leftIn {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes is-rightIn {
  0% {
    opacity: 0;
    transform: translateX(50%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes line-in {
  0% {
    opacity: 0;
    width: 0;
  }
  100% {
    opacity: 1;
    width: 100%;
  }
}
@keyframes bg-show {
  0% {
    opacity: 1;
    top: 0;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    top: 100%;
    z-index: -5;
  }
}
/* ↑↑↑ history ↑↑↑ */

/* ↓↓↓ others ↓↓↓ */
.others {
  position: relative;
  padding: 0 min(4.296875vw, 55px) 230px;
}

@media (max-width: 768px) {
  .others {
    padding: 0 min(4.296875vw, 55px) 180px;
  }
}

.others::before {
  content: '';
  position: absolute;
  translate: -50% 0;
  top: min(90px, 7.03123vw);
  left: 50%;
  max-width: 1280px;
  width: 100vw;
  height: 100%;
  border-radius: 160px 160px 0 0;
  background-color: #F0F0F0;
}

@media (max-width: 768px) {
  .others::before {
    top: min(60px, 12.2667vw);
    border-radius: 80px 80px 0 0;
  }
}

.others .content-ttl {
  position: relative;
  max-width: 1012px;
  margin: 0 auto;
  container-type: inline-size;
}

.others .content-ttl .sub-ttl {
  position: relative;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  line-height: 1;
  z-index: 1;
}

.others .content-ttl .ttl {
  position: relative;
  font-family: var(--text-josefin);
  font-size: 9.48617cqw;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-top: 20px;
  z-index: 1;
}

@media (max-width: 768px) {
  .others .content-ttl .ttl {
    font-size: min(9.6rem, 16.91844cqw);
    margin-top: 10px;
  }
}

.others .page-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 32px;
  max-width: 848px;
  margin: 64px auto 0;
  z-index: 1;
  container-type: inline-size;
}

@media (max-width: 768px) {
  .others .page-list {
    display: block;
    margin: 32px auto 0;
  }
}

.others .page-list .page {
  position: relative;
  display: grid;
  place-content: center left;
  width: calc((100% - 32px) / 2);
  height: 120px;
  font-size: max(1.5rem, 1.77866cqw);
  font-weight: 700;
  letter-spacing: 0.2em;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 0 24px;
  transition: background-color 0.3s ease;
}

@media (max-width: 768px) {
  .others .page-list .page {
    width: 100%;
    height: 70px;
    letter-spacing: 0.05em;
    border-bottom: initial;
    padding: 0;
  }

  .others .page-list .page:last-of-type {
    border-bottom: 1px solid #000;
  }
}

.others .page-list .page.-current {
  color: rgba(0, 0, 0, 0.6);
}

.others .page-list .page:not(.-current) .angle {
  position: absolute;
  translate: 0 -50%;
  top: 50%;
  right: 0;
  width: 14px;
  height: 9px;
  overflow: hidden;
}

.others .page-list .page:not(.-current) .angle::before,
.others .page-list .page:not(.-current) .angle::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/message/page-angle.svg) no-repeat;
  background-size: cover;
  transition: translate 0.3s ease;
}

.others .page-list .page:not(.-current) .angle::after {
  translate: -200% 0;
}

@media (min-width: 769px) {
  .others .page-list .page:not(.-current):hover {
    background-color: #fff;
  }

  .others .page-list .page:not(.-current):hover .angle::before {
    translate: 200% 0;
  }
  .others .page-list .page:not(.-current):hover .angle::after {
    translate: 0 0;
  }
}
/* ↑↑↑ others ↑↑↑ */