@charset "UTF-8";
/* ベース設定まとめ
================================================== */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");
:where(html, body) {
  height: 100%;
  margin: 0;
  padding: 0;
}

:where(html) {
  font-size: 62.5%;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  min-width: 320px;
}

/* モーダル等開いた時に後ろが動いてしまうのを防ぐ設定 */
html.is-hidden {
  overflow: hidden;
}

:where(body) {
  color: #323232;
  font-family: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
}

:where(a) {
  color: #323232;
  text-decoration: none;
}

:where(img) {
  border: 0;
  vertical-align: bottom;
  width: 100%;
}

:where(table) {
  border-collapse: collapse;
  width: 100%;
}

:where(.wrapper) {
  background-color: #fff;
  margin: 0 auto;
}

/* レスポンシブ消去
-------------------------------------------------- */
.pcB {
  display: none;
}
@media screen and (min-width: 769px) {
  .pcB {
    display: block;
  }
}

.spB {
  display: block;
}
@media screen and (min-width: 769px) {
  .spB {
    display: none;
  }
}

.pcI {
  display: none;
}
@media screen and (min-width: 769px) {
  .pcI {
    display: inline;
  }
}

.spI {
  display: inline;
}
@media screen and (min-width: 769px) {
  .spI {
    display: none;
  }
}

.pcIb {
  display: none;
}
@media screen and (min-width: 769px) {
  .pcIb {
    display: inline-block;
  }
}

.spIb {
  display: inline-block;
}
@media screen and (min-width: 769px) {
  .spIb {
    display: none;
  }
}

/* ページごとの設定
================================================== */
@media screen and (min-width: 1920px) {
  .bp {
    display: none;
  }
}

/* 共通
-------------------------------------------------- */
.sec__inner {
  margin: 0 auto;
  width: 58.33334dvw;
}
@media screen and (max-width: 768px) {
  .sec__inner {
    max-width: initial;
    width: 91.73334dvw;
  }
}

/* 共通パーツ
-------------------------------------------------- */
/* ボタン */
.btn {
  display: table;
  border-top: 0.20834vw solid #05A8A9;
  border-bottom: 0.20834vw solid #05A8A9;
  margin: 0 auto;
  min-width: 17.03125vw;
}

@media screen and (max-width: 768px) {
  .btn {
    border-top: 0.53334vw solid #05A8A9;
    border-bottom: 0.53334vw solid #05A8A9;
  }
}
.btn > a {
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 1.875vw;
  padding: 0.72917vw 0.625vw;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .btn > a {
    gap: 0 8.53334vw;
    padding: 2.93334vw 2.4vw;
  }
}
.btn .btn__txt {
  font-size: 1.04167vw;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .btn .btn__txt {
    font-size: 3.73334vw;
    line-height: 1.4286;
  }
}
.btn .btn__icon {
  flex-shrink: 0;
  height: 1.40625vw;
  width: 1.40625vw;
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  .btn .btn__icon {
    height: 5.33334vw;
    width: 5.33334vw;
  }
}
.btn .btn__icon::before {
  content: "";
  border: 0.05209vw solid #323232;
  border-radius: 50%;
  height: 1.40625vw;
  width: 1.40625vw;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 20;
}

@media screen and (max-width: 768px) {
  .btn .btn__icon::before {
    border: 0.26667vw solid #323232;
    height: 5.33334vw;
    width: 5.33334vw;
  }
}
@media screen and (min-width: 769px) {
  .btn .btn__icon::after {
    content: "";
    background-color: #05A8A9;
    border-radius: 50%;
    height: 0;
    width: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: 0.6s;
  }
}
.btn .btn__icon > span::before {
  content: "";
  border-top: 0.05209vw solid #323232;
  border-radius: 0.02605vw;
  width: 2.23959vw;
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}

@media screen and (max-width: 768px) {
  .btn .btn__icon > span::before {
    border-top: 0.26667vw solid #323232;
    border-radius: 0.13334vw;
    width: 8.53334vw;
  }
}
.btn .btn__icon > span::after {
  content: "";
  background-color: #323232;
  border-radius: 50%;
  display: inline-block;
  height: 0.36459vw;
  width: 0.36459vw;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 20;
}

@media screen and (max-width: 768px) {
  .btn .btn__icon > span::after {
    height: 1.33334vw;
    width: 1.33334vw;
  }
}
@media screen and (min-width: 769px) {
  .btn:hover .btn__icon::after {
    height: 2.34375vw;
    width: 2.34375vw;
  }
}
/* kv
-------------------------------------------------- */
.kv__inner {
  position: relative;
}

.kv__ttl {
  text-align: center;
  position: absolute;
  top: 6.77084dvw;
  left: 20.83334dvw;
}
@media screen and (max-width: 768px) {
  .kv__ttl {
    top: 9.86667dvw;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
  }
}
.kv__ttl span {
  display: block;
}
.kv__ttl span:nth-child(1) {
  font-size: 1.77084dvw;
  font-weight: 800;
  line-height: 1.4706;
  margin-bottom: 1.04167dvw;
}
@media screen and (max-width: 768px) {
  .kv__ttl span:nth-child(1) {
    font-size: 4.26667dvw;
    line-height: 1.5;
    margin-bottom: 3.2dvw;
  }
}
.kv__ttl span:nth-child(2) {
  font-size: 2.5dvw;
  font-weight: 800;
  line-height: 1.4584;
}
@media screen and (max-width: 768px) {
  .kv__ttl span:nth-child(2) {
    font-size: 5.33334dvw;
    line-height: 1.45;
  }
}
.kv__ttl span:nth-child(3) {
  font-size: 3.64584dvw;
  line-height: 1.1858;
  font-weight: 900;
}
@media screen and (max-width: 768px) {
  .kv__ttl span:nth-child(3) {
    font-size: 9.33334dvw;
    line-height: 1.1143;
    margin-top: 1.6dvw;
  }
}

/* about
-------------------------------------------------- */
.about {
  background: linear-gradient(180deg, #e9f7fb 0%, #fff 100%);
  background-size: 100% 21.40625dvw;
  background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
  .about {
    background-size: 100% 109.6dvw;
  }
}

.about__inner {
  padding: 5.20834dvw 0;
}
@media screen and (max-width: 768px) {
  .about__inner {
    padding: 13.33334dvw 0 22.93334dvw;
  }
}

.about__ttl {
  margin: 0 auto 1.40625dvw;
  width: 23.02084dvw;
}
@media screen and (max-width: 768px) {
  .about__ttl {
    margin-bottom: 6.93334dvw;
    width: 84.26667dvw;
  }
}

.about__txt,
.about__txt--green {
  font-size: 1.25dvw;
  line-height: 1.75;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .about__txt,
  .about__txt--green {
    font-size: 4.26667dvw;
    line-height: 2;
  }
}

.about__txt {
  font-weight: 500;
}

.about__txt--green {
  color: #008486;
  font-weight: 700;
  margin-top: 2.5dvw;
}
@media screen and (max-width: 768px) {
  .about__txt--green {
    margin-top: 5.86667dvw;
  }
}

.about__btn {
  margin-top: 3.4375dvw;
  width: 28.64584dvw;
}
@media screen and (max-width: 768px) {
  .about__btn {
    margin-top: 9.6dvw;
    width: 62.66667dvw;
  }
}
@media screen and (max-width: 768px) {
  .about__btn > a {
    padding: 1.6dvw 2.4dvw;
  }
}

/* explanation
-------------------------------------------------- */
.explanation {
  background-image: url("/expo/timecapsule/assets/img/bg_explanation.png");
  background-position: center;
  background-repeat: repeat;
  background-size: 4.21875dvw 4.0625dvw;
}
@media screen and (max-width: 768px) {
  .explanation {
    background-size: 21.6dvw 20.8dvw;
  }
}

.explanation__inner {
  padding: 5.20834dvw 0 3.125dvw;
}
@media screen and (max-width: 768px) {
  .explanation__inner {
    padding: 13.33334dvw 0 21.33334dvw;
  }
}

.explanation__ttl {
  margin: 0 auto 5.3125dvw;
  width: 34.89584dvw;
}
@media screen and (max-width: 768px) {
  .explanation__ttl {
    margin-bottom: 6.93334dvw;
    width: 84dvw;
  }
}

.explanation__wrap {
  padding-left: calc(50% + 0.52084dvw);
  position: relative;
}
@media screen and (max-width: 768px) {
  .explanation__wrap {
    padding-left: initial;
  }
}

.explanation__txt,
.explanation__txt--green {
  font-size: 1.25dvw;
}
@media screen and (max-width: 768px) {
  .explanation__txt,
  .explanation__txt--green {
    font-size: 4.26667dvw;
  }
}

.explanation__txt {
  font-weight: 500;
  line-height: 1.875;
  padding-left: 3.125dvw;
}
@media screen and (max-width: 768px) {
  .explanation__txt {
    line-height: 1.75;
    margin: 0 auto;
    padding: 0;
    width: 82.4dvw;
  }
}
.explanation__txt .font-bold {
  font-weight: 800;
}

.explanation__txt--green {
  color: #008486;
  font-weight: 700;
  line-height: 1.6667;
  text-align: center;
  margin-top: 0.72917dvw;
}
@media screen and (max-width: 768px) {
  .explanation__txt--green {
    line-height: 2;
    margin-top: 1.86667dvw;
  }
}

.explanation__img {
  width: 33.85417dvw;
  position: absolute;
  top: -2.08333dvw;
  right: calc(50% + 0.20834dvw);
}
@media screen and (max-width: 768px) {
  .explanation__img {
    margin: -7.46666dvw 0 0 -32.53333dvw;
    width: 111.20001dvw;
    position: initial;
    top: initial;
    right: initial;
  }
}

.explanation__card {
  background-color: #FAF0E6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.78125dvw auto 0;
  padding: 2.1875dvw 1.5625dvw;
  position: relative;
  width: 25.83334dvw;
}
@media screen and (max-width: 768px) {
  .explanation__card {
    margin: -0.53333dvw auto 0;
    padding: 7.46667dvw 5.33334dvw 8.53334dvw;
    width: 80.53334dvw;
  }
}
.explanation__card::before {
  content: "";
  border: 0.10417dvw solid #F0DCD2;
  height: calc(100% - 1.04167dvw);
  width: calc(100% - 1.04167dvw);
  position: absolute;
  inset: 50%;
  transform: translateX(-50%) translateY(-50%);
}
@media screen and (max-width: 768px) {
  .explanation__card::before {
    border: 0.53334dvw solid #F0DCD2;
    height: calc(100% - 5.33334dvw);
    width: calc(100% - 5.33334dvw);
  }
}
.explanation__card ul {
  display: flex;
  flex-direction: column;
  gap: 0.3125dvw 0;
  font-size: 0.9375dvw;
  font-weight: 500;
  line-height: 1.6667;
  padding-left: 1em;
  text-indent: -1em;
}
@media screen and (max-width: 768px) {
  .explanation__card ul {
    gap: 0.26667dvw 0;
    font-size: 3.73334dvw;
    line-height: 1.7143;
  }
}
.explanation__card .font-bold {
  font-weight: 700;
}

/* ----- capsule-items ----- */
.capsule-items {
  margin-top: 2.39584dvw;
  padding-top: 2.23959dvw;
  position: relative;
}
@media screen and (max-width: 768px) {
  .capsule-items {
    margin-top: 9.06667dvw;
    padding-top: 10.66667dvw;
  }
}

.capsule-items__card {
  background-color: #fff;
  border-radius: 1.5625dvw;
  padding: 4.6875dvw 5.20834dvw 2.08334dvw 1.77084dvw;
  position: relative;
  margin-bottom: 6.97917dvw;
  width: 34.375dvw;
}
@media screen and (max-width: 768px) {
  .capsule-items__card {
    border-radius: 5.33334dvw;
    padding: 13.86667dvw 4.8dvw 20.26667dvw 4.8dvw;
    margin: 0;
    width: auto;
  }
}

.capsule-items__ttl {
  width: 24.39115dvw;
  position: absolute;
  top: -2.23958dvw;
  left: 2.1875dvw;
}
@media screen and (max-width: 768px) {
  .capsule-items__ttl {
    width: 78.48267dvw;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}

.capsule-items__list {
  font-size: 0.9375dvw;
  font-weight: 500;
  line-height: 1.6667;
  padding-left: 1em;
  text-indent: -1em;
}
@media screen and (max-width: 768px) {
  .capsule-items__list {
    display: flex;
    flex-direction: column;
    gap: 2.13334dvw 0;
    font-size: 3.73334dvw;
    line-height: 1.5715;
    margin: 0 auto;
    width: 70.93334dvw;
  }
}

.capsule-items__txt {
  font-size: 0.9375dvw;
  font-weight: 500;
  line-height: 1.6667;
  margin-top: 1.5625dvw;
}
@media screen and (max-width: 768px) {
  .capsule-items__txt {
    font-size: 3.73334dvw;
    line-height: 1.5715;
    margin: 3.73334dvw auto 0;
    width: 78.13334dvw;
  }
}

.capsule-items__img {
  width: 29.16667dvw;
  position: absolute;
  top: 3.95834dvw;
  right: 0;
}
@media screen and (max-width: 768px) {
  .capsule-items__img {
    margin: -18.13333dvw auto 0;
    width: 84dvw;
    position: relative;
    z-index: 1;
  }
}
.capsule-items__img figcaption {
  font-size: 0.72917dvw;
  font-weight: 500;
  line-height: 1.4286;
  margin-top: 0.41667dvw;
}
@media screen and (max-width: 768px) {
  .capsule-items__img figcaption {
    font-size: 3.73334dvw;
    margin-top: 2.13334dvw;
  }
}
.capsule-items__img figcaption ul {
  padding-left: 1em;
  text-indent: -1em;
}

/* event
-------------------------------------------------- */
.event {
  background: linear-gradient(0deg, #e9f7fb 0%, #fff 100%);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100% 58.75dvw;
}
@media screen and (max-width: 768px) {
  .event {
    background-size: 100% 229.33334dvw;
  }
}

.event__inner {
  padding: 5.20834dvw 0 5.52084dvw;
}
@media screen and (max-width: 768px) {
  .event__inner {
    padding: 14.93334dvw 0 11.2dvw;
  }
}

.event__ttl {
  width: 29.14167dvw;
  position: absolute;
  left: 50%;
  top: -2.44791dvw;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .event__ttl {
    width: 70.76267dvw;
    top: -4.53333dvw;
  }
}

.event__txt {
  font-size: 1.25dvw;
  font-weight: 500;
  line-height: 1.75;
  text-align: center;
  margin-top: 8.125dvw;
}
@media screen and (max-width: 768px) {
  .event__txt {
    margin-top: 11.73334dvw;
    font-size: 4.26667dvw;
    line-height: 1.75;
  }
}
.event__txt.font-bold {
  font-weight: 700;
}

.event__txt-bottom {
  margin-top: 2.60417dvw;
}
@media screen and (max-width: 768px) {
  .event__txt-bottom {
    margin: -6.13333dvw -4dvw 0;
    line-height: 2;
  }
}
.event__txt-bottom > span {
  color: #008486;
  display: block;
  font-size: 1.82292dvw;
  line-height: 1.2;
  margin-bottom: 0.83334dvw;
}
@media screen and (max-width: 768px) {
  .event__txt-bottom > span {
    font-size: 7.46667dvw;
    line-height: 1.3572;
    margin-bottom: 4.8dvw;
  }
}
.event__txt-bottom .ffs {
  font-feature-settings: "palt";
}

.event__img {
  margin: 2.5dvw 0 0;
  padding-right: 0.52084dvw;
  padding-bottom: 4.16667dvw;
  position: relative;
}
@media screen and (max-width: 768px) {
  .event__img {
    margin-top: 9.6dvw;
    padding-right: 0;
    padding-bottom: 38.4dvw;
    overflow: clip;
  }
}
.event__img::after {
  content: "";
  display: block;
  background-image: url("/expo/timecapsule/assets/img/img_explanation_01.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 29.21875dvw;
  width: 35.22032dvw;
  position: absolute;
  bottom: -2.1875dvw;
  left: -8.22916dvw;
}
@media screen and (max-width: 768px) {
  .event__img::after {
    background-image: url("/expo/timecapsule/assets/img/img_explanation_02.png");
    height: 60.22667dvw;
    width: 100dvw;
    bottom: 2.66667dvw;
    left: -4dvw;
  }
}
.event__img img {
  margin: 0 0 0 auto;
  width: 34.42709dvw;
}
@media screen and (max-width: 768px) {
  .event__img img {
    width: auto;
  }
}

/* ----- event__card ----- */
.event__card {
  background-color: #FAF0E6;
  border-radius: 2.08334dvw;
  padding: 7.5dvw 2.60417dvw 4.84375dvw 3.22917dvw;
  position: relative;
  margin-top: 2.1875dvw;
}
@media screen and (max-width: 768px) {
  .event__card {
    border-radius: 2.66667dvw;
    padding: 19.73334dvw 4dvw 16dvw;
    margin-top: 4.53334dvw;
  }
}

.event__card-inner {
  display: flex;
  gap: 0 1.5625dvw;
}
@media screen and (max-width: 768px) {
  .event__card-inner {
    display: block;
  }
}

.event__card-left {
  width: 22.29167dvw;
}
@media screen and (max-width: 768px) {
  .event__card-left {
    width: auto;
  }
}

.event__card-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 28.64584dvw;
}
@media screen and (max-width: 768px) {
  .event__card-right {
    display: block;
    width: auto;
  }
}

.event__card-img {
  margin-left: auto;
  width: 22.30678dvw;
}
@media screen and (max-width: 768px) {
  .event__card-img {
    margin: 0 auto;
    width: 71.2dvw;
  }
}

.event__card-txt {
  font-size: 0.9375dvw;
  font-weight: 500;
  line-height: 1.6667;
}
@media screen and (max-width: 768px) {
  .event__card-txt {
    font-size: 3.73334dvw;
    line-height: 2.1429;
    margin: 4.26667dvw auto 0;
    width: 71.2dvw;
  }
}

.event__card-btn {
  margin-top: 1.97917dvw;
  width: auto;
}
@media screen and (max-width: 768px) {
  .event__card-btn {
    margin-top: 6.93334dvw;
    width: 62.66667dvw;
  }
}
@media screen and (max-width: 768px) {
  .event__card-btn > a {
    padding: 1.6dvw 2.4dvw;
  }
}

/* relatedLinks
-------------------------------------------------- */
.relatedLinks {
  position: relative;
  z-index: 100;
}

.relatedLinks__inner {
  padding: 5.20834dvw 0 4.16667dvw;
}
@media screen and (max-width: 768px) {
  .relatedLinks__inner {
    margin: 0 auto;
    padding: 13.33334dvw 0;
    width: 92vw;
  }
}

.relatedLinks__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.08334vw 1.92709vw;
  margin: 0 auto;
  width: 53.64584vw;
}

@media screen and (max-width: 768px) {
  .relatedLinks__list {
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 9.33334vw 0;
    width: auto;
  }
}
.relatedLinks__list > li {
  width: 25.83334vw;
}

@media screen and (max-width: 768px) {
  .relatedLinks__list > li {
    width: auto;
  }
}
.relatedLinks__list a {
  display: block;
}

@media screen and (min-width: 769px) {
  .relatedLinks__list .img {
    transition: 0.6s;
  }
}
.relatedLinks__list .txt {
  color: #333;
  font-size: 0.9375vw;
  line-height: 1.4445;
  margin-top: 0.57292vw;
}

@media screen and (min-width: 769px) {
  .relatedLinks__list .txt {
    transition: 0.6s;
  }
}
@media screen and (max-width: 768px) {
  .relatedLinks__list .txt {
    font-size: 3.73334vw;
    line-height: 1.4286;
    margin-top: 2.13334vw;
  }
}
.relatedLinks__list .txt > span {
  display: block;
}

.relatedLinks__list .txt > span::after {
  content: "";
  display: inline-block;
  background-image: url("/expo/assets/img/icon_relatedLinks_01.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 0.75521vw;
  width: 0.44271vw;
  margin-left: 0.52084vw;
}

@media screen and (max-width: 768px) {
  .relatedLinks__list .txt > span::after {
    height: 4vw;
    width: 2.4vw;
    margin-left: 2.66667vw;
  }
}
.relatedLinks__list .txt .f_bold {
  font-size: 1.14584vw;
  font-weight: 700;
  line-height: 1.4546;
}

@media screen and (max-width: 768px) {
  .relatedLinks__list .txt .f_bold {
    display: inline-block;
    font-size: 4.8vw;
    line-height: 1.4445;
    margin-top: 1.33334vw;
  }
}
@media screen and (max-width: 768px) {
  .relatedLinks__list .txt .f_size_sp {
    font-size: 4.53334vw;
    letter-spacing: -0.03em;
  }
}
/* アイコン（外部リンク） */
.relatedLinks__list li:has([target^=_blank]) .txt > span::after {
  background-image: url("/expo/assets/img/icon_relatedLinks_02.png");
  height: 1.04167vw;
  width: 1.25vw;
}

@media screen and (max-width: 768px) {
  .relatedLinks__list li:has([target^=_blank]) .txt > span::after {
    height: 3.85067vw;
    width: 4.62134vw;
  }
}
@media screen and (min-width: 769px) {
  .relatedLinks__list li:hover .img {
    opacity: 0.6;
  }
}
@media screen and (min-width: 769px) {
  .relatedLinks__list li:hover .txt {
    color: #05A8A9;
  }
}