/* ======================
 全体設定・リセット
====================== */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 /* Noto Sans JPが読み込まれていない可能性に備え、フォールバックを明記 */
 font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 color: #fff;
 background-color: #000;
 overflow-x: hidden;
}

/* セクション共通の余白 */
.section {
 padding: 120px 0; /* 上下は大きく、左右のpaddingは個別に設定するか、中の要素で制御 */
}
/* ======================
 共通要素（ボタン）
====================== */
.btn {
 padding: 0.6em 1.6em;
 border: 1px solid rgba(255,255,255,0.7);
 color: #fff;
 text-decoration: none;
 font-size: 0.95rem;
 border-radius: 4px;
 transition: all 0.3s ease;
 /* インライン要素なので、display: inline-block; を追加してパディングが正しく機能するようにします */
 display: inline-block; 
}
/* プライマリボタン */
.btn--primary {
 background: #29c7d1;
 color: #000;
 border-color: transparent;
}
.btn--primary:hover {
 background: #22b5bf;
}
/* ゴーストボタン */
.btn--ghost:hover {
 background-color: rgba(255,255,255,0.15);
 border-color: #fff; /* ホバーで少しだけ強調 */
}



/* ======================
 ナビゲーションバー
====================== */
.navbar {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 70px;
 background: rgba(10, 10, 15, 0.3);
 backdrop-filter: blur(8px);
 display: flex;
 align-items: center;
 z-index: 1000;
 border-bottom: 1px solid rgba(255,255,255,0.08);
 transition: background-color 0.4s ease, box-shadow 0.4s ease; /* アニメーション用 */
}

.navbar--scrolled {
 background: rgba(10, 10, 15, 0.95);
 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.navbar__inner {
 max-width: 1200px;
 width: 90%;
 margin: 0 auto;
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.navbar__logo img {
 height: 28px;
 opacity: 0.9;
}

.navbar__menu ul {
 list-style: none;
 display: flex;
 gap: 2.2rem;
}

.navbar__menu a {
 text-decoration: none;
 color: #fff;
 font-size: 0.9rem;
 letter-spacing: 0.05em;
 transition: opacity 0.3s ease;
}
.navbar__menu a:hover {
 opacity: 0.6;
}

.navbar__cta .btn--app {
 background: #29c7d1;
 color: #000;
 padding: 0.5em 1.4em;
 border-radius: 9999px;
 font-size: 0.85rem;
 border: none; /* .btnからの上書き */
}
.navbar__cta .btn--app:hover {
 background: #22b5bf;
}

.navbar__cta--mobile{
  display: none;
}

/* ======================
 TOP（Hero）セクション
====================== */
.hero {
 position: relative;
 width: 100%;
 height: 100vh;
 overflow: hidden;
 display: flex;
 align-items: flex-end;
 padding: 0 6% 8%; /* レスポンシブを考慮したpaddingの定義に統一 */
}

.hero__bg-video {
 position: absolute;
 top: 0; left: 0;
 width: 100%; height: 100%;
 object-fit: cover;
 filter: brightness(0.55) contrast(1.1); /* filterの重複を削除し、統合 */
 z-index: -1;
}

.hero__content {
 position: relative; /* absoluteからrelativeに修正（親のflex配置に依存させる）*/
 z-index: 1;
 display: flex; /* flexboxで配置を制御 */
 flex-direction: column;
 align-items: flex-start;
 gap: 1.2rem;
}

.hero__title {
 font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 0 20px rgba(53,211,232,0.25);
  margin-bottom: 0.4rem;
  line-height: 1.2;
}

.hero__subtitle {
font-size: clamp(.8rem, 1.5vw, 1.2rem);
  font-weight: 400;
  color: #f5f5f5;
  text-shadow: 0 0 15px rgba(53,211,232,0.2);
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-bottom: 2.5rem;
}

.hero__buttons {
 display: flex;
 gap: 1rem;
}

/* === TOPボタン共通スタイル === */
.hero__buttons .btn--ghost {
  font-size: 1.1rem;
  padding: 0.9em 2.4em;
  border: 2px solid rgba(255,255,255,0.8);
  border-radius: 9999px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 15px rgba(53,211,232,0.15);
  transition: all 0.35s ease;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* hover：やわらかに発光 */
.hero__buttons .btn--ghost:hover {
  background: rgba(53,211,232,0.3);
  border-color: rgba(53,211,232,0.8);
  box-shadow: 0 0 25px rgba(53,211,232,0.4);
  transform: translateY(-2px);
}

/* === 個別色：差し色設定 === */
.hero__buttons a:first-child {
  /* カクヨムで読む → 少し青みの強い冷色 */
  background: rgba(53,211,232,0.5);
  box-shadow: 0 0 18px rgba(53,211,232,0.25);
}

.hero__buttons a:last-child {
  /* noteで読む → わずかに温かい白金色 */
  color:  rgba(31, 22, 4, 0.8);
  background: rgba(255,255,255,0.5);
  border-color: rgba(255,255,255,0.9);
  box-shadow: 0 0 18px rgba(255,205,150,0.15);
}

/* モバイル */
@media (max-width: 768px) {
  .hero__buttons {
    flex-direction: column;
    gap: 1rem;
  }

  .hero__buttons .btn--ghost {
    font-size: 1rem;
    width: 100%;
    text-align: center;
  }
}


/* ================
 STORY セクション
================ */
.story {
 position: relative;
 /* .sectionでpaddingを設定したのでmin-heightは不要であれば削除 */
 /* min-height: 100vh; */
 display: flex;
 align-items: center;
 background: url("../images/bg-city.jpg") center/cover no-repeat;
 color: #fff;
 overflow: hidden;
}

.story__overlay {
 position: absolute;
 top: 0; left: 0;
 width: 100%; height: 100%;
 background: rgba(0, 0, 0, 0.55);
 backdrop-filter: blur(2px);
 z-index: 0;
}

.story__inner {
 position: relative;
 z-index: 1;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 4rem;
 width: 90%;
 max-width: 1200px;
 margin: 0 auto;
 /* .sectionで設定したpaddingがあるので、ここでは調整のみ */
 padding: 0;
}

.story__text {
 flex: 1;
}

.story__label {
 color: #35d3e8;
 font-size: 0.9rem;
 letter-spacing: 0.15em;
 margin-bottom: 1.2rem;
}

.story__title {
 font-size: clamp(1.8rem, 3.8vw, 2.8rem);
 font-weight: 700;
 margin-bottom: 1.8rem;
 line-height: 1.4;
}

.story__body {
 line-height: 2;
 font-size: 1rem;
 opacity: 0.9;
}

.story__image {
 flex: 1;
 display: flex;
 justify-content: center;
 align-items: center;
}

.story__image img {
 width: 80%;
 max-width: 420px;
 filter: drop-shadow(0 0 25px rgba(53,211,232,0.35));
 transition: transform 0.4s ease;
}
.story__image img:hover {
 transform: scale(1.05);
}


/* =======================
 CHARACTER セクション
======================= */
.character {
 background: #0b0c0e;
 color: #fff;
 text-align: center;
 /* .sectionのpaddingを使用 */
}

.character__tabs {
 display: flex;
 justify-content: center;
 gap: 2rem;
 margin-bottom: 3rem;
 flex-wrap: wrap;
}

.character__tabs button {
 background: none;
 border: none;
 color: rgba(255,255,255,0.8);
 font-size: 0.95rem;
 cursor: pointer;
 transition: color 0.3s;
 padding: 0.5rem 0; /* タップ/クリックエリアを確保 */
}
.character__tabs button.active,
.character__tabs button:hover {
 color: #29c7d1;
}

.character__content {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 2rem;
 position: relative;
 /* max-widthとmargin: autoを追加し中央寄せを強化 */
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 5%;
}

  .character__main {
    display: flex;
    flex-direction: row;     /* 横並び */
    align-items: center;     /* 垂直中央揃え */
    justify-content: center;
    gap: 4rem;               /* キャラと説明文の間隔 */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
  }

.character__image img {
    max-width: 400px;
    width: 80%;
  }

   .character__image {
    flex: 1;
    text-align: right;
  }

  .character__info {
    flex: 1;
    max-width: 500px;
    width: 100%;
    text-align: left;
    margin: 0;
    padding: 0;
  }

.character__label {
 color: #35d3e8;
 font-size: 0.9rem;
 letter-spacing: 0.1em;
 margin-bottom: 0.8rem;
}

.character__info h2 {
 font-size: 2rem;
 margin-bottom: 0.3rem;
}

.character__info p {
 line-height: 1.8;
 font-size: 0.95rem;
}

.arrow {
 font-size: 2rem;
 background: none;
 border: none;
 color: #29c7d1;
 cursor: pointer;
 transition: opacity 0.3s ease;
 padding: 1rem; /* タップ/クリックエリアを確保 */
}
.arrow:hover {
 opacity: 0.6;
}

.character__dots {
 margin-top: 2.5rem;
 display: flex;
 justify-content: left;
 gap: 1rem;
}

.dot {
 width: 14px;
 height: 14px;
 border-radius: 50%;
 border: 1px solid rgba(255,255,255,0.5);
 cursor: pointer;
 transition: all 0.3s ease;
}
.dot.active {
 background-color: #29c7d1;
 border-color: #29c7d1;
}
/* =======================
 BOOK セクション
======================= */
.book {
 background: #0b0c0e;
 color: #fff;
 display: flex;
 justify-content: center;
 align-items: center;
 /* .sectionのpaddingを使用 */
}

.book__inner {
 width: 90%;
 max-width: 1100px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 4rem;
 flex-wrap: wrap;
}

.book__text {
 flex: 1;
 min-width: 300px;
}

.book__title {
 font-size: clamp(1.8rem, 4vw, 2.6rem);
 font-weight: 700;
 margin-bottom: 1.5rem;
}

.book__desc {
 line-height: 1.9;
 font-size: 1rem;
 margin-bottom: 2.5rem;
 opacity: 0.9;
 text-align: left;
}

/* .book__btn は .btn--primaryで十分なので、重複するスタイルを削除し、簡略化 */
.book__btn {
 padding: 0.8em 2em; /* より目立たせるための調整 */
 font-weight: 600;
 font-size: 1rem;
 border-radius: 40px;
 display: inline-block;
}
.book__btn:hover {
 transform: translateY(-2px); /* .btn--primary:hover のスタイルは継承される */
}

.book__image {
 flex: 1;
 min-width: 280px;
 display: flex;
 justify-content: center;
 align-items: center;
}

.book__image img {
 width: 80%;
 max-width: 420px;
 filter: drop-shadow(0 0 25px rgba(53,211,232,0.2));
 transition: transform 0.4s ease;
}
.book__image img:hover {
 transform: scale(1.05);
}

/* =======================
 GALLERY セクション
======================= */
.gallery {
 background: #0b0c0e;
 color: #fff;
 text-align: center;
 /* .sectionのpaddingを使用 */
}

.gallery__title {
 font-size: clamp(1.8rem, 4vw, 2.6rem);
 font-weight: 700;
 margin-bottom: 3rem;
}

.gallery__grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 gap: 2rem;
 width: 90%;
 max-width: 1000px;
 margin: 0 auto;
}

.gallery__card {
 background: #111214;
 border-radius: 10px;
 overflow: hidden;
 padding: 1rem;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 1rem;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery__card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.gallery__card img {
 width: 100%;
 height: auto; /* 高さを指定しないか、object-fit: cover;と固定の高さを併用 */
 border-radius: 6px;
 object-fit: cover;
}

.gallery__card h3 {
 font-size: 0.9rem;
 letter-spacing: 0.1em;
 opacity: 0.8;
}

.gallery__btn {
 background: none;
 border: 1px solid rgba(255,255,255,0.5);
 color: #fff;
 padding: 0.4em 1.6em;
 border-radius: 20px;
 font-size: 0.85rem;
 cursor: pointer;
 transition: all 0.3s ease;
}
.gallery__btn:hover {
 background: rgba(255,255,255,0.1);
}

/* =======================
 モーダル
======================= */
.modal {
 /* display: none; を削除し、visibilityとopacityで制御することでアニメーション可能に */
 position: fixed;
 top: 0; left: 0;
 width: 100%; height: 100%;
 background: rgba(0,0,0,0.85);
 backdrop-filter: blur(4px);
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 2000;
 visibility: hidden;
 opacity: 0;
 transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.is-active {
 visibility: visible;
 opacity: 1;
}

.modal__content {
 position: relative;
 width: 90%; /* モーダルの幅を広げ、レスポンシブを改善 */
 max-width: 320px; /* 最大幅を調整 */
}

.modal__close {
 position: absolute;
 top: -35px;
 right: 0;
 font-size: 2rem;
 cursor: pointer;
 color: #29c7d1;
}

.modal video {
 width: 100%; /* 親要素の幅いっぱいに広げる */
 border-radius: 10px;
 box-shadow: 0 0 20px rgba(53,211,232,0.3);
}

/* =======================
 FOOTER セクション
======================= */
.footer {
 background: #0b0c0e;
 color: #fff;
 /* .sectionのpaddingを上書きして調整 */
 padding: 100px 5% 60px; 
 text-align: center;
 font-size: 0.95rem;
}

.footer__inner {
 max-width: 1200px;
 margin: 0 auto;
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 2.5rem;
}

/* エンディングの一文 */
.footer__phrase {
 margin-top: 0; /* paddingで調整済みのため不要 */
 color: #ccc;
 font-style: italic;
 font-weight: 300;
 letter-spacing: 0.05em;
 line-height: 1.8;
 opacity: 0.9;
 animation: fadeIn 2s ease 0.4s both;
}

@keyframes fadeIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 0.9; transform: translateY(0); }
}

/* 上部ロゴとSNS */
.footer__top {
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 100%;
}
.footer__logo img {
 height: 30px;
 opacity: 0.9;
}
.footer__sns {
 display: flex;
 gap: 1rem;
}
.footer__sns a {
 color: #29c7d1;
 font-size: 1.2rem;
 transition: opacity 0.3s ease;
}
.footer__sns a:hover {
 opacity: 0.6;
}

/* 区切り線 */
.footer__line {
 width: 100%;
 border: none;
 border-top: 1px solid rgba(41, 199, 209, 0.4);
 margin: 1.5rem 0;
}

/* ナビゲーション */
.footer__nav {
 width: 100%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
}
.footer__nav ul {
 display: flex;
 gap: 2rem;
 list-style: none;
}
.footer__nav a {
 text-decoration: none;
 color: #fff;
 font-size: 0.9rem;
 transition: color 0.3s ease;
}
.footer__nav a:hover {
 color: #29c7d1;
}
.footer__copy {
 font-size: 0.8rem;
 color: rgba(255,255,255,0.6);
}
.footer__note {
  font-size: 0.75rem;         /* 小さく控えめに */
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin-top: 1rem;
  text-align: center;
  font-style: italic;
}

.footer__note span {
  display: block;
  font-size: 0.7rem;
  opacity: 0.7;
}

/* =======================
 レスポンシブメディアクエリ
======================= */
/* 900px以下のデバイス向け（Story/Bookセクションの調整）*/
@media (max-width: 900px) {
 .story__inner, .book__inner {
  flex-direction: column;
  text-align: center;
  gap: 3rem;
 }
 .book__inner {
    flex-direction: column-reverse; }
 .story__image img, .book__image img {
  width: 65%;
 }
 .story__text, .book__text, .character__info {
  max-width: 90%; /* スマホでのテキスト幅を調整 */
 }

  .character__content {
    display: block;         /* flexを解除！ */
    padding: 0 1.5rem;      /* 画面端ギリギリ防止 */
  }

  .character__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .character__info {
    max-width: 600px;       /* 読みやすい幅 */
    margin: 0 auto;
    text-align: left;
    line-height: 1.9;
  }

   .character__image {
    text-align: center;
  }

  .character__image img {
    max-width: 350px;
    width: 70%;
}

 .character__dots {
  justify-content: center; /* センタリングに統一 */
 }
 .character__tabs {
  width: 90%;
  margin: 0 auto;;
 }
 .arrow {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    background: rgba(0,0,0,0.2);
    border-radius: 50%;
    padding: 0.4rem 0.6rem;
color: #29c7d1;

  }

  .arrow--left {
    left: 10px;
  }

  .arrow--right {
    right: 10px;
  }

  .character__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

}
/* キャラクター紹介文の横幅を広げて読みやすく */
.character__info {
  text-align: left;         /* 左寄せで自然に */
  max-width: 600px;         /* 横幅を広げる */
  width: 90%;               /* デバイス幅に合わせて可変 */
  margin: 0 auto;           /* 中央寄せ */
  line-height: 1.9;
  padding: 0 1rem;          /* 端の余白を確保 */
}

/* ===== STORYセクション：モバイルでの読みやすさ改善 ===== */
@media (max-width: 900px) {
  .story {
    background-attachment: fixed; /* 軽くパララックス感 */
    background-position: center top;
    padding: 100px 0; /* 余白をやや広めに */
  }

  .story__inner {
    flex-direction: column;
    align-items: center;
    text-align: left; /* 文の自然な流れを維持 */
    gap: 2.5rem;
    width: 90%;
  }

 

  .story__title {
    font-size: 1.6rem;
    line-height: 1.5;
    margin-bottom: 1.4rem;
    text-align: center; /* タイトルだけ中央寄せ */
  }

  .story__body {
    font-size: 0.95rem;
    line-height: 1.9;
    letter-spacing: 0.02em;
    color: #f0f0f0;
  }

  .story__image img {
    width: 75%;
    max-width: 340px;
    margin-top: 1rem;
  }
}


/* 768px以下のデバイス向け（ナビゲーション、ヒーロー、フッターの調整）*/
@media (max-width: 768px) {
 .section { padding: 80px 0; } /* セクションの上下余白を調整 */
 
 .navbar__menu { display: none; } /* スマホでナビメニューを非表示（ハンバーガーメニュー実装を推奨）*/

 .hero { padding: 0 5% 10%; }
 .hero__content {
  /* absoluteな指定を削除したので、親のpaddingで調整されます */
  /* left: 5%; bottom: 10%; は不要 */
  gap: .3rem;
 }
 
  .hero__title {
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    margin-bottom: 0.3rem;
    line-height: 1.3;
  }
 .hero__subtitle {
    font-size: clamp(1rem, 3.2vw, 1.2rem);
    line-height: 1.8;
    letter-spacing: 0.04em;
    color: #f0f0f0;
    margin-bottom: 1.6rem;
  }
 .hero__buttons { flex-direction: column; gap: 0.8rem;}

 .footer__top {
  flex-direction: column;
  gap: 1rem;
 }
 .footer__nav {
  flex-direction: column;
  gap: 1rem;
  text-align: center;
 }
 .footer__nav ul {
  flex-wrap: wrap; /* ナビリンクが多い場合は折り返す */
  justify-content: center;
  gap: 1rem;
 }
}
/* ======================
   ハンバーガーメニュー
====================== */

/* ボタン基本 */
.navbar__toggle {
  display: none; /* PCでは非表示 */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1100;
}

/* 3本線 */
.navbar__toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* 開いたときのアニメーション */
.navbar__toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.navbar__toggle.active span:nth-child(2) {
  opacity: 0;
}
.navbar__toggle.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* モバイル時に表示 */
@media (max-width: 768px) {
  /* デスクトップ版ボタンは非表示 */
.navbar__cta--desktop {
  display: none;
}

/* モバイル時はメニュー内にボタンを表示 */
.navbar__cta--mobile {
  display: inherit;
  margin-top: 2rem;
  text-align: center;
}

.navbar__cta--mobile .btn--app {
  background: #29c7d1;
  color: #000;
  font-weight: 600;
  padding: 0.9em 2.4em;
  border-radius: 9999px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.navbar__cta--mobile .btn--app:hover {
  background: #22b5bf;
  transform: translateY(-2px);
}

  .navbar__toggle {
    display: flex;
  }
}
/* ===== ハンバーガーメニュー開閉時のメニュー ===== */
@media (max-width: 768px) {
  .navbar__menu {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    height: calc(100vh - 70px);
    background: rgba(10, 10, 15, 0.6);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s ease, opacity 0.4s ease;
  }

  /* 開いたときのアニメーション */
  .navbar__menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* メニューのリストを縦並びに */
  .navbar__menu ul {
    flex-direction: column;
    gap: 1.8rem;
    text-align: center;
  }

  /* リンクデザイン */
  .navbar__menu a {
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    color: #fff;
  }

  /* 閉じるボタン（×）が押しやすいように */
  .navbar__toggle.active span {
    background: #fff;
  }
}

/* ===== TOPに戻るボタン ===== */
#backToTop {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(41, 199, 209, 0.8);
  color: #000;
  font-size: 1.4rem;
  cursor: pointer;
  display: none; /* 初期は非表示 */
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
}

#backToTop:hover {
  background: rgba(34, 181, 191, 1);
  transform: translateY(-3px);
}

#backToTop {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
#backToTop.show {
  opacity: 1;
  transform: scale(1);
}
#backToTop {
  opacity: 0;
  transform: scale(0.9);
}


/* フェード表示 */
#backToTop.show {
  display: flex;
  opacity: 1;
}