@import './general/reset-2.css';
@import './general/fixes.css';
@import './general/kerning.css';

@font-face {
  font-family: 'Geo';
  src: url('../font/Geo-Regular.woff2') format('woff2'),
       url('../font/Geo-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --global-margin: calc(35px * var(--global-fit-size));
  --global-gap: calc(16px * var(--global-fit-size));
  --black: #303030;
  --highlight: #514E4E;
  --gray: #717071;
  --light-gray: #ADAEAE;
  --white-gray: #F8F8F8;
  --border: #EBEBEB;
  --ease-out: cubic-bezier(0.35, 0.46, 0.23, 0.96);
  --delay-ease-out: cubic-bezier(0.5, 0.14, 0.25, 1);
  --slide-up-in: cubic-bezier(0.714, 0.147, 0.258, 0.86) forwards;
  --scale-cap-14: 15.75px;
  --scale-cap-16: 18px;
  --scale-cap-18: 20.235px;
  @media (width <= 768px) {
    --global-margin: calc(22px * var(--global-fit-size));
    --global-gap: calc(9px * var(--global-fit-size));
  }
}

img {
  width: 100%;
  height: auto;
}


a[href] {
  text-decoration: none;
  transition: opacity 0.2s;
  color: var(--black);
}

#contents {
  position: relative;
  background-color: #fff;

  .navTitle,
  .globalNavItem,
  .snsItem,
  .linksItem {
    font-family: "neue-haas-unica";
  }

  .linksItem li:first-child {
    font-family: "MFW-FutoGoB101Pro-Bold";
    letter-spacing: 0.08em;
  }
}

main {
  position: relative;
  z-index: 2;
  padding-bottom: calc(127px * var(--global-fit-size));
  background-color: #fff;
}

.pc {
  display: inline-block!important;
  @media (width <= 768px) {
    display:none!important;
  }
}

.sp {
  display: none!important;
  @media (width <= 768px) {
    display:inline-block!important;
  }
}

html {
  height: 100%;
  margin-top: 0!important;
  &.noscroll {
    overflow: hidden;
  }
}

body {
  height: 100%;
  background-color:#272727;
  color: var(--black);
  font-family: "MFW-FutoGoB101Pro-Bold", sans-serif;
  letter-spacing: 0em;
  font-feature-settings: 'pcap' on, 'pwid' off, 'palt' on, 'pkna' on, 'liga' off;
  font-size: calc(17px * var(--global-fit-size));
  line-height: 1.84;
  &.noscroll {
    overflow: hidden;
  }
  @media (width <= 768px) {
    font-size: calc(15px * var(--global-fit-size));
    line-height: 1.8;
  }

  &:not(.home) {
    opacity: 0;
    transition: opacity .5s .4s;
    background-color: #fff;
    &.loaded {
      opacity: 1;
    }
  }
}

[data-lang='en-only'] {
  letter-spacing: -0.01em;
  line-height: 0.88em;
  font-family: "neue-haas-unica";
}

/* ハンバーガーメニュー */
.hamburgerWrap {
  display: none;
  @media (width <= 768px) {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    padding: calc(34px * var(--global-fit-size)) var(--global-margin);
    z-index: 101;
    cursor: pointer;
  }
  #hamburger {
    width: 58px;
    span {
      width: 100%;
      height: 2px;
      background-color: var(--black);
      display: block;
      transition: background-color 0.5s ease-out;
      transform: translateY(0) rotate(0);
    }
    span + span {
      margin-top: 6.5px;
    }
  }
  &.open {
    #hamburger {
      position: relative;
      span {
        background-color: #fff!important;
        &:first-child {
          animation: hamburgerTopToX 0.4s ease-out forwards;
        }
        &:last-child {
          animation: hamburgerBottomToX 0.4s ease-out forwards;
        }
      }
    }
  }
  &.closing {
    #hamburger {
      span {
        &:first-child {
          animation: hamburgerTopFromX 0.4s ease-out forwards;
        }
        &:last-child {
          animation: hamburgerBottomFromX 0.4s ease-out forwards;
        }
      }
    }
  }
}

/* ハンバーガー → バッテン（上の線） */
@keyframes hamburgerTopToX {
  0% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(4.25px) rotate(17.34deg);
  }
}

/* ハンバーガー → バッテン（下の線） */
@keyframes hamburgerBottomToX {
  0% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(-4.25px) rotate(-17.34deg);
  }
}

/* バッテン → ハンバーガー（上の線） */
@keyframes hamburgerTopFromX {
  0% {
    transform: translateY(4.25px) rotate(17.34deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

/* バッテン → ハンバーガー（下の線） */
@keyframes hamburgerBottomFromX {
  0% {
    transform: translateY(-5.25px) rotate(-17.34deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

/*ヘッダー&フッター共通*/
.nav {
  .linkButton {
    position: relative;
  }
  a[href] {
    color: #fff;
    transition: opacity 0.3s ease-out;
    &:hover {
      opacity: 0.6;
    }
  }
}
.linkItems {
  display: flex;
  gap: calc(18px * var(--global-fit-size));
  @media (width <= 768px) {
    flex-direction: column;
    text-align: left;
    gap: min(16.5px, calc(11px * var(--global-fit-size)));
  }
  li {
    &.home {
      display: none;
      @media (width <= 768px) {
        display: list-item;
      }
    }
    a {
      font-size: calc(14px * var(--global-fit-size));
      text-decoration: none;
      @media (width <= 768px) {
        font-size: min(21px,calc(14px * var(--global-fit-size)));
      }
    }
  }
}

.navTitle {
  margin-bottom: calc(13.5px * var(--global-fit-size));
  font-size: calc(14px * var(--global-fit-size));
  color: #6D6D6D;
}
#globalLogo {
  line-height: 0;
  a {
    width: calc(263px * var(--global-fit-size));
    display: inline-block;
    line-height: 0;
    aspect-ratio: 263 / 25;
  }
}


.catchphrase {
  grid-column: 1 / 7;
  font-size: calc(58px * var(--global-fit-size));
  line-height: 1.28;
  letter-spacing: 0.05em;
  @media (width <= 768px) {
    grid-column: 1 / 3;
    font-size: calc(38px * var(--global-fit-size));
  }
}

.copyright {
  font-size: calc(10.35px * var(--global-fit-size));
  color: #6D6D6D;
  letter-spacing: 0.06em;
  @media (width <= 768px) {
    font-size: calc(9.73px * var(--global-fit-size));
  }
}

.gridWrapper {
  display: grid;
  grid-template-columns: repeat(6,  1fr);
  column-gap: var(--global-gap);
  @media (width <= 768px) {
    grid-template-columns: repeat(2,  1fr);
  }
  .rightColumn {
    grid-column: 4 / 7;
    @media (width <= 768px) {
      grid-column: 1 / 3;
    }
  }
}

/* ヘッダー */
.globalNavWrap {
  position: absolute;
  top: min(calc(34px * var(--global-fit-size)), 48.34px);
  left: 50%;
  line-height: 1;
  width: calc(100% - var(--global-margin) * 2);
  transform: translateX(-50%);
  z-index: 100;
  @media (width <= 768px) {
    display: none;
    flex-direction: column;
    opacity: 1;
    overflow-x: hidden;
    overflow-y: auto;
  }
  &.show {
    @media (width <= 768px) {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: var(--vh, 100vh);
      background-color: #272727;
      color: var(--black);
      line-height: 1;
      z-index: 100;
      transform: translateX(0%);
    }
  }
  .globalNavInner {
    width: 100%;
    display: flex;
    align-items: center;
    @media (width <= 768px) {
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      flex-direction: column;
      gap: min(61.5px, calc(41px * var(--global-fit-size)));
      min-height: 100%;
      padding-left: calc(34px * var(--global-fit-size));
    }
  }
  .globalNavItem {
    flex: 1;
    @media (width <= 768px) {
      flex: initial;
      padding-top: calc(100px * var(--global-fit-size));
    }
    li {
      line-height: 0;
    }
    a {
      text-transform: uppercase;
    }
    .linkItems{
      gap: min(calc(18px * var(--global-fit-size)), var(--scale-cap-18));
      @media screen and (width <= 768px) {
        gap: min(14.25px, calc(9.5px * var(--global-fit-size)));
      }
      a {
        font-size: min(calc(14px * var(--global-fit-size)), var(--scale-cap-14));
        @media screen and (width <= 768px) {
          font-size: min(51px, calc(34px * var(--global-fit-size)));
        }
        .slideTextAuto .outer {
          display: inline-flex;
          overflow: hidden;
          height: 1em;
          @media (width <= 768px) {
            display: inline;
            overflow: visible;
            height: auto;
          }
        }
        .slideTextAuto .inner span:last-child {
          @media (width <= 768px) {
            display: none;
          }
        }
      }
    }
  }
  .snsItem {
    flex: 1;
    order: 2;
    @media (width <= 768px) {
      flex: initial;
      order: initial;
    }
    a {
      text-transform: uppercase;
    }
    .linkItems {
      justify-content: right;
      @media screen and (width <= 768px) {
        justify-content: left;
      }
      li:last-child {
        display: none;
      }
      a {
        font-size: min(calc(14px * var(--global-fit-size)), var(--scale-cap-14));
        @media screen and (width <= 768px) {
          font-size: min(21px, calc(14px * var(--global-fit-size)));
        }
        .slideTextAuto .outer {
          display: inline-flex;
          overflow: hidden;
          height: 1em;
          @media (width <= 768px) {
            display: inline;
            overflow: visible;
            height: auto;
          }
        }
        .slideTextAuto .inner span:last-child {
          @media (width <= 768px) {
            display: none;
          }
        }
      }
    }

  }
  .linksItem {
    @media (width <= 768px) {
      margin-bottom: 40.5px;
    }
    .linkItems {
      @media (width <= 768px) {
        letter-spacing: 0.06em;
      }
    }
  }
  .navTitle {
    @media (width <= 768px) {
      margin-bottom: min(33px, calc(22px * var(--global-fit-size)));
      font-family: "neue-haas-unica";
      font-size: min(21px, calc(14px * var(--global-fit-size)));
      letter-spacing: 0.06em;
    }
  }
  #globalLogo {
    flex: 1;
    order: 1;
    text-align: center;
    @media (width <= 768px) {
      display: none;
    }
    a {
      width: min(calc(262px * var(--global-fit-size)), 294.61px);
      &:hover {
        opacity: 1;
      }
    }
  }

  /* slideTextAutoの構造 */
  .slideTextAuto {
    .outer {
      display: inline-flex;
      overflow: hidden;
      height: 1em;
    }
    .inner {
      display: inline-flex;
      flex-direction: column;
      span {
        line-height: 0.85em;
        height: 1em;
        display: flex;
        align-items: center;
        &:not(:last-child) {
          margin-bottom: 0.6em;
          @media (width <= 768px) {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  /* ナビゲーションリンクのホバー時にopacityを変更しない */
  .linkItems a {
    opacity: 1 !important;
  }
}

/* フッター */
#globalFooter {
  position: relative;
  z-index: 1;
  padding-top: min(calc(194px * var(--global-fit-size)),218.25px);
  padding-bottom: min(calc(31px * var(--global-fit-size)),34.875px);
  padding-right: var(--global-margin);
  padding-left: var(--global-margin);
  color: var(--white-gray);
  overflow: hidden;
  background-color: #2B2B2B;
  transform: translateY(-40%);
  @media (width <= 768px) {
    padding-top: calc(110px * var(--global-fit-size));
    padding-bottom: calc(16px * var(--global-fit-size));
  }
  .catchphrase {
    margin-bottom: min(calc(184px * var(--global-fit-size)),207px);
    font-size: min(calc(58px * var(--global-fit-size)),62.25px);
    color: #fff;
    @media (width <= 768px) {
      margin-bottom: calc(141px * var(--global-fit-size));
      font-size: calc(38px * var(--global-fit-size));
    }
  }
  .globalNavItem {
    grid-column: 4 / 5;
    @media (width <= 768px) {
      grid-column: 1 / 2;
    }
  }
  .snsItem {
    grid-column: 5 / 6;
    @media (width <= 768px) {
      grid-column: 2 / 3;
    }
    li:last-child {
      display: none;
    }
  }
  .linksItem {
    grid-column: 6 / 7;
    letter-spacing: 0.06em;
    @media (width <= 768px) {
      grid-column: 1 / 2;
      margin-top: calc(48px * var(--global-fit-size));
    }
  }
  .navTitle {
    margin-bottom: min(calc(21px * var(--global-fit-size)),23.625px);
    font-size: min(calc(14px * var(--global-fit-size)),var(--scale-cap-14));
    @media (width <= 768px) {
      margin-bottom: min(calc(22px * var(--global-fit-size)),24.64px);
    }
  }
  #globalLogo {
    grid-column: 1 / 7;
    @media (width <= 768px) {
      grid-column: 1 / 3;
    }
    margin-top: min(calc(131px * var(--global-fit-size)),147.375px);
    margin-bottom: min(calc(122px * var(--global-fit-size)),137.25px);
    @media (width <= 768px) {
      margin-top: calc(165px * var(--global-fit-size));
      margin-bottom: calc(115px * var(--global-fit-size));
    }
    a {
      width: min(calc(174px * var(--global-fit-size)),195.75px);
      @media (width <= 768px) {
        width: calc(163.62px * var(--global-fit-size));
      }
    }
  }
  .linkItems {
    flex-direction: column;
    gap: min(calc(26.5px * var(--global-fit-size)),29.8125px);
    li {
      line-height: 0;
      a {
        font-size: min(calc(14px * var(--global-fit-size)),var(--scale-cap-14));
      }
    }
  }
  .linkButton .moveArrow {
    right: max(calc(-16px * var(--global-fit-size)),-18px);
    width: min(calc(10.74px * var(--global-fit-size)),12.0825px);
    height: min(calc(10.74px * var(--global-fit-size)),12.0825px);
    .arrow {
      width: min(calc(10.74px * var(--global-fit-size)),12.0825px);
      height: min(calc(10.74px * var(--global-fit-size)),12.0825px);
      &:first-child {
        margin-top: min(calc(24px * var(--global-fit-size)),27px);
      }
      svg {
        padding-left: min(calc(3px * var(--global-fit-size)),4.2175px);
      }
    }
  }
  .linkButton:hover .moveArrow .arrowContainer {
    transform: translate(min(calc(11px * var(--global-fit-size)),12.24px), max(calc(-11px * var(--global-fit-size)),-12.24px))!important;
    @media (width <= 768px) {
      transform: translate(min(calc(10px * var(--global-fit-size)),12.288px), max(calc(-12px * var(--global-fit-size)),-14.36px))!important;
    }
  }
  .copyright {
    grid-column: 1 / 7;
    font-size: min(calc(10.35px * var(--global-fit-size)),11.65px);
    @media (width <= 768px) {
      grid-column: 1 / 3;
    }
  }
}

/* ミニタイトル */
.minTitle {
  position: relative;
  display: block;
  font-family: "neue-haas-unica";
  font-size: min(calc(12px * var(--global-fit-size)), 13.5px);
  font-feature-settings: 'case' on, 'palt' on;
  letter-spacing: 0.04em;
  @media (width <= 768px) {
    font-size: calc(12px * var(--global-fit-size));
    letter-spacing: 0;
  }
  &::before {
    content: '(';
    margin-right: min(calc(4px * var(--global-fit-size)), 4.5px);
  }
  &::after {
    content: ')';
    margin-left: min(calc(3px * var(--global-fit-size)), 3.5px);
  }
}

/* メインビジュアル */
.mainVisual {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  .mainVisualLogo {
    display: none;
    @media (width <= 768px) {
      position: absolute;
      left: var(--global-margin);
      display: block;
      width: calc(183px * var(--global-fit-size));
      color: var(--black);
      z-index: 10;
    }
  }
  .titleText {
    position: absolute;
  }
}

/* スクロールガイド */

.scrollGuide {
  position: absolute;
  right: var(--global-margin);
  bottom: min(var(--global-margin), 39.35px);
  display: flex;
  gap: min(calc(3.5px * var(--global-fit-size)), 3.935px);
  font-family: "neue-haas-unica";
  font-size: min(calc(14px * var(--global-fit-size)), var(--scale-cap-14));
  z-index: 10;
  @media (width <= 768px) {
    display: none;
  }

  .slideTextAuto {
    .outer {
      display: inline-flex;
      overflow: hidden;
      height: 1em;
    }

    .inner {
      display: inline-flex;
      flex-direction: column;

      span {
        height: 1em;
        display: flex;
        align-items: center;

        &:not(:last-child) {
          margin-bottom: 0.4em;
        }
      }
    }
  }
}

/* slideTextAutoのアニメーション（グローバル） */
.slideTextAuto {
  &.auto .inner {
    animation: scrollDownAuto 2.75s ease-out infinite;
  }

  &.animating .inner {
    animation: scrollDownHover 0.6s ease-out forwards;
  }
}

@keyframes scrollDownAuto {
  0% {
    transform: translateY(calc(-1em - 0.4em));
  }
  70% {
    transform: translateY(calc(-1em - 0.4em));
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes scrollDownHover {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-1em - 0.4em));
  }
}

/* ニュース */
.newsList {
  .newsListInner {
    a {
      color: var(--black);
    }
    li + li {
      margin-top: min(calc(28.4px * var(--global-fit-size)),31.95px);
      @media (width <= 768px) {
        margin-top: calc(16px * var(--global-fit-size));
      }
    }
    li {
      position: relative;
      padding-bottom: min(calc(24px * var(--global-fit-size)),27px);
      border-bottom: 1px solid var(--border);
      @media (width <= 768px) {
        padding-bottom: calc(28px * var(--global-fit-size));
      }
    }
    .newsTitle {
      transition: transform .7s var(--delay-ease-out);
    }
    .linkButton:hover {
      .moveArrow .arrowContainer {
        transform: translateX(min(calc(16px * var(--global-fit-size)),var(--scale-cap-16)));
        @media (width <= 768px) {
          transform: translateX(calc(13px * var(--global-fit-size)));
        }
      }
      .newsTitle {
        transform: translate(1.25rem);
      }
    }
    .moveArrow {
      top: min(calc(7px * var(--global-fit-size)),7.875px);
      bottom: initial;
      right: min(calc(-1px * var(--global-fit-size)),-1.125px);
      width: min(calc(13px * var(--global-fit-size)),14.625px);
      height: min(calc(12.83px * var(--global-fit-size)),14.43px);
      @media (width <= 768px) {
        top: calc(9px * var(--global-fit-size));
        right: calc(-1px * var(--global-fit-size));
        width: calc(9.97px * var(--global-fit-size));
        height: calc(9.52px * var(--global-fit-size));
        color: #808080;
      }
    }
    .arrow {
      width: min(calc(16px * var(--global-fit-size)),var(--scale-cap-16));
      height: min(calc(13px * var(--global-fit-size)),14.625);
      @media (width <= 768px) {
        width: calc(12.97px * var(--global-fit-size));
        height: calc(9.52px * var(--global-fit-size));
      }
      svg {
        padding-left: min(calc(3px * var(--global-fit-size)),3.375px);
      }
    }
  }
  .newsData {
    margin-bottom: min(calc(35.5px * var(--global-fit-size)),40px);
    font-family: "neue-haas-unica";
    font-size: min(calc(14px * var(--global-fit-size)), var(--scale-cap-14));
    color: #808080;
    letter-spacing: 0.03em;
    @media (width <= 768px) {
      margin-bottom: calc(29px * var(--global-fit-size));
    }
    .date {
      @media (width <= 768px) {
        font-size: calc(13.5px * var(--global-fit-size));
      }
    }
    .category {
      padding-left: min(calc(26px * var(--global-fit-size)),29.25px);
      @media (width <= 768px) {
        padding-left: calc(16px * var(--global-fit-size));
        font-size: calc(13px * var(--global-fit-size));
      }
    }
    .category::before {
      content: '';
      display: inline-block;
      width: min(calc(6px * var(--global-fit-size)),6.75px);
      height: min(calc(6px * var(--global-fit-size)),6.75px);
      background-color: #808080;
      border-radius: 50%;
      margin-bottom: min(calc(2px * var(--global-fit-size)),2.25px);
      margin-right: min(calc(8px * var(--global-fit-size)),9px);
      @media (width <= 768px) {
        width: calc(5px * var(--global-fit-size));
        height: calc(5px * var(--global-fit-size));
        margin-right: calc(6px * var(--global-fit-size));
      }
    }
  }
  .newsTitle {
    padding-right: min(calc(45px * var(--global-fit-size)),50.9px);
    font-size: min(calc(26px * var(--global-fit-size)),29.22px);
    line-height: 1.6;
    @media (width <= 768px) {
      padding-right: 0;
      font-size: calc(18px * var(--global-fit-size));
    }
  }
  .borderButton {
    padding-top: min(calc(10px * var(--global-fit-size)),11.25px);
    padding-bottom: min(calc(10.5px * var(--global-fit-size)),11.81px);
    padding-left: min(calc(29px * var(--global-fit-size)),32.625px);
    padding-right: min(calc(52px * var(--global-fit-size)),58.5px);
    font-size: min(calc(14px * var(--global-fit-size)), var(--scale-cap-14));
    .moveArrow {
      right: min(calc(28px * var(--global-fit-size)),31.5px);
      width: min(calc(16px * var(--global-fit-size)),var(--scale-cap-16));
      height: min(calc(13px * var(--global-fit-size)),14.625px);
      .arrow {
        width: min(calc(16px * var(--global-fit-size)),var(--scale-cap-16));
      height: min(calc(13px * var(--global-fit-size)),14.625px);
      }
    }
    &:hover {
      .moveArrow .arrowContainer {
        transform: translateX(min(calc(13px * var(--global-fit-size)),14.625px));
      }
    }
  }
}

/* リンクアイコンアニメーション */

.moveArrow {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: calc(28px * var(--global-fit-size));
  bottom: 0;
  width: calc(16px * var(--global-fit-size));
  height: calc(13px * var(--global-fit-size));
  margin: auto 0;
  line-height: 1;

  .arrowContainer {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    align-items: center;
    transition: transform .7s var(--ease-out);
  }

  .arrow {
    width: calc(16px * var(--global-fit-size));
    height: calc(13px * var(--global-fit-size));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    svg {
      width: 100%;
      height: auto;
      padding-left: calc(3px * var(--global-fit-size));
    }
  }
}

.linkButton:hover .moveArrow .arrowContainer {
  transform: translateX(calc(16px * var(--global-fit-size)));
}

/* .nav内のアニメーション（45度） */
.nav .linkButton {
  .moveArrow {
    right: calc(-16px * var(--global-fit-size));
    width: calc(10.74px * var(--global-fit-size));
    height: calc(10.74px * var(--global-fit-size));
    @media (width <= 768px) {
      top: calc(1px * var(--global-fit-size));
    }

    .arrow {
      width: calc(10.74px * var(--global-fit-size));
      height: calc(10.74px * var(--global-fit-size));
      &:first-child {
        margin-top: calc(24px * var(--global-fit-size));
      }
    }
  }

  &:hover .moveArrow .arrowContainer {
    transform: translate(calc(10.74px * var(--global-fit-size)), calc(-11.74px * var(--global-fit-size)));
    @media (width <= 768px) {
      transform: translate(calc(10.74px * var(--global-fit-size)), calc(-12.04px * var(--global-fit-size)));
    }
  }
}

.borderButton {
  position: relative;
  border: min(1px,calc(1px * var(--global-fit-size))) solid var(--black);
  border-radius: 100px;
  font-family: "neue-haas-unica";
  font-size: calc(14px * var(--global-fit-size));
  text-align: center;
  cursor: pointer;
  @media (width <= 768px) {
    font-size: calc(13px * var(--global-fit-size));
  }
  &:has(.disabled) {
    cursor: default;
  }
}

/* h1 span スライドアップアニメーション */
@keyframes slideUpIn {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}