/* 共通のアニメーション */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* メインビジュアル ------------------------- */
.main-visual {
  height: 90vh;
  max-height: 594px;
  padding: 6px 6px 0 6px;
  position: relative;
  width: 100%;
}

@media screen and (min-width: 576px) {
  .main-visual {
    padding: 12px 12px 0 12px;
  }
}

@media screen and (min-width: 1200px) {
  .main-visual {
    max-height: 980px;
    margin-bottom: 200px;
  }
}

.main-visual__bg {
  background-image: url(../img/50th/main-visual/bg_blue_sky.png);
  background-position: bottom;
  background-size: cover;
  border-radius: var(--border-radius-md);
  height: 100%;
  position: relative;
  width: 100%;
}

.main-visual .main-visual__bg .contents {
  --animation-duration: 1s;
  --animation-delay: 0.2s;
  margin: 0 auto;
  max-width: var(--container-max-width);
  position: relative;
  width: 100%;
  height: 100%;

  /* 50th Anniversary の文字 */
  .title {
    animation: fadeIn var(--animation-duration) calc(var(--animation-delay) + 2s) ease-in-out forwards;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 4fr 0.5fr;
    left: 24px;
    opacity: 0;
    position: absolute;
    top: 92px;
    width: 55%;
    z-index: 1;

    @media screen and (min-width: 576px) {
      grid-template-columns: 300px 1fr;
      left: 48px;
      row-gap: 4px;
      width: 50%;
    }

    .en-roman {
      color: var(--white);
      line-height: 1;
      font-weight: lighter;
    }

    .number {
      grid-row: 1 / 2;
      grid-column: 1 / 2;
      width: 100%;
      max-height: 132px;
    }

    .line1 {
      grid-row: 1 / 2;
      grid-column: 2 / 3;
      font-size: calc(44 / 16 * 1rem);
    }

    .line2 {
      grid-row: 2 / 3;
      grid-column: 1 / 3;
      font-size: var(--font-size-base);
      padding-left: 30%;
    }
  }

  @media screen and (min-width: 576px) {
    .title {
      width: 50%;
      .number {
        max-height: 200px;
      }
      .line1 {
        font-size: calc(80 / 16 * 1rem);
      }
      .line2 {
        font-size: calc(24 / 16 * 1rem);
      }
    }
  }

  @media screen and (min-width: 1200px) {
    .title {
      width: 40%;
      top: 120px;
      left: 0;

      .number {
        max-height: 250px;
      }

      .line1 {
        font-size: calc(165 / 16 * 1rem);
      }
      .line2 {
        bottom: 16px;
        font-size: calc(32 / 16 * 1rem);
        left: calc(var(--number-width) - 120px);
        padding-left: 124px;
      }
    }
  }

  /* イメージ写真 */
  .images {
    position: absolute;
    top: 20%;
    right: 8px;
    width: 68%;
    height: 296px;
  }

  @media screen and (min-width: 576px) {
    .images {
      height: 500px;
      right: 4px;
      width: 58%;;
    }
  }

  @media screen and (min-width: 1024px) {
    .images {
      height: 520px;
    }
  }
  @media screen and (min-width: 1200px) {
    .images {
      height: 600px;
      right: 24px;
      top: 16%;
      width: 50%;
    }
  }

  @media screen and (min-width: 1400px) {
    .images {
      height: 700px;
      right: 0;
      top: 16%;
      width: 50%;
    }
  }

  .images [class^="image"] {
    border-radius: var(--border-radius-sm);
    position: absolute;
    opacity: 0;
  }

  .images .image03 {
    /* 一番上のイメージ */
    animation: fadeIn var(--animation-duration) var(--animation-delay) ease-in-out forwards;
    right: 18%;
    top: 0;
    width: 42%;

    @media screen and (min-width: 576px) {
      right: 20%;
      width: 40%;
    }

    @media screen and (min-width: 1024px) {
      right: 20%;
      width: 38%;
    }

    @media screen and (min-width: 1200px) {
      right: 20%;
    }
  }

  .images .image02 {
    /* 真ん中のイメージ */
    animation: fadeIn var(--animation-duration) calc(var(--animation-delay) + 0.5s) ease-in-out
      forwards;
    right: 5%;
    top: 20%;
    width: 48%;
    @media screen and (min-width: 576px) {
      top: 23%;
      width: 48%;;
    }
    @media screen and (min-width: 1024px) {
      width: 44%;
    }
    @media screen and (min-width: 1200px) {
      right: 0;
      top: 20%;
      width: 48%;
    }
  }

  .images .image01 {
    /* 一番下（手前）のイメージ */
    animation: fadeIn var(--animation-duration) calc(var(--animation-delay) + 1s) ease-in-out
      forwards;
    bottom: 0;
    left: 0;
    width: 208px;

    @media screen and (min-width: 576px) {
      width: 320px;
    }

    @media screen and (min-width: 1024px) {
      width: 364px;
    }

    @media screen and (min-width: 1200px) {
      width: 450px;
    }

    @media screen and (min-width: 1400px) {
      width: 500px;
    }
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  /* 「信頼と共に歩んだ50年...」の部分 */
  .copy {
    bottom: 64px;
    color: var(--white);
    font-family: "Noto Serif JP", serif;
    font-size: calc(22 / 16 * 1rem);
    letter-spacing: calc(-1 * 0.05em);
    line-height: 1.2;
    max-width: 330px;
    position: absolute;
    right: 16px;
    text-align: right;
    white-space: nowrap;
    width: 100%;
    opacity: 0;
    /* TODO: 本当はしたのslideInにしたいが動作しない */
    animation: fadeIn var(--animation-duration) calc(var(--animation-delay) + 1.5s) ease-in-out forwards;

    @media screen and (min-width: 576px) {
      bottom: 30%;
      left: 5%;
      text-align: left;
    }
    @media screen and (min-width: 1200px) {
      font-size: calc(36 / 16 * 1rem);
      bottom: 15%;
      left: 0;
    }
  }

  @keyframes slideIn {
    0% {
      transform: translateY(280px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .copy span.kanji {
    font-size: calc(28 / 16 * 1rem);

    @media screen and (min-width: 576px) {
      font-weight: bold;
    }
    @media screen and (min-width: 1200px) {
      font-size: calc(50 / 16 * 1rem);
    }
  }

  .copy span.en {
    font-size: calc(40 / 16 * 1rem);
    letter-spacing: 0em;
    font-weight: bold;
    @media screen and (min-width: 1200px) {
      font-size: calc(60 / 16 * 1rem);
    }
  }

  .scroll-sign {
    align-items: flex-end;
    bottom: -50px;
    display: flex;
    gap: 8px;
    height: 32px;
    padding-left: 100px;
    position: absolute;

    .scroll-sign__bar {
      background-color: var(--primary-color);
      display: block;
      height: 100px;
      position: relative;
      width: 1px;
    }

    .scroll-sign__bar::after {
      --var-length: 40px;
      animation: scrollAnimation 1.5s infinite;
      background-color: var(--white);
      content: "";
      display: block;
      height: var(--var-length);
      position: absolute;
      top: calc(var(--var-length) * -1);
      width: 1px;
      z-index: 1;
    }

    .scroll-sign__text {
      color: var(--primary-color);
      font-size: var(--font-size-xs);
      font-weight: lighter;
      text-align: center;

      @media screen and (min-width: 1200px) {
        font-size: var(--font-size-sm);
        font-weight: bold;
      }
    }
  }
}

@keyframes scrollAnimation {
  0% {
    top: -40px;
  }
  100% {
    top: 140px;
  }
}

/* 見出し */
h2,
.h2 {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-family: var(--serif);
  line-height: 1.2;
  margin-bottom: 24px;
  text-align: center;
  width: 100%;

  @media screen and (min-width: 1200px) {
    align-items: baseline;
    flex-direction: row;
    gap: 12px;
    margin-bottom: 56px;
  }
}

h2 .ja,
.h2 .ja {
  color: var(--primary-color);
  display: inline-block;
  font-size: var(--font-size-xxl);
  font-weight: bold;
  @media screen and (min-width: 1200px) {
    font-size: calc(48 / 16 * 1rem);
  }
}

h2 .en,
.h2 .en {
  color: var(--accent-color);
  display: inline-block;
  font-size: var(--font-size-md);
  font-weight: lighter;
  @media screen and (min-width: 1200px) {
    font-size: calc(24 / 16 * 1rem);
  }
}

h3,
.h3 {
  color: var(--text-color);
  font-family: var(--serif);
  font-size: var(--font-size-md);
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 18px;
  @media screen and (min-width: 576px) {
    font-size: var(--font-size-xl);
  }
}

h4,
.h4 {
  color: var(--text-color);
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 9px;
}






/* ご挨拶  ------------------------- */

.greeting {
  .container {
    .content {
      display: flex;
      flex-direction: column;
      gap: 24px;
      position: relative;
      width: 100%;
      transition: all 0.3s ease-in-out;

      @media screen and (min-width: 576px) {
        gap: 32px;
        padding: 0 48px;
      }

      @media screen and (min-width: 1200px) {
        flex-direction: row-reverse;
        height: 400px;
        padding: 0;
        width: 100%;
        &:has(.open) {
          height: 600px;
        }
      }

      .bg {
        
        background: linear-gradient(120deg, #fff 25%, transparent),
          url(../img/50th/greeting/bg_image.jpg) center/cover no-repeat;
        height: 216px;
        margin: 0 auto;
        max-width: 548px;
        outline-offset: -1px;
        outline: solid 2px var(--white);
        position: relative;
        right: -2px; /* 錯視で左によって見えるのを補正 */
        width: 100%;

        @media screen and (min-width: 576px) {
          height: 320px;
        }

        @media screen and (min-width: 1200px) {
          height: 400px;
          margin-bottom: 0;
          margin-right: 0;
          z-index: -1;
        }
      }

      .body {
        max-width: 548px;
        margin: 0 auto;
        text-align: justify;
        @media screen and (min-width: 1200px) {
          left: 0;
          max-width: 65%;
          position: absolute;
        }

        .hidden-content {
          max-height: 0;
          opacity: 0;
          overflow: hidden;
          transition: all 0.3s ease-in-out;
          &.open {
            max-height: 500px; /* 十分かつ適当な値 */
            opacity: 1;
          }
        }

        .read-more {
          display: inline;
          position: relative;
          padding: 0 16px 1px 0;
          &:hover {
            border-bottom: solid 1px var(--imas-blue-1);
            opacity: 0.7;
          }
        }

        .read-more::after {
          content: "";
          position: absolute;
          top: 8px;
          right: 0;
          border: 6px solid transparent;
          border-top: 7px solid var(--text-color);
        }

        .read-more.open::after {
          border-top: transparent;
          border-bottom: 7px solid var(--text-color);
        }
      }

      .signature {
        text-align: right;
      }
      .signature__job-title {
        font-size: var(--font-size-sm);
      }
      .signature__name {
        font-family: var(--serif);
        font-size: var(--font-size-md);
        font-weight: bold;
      }

      @media screen and (min-width: 1200px) {
        .signature {
          position: absolute;
          bottom: -60px;
          right: -100px;
          width: 30%;
          text-align: left;
        }
      }
    }
  }
}
/* 沿革  ------------------------- */
/* レイアウト系 */
.history .contents {
  /* 変数 */
  --bg-height: 196px;
  --circle-size-sp: 28px;
  --circle-size-pc: 32px;
  --year-and-dot-gap-size: 16px;
  --year-and-dot-gap-size-tablet: 24px;

  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  .decade.year2020 {
    margin-bottom: 80px;
  }

  .decade__body {
    /* 「〇〇年代」の全ての出来事 */
    align-items: center;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    padding: 24px;
    position: relative;
    width: 100%;

    @media screen and (min-width: 576px) {
      padding: 48px 56px;
    }

    .epic {
      /* 一つ一つの歴史的出来事 */
      padding-left: 56px; /* TODO: マジックナンバーなので修正したい */
      position: relative;
      width: 100%;

      @media screen and (min-width: 576px) {
        --padding-gap: var(--year-and-dot-gap-size-tablet) -
          var(--year-and-dot-gap-size);
        padding-left: calc(56px + var(--padding-gap));
      }
      @media screen and (min-width: 1200px) {
        max-width: 1000px;
        display: flex;
        align-items: flex-start;
      }
    }
    .epic:not(:last-child) {
      margin-bottom: 64px;
    }
  }
}

/* 各パーツ */
/* 歴史の縦棒 */
.history .contents {
  --history-bar-left-position: 46px; /* TODO: マジックナンバーなので修正したい */
}

.history .contents .history-bar {
  content: "";
  position: absolute;
  left: var(--history-bar-left-position);
  top: 0;
  bottom: 0;
  width: 8px;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1) 10% 90%,
    rgba(255, 255, 255, 0)
  );
  z-index: var(--z-index-current-bar);
  @media screen and (min-width: 576px) {
    left: calc(
      var(--history-bar-left-position) + var(--container-padding-tablet) -
        var(--container-padding-sp)
    );
  }
}

.history .contents .current-sign {
  transition: opacity 0.3s 0.3s ease-in-out;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(216, 196, 149, 1) 20% 80%,
    rgba(255, 255, 255, 0)
  );
  bottom: 0;
  height: 200px;
  left: var(--history-bar-left-position);
  opacity: 1;
  position: fixed;
  top: 40vh;
  width: 8px;
  z-index: var(--z-index-current-bar);

  @media screen and (min-width: 576px) {
    left: calc(
      var(--history-bar-left-position) + var(--container-padding-tablet) -
        var(--container-padding-sp)
    );
  }
}

.history .contents .current-sign.hide {
  opacity: 0;
}

/* 背景 */
/* 背景共通 */
.history .contents .decade {
  .bg {
    justify-content: center;
    display: flex;
    height: 196px;
    width: 100%;
    @media screen and (min-width: 576px) {
      height: 240px;
    }
    @media screen and (min-width: 1200px) {
      height: 360px;
    }
  }

  .decade-start-year {
    color: var(--white);
    display: block;
    font-size: calc(128 / 16 * 1rem);
    letter-spacing: -4px;
    line-height: 1;
    padding: 0 24px;
    text-align: right;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    width: 100%;

    @media screen and (min-width: 576px) {
      font-size: calc(160 / 16 * 1rem);
      padding: 0 56px;
    }

    @media screen and (min-width: 1200px) {
      font-size: calc(240 / 16 * 1rem);
      opacity: 0.8;
      width: 100%;
      padding-right: 24px;
    }
  }
}

/* 年代ごとの個別背景 */
.history .contents .decade.year1970 .bg {
  background: url(../img/50th/history/history_bg_1970.jpg) center/cover
    no-repeat;
}

.history .contents .decade.year1980 .bg {
  background: url(../img/50th/history/history_bg_1980.jpg) center/cover
    no-repeat;
}

.history .contents .decade.year1990 .bg {
  background: url(../img/50th/history/history_bg_1990.jpg) center/cover
    no-repeat;
}

.history .contents .decade.year2000 .bg {
  background: url(../img/50th/history/history_bg_2000.jpg) center/cover
    no-repeat;
}

.history .contents .decade.year2010 .bg {
  background: url(../img/50th/history/history_bg_2010.jpg) center/cover
    no-repeat;
}

.history .contents .decade.year2020 .bg {
  background: url(../img/50th/history/history_bg_2020.jpg) center/cover
    no-repeat;
}

/* それぞれの歴史的出来事 */
@keyframes dotShadowAnimation {
  0% {
    filter: drop-shadow(0px 0px 0px rgb(255, 255, 255));
  }
  100% {
    filter: drop-shadow(0px 0px 16px rgba(43, 58, 103, 1));
  }
}

.history .contents .decade .decade__body {
  .epic {
    /* NOTE: 上方に.epicのCSSは書いてある */

    .year-and-dot {
      align-items: center;
      display: flex;
      gap: var(--year-and-dot-gap-size);
      left: calc((var(--circle-size-sp) + var(--year-and-dot-gap-size)) * -1);
      margin-bottom: 8px;
      position: relative;
      z-index: var(--z-index-current-bar); /* 歴史の棒と同じz-indexにする */
      @media screen and (min-width: 576px) {
        left: calc(
          (var(--circle-size-sp) + var(--year-and-dot-gap-size-tablet)) * -1
        );
        gap: var(--year-and-dot-gap-size-tablet);
      }
      @media screen and (min-width: 1200px) {
        flex-direction: row-reverse;
      }

      .dot {
        background-color: var(--white);
        border-radius: 50%;
        border: solid 3px;
        border-color: var(--gray-02);
        display: inline-block;
        height: var(--circle-size-sp);
        position: relative;
        transition: border-color 0.3s ease-in-out;
        width: var(--circle-size-sp);
        z-index: 1;

        @media screen and (min-width: 1200px) {
          width: var(--circle-size-pc);
          height: var(--circle-size-pc);
        }

        &::after {
          background-color: var(--white);
          border-radius: 50%;
          content: "";
          height: 100%;
          left: 50%;
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
          transition: border 0.3s ease-in-out;
          width: 100%;
          z-index: -1;
        }
      }

      .dot.now {
        --duration: 1s;
        --delay: var(--duration) * 0.5
        border: solid 3px;
        border-color: var(--primary-color);
        animation: dotShadowAnimation var(--duration) ease-in-out 3;

        &::after {
          opacity: 1;
          animation: dotShadowAnimation var(--duration) ease-in-out var(--delay) 3;
        }
      }

      .year {
        font-size: calc(40 / 16 * 1rem);
        color: var(--gray-03);
        @media screen and (min-width: 576px) {
          font-size: calc(44 / 16 * 1rem);
        }
      }
    }

    /* 1つの歴史的出来事の中の項目 */
    .content {
      @media screen and (min-width: 1200px) {
        padding-top: 20px;
      }
      .content__heading {
        color: var(--primary-color);
        line-height: 1.5;
        margin-bottom: 16px;
      }
      .content__subtitle {
        font-size: calc(14 / 16 * 1rem);
        color: var(--gray-04);
        margin-bottom: 8px;
        font-weight: bold;
        line-height: 1.7;
        @media screen and (min-width: 576px) {
          font-size: calc(16 / 16 * 1rem);
        }
      }
      .content__body {
        .text {
          font-size: calc(14 / 16 * 1rem);
          margin-bottom: 16px;
          text-align: justify;
          @media screen and (min-width: 576px) {
            font-size: calc(16 / 16 * 1rem);
            line-height: 2;
          }
        }
        .photo {
          border-radius: 4px;
          height: auto;
          margin-top: 32px; /*TODO: .text:last-child にmargin-bottomが意図通り効かなかったので大体措置 */
          max-width: 352px;
          width: 100%;
        }
      }
    }

    /* 同時代の歴史的イベント */
    .historical_event {
      position: relative;
      width: 100%;
      max-width: 256px;
      border-bottom: solid 1px var(--gray-03);
      padding-left: 16px;
      @media screen and (min-width: 1200px) {
        margin-left: 152px;
      }
    }

    .historical_event::before {
      --dot-size: 8px;
      content: "";
      position: absolute;
      left: 0;
      bottom: calc(var(--dot-size) / 2 * -1);
      width: var(--dot-size);
      height: var(--dot-size);
      background-color: var(--gray-03);
      border-radius: 50%;
    }
  }
}

.history .contents .future {
  display: flex;
  justify-content: center;
  position: relative;

  .message-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    transition: background 2s 3s ease-in-out;
  }

  .video-container {
    max-height: 600px;
  }

  .bg-video {
    display: block;
    width: 100%;
  }
  .fallback-img {
    display: none;
  }
  .line {
    line-height: 2.5;
    font-family: var(--serif);
    opacity: 0;

    @media screen and (min-width: 576px) {
      font-size: var(--font-size-xl);
    }

    .highlight {
      display: inline-block;
      position: relative;
    }
    .highlight::before {
      background-color: var(--secondary-color);
      bottom: 4px;
      content: "";
      display: inline-block;
      height: 4px;
      position: absolute;
      transition: width 0.5s 5.5s ease-in-out;
      width: 0;
    }
  }

  .message-container.start {
    background: rgba(255, 255, 255, 1);
    .messages {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: 0 auto;
      text-align: center;
      width: 100%;

      .line:nth-child(1) {
        animation: fadeIn 2.5s ease-in-out forwards;
      }

      .line:nth-child(2) {
        animation: fadeIn 2.5s ease-in-out forwards;
        animation-delay: 1s;
      }

      .line:nth-child(3) {
        animation: fadeIn 2.5s ease-in-out forwards;
        animation-delay: 2s;
      }

      .line .highlight::before {
        width: 100%;
      }
    }
}
}

/* 数字で見るイマス  ------------------------- */
.achievements, .achievement_cards {
  /* 「数字で見るイマス」のコーナーに見えているカード */
  .contents {
    @media screen and (min-width: 576px) {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
  }
  /* カード全般のスタイル */
  .card {
    margin-bottom: 16px;
    max-width: 100%;
    .front {
      align-items: center;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      width: 100%;
      max-width: 500px;
      text-align: center;
      transition: all 0.3s ease-in-out;
      @media screen and (min-width: 576px) {
        padding-right: 0;
      }
      .number {
        color: var(--white);
        line-height: 1;
        text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
        }
      }
    }
  /* 売上 */
  .card.no165 {
    .front {
      aspect-ratio: 1 / 1;
      background: url("../img/50th/achievement/165.jpg") center/cover
        no-repeat;;
      &:hover {
        background-color: rgba(0, 0, 0, 0.3);
        background-blend-mode: overlay;
      }
      .number {
        font-size: 180px;
      }
    }
  }
  /* 従業員数 */
  .card.no144 {
    .front {
      aspect-ratio: 16 / 9;
      background: url("../img/50th/achievement/144.jpg") center/cover
        no-repeat;
      &:hover {
        background-color: rgba(0, 0, 0, 0.3);
        background-blend-mode: overlay;
      }
      .number {
        font-size: 120px;
      }
    }
  }
  /* 実績 */
  .card.no3415 {
    .front {
      aspect-ratio: 16 / 9;
      background: url("../img/50th/achievement/3415.jpg") center/cover
        no-repeat;
      &:hover {
        background-color: rgba(0, 0, 0, 0.3);
        background-blend-mode: overlay;
      }
      .number {
        font-size: 140px;
      }
    }
  }
  /* 道府県 */
  .card.no16 {
    .front {
      aspect-ratio: 1 / 1;
      background: url("../img/50th/achievement/16.jpg") center/cover
        no-repeat;
      &:hover {
        background-color: rgba(0, 0, 0, 0.3);
        background-blend-mode: overlay;
      }
      .number {
        font-size: 200px;
      }
    }
  }
}

.achievement_cards {
  /* カードモーダル */
  height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
  &.show {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 1;
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: var(--z-index-modal);

    .modal-close-btn {
      position: absolute;
      top: 16px;
      right: 24px;
      cursor: pointer;
      width: 32px;
      height: 32px;
      
      .line {
        width: 100%;
        height: 2px;
        background-color: var(--white);
        position: absolute;
      }
      .line:nth-child(1) {
        transform: rotate(45deg);
        top: 14px;
        left: 8px;
      }
      .line:nth-child(2) {
        transform: rotate(-45deg);
        top: 14px;
        left: 8px;
      }
    }
  }

  /* モーダルの中に現れるカード */
  &.show .card {
    /* 基本（動き以外）の設定 */
    --max-card-width: 95%;
    left: calc(50% - var(--max-card-width) / 2);
    max-width: var(--max-card-width);
    position: absolute;
    top: 20vh;

    @media screen and (min-width: 576px) {
      --max-card-width: 500px;
      left: calc(50% - var(--max-card-width) / 2);
    }

    /* モーダルの中のカードは表も裏も基本見えない */
    .front {
      opacity: 0;
      visibility: hidden;
      max-height: 0;
    }

    /* 小さなカードの設定を基本とする */
    .back {
      background-color: var(--imas-blue-1);
      border-radius: 4px;
      color: var(--text-color);
      font-size: var(--font-size-sm);
      opacity: 0;
      @media screen and (min-width: 576px) {
        font-size: var(--font-size-base);
      }

      .back__body {
        opacity: 0;
        padding: 24px 16px;
        transition: all 0.5s ease-in-out;
        .heading {
          font-size: var(--font-size-md);
          line-height: 1.7;

          .number-highlighted {
            font-size: var(--font-size-xxl);
            padding: 0 4px;
          }

          @media screen and (min-width: 576px) {
            font-size: var(--font-size-lg);
            .number-highlighted {
              font-size: var(--font-size-xxl);
              padding: 0 8px;
            }
          }
          
        }
      }
      .text {
        text-align: justify;
      }
    }

    /* 大きなカードの場合 */
    &.big .back {
      --image-max-height: 240px;
      max-height: var(--image-max-height);

      @media screen and (min-width: 576px) {
        --image-max-height: 320px;
        
      }
      .image {
        background-color: var(--white);
        border-radius: 8px;
        display: flex;
        justify-content: center;
        max-height: var(--image-max-height);
        padding: 24px 16px;
        img {
          object-fit: contain;
        }
      }

      .back__body {
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        transition: all 0.5s ease-in-out;
      }
    }

    &.open {
      /* カードを開いた時（まだ裏面は見えていない） */
      position: relative;
      top: 30vh;

      .front {
        display: flex;
        opacity: 1;
        visibility: visible;
        max-height: 100%;
        transition: all 0.5s ease-in-out;
        &:hover {
          background-color: transparent !important; /* 詳細度で上に出てくる.front に負けてしまうため */
        }
      }
    }

    /* 裏面のカードが小さい（画像がない）とき */
    &.no144 {
      .back {
        background-image: url(../img/50th/achievement/144.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: var(--imas-blue-1);
        background-blend-mode: screen;
      }
    }

    &.no3415 {
      .back {
        background-image: url(../img/50th/achievement/3415.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: var(--imas-blue-1);
        background-blend-mode: screen;
      }
    }

    /* 大きなカードの場合 */
    &.big.open {
      top: 20vh;
      transition: all 0.5s ease-in-out;
      .back {
        .back__body {
          visibility: visible;
          transition: all 0.5s ease-in-out 1s;
        }
      }
    }

    &.open.showBack {
      /* カードを開いて、裏面が見える状態 */
      .front {
        opacity: 0;
        visibility: hidden;
        display: none;
      }
      .back {
        opacity: 1;
        top: 10vh;
        visibility: visible;
        max-height: calc(var(--image-max-height) + 500px); /* 高さは適当 */
        .back__body {
          padding: 24px 16px;
          opacity: 1;
          visibility: visible;
          max-height: 500px; /* 高さは適当 */
        }
      }
    }

    &.open.big.showBack {
      top: 64px;
    }
  }
}




/* お問い合わせ  ------------------------- */
.contact {
  .content {
    --gap-for-shadow: 20px;
    position: relative;
    .image__outer {
      position: relative;
      width: 100%;
      height: auto;
      margin-bottom: calc(24px + var(--gap-for-shadow));

      .image {
        width: calc(100% - var(--gap-for-shadow));
        height: auto;
        position: relative;
        right: calc(var(--gap-for-shadow) / -1);
        top: 0;
      }
    }
    .image__outer::before {
      position: absolute;
      top: var(--gap-for-shadow);
      left: 0;
      content: "";
      display: block;
      width: calc(100% - var(--gap-for-shadow));
      height: 100%;
      background-color: var(--imas-blue-1);
    }

    @media screen and (min-width: 576px) {
      .image__outer {
        width: 100%;
        max-width: 464px;
        margin: 0 auto calc(48px + var(--gap-for-shadow));
      }
      .image__outer::before {
        top: var(--gap-for-shadow);
      }
    }

    .body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 24px;
      .text {
        text-align: center;
      }
    }

    @media screen and (min-width: 576px) {
      .body {
        gap: 48px;
      }
    }
  }
}