.opening-photo {
  position: fixed;
  inset: 0;
  z-index: 100;

  /*オープニング画面の背景画像*/
  background-color: #123f50;
  background-image: url("images/site.webp");
  background-position: center;
  background-size: cover;

  display: grid;
  place-content: center;
  color: #fff;
  text-align: center;
  pointer-events: none;
}

/*オープニング画面のアニメーション。1.75秒待ってから0.7秒かけて消える*/
.js .opening-photo {
  animation: opening-exit 0.7s 1.75s ease-in forwards;
}

/*ヘッダーのメニューボタン*/
.site-header nav a {
  display: inline-flex;
  align-items: center;
  padding: 7px 9px;
  border-radius: 3px;
}

/*メニューにカーソルを乗せた時*/
.site-header nav a:hover{
  background:#e5f1f0;
  color:var(--blue)
}

/*動きを減らす設定をしていない場合にアニメーションを適用*/
@media (prefers-reduced-motion: no-preference) {
  
  /*ホーム上部の小さい英字を表示するアニメーション*/
  .hero-copy .eyebrow {
    animation: fade-up 0.7s 2.45s both;
  }
  
  /*ホーム上部のメイン見出しを表示するアニメーション*/
  .hero-copy h1 {
    animation: fade-up 0.8s 2.6s both;
  }
  
  /*ホーム上部の説明文を表示するアニメーション*/
  .hero-copy > p:not(.eyebrow) {
    animation: fade-up 0.8s 2.8s both;
  }
  
  /*ホーム上部のボタンを表示するアニメーション*/
  .hero-actions {
    animation: fade-up 0.8s 2.98s both;
  }
  
  /*ホーム上部の一番下の会社情報を表示するアニメーション*/
  .hero-bottom {
    animation: fade-in 1s 1s both;
  }

  /*スクロールで表示する要素の最初の状態。最初は透明で少し下に配置*/
  .js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity 0.8s ease,
      transform 0.8s ease;
  }

  /*画面内に入った要素を表示*/
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /*事業内容のサービス1を時間差で表示*/
  .js .services.is-visible article:nth-child(1) {
    animation: fade-up 0.6s 0.1s both;
  }

  /*事業内容のサービス2を時間差で表示*/
  .js .services.is-visible article:nth-child(2) {
    animation: fade-up 0.6s 0.22s both;
  }

  /*事業内容のサービス3を時間差で表示*/
  .js .services.is-visible article:nth-child(3) {
    animation: fade-up 0.6s 0.34s both;
  }
}

/*オープニング画面を透明にして非表示にする動き*/
@keyframes opening-exit {
  to {
    opacity: 0;
  }
}

/*下から上に移動しながら表示する動き*/
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/*透明な状態から表示する動き*/
@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*スマホ用デザイン。画面幅600px以下のときだけ適用*/
@media (max-width: 600px) {

  /*スマホ版オープニングのロゴ*/
  .opening-logo {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  /*スマホ版のロゴ区切り線を横に変更*/
  .opening-logo strong {
    border-left: none;
    border-top: 2px solid rgba(255,255,255,0.5);
    padding-left: 0;
    padding-top: 12px;
    text-align: center;
  }
}

/*ダークモード対応：画像が消えないようにする*/
@media (prefers-color-scheme: dark) {
  .opening-photo {
    background-image: url("images/site.webp") !important;
  }
}