.footer-container {
  background: transparent;
  margin: -1px -10px 0 -10px;
}

.footer--index .footer-container {
  background: #E3FFFF;
}

.footer--index .footer-container>.footer-share {
  margin: -65px auto -15px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-container>.footer-share__list {
  display: flex;
}

.footer-container>.footer-share__list li {
  margin: 10px;
}

.footer-container>.footer-bnr {
  margin: 40px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  mix-blend-mode: multiply;
  position: relative;
  z-index: 0;
}

.footer-container>.footer-bnr__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.footer-container>.footer-bnr__list li {
  margin: 10px;
}

.footer-container>.footer-access {
  margin: auto;
  text-align: center;
}

@media (min-width: 1176px) {
  .footer-container>.footer-access {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
  }
}

@media (max-width: 1175px) {
  .footer-container>.footer-access a {
    display: block;
    width: fit-content;
    margin: 0 auto 12px auto;
  }

  .footer-container>.footer-access a:last-child {
    margin-bottom: 0;
  }
}

.footer-container>.footer-access a {
  font-weight: 600;
  font-size: 18px;
  text-decoration: underline;
  color: #000;
  background-image: url("/img/pagelink.svg");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 20px;
}

.footer-container>.footer-access a[href^="/"] {
  background-image: none;
  padding-right: 0;
}

.footer-container>.footer-copyright {
  margin: 40px auto 0 auto;
  text-align: center;
  padding-bottom: 80px;
}

/* lineup.html */
#main-wrapper {
  margin: auto;
  max-width: 1240px;
  position: relative;
}

.section-ttl {
  width: 100%;
  max-width: 1440px;
  margin: 90px auto 0 auto;
  text-align: center;
  position: relative;
}

.section-ttl h1 {
  display: inline-block;
  text-align: center;
  font-size: 55px;
  font-weight: 100;
  color: #fff;
  background-color: #000;
  letter-spacing: -5px;
  line-height: 1;
  padding-right: 7px;
  padding-bottom: 6px;
}

@media (max-width: 1024px) {

  .section-ttl h1 {
    margin: 50px auto 80px auto;
  }

}

@media (max-width: 850px) {
  .section-ttl {
    margin-top: 125px;
    text-align: right;
    line-height: 1;
  }

  .section-ttl h1 {
    font-size: 37px;
    text-align: right;
    display: inline;
    background: initial;
    padding-bottom: 0;
    padding-right: 0px;
  }

  .section-ttl h1 span {
    display: inline-block;
    background-color: #000;
    margin-right: 10px;
    padding-bottom: 2px;
  }

  .ttl-space {
    padding-right: 5px;
    margin-top: 10px;
  }

}

/* PC: 左サイドバー（240px）+ 右リストの2カラム構成。
   --sidemenu-sticky-top は子の .audiobook-filter__sidemenu と min-height の両方で参照する SSOT */
#section-lineup {
  --sidemenu-sticky-top: 170px;

  display: flex;
  justify-content: center;
  gap: 40px;
  align-items: flex-start;
  max-width: 1200px;
  width: 95%;
  margin: 0 auto;
  /* フィルター後コンテンツが少なく親が縮小しても、stickyサイドバーが viewport 下端付近まで届くようにする。
     サイドバーの max-height (sticky発動時の calc(100vh - var(--sidemenu-sticky-top))) に合わせる */
  min-height: calc(100vh - var(--sidemenu-sticky-top));
}

.section-lineup__list-wrapper {
  flex: 1;
  min-width: 0;
  margin: 0;
  max-width: 880px;
  width: auto;
}

/* PC 検索フィルター（左サイドバー縦並び・>850px のみ表示） */
/* sticky でOTOロゴと重ならない位置に追従させ、サイドバー自体もスクロール可能にする。
   --sidemenu-sticky-top の根拠（>850px で表示される全幅でロゴと重ならないことを実測で確認）:
     - PC通常幅 (≥1284px): .top-logomark 下端 ≈ 165px + 余白 5px
     - 中間幅 (851〜1283px): .top-logomark 下端 ≈ 135px のためさらに余裕あり */
.audiobook-filter__sidemenu {
  /* --sidemenu-sticky-top は親 #section-lineup から継承する */
  /* FV時 (stickyが未発動の自然位置) は下端余白を多めにして viewport 内に収める。
     stickyが効いた状態では JS で .is-stuck クラスが付き、 0px に切り替わる */
  --sidemenu-bottom-gap: 50px;

  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: var(--sidemenu-sticky-top);
  /* 親 #section-lineup は align-items: flex-start を持つが、stickyの前提として明示しておく */
  align-self: flex-start;
  max-height: calc(100vh - var(--sidemenu-sticky-top) - var(--sidemenu-bottom-gap));
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 内部スクロールが可能であることをユーザーが認識できるよう既定幅で常時表示する */
  scrollbar-width: auto;
  /* 未対応ブラウザ（Safari <17.2 等）では既定動作にフォールバックされる（機能影響なし） */
  scrollbar-gutter: stable;
}

/* JSが #section-lineup の直前に挿入する sentinel 要素。
   サイドバーが sticky-top に達したことを IntersectionObserver で検出する目印 */
.audiobook-filter__sidemenu-sticky-sentinel {
  display: block;
  height: 1px;
  pointer-events: none;
}

/* JSが main#main-content の末尾に挿入する sentinel 要素。
   ページ最下部に到達したことを IntersectionObserver で検出する目印 */
.audiobook-filter__sidemenu-end-sentinel {
  display: block;
  height: 1px;
  pointer-events: none;
}

/* stickyが発動して viewport 上端に張り付いた状態 (JSが付与する class)。
   下端余白を 0 にして max-height を広げ、 内部スクロール領域を最大化する */
.audiobook-filter__sidemenu.is-stuck {
  --sidemenu-bottom-gap: 0px;
}

/* ページが main#main-content の末尾まで到達した状態 (JSが付与する class)。
   max-height と内部スクロールを解除し、 サイドバーの全フィルター項目を一画面で見渡せるようにする。
   発火条件は「main 末尾 sentinel が viewport 内に入った時」。
   フィルター結果が少なくページ全体が viewport より短い場合は初期から true となり、
   サイドバーは常時全表示となる（短いページでは全項目が見える方が UX 上好ましいため意図通り）。
   .is-stuck と同時に付くケースでも max-height: none が後勝ちで効くよう、書き順は .is-stuck の後 */
.audiobook-filter__sidemenu.is-fully-revealed {
  max-height: none;
  overflow-y: visible;
}

.audiobook-filter__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.audiobook-filter__section-title {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1.6px;
  color: #000;
  line-height: 1.5;
}

.audiobook-filter__keyword {
  margin: 0;
  padding: 0;
}

.audiobook-filter__keyword-input {
  width: 100%;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 14px;
  letter-spacing: 0.8px;
  line-height: 1.5;
  color: #000;
  outline: none;
  box-sizing: border-box;
  text-overflow: ellipsis;
}

.audiobook-filter__keyword-input:focus-visible {
  outline: 2px solid #000;
  /* 入力欄が親 .audiobook-filter__sidemenu (overflow-y:auto / 仕様により overflow-x も auto) と
     横幅完全一致のため、正の outline-offset だと左右が clip される。
     負値で要素の内側に押し込んで focus リング全体を可視化する */
  outline-offset: -3px;
}

.audiobook-filter__keyword-input::placeholder {
  color: #000;
  opacity: 0.5;
}

.audiobook-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.audiobook-filter__chips > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.audiobook-filter__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 50px;
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  transition: .5s all;
}

.audiobook-filter__chip:hover {
  background-color: #dddddd;
}

.audiobook-filter__chip.nowpage {
  background-color: #000;
  color: #fff;
  border-color: transparent;
}

/* 「検索条件をクリア」リンク（PC サイドバー末尾 / SP アコーディオン末尾）
   PC では内部スクロール領域 (.audiobook-filter__sidemenu) の最終要素として、
   margin-bottom でスクロール末端の呼吸スペースを確保する */
.audiobook-filter__clear {
  align-self: flex-start;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: #000;
  text-decoration: underline;
  white-space: nowrap;
  transition: opacity .3s ease;
  margin-bottom: 20px;
}

.audiobook-filter__clear:hover {
  opacity: 0.7;
}

.audiobook-filter__clear:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.section-lineup__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-bottom: 60px;
  gap: 10px;
  padding: 0;
}

.section-lineup__list li {
  position: relative;
  transition: all .4s ease 0s;
  /*overflow: hidden;*/
  opacity: 1;
  height: auto;
  margin: 0;
  text-align: center;
}


.section-lineup__list li.is-hidden {
  visibility: hidden;
  opacity: 0;
  height: 0;
  margin: 0;
  padding: 0;
  display: none;
}

.newicon {
  width: 50px;
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 1;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 140px auto;
}

.pagination__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: solid 2px #000;
  border-radius: 50%;
  background-color: #fff;
  color: #000;
  font-weight: 600;
  font-size: 23px;
  text-decoration: none;
  transition: .5s all;
}

/* リンクの番号のみ対象（現在ページの span には効かせない）。
   同一ページのフィルタチップ (.audiobook-filter__chip:hover) と同系の効果 */
a.pagination__number:hover {
  background-color: #ddd;
}

.pagination__number.is-current {
  background-color: #000;
  color: #fff;
}

.pagination__gap {
  color: #000;
  font-weight: 600;
  font-size: 23px;
}

/* アイコンは 13x24 px だが、クリック領域は 24x24 px 以上を確保する
   （WCAG 2.2 の 2.5.8 Target Size (Minimum) 相当）。高さはアイコンの 24px のまま */
.pagination__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: #000;
}

/* リンクの矢印のみ対象（無効時の span には効かせない）。
   同一ページのクリアリンク (.audiobook-filter__clear:hover) と同系の効果 */
a.pagination__arrow {
  transition: opacity .3s ease;
}

a.pagination__arrow:hover {
  opacity: 0.7;
}

.pagination__arrow.is-disabled {
  color: #ccc;
}

.pagination__arrow-icon {
  width: 13px;
  height: 24px;
}

@media (max-width: 1024px) {
  /* 矢印の 44px タップ領域が画面内に収まるよう、リスト幅（88%）の制約を外して
     画面幅いっぱいを使う。要素の合計幅は最大構成（矢印2＋丸6）で 370px あり、
     リスト幅 330px（画面幅 375px 時）のままでは丸が横に潰れる。
     gap を 8px から 6px に詰めているのも同じ理由で、8px では 384px 必要になる */
  .pagination {
    width: 100vw;
    gap: 6px;
    margin: 40px calc(50% - 50vw);
  }

  .pagination__number {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .pagination__gap {
    font-size: 16px;
  }

  /* 丸のタップ領域を 44x44 px 確保する（WCAG 2.2 の 2.5.5 Target Size (Enhanced) 相当）。
     見た目のサイズ 40px は変えず、透明な疑似要素で当たり判定だけを広げる。
     リンクでない現在ページ（span.is-current）には付けない。
     押せない領域が隣のリンクの当たり判定を奪ってしまうため */
  a.pagination__number {
    position: relative;
  }

  a.pagination__number::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* 矢印はリンク要素自体を 44x44 px にして、アイコンを領域の中央に置く。
     疑似要素を外側へ寄せて広げる方式では、アイコンが領域の端に寄ってしまい、
     丸との間にも余白が見えなかったため（無効時の span も同じ箱にして幅を揃える） */
  .pagination__arrow {
    width: 44px;
    height: 44px;
  }

  .newicon {
    top: -15px;
    left: -15px;
  }
}

/* 画面幅 374px 以下（Android の 360px 幅など）では、gap 6px のままだと要素の合計幅が
   画面に収まらず、矢印のタップ領域と丸が 1px ずつ潰れる。ここではさらに gap を詰めて
   44px のタップ領域を優先する */
@media (max-width: 374px) {
  .pagination {
    gap: 4px;
  }
}

.section-lineup__list-item {
  max-width: 196px;
  width: 100%;
}

.section-lineup__list-item a {
  text-decoration: none;
}

.section-lineup__list-item p {
  margin-top: 10px;
  font-weight: 600;
  font-size: 16px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #000;
  text-align: left;
}

.list-item__img {
  max-width: 196px;
  overflow: hidden;
  height: 280px;
  display: flex;
}

.list-item__img img {
  display: block;
  margin: auto;
  max-height: 280px;
  height: 100%;
  object-fit: contain;
}

.list-item__img img {
  transition: 1s all;
}

.list-item__img img:hover {
  transform: scale(1.1, 1.1);
  transition: 1s all;
}


.text-three {
  width: 80%;
}

.floating-share {
  position: fixed;
  z-index: 99999;
  bottom: 10px;
  right: 0;
  background-color: #000;
  width: 50px;
  height: auto;
  padding: 10px 0 5px;
  border-radius: 10px 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.floating-share__button {
  text-align: center;
  text-decoration: none;
  display: block;
  margin: 5px auto;
  width: 100%;
}

@media (max-width: 850px) {
  .section-lineup__list-wrapper {
    /* max-width: 680px;*/
  }

  /* SP は PC 用左サイドバーを非表示にし、#section-lineup を1カラムに戻す */
  .audiobook-filter__sidemenu {
    display: none;
  }

  /* SP アコーディオン内のチップは中央寄せレイアウト（Figma SP 準拠） */
  .sp-searchmenu-child .audiobook-filter__chips {
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    margin: 0 0 24px;
  }

  /* セクション見出しは上余白なし、下に内容との小余白のみ。
     上余白はチップ群側の margin-bottom で担う（上 大きめ、下 中くらいの構成） */
  .sp-searchmenu-child .audiobook-filter__section-title {
    margin: 0 0 12px;
  }

  /* SP アコーディオン内の「条件をクリア」リンクは
     「ジャンルで選ぶ/気分で選ぶ/キーワード検索」と同じ font-size 14px / weight 600、上下 margin 24px */
  .sp-searchmenu-child .audiobook-filter__clear {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    margin: 24px auto;
  }

  #section-lineup {
    display: block;
    width: auto;
    max-width: none;
    /* PC 用 sticky 範囲確保の min-height は SP では不要 */
    min-height: auto;
  }

  .section-lineup__list-wrapper {
    margin: auto;
    max-width: 880px;
    width: 88%;
  }

  .section-lineup__list {
    margin-top: 50px;
  }

  .section-lineup__list-item {
    max-width: 100%;
    width: 48%;
    margin: auto;
  }

  .section-lineup__list-item > button {
    width: 100%;
  }

  .section-lineup__list-item > a {
    width: 100%;
    text-decoration: none;
  }

  .list-item__img {
    display: flex;
    height: 45vw;
    width: 45vw;
    margin: auto;
    max-width: 100%;
  }

  .list-item__img img {
    object-fit: contain;
    max-height: initial;
  }

  .floating-share {
    display: none;
  }

  .section-lineup__list {
    margin: 40px 10px 0 10px;
  }

  .section-lineup__list li.is-hidden {
    visibility: hidden;
    opacity: 0;
    height: 0;
    margin: 0;
    padding: 0;
  }

  .footer-bnr__list {
    padding: 0;
    justify-content: center;
  }

  .footer-bnr__list li {
    width: 40%;
    text-align: center;
  }

}

/* lineup modal */
.modal__trigger {
  cursor: pointer;
  border: none;
  padding: 0;
  text-align: left;
}

.modal__wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  width: 100%;
  height: 100%;
  height: 100vh;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.modal-url-active {
  display: block;
}


@media (max-width: 850px) {
  .modal__trigger {
    margin: 0;
    background-color: #F0F0F0;
  }

  .toggle-btn {
    background-color: #F0F0F0;
  }
}

.modal__layer {
  height: 100%;
  height: 100vh;
  background: rgba(50, 50, 50, .70);
  cursor: pointer;
}

.modal__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(100% - 40px), 1000px);
  height: calc(100% - 40px);
  background: #fff;
  border: solid 2px #000;
}

.modal__inner {
  position: relative;
  overflow: auto;
  scrollbar-width: none;
  /* Firefox */
  height: 100%;
  padding: 100px 40px 40px;
}

.modal__inner::-webkit-scrollbar {
  display: none;
  /* Webkit */
}

.under-close {
  margin: auto;
  text-align: center;
}

.under-modal__close {
  display: inline;
  margin: auto;
  text-align: center;
  background: #fff;
  color: #000;
  border: solid 2px #000;
  font-weight: 500;
  padding: 8px 20px;
  border-radius: 25px;
  cursor: pointer;
}

.under-modal__close:hover {
  background: #000;
  color: #fff;
  transition: .3s;
}

.modal__close {
  position: fixed;
  top: 0;
  right: 0;
  width: 45px;
  height: 45px;
  background: #000;
  color: #000;
  cursor: pointer;
  transition: opacity .6s;
  border: 0;
  border-radius: 0 0 0 10px;
  z-index: 100000;
}

.modal__close:before,
.modal__close:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: #fff;
  content: '';
}

.modal__close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal__close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal__text {
  margin-top: 30px;
  line-height: 2.875;
}

.bookinfo__group {
  display: flex;
  flex-wrap: wrap;
}

.bookinfo__image {
  max-width: 266px;
  height: 380px;
  width: 100%;
  margin: 0 auto;
}

.bookinfo__image img {
  display: block;
  margin: auto;
  max-width: 266px;
  object-fit: contain;
  border: solid 1px #ddd;
}


.bookinfo__content {
  width: 580px;
  margin-left: 30px;
}

.bookinfo__title {
  margin: 0 0 30px 0;
  font-weight: 600;
  font-size: 26px;
}

.bookinfo__name {
  display: flex;
  flex-direction: column;
  font-weight: 400;
  font-size: 16px;
  padding: 0;
  margin: 0 0 27px 0
}

.bookinfo__name-creator {
  margin: 0 0 8px 0;
  display: block;
}

.bookinfo__name-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bookinfo__name-text.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.bookinfo__name-toggle {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 0 0;
  text-decoration: underline;
}

.bookinfo__name-toggle:hover {
  color: #333;
}

.bookinfo__name-time {
  margin: 0 0 8px 0;
  display: block;
}

.bookinfo__name-time:last-child {
  margin: 0;
}

.bookinfo__name-time.bookinfo__name-release-date:not(:last-child) {
  margin-bottom: 16px;
}

.bookinfo__name-time_attent {
  color: #444;
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  word-wrap: break-word;
  white-space: normal;
  margin-top: 5px;
}

.bookinfo__tagarea {
  margin: 0 0 24px 0; /* 前後の要素との余白を確保 */
}

.bookinfo__category-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px; /* 行間・列間の余白を統一制御 */
}

.bookinfo__tag {
  font-weight: 600;
  margin: 0; /* pタグのデフォルトmarginをリセット */
  padding: 5px 8px;
  color: #000;
  border-radius: 5px;
  background-color: #D1D1D1;
}

.bookinfo__tag-wrap {
  display: flex;
  margin: 0;
  padding: 0;
}

.bookinfo__tag-feeling {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto;
  text-align: center;
  border: solid 1px #000;
  background-color: #fff;
  margin: 10px;
}

.bookinfo__tag-text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 12px;
  margin: 0;
  font-weight: 600;
}

.bookinfo__store {
  display: flex;
  flex-wrap: wrap;
  margin-top: 24px;
}

.bookinfo__store-ttl{
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  margin: 24px 0 0 0;
}

.bookinfo__store-attent{
  color: #444;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  margin-top: 5px;
}

.bookinfo__store-link {
  width: 48%;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  text-align: left;
  margin: 0 10px 10px 0;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 400;
  position: relative;
}

.bookinfo__store-link::after{
  content: url("/img/link.svg");
  position: absolute;
  right: 20px;
}

.bookinfo__bookstore-link{
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  margin: 10px 5px 0 0;
  display: inline-block;
}

.bookinfo__store-link span {
  margin-left: 5px;
  font-size: 16px;
}

.bookinfo__ttl {
  margin: 50px 0 20px 0;
  width: 100%;
  letter-spacing: 0.1em;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
}

.bookinfo__story {
  width: 100%;
}

.bookinfo__detail {
  max-width: 300px;
  font-weight: 400;
  font-size: 16px;
  line-height: 34px;
  margin: 0;
}

.bookinfo__story-text {
  font-weight: 400;
  font-size: 18px;
  line-height: 34px;
  margin: 0;
}

.bookinfo__recommend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px;
  padding: 0;
  margin: 0;
  width: 100%;
}

.bookinfo__recommend-detail {
  max-width: 196px;
  width: 100%;
}

.bookinfo__recommend-detail a {
  color: #000;
  text-decoration: none;
}

.bookinfo__recommend-detail p {
  margin-top: 10px;
  font-weight: 600;
  font-size: 16px;
  color: #000;
  text-align: left;
}

.goback{
  display: block;
  text-align: center;
  margin: 40px auto;
  background-color: #fff;
  color: #000;
  border: solid 2px #000;
  border-radius: 40px;
  padding: 10px;
  width: 200px;
  font-weight: 600;
  text-decoration: none;
}

.goback:hover {
  background-color: #000;
  color: #fff;
  transition: .5s;
}


.bookinfo__recommend-detail button {
  background-color: #ffffff;
}

.recommend__img {
  max-width: 196px;
  overflow: hidden;
  height: 280px;
  display: flex;
}

.recommend__img img {
  display: block;
  margin: auto;
  max-height: 280px;
  height: auto;
  object-fit: contain;
  transition: 1s all;
  border: solid 1px #ddd;
}

.recommend__img img:hover {
  transform: scale(1.1, 1.1);
  transition: 1s all;
}

.bookinfo__recommend li {
  position: relative;
  transition: all .4s ease 0s;
  opacity: 1;
  height: auto;
  margin: 0;
  text-align: center;
}

@media (max-width: 1024px) {
  .bookinfo__content {
    width: 100%;
    margin: 20px auto;
  }

  .bookinfo__name {
    font-weight: 400;
  }
}

@media (max-width: 850px) {
  .modal__container {
    width: 100%;
    height: 100vh;
    border: none;
  }

  .modal__inner {
    padding: 70px 20px 90px;
    margin-bottom: 70px;
  }

  .bookinfo__container{
    padding: 20px;
  }

  .bookinfo__content {
    width: 100%;
    margin: 20px auto;
  }

  .recommend__img img {
    max-height: 230px;
  }

  .bookinfo__title {
    font-size: 24px;
  }

  .bookinfo__name {
    justify-content: left;
    font-size: 16px;
    line-height: 30px;
    margin: 0 0 24px 0;
  }

  .bookinfo__name-creator {
    line-height: 24px;
  }

  .bookinfo__name-time {
    line-height: 24px;
  }

  .bookinfo__tagarea {
    /*justify-content: center;*/
  }

  .bookinfo__tag-feeling {
    margin: 0 0 0 10px;
  }

  .bookinfo__tag {
    margin: 0; /* gapで余白を制御するためmarginをリセット */
    font-size: 14px;
  }

  .bookinfo__store {
    justify-content: space-between;
  }

  .bookinfo__store-link {
    width: 100%;
    padding: 10px 20px;
    margin: 0 0 16px 0;
    font-size: 17px;
  }

  .bookinfo__store-link span {
    font-size: 9px;
  }

  .bookinfo__ttl {
    margin-top: 40px;
    width: 100%;
    font-size: 20px;
    font-weight: 600;
  }

  .bookinfo__detail {
    margin-top: 30px;
    max-width: 100%;
    padding-left: 0;
  }

  .bookinfo__recommend-detail {
    width: 48%;
  }
}

/* spsearchmenu */
.sp-searchmenu {
  display: none;
}

@media (max-width: 850px) {
  .footer-padding {
    padding-bottom: 75px;
  }

  .hidden {
    display: none;
  }

  .sp-searchmenu {
    display: block;
    width: 100%;
    margin: 0 auto;
    position: fixed;
    bottom: 0;
    z-index: 101;
  }

  .sp-searchmenu-parent {
    position: relative;
    height: 75px;
    padding-top: 25px;
    background-color: #FFFF8A;
    color: #000;
    text-align: center;
    line-height: 50px;
    border: solid 1px #000;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    font-size: 14px;
    font-weight: 600;
  }

  .open {
    background-color: #FFF;
  }

  .sp-searchmenu-parent:before {
    content: '';
    background: #333;
    border-radius: 50%;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 10px;
    margin: auto;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }

  .sp-searchmenu-parent:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 28%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    left: 50%;
    transform: translateX(-50%) rotate(225deg);
    -webkit-transform: translateX(-50%) rotate(225deg);
    -ms-transform: translateX(-50%) rotate(225deg);
    transition: .3s;
  }

  .sp-searchmenu-parent.open:after {
    top: 22%;
    transform: translateX(-50%) rotate(45deg);
  }

  .sp-searchmenu-child {
    border-top: solid 1px #fff;
    border-right: solid 1px #000;
    border-left: solid 1px #000;
    display: none;
    padding: 4px 10px 1px;
    margin: 0;
    background-color: #ffffff;
    text-align: center;
  }

  .sp-searchmenu-ttl {
    border-bottom: none;
    font-size: 14px;
    font-weight: 600;
    margin: 10px;
  }

  #sp-searchmenu-toggle {
    border-bottom: none;
    font-size: 14px;
    font-weight: 600;
    margin: 10px;
    background: none;
    border: none;
    color: #000;
  }

  .sp-search-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    border: 1px solid #000000;
    border-radius: 25px;
    margin-bottom: 15px;
  }

  .sp-search-form input {
    flex: 1;
    min-width: 0;
    margin-left: 15px;
    height: 40px;
    padding: 5px 15px;
    border: none;
    box-sizing: border-box;
    font-size: 1em;
    outline: none;
    text-overflow: ellipsis;
  }

  .sp-search-form input::placeholder {
    color: #777777;
  }

  .sp-search-form button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 45px;
    border: none;
    background-color: transparent;
    cursor: pointer;
  }

  .sp-search-form button::after {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("/img/search.svg");
    background-repeat: no-repeat;
    content: '';
  }
}

/* index.html */
#contents {
  background: #E3FFFF;
}

#fv {
  margin: 100px auto 0 auto;
  max-width: 1240px;
  width: 95%;
  background: #F2F2DA;
  border-radius: 2rem;
  border: solid 2px #000;
  height: 600px;
  object-fit: contain;
  background-image: url("/img/OTOproject_main.jpg");
  background-size: cover;
  z-index: 0;
  background-position: right;
  overflow: hidden;
  position: relative;
}


@media (max-width: 1283px) {
  #fv {
    margin: 60px auto 0 auto;
  }
}

.particle {
  display: block;
  max-width: 1240px;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

/* Animation */
.particle__container {
  position: absolute;
  top: 0;
  overflow: hidden;
  /*height: 600px;*/
  border-radius: 2rem;
}

.particle {
  animation: floating-y 2s ease-in-out infinite alternate-reverse;
  animation-play-state: running;
}

@keyframes floating-y {
  0% {
    transform: translateY(-3%);
  }

  100% {
    transform: translateY(0%);
  }
}

.scrollbar__container {
  position: relative;
  z-index: 3;
}

.scrollbar__text {
  display: inline-block;
  position: absolute;
  bottom: 0;
  padding: 10px 10px 110px;
  color: #000;
  font-size: 14px;
  font-family: serif;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-lr;
  left: 10%;
  transform: translateX(-50%);
}

.scrollbar {
  position: absolute;
  left: 5%;
  transform: translateX(-50%);
  bottom: 1px;
}

.scrollbar::after {
  content: "";
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 2px;
  height: 100px;
  background: #fff;
  z-index: 0;
}

.scrollbar::before {
  z-index: 1;
  content: url("/img/scroll.svg");
  text-align: center;
  position: absolute;
  bottom: 0;
  left: -41px;
  width: 80px;
  height: 26px;
  animation: circlemove 3s ease-in-out infinite,
    cirlemovehide 3s ease-out infinite;
}

.scrollbar.stop-animation::before {
  animation-play-state: paused;
}

@keyframes circlemove {
  0% {
    bottom: 120px;
  }

  100% {
    bottom: 20px;
  }
}

@keyframes cirlemovehide {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.top-news__ttl {
  margin: 30px 0;
  background-color: #000;
  letter-spacing: 1px;
  font-weight: 100;
  font-size: 56px;
  color: #fff;
  line-height: 1;
  display: inline-block;
}

.natsu-oto-banner__container {
  max-width: 1000px;
  width: 100%;
  margin: 60px auto 0 auto;
  padding: 0 10px;
}

.natsu-oto-banner__link {
  display: block;
}

.natsu-oto-banner__link picture {
  display: block;
}

.natsu-oto-banner__img {
  display: block;
  max-width: 980px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .natsu-oto-banner__img {
    max-width: 363px;
  }
}

.natsu-oto-banner__container + .top-news__container {
  margin-top: 0;
  padding-top: 0;
}

.natsu-oto-banner__container + .top-news__container .top-news__ttl {
  margin-top: 60px;
}

.top-news__container {
  position: relative;
  border-radius: 20px;
  max-width: 1000px;
  width: 100%;
  padding: 10px 10px 30px 10px;
  z-index: 1;
  margin: 20px auto;
}

.top-news__list-item a {
  color: #000;
  font-size: 16px;
  text-decoration: none;
  display: flex;
  align-items: baseline;
}

.list-item__ttl {
  padding-left: 15px;
  text-decoration: underline;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
  flex: 1;
  min-width: 0;
}

.list-item__data {
  text-decoration: none;
  width: 120px;
  flex-shrink: 0;
}

.top-news__list {
  color: #000;
  -webkit-line-clamp: 5;
  text-align: center;
}

.top-news__list-show {
  background-color: #fff;
  padding: 8px 20px;
  text-decoration: none;
  border-radius: 40px;
  border: solid 2px #000;
  font-size: 16px;
  color: #000;
  font-weight: 600;
  display: block;
  text-align: center;
  width: fit-content;
  margin: 50px auto 0 auto;
}


.top-news__list-show:hover {
  background-color: #000;
  color: #fff;
  transition: .5s;
}

.top-news__list-item {
  margin: 10px 0;
  text-align: left;
}

.line {
  margin: 50px 0 -5px 0;
  height: 200px;
  color: #fff;
  justify-content: center;
  align-items: center;
  background-image: url("/img/wave2.svg");
  object-fit: cover;
  background-repeat: no-repeat;
  background-repeat: repeat-x;
}

.line-end {
  margin-top: -55px;
  height: 100px;
  color: #fff;
  justify-content: center;
  align-items: center;
  background-image: url("/img/wave2.svg");
  object-fit: cover;
  background-repeat: no-repeat;
  background-repeat: repeat-x;
}

@media (max-width: 767px) {

  #fv {
    width: 95%;
    margin: 53px auto 0 auto;
  }

  .line {
    height: 168px;
    object-fit: cover;
    background-size: contain;
    width: 101%;
  }

  .line-end {
    height: 60px;
    object-fit: cover;
    background-size: contain;
    width: 101%;
  }

}

.panel {
  height: 100%;
  width: 101%;
  overflow: hidden;
}

.panel.section_03 {
  margin-bottom: 0;
}

.section_01 {
  background: #E3FFFF;
  padding-bottom: 150px;
  margin-top: -140px;
}

.section_02 {
  background: #D7FBE2;
  border-radius: 2rem 2rem 0 0;
  border: solid 2px #000;
  margin: -140px 0px 0px -2px;
}

.section_03 {
  background: #D1FFF9;
  border-radius: 2rem 2rem 0 0;
  border: solid 2px #000;
  margin: -60px 0px 0px -2px;
}

.section_04 {
  background: #FCFBDF;
  border-radius: 2rem 2rem 0 0;
  border: solid 2px #000;
  margin: -60px 0px 0px -2px;
}

.section_05 {
  background: #FFEBF0;
  border-radius: 2rem 2rem 0 0;
  border: solid 2px #000;
  margin: -60px 0px 0px -2px;
}

.section_06 {
  background: #D2E3F9;
  border-radius: 2rem 2rem 0 0;
  border: solid 2px #000;
  margin: -60px 0px 0px -2px;
}

.section_07 {
  background: #E3FFFF;
  margin: -30px 0 50px 0;
  padding: 10px 0;
}

.illustration {
  text-align: center;
  margin-top: -110px;
  margin-bottom: 130px;
}

.section_enjoy {
  text-align: center;
}

.enjoy_audiobook {
  text-align: center;
  background-color: #000;
  color: #fff;
  font-size: 80px;
  font-weight: 300;
  display: inline-block;
  margin: auto;
  line-height: 1;
  padding-bottom: 3px;
  font-feature-settings: "palt";
}

.enjoy_text p {
  font-feature-settings: "palt";
  font-family: Noto Serif JP;
  font-weight: 500;
  font-size: 22px;
  line-height: 50px;
  letter-spacing: 0%;
  padding: 5px 0;
}

.enjoy_text>p>span>.kerning-left {
  margin-left: -20px;
}

.enjoy_text>p>span>.kerning-right {
  margin-right: -18px;
}

.enjoy_text>span {
  font-weight: 500;
  font-size: 22px;
  line-height: 0;
  letter-spacing: 0%;
  text-decoration: none;
  color: #000;
}

.enjoy_text p span {
  font-size: 42px;
  margin-left: 5px;
  line-height: 1.9;
}

.enjoy_image {
  background: #fff;
  border: solid 2px #000;
  height: 600px;
  width: 600px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  position: relative;
}

.enjoy_image-text {
  width: 520px;
  height: 520px;
  margin: 40px auto;
  font-weight: 600;
  font-size: 5px;
}

.enjoy_image-text svg {
  overflow: visible;
}

.enjoy_image-text path {
  fill: none;
}

.enjoy_image-text text {
  fill: #000000;
}

@keyframes donut-spin {
  to {
    transform: rotate(1turn);
  }
}

.svgtext_small {
  font-size: 3px;
}

.enjoy_image-inner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  top: 15%;
  width: 100%;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.enjoy_image-item {
  height: 180px;
  text-align: center;
  position: relative;
}

.enjoy_image-inner p {
  display: block;
  width: 100%;
  margin: 3px auto;
  font-family: Noto Serif JP;
  font-weight: 600;
}

.enjoy_image-inner>div:first-child {
  width: 100%;
}

.enjoy_image-item img {
  margin: auto;
  border: solid 1px #000;
}

.audio_button1,
.audio_button2,
.audio_button3 {
  position: absolute;
  width: 50px;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  height: 50px;
  margin: 0 auto;
  background: url("/img/audio-start.svg") no-repeat center center;
  background-size: contain;
  border: none;
}


.audio_button1:hover,
.audio_button2:hover,
.audio_button3:hover {
  background: url("/img/audio-start-hover.svg") no-repeat center center;
  transition: .5s;
}

.play .audio_button1,
.play .audio_button2,
.play .audio_button3 {
  background-image: url("/img/audio-stop.svg");
}

.play .audio_button1:hover,
.play .audio_button2:hover,
.play .audio_button3:hover {
  background-image: url("/img/audio-stop-hover.svg");
  transition: .5s;
}

.section__ttl {
  display: flex;
  flex-wrap: wrap;
  max-width: 1240px;
  margin: auto;
  position: relative
}

.ttl-padding {
  width: 61%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

@keyframes backeffect {
  0% {
    transform: translateY(-12%);
  }

  100% {
    transform: translateY(-10%);
  }
}

.animation-effects,
.animation-effects2,
.animation-effects3,
.animation-effects4,
.animation-effects5 {
  animation: backeffect 2s ease-in-out infinite alternate-reverse;
  animation-play-state: running;
}

.ttl-section-02 {
  background-image: url("/img/OTOproject_sub_01asakatsu.jpg");
}

.ttl-section-effects {
  background-image: url("/img/OTOproject_sub_01asakatsu_object.png");
  position: absolute;
  width: 61%;
  height: 1080px;
  background-size: cover;
  background-repeat: no-repeat;
}

.section_03-contents>div>.ttl-section-effects {
  background-image: url("/img/OTOproject_sub_02drive_object.png");
  top: 30px;
}

.section_03-contents>div>.ttl-text {
  padding: 122px 0 520px 0;
}

.section_04-contents>div>.ttl-section-effects {
  background-image: url("/img/OTOproject_sub_03lunch_object.png");
  top: 30px;
}

.section_04-contents>div>.ttl-text {
  padding: 190px 0 390px 0;
}

.section_05-contents>div>.ttl-section-effects {
  background-image: url("/img/OTOproject_sub_04sunset_object.png");
}

.right-effects {
  right: 0;
  top: 0;
}

.ttl-section-effects_flight {
  background-image: url("/img/OTOproject_sub_05flight-effects.png");
  left: 0;
  top: 150px;
  z-index: 0;
  background-size: contain;
}

.ttl-section-03 {
  background-image: url("/img/OTOproject_sub_02drive.jpg");
}

.ttl-section-04 {
  background-image: url("/img/OTOproject_sub_03lunch.jpg");
}

.ttl-section-05 {
  background-image: url("/img/OTOproject_sub_04sunset.jpg");
}

.ttl-section-06 {
  background-image: url("/img/OTOproject_sub_05flight.png");
  z-index: 1;
}

.ttl-section-06-effects {
  position: absolute;
  background-image: url("/img/OTOproject_sub_05flight-effects.png");
  animation: backeffect 2s ease-in-out infinite alternate-reverse;
  animation-play-state: running;
  top: 200px;
  left: 20px;
}

.section_01-contents {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 60px auto 90px auto;
  justify-content: space-evenly;
}

.section_07-contents {
  max-width: 1200px;
  margin: 40px auto;
  text-align: center;
}

.section_07-contents h3 {
  display: inline-block;
  background-color: #000;
  color: #fff;
  font-weight: 100;
  font-size: 56px;
  text-align: center;
  line-height: 1;
  padding-bottom: 2px;
}

.section_07-contents p {
  font-size: 23px;
  text-align: center;
  font-family: Noto Serif JP;
  font-weight: 500;
  line-height: 50px;

}

.ttl-text {
  margin: 0 auto;
  padding: 190px 0 520px 0;
}

.ttl-text h3 {
  writing-mode: vertical-rl;
  letter-spacing: 1px;
  font-weight: 100;
  font-size: 60px;
  color: #fff;
  line-height: 59px;
}

.ttl-text h3 span {
  display: inline-block;
  background-color: #000;
  margin: 0 5px;
  white-space: nowrap
}

.mini {
  font-size: 20px;
}

.section__inner {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 140px 0;
  max-width: 1240px;
  margin: auto;
  position: relative;
  z-index: 2;
}

.inner-text-wrap {
  width: 420px;
  margin: auto;
}

.section_03-contents>div>div>.inner-text-wrap {
  width: 340px;
}

.section_04-contents>div>div>.inner-text-wrap {
  width: 500px;
}

.section_05-contents>div>div>.inner-text-wrap {
  width: 510px;
}

.section_06-contents>div>.ttl-text {
  margin: 0 auto;
  padding: 120px 0 380px 0;
}


.inner-text {
  width: 49%;
  text-align: center;
  margin: 100px 0px 100px 20px;
  position: relative;
}

.inner-text-flont {
  display: block;
  margin: 5px auto;
  font-family: Noto Serif JP;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 8px;
  text-align: left;
}

.inner-text-end {
  display: block;
  margin: 5px auto;
  font-family: Noto Serif JP;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 8px;
  text-align: right;
}

.section_05-contents>div>div>.inner-text-wrap>.inner-text-flont,
.section_05-contents>div>div>.inner-text-wrap>.inner-text-end {
  font-weight: 600;
  font-size: 26px;
}

.inner-image {
  width: 49%;
  position: relative;
}


/* top-recommend */

.inner-image-audio {
  top: -250px;
  position: absolute;
  background: #fff;
  border: solid 2px #000;
  height: 560px;
  width: 560px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  display: flex;
  align-items: center;
}

.inner-image-text {
  top: -273px;
  left: -7px;
  position: absolute;
  width: 580px;
  height: 580px;
  margin: 0 auto;
  font-weight: 600;
  font-size: 4px;
  letter-spacing: 0.8px;
}

.inner-image-text svg {
  overflow: visible;
}

.inner-image-text path {
  fill: none;
}

.inner-image-text text {
  fill: #000000;
}

@keyframes donut-spin2 {
  to {
    transform: rotate(1turn);
  }
}

.section-right-text {
  top: -273px;
  left: 37px;
  position: absolute;
  width: 580px;
  height: 580px;
  margin: 0 auto;
  font-weight: 600;
  font-size: 4px;
  letter-spacing: 0.7px;
}

.section-right-image {
  left: 52px;
}

.inner-image-item {
  height: 180px;
  text-align: center;
  position: relative;
}

.inner-image-ttl {
  font-weight: 600;
  font-size: 24px;
  margin: 15px auto;
}

.inner-image-name {
  margin: 5px auto;
  font-size: 18px;
}

.inner-image-link {
  text-decoration: none;
  color: #000;
  display: inline-block;
  font-weight: 600;
  border-radius: 40px;
  border: solid 2px #000;
  padding: 4px 10px 5px 10px;
  margin: 20px auto;
}

.inner-link {
  margin: 80px auto 30px auto;
}

.inner-link a {
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 24px;
  background-color: #000;
  padding: 8px 20px 9px 20px;
  border-radius: 40px;
  border: solid 2px #000;
}

.inner-image-link:hover,
.inner-link a:hover {
  background-color: #fff;
  color: #000;
  transition: 0.5s;
}

/* top-slider */
.splide__slide {
  text-align: center;
  padding-top: 20px;
}

.splide__slide img {
  height: auto;
  max-height: 248px;
  border: solid 1px #000;
}

@media (max-width: 1140px) {

  .line,
  .line-end {
    background-size: contain;
    width: 101%;
  }


  .line {
    background-image: url("/img/wave2sp.svg");
  }

  .line-end {
    background-image: url("/img/wave2sp.svg");
    height: 55px;
  }

  .section_01-contents {
    align-items: flex-end;
  }

  .enjoy_image {
    height: 400px;
    width: 400px;
  }

  .enjoy_image-text {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 420px;
    height: 420px;
    margin: 0;
  }

  .enjoy_image-item {
    height: 130px;
  }

  .enjoy_image-inner {
    top: 5%;
  }

  .inner-image-audio {
    height: 520px;
    width: 520px;
    right: 40px;
  }

  .inner-image-text {
    top: -265px;
    right: 25px;
    left: initial;
    position: absolute;
    width: 550px;
    height: 550px;
  }

  .inner-text-wrap {
    width: 100%;
  }

  .inner-text-flont {
    text-align: center;
    letter-spacing: 3px;
    font-size: 22px !important;
  }

  .inner-text-end {
    text-align: center;
    letter-spacing: 3px;
    font-size: 22px !important;
  }

  .inner-text {
    margin: 100px 20px 100px 0px;
  }

  .section-right-image {
    left: 50px;
  }

  .section-right-text {
    left: 33px;
  }
}

.pconly {
  display: inline-block;
}

.sponly {
  display: none;
}

@media (max-width: 1024px) {
  .enjoy_text {
    width: 100%;
  }

  .enjoy_text p {
    text-align: center;
  }

  .enjoy_text>span {
    text-align: center;
    display: block;
    width: 100%;
    line-height: 1.5;
  }

  .enjoy_image {
    margin: 40px auto 0 auto;
  }

  .pconly {
    display: none;
  }

  .sponly {
    display: block;
  }

  .section__ttl {
    justify-content: space-evenly;
  }

  .ttl-padding {
    height: 600px;
    width: 100%;
    background-size: contain;
    background-position: top;
  }

  .ttl-section-effects {
    height: 600px;
    width: 100%;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    top: 50px;
  }

  .section_03-contents>div>.ttl-section-effects {
    height: 634px;
  }

  .ttl-text {
    margin: -200px 0 0 100px;
    padding: 0;
  }

  .inner-image {
    width: 300px;
    height: 300px;
    top: -0;
    margin: auto;
    text-align: center;
  }

  .inner-image-audio {
    top: 110px;
    left: 50%;
    right: initial;
    width: 350px;
    height: 350px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .inner-image-text {
    top: -79px;
    right: 20px;
    margin: auto;
    height: 350px;
    width: 350px;
    position: relative;
  }

  .section__inner {
    position: relative;
    margin: 110px auto 110px auto;
    flex-direction: column-reverse;
  }

  .ttl-text h3 {
    font-size: 30px;
    line-height: 31px;
    margin: 10px auto;
    position: relative;
    z-index: 2;
    letter-spacing: 1;
  }

  .ttl-text h3 span {
    margin: 0 2px;
  }

  .inner-image-ttl {
    font-size: 16px;
    margin: 15px auto 0 auto;
  }

  .inner-image-name {
    margin: 0px auto;
    font-size: 13px;
  }

  .splide__slide {
    text-align: center;
    padding-top: 10px;
  }

  .inner-image-link {
    margin: 10px auto 0 auto;
    font-size: 14px;
    padding: 10px 20px;
  }

  .inner-text {
    margin: 20px auto;
    width: 100%;
  }

  .inner-link {
    position: absolute;
    left: 50%;
    bottom: 8%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    white-space: nowrap;
    margin: 0 auto;
  }

  .section_03-contents>.section__ttl,
  .section_05-contents>.section__ttl {
    flex-direction: column-reverse;
  }

  .ttl-section-03 {
    z-index: 0;
  }

  .inner-link a {
    font-size: 18px;
  }

  .section_03-contents>.section__ttl>.ttl-text {
    margin: -120px 0 0 260px;
    z-index: 2;
    padding: 0;
  }


  .section_05-contents>.section__ttl>.ttl-text {
    margin: -65px 0 0 260px;
    z-index: 2;
    padding: 0;
  }



  .section_03-contents>.section__inner {
    margin: 40px auto 110px auto;
    flex-direction: column;
  }


  .section_05-contents>.section__inner {
    margin: 45px auto 110px auto;
    flex-direction: column;
  }



  .section_04-contents>.section__inner {
    margin: 80px auto 110px auto;
  }

  .section_06-contents>.section__inner {
    margin: 33px auto 80px auto;
  }


  .section_02-contents>.section__ttl>.ttl-text {
    margin: -85px 0 -70px -260px;
    width: 100%;
    padding: 0;
  }

  .section_04-contents>.section__ttl>.ttl-text,
  .section_06-contents>.section__ttl>.ttl-text {
    margin: -150px 0 -70px -260px;
    width: 100%;
    padding: 0;
  }

  .section_06-contents>.section__ttl>.ttl-text {
    margin: -138px 0 -70px -215px;
    padding: 0;
    z-index: 3;
  }

  .section_06-contents>.section__ttl>.ttl-text h3 {
    font-size: 28px;
    line-height: 30px;
  }

  .section_06-contents>.section__ttl>.ttl-text h3 span {
    margin: 0 4px;
    line-height: 1;
  }

  .listen {
    line-height: 0.8;

  }

  .section_04-contents>div>div>.inner-text-wrap,
  .section_05-contents>div>div>.inner-text-wrap {
    width: 100%;
  }

  .section-right-text {
    left: -32px;
    right: initial;
  }

  .splide__slide img {
    max-height: 140px;
  }

  .section_07-contents {
    padding: 10px;
  }

  .section_07-contents h3 {
    font-size: 30px;
  }

  .section_07-contents p {
    text-align: left;
    font-size: 17px;
    line-height: 40px;
    max-width: 360px;
    margin: auto;
  }

  .top-news__list-item a {
    flex-direction: column;
    align-items: flex-start;
  }

  .list-item__ttl {
    padding-left: 0;
    font-size: 15px;
    line-height: 1.8;
    display: block;
  }


  #fv {
    height: 650px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right 25% bottom 45%;
  }

  .top-news__ttl {
    font-size: 30px;
    line-height: 1;
  }

  .top-news__list {
    padding: 10px;
    margin: 0 auto;
  }

  .particle__container {
    height: 700px;
  }

  .particle {
    height: 850px;
    object-fit: cover;
  }

  .scrollbar {
    left: 8%;
    bottom: -5px;
  }

  .scrollbar::before {
    content: url("/img/scroll_bk.svg");
    color: #fff;
    left: -29px;
    width: 58px;
    height: 0px;
    font-size: 12px;
  }

  .scrollbar::after {
    background: #000;
    left: -2px;
    height: 50px;
  }


  @keyframes circlemove {
    0% {
      bottom: 75px;
    }

    100% {
      bottom: 30px;
    }
  }

  @keyframes cirlemovehide {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    80% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  .panel {
    width: 101.2%;
  }

  .horizontal_scroll .scroller {
    margin-top: 130px;
  }

  .horizontal_scroll .scroller>* {
    font-size: 70px;
    font-feature-settings: normal;
    margin: 0;
  }

  .enjoy_text p {
    font-size: 17px;
    line-height: 35px;
    margin: 0 auto 30px auto;
    max-width: 360px;
    text-align: left;
  }

  .enjoy_text p span {
    font-size: 32px;
    margin: 10px 0;
    display: block;
  }

  .enjoy_text>p>span>.kerning-right {
    margin-right: -16px;
    display: inline;
  }

  .enjoy_text>p>span>.kerning-left {
    margin-left: -15px;
    display: inline;
  }

  .enjoy_text>span {
    font-size: 20px;
  }

  .enjoy_image {
    height: 420px;
    width: 420px;
    margin: 40px auto 0 auto;
  }

  .enjoy_image-inner p {
    width: 90%;
  }

  .enjoy_image-inner {
    top: 15%;
    gap: 5px 10px;
  }

  .enjoy_image-text {
    position: absolute;
    top: 35px;
    left: 24px;
    width: 370px;
    height: 370px;
    margin: 0;
  }

  .audio_button1,
  .audio_button2,
  .audio_button3 {
    top: 40px;
  }

  .enjoy_image-item {
    height: 125px;
  }

  .enjoy_audiobook {
    text-align: left;
    font-size: 50px;
    background-color: initial;
  }

  .enjoy_audiobook span {
    display: inline-block;
    background-color: #000;
    margin: 4px auto;
    line-height: 1.1;
    padding-bottom: 2px;
  }

  .section_01-contents {
    margin: 40px auto 90px auto;
  }

}

@media (max-width: 750px) {
  .ttl-padding {
    background-size: cover;
  }

  .ttl-section-effects {
    background-size: cover;
  }

  .ttl-section-effects_flight {
    background-size: cover;
    top: 80px;
  }
}

@media (max-width: 430px) {

  .ttl-padding,
  .ttl-section-effects {
    height: 570px;
  }

  .section_03-contents>div>.ttl-section-effects {
    height: 600px;
  }
}

@media (max-width: 412px) {

  .ttl-padding,
  .ttl-section-effects {
    height: 550px;
  }

  .section_03-contents>div>.ttl-section-effects {
    height: 575px;
  }
}

@media (max-width: 390px) {

  .ttl-padding,
  .ttl-section-effects {
    height: 520px;
  }

  .section_03-contents>div>.ttl-section-effects {
    height: 545px;
  }
}

@media (max-width: 375px) {

  .ttl-padding,
  .ttl-section-effects {
    height: 500px;
  }

  .section_03-contents>div>.ttl-section-effects {
    height: 522px;
  }
}

@media (max-width: 360px) {

  .ttl-padding,
  .ttl-section-effects {
    height: 480px;
  }

  .section_03-contents>div>.ttl-section-effects {
    height: 500px;
  }
}


/* news */

.news__ttl {
  position: absolute;
  background-color: #000;
  writing-mode: vertical-rl;
  letter-spacing: 1px;
  font-weight: 100;
  font-size: 60px;
  color: #fff;
  line-height: 59px;
  left: 0;
  top: -40px;
}

.news__wrapper {
  width: 100%;
  max-width: 1024px;
  margin: 200px auto 20px auto;
  text-align: center;
  position: relative;
  min-height: 240px;
}

.news__list {
  padding: 0;
  color: #000;
  line-height: 2.5;
  text-decoration: none;
  font-size: 18px;
  text-align: left;
  max-width: 700px;
  margin: auto;
}

.news__list a {
  color: #000;
  text-decoration: none;
}

.news__item-ttl {
  text-decoration: underline;
  margin-left: 20px;
  font-weight: 600;
}

.news__item-data {
  text-decoration: none;
  font-size: 16px;
}

@media (max-width: 1250px) {
  .news__ttl {
    top: 0;
  }
}

@media (max-width: 1024px) {
  .news__wrapper {
    margin: 240px auto 20px auto;
  }

  .news__ttl {
    top: 0;
  }
}

@media (max-width: 980px) {
  .news__ttl {
    margin: 0;
    position: absolute;
    background-color: #000;
    writing-mode: initial;
    letter-spacing: 1px;
    font-weight: 200;
    font-size: 45px;
    color: #fff;
    line-height: 1;
    right: 10px;
    left: initial;
    top: -80px;
  }
}

@media (max-width: 767px) {
  .news__wrapper {
    margin: 180px auto 20px auto;
  }

  .news__ttl {
    margin: 0;
    position: absolute;
    background-color: #000;
    writing-mode: initial;
    letter-spacing: 1px;
    font-weight: 200;
    font-size: 45px;
    color: #fff;
    line-height: 1;
    right: 10px;
    left: initial;
    top: -80px;
  }

  .news__list {
    text-align: left;
    margin: 30px 10px;
  }

  .news__item {
    line-height: 30px;
    margin: 15px auto;
  }

  .news__list a {
    font-size: 15px;
  }

  .news__list a>span {
    display: block;
    margin: 0;
    font-size: 18px;
  }
}

.js-scroll-overlap:not(.is-disabled) {
  --sticky-offset: -1px;
  position: sticky;
  top: var(--sticky-offset);
}

.relative {
  position: relative;
}

.scroll_contents>*:last-child {
  margin-right: 20px;
}


.scroll_wrap {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  padding: 105px 0 30px 0;
}

.scroll_contents {
  display: flex;
  padding-left: 20px;
  margin-top: 85px;
}

.scroll_item {
  font-size: 156px;
  padding: 0 0 10px 0;
  background-color: #000;
  color: #fff;
  font-weight: 100;
  justify-content: center;
  align-items: center;
  line-height: 1;
  letter-spacing: -2px;
  margin-left: -2px;
}


.scroll_contents>*:first-child {
  margin-left: 20px;
}

.scroll_contents>*:nth-child(7),
.scroll_contents>*:nth-child(8) {
  margin-left: -5px;
}

.loading {
  z-index: 3;
  width: 100%;
  position: absolute;
  overflow: hidden;
  -o-object-fit: fill;
  object-fit: fill;
  transition: all 0.5s linear;
  background-color: #f2f2da;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  height: 100%;
  display: flex;
}

/*ローディング画面を非表示にする*/
.loading.loaded {
  opacity: 0;
  visibility: hidden;
}

.loading-bg {
  max-width: 100%;
  height: 100%;
  transition: all 0.5s linear;
  z-index: 2;
  background-color: #f2f2da;
  position: relative;
}

.loading-bg.loaded {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 1024px) {
  .loading {
    width: 100%;
    text-align: center;
    margin: auto;
    display: flex;
    justify-content: center;
  }

  .loading.loaded {
    width: 100%;
    text-align: center;
    margin: auto;
    display: flex;
    justify-content: center;
  }

  .scroll_item {
    font-size: 60px;
  }

}

video {
  outline: solid 1px #f2f2da;
  border: solid 1px #f2f2da;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
}

.animation-stop,
.loading-stop {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.loading-stop {
  z-index: 3;
}

.effects-stop,
.effects-stop3,
.effects-stop5 {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 2;
}

.effects-stop2,
.effects-stop4 {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

#check01,
#loading-check {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 27px;
  height: 28px;
  cursor: pointer;
  opacity: 1;
}

#effects01 {
  position: absolute;
  right: -42px;
  bottom: 7px;
  width: 29px;
  height: 29px;
  cursor: pointer;
  opacity: 1;
}

#effects02,
#effects04 {
  position: absolute;
  left: -43px;
  bottom: 7px;
  width: 29px;
  height: 29px;
  cursor: pointer;
  opacity: 1;
}

#effects03 {
  position: absolute;
  right: -42px;
  bottom: 7px;
  width: 29px;
  height: 29px;
  cursor: pointer;
  opacity: 1;
}

#effects05 {
  position: absolute;
  right: -42px;
  bottom: 7px;
  width: 29px;
  height: 29px;
  cursor: pointer;
  opacity: 1;
}

.animation-stop input[type="checkbox"]+label,
.loading-stop input[type="checkbox"]+label {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 29px;
  height: 29px;
  background-image: url("/img/animation-stop.svg");
  background-size: contain;
  cursor: pointer;
}

.effects-stop input[type="checkbox"]+label,
.effects-stop3 input[type="checkbox"]+label,
.effects-stop5 input[type="checkbox"]+label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 29px;
  height: 29px;
  background-image: url("/img/animation-stop.svg");
  background-size: contain;
  cursor: pointer;
}


.effects-stop2 input[type="checkbox"]+label,
.effects-stop4 input[type="checkbox"]+label {
  position: absolute;
  right: 10px;
  left: initial;
  bottom: 10px;
  width: 29px;
  height: 29px;
  background-image: url("/img/animation-stop.svg");
  background-size: contain;
  cursor: pointer;
}

.animation-stop input[type="checkbox"]:checked+label,
.loading-stop input[type="checkbox"]:checked+label {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 29px;
  height: 29px;
  background-image: url("/img/animation-start.svg");
  background-size: contain;
  cursor: pointer;
}

.effects-stop input[type="checkbox"]:checked+label,
.effects-stop3 input[type="checkbox"]:checked+label,
.effects-stop5 input[type="checkbox"]:checked+label {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 29px;
  height: 29px;
  background-image: url("/img/animation-start.svg");
  background-size: contain;
  cursor: pointer;
}

.effects-stop2 input[type="checkbox"]:checked+label,
.effects-stop4 input[type="checkbox"]:checked+label {
  position: absolute;
  right: 10px;
  left: initial;
  bottom: 10px;
  width: 29px;
  height: 29px;
  background-image: url("/img/animation-start.svg");
  background-size: contain;
  cursor: pointer;
}

@media (max-width: 750px) {

  .animation-stop,
  .loading-stop {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }

  .loading-stop {
    z-index: 3;
  }

  .animation-stop input[type="checkbox"]+label,
  .loading-stop input[type="checkbox"]+label {
    right: 0;
    bottom: 0;
    width: 44px;
    height: 45px;
  }

  .animation-stop input[type="checkbox"]:checked+label,
  .loading-stop input[type="checkbox"]:checked+label {
    right: 0;
    bottom: 0;
    width: 44px;
    height: 45px;
  }
}

.splide__arrow {
  background: #ffffff;
  border: solid 2px #000;
}

.splide__arrow {
  width: 50px;
  height: 50px;
}

.button::before {
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 0;
  content: "";
  height: 21px;
  left: 12px;
  margin: auto;
  position: absolute;
  top: 6px;
  width: 20px;
}

.prev::before {
  background-image: url("/img/prev.svg");
}

.next::before {
  background-image: url("/img/next.svg");
}

.splide__arrow {
  opacity: 1 !important;
}

.splide__arrow:hover {
  opacity: 0.5 !important;
  transition: .4s;
}

@media (max-width: 1024px) {
  .section__ttl {
    max-width: 450px;
  }

  .effects-stop,
  .effects-stop3,
  .effects-stop5 {
    right: 0;
    bottom: 0;
  }

  .effects-stop2,
  .effects-stop4 {
    left: 0;
    bottom: 0;
  }

  #effects01 {
    position: absolute;
    right: 9px;
    bottom: 25px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    opacity: 1;
  }

  #effects02,
  #effects04 {
    position: absolute;
    left: 13px;
    bottom: 92px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    opacity: 1;
  }

  #effects03 {
    position: absolute;
    right: 7px;
    bottom: 57px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    opacity: 1;
  }

  #effects05 {
    position: absolute;
    right: 18px;
    bottom: 109px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    opacity: 1;
  }

  .effects-stop input[type="checkbox"]+label {
    right: 11px;
    left: initial;
    bottom: 28px;
    width: 44px;
    height: 44px;
  }

  .effects-stop3 input[type="checkbox"]+label {
    right: 10px;
    left: initial;
    bottom: 60px;
    width: 44px;
    height: 44px;
  }

  .effects-stop5 input[type="checkbox"]+label {
    right: 20px;
    left: initial;
    bottom: 112px;
    width: 44px;
    height: 44px;
  }

  .effects-stop2 input[type="checkbox"]+label,
  .effects-stop4 input[type="checkbox"]+label {
    left: 17px;
    right: initial;
    bottom: 95px;
    width: 44px;
    height: 44px;
  }

  .effects-stop input[type="checkbox"]:checked+label {
    right: 11px;
    left: initial;
    bottom: 28px;
    width: 44px;
    height: 44px;
  }

  .effects-stop3 input[type="checkbox"]:checked+label {
    right: 10px;
    left: initial;
    bottom: 60px;
    width: 44px;
    height: 44px;
  }

  .effects-stop5 input[type="checkbox"]:checked+label {
    right: 20px;
    left: initial;
    bottom: 112px;
    width: 44px;
    height: 44px;
  }


  .effects-stop2 input[type="checkbox"]:checked+label,
  .effects-stop4 input[type="checkbox"]:checked+label {
    left: 15px;
    right: initial;
    bottom: 95px;
    width: 44px;
    height: 44px;
  }

  .bookinfo__recommend {
    gap: 16px;
  }
}

@media (max-width: 820px) {

  .newicon {
    top: -20px;
    left: 15px;
  }

  .button::before {
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    content: "";
    height: 18px;
    left: 10px;
    margin: auto;
    position: absolute;
    top: 5px;
    width: 18px;
  }

  .prev::before {
    background-image: url("/img/prev.svg");
  }

  .next::before {
    background-image: url("/img/next.svg");
  }

  .splide__arrow--next::before {
    top: 2px;
  }

  .splide__arrow {
    width: 44px;
    height: 44px;
  }

  .splide__arrow--next {
    right: 5px;
  }

  .splide__arrow--prev {
    left: 5px;
  }

  .enjoy_image-text {
    right: 0;
    left: 0;
    margin: 0 auto;
  }

  .recommend__img {
    height: auto;
  }
}

@media (max-width: 430px) {
  .enjoy_image {
    height: 110vw;
    width: 110vw;
    margin: 40px -4vw 0 -6vw;
  }

  .newicon {
    top: -20px;
    left: 0;
    width: 40px;
  }

  .section_06-contents>div>div>div>p.inner-text-flont {
    font-size: 20px !important;
  }

  .section_06-contents>div>div>div>p.inner-text-end {
    font-size: 20px !important;
  }

  .recommend__img {
    height: auto;
  }
}


.bookinfo__container{
  margin: 180px auto 120px auto;
  max-width: 880px;
}

/* ナレーター折り返し */
.readmore {
  position: relative;
  margin: 0 0 40px 0;
  padding: 0;
  text-align: left;
}

.readmore label {
  font-weight: 700;
  position: absolute;
  display: table;
  left: 0%;
  bottom: -45px;
  margin: 0 auto;
  padding: 10px 0;
  color: #000;
  text-align: center;
  border-radius: 5px;
  transform: translateX(0%);
  cursor: pointer;
  z-index: 1;
}

.readmore label::before{
  content: "さらに表示"  url(../img/arrow.svg);
}

.readmore input[type="checkbox"]:checked ~ label::before {
  content: "折りたたむ"  url(../img/arrow-top.svg);
}

.readmore input[type="checkbox"]{
  display: none;
}

.readmore-content {
  position: relative;
  height: 55px;
  overflow: hidden;
}

.readmore-content p{
  margin: 0;
}

.readmore input[type="checkbox"]:checked ~ .readmore-content {
  height: auto;
}

@media (max-width: 1024px) {
  .bookinfo__container{
    padding: 20px;
  }

  .bookinfo__recommend-detail {
    width: 25%;
  }
}

@media (max-width: 850px) {
  .bookinfo__container{
    margin: 150px auto 120px auto;
  }

  .bookinfo__title {
    margin: 0 0 30px 0;
  }
}

@media (max-width: 750px) {
  .bookinfo__recommend {
    gap: 10px;
  }

  .bookinfo__recommend-detail {
    width: 48%;
  }

  .recommend__img {
    height: auto;
    aspect-ratio: 196 / 280;  /* PC版の比率を維持 */
    align-items: center;      /* 縦中央 */
    justify-content: center;  /* 横中央 */
  }
}

/* 問い合わせフォームのスタイル */
.contact__wrapper {
  width: 100%;
  max-width: 683px;
  margin: 200px auto 20px auto;
  position: relative;
  min-height: 240px;
  font-size: 16px;
}

.contact__ttl {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 1.3px;
}

.radio-txt {
  display: inline;
}

.agreement-txt a {
  color: #000;
}

.agreement-privacy-link {
  display: block;
  color: #374151;
  text-align: center;
  margin-top: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(100%);
  white-space: nowrap;
  border: 0;
}

.contact__wrapper form {
  margin: 16px auto;
}

.formarea {
  width: 100%;
  border-radius: 4px;
  border: 1px solid #D1D5DC;
  background: #FFF;
  padding: 8px 12px;
  margin: 8px 0 24px 0;
}

.formarea:focus-visible,
fieldset.contact_radio:focus-visible {
  outline: 2px solid #0A0A0A;
  outline-offset: 2px;
}

.contact__wrapper label {
  color: #0A0A0A;
  font-weight: 400;
}

label[for="contact-name"],
label[for="contact-company"],
label[for="contact-email"],
label[for="contact-content"],
fieldset.contact_radio legend {
  font-weight: 500;
}

/* 必須マーカー: DADS（Digital Agency Design System）由来の必須色 #CE0000。
   フォームエラー色 #B91C1C とは概念が別（必須=入力要件、エラー=入力結果）のため意図的に分けている */
.required {
  display: inline-block;
  color: #CE0000;
  background: transparent;
  padding: 0;
  margin-left: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
}

.optional {
  display: inline-block;
  color: #595959;
  background: transparent;
  padding: 0;
  margin-left: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
}

fieldset.contact_radio {
  border: none;
  padding: 0;
  margin: 0 0 24px 0;
}

fieldset.contact_radio legend {
  color: #0A0A0A;
  padding: 0;
  line-height: 1.5;
}

.radio-style {
  color: #0A0A0A;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin: 4px auto;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  cursor: pointer;
  min-height: 24px;
}

/* 視覚サイズ16x16の周囲に4pxのpaddingでクリック領域24x24を確保 */
.radio-wrapper {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 4px;
  box-sizing: border-box;
}

.radio-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.radio-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #6B7280;
  background: white;
  transition: border-color 0.2s;
}

.radio-dot {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0A0A0A;
}

.radio-input:checked + .radio-visual {
  border-color: #0A0A0A;
}

.radio-input:checked + .radio-visual .radio-dot {
  display: block;
}

.radio-input:focus-visible + .radio-visual {
  outline: 2px solid #0A0A0A;
  outline-offset: 2px;
}

.form-subttl {
  color: #0A0A0A;
  font-weight: 700;
}

.form-attention {
  max-width: 100%;
  margin: 0;
  color: #444;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding-left: 20px;
}

.form-attention li {
  margin: 8px 0;
  list-style: disc;
}

.formarea[name="content"] {
  min-height: 210px;
}

.checkbox-label {
  display: inline-flex;
  align-items: flex-start;
  cursor: pointer;
  gap: 8px;
  min-height: 24px;
}

/* 視覚サイズ16x16の周囲に4pxのpaddingでクリック領域24x24を確保 */
.checkbox-wrapper {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 4px;
  box-sizing: border-box;
}

.checkbox-text {
  text-align: left;
}

.checkbox-text a {
  background-image: url("/img/pagelink.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 14px 14px;
  padding-right: 20px;
  margin-right: 4px;
}

.checkbox-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.checkbox-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  border: 1px solid #6B7280;
  background: white;
  transition: background-color 0.2s, border-color 0.2s;
}

.checkbox-check {
  width: 12px;
  height: 12px;
  opacity: 0;
}

.checkbox-input:checked + .checkbox-visual {
  background: #0A0A0A;
  border-color: #0A0A0A;
}

.checkbox-input:checked + .checkbox-visual .checkbox-check {
  opacity: 1;
}

.checkbox-input:focus-visible + .checkbox-visual {
  outline: 2px solid #0A0A0A;
  outline-offset: 2px;
}

.agreement-txt {
  color: #0A0A0A;
  line-height: 24px;
  margin: 24px auto;
  text-align: center;
  display: block;
}

.contact__wrapper button {
  display: flex;
  padding: 12.5px 79px 15.5px 79px;
  justify-content: center;
  align-items: center;
  border-radius: 9999px;
  background: #0A0A0A;
  color: #FFF;
  border: none;
  cursor: pointer;
  margin: auto;
  font-size: 16px;
  transition: background 0.2s;
}

.contact__wrapper button:hover,
.contact__wrapper button.confirm-submit:hover {
  background: #333333;
}

/* バリデーションエラースタイル */
input:user-invalid,textarea:user-invalid {
  border: solid 2px #B91C1C;
  background-color: #FFF;
}

.form-recaptcha, .form-back {
  width: 100%;
  display: inline-block;
  text-align: center;
  margin: 16px auto;
  color: #374151;
}

.form-recaptcha a,.form-back a {
  color: #374151;
}

.form-validation {
  border-radius: 8px;
  border: 2px solid #B91C1C;
  background: #FEF2F2;
  padding: 22px;
  margin-bottom: 40px;
}

.form-validation__ttl {
  margin: 0;
  padding: 0;
  color: #B91C1C;
  font-style: normal;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.form-validation__ttl::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M18.1083 15L11.4416 3.33333C11.2962 3.07684 11.0854 2.86349 10.8307 2.71506C10.576 2.56662 10.2864 2.48842 9.99161 2.48842C9.69678 2.48842 9.40724 2.56662 9.1525 2.71506C8.89777 2.86349 8.68697 3.07684 8.54161 3.33333L1.87494 15C1.72801 15.2545 1.65096 15.5433 1.65162 15.8371C1.65227 16.1309 1.73059 16.4194 1.87865 16.6732C2.0267 16.927 2.23923 17.1372 2.49469 17.2824C2.75014 17.4276 3.03945 17.5026 3.33327 17.5H16.6666C16.959 17.4997 17.2462 17.4225 17.4993 17.2761C17.7525 17.1297 17.9626 16.9192 18.1087 16.6659C18.2548 16.4126 18.3316 16.1253 18.3316 15.8329C18.3315 15.5405 18.2545 15.2532 18.1083 15Z' stroke='%23B91C1C' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 7.5V10.8333' stroke='%23B91C1C' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 14.1667H10.0083' stroke='%23B91C1C' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  margin-right: 5px;
  padding-top: 5px;
}

.form-validation__list {
  margin: 12px 0 0 0;
  padding: 0 0 0 25px;
}

.form-validation__list li {
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.form-validation__list li a {
  color: #B91C1C;
  text-decoration-line: underline;
  text-underline-position: from-font;
}

.error-message {
  color: #B91C1C;
  font-size: 1em;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: -20px 0 24px 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M12.6759 10.5L8.00925 2.33332C7.90749 2.15377 7.75993 2.00443 7.58162 1.90053C7.40331 1.79663 7.20062 1.74188 6.99425 1.74188C6.78787 1.74188 6.58519 1.79663 6.40688 1.90053C6.22856 2.00443 6.081 2.15377 5.97925 2.33332L1.31258 10.5C1.20973 10.6781 1.1558 10.8803 1.15625 11.086C1.15671 11.2916 1.21153 11.4936 1.31517 11.6712C1.41881 11.8489 1.56758 11.996 1.7464 12.0976C1.92522 12.1993 2.12774 12.2518 2.33341 12.25H11.6667C11.8714 12.2498 12.0725 12.1957 12.2497 12.0932C12.4269 11.9908 12.574 11.8435 12.6762 11.6661C12.7785 11.4888 12.8323 11.2877 12.8322 11.083C12.8322 10.8783 12.7783 10.6773 12.6759 10.5Z' stroke='%23B91C1C' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 5.25V7.58333' stroke='%23B91C1C' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 9.91666H7.00583' stroke='%23B91C1C' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 14px 14px;
  padding-left: 20px;
}

.error-margin {
  margin: 0 0 24px 0;
}

.error-check {
  margin: 10px auto 24px auto;
  width: fit-content;
}

.form-back {
  width: 100%;
  display: inline-block;
  text-align: center;
  margin: 0 auto;
  color: #374151;
}

.form-back a {
  color: #374151;
}

.form-back button {
  background: none;
  border: none;
  padding: 0;
  margin: 0 auto;
  display: block;
  color: #374151;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.contact__wrapper .form-back button:hover {
  background: none;
  color: #374151;
}


/* お問い合わせフォーム確認画面スタイル */
.contact__confirm-txt {
  color: #374151;
  font-style: normal;
  font-weight: 400;
}

.contact__confirm-list {
  margin: 32px auto;
  padding-left: 0;
}

.contact__confirm-list li {
  border-bottom: 1px solid #D1D5DC;
  padding: 20px 0;
}

.contact__confirm-list li:last-child {
  border-bottom: none;
}

.confirm-list-ttl {
  color: #4B5563;
  font-style: normal;
  font-weight: 500;
  margin: 0;
}

.confirm-list-contents {
  color: #0A0A0A;
  font-style: normal;
  font-weight: 400;
  margin: 5px 0 0 0;
}

.contact__wrapper form.confirm-form {
  margin: 0 auto;
}

.contact__wrapper button.confirm-submit {
  width: 222px;
  padding: 12.5px 0 15.5px 0;
  border-radius: 30px;
  background: #0A0A0A;
  font-weight: 700;
  cursor: pointer;
}

/* 送信完了画面スタイル */
.contact__finish {
  color: #0A0A0A;
  text-align: center;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
}

.contact__finish-txt {
  color: #374151;
  text-align: center;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.topback {
  display: flex;
  border-radius: 30px;
  padding: 12.5px 0;
  background: #0A0A0A;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: #FFF;
  text-decoration: none;
  margin: 40px auto;
  white-space: nowrap;
  width: 300px;
  transition: background 0.2s;
}

.topback:hover {
  background: #333333;
}

/* お問い合わせフォーム レスポンシブ */
@media (max-width: 750px) {
  .contact__wrapper {
    width: 100%;
    max-width: 683px;
    margin: 150px auto 20px auto;
    position: relative;
    min-height: 240px;
    padding: 20px;
  }

  .form-validation {
    border-radius: 8px;
    border: 2px solid #B91C1C;
    background: #FEF2F2;
    padding: 15px;
    margin-bottom: 40px;
  }

  .form-validation__list {
    margin: 8px 0 0 0;
    padding: 0;
  }

  .form-validation__list li {
    color: #B91C1C;
  }

  .contact__confirm-list {
    padding: 0;
  }

  .contact__finish-txt {
    text-align: center;
  }

  /* モバイル: タッチ操作時の誤操作防止のため、ラベル全体を48px以上のヒットゾーンにする。
     inputを48x48に拡張すると隣接inputと当たり判定が重なるためlabelをクリック領域とする
     （labelクリックで関連inputがトリガされる標準挙動を利用） */
  .checkbox-label,
  .radio-label {
    box-sizing: border-box;
    min-height: 48px;
    padding-block: 12px;
  }
}

/* ウェブアクセシビリティ対応ページ */
.accessibility__wrapper {
  box-sizing: border-box;
  width: 100%;
  max-width: 1024px;
  margin: 200px auto 60px auto;
  padding: 0 20px;
  position: relative;
  color: #0A0A0A;
  font-family: "Noto Sans JP", sans-serif;
  /* 本文・テーブル内テキストは17px（PC/SP共通）。デザイン指定に従う */
  font-size: 17px;
  line-height: 1.8;
}

.accessibility__ttl {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 1.3px;
  line-height: 1.4;
  /* 上マージンはブラウザ既定値（h1の 0.67em）に依存させず、他の下層ページと本文の開始位置を揃える。
     下マージンはセクション間（.accessibility__section の48px）と同じ値にしている */
  margin: 22px 0 48px 0;
}

.accessibility__section {
  margin-bottom: 48px;
}

/* h3の上余白24pxはこのマージンが担う（h3は常に .accessibility__section-inner の先頭） */
.accessibility__section-inner {
  margin-top: 24px;
}

/* 見出しの上余白はセクション側（.accessibility__section の margin-bottom）が担う。
   ブラウザ既定の上マージン（h2は0.83em）が残っていると font-size 次第でセクション側の
   指定を上回ってしまうため、明示的に打ち消す */
.accessibility__hdg {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #D1D5DC;
}

/* 上余白は .accessibility__section-inner の margin-top が担う。
   h3のブラウザ既定の上マージン（1em）は font-size と同値になり、24pxを超えると
   セクション側の指定を上回るため、明示的に打ち消す */
.accessibility__hdg-sub {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 16px;
}

.accessibility__txt {
  margin: 1em 0;
}

/* 見出し直後の本文はマージン相殺で17px空くため、p側の上マージンを打ち消して
   見出し下の余白をデザイン指定の16pxに揃える */
.accessibility__hdg + .accessibility__txt,
.accessibility__hdg-sub + .accessibility__txt {
  margin-top: 0;
}

.accessibility__list {
  margin: 0 0 16px 1.5em;
  padding: 0;
  list-style: disc;
}

.accessibility__list li {
  margin-bottom: 4px;
}

.accessibility__link {
  color: #0A0A0A;
  text-decoration: underline;
  /* 折り返し位置のない長いURLがビューポートを溢れさせないようにする（WCAG 1.4.10 リフロー） */
  overflow-wrap: anywhere;
}

/* 外部サイトへのリンクにはフッター（.footer-access a）と同じアイコンを表示する。
   アイコンは装飾のため、遷移先が新しいウィンドウで開くことは各リンクのaria-labelが伝える */
.accessibility__link[target="_blank"] {
  background-image: url("/img/pagelink.svg");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 20px;
}

.accessibility__link:focus-visible {
  outline: 2px solid #0A0A0A;
  outline-offset: 2px;
}

.accessibility__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 17px;
  line-height: 1.7;
  /* reset.css の :where(table){border:1px solid} は色指定がなくcurrentColor（黒）になり、
     セルの罫線と重なって外周が二重線になるため打ち消す。外周はセルの罫線が描く */
  border: none;
}

/* 配色はデザイン指定に従う */
.accessibility__table th,
.accessibility__table td {
  border: 1px solid #D1D5DC;
  /* セル内余白はPC・SPともに 8px 16px */
  padding: 8px 16px;
  text-align: left;
  vertical-align: top;
  background: #fff;
}

.accessibility__table th {
  background: #e4e4e7;
  font-weight: 500;
}

.accessibility__table tbody th[scope="row"] {
  width: 34%;
}

/* 6列のチェックリストは狭い画面で潰れるため、最小幅を確保して横スクロールさせる。
   860pxは「達成基準」列の最長ラベル（音声解説又はメディアに対する代替コンテンツ（収録済み））が
   2行以内に収まる幅から決めている（本文17px・セル余白 8px 16px でも2行に収まることを確認済み。
   700pxまで狭めると3行になる） */
.accessibility__table--checklist {
  min-width: 860px;
}

.accessibility__table--checklist thead th {
  white-space: nowrap;
}

/* 3〜5列目（適合レベル・適用・結果）は記号と短い英字のみのため中央寄せにする。
   チェックリストの列を増減する場合はこのセレクタの範囲も合わせて修正すること */
.accessibility__table--checklist td:nth-child(n+3):nth-child(-n+5) {
  text-align: center;
}

/* tabindex="0" でキーボードからもスクロールできるようにしている（WCAG 2.1.1） */
.accessibility__table-scroll {
  overflow-x: auto;
  margin-bottom: 16px;
}

.accessibility__table-scroll:focus-visible {
  outline: 2px solid #0A0A0A;
  outline-offset: 2px;
}

@media (max-width: 750px) {
  .accessibility__wrapper {
    /* ヘッダーからはみ出して表示されるロゴを避ける余白。
       .contact__wrapper のSP時（margin-top 150px + padding 20px）と同じ位置に見出しが来るよう揃えている */
    margin: 150px auto 20px auto;
    padding: 20px;
  }

  .accessibility__ttl {
    font-size: 32px;
  }

  .accessibility__hdg {
    font-size: 24px;
  }

  .accessibility__hdg-sub {
    font-size: 20px;
  }

  .accessibility__table tbody th[scope="row"] {
    width: 40%;
  }
}