@charset "UTF-8";
/*!
 * umios-book.css — ウミオス絵本ビューア
 * 座標はすべて book_base.svg（975.136 × 737.84）を基準にした割合で指定している。
 */
body {
  font-family: "Zen Kaku Gothic New", sans-serif;
}

/* ==================================================================
 * ステージ（台紙＋送りボタンを含む外枠）
 * ================================================================== */
.ub-stage {
  --ub-max-width: 1500px;
  --ub-nav-size: clamp(3vw, 10.6%, 4.6vw);
  --ub-nav-gap: 0.2rem;

  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--ub-max-width);
  margin-inline: auto;
  /* 送りボタンを本の外側に置くための余白 */
  padding-inline: calc(var(--ub-nav-size) + var(--ub-nav-gap));
  /*
   * SP は本を transform:scale() で拡大表示するため、見た目の高さと
   * レイアウト上の高さ（後続要素の位置計算に使われる高さ）がズレる。
   * JS（_syncCoverZoom）が実測してこの変数に「はみ出しているぶんの px」を
   * 都度セットし、padding-bottom で確実にスペースを確保する。
   * PC など拡大していないときは自動的に 0px になり、何も変わらない。
   */
  padding-bottom: var(--ub-cover-overflow-y, 0px);
  -webkit-tap-highlight-color: transparent;
}

.ub-stage *,
.ub-stage *::before,
.ub-stage *::after { box-sizing: border-box; }

/* ==================================================================
 * 本体（StPageFlip のマウント先 = .stf__parent）
 *
 * 縦横比は StPageFlip の autoSize が .stf__wrapper の padding-bottom で
 * 作る（landscape なら height/(2*width) = 台紙と同じ 75.665%）。
 * ここで aspect-ratio を重ねると二重管理になって初期表示が崩れるので付けない。
 * 結果としてこの要素の矩形＝台紙の矩形になるため、背景に台紙をそのまま敷ける。
 * ================================================================== */
.ub-book {
  position: relative;
  margin-inline: auto;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  touch-action: pan-y;
}

/*
 * ここが受け持つのは「本の落とし影」。
 *
 * 台紙そのものは各ページ（.ub-page--left/right の ::before）が持っている。
 * めくりの回転に台紙を乗せるにはページ要素の中に無ければならないため
 * （2026-08 変更。詳しくは下の「台紙はページ要素の中に敷く」の項）。
 * ここの background-image は見開き時に裏で完全に隠れる保険でしかない
 * ── 左右のページが本の幅をちょうど埋めるので、実際に見えることはない。
 *
 * .ub-book 自身の background ではなく ::before に持たせているのは、
 * 影と台紙を .ub-book 本体の transform（表紙のときの中央寄せ）とは別に
 * opacity で出し入れするため。.ub-book に直接持たせると、影を消すのに
 * box-shadow: none との切り替えになり transition が効かない。
 *
 * 重ね順の注意：::before は z-index を指定しない（auto のまま）。
 * StPageFlip がページ要素へ都度 z-index:1 を書き込むため、::before に
 * 何か正の z-index を付けるとページより手前に出て台紙がページを覆ってしまう。
 * auto のままなら「z-index:0/auto の要素」グループとして
 * 「正の z-index を持つ要素」グループより先に描画される＝常にページの後ろになる。
 */
.ub-book::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--ub-base-spread);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  /* 表紙（.ub-page--cover）と同じ落とし影。本が開いているときだけ出す */
  box-shadow: 0 0 1.9900497512vw 0 rgba(0, 0, 0, 0.12);
  opacity: 1;
  transition: opacity .5s ease;
  clip-path: inset(0 0 0 0); /* 既定は全体表示。下の「開くアニメーション中」ルールでだけ片側を隠す */
}

/* 単ページ表示（狭い画面）では台紙も左右どちらかに差し替える */
.ub-stage.is-single-left  .ub-book::before { background-image: var(--ub-base-left); }
.ub-stage.is-single-right .ub-book::before { background-image: var(--ub-base-right); }

/*
 * 表紙／裏表紙だけを見ているとき（めくっていない間）は影を消す。
 * 表紙は自前の影（.ub-page--cover の box-shadow）を持っているので、
 * ここも出すと二重になる。
 *
 * is-closing は「これから閉じて表紙だけになる」状態。markClosing() が
 * 閉じるアニメーションの開始前（is-flipping より先）に付ける。
 *
 * is-cover-front/is-cover-back/is-closing のすべてに :not(.is-flipping) を
 * 付けている。理由：これらのクラスはめくりの間ずっと付いたままで、
 * is-cover-front に至っては着地後（_sync）でしか外れない。:not(.is-flipping)
 * が無いと、めくっている最中もこのルールが勝ち続けて影が消えたままになる。
 * めくっている間は下の is-flipping 系ルールへ主導権を渡す。
 */
.ub-stage.is-cover-front:not(.is-flipping) .ub-book::before,
.ub-stage.is-cover-back:not(.is-flipping)  .ub-book::before,
.ub-stage.is-closing:not(.is-flipping)     .ub-book::before {
  opacity: 0;
  transition: none;
}

/*
 * めくっている間（is-flipping）の落とし影の出し方。
 *
 * 開く／閉じるとも、動いているのは表紙（.ub-page--cover）1枚で、それが
 * 見開きの右半分の位置でその場回転している。このとき本の左半分には
 * まだ（もう）何も無いので、影を本の矩形いっぱいに出すと「中身が無いのに
 * 影だけある」状態になる。実際に紙がある側＝右半分だけを clip-path で残す。
 *
 * 台紙が .ub-book::before にあった頃は、ここで opacity を遅延フェードさせて
 * いた（delay 55% → 40%かけて表示）。台紙がめくりの回転に乗らず、着地間際に
 * ふわっと現れるのを少しでも自然に見せるための細工だったが、台紙をページ側へ
 * 移した今は不要（2026-08）。台紙はページと一緒に回って着地するので、影は
 * めくり始めから出しておくのが正しい ── 右ページ（と その台紙）は表紙が
 * 回り始めた瞬間から存在しているため。
 *
 * clip-path 自体は transition させない（クリップ境界がゆっくり動いて
 * 「拭き取る」ような余計な動きに見えるのを避けるため）。着地して is-flipping が
 * 外れると上のルールへ主導権が戻り、見開きなら全体表示、表紙だけなら即座に
 * opacity:0 になる。どちらの瞬間も表紙か左ページが同じ場所を埋めるので
 * カットは見えない。
 *
 * is-cover-back（裏表紙。見開きの左半分に描かれる）は鏡像で右半分を隠す。
 * このプロジェクトでは backCover オプションを使っていないため実機未検証
 * （有効化する際は見た目を確認すること）。
 */
.ub-stage.is-cover-front.is-flipping .ub-book::before,
.ub-stage.is-cover-back.is-flipping  .ub-book::before,
.ub-stage.is-closing.is-flipping     .ub-book::before {
  opacity: 1;
  transition: none;
}
.ub-stage.is-cover-front.is-flipping .ub-book::before,
.ub-stage.is-closing.is-flipping     .ub-book::before {
  clip-path: inset(0 0 0 50%);
}
.ub-stage.is-cover-back.is-flipping .ub-book::before {
  clip-path: inset(0 50% 0 0);
}

/*
 * 見開き表示では表紙が左右どちらかの半分に描かれるので、中央へ寄せる。
 * 単ページ表示ではもともと中央なので寄せない。
 *
 * --ub-cover-scale は「表紙だけのときの拡大率」。既定は 1（＝拡大しない）。
 * 表紙は本の右半分に描かれるため、拡大率に合わせて寄せ量も同じ倍率にしないと中央に来ない。
 *
 * :not(.is-flipping) が肝心。is-cover-front は着地後（_sync）でしか外れないため、
 * これが無いと開くアニメーション中もずっとこの寄せが勝ち続けてしまう
 * （.is-center-cover.is-cover-front の詳細度がクラス4つぶんあり、
 * 下の .is-flipping だけの詳細度3つぶんより高いため、is-flipping を足しただけでは
 * 何も解除できない）。ここで抜けておくことで、めくり始めた瞬間（is-flipping が
 * 同期的に付く瞬間）に本の横移動が「本が開くアニメーション」と同時に始まる。
 */
.ub-stage.is-center-cover.is-cover-front:not(.is-portrait):not(.is-flipping) .ub-book {
  transform: translateX(calc(-25% * var(--ub-cover-scale, 1))) scale(var(--ub-cover-scale, 1));
}
.ub-stage.is-center-cover.is-cover-back:not(.is-portrait):not(.is-flipping) .ub-book {
  transform: translateX(calc(25% * var(--ub-cover-scale, 1))) scale(var(--ub-cover-scale, 1));
}

/*
 * めくり始めたら寄せを解除して、本が開きながら中央へ収まる動きにする。
 * 上の2つが :not(.is-flipping) で抜けた後の受け皿（実際は transform の初期値が
 * none なのでこのルール自体は無くても同じ結果になるが、意図を明示するため残す）。
 */
.ub-stage.is-flipping .ub-book { transform: none; }

/* ==================================================================
 * ページ（StPageFlip が幅・高さ・transform を直接書き込む要素）
 * ================================================================== */
.ub-page {
  position: relative;
  overflow: hidden;
  background: transparent;
}

/*
 * 台紙（book_base_left.png）を1枚目のページ要素の中に敷く。
 *
 * ここが肝心：StPageFlip が rotateY を書き込むのは .ub-page なので、
 * 台紙をこの要素の中に入れておけば、めくりの回転にそのまま乗る。
 * .ub-book::before（本全体を覆う1枚）に持たせていた頃は、台紙だけ回転から
 * 取り残されるためフェードで出すしかなく、「表紙が開ききる直前に左の台紙が
 * ふわっと現れる」という見え方になっていた（2026-08 修正）。
 *
 * 表紙をめくる間、StPageFlip は表紙と1枚目を「同じ紙の表と裏」として
 * 同時に回している（両方 backface-visibility:hidden で、90°を境に入れ替わる）:
 *   .ub-page--cover  transform-origin: 0 0;      rotateY(θ)
 *   .ub-page--left   transform-origin: <ノド> 0; rotateY(θ-180)   ← 1枚目
 * つまり回転の器は元からあり、台紙をその中に入れるだけで一緒に回る。
 *
 * ⚠️ 台紙を持たせるのは1枚目だけ（.ub-page--cover-sheet ＝ 表紙と同じ紙の裏面。
 * クラスは JS が pages[1] に付ける）。
 * 表紙を開く瞬間だけは「本がまだ無い状態」から始まるので台紙が一緒に回らないと
 * 不自然だが、2枚目以降は本が開いた状態でのめくりなので、台紙は動かない土台
 * （.ub-book::before）として置いたままのほうが正しい。全ページに持たせると
 * 中ページをめくるたび台紙まで一緒に持ち上がり、紙が分厚く見えてしまう。
 *
 * 2枚目以降の台紙は従来どおり .ub-book::before（見開き1枚）が受け持つ。
 * 表紙を開いている最中の右ページ（2枚目）もそちらから出る
 * ── ::before はめくり始めから opacity:1 で、右半分だけ clip して見せている。
 *
 * --ub-base-left は JS が .ub-stage に入れる絶対URL。継承でここまで降りてくる。
 *
 * 表紙（.ub-page--cover）自体は対象外。表紙は台紙の上に載る紙ではなく本の外側なので、
 * 自前の画像（cover.svg）とベタ塗りで完結している。
 */
.ub-page--cover-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--ub-base-left);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/*
 * ページ画像の置き場所。--ub-sheet-x は JS が左右で出し分ける。
 * z-index は1枚目の台紙（.ub-page--cover-sheet::before の 0）より
 * 手前に置くために必要。
 */
.ub-sheet {
  position: absolute;
  z-index: 1;
  left: var(--ub-sheet-x, 0%);
  top: var(--ub-sheet-top, 0%);
  width: var(--ub-sheet-w, 100%);
  height: var(--ub-sheet-h, 100%);
}

.ub-sheet__img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ==================================================================
 * 表紙・裏表紙（ハードカバー）
 * 位置とサイズは JS が GEO（素材の実測値）から変数で渡す。
 * ノド側の辺を綴じ位置に合わせ、小口側はハードカバーぶん少しはみ出す。
 * ================================================================== */
.ub-cover {
  position: absolute;
  top: var(--ub-cover-top, 0%);
  width: var(--ub-cover-w, 100%);
  height: var(--ub-cover-h, 100%);
}
.ub-cover--front { left: 0; }
.ub-cover--back  { right: 0; }

.ub-cover__img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 裏表紙は素材が無いため、表紙と同じ配色のベタで描く（綴じ側が濃い） */
.ub-cover--back {
  border-radius: calc(17.303 / 497.52 * 100%) / calc(17.303 / 695.5 * 100%);
  background: linear-gradient(to left, #78beff 1%, #a0dbff 9.2%);
}

/* ==================================================================
 * 送りボタン
 * ================================================================== */
.ub-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: var(--ub-nav-size);
  height: var(--ub-nav-size);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  appearance: none;
  transition: opacity .2s, scale .15s;
  z-index: 5;
}
.ub-nav--prev { left: 50px; }
.ub-nav--next { right: 50px; }

/*
 * 表紙だけのときは、送りボタンを表紙のすぐ右脇へ。
 *
 * 表紙は本の右半分（中心から本の幅の 1/4 ぶん右まで）に描かれ、
 * 拡大時はその距離も同じ倍率で伸びる。--ub-book-w は JS が実寸を入れる。
 * ステージの 50% ＝ 本の中心（本は margin-inline:auto で中央にあるため）。
 */
.ub-stage.is-cover-front .ub-nav--next {
  right: auto;
  left: calc(46% + var(--ub-book-w, 0px) * var(--ub-cover-edge, 0.26) * var(--ub-cover-scale, 1) + var(--ub-nav-gap));
}

/*
 * 表紙⇔見開き の間、送りボタンは left/right を直接動かしている。
 * left/right は auto と数値の間を行き来する（見開き側は right:50px／left:auto、
 * 表紙側は right:auto／left:calc(...)）ため transition が効かず、必ず一瞬でジャンプする。
 * かつ is-cover-front は着地後（_sync）でしか外れないため、
 * 開くアニメーション中はボタンだけ先に見開き位置へ「カット」して見えていた。
 *
 * 位置を合わせて動かす代わりに、めくっている間（is-flipping）はいったん透明にし、
 * 見えないうちに位置を切り替え、着地して is-flipping が外れたら既存の
 * `transition: opacity .2s` でフェイドインする（ユーザー確認済みの代替案）。
 * is-cover-front と is-flipping は開くアニメーションの間ずっと両方付いたままなので
 * （_sync が両方いっぺんに切り替えるまで）、フェイドアウト→着地→フェイドインが
 * 自然に成立する。
 */
.ub-stage.is-cover-front.is-flipping .ub-nav--next {
  opacity: 0;
}

.ub-nav__img { display: block; width: 100%; height: 100%; pointer-events: none; }

@media (hover: hover) {
  .ub-nav:hover:not(:disabled) { scale: 1.08; }
}
.ub-nav:active:not(:disabled) { scale: .94; }
.ub-nav:disabled { opacity: 0; cursor: default; }
.ub-nav:focus-visible { outline: 3px solid #0042bc; outline-offset: 3px; border-radius: 50%; }

/* 画面が狭いときは送りボタンを本に少し重ねて、本を大きく見せる（SP と同じ 750px で切替） */
@media (max-width: 749.98px) {
  .ub-stage {
    --ub-nav-size: clamp(30px, 11vw, 48px);
    padding-inline: calc(var(--ub-nav-size) * .45);
  }
  .ub-nav {
    top: 38%;
  }
  .ub-nav--prev { left: 5vw; }
  .ub-nav--next { right: 5vw; }
}

/* ==================================================================
 * StPageFlip 側の調整
 * ================================================================== */
.ub-book .stf__item { background: transparent; }

/*
 * 通常ページの影だけ残して表紙の影を消したい場合は、
 * mount() に drawShadow: true を渡したうえで下記2行を有効にする。
 */
/*
.ub-book .stf__hardShadow,
.ub-book .stf__hardInnerShadow { opacity: 0 !important; }
*/

.ub-book .stf__outerShadow,
.ub-book .stf__innerShadow,
.ub-book .stf__hardShadow,
.ub-book .stf__hardInnerShadow { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .ub-book { transition: none; }
}

/* ==================================================================
 * 目次
 * ================================================================== */
 body {
  margin: 0;
  min-height: 100vh;
}
#_gallery {
  background: #0042BC;
  position: relative;
  z-index: 2;
}
.demo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10vh 4.1349206349vw;
  touch-action: manipulation;
  border-radius: 50px;
  min-height: 667px;

}
.demo-inner {
  border-radius: 2.1164021164vw;
  color: #0042BC;
  width: 100%;
  height: 75.5%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease;
  z-index: 1;
}
@media (min-width: 750px) {
   .demo-inner {
    flex-direction: row-reverse;
  }
}
.nav-wrap {
  width: min(1500px, 25%);
  max-height: 70vh;
  z-index: 11;
}

@media (min-width: 750px) and (max-height: 1000px) {
  .nav-wrap {
    max-height: none;
  }
}

.nav-wrap > .umios-prof-image { 
  width: 100%;
  max-height: 70vh;
}
.page-flip-wrap {
  position: relative;
  width: min(1500px, 75%);
  z-index: 10;
}

/*
 * 表紙だけのとき（JS が .page-flip-wrap へ is-cover を付ける）は、
 * nav-wrap を見た目上どかして本を .demo-inner 全体の中央に寄せる。
 *
 * position:absolute にはしない（→ position が static/absolute の間で切り替わり、
 * left/top を transition しても瞬間ジャンプになってしまうため）。代わりに
 * nav-wrap を position:relative のまま width:0（＋ min-width:0）にして
 * flex の幅計算から実質除外し、left:7vw の相対オフセットだけで見た目の位置を作る。
 * min-width:0 が無いと、flex item は既定で min-width:auto（＝中身の最小幅）を
 * 下回れないため、width:0 を指定しても「紹介を見る」ボタンぶんの幅を
 * 持ち続けてしまい、下の page-flip-wrap の中央寄せが崩れる。
 *
 * page-flip-wrap 自体の幅は 100% にせず、常に 75% のまま変えない。
 * ここを 100% にすると（nav-wrap を消した分の空きを page-flip-wrap 自身が
 * 埋める形になり）本の実描画サイズが見開き時より大きくなってしまい、
 * 表紙⇄見開きの切り替えで #umios-profile の高さがガクッと変わる原因になる
 * （StPageFlip の autoSize は「見開き基準の縦横比」を常に保つため、横幅が
 * 変われば縦幅も一緒に変わる）。75% のまま・nav-wrap を幅ゼロ化するだけで
 * justify-content:center が page-flip-wrap 単体を中央に寄せてくれるので、
 * 本の実サイズを変えずに中央寄せだけを達成できる。
 *
 * 752px 未満は元々 flex-direction:column の縦積みで左右の概念が無いので対象外。
 * 一般兄弟結合子（~）は表示順（row-reverse で見た目は逆）ではなく
 * DOM順で見るので、page-flip-wrap → nav-wrap の順に書いてある。
 */
@media (min-width: 750px) {
  .page-flip-wrap.is-cover ~ .nav-wrap {
    position: relative;
    top: 0;
    width: 0;
    min-width: 0;
    transition: all 0.4s;
  }
  .page-flip-wrap.is-cover ~ .nav-wrap .button-introduction {
    right: max(0px, calc(14.1534391534vw - 362px));
  }
}

.demo-wrap .btn-scroll {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  width: 4.6296296296vw;
  cursor: pointer;
  touch-action: manipulation;
  z-index: 10;
}
.btn-scroll:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url("../img/gallery/btn-scroll-w-arr.svg") center no-repeat;
  background-size: 100% 100%;
}
.btn-scroll img {
  opacity: 1;
  transform: none;
  width: 100%;
}

.sp-index {
  display: none;
  width: auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.prof-nav-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  margin: 0.5vw 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.sp-index.is-book-open .prof-nav-button {
  opacity: 1;
}
.sp-index.is-book-open .prof-nav-button:nth-child(1) {
  transition-delay: 0.1s;
}
.sp-index.is-book-open .prof-nav-button:nth-child(2) {
  transition-delay: 0.2s;
}
.sp-index.is-book-open .prof-nav-button:nth-child(3) {
  transition-delay: 0.3s;
}
.sp-index.is-book-open .prof-nav-button:nth-child(4) {
  transition-delay: 0.4s;
}
.sp-index.is-book-open .prof-nav-button:nth-child(5) {
  transition-delay: 0.5s;
}

.prof-nav-button img {
  width: 100%;
  min-height: 42px;
}
@media (max-width: 750px) {
  .prof-nav-button {
    width:calc(100%/3);
    margin: 0;
    padding: 1vw;
  }
}
.button-introduction {
  position: relative;
  top: auto;
  cursor: pointer;
  z-index: 210;
  pointer-events: auto;

}

.button-introduction span {
  width: 14.1534391534vw;
  height: 3.835978836vw;
  border: 2px solid #0042BC;
  border-radius: 661.3756613757vw;
  color: #0042BC;
  font-size: 1.5873015873vw;
  letter-spacing: 0.02em;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.1322751323vw;
  text-decoration: none;
  letter-spacing: 0;
  background-color: #fff;
  user-select: none;
}
@media (min-width: 750px) {
  .button-introduction span {
    transition: color 0.3s ease, background-color 0.3s ease;
  }
}
@media (max-width: 749.8px) {

  .button-introduction span {
    font-size: 5.9701492537vw;
    width: 53.2338308458vw;
    height: 14.4278606965vw;
    border-radius: 113070.8955223881vw;
    padding-bottom: 0.4975124378vw;
  }
}
.button-introduction span i {
  width: 2.1164021164vw;
  height: 2.1825396825vw;
  border-radius: 100%;
  position: relative;
  background-color: #0042BC;
  margin-left: 0.9920634921vw;
  transform: translateY(0.0661375661vw);
}
@media (min-width: 750px) {
  .button-introduction span i {
    transition: background-color 0.3s ease;
  }
}
@media (max-width: 749.8px) {
  .button-introduction span i {
    width: 7.960199005vw;
    height: 8.2089552239vw;
    margin-left: 3.4825870647vw;
    transform: translateY(0.2487562189vw);
  }
}
.button-introduction span i:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border: solid #fff;
  border-width: 0 0.1984126984vw 0.1984126984vw 0;
  display: inline-block;
  padding: 0.2645502646vw;
  transform: translate(-75%, -50%) rotate(-45deg);
}
@media (min-width: 750px) {
  .button-introduction span i:before {
    transition: border-color 0.3s ease;
  }
}
@media (max-width: 749.8px) {
  .button-introduction span i:before {
    border-width: 0 0.7462686567vw 0.7462686567vw 0;
    padding: 0.9950248756vw;
  }
}
@media (min-width: 750px) and (hover: hover) {
  .button-introduction span:hover {
    background: #0042BC;
    color: #fff;
    border: 2px solid #fff;
  }
  .button-introduction span:hover i {
    background: #fff;
  }
  .button-introduction span:hover i:before {
    border-color: #0042BC;
  }
}


@media (min-width: 750px) {
  .sp-index {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-end;
  }
}

@media (max-width: 749.98px) {
  .demo-wrap {
    padding: 10vh 2.1349206349vw;
  }
  .demo-inner {
    flex-direction: column;
  }
  .page-flip-wrap {
    margin-top: 22vw;
    width: min(1500px, 100%);
  }

  .nav-wrap {
    display: flex;
    pointer-events: auto;
    width: min(560px, 100%);
    padding: 0 9%;
    margin-top: 8vw;
    flex-direction: column;

  }
  .nav-wrap > .umios-prof-image {
    margin: 0  auto;
    width: 50%;
  }
  .sp-index {
    display: flex;
    justify-content: center;
  }
  .nav-wrap .button-introduction {
     position: absolute;
     top: auto;
     right: 50%;
     margin: 0.6rem auto 0;
     transform: translateX(50%);
    }
}

@media (max-height: 1300px) {
  .demo-inner {
    height: 90%;
  }
}

/* ==================================================================
 * 表紙だけ／見開き の出し分け
 *
 * JS が外側の要素へ is-book-cover / is-book-open を付ける
 * （「紹介を見る」＝ is-book-cover のときだけ表示、目次 ＝ is-book-open のときだけ表示）。
 * 位置やサイズはレイアウト側で調整してよい。
 * ================================================================== */

/*
 * display:none/flex の瞬時切り替えだと transition が効かずカットで出入りする
 * ため、opacity + visibility（delay 付き）でクロスフェードさせる。
 * visibility:hidden は display:none と違って要素の場所（レイアウト上の高さ）を
 * 残したままにしてしまうので、PC（下の @media 750px〜）では .nav-wrap を
 * display:grid にして両方を同じマスへ重ね描き（grid-area:1/1）し、
 * 「隠れている方の高さぶん、もう片方が押し下げられる」ことが起きないようにしている。
 */
.button-introduction,
.sp-index {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s linear 0s;
}
.button-introduction.is-book-open,
.sp-index.is-book-cover {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}

@media (min-width: 750px) {
  .nav-wrap {
    display: grid;
    align-items: center;
  }
  .nav-wrap > .button-introduction,
  .nav-wrap > .sp-index {
    grid-area: 1 / 1;
  }
}


/*
 * SP は「本の右ページだけを拡大して見せる」。
 * 表紙も見開きも同じ位置・同じ倍率なので、めくっても本の大きさは動かない。
 *
 * 表紙は本の右半分に描かれているので、右半分を画面中央へ持ってくる寄せ量は
 * 拡大率と同じ倍率にする（translateX(-25% × 倍率)）。
 * 大きさを変えたいときは --ub-cover-scale だけでよい。
 */
@media (max-width: 749.98px) {
  .ub-stage { --ub-cover-scale: 1.75; }

  .ub-stage .ub-book,
  .ub-stage.is-flipping .ub-book {
    transform: translateX(calc(-25% * var(--ub-cover-scale, 1))) scale(var(--ub-cover-scale, 1));
  }
}

.ub-page--cover {
   box-shadow: 0 0 1.9900497512vw 0 rgba(0, 0, 0, 0.12);
}