@charset "UTF-8";


/* 全体のサイズ計算を整える */
* {
    /* 幅や高さにpaddingとborderを含めて計算する */
    box-sizing: border-box;
}

/* ページ全体の高さ設定 */
html {
    /* ページの最低高さを画面いっぱいにする */
    min-height: 100%;
}

/* ページ全体の基本設定 */
body {
    /* ブラウザ標準の余白をなくす */
    margin: 0;

    /* ページ全体の基本文字色を指定する */
    color: #070707;
}

/* ホーム画面全体 */
.home-body {
    /* 横幅が必要以上に広がるのを防ぐ */
    min-width: 0;

    /* 最低でも画面の高さ分を表示する */
    min-height: 100vh;

    /* 背景色を白にする */
    background-color: #ffffff;

    /* 背景にピンクの丸模様を作る */
    background-image:
        radial-gradient(circle, rgba(243, 154, 193, 0.84) 0 24px, transparent 25px),
        radial-gradient(circle, rgba(243, 154, 193, 0.84) 0 24px, transparent 25px);

    /* 2つの丸模様の位置をずらす */
    background-position: -12px -12px, 52px 52px;

    /* 丸模様を128px間隔で繰り返す */
    background-size: 128px 128px, 128px 128px;

    /* 背景をスクロールしても固定する */
    background-attachment: fixed;

    /* 横スクロールを出さない */
    overflow-x: hidden;
}

/* ホーム画面のリセットボタン */
.home-reset-button {
    /* 画面上に固定表示する */
    position: fixed;

    /* 画面上からの位置 */
    top: 18px;

    /* 画面左からの位置 */
    left: 18px;

    /* 右側の位置指定は使わない */
    right: auto;

    /* 他の要素より前に表示する */
    z-index: 50;

    /* ボタンの最小横幅 */
    min-width: 112px;

    /* ボタンの最小高さ */
    min-height: 44px;

    /* ボタン内側の余白 */
    padding: 8px 18px;

    /* 文字色 */
    color: #333333;

    /* 少し透ける白背景 */
    background: rgba(255, 255, 255, 0.92);

    /* 薄いグレーの枠線 */
    border: 3px solid #d0d0d0;

    /* 角を丸くする */
    border-radius: 8px;

    /* 立体感のある影を付ける */
    box-shadow: 4px 4px 0 rgba(176, 176, 176, 0.45);

    /* 親要素のフォントを引き継ぐ */
    font: inherit;

    /* 文字サイズ */
    font-size: 16px;

    /* 文字を太くする */
    font-weight: 900;

    /* クリックできることを分かりやすくする */
    cursor: pointer;
}

/* リセットボタンにマウスを乗せた時 */
.home-reset-button:hover {
    /* 背景を薄いピンクにする */
    background: #fff3fb;
}

/* リセット状態のリセットボタン */
.home-reset-button.is-reset {
    /* 文字色を白にする */
    color: #ffffff;

    /* 背景色をピンクにする */
    background: #ee9ec6;

    /* 枠線もピンクにする */
    border-color: #ee9ec6;
}

/* ホーム画面の3列レイアウト */
.home-page {
    /* 子要素の位置調整の基準にする */
    position: relative;

    /* グリッドレイアウトを使う */
    display: grid;

    /* 左・中央・右の3列に分ける */
    grid-template-columns: minmax(300px, 1fr) 720px minmax(300px, 1fr);

    /* 横幅を画面いっぱいにする */
    width: 100%;

    /* ページの最低高さを2048pxにする */
    min-height: 2048px;
}

/* 左右サイド共通 */
.home-side {
    /* 中の要素の位置調整の基準にする */
    position: relative;

    /* 最低でも画面の高さ分を確保する */
    min-height: 100vh;
}

/* 左側エリア */
.home-left {
    /* グリッドで中身を配置する */
    display: grid;

    /* 中身を上寄せにする */
    align-items: start;

    /* 中身を横方向の中央に置く */
    justify-items: center;

    /* 上に余白を作る */
    padding-top: 365px;
}

/* ロゴ全体 */
.home-logo {
    /* ロゴ内の位置調整の基準にする */
    position: relative;

    /* ブロック要素として表示する */
    display: block;

    /* ロゴの基本幅を390pxにする */
    width: 390px;

    /* 画面が狭いときは親要素の86%以内におさえる */
    max-width: 86%;
}

/* ロゴ画像 */
.home-logo-image {
    /* 画像下の余白をなくす */
    display: block;

    /* 親要素の幅いっぱいに表示する */
    width: 100%;

    /* 縦横比を保ったまま高さを自動調整する */
    height: auto;
}

/* ホーム画面の中央エリア */
.home-center {
    /* 中の要素や疑似要素の位置調整の基準にする */
    position: relative;

    /* 左右のサイドより前面に表示する */
    z-index: 2;

    /* 中央エリアをグリッドで配置する */
    display: grid;

    /* 上・中央・下の3段に分ける */
    grid-template-rows: auto 1fr auto;

    /* 中の要素を横方向の中央に置く */
    justify-items: center;

    /* 中央エリアの最低高さを2048pxにする */
    min-height: 2048px;

    /* 上・左右・下に余白を作る */
    padding: 58px 28px 28px;

    /* 背景色は疑似要素で作るため透明にする */
    background-color: transparent;

    /* はみ出した装飾も見えるようにする */
    overflow: visible;
}

/* 中央エリアのピンク背景 */
.home-center::before {
    /* 疑似要素を表示するための空文字 */
    content: "";

    /* 中央エリアに重ねて配置する */
    position: absolute;

    /* 親要素いっぱいに広げる */
    inset: 0;

    /* 中身より後ろに配置する */
    z-index: 0;

    /* 中央の背景色をピンクにする */
    background-color: #ffe1f7;

    /* 背景を少し右にずらす */
    transform: translateX(24px);

    /* 背景がクリック操作を邪魔しないようにする */
    pointer-events: none;
}

/* 中央エリア内の直接の子要素 */
.home-center>* {
    /* 背景より前面に出すための基準にする */
    position: relative;

    /* ピンク背景より前に表示する */
    z-index: 1;

    /* 中身を背景に合わせて少し右へずらす */
    transform: translateX(24px);
}

/* 上部の白いピン */
.home-pin {
    /* ピンの幅を指定する */
    width: 36px;
    /* ピンの高さを指定する */
    height: 36px;
    /* 下に余白を作る */
    margin-bottom: 62px;
    /* ピンの色を白にする */
    background-color: #ffffff;
    /* 丸い形にする */
    border-radius: 50%;
    /* 右下に影を付ける */
    box-shadow: 4px 4px 0 #cfd0d0;
}

/* 中央のカード全体 */
.home-card {
    /* 中の装飾の位置調整の基準にする */
    position: relative;
    /* 背景より前に表示する */
    z-index: 1;
    /* カードの幅を指定する */
    width: 664px;
    /* カードの最低高さを指定する */
    min-height: 1760px;
    /* カード内側の余白を作る */
    padding: 45px 56px 58px;
    /* カードの背景色を薄い黄色にする */
    background-color: #fffdf3;
    /* カードの角を少し丸くする */
    border-radius: 11px;
    /* カードからはみ出た部分を隠す */
    overflow: hidden;
}

/* 診断結果シールの表示エリア */
.home-image {
    /* 表示エリアの幅を指定する */
    width: 330px;
    /* 表示エリアの高さを指定する */
    height: 248px;
    /* 中央に置き、下に余白を作る */
    margin: 0 auto 64px;
    /* 背景色を白にする */
    background-color: #ffffff;
    /* 灰色の枠線を付ける */
    border: 5px solid #d7d8da;
    /* 角を丸くする */
    border-radius: 18px;
}


/* ホーム画面の画像エリア内の画像 */
.home-image img {
    /* 画像下の余白をなくし、扱いやすくする */
    display: block;

    /* 画像の横幅を親要素いっぱいにする */
    width: 100%;

    /* 画像の高さを親要素いっぱいにする */
    height: 100%;

    /* 画像の比率を保ったまま、枠内に全体を収める */
    object-fit: contain;
}


/* 診断開始ボタン */
.home-start-button {
    /* リンクをブロック要素として表示する */
    display: block;
    /* ボタンの幅を指定する */
    width: 458px;
    /* 中央に置き、下に余白を作る */
    margin: 0 auto 64px;
    /* ボタン内側の余白を作る */
    padding: 23px 30px;
    /* 文字を中央に揃える */
    text-align: center;
    /* リンクの下線を消す */
    text-decoration: none;
    /* 文字色を黒にする */
    color: #000000;
    /* 背景色を白にする */
    background-color: #ffffff;
    /* 灰色の枠線を付ける */
    border: 4px solid #d7d8da;
    /* 角を丸くする */
    border-radius: 15px;
    /* 文字サイズを指定する */
    font-size: 28px;
    /* 文字を太くする */
    font-weight: 900;
    /* 行の高さを指定する */
    line-height: 1.2;
}

/* 診断開始ボタンにカーソルを乗せたとき */
.home-start-button:hover {
    /* 背景色を薄いピンクに変える */
    background-color: #fff3fb;
}

/* サイト説明文のエリア */
.home-message {
    /* 説明エリアの幅を指定する */
    width: 552px;
    /* 中央に置き、下に少し余白を作る */
    margin: 0 auto 8px;
    /* 説明エリア内側の余白を作る */
    padding: 37px 48px 29px;
    /* 背景色を白にする */
    background-color: #ffffff;
    /* 薄い灰色の枠線を付ける */
    border: 2px solid #d7d8da;
    /* 角を少し丸くする */
    border-radius: 8px;
}

/* サイト説明文の見出し */
.home-message h1 {
    /* 見出しの余白を調整する */
    margin: 0 0 18px;
    /* 見出し下に余白を作る */
    padding-bottom: 16px;
    /* 見出し下に線を引く */
    border-bottom: 2px solid #333333;
    /* 文字を中央に揃える */
    text-align: center;
    /* 文字サイズを指定する */
    font-size: 34px;
    /* 文字を太くする */
    font-weight: 900;
    /* 行の高さを指定する */
    line-height: 1.2;
}

/* サイト説明文の本文 */
.home-message p {
    /* 段落の余白をなくす */
    margin: 0;
    /* 文字サイズを指定する */
    font-size: 17px;
    /* 文字を太めにする */
    font-weight: 700;
    /* 読みやすい行間にする */
    line-height: 1.72;
}

/* シール帳の見本エリア */
.memory-book {
    /* 中の装飾の位置調整の基準にする */
    position: relative;
    /* 見本エリアの幅を指定する */
    width: 590px;
    /* 見本エリアの最低高さを指定する */
    min-height: 762px;
    /* 中央に置き、上に余白を作る */
    margin: 18px auto 0;
    /* 見本エリア内側の余白を作る */
    padding: 58px 54px 50px;
    /* 背景色を白にする */
    background-color: #ffffff;
    /* 太い灰色の枠線を付ける */
    border: 8px solid #d9d9d9;
    /* 右下に影を付ける */
    box-shadow: 9px 9px 0 #bfbfbf;
    /* 少し右にずらして傾ける */
    transform: translateX(18px) rotate(5deg);
    /* 回転の基準を上中央にする */
    transform-origin: center top;
}

/* シール帳見本の内側の枠線 */
.memory-book::before,
.memory-book::after {
    /* 疑似要素を表示するための空文字 */
    content: "";
    /* 見本エリアに重ねて配置する */
    position: absolute;
    /* 外側から17px内側に配置する */
    inset: 17px;
    /* 灰色の枠線を付ける */
    border: 3px solid #a8a8a8;
    /* 枠線がクリック操作を邪魔しないようにする */
    pointer-events: none;
}

/* シール帳見本のさらに内側の枠線 */
.memory-book::after {
    /* 外側から25px内側に配置する */
    inset: 25px;
}

/* シール帳見本の中央の折り目線 */
.memory-book .memory-grid::before {
    /* 疑似要素を表示するための空文字 */
    content: "";
    /* 写真グリッドに重ねて配置する */
    position: absolute;
    /* 左に少しはみ出して配置する */
    left: -18px;
    /* 右に少しはみ出して配置する */
    right: -18px;
    /* 上からの位置を指定する */
    top: 306px;
    /* 写真より前に表示する */
    z-index: 2;
    /* 折り目線の高さを指定する */
    height: 6px;
    /* 折り目線の色を指定する */
    background: #a9a9a9;
    /* 上下に薄い影を付けて立体感を出す */
    box-shadow:
        0 5px 0 rgba(205, 205, 205, 0.95),
        0 -4px 0 rgba(224, 224, 224, 0.95);
    /* 折り目線がクリック操作を邪魔しないようにする */
    pointer-events: none;
}

/* シール帳見本の中央の帯 */
.memory-book .memory-grid::after {
    /* 疑似要素を表示するための空文字 */
    content: "";
    /* 写真グリッドに重ねて配置する */
    position: absolute;
    /* 左に大きくはみ出して配置する */
    left: -30px;
    /* 右に大きくはみ出して配置する */
    right: -30px;
    /* 上からの位置を指定する */
    top: 286px;
    /* 折り目線より後ろに表示する */
    z-index: 1;
    /* 中央の帯の高さを指定する */
    height: 46px;
    /* 両端と縦線をグラデーションで作る */
    background:
        linear-gradient(90deg, #ffffff 0 28px, transparent 29px calc(100% - 28px), #ffffff calc(100% - 27px)),
        linear-gradient(90deg, #d7d7d7 0 3px, transparent 4px calc(100% - 3px), #d7d7d7 calc(100% - 2px));
    /* 帯の上に線を付ける */
    border-top: 4px solid #d8d8d8;
    /* 帯の下に線を付ける */
    border-bottom: 4px solid #d8d8d8;
    /* 帯がクリック操作を邪魔しないようにする */
    pointer-events: none;
}

/* 写真カードを並べるグリッド */
.memory-grid {
    /* 疑似要素の位置調整の基準にする */
    position: relative;
    /* 見本エリアの枠線より前に表示する */
    z-index: 1;
    /* グリッドレイアウトを使う */
    display: grid;
    /* 6列に分ける */
    grid-template-columns: repeat(6, 1fr);
    /* 縦横の間隔を指定する */
    gap: 108px 12px;
}

/* 写真カード共通 */
.photo-card {
    /* カードの最低高さを指定する */
    min-height: 190px;
    /* カード内側の余白を作る */
    padding: 12px;
    /* 背景色を白にする */
    background-color: #ffffff;
    /* 薄い灰色の枠線を付ける */
    border: 2px solid #d6d6d6;
}

/* 大きい写真カード */
.photo-large {
    /* グリッド3列分の幅にする */
    grid-column: span 3;
    /* 大きいカードの最低高さを指定する */
    min-height: 262px;
    /* カード内側の余白を作る */
    padding: 10px;
    /* 中身を縦に並べる */
    display: flex;
    /* 中身の並びを縦方向にする */
    flex-direction: column;
}

/* 小さい写真カード */
.photo-card:not(.photo-large) {
    /* グリッド2列分の幅にする */
    grid-column: span 2;
    /* 中身を縦に並べる */
    display: flex;
    /* 中身の並びを縦方向にする */
    flex-direction: column;
    /* 小さいカードの最低高さを指定する */
    min-height: 252px;
    /* 下側の余白を少し広げる */
    padding-bottom: 18px;
}

/* 写真が入る灰色の仮エリア */
.photo-placeholder {
    /* 仮エリアの高さを指定する */
    height: 128px;
    /* 仮エリアの背景色を灰色にする */
    background-color: #d8d8d8;
    /* 画像を中に収める基準にする */
    position: relative;
    /* はみ出した画像を隠す */
    overflow: hidden;
    /* 画像を中央に置く */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 写真・ロゴ画像 */
.photo-placeholder img {
    /* 枠内に画像を表示する */
    width: 100%;
    height: 100%;
    /* 画像の引き伸ばしを防ぐ */
    object-fit: cover;
    /* 操作時の不要な選択を防ぐ */
    user-select: none;
    -webkit-user-drag: none;
}

/* ロゴ画像 */
.photo-logo-frame img {
    /* ロゴは切らずに全体を見せる */
    width: 78%;
    height: 78%;
    object-fit: contain;
}

/* ロゴの背景 */
.photo-logo-frame {
    /* ロゴが見やすいように白寄りの背景にする */
    background: #f7f7f7;
}

/* SNSロゴだけ黒背景にする */
.sns-photo-card .photo-logo-frame {
    background: #000000;
}

/* 小さい写真カード内の仮エリア */
.photo-card:not(.photo-large) .photo-placeholder {
    /* 小さいカード用の高さを指定する */
    height: 154px;
}

/* 大きい写真カード内の仮エリア */
.photo-large .photo-placeholder {
    /* 大きいカード用の高さを指定する */
    height: 174px;
}

/* 写真カードの見出し共通 */
.photo-card h2,
.photo-card h3 {
    /* 見出しの余白を調整する */
    margin: 14px 0 0;
    /* 文字を太くする */
    font-weight: 900;
    /* 行の高さを指定する */
    line-height: 1.1;
    /* 見出しを少し傾ける */
    transform: rotate(-2deg);
}

/* 大きい見出し */
.photo-card h2 {
    /* 文字サイズを指定する */
    font-size: 28px;
}

/* 大きい写真カードの見出し */
.photo-large h2 {
    /* 見出しをカード下側に寄せる */
    margin-top: auto;
    /* 下に少し余白を作る */
    margin-bottom: 8px;
    /* 文字サイズを指定する */
    font-size: 28px;
}

/* 小さい見出し */
.photo-card h3 {
    /* 文字サイズを指定する */
    font-size: 18px;
}

/* 小さい写真カードの見出し */
.photo-card:not(.photo-large) h3 {
    /* 見出しをカード下側に寄せる */
    margin-top: auto;
}

/* シール帳見本のリング */
.memory-rings {
    /* 見本エリア内に重ねて配置する */
    position: absolute;
    /* 左からの位置を指定する */
    left: 92px;
    /* 右からの位置を指定する */
    right: 60px;
    /* 上からの位置を指定する */
    top: 371px;
    /* 中央の線より前に表示する */
    z-index: 3;
    /* リングを横並びにする */
    display: flex;
    /* リング同士の間隔を均等にする */
    justify-content: space-between;
    /* 上線は表示しない */
    border-top: 0;
}

/* シール帳見本のリング1つずつ */
.memory-rings span {
    /* リングをブロック要素として表示する */
    display: block;
    /* リングの幅を指定する */
    width: 18px;
    /* リングの高さを指定する */
    height: 86px;
    /* リングを中央線に重ねるため上へずらす */
    margin-top: -43px;
    /* リングの金属感をグラデーションで作る */
    background: linear-gradient(90deg, #f9f9f9 0 48%, #d8d8d8 49% 100%);
    /* 黒い枠線を付ける */
    border: 3px solid #000000;
    /* 縦長の丸い形にする */
    border-radius: 999px;
    /* 右側と下側に影を付ける */
    box-shadow:
        6px 0 0 rgba(213, 213, 213, 0.95),
        0 2px 0 rgba(0, 0, 0, 0.08);
}

/* ホーム画面のフッター */
.home-footer {
    /* 表示位置を調整できるようにする */
    position: relative;
    /* 背景より前に表示する */
    z-index: 2;
    /* 上に余白を作る */
    margin-top: 28px;
    /* 文字サイズを指定する */
    font-size: 13px;
    /* 文字を太めにする */
    font-weight: 700;
}

/* 右側のシール帳エリア */
.home-right {
    /* はみ出したシール帳も見えるようにする */
    overflow: visible;
}

/* スマホ用のシール帳エリア */
.home-mobile-side-book {
    /* PC表示では非表示にする */
    display: none;
}

/* 右側に表示するシール帳全体 */
.side-book {
    /* 画面に固定して配置する */
    position: fixed;
    /* 上からの位置を指定する */
    top: 108px;
    /* 右側へ少しはみ出して配置する */
    right: -86px;
    /* 左位置は自動にする */
    left: auto;
    /* 中央カードより後ろ寄りに表示する */
    z-index: 1;
    /* 中身を縦に並べる */
    display: flex;
    /* 中身の並びを縦方向にする */
    flex-direction: column;
    /* 中身を縦方向の中央に寄せる */
    justify-content: center;
    /* ページ同士の間隔を指定する */
    gap: 34px;
    /* 画面幅に合わせてシール帳の幅を調整する */
    width: clamp(500px, 34vw, 660px);
    /* 画面幅に合わせてシール帳の高さを調整する */
    height: clamp(610px, 40vw, 760px);
    /* シール帳内側の余白を作る */
    padding: 46px 52px 54px 96px;
    /* 背景色を白にする */
    background: #ffffff;
    /* 太い灰色の枠線を付ける */
    border: 8px solid #d0d0d0;
    /* 右下に影を付ける */
    box-shadow:
        10px 10px 0 #a9a9a9,
        18px 18px 0 rgba(180, 180, 180, 0.34);
    /* シール帳を少し傾ける */
    transform: rotate(-5deg);
    /* 回転の基準を左上にする */
    transform-origin: left top;
    /* シール帳本体はクリック操作を受けないようにする */
    pointer-events: none;
}

/* シール帳の左側にはみ出すページ */
.side-book::before {
    /* 疑似要素を表示するための空文字 */
    content: "";
    /* シール帳に重ねて配置する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 18px;
    /* 右端の位置を計算して指定する */
    right: calc(100% - 18px);
    /* 下からの位置を指定する */
    bottom: 18px;
    /* 左へ大きくはみ出して配置する */
    left: -76%;
    /* 本体より後ろに表示する */
    z-index: -2;
    /* 背景色を白にする */
    background: #ffffff;
    /* 灰色の枠線を付ける */
    border: 3px solid #a8a8a8;
    /* ページの重なりを影で表現する */
    box-shadow:
        -10px 10px 0 #d0d0d0,
        10px 10px 0 #b9b9b9;
}

/* シール帳内側の二重枠 */
.side-book::after {
    /* 疑似要素を表示するための空文字 */
    content: "";
    /* シール帳に重ねて配置する */
    position: absolute;
    /* 外側から18px内側に配置する */
    inset: 18px;
    /* 中身より少し前に表示する */
    z-index: 1;
    /* 灰色の枠線を付ける */
    border: 3px solid #a8a8a8;
    /* 内側の二重線を影で作る */
    box-shadow: inset 0 0 0 8px #ffffff, inset 0 0 0 11px #a8a8a8;
    /* 枠線がクリック操作を邪魔しないようにする */
    pointer-events: none;
}

/* シール帳外側のリングエリア */
.binder-rings {
    /* シール帳に重ねて配置する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 74px;
    /* 下からの位置を指定する */
    bottom: 62px;
    /* 左へはみ出して配置する */
    left: -44px;
    /* 枠より前に表示する */
    z-index: 3;
    /* リングを縦に並べる */
    display: flex;
    /* 中身の並びを縦方向にする */
    flex-direction: column;
    /* リング同士の間隔を均等にする */
    justify-content: space-between;
    /* リングがクリック操作を邪魔しないようにする */
    pointer-events: none;
}

/* シール帳外側のリング1つずつ */
.binder-rings span {
    /* 疑似要素の位置調整の基準にする */
    position: relative;
    /* リングをブロック要素として表示する */
    display: block;
    /* リングの幅を指定する */
    width: 72px;
    /* リングの高さを指定する */
    height: 16px;
    /* 金属感をグラデーションで作る */
    background: linear-gradient(90deg, #f4f4f4 0 68%, #d1d1d1 69%);
    /* 枠線は付けない */
    border: 0;
    /* 横長の丸い形にする */
    border-radius: 999px;
    /* 右側の黒い部分を影で作る */
    box-shadow: 13px 0 0 #000000;
}

/* シール帳内のページ共通 */
.side-book-page {
    /* 中の装飾の位置調整の基準にする */
    position: relative;
    /* 内側の枠より前に表示する */
    z-index: 2;
    /* 横方向の中央に置く */
    margin: 0 auto;
    /* 親要素いっぱいの幅にする */
    width: 100%;
    /* ページの最低高さを指定する */
    min-height: 36%;
    /* 背景色を白にする */
    background-color: #ffffff;
    /* 薄い灰色の枠線を付ける */
    border: 2px solid #d3d3d3;
    /* 角を少し丸くする */
    border-radius: 8px;
    /* うっすら外枠を追加する */
    box-shadow: 0 0 0 1px rgba(225, 225, 225, 0.7);
}

/* シール帳の上側ページ */
.side-book-top {
    /* 中の装飾の位置調整の基準にする */
    position: relative;
    /* はみ出したリングも見えるようにする */
    overflow: visible;
    /* 左の余白をなくす */
    padding-left: 0;
    /* 上側ページの最低高さを指定する */
    min-height: 245px;
}

/* シール帳表紙リンク */
.side-book-cover {
    /* 中の文字を中央に置く */
    display: grid;
    /* 縦横中央に配置する */
    place-items: center;
    /* 表紙リンクの幅を指定する */
    width: 58%;
    /* 表紙リンクの高さを指定する */
    height: 86%;
    /* 表紙リンクの最低高さを指定する */
    min-height: 210px;
    /* 左に余白を取りながら配置する */
    margin: 16px 0 14px 60px;
    /* ピンクの枠線を付ける */
    border: 3px solid #ffd7f2;
    /* 内側の余白をなくす */
    padding: 0;
    /* 背景色を白にする */
    background: #ffffff;
    /* 文字色を黒にする */
    color: #000000;
    /* 親要素のフォント設定を引き継ぐ */
    font: inherit;
    /* カーソルを指マークにする */
    cursor: pointer;
    /* リンク部分だけクリックできるようにする */
    pointer-events: auto;
    /* ホバー時の変化をなめらかにする */
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* 表紙リンクにカーソルを乗せたとき */
.side-book-cover:hover {
    /* 背景色を薄いピンクにする */
    background-color: #fff4fb;
    /* 枠線の色を少し濃くする */
    border-color: #ffc1e9;
}

/* 表紙リンクを押したとき */
.side-book-cover:active {
    /* 少し下に動かす */
    transform: translateY(2px);
}

/* 表紙リンクにキーボードでフォーカスしたとき */
.side-book-cover:focus-visible {
    /* 見やすいアウトラインを付ける */
    outline: 3px solid #f39ccd;
    /* アウトラインを少し外側に離す */
    outline-offset: 5px;
}

/* 表紙リンク内の見出し */
.side-book-cover h2 {
    /* 見出しの余白をなくす */
    margin: 0;
    /* 画面幅に合わせて文字サイズを調整する */
    font-size: clamp(22px, 1.6vw, 30px);
    /* 文字を太くする */
    font-weight: 900;
}

/* シール帳の下側ページ */
.side-book-bottom {
    /* 中身をグリッドで配置する */
    display: grid;
    /* 中身を下寄せにする */
    align-items: end;
    /* 中身を左寄せにする */
    justify-items: start;
    /* 下側ページの最低高さを指定する */
    min-height: 41%;
    /* 内側の余白を指定する */
    padding: 42px 0 18px 24px;
}

/* タイプ一覧へのカードリンク */
.side-book-card {
    /* 中の文字を中央に置く */
    display: grid;
    /* 縦横中央に配置する */
    place-items: center;
    /* タブ装飾の位置調整の基準にする */
    position: relative;
    /* カードの幅を指定する */
    width: 76%;
    /* カードの高さを指定する */
    height: 62%;
    /* カードの最低高さを指定する */
    min-height: 150px;
    /* 背景色を黄色にする */
    background-color: #FFFAA9;
    /* 角を少し丸くする */
    border-radius: 9px 9px 8px 8px;
    /* 枠線は付けない */
    border: 0;
    /* 内側の余白をなくす */
    padding: 0;
    /* 文字色を黒にする */
    color: #000000;
    /* 親要素のフォント設定を引き継ぐ */
    font: inherit;
    /* 画面幅に合わせて文字サイズを調整する */
    font-size: clamp(20px, 1.4vw, 26px);
    /* 文字を太くする */
    font-weight: 900;
    /* カーソルを指マークにする */
    cursor: pointer;
    /* カード部分だけクリックできるようにする */
    pointer-events: auto;
    /* ホバー時の変化をなめらかにする */
    transition: background-color 0.15s ease, transform 0.15s ease;
}

/* タイプ一覧カードにカーソルを乗せたとき */
.side-book-card:hover,
.side-book-card:hover::before {
    /* 背景色を少し濃い黄色にする */
    background-color: #fff58f;
}

/* タイプ一覧カードを押したとき */
.side-book-card:active {
    /* 少し下に動かす */
    transform: translateY(2px);
}

/* タイプ一覧カードにキーボードでフォーカスしたとき */
.side-book-card:focus-visible {
    /* 見やすいアウトラインを付ける */
    outline: 3px solid #f2d85f;
    /* アウトラインを少し外側に離す */
    outline-offset: 5px;
}

/* タイプ一覧カードの上タブ */
.side-book-card::before {
    /* 疑似要素を表示するための空文字 */
    content: "";
    /* カードに重ねて配置する */
    position: absolute;
    /* カードの上へはみ出して配置する */
    top: -24%;
    /* 右端に揃える */
    right: 0;
    /* タブの幅を指定する */
    width: 48%;
    /* タブの高さを指定する */
    height: 34%;
    /* タブの背景色をカードと同じ黄色にする */
    background-color: #FFFAA9;
    /* タブ上側の角を丸くする */
    border-radius: 9px 9px 0 0;
}

/* シール帳内側のリングエリア */
.side-rings {
    /* 上側ページに重ねて配置する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 42px;
    /* 下からの位置を指定する */
    bottom: 40px;
    /* 左からの位置を指定する */
    left: 26px;
    /* ページより前に表示する */
    z-index: 3;
    /* リングを縦に並べる */
    display: flex;
    /* 中身の並びを縦方向にする */
    flex-direction: column;
    /* リング同士の間隔を均等にする */
    justify-content: space-between;
    /* リングがクリック操作を邪魔しないようにする */
    pointer-events: none;
}

/* シール帳内側のリング1つずつ */
.side-rings span {
    /* 疑似要素の位置調整の基準にする */
    position: relative;
    /* リングをブロック要素として表示する */
    display: block;
    /* リングの幅を指定する */
    width: 58px;
    /* リングの高さを指定する */
    height: 13px;
    /* リングの色を灰色にする */
    background: #d8d8d8;
    /* 枠線は付けない */
    border: 0;
    /* 横長の丸い形にする */
    border-radius: 999px;
    /* 右側の黒い部分を影で作る */
    box-shadow: 13px 0 0 #000000;
}

/* 質問ページ */
.question-body {
    /* 横幅が必要以上に広がるのを防ぐ */
    min-width: 0;
    /* 最低でも画面の高さ分を表示する */
    min-height: 100vh;
    /* 背景色を白にする */
    background-color: #ffffff;
    /* 背景にピンクの丸模様を作る */
    background-image:
        radial-gradient(circle, rgba(243, 154, 193, 0.84) 0 24px, transparent 25px),
        radial-gradient(circle, rgba(243, 154, 193, 0.84) 0 24px, transparent 25px);
    /* 2つの丸模様の位置をずらす */
    background-position: -12px -12px, 52px 52px;
    /* 丸模様を128px間隔で繰り返す */
    background-size: 128px 128px, 128px 128px;
    /* 画面からはみ出した部分を隠す */
    overflow: hidden;
}

/* 質問ページ全体のレイアウト */
.question-page {
    /* 中の要素の位置調整の基準にする */
    position: relative;
    /* グリッドレイアウトを使う */
    display: grid;
    /* 質問帳・余白・回答欄・右余白の4列に分ける */
    grid-template-columns: 887px 70px 538px 425px;
    /* PC用の基準幅を指定する */
    width: 1920px;
    /* PC用の基準高さを指定する */
    height: 1080px;
    /* 最低高さを1080pxにする */
    min-height: 1080px;
    /* 拡大縮小の基準を左上にする */
    transform-origin: top left;
}

/* 前に戻るリボンボタン */
.question-back-ribbon {
    /* ページ上に重ねて配置する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 36px;
    /* 右からの位置を少し広げる */
    right: 48px;
    /* ほかの要素より前に表示する */
    z-index: 20;
    /* ボタンの幅を指定する */
    width: 116px;
    /* ボタンの高さを指定する */
    height: 148px;
    /* 内側の余白をなくす */
    padding: 0;
    /* 黄色系の枠線を付ける */
    border: 5px solid #c9a84f;
    /* 下側の枠線を消す */
    border-bottom: 0;
    /* リボンの背景をグラデーションにする */
    background: linear-gradient(180deg, #fff4a8 0%, #ffd96b 100%);
    /* 右下に影を付ける */
    box-shadow: 8px 8px 0 rgba(208, 170, 72, 0.34);
    /* カーソルを指マークにする */
    cursor: pointer;
    /* 下側がへこんだリボン形にする */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}

/* リボンボタン上部の光 */
.question-back-ribbon::before {
    /* 疑似要素を表示するための空文字 */
    content: "";
    /* リボン内に重ねて配置する */
    position: absolute;
    /* 上部に横長で配置する */
    inset: 14px 18px auto;
    /* 光の高さを指定する */
    height: 22px;
    /* 丸みのある形にする */
    border-radius: 999px;
    /* 半透明の白で光を作る */
    background: rgba(255, 255, 255, 0.7);
}

/* リボンボタンの文字 */
.question-back-ribbon::after {
    /* 戻る文字を表示する */
    content: "戻る？";
    /* リボン内に重ねて配置する */
    position: absolute;
    /* 左端に揃える */
    left: 0;
    /* 右端に揃える */
    right: 0;
    /* 上からの位置を指定する */
    top: 54px;
    /* 文字色を濃い茶色にする */
    color: #5f4910;
    /* 文字サイズを指定する */
    font-size: 24px;
    /* 文字を太くする */
    font-weight: 900;
    /* 行の高さを指定する */
    line-height: 1;
    /* 文字を中央に揃える */
    text-align: center;
}

/* リボンボタンにカーソルやフォーカスが当たったとき */
.question-back-ribbon:hover,
.question-back-ribbon:focus-visible {
    /* 少し明るくする */
    filter: brightness(1.04);
    /* 少し上に動かす */
    transform: translateY(-2px);
}

/* 質問を表示する本の部分 */
.question-book {
    /* 中の装飾の位置調整の基準にする */
    position: relative;
    /* グリッドの1列目に配置する */
    grid-column: 1;
    /* 本の幅を指定する */
    width: 887px;
    /* 本の高さを指定する */
    height: 1024px;
    /* 上に余白を作る */
    margin-top: 29px;
    /* 左にさらに寄せる */
    margin-left: -72px;
    /* 本の内側の余白を作る */
    padding: 50px 108px 48px 108px;
    /* 背表紙の線と白い紙面を背景で作る */
    background:
        linear-gradient(90deg, transparent 0 105px, #b7b7b7 106px 111px, transparent 112px),
        linear-gradient(90deg, #ffffff 0 100%);
    /* 太い灰色の枠線を付ける */
    border: 8px solid #d0d0d0;
    /* 右下に影を付ける */
    box-shadow:
        10px 10px 0 #b9b9b9;
}

/* 質問帳の上側の紙の重なり */
.question-book::before {
    /* 疑似要素を表示するための空文字 */
    content: "";
    /* 本に重ねて配置する */
    position: absolute;
    /* 上へ枠線分はみ出して配置する */
    top: -8px;
    /* 左からの位置を指定する */
    left: 58px;
    /* 前面に表示する */
    z-index: 8;
    /* 紙の重なりの幅を指定する */
    width: 114px;
    /* 紙の重なりの高さを指定する */
    height: 54px;
    /* 背景色を灰色にする */
    background-color: #d1d1d1;
    /* 右の枠線は付けない */
    border-right: 0;
    /* 下に薄い影を付ける */
    box-shadow: 0 8px 0 rgba(205, 205, 205, 0.7);
}

/* 質問帳の背表紙の縦線 */
.question-book::after {
    /* 疑似要素を表示するための空文字 */
    content: "";
    /* 本に重ねて配置する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 52px;
    /* 下からの位置を指定する */
    bottom: 42px;
    /* 左からの位置を指定する */
    left: 104px;
    /* 紙面より後ろに表示する */
    z-index: 1;
    /* 縦線の幅を指定する */
    width: 8px;
    /* 縦線の色を指定する */
    background-color: #b8b8b8;
    /* 左の枠線は付けない */
    border-left: 0;
    /* 右の枠線は付けない */
    border-right: 0;
    /* 横に薄い影を付ける */
    box-shadow:
        12px 0 0 rgba(214, 214, 214, 0.42);
    /* 縦線がクリック操作を邪魔しないようにする */
    pointer-events: none;
}

/* 紙の角の装飾 */
.paper-corner {
    /* 現在は非表示にする */
    display: none;
}

/* 上側の紙の帯 */
.top-paper-strip {
    /* 質問帳に重ねて配置する */
    position: absolute;
    /* 上へ枠線分はみ出して配置する */
    top: -8px;
    /* 左へ枠線分はみ出して配置する */
    left: -8px;
    /* 前面に表示する */
    z-index: 7;
    /* 帯の幅を指定する */
    width: 70px;
    /* 帯の高さを指定する */
    height: 54px;
    /* 背景色を白にする */
    background-color: #ffffff;
    /* 上に太い枠線を付ける */
    border-top: 8px solid #d0d0d0;
    /* 右に細い枠線を付ける */
    border-right: 3px solid #d0d0d0;
    /* 下に薄い影を付ける */
    box-shadow: 0 8px 0 rgba(218, 218, 218, 0.55);
    /* 帯がクリック操作を邪魔しないようにする */
    pointer-events: none;
}

/* 上側の紙の帯の延長部分 */
.top-paper-strip::after {
    /* 疑似要素を表示するための空文字 */
    content: "";
    /* 帯に重ねて配置する */
    position: absolute;
    /* 右へはみ出して配置する */
    right: -118px;
    /* 下へ少しはみ出して配置する */
    bottom: -8px;
    /* 前面に表示する */
    z-index: 1;
    /* 延長部分の幅を指定する */
    width: 120px;
    /* 延長部分の高さを指定する */
    height: 8px;
    /* 背景色を白にする */
    background-color: #ffffff;
}

/* 前面の紙の上線 */
.front-paper-outline::before {
    /* 疑似要素を表示するための空文字 */
    content: "";
    /* 紙の枠に重ねて配置する */
    position: absolute;
    /* 上に少しはみ出して配置する */
    top: -4px;
    /* 左に少しはみ出して配置する */
    left: -4px;
    /* 右に少しはみ出して配置する */
    right: -4px;
    /* 枠線より前に表示する */
    z-index: 2;
    /* 上線の高さを指定する */
    height: 4px;
    /* 上線の色を指定する */
    background-color: #a8a8a8;
    /* 上線がクリック操作を邪魔しないようにする */
    pointer-events: none;
}

/* 前面の紙の外枠 */
.front-paper-outline {
    /* 質問帳に重ねて配置する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 52px;
    /* 左からの位置を指定する */
    left: 108px;
    /* 前面に表示する */
    z-index: 9;
    /* 外枠の幅を指定する */
    width: 656px;
    /* 外枠の高さを指定する */
    height: 901px;
    /* 灰色の枠線を付ける */
    border: 4px solid #a8a8a8;
    /* 背景は透明にする */
    background-color: transparent;
    /* 紙が重なっているような影を作る */
    box-shadow:
        8px 8px 0 #ffffff,
        12px 8px 0 #a8a8a8,
        16px 16px 0 #ffffff,
        20px 16px 0 #a8a8a8;
    /* 外枠がクリック操作を邪魔しないようにする */
    pointer-events: none;
}

/* 質問帳のリング穴エリア */
.book-holes {
    /* 質問帳に重ねて配置する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 124px;
    /* 下からの位置を指定する */
    bottom: 122px;
    /* 左からの位置を指定する */
    left: 56px;
    /* 前面に表示する */
    z-index: 10;
    /* リング穴を縦に並べる */
    display: flex;
    /* 中身の並びを縦方向にする */
    flex-direction: column;
    /* リング穴同士の間隔を均等にする */
    justify-content: space-between;
}

/* 質問帳のリング穴1つずつ */
.book-holes span {
    /* 疑似要素の位置調整の基準にする */
    position: relative;
    /* リング穴をブロック要素として表示する */
    display: block;
    /* リング穴の幅を指定する */
    width: 122px;
    /* リング穴の高さを指定する */
    height: 24px;
    /* 外側を黒にする */
    background-color: #000000;
    /* 横長の丸い形にする */
    border-radius: 999px;
    /* 右下に影を付ける */
    box-shadow:
        5px 4px 0 rgba(184, 184, 184, 0.7),
        0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* リング穴の金属部分 */
.book-holes span::before {
    /* 疑似要素を表示するための空文字 */
    content: "";
    /* リング穴内に重ねて配置する */
    position: absolute;
    /* 上端に揃える */
    top: 0;
    /* 左右に黒い部分を残す */
    left: 13px;
    right: 13px;
    /* 幅は左右指定に合わせる */
    width: auto;
    /* 高さを親要素に合わせる */
    height: 24px;
    /* 金属感をグラデーションで作る */
    background:
        linear-gradient(90deg, #f2f2f2 0 13%, #dddddd 14% 72%, #cccccc 73% 100%);
    /* 横長の丸い形にする */
    border-radius: 999px;
}

/* リング穴の光 */
.book-holes span::after {
    /* 疑似要素を表示するための空文字 */
    content: "";
    /* リング穴内に重ねて配置する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 3px;
    /* 左からの位置を指定する */
    left: 18px;
    /* 光の幅を指定する */
    width: 10px;
    /* 光の高さを指定する */
    height: 18px;
    /* 半透明の白で光を作る */
    background: rgba(255, 255, 255, 0.56);
    /* 丸みを付ける */
    border-radius: 999px;
}

/* 質問用紙 */
.question-paper {
    /* 中の要素や疑似要素の位置調整の基準にする */
    position: relative;
    /* 紙の外枠より前に表示する */
    z-index: 3;
    /* 中身をグリッドで配置する */
    display: grid;
    /* 中身を横方向の中央に置く */
    justify-items: center;
    /* 中身を上寄せにする */
    align-content: start;
    /* 中身同士の間隔を指定する */
    gap: 40px;
    /* 用紙の幅を指定する */
    width: 656px;
    /* 用紙の高さを指定する */
    height: 904px;
    /* 用紙内側の余白を作る */
    padding: 82px 56px 70px;
    /* 背景色を白にする */
    background-color: #ffffff;
    /* 枠線は付けない */
    border: 0;
    /* 影は付けない */
    box-shadow: none;
}

/* 質問用紙の疑似要素 */
.question-paper::before,
.question-paper::after {
    /* 現在は非表示にする */
    display: none;
}

/* 質問用紙の上側装飾 */
.question-paper::before {
    /* 上からの位置を指定する */
    top: -4px;
    /* 左からの位置を指定する */
    left: -4px;
    /* 装飾の幅を指定する */
    width: 90px;
    /* 装飾の高さを指定する */
    height: 4px;
}

/* 質問用紙の左側装飾 */
.question-paper::after {
    /* 上からの位置を指定する */
    top: -4px;
    /* 左からの位置を指定する */
    left: -4px;
    /* 装飾の幅を指定する */
    width: 4px;
    /* 装飾の高さを指定する */
    height: 90px;
}

/* 質問タイトル */
.question-title {
    /* 少し右にずらす */
    transform: translateX(14px);
    /* タイトルの幅を指定する */
    width: 450px;
    /* 外側の余白をなくす */
    margin: 0;
    /* 内側の余白を作る */
    padding: 13px 24px 15px;
    /* 文字を中央に揃える */
    text-align: center;
    /* 文字サイズを指定する */
    font-size: 67px;
    /* 行の高さを指定する */
    line-height: 1.2;
    /* 背景色を白にする */
    background-color: #ffffff;
    /* 灰色の枠線を付ける */
    border: 6px solid #d7d8da;
    /* 角を丸くする */
    border-radius: 31px;
    /* 文字を太くする */
    font-weight: 900;
}

/* 質問画像エリア */
.question-image {
    /* 少し右にずらす */
    transform: translateX(14px);
    /* 画像エリアの幅を指定する */
    width: 446px;
    /* 画像エリアの高さを指定する */
    height: 269px;
    /* 仮の背景色を灰色にする */
    background-color: #ffffff;
    /* 背景画像をくり返さずに表示する */
    background-repeat: no-repeat;

    /* 背景画像を中央に配置する */
    background-position: center;

    /* 背景画像の比率を保ったまま全体を収める */
    background-size: contain;
}

/* 質問文エリア */
.question-text-area {
    /* 中の文字を中央に置く */
    display: grid;
    /* 縦横中央に配置する */
    place-items: center;
    /* 少し右にずらす */
    transform: translateX(14px);
    /* 質問文エリアの幅を指定する */
    width: 445px;
    /* 質問文エリアの高さを指定する */
    height: 292px;
    /* 内側の余白を作る */
    padding: 26px 32px;
    /* 上に少し重ねる */
    margin-top: -14px;
    /* 背景色を白にする */
    background-color: #ffffff;
    /* 灰色の枠線を付ける */
    border: 5px solid #d7d8da;
    /* 角を丸くする */
    border-radius: 29px;
}

/* 質問文 */
.question-text-area p {
    /* 段落の余白をなくす */
    margin: 0;
    /* 文字サイズを指定する */
    font-size: 35px;
    /* 文字を太くする */
    font-weight: 900;
    /* 行の高さを指定する */
    line-height: 1.45;
    /* 文字を中央に揃える */
    text-align: center;
}

/* 回答選択エリア */
.answer-panel {
    /* 中の装飾の位置調整の基準にする */
    position: relative;
    /* グリッドの3列目に配置する */
    grid-column: 3;
    /* 中身をグリッドで配置する */
    display: grid;
    /* ピンとカードの2段に分ける */
    grid-template-rows: auto 1fr;
    /* 中身を横方向の中央に置く */
    justify-items: center;
    /* 回答エリアの幅を指定する */
    width: 538px;
    /* 最低でも画面の高さ分を確保する */
    min-height: 100vh;
    /* 内側の余白を作る */
    padding: 40px 30px 38px;
    /* 背景色をピンクにする */
    background-color: #ffe1f7;
}

/* 回答エリア上部の白いピン */
.answer-pin {
    /* ピンの幅を指定する */
    width: 36px;
    /* ピンの高さを指定する */
    height: 36px;
    /* 下に余白を作る */
    margin-bottom: 34px;
    /* ピンの色を白にする */
    background-color: #ffffff;
    /* 丸い形にする */
    border-radius: 50%;
    /* 右下に影を付ける */
    box-shadow: 4px 4px 0 #cfd0d0;
}

/* 回答ボタンをまとめるカード */
.answer-card {
    /* 中身をグリッドで配置する */
    display: grid;
    /* 中身を上寄せにする */
    align-content: start;
    /* 中身を横方向の中央に置く */
    justify-items: center;
    /* 回答ボタン同士の間隔を指定する */
    gap: 89px;
    /* カードの幅を指定する */
    width: 478px;
    /* カードの最低高さを指定する */
    min-height: 930px;
    /* カード内側の余白を作る */
    padding: 96px 40px 80px;
    /* カードの背景色を薄い黄色にする */
    background-color: #fffdf3;
    /* カードの角を少し丸くする */
    border-radius: 11px;
}

/* 回答ボタン */
.answer-button {
    /* 中の文字を中央に置く */
    display: grid;
    /* 縦横中央に配置する */
    place-items: center;
    /* ボタンの幅を指定する */
    width: 397px;
    /* ボタンの高さを指定する */
    height: 119px;
    /* 外側の余白をなくす */
    margin: 0;
    /* 内側の余白を作る */
    padding: 10px 22px;
    /* 灰色の枠線を付ける */
    border: 5px solid #d7d8da;
    /* 角を丸くする */
    border-radius: 29px;
    /* 背景色を白にする */
    background-color: #ffffff;
    /* 文字色を黒にする */
    color: #000000;
    /* 親要素のフォント設定を引き継ぐ */
    font: inherit;
    /* 文字サイズを指定する */
    font-size: 24px;
    /* 文字を太くする */
    font-weight: 900;
    /* 行の高さを指定する */
    line-height: 1.25;
    /* 文字を中央に揃える */
    text-align: center;
    /* カーソルを指マークにする */
    cursor: pointer;
}

/* 回答ボタンにカーソルやフォーカスが当たったとき */
.answer-button:hover,
.answer-button:focus-visible {
    /* 背景色を薄いピンクにする */
    background-color: #fff5fb;
}

/* 選択中の回答ボタン */
.answer-button.is-selected {
    /* 枠線をピンクにする */
    border-color: #ef8fbe;
    /* 背景色をピンクにする */
    background-color: #ffe1f7;
    /* 下にピンクの影を付ける */
    box-shadow: 0 6px 0 #efb9d8;
}

/* 無効化された回答ボタン */
.answer-button:disabled {
    /* 通常カーソルに戻す */
    cursor: default;
}

/* ギャラリーページ */
.gallary-body {
    /* PC用の最低幅を指定する */
    min-width: 1280px;
    /* 最低でも画面の高さ分を表示する */
    min-height: 100vh;
    /* 背景色を白にする */
    background-color: #ffffff;
    /* 背景にピンクの丸模様を作る */
    background-image:
        radial-gradient(circle, rgba(243, 154, 193, 0.84) 0 24px, transparent 25px),
        radial-gradient(circle, rgba(243, 154, 193, 0.84) 0 24px, transparent 25px);
    /* 2つの丸模様の位置をずらす */
    background-position: -12px -12px, 52px 52px;
    /* 丸模様を128px間隔で繰り返す */
    background-size: 128px 128px, 128px 128px;
    /* 画面からはみ出した部分を隠す */
    overflow: hidden;
}

/* ギャラリーページ全体 */
.gallary-page {
    /* 中の要素の位置調整の基準にする */
    position: relative;
    /* PC用の基準幅を指定する */
    width: 1920px;
    /* PC用の基準高さを指定する */
    height: 1080px;
    /* 最低高さを1080pxにする */
    min-height: 1080px;
    /* ギャラリーの拡大率を指定する変数 */
    --gallery-scale: 1;
    /* 横方向の移動量を指定する変数 */
    --gallery-shift-x: 0px;
    /* 縦方向の移動量を指定する変数 */
    --gallery-shift-y: 0px;
    /* 変数に合わせて位置と拡大率を調整する */
    transform: translate(var(--gallery-shift-x), var(--gallery-shift-y)) scale(var(--gallery-scale));
    /* 拡大縮小の基準を左上にする */
    transform-origin: top left;
}

/* 開いたバインダー全体 */
.gallary-binder {
    /* ページ上に重ねて配置する */
    position: absolute;
    /* 上端に配置する */
    top: 0;
    /* 左からの位置を指定する */
    left: 114px;
    /* バインダーの幅を指定する */
    width: 1690px;
    /* バインダーの高さを指定する */
    height: 1080px;
    /* paddingとborderを幅高さに含める */
    box-sizing: border-box;
    /* 背景色を白にする */
    background-color: #ffffff;
    /* 中央の背表紙と下側の紙の線を背景で作る */
    background-image:
        linear-gradient(90deg,
            transparent 0 790px,
            #d0d0d0 790px 797px,
            #ffffff 797px 906px,
            #d0d0d0 906px 914px,
            transparent 914px 100%),
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(#d0d0d0, #d0d0d0);
    /* 背景画像の位置を指定する */
    background-position:
        left bottom,
        left calc(100% - 32px),
        left bottom;
    /* 背景画像のサイズを指定する */
    background-size:
        100% 40px,
        100% 24px,
        100% 8px;
    /* 背景画像を繰り返さない */
    background-repeat: no-repeat;
    /* 太い灰色の枠線を付ける */
    border: 8px solid #d0d0d0;
    /* 角を少し丸くする */
    border-radius: 4px;
    /* 右下に影を付ける */
    box-shadow: 9px 9px 0 rgba(176, 176, 176, 0.7);
}

/* バインダーの疑似要素共通 */
.gallary-binder::before,
.gallary-binder::after {
    /* 疑似要素を表示するための空文字 */
    content: "";
    /* バインダーに重ねて配置する */
    position: absolute;
    /* 疑似要素がクリック操作を邪魔しないようにする */
    pointer-events: none;
}

/* バインダー下側の横線 */
.gallary-binder::before {
    /* 左からの位置を指定する */
    left: 132px;
    /* 右からの位置を指定する */
    right: 126px;
    /* 下からの位置を指定する */
    bottom: 42px;
    /* ページより後ろ寄りに表示する */
    z-index: 1;
    /* 横線の高さを指定する */
    height: 6px;
    /* 上側に線を付ける */
    border-top: 3px solid #9a9a9a;
    /* 下側の線は付けない */
    border-bottom: 0;
    /* 背景は透明にする */
    background: transparent;
    /* 影は付けない */
    box-shadow: none;
}

/* バインダーの追加装飾 */
.gallary-binder::after {
    /* 現在は非表示にする */
    display: none;
}

/* 上側のタブ全体 */
.gallary-top-tabs {
    /* 現在は非表示にする */
    display: none;
}

/* 上側のタブ1つずつ */
.gallary-top-tabs span {
    /* バインダーに重ねて配置する */
    position: absolute;
    /* 上端に配置する */
    top: 0;
    /* タブの高さを指定する */
    height: 40px;
    /* 背景色を白にする */
    background-color: #ffffff;
    /* 上に太い枠線を付ける */
    border-top: 8px solid #d0d0d0;
    /* 右に枠線を付ける */
    border-right: 4px solid #d0d0d0;
    /* 左に枠線を付ける */
    border-left: 4px solid #d0d0d0;
}

/* 1つ目の上タブ */
.gallary-top-tabs span:nth-child(1) {
    /* 左端に配置する */
    left: 0;
    /* 幅を指定する */
    width: 112px;
    /* 高さを指定する */
    height: 36px;
    /* 枠線を消す */
    border: 0;
}

/* 2つ目の上タブ */
.gallary-top-tabs span:nth-child(2) {
    /* 左からの位置を指定する */
    left: 790px;
    /* 幅を指定する */
    width: 124px;
    /* 背景色を白にする */
    background-color: #ffffff;
    /* 枠線の色を白にする */
    border-color: #ffffff;
}

/* 3つ目の上タブ */
.gallary-top-tabs span:nth-child(3) {
    /* 右からの位置を指定する */
    right: 772px;
    /* 幅を指定する */
    width: 124px;
    /* 背景色を白にする */
    background-color: #ffffff;
    /* 枠線の色を白にする */
    border-color: #ffffff;
}

/* バインダー中央の背表紙 */
.gallary-spine {
    /* バインダーに重ねて配置する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 60px;
    /* 下からの位置を指定する */
    bottom: 38px;
    /* 左からの位置を指定する */
    left: 840px;
    /* ページより前に表示する */
    z-index: 5;
    /* 背表紙の幅を指定する */
    width: 74px;
    /* 背景は透明にする */
    background: transparent;
    /* 背表紙がクリック操作を邪魔しないようにする */
    pointer-events: none;
}

/* 背表紙の追加装飾 */
.gallary-spine::before {
    /* 現在は非表示にする */
    display: none;
}

/* 背表紙の上側調整 */
.gallary-spine::before {
    /* 上へ伸ばす位置を指定する */
    top: -60px;
}

/* ギャラリーの紙ページ共通 */
.gallary-sheet {
    /* バインダーに重ねて配置する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 60px;
    /* 背景より前に表示する */
    z-index: 3;
    /* 紙ページの幅を指定する */
    width: 700px;
    /* 紙ページの高さを指定する */
    height: 958px;
    /* 背景色を白にする */
    background-color: #ffffff;
    /* 薄いドット模様を背景で作る */
    background-image: radial-gradient(circle, rgba(180, 180, 180, 0.55) 0 2px, transparent 2.5px);
    /* ドット模様の位置を指定する */
    background-position: 38px 38px;
    /* ドット模様の間隔を指定する */
    background-size: 52px 52px;
    /* 灰色の枠線を付ける */
    border: 4px solid #a8a8a8;
}

/* 紙ページ下側の重なり線 */
.gallary-sheet::after {
    /* 疑似要素を表示するための空文字 */
    content: "";
    /* 紙ページに重ねて配置する */
    position: absolute;
    /* 左に少しはみ出して配置する */
    left: -2px;
    /* 右に少しはみ出して配置する */
    right: -2px;
    /* 下へはみ出して配置する */
    bottom: -22px;
    /* 前面に表示する */
    z-index: 2;
    /* 重なり線の高さを指定する */
    height: 14px;
    /* 複数の横線を背景で作る */
    background:
        linear-gradient(#8f8f8f, #8f8f8f) left 1px / 100% 2px no-repeat,
        linear-gradient(#ababab, #ababab) left 6px / 100% 1px no-repeat,
        linear-gradient(#c4c4c4, #c4c4c4) left 10px / 100% 1px no-repeat;
    /* 重なり線がクリック操作を邪魔しないようにする */
    pointer-events: none;
}

/* 左ページ下側の重なり線 */
.gallary-sheet-left::after {
    /* 右側を少し短くする */
    right: 22px;
}

/* 右ページ下側の重なり線 */
.gallary-sheet-right::after {
    /* 左側を少し短くする */
    left: 22px;
}

/* ギャラリー左ページ */
.gallary-sheet-left {
    /* 左からの位置を指定する */
    left: 136px;
    /* 左側に紙の重なりを影で作る */
    box-shadow:
        -6px 8px 0 #ffffff,
        -10px 8px 0 #8f8f8f,
        -16px 16px 0 #ffffff,
        -20px 16px 0 #8f8f8f,
        -26px 24px 0 #ffffff,
        -30px 24px 0 #8f8f8f;
}

/* ギャラリー右ページ */
.gallary-sheet-right {
    /* 右からの位置を指定する */
    right: 126px;
    /* 右側に紙の重なりを影で作る */
    box-shadow:
        6px 8px 0 #ffffff,
        10px 8px 0 #8f8f8f,
        16px 16px 0 #ffffff,
        20px 16px 0 #8f8f8f,
        26px 24px 0 #ffffff,
        30px 24px 0 #8f8f8f;
}

/* ギャラリー中央のリングエリア */
.gallary-rings {
    /* バインダーに重ねて配置する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 136px;
    /* 下からの位置を指定する */
    bottom: 136px;
    /* 左からの位置を指定する */
    left: 783px;
    /* 右からの位置を指定する */
    right: 783px;
    /* ページより前に表示する */
    z-index: 9;
    /* リングを縦に並べる */
    display: flex;
    /* 中身の並びを縦方向にする */
    flex-direction: column;
    /* リング同士の間隔を均等にする */
    justify-content: space-between;
    /* リングがクリック操作を邪魔しないようにする */
    pointer-events: none;
}

/* ギャラリー中央のリング1つずつ */
.gallary-rings span {
    /* 疑似要素の位置調整の基準にする */
    position: relative;
    /* リングをブロック要素として表示する */
    display: block;
    /* リングの幅を指定する */
    width: 132px;
    /* リングの高さを指定する */
    height: 30px;
    /* 横方向の中央に置く */
    margin: 0 auto;
    /* 外側を黒にする */
    background-color: #000000;
    /* 横長の丸い形にする */
    border-radius: 999px;
    /* 右下に影を付ける */
    box-shadow: 6px 4px 0 rgba(184, 184, 184, 0.7);
}

/* ギャラリー中央リングの金属部分 */
.gallary-rings span::before {
    /* 疑似要素を表示するための空文字 */
    content: "";
    /* リング内に重ねて配置する */
    position: absolute;
    /* 上端に揃える */
    top: 0;
    /* 左右に黒い部分を残す */
    left: 15px;
    right: 15px;
    /* 高さを親要素に合わせる */
    height: 30px;
    /* 金属感をグラデーションで作る */
    background: linear-gradient(90deg, #f2f2f2 0 12%, #dedede 13% 72%, #cccccc 73% 100%);
    /* 横長の丸い形にする */
    border-radius: 999px;
}

/* ギャラリーメニューボタン */
.gallary-menu-button {
    /* 画面に固定して配置する */
    position: fixed;
    /* 上からの位置を指定する */
    top: 48px;
    /* 右端に配置する */
    right: 0;
    /* 前面に表示する */
    z-index: 20;
    /* 中の線をグリッドで配置する */
    display: grid;
    /* 中の線を縦方向の中央に寄せる */
    align-content: center;
    /* 中の線を横方向の中央に置く */
    justify-items: center;
    /* 線同士の間隔を指定する */
    gap: 13px;
    /* ボタンの幅を指定する */
    width: 108px;
    /* ボタンの高さを指定する */
    height: 96px;
    /* 右側の余白を調整する */
    padding: 0 12px 0 0;
    /* 背景色を灰色にする */
    background-color: #d8d8d8;
    /* 枠線は付けない */
    border: 0;
    /* 左側だけ丸い形にする */
    border-radius: 49px 0 0 49px;
    /* カーソルを指マークにする */
    cursor: pointer;
}

/* メニューボタンの三本線 */
.gallary-menu-button span {
    /* 線をブロック要素として表示する */
    display: block;
    /* 線の幅を指定する */
    width: 62px;
    /* 線の高さを指定する */
    height: 6px;
    /* 線を少し右へ寄せる */
    margin-left: 22px;
    /* 線の色を黒にする */
    background-color: #000000;
    /* 線の端を丸くする */
    border-radius: 999px;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

/* ギャラリーメニューボタンにカーソルを乗せたとき */
.gallary-menu-button:hover {
    /* 背景色を指定する */
    background-color: #cfcfcf;
}

/* メニューが開いたときの1本目の線 */
.gallary-menu-button.is-open span:nth-child(1) {
    /* 移動・回転・拡大縮小を指定する */
    transform: translateY(19px) rotate(42deg);
}

/* メニューが開いたときの2本目の線 */
.gallary-menu-button.is-open span:nth-child(2) {
    /* 透明度を指定する */
    opacity: 0;
}

/* メニューが開いたときの3本目の線 */
.gallary-menu-button.is-open span:nth-child(3) {
    /* 移動・回転・拡大縮小を指定する */
    transform: translateY(-19px) rotate(-42deg);
}

/* ギャラリーから戻るリボン */
.gallery-back-ribbon {
    /* 配置方法を指定する */
    position: fixed;
    /* 上からの位置を指定する */
    top: 52px;
    /* 左からの位置を指定する */
    left: 0;
    /* 重なり順を指定する */
    z-index: 22;
    /* 表示方法を指定する */
    display: grid;
    /* 中身を縦横中央に配置する */
    place-items: center;
    /* 幅を指定する */
    width: 112px;
    /* 高さを指定する */
    height: 86px;
    /* 内側の余白を指定する */
    padding: 0 20px 0 8px;
    /* 文字色を指定する */
    color: #5a4312;
    /* 文字サイズを指定する */
    font-size: 24px;
    /* 文字の太さを指定する */
    font-weight: 900;
    /* 行の高さを指定する */
    line-height: 1;
    /* 文字の揃え位置を指定する */
    text-align: center;
    /* 文字装飾を指定する */
    text-decoration: none;
    /* 背景を指定する */
    background: linear-gradient(180deg, #fff6b8 0%, #ffd86c 100%);
    /* 枠線を指定する */
    border: 4px solid #c9a84f;
    /* 左側の枠線を指定する */
    border-left: 0;
    /* 角の丸みを指定する */
    border-radius: 0 12px 12px 0;
    /* 影を指定する */
    box-shadow: 6px 6px 0 rgba(154, 154, 154, 0.24);
    /* 表示する形を指定する */
    clip-path: polygon(0 0, 100% 0, 84% 50%, 100% 100%, 0 100%);
}

/* 戻るリボン上部の光 */
.gallery-back-ribbon::before {
    /* 疑似要素に表示する内容を指定する */
    content: "";
    /* 配置方法を指定する */
    position: absolute;
    /* 上下左右の位置をまとめて指定する */
    inset: 12px 24px auto 12px;
    /* 高さを指定する */
    height: 14px;
    /* 角の丸みを指定する */
    border-radius: 999px;
    /* 背景を指定する */
    background: rgba(255, 255, 255, 0.7);
}

/* 戻るリボンにカーソルやフォーカスが当たったとき */
.gallery-back-ribbon:hover,
.gallery-back-ribbon:focus-visible {
    /* 見た目の効果を指定する */
    filter: brightness(1.04);
    /* 移動・回転・拡大縮小を指定する */
    transform: translateX(2px);
}

/* シールを配置するボード */
.honban-sticker-board {
    /* はみ出した部分の表示方法を指定する */
    overflow: visible;
    /* タッチ操作の動きを指定する */
    touch-action: none;
}

/* シール一覧パネル */
.honban-sticker-panel {
    /* 配置方法を指定する */
    position: fixed;
    /* 上からの位置を指定する */
    top: 154px;
    /* 右からの位置を指定する */
    right: 24px;
    /* 重なり順を指定する */
    z-index: 30;
    /* 幅を指定する */
    width: 300px;
    /* 最大高さを指定する */
    max-height: calc(100vh - 190px);
    /* 内側の余白を指定する */
    padding: 16px;
    /* 表示方法を指定する */
    display: grid;
    /* 要素同士の間隔を指定する */
    gap: 14px;
    /* はみ出した部分の表示方法を指定する */
    overflow: auto;
    /* 枠線を指定する */
    border: 4px solid #d2d2d2;
    /* 角の丸みを指定する */
    border-radius: 16px;
    /* 背景を指定する */
    background: rgba(255, 255, 255, 0.96);
    /* 影を指定する */
    box-shadow: 8px 8px 0 rgba(166, 166, 166, 0.34);
    /* 移動・回転・拡大縮小を指定する */
    transform: translateX(calc(100% + 40px));
    /* 変化のなめらかさを指定する */
    transition: transform 0.22s ease;
}

/* シール一覧パネルを開いた状態 */
.honban-sticker-panel.is-open {
    /* 移動・回転・拡大縮小を指定する */
    transform: translateX(0);
}

/* シールパネルの上部と操作ボタンエリア */
.honban-sticker-panel-head,
.honban-sticker-actions {
    /* 表示方法を指定する */
    display: flex;
    /* 中身を縦方向に揃える */
    align-items: center;
    /* 中身全体の横方向の配置を指定する */
    justify-content: space-between;
    /* 要素同士の間隔を指定する */
    gap: 12px;
}

/* シールパネルの見出し */
.honban-sticker-panel-head p {
    /* 外側の余白を指定する */
    margin: 0;
    /* 文字サイズを指定する */
    font-size: 24px;
    /* 文字の太さを指定する */
    font-weight: 900;
}

/* シールパネルの閉じるボタンと操作ボタン共通 */
.honban-sticker-close,
.honban-sticker-actions button {
    /* 枠線を指定する */
    border: 3px solid #d2d2d2;
    /* 背景を指定する */
    background: #ffffff;
    /* 文字色を指定する */
    color: #000000;
    /* フォント設定をまとめて指定する */
    font: inherit;
    /* 文字の太さを指定する */
    font-weight: 900;
    /* カーソルの形を指定する */
    cursor: pointer;
}

/* シールパネルの閉じるボタン */
.honban-sticker-close {
    /* 幅を指定する */
    width: 36px;
    /* 高さを指定する */
    height: 36px;
    /* 角の丸みを指定する */
    border-radius: 999px;
    /* 文字サイズを指定する */
    font-size: 22px;
    /* 行の高さを指定する */
    line-height: 1;
}

/* シールパネル下部の操作ボタン */
.honban-sticker-actions button {
    /* 幅を指定する */
    width: 100%;
    /* 最小高さを指定する */
    min-height: 40px;
    /* 角の丸みを指定する */
    border-radius: 999px;
    /* 文字サイズを指定する */
    font-size: 15px;
}

/* シール候補を並べるエリア */
.honban-sticker-tray {
    /* 表示方法を指定する */
    display: grid;
    /* グリッドの列を指定する */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 要素同士の間隔を指定する */
    gap: 12px;
}

/* シール候補ボタン */
.honban-sticker-source {
    /* 表示方法を指定する */
    display: grid;
    /* 要素同士の間隔を指定する */
    gap: 8px;
    /* 中身を横方向に揃える */
    justify-items: center;
    /* 内側の余白を指定する */
    padding: 10px 8px;
    /* 枠線を指定する */
    border: 3px solid #d2d2d2;
    /* 角の丸みを指定する */
    border-radius: 12px;
    /* 背景を指定する */
    background: #ffffff;
    /* 文字色を指定する */
    color: #000000;
    /* フォント設定をまとめて指定する */
    font: inherit;
    /* カーソルの形を指定する */
    cursor: grab;
    /* タッチ操作の動きを指定する */
    touch-action: none;
    /* 文字や画像の選択可否を指定する */
    user-select: none;
}

/* シール候補を押しているとき */
.honban-sticker-source:active {
    /* カーソルの形を指定する */
    cursor: grabbing;
}

/* 未解放のシール候補 */
.honban-sticker-source.is-locked {
    /* 透明度を指定する */
    opacity: 0.42;
    /* カーソルの形を指定する */
    cursor: not-allowed;
    /* 見た目の効果を指定する */
    filter: grayscale(1);
}

/* 未解放シールのプレビュー */
.honban-sticker-source.is-locked .honban-sticker-source-preview {
    /* 配置方法を指定する */
    position: relative;
}

/* 未解放シールのLOCK表示 */
.honban-sticker-source.is-locked .honban-sticker-source-preview::after {
    /* 疑似要素に表示する内容を指定する */
    content: "LOCK";
    /* 配置方法を指定する */
    position: absolute;
    /* 上下左右の位置をまとめて指定する */
    inset: auto 8px 8px;
    /* 表示方法を指定する */
    display: grid;
    /* 中身を縦横中央に配置する */
    place-items: center;
    /* 最小高さを指定する */
    min-height: 22px;
    /* 文字色を指定する */
    color: #ffffff;
    /* 背景を指定する */
    background: rgba(0, 0, 0, 0.62);
    /* 角の丸みを指定する */
    border-radius: 999px;
    /* 文字サイズを指定する */
    font-size: 10px;
    /* 文字の太さを指定する */
    font-weight: 900;
    /* 文字間隔を指定する */
    letter-spacing: 0;
}

/* シールの見た目共通 */
.honban-sticker-source-preview,
.honban-placed-sticker-face,
.honban-sticker-preview {
    /* 表示方法を指定する */
    display: grid;
    /* 中身を縦横中央に配置する */
    place-items: center;
    /* はみ出した部分の表示方法を指定する */
    overflow: hidden;
    /* 背景を指定する */
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.54)),
        linear-gradient(120deg, var(--sticker-a), var(--sticker-b));
    /* 枠線を指定する */
    border: 3px solid rgba(255, 255, 255, 0.9);
    /* 影を指定する */
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.56),
        4px 4px 0 rgba(168, 168, 168, 0.24);
}

/* シール候補のプレビュー */
.honban-sticker-source-preview {
    /* 幅を指定する */
    width: 92px;
    /* 高さを指定する */
    height: 72px;
    /* 角の丸みを指定する */
    border-radius: 20px;
    /* 透過PNGをそのまま見せる */
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* シール内の文字共通 */
.honban-sticker-source-preview span,
.honban-placed-sticker-face span,
.honban-sticker-preview span {
    /* 内側の余白を指定する */
    padding: 0 8px;
    /* 文字色を指定する */
    color: #ffffff;
    /* 文字サイズを指定する */
    font-size: 15px;
    /* 文字の太さを指定する */
    font-weight: 900;
    /* 行の高さを指定する */
    line-height: 1.15;
    /* 文字の揃え位置を指定する */
    text-align: center;
    /* 文字に影を付ける */
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.26),
        1px 1px 0 rgba(0, 0, 0, 0.18);
}

/* シール内の画像共通 */
.honban-sticker-source-preview img,
.honban-placed-sticker-face img,
.honban-sticker-preview img {
    /* 幅を指定する */
    width: 100%;
    /* 高さを指定する */
    height: 100%;
    /* 画像の収まり方を指定する */
    object-fit: contain;
    /* 背景を指定する */
    background: rgba(255, 255, 255, 0.88);
    /* 文字や画像の選択可否を指定する */
    user-select: none;
    /* 画像ドラッグを防ぐ設定を指定する */
    -webkit-user-drag: none;
}

/* シール候補名 */
.honban-sticker-source-name {
    /* 文字サイズを指定する */
    font-size: 12px;
    /* 文字の太さを指定する */
    font-weight: 900;
    /* 行の高さを指定する */
    line-height: 1.2;
    /* 文字の揃え位置を指定する */
    text-align: center;
}

/* 配置されたシール */
.honban-placed-sticker {
    /* 配置方法を指定する */
    position: absolute;
    /* 重なり順を指定する */
    z-index: 8;
    /* 幅を指定する */
    width: 150px;
    /* 高さを指定する */
    height: 118px;
    /* カーソルの形を指定する */
    cursor: grab;
    /* タッチ操作の動きを指定する */
    touch-action: none;
    /* 変形の基準点を指定する */
    transform-origin: center;
}

/* 画像シールとして配置されたシール */
.honban-placed-sticker.is-image-sticker {
    /* 幅を指定する */
    width: min(156px, 30%);
    /* 高さを指定する */
    height: auto;
    /* 縦横比を指定する */
    aspect-ratio: var(--image-sticker-ratio, 1 / 1);
}

/* シールをドラッグしている状態 */
.honban-placed-sticker.is-dragging {
    /* 重なり順を指定する */
    z-index: 12;
    /* カーソルの形を指定する */
    cursor: grabbing;
    /* 見た目の効果を指定する */
    filter: drop-shadow(8px 9px 3px rgba(0, 0, 0, 0.14));
}

/* シールを回転している状態 */
.honban-placed-sticker.is-rotating {
    /* 重なり順を指定する */
    z-index: 13;
    /* 見た目の効果を指定する */
    filter: drop-shadow(8px 9px 3px rgba(0, 0, 0, 0.14));
}

/* 選択中シールの枠 */
.honban-placed-sticker.is-selected .honban-placed-sticker-face {
    /* 外側の強調線を指定する */
    outline: 3px dashed rgba(243, 154, 193, 0.95);
    /* 強調線の距離を指定する */
    outline-offset: 5px;
}

/* 配置されたシールの表面 */
.honban-placed-sticker-face {
    /* 配置方法を指定する */
    position: absolute;
    /* 上下左右の位置をまとめて指定する */
    inset: 0;
    /* 角の丸みを指定する */
    border-radius: 28px;
}

/* 画像シールの表面 */
.honban-placed-sticker.is-image-sticker .honban-placed-sticker-face {
    /* 角の丸みを指定する */
    border-radius: 18px;
    /* 透過PNGをそのまま見せる */
    background: transparent;
    border: 0;
    box-shadow: none;
}

.honban-placed-sticker.is-image-sticker .honban-placed-sticker-face img {
    /* 画像自体にも背景色を付けず、透過部分をそのまま見せる */
    background: transparent;
}

/* 配置されたシール内の文字 */
.honban-placed-sticker-face span {
    /* 文字サイズを指定する */
    font-size: 22px;
}

/* シール回転ハンドル */
.honban-rotate-handle {
    /* 配置方法を指定する */
    position: absolute;
    /* 上からの位置を指定する */
    top: -20px;
    /* 右からの位置を指定する */
    right: -20px;
    /* 重なり順を指定する */
    z-index: 2;
    /* 幅を指定する */
    width: 38px;
    /* 高さを指定する */
    height: 38px;
    /* 表示方法を指定する */
    display: none;
    /* 中身を縦横中央に配置する */
    place-items: center;
    /* 内側の余白を指定する */
    padding: 0;
    /* 枠線を指定する */
    border: 3px solid #d0d0d0;
    /* 角の丸みを指定する */
    border-radius: 999px;
    /* 背景を指定する */
    background: #ffffff;
    /* 文字色を指定する */
    color: #111111;
    /* フォントの種類を指定する */
    font-family: Arial, sans-serif;
    /* 文字サイズを指定する */
    font-size: 25px;
    /* 文字の太さを指定する */
    font-weight: 900;
    /* 行の高さを指定する */
    line-height: 1;
    /* 影を指定する */
    box-shadow: 3px 3px 0 rgba(168, 168, 168, 0.24);
    /* カーソルの形を指定する */
    cursor: grab;
    /* タッチ操作の動きを指定する */
    touch-action: none;
}

/* シール削除ハンドル */
.honban-delete-handle {
    /* 配置方法を指定する */
    position: absolute;
    /* 上からの位置を指定する */
    top: -20px;
    /* 左からの位置を指定する */
    left: -20px;
    /* 重なり順を指定する */
    z-index: 2;
    /* 幅を指定する */
    width: 38px;
    /* 高さを指定する */
    height: 38px;
    /* 表示方法を指定する */
    display: none;
    /* 中身を縦横中央に配置する */
    place-items: center;
    /* 内側の余白を指定する */
    padding: 0 0 3px;
    /* 枠線を指定する */
    border: 3px solid #d0d0d0;
    /* 角の丸みを指定する */
    border-radius: 999px;
    /* 背景を指定する */
    background: #ffffff;
    /* 文字色を指定する */
    color: #111111;
    /* 文字サイズを指定する */
    font-size: 28px;
    /* 文字の太さを指定する */
    font-weight: 900;
    /* 行の高さを指定する */
    line-height: 1;
    /* 影を指定する */
    box-shadow: 3px 3px 0 rgba(168, 168, 168, 0.24);
    /* カーソルの形を指定する */
    cursor: pointer;
    /* タッチ操作の動きを指定する */
    touch-action: none;
}

/* 削除・回転ハンドルにカーソルを乗せたとき */
.honban-delete-handle:hover,
.honban-rotate-handle:hover {
    /* 背景を指定する */
    background: #fff4f8;
    /* 枠線の色を指定する */
    border-color: #f2a0c4;
}

/* シール操作中に回転ハンドルを表示する */
.honban-placed-sticker.is-selected .honban-rotate-handle,
.honban-placed-sticker.is-dragging .honban-rotate-handle,
.honban-placed-sticker.is-rotating .honban-rotate-handle {
    /* 表示方法を指定する */
    display: grid;
}

/* シール操作中に削除ハンドルを表示する */
.honban-placed-sticker.is-selected .honban-delete-handle,
.honban-placed-sticker.is-dragging .honban-delete-handle,
.honban-placed-sticker.is-rotating .honban-delete-handle {
    /* 表示方法を指定する */
    display: grid;
}

/* ドラッグ中のシールプレビュー */
.honban-sticker-preview {
    /* 配置方法を指定する */
    position: fixed;
    /* 重なり順を指定する */
    z-index: 999;
    /* 幅を指定する */
    width: 120px;
    /* 高さを指定する */
    height: 94px;
    /* 角の丸みを指定する */
    border-radius: 24px;
    /* クリック操作の受け取り方を指定する */
    pointer-events: none;
    /* 移動・回転・拡大縮小を指定する */
    transform: translate(-50%, -50%) rotate(-5deg);
}

/* スマホ用のギャラリーレイアウト */
@media (max-width: 600px) {

    /* 一覧ページ以外のギャラリー背景 */
    .gallary-body:not(.itiran-body) {
        /* 最小幅を指定する */
        min-width: 0;
        /* 最小高さを指定する */
        min-height: 100dvh;
        /* 背景画像や模様を指定する */
        background-image:
            radial-gradient(circle, rgba(243, 154, 193, 0.84) 0 14px, transparent 15px),
            radial-gradient(circle, rgba(243, 154, 193, 0.84) 0 14px, transparent 15px);
        /* 背景の位置を指定する */
        background-position: -10px -10px, 33px 33px;
        /* 背景の大きさを指定する */
        background-size: 86px 86px, 86px 86px;
        /* 横方向にはみ出した部分の表示方法を指定する */
        overflow-x: hidden;
        /* 縦方向にはみ出した部分の表示方法を指定する */
        overflow-y: auto;
    }

    /* スマホ用ギャラリーページ */
    .gallary-body:not(.itiran-body) .gallary-page {
        /* 配置方法を指定する */
        position: relative;
        /* 幅を指定する */
        width: 100%;
        /* 高さを指定する */
        height: auto;
        /* 最小高さを指定する */
        min-height: 100dvh;
        /* 内側の余白を指定する */
        padding: 170px 0 76px;
        /* 移動・回転・拡大縮小を指定する */
        transform: none !important;
        /* 変形の基準点を指定する */
        transform-origin: initial;
    }

    /* スマホ用ギャラリー上部の帯 */
    .gallary-body:not(.itiran-body) .gallary-page::before {
        /* 疑似要素に表示する内容を指定する */
        content: "";
        /* 配置方法を指定する */
        position: absolute;
        /* 上からの位置を指定する */
        top: 120px;
        /* 左からの位置を指定する */
        left: 0;
        /* 右からの位置を指定する */
        right: 0;
        /* 高さを指定する */
        height: 50px;
        /* 背景を指定する */
        background: #f7f7f7;
        /* 上側の枠線を指定する */
        border-top: 8px solid #d6d6d6;
        /* 下側の枠線を指定する */
        border-bottom: 8px solid #d6d6d6;
    }

    /* スマホ用ギャラリーバインダー */
    .gallary-body:not(.itiran-body) .gallary-binder {
        /* 配置方法を指定する */
        position: relative;
        /* 上からの位置を指定する */
        top: auto;
        /* 左からの位置を指定する */
        left: auto;
        /* 幅を指定する */
        width: calc(100vw - 24px);
        /* 高さを指定する */
        height: min(560px, calc(100dvh - 246px));
        /* 最小高さを指定する */
        min-height: 548px;
        /* 外側の余白を指定する */
        margin: 0 auto;
        /* 背景を指定する */
        background: #ffffff;
        /* 枠線を指定する */
        border: 6px solid #c9c9c9;
        /* 角の丸みを指定する */
        border-radius: 0;
        /* 影を指定する */
        box-shadow: 4px 4px 0 #a9a9a9;
    }

    /* スマホ用バインダー中央線 */
    .gallary-body:not(.itiran-body) .gallary-binder::before {
        /* 左からの位置を指定する */
        left: 0;
        /* 右からの位置を指定する */
        right: 0;
        /* 上からの位置を指定する */
        top: calc(50% - 5px);
        /* 下からの位置を指定する */
        bottom: auto;
        /* 重なり順を指定する */
        z-index: 6;
        /* 高さを指定する */
        height: 10px;
        /* 背景を指定する */
        background: #d2d2d2;
        /* 枠線を指定する */
        border: 0;
    }

    /* スマホ用バインダー下側の紙の重なり */
    .gallary-body:not(.itiran-body) .gallary-binder::after {
        /* 表示方法を指定する */
        display: block;
        /* 左からの位置を指定する */
        left: 4px;
        /* 右からの位置を指定する */
        right: -5px;
        /* 下からの位置を指定する */
        bottom: -9px;
        /* 重なり順を指定する */
        z-index: 1;
        /* 高さを指定する */
        height: 8px;
        /* 背景を指定する */
        background:
            linear-gradient(#9d9d9d, #9d9d9d) left 0 / 100% 2px no-repeat,
            linear-gradient(#b9b9b9, #b9b9b9) left 4px / 100% 2px no-repeat;
    }

    /* スマホでは上タブと背表紙を非表示にする */
    .gallary-body:not(.itiran-body) .gallary-top-tabs,
    .gallary-body:not(.itiran-body) .gallary-spine {
        /* 表示方法を指定する */
        display: none;
    }

    /* スマホ用ギャラリーの紙ページ */
    .gallary-body:not(.itiran-body) .gallary-sheet {
        /* 配置方法を指定する */
        position: absolute;
        /* 左からの位置を指定する */
        left: 6px;
        /* 右からの位置を指定する */
        right: 6px;
        /* 重なり順を指定する */
        z-index: 3;
        /* 幅を指定する */
        width: auto;
        /* 高さを指定する */
        height: calc(50% - 10px);
        /* 背景色を指定する */
        background-color: #ffffff;
        /* 背景画像や模様を指定する */
        background-image: radial-gradient(circle, rgba(180, 180, 180, 0.48) 0 1px, transparent 1.5px);
        /* 背景の位置を指定する */
        background-position: 16px 16px;
        /* 背景の大きさを指定する */
        background-size: 20px 20px;
        /* 枠線を指定する */
        border: 3px solid #a8a8a8;
        /* 影を指定する */
        box-shadow: none;
    }

    /* スマホでは紙ページ下の重なり線を非表示にする */
    .gallary-body:not(.itiran-body) .gallary-sheet::after {
        /* 表示方法を指定する */
        display: none;
    }

    /* スマホ用ギャラリー上ページ */
    .gallary-body:not(.itiran-body) .gallary-sheet-left {
        /* 上からの位置を指定する */
        top: 6px;
    }

    /* スマホ用ギャラリー下ページ */
    .gallary-body:not(.itiran-body) .gallary-sheet-right {
        /* 上からの位置を指定する */
        top: calc(50% + 5px);
    }

    /* スマホ用ギャラリーのリングエリア */
    .gallary-body:not(.itiran-body) .gallary-rings {
        /* 上からの位置を指定する */
        top: calc(50% - 29px);
        /* 下からの位置を指定する */
        bottom: auto;
        /* 左からの位置を指定する */
        left: 30px;
        /* 右からの位置を指定する */
        right: 30px;
        /* 重なり順を指定する */
        z-index: 9;
        /* 表示方法を指定する */
        display: flex;
        /* 並びの方向を指定する */
        flex-direction: row;
        /* 中身全体の横方向の配置を指定する */
        justify-content: space-between;
        /* 中身を縦方向に揃える */
        align-items: center;
    }

    /* スマホ用ギャラリーのリング1つずつ */
    .gallary-body:not(.itiran-body) .gallary-rings span {
        /* 幅を指定する */
        width: 12px;
        /* 高さを指定する */
        height: 51px;
        /* 外側の余白を指定する */
        margin: 0;
        /* 背景を指定する */
        background: #111111;
        /* 角の丸みを指定する */
        border-radius: 999px;
        /* 影を指定する */
        box-shadow: 2px 1px 0 rgba(0, 0, 0, 0.18);
    }

    /* スマホ用ギャラリーリングの金属部分 */
    .gallary-body:not(.itiran-body) .gallary-rings span::before {
        /* 上からの位置を指定する */
        top: 5px;
        /* 下からの位置を指定する */
        bottom: 5px;
        /* 左からの位置を指定する */
        left: 0;
        /* 右からの位置を指定する */
        right: 0;
        /* 幅を指定する */
        width: 12px;
        /* 高さを指定する */
        height: auto;
        /* 背景を指定する */
        background: linear-gradient(90deg, #f7f7f7 0 48%, #d7d7d7 49% 100%);
        /* 角の丸みを指定する */
        border-radius: 999px;
    }

    /* スマホ用メニューボタン */
    .gallary-body:not(.itiran-body) .gallary-menu-button {
        /* 配置方法を指定する */
        position: fixed;
        /* 上からの位置を指定する */
        top: 0;
        /* 右からの位置を指定する */
        right: 0;
        /* 左からの位置を指定する */
        left: auto;
        /* 表示方法を指定する */
        display: flex;
        /* 並びの方向を指定する */
        flex-direction: column;
        /* 中身全体の横方向の配置を指定する */
        justify-content: center;
        /* 中身を縦方向に揃える */
        align-items: center;
        /* 幅を指定する */
        width: 52px;
        /* 高さを指定する */
        height: 52px;
        /* 要素同士の間隔を指定する */
        gap: 5px;
        /* 内側の余白を指定する */
        padding: 0;
        /* 角の丸みを指定する */
        border-radius: 0;
    }

    /* スマホ用メニューボタンの線 */
    .gallary-body:not(.itiran-body) .gallary-menu-button span {
        /* フレックス内での伸び方を指定する */
        flex: 0 0 auto;
        /* 幅を指定する */
        width: 27px;
        /* 高さを指定する */
        height: 3px;
        /* 外側の余白を指定する */
        margin: 0;
    }

    /* スマホでメニューが開いたときの1本目の線 */
    .gallary-body:not(.itiran-body) .gallary-menu-button.is-open span:nth-child(1) {
        /* 移動・回転・拡大縮小を指定する */
        transform: translateY(8px) rotate(42deg);
    }

    /* スマホでメニューが開いたときの3本目の線 */
    .gallary-body:not(.itiran-body) .gallary-menu-button.is-open span:nth-child(3) {
        /* 移動・回転・拡大縮小を指定する */
        transform: translateY(-8px) rotate(-42deg);
    }

    /* スマホ用の戻るリボン */
    .gallery-back-ribbon {
        /* 上からの位置を指定する */
        top: 34px;
        /* 左からの位置を指定する */
        left: 14px;
        /* 幅を指定する */
        width: 68px;
        /* 高さを指定する */
        height: 46px;
        /* 内側の余白を指定する */
        padding: 0 14px 0 2px;
        /* 文字サイズを指定する */
        font-size: 14px;
        /* 文字を見やすい位置に調整する */
        line-height: 1;
        /* 文字を下に少し逃がす */
        padding-top: 8px;
        /* 枠線の太さを指定する */
        border-width: 3px;
        /* 左側の枠線を指定する */
        border-left: 3px solid #c9a84f;
        /* 角の丸みを指定する */
        border-radius: 9px;
        /* リボンの切り込みを少し浅くする */
        clip-path: polygon(0 0, 100% 0, 86% 50%, 100% 100%, 0 100%);
        /* 背景の水玉と重ならないように白い台紙を作る */
        filter: drop-shadow(0 0 0 #ffffff) drop-shadow(0 0 10px #ffffff) drop-shadow(0 0 18px #ffffff);
    }

    /* スマホ用の戻るリボン上部の光 */
    .gallery-back-ribbon::before {
        /* 上下左右の位置をまとめて指定する */
        inset: 8px 20px auto 11px;
        /* 高さを指定する */
        height: 8px;
    }

    /* スマホ用のシール一覧パネル */
    .honban-sticker-panel {
        /* 上からの位置を指定する */
        top: auto;
        /* 右からの位置を指定する */
        right: 12px;
        /* 下からの位置を指定する */
        bottom: 14px;
        /* 左からの位置を指定する */
        left: 12px;
        /* 幅を指定する */
        width: auto;
        /* 最大高さを指定する */
        max-height: 45dvh;
        /* 枠線の太さを指定する */
        border-width: 3px;
        /* 角の丸みを指定する */
        border-radius: 14px;
        /* 移動・回転・拡大縮小を指定する */
        transform: translateY(calc(100% + 28px));
    }

    /* スマホでシール一覧パネルを開いた状態 */
    .honban-sticker-panel.is-open {
        /* 移動・回転・拡大縮小を指定する */
        transform: translateY(0);
    }

    /* スマホ用のシール候補一覧 */
    .honban-sticker-tray {
        /* グリッドの列を指定する */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* 要素同士の間隔を指定する */
        gap: 8px;
    }

    /* スマホ用のシール候補ボタン */
    .honban-sticker-source {
        /* 内側の余白を指定する */
        padding: 8px 4px;
    }

    /* スマホ用のシール候補プレビュー */
    .honban-sticker-source-preview {
        /* 幅を指定する */
        width: 72px;
        /* 最大幅を指定する */
        max-width: 100%;
        /* 高さを指定する */
        height: 54px;
        /* 角の丸みを指定する */
        border-radius: 16px;
    }

    /* スマホ用のシール候補プレビュー内文字 */
    .honban-sticker-source-preview span {
        /* 文字サイズを指定する */
        font-size: 11px;
    }

    /* スマホ用のシール候補名 */
    .honban-sticker-source-name {
        /* 文字サイズを指定する */
        font-size: 10px;
    }

    /* スマホで配置されたシール */
    .honban-placed-sticker {
        /* 幅を指定する */
        width: 92px;
        /* 高さを指定する */
        height: 72px;
    }

    /* スマホで配置された画像シール */
    .honban-placed-sticker.is-image-sticker {
        /* 幅を指定する */
        width: 78px;
        /* 高さを指定する */
        height: auto;
        /* 縦横比を指定する */
        aspect-ratio: var(--image-sticker-ratio, 1 / 1);
    }

    .honban-placed-sticker.is-image-sticker .honban-placed-sticker-face {
        border-radius: 14px;
    }

    /* スマホで配置されたシールの表面 */
    .honban-placed-sticker-face {
        /* 角の丸みを指定する */
        border-radius: 18px;
    }

    /* スマホで配置されたシール内文字 */
    .honban-placed-sticker-face span {
        /* 文字サイズを指定する */
        font-size: 13px;
    }
}

/* 一覧ページ */
.itiran-body .gallary-sheet {
    /* はみ出した部分の表示方法を指定する */
    overflow: visible;
}

/* 一覧ページではメニューボタンを非表示にする */
.itiran-body .gallary-menu-button {
    /* 表示方法を指定する */
    display: none;
}

/* 一覧ページの写真枠 */
.itiran-photo {
    /* 配置方法を指定する */
    position: absolute;
    /* 幅を指定する */
    width: 270px;
    /* 高さを指定する */
    height: 260px;
    /* 背景を指定する */
    background: #fff;
    /* 枠線を指定する */
    border: 4px solid currentColor;
    /* 角の丸みを指定する */
    border-radius: 18px;
    /* 背景画像を中央に表示する */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* 一覧ページのタイプ名ラベル */
.itiran-label {
    /* 配置方法を指定する */
    position: absolute;
    /* 表示方法を指定する */
    display: grid;
    /* 要素同士の間隔を指定する */
    gap: 0;
    /* 中身を横方向に揃える */
    justify-items: start;
    /* 文字色を指定する */
    color: #ffffff;
    /* 文字サイズを指定する */
    font-size: 34px;
    /* 文字の太さを指定する */
    font-weight: 900;
    /* 行の高さを指定する */
    line-height: 1;
    /* 文字間隔を指定する */
    letter-spacing: 0;
    /* 文字の揃え位置を指定する */
    text-align: center;
    /* 文字の折り返し方法を指定する */
    white-space: nowrap;
}

/* タイプ名ラベルの1行ずつ */
.itiran-label span {
    /* 表示方法を指定する */
    display: grid;
    /* 中身を縦横中央に配置する */
    place-items: center;
    /* 幅を指定する */
    width: 210px;
    /* 高さを指定する */
    height: 50px;
    /* 内側の余白を指定する */
    padding: 0 18px;
    /* 角の丸みを指定する */
    border-radius: 8px;
    /* 背景を指定する */
    background: linear-gradient(120deg, var(--itiran-label-a), var(--itiran-label-b));
}

/* 2行目のタイプ名ラベル */
.itiran-label span+span {
    /* 上側の余白を指定する */
    margin-top: 2px;
    /* 左側の余白を指定する */
    margin-left: 36px;
}

/* 青タイプのラベル */
.itiran-label-blue {
    /* 文字サイズを指定する */
    font-size: 31px;
}

/* 青タイプのラベル行 */
.itiran-label-blue span {
    /* 幅を指定する */
    width: 255px;
}

/* 青タイプの2行目ラベル */
.itiran-label-blue span+span {
    /* 左側の余白を指定する */
    margin-left: 34px;
}

/* 赤タイプの写真枠 */
.itiran-photo-red {
    /* 上からの位置を指定する */
    top: 56px;
    /* 左からの位置を指定する */
    left: 58px;
    /* 文字色を指定する */
    color: #ff4a34;
    /* 画像を表示する */
    background-image: url("../image/runner.png");
}

/* 赤タイプのラベル */
.itiran-label-red {
    /* 上からの位置を指定する */
    top: 120px;
    /* 左からの位置を指定する */
    left: 360px;
    /* ラベルのグラデーション開始色を指定する */
    --itiran-label-a: #ff2828;
    /* ラベルのグラデーション終了色を指定する */
    --itiran-label-b: #ff8838;
}

/* 青タイプのラベル位置 */
.itiran-label-blue {
    /* 上からの位置を指定する */
    top: 426px;
    /* 左からの位置を指定する */
    left: 40px;
    /* ラベルのグラデーション開始色を指定する */
    --itiran-label-a: #2151ff;
    /* ラベルのグラデーション終了色を指定する */
    --itiran-label-b: #19d7d4;
}

/* 青タイプの写真枠 */
.itiran-photo-blue {
    /* 上からの位置を指定する */
    top: 346px;
    /* 左からの位置を指定する */
    left: 350px;
    /* 文字色を指定する */
    color: #2e5dff;
    /* 画像を表示する */
    background-image: url("../image/think2.png");
}

/* 緑タイプの写真枠 */
.itiran-photo-green {
    /* 上からの位置を指定する */
    top: 638px;
    /* 左からの位置を指定する */
    left: 62px;
    /* 文字色を指定する */
    color: #1df54d;
    /* 画像を表示する */
    background-image: url("../image/supporter.png");

}

/* 緑タイプのラベル */
.itiran-label-green {
    /* 上からの位置を指定する */
    top: 716px;
    /* 左からの位置を指定する */
    left: 360px;
    /* ラベルのグラデーション開始色を指定する */
    --itiran-label-a: #2fff32;
    /* ラベルのグラデーション終了色を指定する */
    --itiran-label-b: #00d9c8;
}

/* 黄緑タイプの写真枠 */
.itiran-photo-lime {
    /* 上からの位置を指定する */
    top: 56px;
    /* 左からの位置を指定する */
    left: 92px;
    /* 文字色を指定する */
    color: #65df12;
    /* 画像を表示する */
    background-image: url("../image/smile.png");
}

/* 黄緑タイプのラベル */
.itiran-label-lime {
    /* 上からの位置を指定する */
    top: 122px;
    /* 左からの位置を指定する */
    left: 414px;
    /* ラベルのグラデーション開始色を指定する */
    --itiran-label-a: #48e800;
    /* ラベルのグラデーション終了色を指定する */
    --itiran-label-b: #d7ce00;
}

/* 紺タイプのラベル */
.itiran-label-navy {
    /* 上からの位置を指定する */
    top: 426px;
    /* 左からの位置を指定する */
    left: 100px;
    /* ラベルのグラデーション開始色を指定する */
    --itiran-label-a: #0d064c;
    /* ラベルのグラデーション終了色を指定する */
    --itiran-label-b: #1b083d;
}

/* 紺タイプの写真枠 */
.itiran-photo-navy {
    /* 上からの位置を指定する */
    top: 346px;
    /* 左からの位置を指定する */
    left: 386px;
    /* 文字色を指定する */
    color: #100556;
    /* 画像を表示する */
    background-image: url("../image/trouble.png");
}

/* 茶色タイプの写真枠 */
.itiran-photo-brown {
    /* 上からの位置を指定する */
    top: 638px;
    /* 左からの位置を指定する */
    left: 96px;
    /* 文字色を指定する */
    color: #bda78f;
    /* 画像を表示する */
    background-image: url("../image/sleep.png");
}

/* 茶色タイプのラベル */
.itiran-label-brown {
    /* 上からの位置を指定する */
    top: 716px;
    /* 左からの位置を指定する */
    left: 414px;
    /* ラベルのグラデーション開始色を指定する */
    --itiran-label-a: #d9cbbc;
    /* ラベルのグラデーション終了色を指定する */
    --itiran-label-b: #8e7057;
}

/* スマホ用の一覧ページ */
@media (max-width: 600px) {

    /* スマホ用の一覧ページ背景と変数 */
    .itiran-body.gallary-body {
        /* 一覧ページの紙の幅を変数で指定する */
        --itiran-sheet-w: clamp(286px, 70vw, 430px);
        /* 一覧ページの紙の高さを変数で指定する */
        --itiran-sheet-h: calc(var(--itiran-sheet-w) * 1.49);
        /* 一覧ページの余白を変数で指定する */
        --itiran-pad: clamp(8px, 2vw, 14px);
        /* 一覧ページのリング幅を変数で指定する */
        --itiran-ring-w: clamp(84px, 16vw, 98px);
        /* 幅を指定する */
        width: 100%;
        /* 最大幅を指定する */
        max-width: 100vw;
        /* 最小幅を指定する */
        min-width: 0;
        /* 最小高さを指定する */
        min-height: 100vh;
        /* 横方向にはみ出した部分の表示方法を指定する */
        overflow-x: hidden;
        /* 縦方向にはみ出した部分の表示方法を指定する */
        overflow-y: auto;
        /* 背景色を指定する */
        background-color: #ffffff;
        /* 背景画像や模様を指定する */
        background-image:
            radial-gradient(circle, rgba(243, 154, 193, 0.84) 0 32px, transparent 33px),
            radial-gradient(circle, rgba(243, 154, 193, 0.84) 0 32px, transparent 33px);
        /* 背景の位置を指定する */
        background-position: 38px 8px, -52px 112px;
        /* 背景の大きさを指定する */
        background-size: 180px 210px, 180px 210px;
        /* 背景の固定方法を指定する */
        background-attachment: scroll;
        /* 背景の固定方法を指定する */
        background-attachment: scroll;
    }

    /* スマホ用の一覧ページ全体 */
    .itiran-body .gallary-page {
        /* 幅を指定する */
        width: 100%;
        /* 最大幅を指定する */
        max-width: 100vw;
        /* 高さを指定する */
        height: auto;
        /* 最小高さを指定する */
        min-height: 100vh;
        /* 内側の余白を指定する */
        padding: 31px 0 22px;
        /* 移動・回転・拡大縮小を指定する */
        transform: none !important;
        /* 横方向にはみ出した部分の表示方法を指定する */
        overflow-x: clip;
        /* 背景を指定する */
        background: #ffffff;
    }

    /* スマホ用の一覧ページバインダー */
    .itiran-body .gallary-binder {
        /* 配置方法を指定する */
        position: relative;
        /* 上からの位置を指定する */
        top: auto;
        /* 左からの位置を指定する */
        left: auto;
        /* 表示方法を指定する */
        display: grid;
        /* 要素同士の間隔を指定する */
        gap: 48px;
        /* 幅を指定する */
        width: 100%;
        /* 高さを指定する */
        height: auto;
        /* 内側の余白を指定する */
        padding: 0 0 0;
        /* 背景を指定する */
        background: transparent;
        /* 枠線を指定する */
        border: 0;
        /* 角の丸みを指定する */
        border-radius: 0;
        /* 影を指定する */
        box-shadow: none;
        /* 横方向にはみ出した部分の表示方法を指定する */
        overflow-x: clip;
    }

    /* スマホではPC用のバインダー装飾を非表示にする */
    .itiran-body .gallary-binder::before,
    .itiran-body .gallary-binder::after,
    .itiran-body .gallary-spine,
    .itiran-body .gallary-rings {
        /* 表示方法を指定する */
        display: none;
    }

    /* スマホ用の一覧ページの紙 */
    .itiran-body .gallary-sheet {
        /* 配置方法を指定する */
        position: relative;
        /* 上からの位置を指定する */
        top: auto;
        /* 右からの位置を指定する */
        right: auto;
        /* 左からの位置を指定する */
        left: auto;
        /* 幅を指定する */
        width: var(--itiran-sheet-w);
        /* 高さを指定する */
        height: var(--itiran-sheet-h);
        /* 外側の余白を指定する */
        margin: 0;
        /* 背景色を指定する */
        background-color: #ffffff;
        /* 背景画像や模様を指定する */
        background-image: radial-gradient(circle, rgba(188, 188, 188, 0.62) 0 1.2px, transparent 1.6px);
        /* 背景の位置を指定する */
        background-position: 22px 22px;
        /* 背景の大きさを指定する */
        background-size: 32px 32px;
        /* 枠線を指定する */
        border: 3px solid #a8a8a8;
        /* 影を指定する */
        box-shadow:
            0 0 0 var(--itiran-pad) #ffffff,
            0 0 0 calc(var(--itiran-pad) + 3px) #d0d0d0,
            7px 7px 0 calc(var(--itiran-pad) + 1px) rgba(180, 180, 180, 0.18),
            5px 6px 0 #ffffff,
            8px 6px 0 #a8a8a8;
    }

    /* スマホ用の一覧ページ左紙 */
    .itiran-body .gallary-sheet-left {
        justify-self: start;
        /* 左側の余白を指定する */
        margin-left: clamp(62px, calc((100vw - var(--itiran-sheet-w) - var(--itiran-ring-w) + 104px) / 2), 112px);
    }

    /* スマホ用の一覧ページ右紙 */
    .itiran-body .gallary-sheet-right {
        justify-self: start;
        /* 左側の余白を指定する */
        margin-left: clamp(0px, calc((100vw - var(--itiran-sheet-w) + var(--itiran-ring-w) - 116px) / 2), 34px);
    }

    /* スマホ用の一覧ページリング装飾 */
    .itiran-body .gallary-sheet-left::before,
    .itiran-body .gallary-sheet-right::before {
        /* 疑似要素に表示する内容を指定する */
        content: "";
        /* 配置方法を指定する */
        position: absolute;
        /* 上からの位置を指定する */
        top: calc(var(--itiran-pad) * -1 - 3px);
        /* 下からの位置を指定する */
        bottom: calc(var(--itiran-pad) * -1 - 3px);
        /* 重なり順を指定する */
        z-index: 5;
        /* 幅を指定する */
        width: var(--itiran-ring-w);
        /* 背景を指定する */
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='24' viewBox='0 0 84 24'%3E%3Crect x='0' y='2' width='84' height='20' rx='10' fill='%23050505'/%3E%3Crect x='10' y='2' width='64' height='20' rx='9' fill='%23e4e4e4'/%3E%3Cpath d='M42 2v20' stroke='%23d0d0d0' stroke-width='1.4'/%3E%3Cellipse cx='42' cy='12' rx='9.5' ry='3.2' fill='%23ffffff' opacity='.95'/%3E%3C/svg%3E") center 10% / 84px 23px no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='24' viewBox='0 0 84 24'%3E%3Crect x='0' y='2' width='84' height='20' rx='10' fill='%23050505'/%3E%3Crect x='10' y='2' width='64' height='20' rx='9' fill='%23e4e4e4'/%3E%3Cpath d='M42 2v20' stroke='%23d0d0d0' stroke-width='1.4'/%3E%3Cellipse cx='42' cy='12' rx='9.5' ry='3.2' fill='%23ffffff' opacity='.95'/%3E%3C/svg%3E") center 26% / 84px 23px no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='24' viewBox='0 0 84 24'%3E%3Crect x='0' y='2' width='84' height='20' rx='10' fill='%23050505'/%3E%3Crect x='10' y='2' width='64' height='20' rx='9' fill='%23e4e4e4'/%3E%3Cpath d='M42 2v20' stroke='%23d0d0d0' stroke-width='1.4'/%3E%3Cellipse cx='42' cy='12' rx='9.5' ry='3.2' fill='%23ffffff' opacity='.95'/%3E%3C/svg%3E") center 42% / 84px 23px no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='24' viewBox='0 0 84 24'%3E%3Crect x='0' y='2' width='84' height='20' rx='10' fill='%23050505'/%3E%3Crect x='10' y='2' width='64' height='20' rx='9' fill='%23e4e4e4'/%3E%3Cpath d='M42 2v20' stroke='%23d0d0d0' stroke-width='1.4'/%3E%3Cellipse cx='42' cy='12' rx='9.5' ry='3.2' fill='%23ffffff' opacity='.95'/%3E%3C/svg%3E") center 58% / 84px 23px no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='24' viewBox='0 0 84 24'%3E%3Crect x='0' y='2' width='84' height='20' rx='10' fill='%23050505'/%3E%3Crect x='10' y='2' width='64' height='20' rx='9' fill='%23e4e4e4'/%3E%3Cpath d='M42 2v20' stroke='%23d0d0d0' stroke-width='1.4'/%3E%3Cellipse cx='42' cy='12' rx='9.5' ry='3.2' fill='%23ffffff' opacity='.95'/%3E%3C/svg%3E") center 74% / 84px 23px no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='24' viewBox='0 0 84 24'%3E%3Crect x='0' y='2' width='84' height='20' rx='10' fill='%23050505'/%3E%3Crect x='10' y='2' width='64' height='20' rx='9' fill='%23e4e4e4'/%3E%3Cpath d='M42 2v20' stroke='%23d0d0d0' stroke-width='1.4'/%3E%3Cellipse cx='42' cy='12' rx='9.5' ry='3.2' fill='%23ffffff' opacity='.95'/%3E%3C/svg%3E") center 90% / 84px 23px no-repeat,
            linear-gradient(90deg, transparent 0 calc(50% - 8px), #b8b8b8 calc(50% - 7px) calc(50% - 5px), transparent calc(50% - 4px) calc(50% + 4px), #b8b8b8 calc(50% + 5px) calc(50% + 7px), transparent calc(50% + 8px) 100%);
        /* 上側の枠線を指定する */
        border-top: 0;
        /* 下側の枠線を指定する */
        border-bottom: 0;
        /* 影を指定する */
        box-shadow: none;
        /* クリック操作の受け取り方を指定する */
        pointer-events: none;
    }

    /* スマホ用の左紙リング位置 */
    .itiran-body .gallary-sheet-left::before {
        /* 右からの位置を指定する */
        right: calc(var(--itiran-ring-w) * -1 + 20px);
    }

    /* スマホ用の右紙リング位置 */
    .itiran-body .gallary-sheet-right::before {
        /* 左からの位置を指定する */
        left: calc(var(--itiran-ring-w) * -1 + 20px);
        /* 移動・回転・拡大縮小を指定する */
        transform: scaleX(-1);
    }

    /* スマホ用の紙下側の重なり */
    .itiran-body .gallary-sheet::after {
        /* 左からの位置を指定する */
        left: calc(var(--itiran-pad) * -1 - 4px);
        /* 右からの位置を指定する */
        right: calc(var(--itiran-pad) * -1 - 4px);
        /* 下からの位置を指定する */
        bottom: calc(var(--itiran-pad) * -1 - 13px);
        /* 重なり順を指定する */
        z-index: -1;
        /* 高さを指定する */
        height: 24px;
        /* 背景を指定する */
        background:
            linear-gradient(#d0d0d0, #d0d0d0) left top / 100% 5px no-repeat,
            linear-gradient(90deg, #ffffff 0 14px, transparent 15px calc(100% - 14px), #ffffff calc(100% - 13px)) left 5px / 100% 15px no-repeat,
            linear-gradient(90deg, transparent 0 29px, #d0d0d0 30px 64px, transparent 65px calc(100% - 64px), #d0d0d0 calc(100% - 63px) calc(100% - 30px), transparent calc(100% - 29px)) left 7px / 100% 9px no-repeat;
        /* 枠線を指定する */
        border: 0;
        /* 影を指定する */
        box-shadow: 0 3px 0 rgba(176, 176, 176, 0.5);
    }

    /* スマホ用の左紙ドット背景 */
    .itiran-body .gallary-sheet-left {
        /* 背景画像や模様を指定する */
        background-image: radial-gradient(circle, rgba(188, 188, 188, 0.62) 0 1.2px, transparent 1.6px);
        /* 背景の位置を指定する */
        background-position: 22px 22px;
        /* 背景の大きさを指定する */
        background-size: 32px 32px;
        /* 背景の繰り返しを指定する */
        background-repeat: repeat;
    }

    /* スマホ用の右紙ドット背景 */
    .itiran-body .gallary-sheet-right {
        /* 背景画像や模様を指定する */
        background-image: radial-gradient(circle, rgba(188, 188, 188, 0.62) 0 1.2px, transparent 1.6px);
        /* 背景の位置を指定する */
        background-position: 22px 22px;
        /* 背景の大きさを指定する */
        background-size: 32px 32px;
        /* 背景の繰り返しを指定する */
        background-repeat: repeat;
    }

    /* スマホ用の一覧写真枠 */
    .itiran-body .itiran-photo {
        /* 幅を指定する */
        width: 39%;
        /* 高さを指定する */
        height: 25.5%;
        /* 最小高さを指定する */
        min-height: 0;
        /* 枠線の太さを指定する */
        border-width: clamp(4px, 1vw, 6px);
        /* 角の丸みを指定する */
        border-radius: clamp(16px, 4vw, 24px);
    }

    /* スマホ用の一覧ラベル */
    .itiran-body .itiran-label {
        /* 文字サイズを指定する */
        font-size: clamp(17px, 4.1vw, 24px);
    }

    /* スマホ用の一覧ラベル1行ずつ */
    .itiran-body .itiran-label span {
        /* 幅を指定する */
        width: clamp(97px, 24vw, 146px);
        /* 高さを指定する */
        height: clamp(24px, 5.8vw, 35px);
        /* 最小高さを指定する */
        min-height: 0;
        /* 内側の余白を指定する */
        padding: 0 clamp(7px, 1.8vw, 11px);
        /* 角の丸みを指定する */
        border-radius: 8px;
    }

    /* スマホ用の一覧ラベル2行目 */
    .itiran-body .itiran-label span+span {
        /* 上側の余白を指定する */
        margin-top: 2px;
        /* 左側の余白を指定する */
        margin-left: clamp(16px, 4vw, 25px);
    }

    /* スマホ用の青ラベル */
    .itiran-body .itiran-label-blue {
        /* 文字サイズを指定する */
        font-size: clamp(16px, 3.9vw, 22px);
    }

    /* スマホ用の青ラベル行 */
    .itiran-body .itiran-label-blue span {
        /* 幅を指定する */
        width: clamp(123px, 30vw, 185px);
    }

    /* スマホ用の青ラベル2行目 */
    .itiran-body .itiran-label-blue span+span {
        /* 左側の余白を指定する */
        margin-left: clamp(14px, 3.5vw, 22px);
    }

    .itiran-body .itiran-photo-red {
        /* 上からの位置を指定する */
        top: 7.8%;
        /* 左からの位置を指定する */
        left: 8.5%;
    }

    .itiran-body .itiran-label-red {
        /* 上からの位置を指定する */
        top: 14.5%;
        /* 左からの位置を指定する */
        left: 56%;
    }

    .itiran-body .itiran-label-blue {
        /* 上からの位置を指定する */
        top: 38.5%;
        /* 左からの位置を指定する */
        left: 5.2%;
    }

    .itiran-body .itiran-photo-blue {
        /* 上からの位置を指定する */
        top: 40.5%;
        /* 左からの位置を指定する */
        left: 56%;
    }

    .itiran-body .itiran-photo-green {
        /* 上からの位置を指定する */
        top: 67.5%;
        /* 左からの位置を指定する */
        left: 8.5%;
    }

    .itiran-body .itiran-label-green {
        /* 上からの位置を指定する */
        top: 76.5%;
        /* 左からの位置を指定する */
        left: 56%;
    }

    .itiran-body .itiran-photo-lime {
        /* 上からの位置を指定する */
        top: 7.8%;
        /* 左からの位置を指定する */
        left: 8.5%;
    }

    .itiran-body .itiran-label-lime {
        /* 上からの位置を指定する */
        top: 14.5%;
        /* 左からの位置を指定する */
        left: 56%;
    }

    .itiran-body .itiran-label-navy {
        /* 上からの位置を指定する */
        top: 38.5%;
        /* 左からの位置を指定する */
        left: 10.5%;
    }

    .itiran-body .itiran-photo-navy {
        /* 上からの位置を指定する */
        top: 40.5%;
        /* 左からの位置を指定する */
        left: 56%;
    }

    .itiran-body .itiran-photo-brown {
        /* 上からの位置を指定する */
        top: 67.5%;
        /* 左からの位置を指定する */
        left: 8.5%;
    }

    .itiran-body .itiran-label-brown {
        /* 上からの位置を指定する */
        top: 76.5%;
        /* 左からの位置を指定する */
        left: 56%;
    }

    .itiran-body .gallary-sheet-left,
    .itiran-body .gallary-sheet-right {
        /* はみ出した部分の表示方法を指定する */
        overflow: visible;
    }

    .itiran-body .gallary-sheet-right .itiran-label-brown span {
        /* 幅を指定する */
        width: calc(var(--itiran-sheet-w) * 0.34);
    }
}

/* 結果ページ */
.kekka-body {
    /* 最小高さを指定する */
    min-height: 100vh;
    /* 外側の余白を指定する */
    margin: 0;
    /* はみ出した部分の表示方法を指定する */
    overflow: hidden;
    /* 見本に近い規則的な水玉背景を指定する */
    background-color: #ffffff;
    background-image:
        radial-gradient(circle, rgba(238, 158, 198, 0.92) 0 36px, transparent 37px),
        radial-gradient(circle, rgba(238, 158, 198, 0.92) 0 36px, transparent 37px);
    /* 水玉を互い違いに配置する */
    background-position: -18px -18px, 78px 78px;
    /* 水玉の間隔を指定する */
    background-size: 192px 192px, 192px 192px;
    /* 文字色を指定する */
    color: #000000;
    /* フォントの種類を指定する */
    font-family: "Arial", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* 結果ページの読み込み画面 */
.kekka-loading-screen {
    /* 配置方法を指定する */
    position: fixed;
    /* 上下左右の位置をまとめて指定する */
    inset: 0;
    /* 重なり順を指定する */
    z-index: 100;
    /* 表示方法を指定する */
    display: grid;
    /* 中身を縦横中央に配置する */
    place-items: center;
    /* 内側の余白を指定する */
    padding: 20px;
    /* 本体と同じ水玉背景を指定する */
    background-color: #ffffff;
    background-image:
        radial-gradient(circle, rgba(243, 154, 193, 0.84) 0 36px, transparent 37px),
        radial-gradient(circle, rgba(243, 154, 193, 0.84) 0 36px, transparent 37px);
    /* 水玉を互い違いに配置する */
    background-position: -18px -18px, 78px 78px;
    /* 水玉の間隔を指定する */
    background-size: 192px 192px, 192px 192px;
    /* 変化のなめらかさを指定する */
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

/* 読み込み画面を非表示にする状態 */
.kekka-loading-screen.is-hidden {
    /* 透明度を指定する */
    opacity: 0;
    /* 表示状態を指定する */
    visibility: hidden;
    /* クリック操作の受け取り方を指定する */
    pointer-events: none;
}

/* 読み込み中のカード */
.kekka-loading-card {
    /* 配置方法を指定する */
    position: relative;
    /* 重なり順を指定する */
    z-index: 1;
    /* 幅を指定する */
    width: 568px;
    /* 最小高さを指定する */
    min-height: 500px;
    /* 内側の余白を指定する */
    padding: 64px 82px 56px;
    /* 枠線を指定する */
    border: 3px solid #ffa5aa;
    /* 角の丸みを指定する */
    border-radius: 36px;
    /* 背景を指定する */
    background: rgba(255, 255, 255, 0.96);
    /* 文字色を指定する */
    color: #3c3c3c;
    /* 文字の揃え位置を指定する */
    text-align: center;
}

/* 読み込み中のイラストエリア */
.kekka-loading-visual {
    /* 幅を指定する */
    width: 306px;
    /* 高さを指定する */
    height: 214px;
    /* 外側の余白を指定する */
    margin: 0 auto 22px;
}

/* 読み込み中のバインダー */
.kekka-loading-binder {
    /* 配置方法を指定する */
    position: relative;
    /* 幅を指定する */
    width: 306px;
    /* 高さを指定する */
    height: 214px;
}

/* 読み込み中のページ共通 */
.kekka-loading-page {
    /* 配置方法を指定する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 20px;
    /* 幅を指定する */
    width: 148px;
    /* 高さを指定する */
    height: 148px;
    /* 背景を指定する */
    background: #ffffff;
    /* 枠線を指定する */
    border: 8px solid #d8d8d8;
    /* 影を指定する */
    box-shadow:
        inset 0 0 0 4px #ffffff,
        inset 0 0 0 6px #eeeeee,
        0 9px 0 #d4d4d4;
}

/* 読み込み中の左ページ */
.kekka-loading-page-left {
    /* 左からの位置を指定する */
    left: 2px;
    border-right-width: 4px;
    /* 角の丸みを指定する */
    border-radius: 14px 0 0 14px;
}

/* 読み込み中の右ページ */
.kekka-loading-page-right {
    /* 右からの位置を指定する */
    right: 2px;
    border-left-width: 4px;
    /* 角の丸みを指定する */
    border-radius: 0 14px 14px 0;
}

/* 読み込み中の背表紙 */
.kekka-loading-spine {
    /* 配置方法を指定する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 20px;
    /* 下からの位置を指定する */
    bottom: 46px;
    /* 左からの位置を指定する */
    left: 50%;
    /* 幅を指定する */
    width: 12px;
    /* 背景を指定する */
    background:
        linear-gradient(90deg, #d8d8d8 0 3px, #ffffff 4px 5px, #d8d8d8 6px 8px, #ffffff 9px 10px, #d8d8d8 11px 12px);
    /* 移動・回転・拡大縮小を指定する */
    transform: translateX(-50%);
}

/* 読み込み中のリング共通 */
.kekka-loading-ring {
    /* 配置方法を指定する */
    position: absolute;
    /* 左からの位置を指定する */
    left: 50%;
    /* 幅を指定する */
    width: 42px;
    /* 高さを指定する */
    height: 10px;
    /* 角の丸みを指定する */
    border-radius: 999px;
    /* 背景を指定する */
    background:
        linear-gradient(90deg, #4d4d4d 0 9px, #d8d8d8 10px 32px, #4d4d4d 33px 42px);
    /* 移動・回転・拡大縮小を指定する */
    transform: translateX(-50%);
}

/* 読み込み中の1つ目のリング */
.kekka-loading-ring.ring-1 {
    /* 上からの位置を指定する */
    top: 42px;
}

/* 読み込み中の2つ目のリング */
.kekka-loading-ring.ring-2 {
    /* 上からの位置を指定する */
    top: 75px;
}

/* 読み込み中の3つ目のリング */
.kekka-loading-ring.ring-3 {
    /* 上からの位置を指定する */
    top: 108px;
}

/* 読み込み中の4つ目のリング */
.kekka-loading-ring.ring-4 {
    /* 上からの位置を指定する */
    top: 141px;
}

/* 読み込み中の5つ目のリング */
.kekka-loading-ring.ring-5 {
    /* 表示方法を指定する */
    display: none;
}

/* 読み込み中のタイトル */
.kekka-loading-title {
    /* 外側の余白を指定する */
    margin: 0 auto 18px;
    /* 文字色を指定する */
    color: #3c3c3c;
    /* 文字サイズを指定する */
    font-size: 32px;
    /* 文字の太さを指定する */
    font-weight: 900;
    /* 行の高さを指定する */
    line-height: 1.2;
}

/* 読み込みバーの外枠 */
.kekka-loading-track {
    /* 幅を指定する */
    width: 398px;
    /* 高さを指定する */
    height: 26px;
    /* 外側の余白を指定する */
    margin: 0 auto;
    /* はみ出した部分の表示方法を指定する */
    overflow: hidden;
    /* 角の丸みを指定する */
    border-radius: 999px;
    /* 背景を指定する */
    background: #f3f3f3;
}

/* 読み込みバー */
.kekka-loading-bar {
    /* 幅を指定する */
    width: 0;
    /* 高さを指定する */
    height: 100%;
    /* 角の丸みを指定する */
    border-radius: inherit;
    /* 背景を指定する */
    background: linear-gradient(90deg, #ffa1a8 0%, #c8dfff 100%);
}

/* 読み込みパーセント表示 */
.kekka-loading-percent {
    /* 外側の余白を指定する */
    margin: 22px 0 0;
    /* 文字色を指定する */
    color: #3c3c3c;
    /* 文字サイズを指定する */
    font-size: 24px;
    /* 文字の太さを指定する */
    font-weight: 900;
    /* 行の高さを指定する */
    line-height: 1.2;
}

/* スマホ用の結果読み込み画面 */
@media (max-width: 600px) {

    /* スマホ用の読み込み画面全体 */
    .kekka-loading-screen {
        /* 上下左右の位置をまとめて指定する */
        inset: 0 !important;
        /* 幅を指定する */
        width: 100vw !important;
        /* 高さを指定する */
        height: 100vh !important;
        /* 高さを指定する */
        height: 100dvh !important;
        /* 最小幅を指定する */
        min-width: 0;
        /* 最小高さを指定する */
        min-height: 0;
        /* 表示方法を指定する */
        display: block !important;
        /* 内側の余白を指定する */
        padding: 0;
        /* はみ出した部分の表示方法を指定する */
        overflow: hidden;
        /* 背景色を指定する */
        background-color: #ffffff;
        /* 背景画像や模様を指定する */
        background-image:
            radial-gradient(circle, rgba(243, 154, 193, 0.84) 0 32px, transparent 33px),
            radial-gradient(circle, rgba(243, 154, 193, 0.84) 0 32px, transparent 33px);
        /* 背景の位置を指定する */
        background-position: 38px 8px, -52px 112px;
        /* 背景の大きさを指定する */
        background-size: 180px 210px, 180px 210px;
    }

    /* スマホ用の読み込みカード */
    .kekka-loading-card {
        /* 表示方法を指定する */
        display: block !important;
        /* 配置方法を指定する */
        position: fixed !important;
        /* 上からの位置を指定する */
        top: 50dvh !important;
        /* 左からの位置を指定する */
        left: 50vw !important;
        /* 重なり順を指定する */
        z-index: 101 !important;
        /* 移動・回転・拡大縮小を指定する */
        transform: translate(-50%, -50%) !important;
        /* 幅を指定する */
        width: min(calc(100vw - 48px), 292px);
        /* 最小高さを指定する */
        min-height: 262px;
        /* 内側の余白を指定する */
        padding: 34px 36px 24px;
        /* 枠線の太さを指定する */
        border-width: 3px;
        /* 角の丸みを指定する */
        border-radius: 32px;
    }

    /* スマホ用の読み込みイラストエリア */
    .kekka-loading-visual {
        /* 幅を指定する */
        width: 164px;
        /* 高さを指定する */
        height: 116px;
        /* 外側の余白を指定する */
        margin: 0 auto 8px;
    }

    /* スマホ用の読み込みバインダー */
    .kekka-loading-binder {
        /* 幅を指定する */
        width: 164px;
        /* 高さを指定する */
        height: 116px;
    }

    /* スマホ用の読み込みページ */
    .kekka-loading-page {
        /* 上からの位置を指定する */
        top: 8px;
        /* 幅を指定する */
        width: 82px;
        /* 高さを指定する */
        height: 84px;
        /* 枠線の太さを指定する */
        border-width: 6px;
        /* 影を指定する */
        box-shadow:
            inset 0 0 0 3px #ffffff,
            inset 0 0 0 5px #eeeeee,
            0 5px 0 #d4d4d4;
    }

    /* スマホ用の読み込み左ページ */
    .kekka-loading-page-left {
        /* 左からの位置を指定する */
        left: 0;
        border-right-width: 3px;
        /* 角の丸みを指定する */
        border-radius: 10px 0 0 10px;
    }

    /* スマホ用の読み込み右ページ */
    .kekka-loading-page-right {
        /* 右からの位置を指定する */
        right: 0;
        border-left-width: 3px;
        /* 角の丸みを指定する */
        border-radius: 0 10px 10px 0;
    }

    /* スマホ用の読み込み背表紙 */
    .kekka-loading-spine {
        /* 上からの位置を指定する */
        top: 8px;
        /* 下からの位置を指定する */
        bottom: 24px;
        /* 幅を指定する */
        width: 10px;
        /* 背景を指定する */
        background:
            linear-gradient(90deg, #d8d8d8 0 2px, #ffffff 3px 4px, #d8d8d8 5px 6px, #ffffff 7px 8px, #d8d8d8 9px 10px);
    }

    /* スマホ用の読み込みリング */
    .kekka-loading-ring {
        /* 幅を指定する */
        width: 24px;
        /* 高さを指定する */
        height: 5px;
        /* 背景を指定する */
        background:
            linear-gradient(90deg, #4d4d4d 0 5px, #d8d8d8 6px 18px, #4d4d4d 19px 24px);
    }

    /* スマホ用の読み込み1つ目のリング */
    .kekka-loading-ring.ring-1 {
        /* 上からの位置を指定する */
        top: 22px;
    }

    /* スマホ用の読み込み2つ目のリング */
    .kekka-loading-ring.ring-2 {
        /* 上からの位置を指定する */
        top: 40px;
    }

    /* スマホ用の読み込み3つ目のリング */
    .kekka-loading-ring.ring-3 {
        /* 上からの位置を指定する */
        top: 58px;
    }

    /* スマホ用の読み込み4つ目のリング */
    .kekka-loading-ring.ring-4 {
        /* 上からの位置を指定する */
        top: 76px;
    }

    /* スマホ用の読み込みタイトル */
    .kekka-loading-title {
        /* 下側の余白を指定する */
        margin-bottom: 12px;
        /* 文字サイズを指定する */
        font-size: 24px;
    }

    /* スマホ用の読み込みバー外枠 */
    .kekka-loading-track {
        /* 幅を指定する */
        width: 212px;
        /* 高さを指定する */
        height: 15px;
    }

    /* スマホ用の読み込みパーセント表示 */
    .kekka-loading-percent {
        /* 上側の余白を指定する */
        margin-top: 16px;
        /* 文字サイズを指定する */
        font-size: 11px;
    }
}

/* 結果ページ全体 */
.kekka-page {
    /* 配置方法を指定する */
    position: relative;
    /* 幅を指定する */
    width: 1920px;
    /* 高さを指定する */
    height: 1080px;
    /* 変形の基準点を指定する */
    transform-origin: top left;
}

/* 結果ページのバインダー */
.kekka-binder {
    /* 配置方法を指定する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 0;
    /* 左からの位置を指定する */
    left: 50%;
    /* 幅を指定する */
    width: 1690px;
    /* 高さを指定する */
    height: 1080px;
    /* 移動・回転・拡大縮小を指定する */
    transform: translateX(-50%);
    /* 内側の余白を指定する */
    padding: 60px 128px 54px;
    /* 背景を指定する */
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.28) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px),
        linear-gradient(100deg, #ff2525 0%, #ff4a2e 46%, #ff9b2e 100%);
    /* 背景の大きさを指定する */
    background-size: 9px 9px, 17px 17px, 100% 100%;
    /* 枠線を指定する */
    border: 10px solid #d7d7d7;
    /* 影を指定する */
    box-shadow: 0 0 0 1px #ececec inset;
}

/* 結果ページの白い紙面 */
.kekka-binder::before {
    /* 疑似要素に表示する内容を指定する */
    content: "";
    /* 配置方法を指定する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 58px;
    /* 下からの位置を指定する */
    bottom: 42px;
    /* 左からの位置を指定する */
    left: 128px;
    /* 幅を指定する */
    width: 1434px;
    /* 重なり順を指定する */
    z-index: 1;
    /* 背景を指定する */
    background: #ffffff;
    /* クリック操作の受け取り方を指定する */
    pointer-events: none;
}

/* 結果ページ中央の線 */
.kekka-binder::after {
    /* 疑似要素に表示する内容を指定する */
    content: "";
    /* 配置方法を指定する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 94px;
    /* 下からの位置を指定する */
    bottom: 94px;
    /* 左からの位置を指定する */
    left: 0;
    /* 右からの位置を指定する */
    right: 0;
    /* 重なり順を指定する */
    z-index: 4;
    /* 背景を指定する */
    background:
        linear-gradient(#e2e2e2, #e2e2e2) 808px 0 / 2px 100% no-repeat,
        linear-gradient(#e2e2e2, #e2e2e2) 880px 0 / 2px 100% no-repeat;
    /* 透明度を指定する */
    opacity: 0.45;
    /* クリック操作の受け取り方を指定する */
    pointer-events: none;
}

/* タイプAのバインダー背景 */
.kekka-type-a .kekka-binder {
    /* 背景を指定する */
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.28) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px),
        linear-gradient(100deg, #ff2525 0%, #ff4a2e 46%, #ff9b2e 100%);
    /* 背景の大きさを指定する */
    background-size: 9px 9px, 17px 17px, 100% 100%;
}

/* タイプBのバインダー背景 */
.kekka-type-b .kekka-binder {
    /* 背景を指定する */
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.3) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px),
        linear-gradient(100deg, #3449f4 0%, #268ff4 48%, #20ead5 100%);
    /* 背景の大きさを指定する */
    background-size: 9px 9px, 17px 17px, 100% 100%;
}

/* タイプCのバインダー背景 */
.kekka-type-c .kekka-binder {
    /* 背景を指定する */
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.3) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px),
        linear-gradient(100deg, #24f326 0%, #20e56e 48%, #25e6d2 100%);
    /* 背景の大きさを指定する */
    background-size: 9px 9px, 17px 17px, 100% 100%;
}

/* タイプDのバインダー背景 */
.kekka-type-d .kekka-binder {
    /* 背景を指定する */
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.3) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px),
        linear-gradient(100deg, #25f329 0%, #8fe31f 50%, #ffd51f 100%);
    /* 背景の大きさを指定する */
    background-size: 9px 9px, 17px 17px, 100% 100%;
}

/* タイプEのバインダー背景 */
.kekka-type-e .kekka-binder {
    /* 背景を指定する */
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.18) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(255, 255, 255, 0.12) 0 2px, transparent 3px),
        linear-gradient(100deg, #03006c 0%, #171069 48%, #54106d 100%);
    /* 背景の大きさを指定する */
    background-size: 9px 9px, 17px 17px, 100% 100%;
}

/* タイプFのバインダー背景 */
.kekka-type-f .kekka-binder {
    /* 背景を指定する */
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.44) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(255, 255, 255, 0.26) 0 2px, transparent 3px),
        linear-gradient(100deg, #f2f0eb 0%, #c8bdae 50%, #94775f 100%);
    /* 背景の大きさを指定する */
    background-size: 9px 9px, 17px 17px, 100% 100%;
}

/* 結果ページ上部タブ */
.kekka-top-tabs {
    /* 表示方法を指定する */
    display: none;
}

/* 結果ページ上部タブ1つずつ */
.kekka-top-tabs span {
    /* 表示方法を指定する */
    display: block;
    /* 高さを指定する */
    height: 42px;
    /* 背景を指定する */
    background: #ffffff;
    /* 左側の枠線を指定する */
    border-left: 5px solid #d0d0d0;
    /* 右側の枠線を指定する */
    border-right: 5px solid #d0d0d0;
}

/* 左右の上部タブ */
.kekka-top-tabs span:nth-child(1),
.kekka-top-tabs span:nth-child(3) {
    /* 幅を指定する */
    width: 70px;
}

/* 中央の上部タブ */
.kekka-top-tabs span:nth-child(2) {
    /* 幅を指定する */
    width: 72px;
    /* 背景を指定する */
    background: #d3d3d3;
}

/* 結果ページの背表紙 */
.kekka-spine {
    /* 配置方法を指定する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 76px;
    /* 下からの位置を指定する */
    bottom: 76px;
    /* 左からの位置を指定する */
    left: 812px;
    /* 幅を指定する */
    width: 66px;
    /* 重なり順を指定する */
    z-index: 3;
    /* 背景を指定する */
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.78) 0 11px,
            rgba(218, 218, 218, 0.62) 11px 17px,
            rgba(180, 180, 180, 0.62) 17px 49px,
            rgba(218, 218, 218, 0.62) 49px 55px,
            rgba(255, 255, 255, 0.78) 55px 66px);
    /* 影を指定する */
    box-shadow:
        inset 8px 0 0 rgba(255, 255, 255, 0.56),
        inset -8px 0 0 rgba(255, 255, 255, 0.56);
    /* クリック操作の受け取り方を指定する */
    pointer-events: none;
}

/* 結果ページの紙面共通 */
.kekka-sheet {
    /* 配置方法を指定する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 60px;
    /* 下からの位置を指定する */
    bottom: 54px;
    /* 背景を指定する */
    background: #ffffff;
    /* 枠線を指定する */
    border: 4px solid #a8a8a8;
    /* 重なり順を指定する */
    z-index: 2;
    /* 影を指定する */
    box-shadow:
        0 0 0 4px #ffffff inset,
        4px 5px 0 rgba(182, 182, 182, 0.45),
        8px 9px 0 rgba(182, 182, 182, 0.22),
        0 16px 20px rgba(0, 0, 0, 0.07);
}

/* 結果ページ紙面の下側の重なり */
.kekka-sheet::before {
    /* 疑似要素に表示する内容を指定する */
    content: "";
    /* 配置方法を指定する */
    position: absolute;
    /* 左からの位置を指定する */
    left: 0;
    /* 右からの位置を指定する */
    right: 0;
    /* 下からの位置を指定する */
    bottom: -10px;
    /* 高さを指定する */
    height: 10px;
    /* 背景を指定する */
    background:
        linear-gradient(#a9a9a9, #a9a9a9) 0 0 / 100% 2px no-repeat,
        linear-gradient(#ffffff, #ffffff) 0 2px / 100% 3px no-repeat,
        linear-gradient(#d3d3d3, #d3d3d3) 0 5px / 100% 1px no-repeat,
        linear-gradient(#f8f8f8, #f8f8f8) 0 6px / 100% 3px no-repeat,
        linear-gradient(#e3e3e3, #e3e3e3) 0 9px / 100% 1px no-repeat,
        #ffffff;
    /* 角の丸みを指定する */
    border-radius: 0 0 2px 2px;
    /* 影を指定する */
    box-shadow:
        3px 3px 0 rgba(176, 176, 176, 0.36),
        6px 6px 0 rgba(176, 176, 176, 0.16);
    /* クリック操作の受け取り方を指定する */
    pointer-events: none;
}

/* 結果ページ紙面の横側の重なり */
.kekka-sheet::after {
    /* 疑似要素に表示する内容を指定する */
    content: "";
    /* 配置方法を指定する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 0;
    /* 下からの位置を指定する */
    bottom: 0;
    /* 幅を指定する */
    width: 14px;
    /* 背景を指定する */
    background:
        linear-gradient(90deg,
            #ffffff 0 4px,
            #d0d0d0 4px 6px,
            #ffffff 6px 10px,
            #eeeeee 10px 12px,
            #ffffff 12px 14px);
    /* 上側の枠線を指定する */
    border-top: 0;
    /* 下側の枠線を指定する */
    border-bottom: 0;
    /* クリック操作の受け取り方を指定する */
    pointer-events: none;
}

/* 結果ページの左紙面 */
.kekka-sheet-left {
    /* 左からの位置を指定する */
    left: 128px;
    /* 幅を指定する */
    width: 704px;
    /* 背景を指定する */
    background: #ffffff;
}

/* 左紙面の横側の重なり */
.kekka-sheet-left::after {
    /* 左からの位置を指定する */
    left: -12px;
    /* 影を指定する */
    box-shadow: -3px 3px 0 rgba(168, 168, 168, 0.28);
}

/* 結果ページの右紙面 */
.kekka-sheet-right {
    /* 左からの位置を指定する */
    left: 858px;
    /* 幅を指定する */
    width: 704px;
    /* 背景を指定する */
    background: #ffffff;
}

/* 右紙面の横側の重なり */
.kekka-sheet-right::after {
    /* 右からの位置を指定する */
    right: -12px;
    /* 影を指定する */
    box-shadow: 3px 3px 0 rgba(168, 168, 168, 0.28);
}

/* 診断結果のスタンプ */
.kekka-stamp {
    /* 配置方法を指定する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 36px;
    /* 左からの位置を指定する */
    left: 36px;
    /* 幅を指定する */
    width: 140px;
    /* 高さを指定する */
    height: 140px;
    /* 表示方法を指定する */
    display: grid;
    /* 中身を縦横中央に配置する */
    place-items: center;
    /* 背景を指定する */
    background: #f4b6b3;
    /* 文字色を指定する */
    color: #ffffff;
    /* 文字サイズを指定する */
    font-size: 48px;
    /* 文字の太さを指定する */
    font-weight: 900;
    /* 行の高さを指定する */
    line-height: 1.15;
    /* 文字の揃え位置を指定する */
    text-align: center;
}

/* タイプBのスタンプ色 */
.kekka-type-b .kekka-stamp {
    /* 背景を指定する */
    background: #bbaaf4;
}

/* タイプCのスタンプ色 */
.kekka-type-c .kekka-stamp {
    /* 背景を指定する */
    background: #aef0bc;
}

/* タイプDのスタンプ色 */
.kekka-type-d .kekka-stamp {
    /* 背景を指定する */
    background: #f2ff9b;
    /* 文字色を指定する */
    color: #ffffff;
    /* 文字に影を付ける */
    text-shadow:
        -1px -1px 0 #000000,
        1px -1px 0 #000000,
        -1px 1px 0 #000000,
        1px 1px 0 #000000,
        0 2px 0 #000000;
}

/* タイプEのスタンプ色 */
.kekka-type-e .kekka-stamp {
    /* 背景を指定する */
    background: #e7b2f4;
    /* 文字色を指定する */
    color: #ffffff;
    /* 文字に影を付ける */
    text-shadow: none;
}

/* タイプFのスタンプ色 */
.kekka-type-f .kekka-stamp {
    /* 背景を指定する */
    background: #ffe8a8;
    /* 文字色を指定する */
    color: #ffffff;
    /* 文字に影を付ける */
    text-shadow:
        -1px -1px 0 #000000,
        1px -1px 0 #000000,
        -1px 1px 0 #000000,
        1px 1px 0 #000000,
        0 2px 0 #000000;
}

/* 診断結果のイラストエリア */
.kekka-illustration {
    /* 配置方法を指定する */
    position: absolute;
    /* 左からの位置を指定する */
    left: 100px;
    /* 右からの位置を指定する */
    right: 112px;
    /* 上からの位置を指定する */
    top: 214px;
    /* 下からの位置を指定する */
    bottom: 54px;
    /* 表示方法を指定する */
    display: grid;
    /* 中身を縦横中央に配置する */
    place-items: center;
    /* 背景を指定する */
    background: #ffffff;
    /* 文字サイズを指定する */
    font-size: 58px;
    /* 文字の太さを指定する */
    font-weight: 900;
}

.kekka-illustration img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 診断結果のタイプ名 */
.kekka-type-name {
    /* 幅を指定する */
    width: 514px;
    /* 最小高さを指定する */
    min-height: 90px;
    /* 外側の余白を指定する */
    margin: 106px auto 0;
    /* 表示方法を指定する */
    display: grid;
    /* 中身を縦横中央に配置する */
    place-items: center;
    /* 背景を指定する */
    background: #d8d8d8;
    /* 文字サイズを指定する */
    font-size: 40px;
    /* 文字の太さを指定する */
    font-weight: 500;
}

/* 診断結果の説明エリア */
.kekka-description {
    /* 幅を指定する */
    width: 514px;
    /* 高さを指定する */
    height: 350px;
    /* 外側の余白を指定する */
    margin: 122px auto 0;
    /* 表示方法を指定する */
    display: grid;
    /* 中身を縦横中央に配置する */
    place-items: center;
    /* 背景を指定する */
    background: #d8d8d8;
    /* 文字サイズを指定する */
    font-size: 38px;
    /* 文字の太さを指定する */
    font-weight: 500;
}

/* タイトルへ戻るボタン */
.kekka-back-button {
    /* 配置方法を指定する */
    position: absolute;
    /* 右からの位置を指定する */
    right: 34px;
    /* 下からの位置を指定する */
    bottom: 30px;
    /* 幅を指定する */
    width: 100px;
    /* 高さを指定する */
    height: 100px;
    /* 表示方法を指定する */
    display: grid;
    /* 中身を縦横中央に配置する */
    place-items: center;
    /* 背景を指定する */
    background: #d8d8d8;
    /* 文字色を指定する */
    color: #000000;
    /* 文字装飾を指定する */
    text-decoration: none;
    /* 文字の揃え位置を指定する */
    text-align: center;
    /* 文字サイズを指定する */
    font-size: 26px;
    /* 文字の太さを指定する */
    font-weight: 900;
    /* 行の高さを指定する */
    line-height: 1.1;
}

.kekka-type-a .kekka-type-name,
.kekka-type-b .kekka-type-name,
.kekka-type-c .kekka-type-name,
.kekka-type-d .kekka-type-name,
.kekka-type-e .kekka-type-name,
.kekka-type-f .kekka-type-name {
    width: 514px;
    min-height: 86px;
    background: #ffffff;
    border: 5px solid #d8d8d8;
    border-radius: 18px;
    font-size: 34px;
    font-weight: 500;
    letter-spacing: 0.18em;
}

.kekka-type-a .kekka-description,
.kekka-type-b .kekka-description,
.kekka-type-c .kekka-description,
.kekka-type-d .kekka-description,
.kekka-type-e .kekka-description,
.kekka-type-f .kekka-description {
    display: block;
    height: auto;
    min-height: 344px;
    padding: 46px 48px;
    background: #ffffff;
    border: 5px solid #d8d8d8;
    border-radius: 30px;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.62;
    letter-spacing: 0;
    white-space: pre-line;
}

.kekka-type-a .kekka-back-button,
.kekka-type-b .kekka-back-button,
.kekka-type-c .kekka-back-button,
.kekka-type-d .kekka-back-button,
.kekka-type-e .kekka-back-button,
.kekka-type-f .kekka-back-button {
    background: #ffffff;
    border: 5px solid #d8d8d8;
    border-radius: 18px;
    font-size: 20px;
    font-weight: 700;
}

/* 結果ページのリングエリア */
.kekka-rings {
    /* 配置方法を指定する */
    position: absolute;
    /* 上からの位置を指定する */
    top: 122px;
    /* 下からの位置を指定する */
    bottom: 122px;
    /* 左からの位置を指定する */
    left: 774px;
    /* 重なり順を指定する */
    z-index: 5;
    /* 表示方法を指定する */
    display: flex;
    /* 並びの方向を指定する */
    flex-direction: column;
    /* 中身全体の横方向の配置を指定する */
    justify-content: space-between;
    /* クリック操作の受け取り方を指定する */
    pointer-events: none;
}

/* 結果ページのリング1つずつ */
.kekka-rings span {
    /* 表示方法を指定する */
    display: block;
    /* 幅を指定する */
    width: 142px;
    /* 高さを指定する */
    height: 29px;
    /* 角の丸みを指定する */
    border-radius: 999px;
    /* 背景を指定する */
    background:
        radial-gradient(ellipse at 17px 50%, #ffffff 0 8px, transparent 9px),
        radial-gradient(ellipse at 125px 50%, #ffffff 0 8px, transparent 9px),
        linear-gradient(90deg,
            #000000 0 13%,
            rgba(242, 242, 242, 0.94) 13% 45%,
            rgba(255, 255, 255, 0.96) 45% 58%,
            rgba(216, 216, 216, 0.94) 58% 87%,
            #000000 87% 100%);
    /* 影を指定する */
    box-shadow:
        4px 3px 0 rgba(165, 165, 165, 0.28),
        inset 0 -2px 0 rgba(0, 0, 0, 0.06);
}

/* タブレット用の共通調整 */
@media (max-width: 900px) {
    .home-body {
        /* 最小幅を指定する */
        min-width: 0;
        /* 横方向にはみ出した部分の表示方法を指定する */
        overflow-x: hidden;
        /* 背景の大きさを指定する */
        background-size: 104px 104px, 100% 100%;
        /* 背景の位置を指定する */
        background-position: -26px -26px, 0 0;
    }

    .home-page,
    .question-page {
        /* グリッドの列を指定する */
        grid-template-columns: 1fr;
        /* 最小高さを指定する */
        min-height: auto;
    }

    .home-side {
        /* 最小高さを指定する */
        min-height: auto;
    }

    .home-left {
        /* 内側の余白を指定する */
        padding: 58px 18px 30px;
    }

    .home-logo {
        /* 幅を指定する */
        width: min(100%, 390px);
        /* 最大幅を指定する */
        max-width: 86%;
    }

    .home-center {
        /* 最小高さを指定する */
        min-height: auto;
        /* 内側の余白を指定する */
        padding: 36px 18px 28px;
    }

    .home-pin {
        /* 下側の余白を指定する */
        margin-bottom: 34px;
    }

    .home-card {
        /* 幅を指定する */
        width: min(100%, 731px);
        /* 最小高さを指定する */
        min-height: auto;
        /* 内側の余白を指定する */
        padding: 34px 24px 40px;
    }

    .home-image,
    .home-start-button,
    .home-message,
    .memory-book {
        /* 幅を指定する */
        width: min(100%, 612px);
    }

    .home-image {
        /* 高さを指定する */
        height: 240px;
    }

    .home-start-button {
        /* 文字サイズを指定する */
        font-size: 24px;
    }

    .home-message {
        /* 内側の余白を指定する */
        padding: 26px 24px;
    }

    .home-message h1 {
        /* 文字サイズを指定する */
        font-size: 26px;
    }

    .memory-book {
        /* 最小高さを指定する */
        min-height: auto;
        /* 内側の余白を指定する */
        padding: 38px 24px;
        /* 移動・回転・拡大縮小を指定する */
        transform: rotate(2deg);
    }

    .memory-grid {
        /* グリッドの列を指定する */
        grid-template-columns: 1fr;
    }

    .photo-large,
    .photo-card:not(.photo-large) {
        /* グリッド上の横幅を指定する */
        grid-column: auto;
    }

    .memory-rings {
        /* 表示方法を指定する */
        display: none;
    }

    .home-right {
        /* 表示方法を指定する */
        display: none;
    }

    .question-book {
        /* グリッド上の横幅を指定する */
        grid-column: auto;
        /* 内側の余白を指定する */
        padding: 32px 24px 32px 86px;
        /* 角の丸みを指定する */
        border-radius: 0;
    }

    .question-book::before {
        /* 左からの位置を指定する */
        left: 48px;
        /* 幅を指定する */
        width: 32px;
    }

    .book-holes {
        /* 上からの位置を指定する */
        top: 64px;
        /* 下からの位置を指定する */
        bottom: 64px;
    }

    .book-holes span {
        /* 幅を指定する */
        width: 110px;
        /* 高さを指定する */
        height: 24px;
    }

    .book-holes span::before,
    .book-holes span::after {
        /* 幅を指定する */
        width: 24px;
        /* 高さを指定する */
        height: 24px;
    }

    .question-paper {
        /* 最小高さを指定する */
        min-height: auto;
        /* 内側の余白を指定する */
        padding: 48px 28px;
        /* 要素同士の間隔を指定する */
        gap: 32px;
    }

    .question-title {
        /* 文字サイズを指定する */
        font-size: 36px;
    }

    .question-image,
    .question-text-area {
        /* 文字サイズを指定する */
        font-size: 26px;
    }

    .answer-panel {
        /* グリッド上の横幅を指定する */
        grid-column: auto;
        /* 内側の余白を指定する */
        padding: 48px 28px;
    }

    .answer-card {
        /* 要素同士の間隔を指定する */
        gap: 28px;
        /* 最小高さを指定する */
        min-height: auto;
        /* 内側の余白を指定する */
        padding: 40px 24px;
    }

    .answer-button {
        /* 文字サイズを指定する */
        font-size: 32px;
    }
}

/* スマホ用のホーム画面 */
@media (max-width: 600px) {
    .home-body {
        /* 背景画像や模様を指定する */
        background-image:
            radial-gradient(circle, rgba(243, 154, 193, 0.84) 0 15px, transparent 16px),
            radial-gradient(circle, rgba(243, 154, 193, 0.84) 0 15px, transparent 16px);
        /* 背景の位置を指定する */
        background-position: -14px -14px, 37px 37px;
        /* 背景の大きさを指定する */
        background-size: 102px 102px, 102px 102px;
    }

    .home-reset-button {
        /* 上からの位置を指定する */
        top: 10px;
        /* 左からの位置を指定する */
        left: 10px;
        /* 右からの位置を指定する */
        right: auto;
        /* 幅を指定する */
        width: 82px;
        /* 最小幅を指定する */
        min-width: 0;
        /* 最小高さを指定する */
        min-height: 34px;
        /* 内側の余白を指定する */
        padding: 6px 10px;
        /* 枠線の太さを指定する */
        border-width: 2px;
        /* 角の丸みを指定する */
        border-radius: 6px;
        /* 影を指定する */
        box-shadow: 3px 3px 0 rgba(176, 176, 176, 0.38);
        /* 文字サイズを指定する */
        font-size: 12px;
    }

    .home-page {
        /* 表示方法を指定する */
        display: block;
        /* 最小高さを指定する */
        min-height: auto;
    }

    .home-left {
        /* 内側の余白を指定する */
        padding: 36px 16px 20px;
    }

    .home-logo {
        /* 幅を指定する */
        width: min(92vw, 330px);
        /* 最大幅を指定する */
        max-width: 86%;
    }

    .home-center {
        /* 表示方法を指定する */
        display: block;
        /* 最小高さを指定する */
        min-height: auto;
        /* 内側の余白を指定する */
        padding: 28px 14px 24px;
    }

    .home-center::before {
        /* 上下左右の位置をまとめて指定する */
        inset: 0 10px;
        /* 移動・回転・拡大縮小を指定する */
        transform: none;
    }

    .home-center>* {
        /* 移動・回転・拡大縮小を指定する */
        transform: none;
    }

    .home-pin {
        /* 外側の余白を指定する */
        margin: 0 auto 28px;
        /* 幅を指定する */
        width: 30px;
        /* 高さを指定する */
        height: 30px;
    }

    .home-card {
        /* 表示方法を指定する */
        display: flex;
        /* 並びの方向を指定する */
        flex-direction: column;
        /* 幅を指定する */
        width: min(100%, 360px);
        /* 最小高さを指定する */
        min-height: auto;
        /* 外側の余白を指定する */
        margin: 0 auto;
        /* 内側の余白を指定する */
        padding: 28px 18px 32px;
        /* 角の丸みを指定する */
        border-radius: 8px;
    }

    .home-image {
        /* 表示順を指定する */
        order: 1;
        /* 幅を指定する */
        width: min(100%, 280px);
        /* 高さを指定する */
        height: 210px;
        /* 下側の余白を指定する */
        margin-bottom: 40px;
        /* 枠線の太さを指定する */
        border-width: 4px;
    }

    .home-start-button {
        /* 表示順を指定する */
        order: 2;
        /* 幅を指定する */
        width: min(100%, 280px);
        /* 下側の余白を指定する */
        margin-bottom: 40px;
        /* 内側の余白を指定する */
        padding: 16px 18px;
        /* 枠線の太さを指定する */
        border-width: 3px;
        /* 文字サイズを指定する */
        font-size: 22px;
    }

    .home-message {
        /* 表示順を指定する */
        order: 3;
        /* 幅を指定する */
        width: min(100%, 300px);
        /* 下側の余白を指定する */
        margin-bottom: 22px;
        /* 内側の余白を指定する */
        padding: 24px 18px;
    }

    .home-message h1 {
        /* 文字サイズを指定する */
        font-size: 24px;
    }

    .home-message p {
        /* 文字サイズを指定する */
        font-size: 13px;
        /* 行の高さを指定する */
        line-height: 1.72;
    }

    .memory-book {
        /* 表示順を指定する */
        order: 5;
        /* 幅を指定する */
        width: min(82vw, 292px);
        /* 外側の余白を指定する */
        margin: 30px auto 0;
        /* 内側の余白を指定する */
        padding: 22px 18px 22px;
        /* 高さを指定する */
        height: auto;
        /* 最小高さを指定する */
        min-height: 0;
        /* 背景を指定する */
        background: #fff;
        /* 枠線の太さを指定する */
        border-width: 5px;
        /* はみ出した部分の表示方法を指定する */
        overflow: visible;
        /* 影を指定する */
        box-shadow:
            6px 6px 0 #bfbfbf,
            10px 10px 0 rgba(170, 170, 170, 0.22);
        /* 移動・回転・拡大縮小を指定する */
        transform: rotate(3deg);
    }

    .memory-book::before {
        /* 上下左右の位置をまとめて指定する */
        inset: 12px;
        /* 枠線の太さを指定する */
        border-width: 2px;
        /* 枠線の色を指定する */
        border-color: #a7a7a7;
    }

    .memory-book::after {
        /* 上下左右の位置をまとめて指定する */
        inset: 18px;
        /* 枠線の太さを指定する */
        border-width: 1px;
        /* 枠線の色を指定する */
        border-color: #d3d3d3;
    }

    .memory-grid {
        /* 配置方法を指定する */
        position: relative;
        /* 重なり順を指定する */
        z-index: 1;
        /* 表示方法を指定する */
        display: grid;
        /* グリッドの列を指定する */
        grid-template-columns: repeat(6, 1fr);
        /* グリッドの行を指定する */
        grid-template-rows: 128px 46px 136px;
        /* 要素同士の間隔を指定する */
        gap: 0 8px;
        /* 中身を縦方向に揃える */
        align-items: stretch;
        /* 高さを指定する */
        height: auto;
        /* はみ出した部分の表示方法を指定する */
        overflow: visible;
    }

    .photo-card {
        /* 幅と高さの計算方法を指定する */
        box-sizing: border-box;
        /* 最小幅を指定する */
        min-width: 0;
        /* 最小高さを指定する */
        min-height: 0;
        /* 内側の余白を指定する */
        padding: 8px;
        /* 枠線を指定する */
        border: 2px solid #d8d8d8;
        /* 背景を指定する */
        background: #fff;
        /* 表示方法を指定する */
        display: flex;
        /* 並びの方向を指定する */
        flex-direction: column;
        /* はみ出した部分の表示方法を指定する */
        overflow: hidden;
    }

    .photo-large {
        /* グリッド上の横幅を指定する */
        grid-column: span 3;
        /* グリッド上の行位置を指定する */
        grid-row: 1;
        /* 高さを指定する */
        height: 128px;
    }

    .photo-card:not(.photo-large) {
        /* グリッド上の横幅を指定する */
        grid-column: span 2;
        /* グリッド上の行位置を指定する */
        grid-row: 3;
        /* 高さを指定する */
        height: 136px;
        /* 最小高さを指定する */
        min-height: 0;
        padding-bottom: 8px;
    }

    .photo-placeholder,
    .photo-large .photo-placeholder {
        /* 高さを指定する */
        height: 72px;
        /* 背景を指定する */
        background: #d8d8d8;
        /* フレックス内での伸び方を指定する */
        flex: 0 0 auto;
    }

    .photo-card:not(.photo-large) .photo-placeholder {
        /* 高さを指定する */
        height: 78px;
    }

    .photo-logo-frame img {
        /* スマホ版ではロゴを少し大きめに見せる */
        width: 82%;
        height: 82%;
    }

    .photo-card h2 {
        /* 外側の余白を指定する */
        margin: 8px 0 0;
        /* 文字サイズを指定する */
        font-size: 12px;
        /* 行の高さを指定する */
        line-height: 1.05;
        /* 文字の太さを指定する */
        font-weight: 900;
        /* 移動・回転・拡大縮小を指定する */
        transform: rotate(-2deg);
        /* 文字の折り返し方法を指定する */
        white-space: nowrap;
    }

    .photo-card h3 {
        /* 外側の余白を指定する */
        margin: auto 0 0;
        /* 文字サイズを指定する */
        font-size: 8px;
        /* 行の高さを指定する */
        line-height: 1.05;
        /* 文字の太さを指定する */
        font-weight: 900;
        /* 移動・回転・拡大縮小を指定する */
        transform: rotate(-2deg);
        /* 長い文字の折り返し方法を指定する */
        overflow-wrap: anywhere;
    }

    .memory-book .memory-grid::before {
        /* 疑似要素に表示する内容を指定する */
        content: "";
        /* 配置方法を指定する */
        position: absolute;
        /* 左からの位置を指定する */
        left: -4px;
        /* 右からの位置を指定する */
        right: -4px;
        /* 上からの位置を指定する */
        top: 130px;
        /* 高さを指定する */
        height: 38px;
        /* 重なり順を指定する */
        z-index: 2;
        /* 背景を指定する */
        background:
            linear-gradient(#9f9f9f, #9f9f9f) center / 100% 3px no-repeat,
            linear-gradient(#d8d8d8, #d8d8d8) center / 100% 10px no-repeat;
        /* 上側の枠線を指定する */
        border-top: 0;
        /* 下側の枠線を指定する */
        border-bottom: 0;
        /* 影を指定する */
        box-shadow: none;
        /* クリック操作の受け取り方を指定する */
        pointer-events: none;
    }

    .memory-book .memory-grid::after {
        /* 表示方法を指定する */
        display: none;
    }

    .memory-rings {
        /* 配置方法を指定する */
        position: absolute;
        /* 重なり順を指定する */
        z-index: 4;
        /* 表示方法を指定する */
        display: flex;
        /* 上からの位置を指定する */
        top: 170px;
        /* 左からの位置を指定する */
        left: 56px;
        /* 右からの位置を指定する */
        right: 44px;
        /* 中身全体の横方向の配置を指定する */
        justify-content: space-between;
        /* クリック操作の受け取り方を指定する */
        pointer-events: none;
    }

    .memory-rings span {
        /* 幅を指定する */
        width: 10px;
        /* 高さを指定する */
        height: 34px;
        /* 上側の余白を指定する */
        margin-top: -17px;
        /* 背景を指定する */
        background: linear-gradient(90deg, #f9f9f9 0 48%, #d8d8d8 49% 100%);
        /* 枠線の太さを指定する */
        border-width: 3px;
        /* 影を指定する */
        box-shadow:
            3px 0 0 rgba(213, 213, 213, 0.95),
            0 2px 0 rgba(0, 0, 0, 0.08);
    }

    .home-footer {
        /* 上側の余白を指定する */
        margin-top: 26px;
        /* 文字の揃え位置を指定する */
        text-align: center;
        /* 文字サイズを指定する */
        font-size: 11px;
    }

    .home-right {
        /* 表示方法を指定する */
        display: none;
    }

    .home-mobile-side-book {
        /* 表示順を指定する */
        order: 4;
        /* 表示方法を指定する */
        display: block;
        /* 幅を指定する */
        width: 100%;
        /* 外側の余白を指定する */
        margin: 20px auto 22px;
        /* はみ出した部分の表示方法を指定する */
        overflow: visible;
    }

    .home-mobile-side-book .side-book {
        /* 配置方法を指定する */
        position: relative;
        /* 上からの位置を指定する */
        top: auto;
        /* 右からの位置を指定する */
        right: auto;
        /* 左からの位置を指定する */
        left: -10px;
        /* 幅を指定する */
        width: min(88vw, 334px);
        /* 高さを指定する */
        height: 420px;
        /* 外側の余白を指定する */
        margin: 0 auto;
        /* 内側の余白を指定する */
        padding: 38px 24px 38px 60px;
        /* 要素同士の間隔を指定する */
        gap: 22px;
        /* 移動・回転・拡大縮小を指定する */
        transform: rotate(-3.5deg);
        /* 変形の基準点を指定する */
        transform-origin: center top;
        /* 影を指定する */
        box-shadow:
            8px 8px 0 rgba(180, 180, 180, 0.5),
            12px 12px 0 rgba(180, 180, 180, 0.2);
    }

    .home-mobile-side-book .side-book::before {
        /* 上からの位置を指定する */
        top: 14px;
        /* 右からの位置を指定する */
        right: calc(100% - 14px);
        /* 下からの位置を指定する */
        bottom: 14px;
        /* 左からの位置を指定する */
        left: -34%;
        /* 影を指定する */
        box-shadow: none;
    }

    .home-mobile-side-book .side-book::after {
        /* 上下左右の位置をまとめて指定する */
        inset: 14px;
    }

    .home-mobile-side-book .binder-rings {
        /* 上からの位置を指定する */
        top: 64px;
        /* 下からの位置を指定する */
        bottom: 62px;
        /* 左からの位置を指定する */
        left: -24px;
    }

    .home-mobile-side-book .binder-rings span {
        /* 幅を指定する */
        width: 54px;
        /* 高さを指定する */
        height: 12px;
        /* 影を指定する */
        box-shadow: 10px 0 0 #000000;
    }

    .home-mobile-side-book .side-book-page {
        /* 幅と高さの計算方法を指定する */
        box-sizing: border-box;
        /* 最小高さを指定する */
        min-height: 0;
    }

    .home-mobile-side-book .side-book-top {
        /* 幅を指定する */
        width: 92%;
        /* 最小高さを指定する */
        min-height: 152px;
        /* 上側の余白を指定する */
        margin-top: 8px;
        /* 左側の余白を指定する */
        margin-left: -4px;
        /* はみ出した部分の表示方法を指定する */
        overflow: visible;
    }

    .home-mobile-side-book .side-rings {
        /* 表示方法を指定する */
        display: none;
    }

    .home-mobile-side-book .side-book-cover {
        /* 配置方法を指定する */
        position: relative;
        /* 幅を指定する */
        width: 126px;
        /* 最小高さを指定する */
        min-height: 134px;
        /* 外側の余白を指定する */
        margin: 12px auto;
        /* 表示方法を指定する */
        display: block;
        /* 内側の余白を指定する */
        padding: 0;
        /* 枠線を指定する */
        border: 0;
        /* 影を指定する */
        box-shadow: none;
        /* 背景を指定する */
        background: transparent;
    }

    .home-mobile-side-book .side-book-cover::before {
        /* 疑似要素に表示する内容を指定する */
        content: "";
        /* 配置方法を指定する */
        position: absolute;
        /* 上からの位置を指定する */
        top: 14px;
        /* 右からの位置を指定する */
        right: 10px;
        /* 下からの位置を指定する */
        bottom: 14px;
        /* 左からの位置を指定する */
        left: 30px;
        /* 枠線を指定する */
        border: 3px solid #ffd7f2;
        /* クリック操作の受け取り方を指定する */
        pointer-events: none;
    }

    .home-mobile-side-book .side-book-cover::after {
        /* 疑似要素に表示する内容を指定する */
        content: "";
        /* 配置方法を指定する */
        position: absolute;
        /* 左からの位置を指定する */
        left: 22px;
        /* 上からの位置を指定する */
        top: 34px;
        /* 幅を指定する */
        width: 27px;
        /* 高さを指定する */
        height: 7px;
        /* 背景を指定する */
        background: #d8d8d8;
        /* 角の丸みを指定する */
        border-radius: 999px;
        /* 影を指定する */
        box-shadow:
            7px 0 0 #000000,
            0 14px 0 #d8d8d8,
            7px 14px 0 #000000,
            0 28px 0 #d8d8d8,
            7px 28px 0 #000000,
            0 42px 0 #d8d8d8,
            7px 42px 0 #000000,
            0 56px 0 #d8d8d8,
            7px 56px 0 #000000;
        /* クリック操作の受け取り方を指定する */
        pointer-events: none;
    }

    .home-mobile-side-book .side-book-cover h2 {
        /* 配置方法を指定する */
        position: absolute;
        /* 重なり順を指定する */
        z-index: 1;
        /* 上からの位置を指定する */
        top: 50%;
        /* 左からの位置を指定する */
        left: 62px;
        /* 幅を指定する */
        width: 54px;
        /* 最大幅を指定する */
        max-width: 54px;
        /* 外側の余白を指定する */
        margin: 0;
        /* 文字サイズを指定する */
        font-size: 16px;
        /* 行の高さを指定する */
        line-height: 1.1;
        /* 文字の揃え位置を指定する */
        text-align: center;
        /* 文字の折り返し方法を指定する */
        white-space: nowrap;
        /* 移動・回転・拡大縮小を指定する */
        transform: translateY(-50%);
    }

    .home-mobile-side-book .side-book-bottom {
        /* 幅を指定する */
        width: 92%;
        /* 最小高さを指定する */
        min-height: 130px;
        /* 左側の余白を指定する */
        margin-left: -4px;
        /* 内側の余白を指定する */
        padding: 20px 0 22px;
        /* 中身を縦方向に揃える */
        align-items: center;
        /* 中身を横方向に揃える */
        justify-items: center;
        /* はみ出した部分の表示方法を指定する */
        overflow: visible;
    }

    .home-mobile-side-book .side-book-card {
        /* 幅を指定する */
        width: 118px;
        /* 高さを指定する */
        height: 78px;
        /* 最小高さを指定する */
        min-height: 0;
        /* 文字サイズを指定する */
        font-size: 14px;
        /* 行の高さを指定する */
        line-height: 1.14;
        /* 角の丸みを指定する */
        border-radius: 8px;
        /* 文字間隔を指定する */
        letter-spacing: 0;
    }

    .home-mobile-side-book .side-book-card::before {
        /* 上からの位置を指定する */
        top: -15px;
        /* 右からの位置を指定する */
        right: 0;
        /* 幅を指定する */
        width: 36px;
        /* 高さを指定する */
        height: 22px;
        /* 角の丸みを指定する */
        border-radius: 8px 8px 0 0;
    }
}

@media (min-width: 901px) and (max-width: 1500px) {
    .home-page {
        /* グリッドの列を指定する */
        grid-template-columns: 260px minmax(560px, 620px) minmax(300px, 1fr);
        /* 中身全体の横方向の配置を指定する */
        justify-content: center;
    }

    .home-left {
        padding-top: 345px;
    }

    .home-logo {
        /* 幅を指定する */
        width: 270px;
        /* 最大幅を指定する */
        max-width: 86%;
        /* 移動・回転・拡大縮小を指定する */
        transform: translateX(-12px);
    }

    .home-center {
        padding-right: 18px;
        padding-left: 18px;
    }

    .home-card {
        /* 幅を指定する */
        width: min(100%, 620px);
        padding-right: 34px;
        padding-left: 34px;
    }

    .home-image {
        /* 幅を指定する */
        width: 300px;
        /* 高さを指定する */
        height: 226px;
    }

    .home-start-button,
    .home-message {
        /* 幅を指定する */
        width: min(100%, 520px);
    }

    .home-message {
        padding-right: 36px;
        padding-left: 36px;
    }

    .home-message h1 {
        /* 文字サイズを指定する */
        font-size: 30px;
    }

    .memory-book {
        /* 幅を指定する */
        width: min(560px, calc(100% + 32px));
    }

    .side-book {
        /* 上からの位置を指定する */
        top: 86px;
        /* 右からの位置を指定する */
        right: -72px;
        /* 幅を指定する */
        width: clamp(430px, 34vw, 520px);
        /* 高さを指定する */
        height: clamp(560px, 43vw, 660px);
        /* 内側の余白を指定する */
        padding: 42px 42px 48px 82px;
    }

    .side-book::before {
        /* 上からの位置を指定する */
        top: 17px;
        /* 右からの位置を指定する */
        right: calc(100% - 17px);
        /* 下からの位置を指定する */
        bottom: 17px;
        /* 左からの位置を指定する */
        left: -72%;
        /* 影を指定する */
        box-shadow:
            -9px 9px 0 #d0d0d0,
            9px 9px 0 #b9b9b9;
    }

    .binder-rings {
        /* 上からの位置を指定する */
        top: 76px;
        /* 下からの位置を指定する */
        bottom: 62px;
        /* 左からの位置を指定する */
        left: -40px;
    }

    .binder-rings span {
        /* 幅を指定する */
        width: 70px;
        /* 高さを指定する */
        height: 15px;
        /* 影を指定する */
        box-shadow: 13px 0 0 #000000;
    }

    .side-rings {
        /* 左からの位置を指定する */
        left: 22px;
    }

    .side-rings span {
        /* 幅を指定する */
        width: 54px;
    }

    .side-book-cover {
        /* 幅を指定する */
        width: 58%;
        /* 左側の余白を指定する */
        margin-left: 58px;
    }

    .side-book-bottom {
        /* 最小高さを指定する */
        min-height: 42%;
        /* 内側の余白を指定する */
        padding: 40px 0 18px 20px;
    }

    .side-book-card {
        /* 最小高さを指定する */
        min-height: 138px;
    }
}

@media (max-width: 1700px) {
    .question-body .question-page {
        /* 移動・回転・拡大縮小を指定する */
        transform: scale(0.84);
    }

    .gallary-body .gallary-page {
        /* 移動・回転・拡大縮小を指定する */
        transform: scale(0.84);
    }
}

@media (max-width: 1600px) {
    .question-body .question-page {
        /* 移動・回転・拡大縮小を指定する */
        transform: scale(0.79);
    }

    .gallary-body .gallary-page {
        /* 移動・回転・拡大縮小を指定する */
        transform: scale(0.79);
    }
}

@media (max-width: 1440px) {
    .question-body .question-page {
        /* 移動・回転・拡大縮小を指定する */
        transform: scale(0.70);
    }

    .gallary-body .gallary-page {
        /* 移動・回転・拡大縮小を指定する */
        transform: scale(0.70);
    }
}

@media (max-width: 1366px) {
    .question-body .question-page {
        /* 移動・回転・拡大縮小を指定する */
        transform: scale(0.67);
    }

    .gallary-body .gallary-page {
        /* 移動・回転・拡大縮小を指定する */
        transform: scale(0.67);
    }
}

@media (max-width: 1280px) {
    .question-body .question-page {
        /* 移動・回転・拡大縮小を指定する */
        transform: scale(0.63);
    }

    .gallary-body .gallary-page {
        /* 移動・回転・拡大縮小を指定する */
        transform: scale(0.63);
    }
}

@media (max-height: 900px) {
    .question-body .question-page {
        /* 移動・回転・拡大縮小を指定する */
        transform: scale(0.79);
    }

    .gallary-body .gallary-page {
        /* 移動・回転・拡大縮小を指定する */
        transform: scale(0.79);
    }
}

@media (max-height: 800px) {
    .question-body .question-page {
        /* 移動・回転・拡大縮小を指定する */
        transform: scale(0.70);
    }

    .gallary-body .gallary-page {
        /* 移動・回転・拡大縮小を指定する */
        transform: scale(0.70);
    }
}

@media (max-height: 768px) {
    .question-body .question-page {
        /* 移動・回転・拡大縮小を指定する */
        transform: scale(0.67);
    }

    .gallary-body .gallary-page {
        /* 移動・回転・拡大縮小を指定する */
        transform: scale(0.67);
    }
}

@media (max-width: 600px) {
    .question-body {
        /* 最小幅を指定する */
        min-width: 0;
        /* 最小高さを指定する */
        min-height: 100vh;
        /* 背景色を指定する */
        background-color: #ffffff;
        /* 背景画像や模様を指定する */
        background-image:
            radial-gradient(circle, rgba(243, 154, 193, 0.84) 0 22px, transparent 23px),
            radial-gradient(circle, rgba(243, 154, 193, 0.84) 0 22px, transparent 23px);
        /* 背景の位置を指定する */
        background-position: 0 0, 48px 48px;
        /* 背景の大きさを指定する */
        background-size: 96px 96px, 96px 96px;
        /* 横方向にはみ出した部分の表示方法を指定する */
        overflow-x: hidden;
        /* 縦方向にはみ出した部分の表示方法を指定する */
        overflow-y: auto;
    }

    .question-body .question-page {
        /* 表示方法を指定する */
        display: block;
        /* 幅を指定する */
        width: auto;
        /* 高さを指定する */
        height: auto;
        /* 最小高さを指定する */
        min-height: 100vh;
        /* 内側の余白を指定する */
        padding: 20px 18px 38px;
        /* 移動・回転・拡大縮小を指定する */
        transform: none !important;
        /* フォントの種類を指定する */
        font-family: system-ui, sans-serif;
    }

    .question-body .question-back-ribbon {
        /* 上からの位置を指定する */
        top: 16px;
        /* 右からの位置を指定する */
        right: 16px;
        /* 幅を指定する */
        width: 66px;
        /* 高さを指定する */
        height: 86px;
        /* 枠線の太さを指定する */
        border-width: 3px;
        /* 影を指定する */
        box-shadow: 4px 4px 0 rgba(208, 170, 72, 0.3);
    }

    .question-body .question-back-ribbon::before {
        /* 上下左右の位置をまとめて指定する */
        inset: 9px 12px auto;
        /* 高さを指定する */
        height: 12px;
    }

    .question-body .question-back-ribbon::after {
        /* 上からの位置を指定する */
        top: 32px;
        /* 文字サイズを指定する */
        font-size: 14px;
    }

    .question-body .question-book {
        /* 配置方法を指定する */
        position: relative;
        /* 表示方法を指定する */
        display: block;
        /* 幅を指定する */
        width: 390px;
        /* 最大幅を指定する */
        max-width: calc(100vw + 42px);
        /* 高さを指定する */
        height: 560px;
        /* 最小高さを指定する */
        min-height: 0;
        /* 外側の余白を指定する */
        margin: 0 0 0 -42px;
        /* 内側の余白を指定する */
        padding: 0;
        /* 背景を指定する */
        background:
            linear-gradient(180deg, #ffffff 0 22px, #d6d6d6 23px 28px, #ffffff 29px 100%),
            linear-gradient(90deg, #f8f8f8 0 26px, #d5d5d5 27px 31px, #ffffff 32px 100%);
        /* 枠線を指定する */
        border: 5px solid #d4d4d4;
        /* 影を指定する */
        box-shadow:
            6px 6px 0 #b8b8b8,
            10px 10px 0 rgba(180, 180, 180, 0.22);
    }

    .question-body .question-book::before {
        /* 上からの位置を指定する */
        top: 28px;
        /* 下からの位置を指定する */
        bottom: 28px;
        /* 左からの位置を指定する */
        left: -178px;
        /* 重なり順を指定する */
        z-index: 0;
        /* 幅を指定する */
        width: 190px;
        /* 高さを指定する */
        height: auto;
        /* 背景を指定する */
        background:
            linear-gradient(90deg, #ffffff 0 82%, #eeeeee 83% 88%, #ffffff 89% 100%);
        /* 枠線を指定する */
        border: 2px solid #b5b5b5;
        /* 影を指定する */
        box-shadow:
            inset -10px 0 0 #eeeeee,
            6px 6px 0 rgba(180, 180, 180, 0.18);
    }

    .question-body .top-paper-strip,
    .question-body .front-paper-outline {
        /* 表示方法を指定する */
        display: none;
    }

    .question-body .question-book::after {
        /* 表示方法を指定する */
        display: block;
        /* 上からの位置を指定する */
        top: 27px;
        /* 下からの位置を指定する */
        bottom: 27px;
        /* 左からの位置を指定する */
        left: 27px;
        /* 重なり順を指定する */
        z-index: 2;
        /* 幅を指定する */
        width: 12px;
        /* 背景を指定する */
        background:
            linear-gradient(90deg, #ffffff 0 4px, #d8d8d8 5px 7px, #ffffff 8px 12px);
        /* 右側の枠線を指定する */
        border-right: 1px solid #d8d8d8;
        /* 影を指定する */
        box-shadow:
            18px 0 0 -17px #c7c7c7,
            24px 0 0 -17px rgba(214, 214, 214, 0.75);
        /* クリック操作の受け取り方を指定する */
        pointer-events: none;
    }

    .question-body .book-holes {
        /* 左からの位置を指定する */
        left: -20px;
        /* 上からの位置を指定する */
        top: 68px;
        /* 下からの位置を指定する */
        bottom: 58px;
        /* 重なり順を指定する */
        z-index: 8;
        /* 表示方法を指定する */
        display: flex;
        /* 並びの方向を指定する */
        flex-direction: column;
        /* 中身全体の横方向の配置を指定する */
        justify-content: space-between;
    }

    .question-body .book-holes span {
        /* 配置方法を指定する */
        position: relative;
        /* 幅を指定する */
        width: 68px;
        /* 高さを指定する */
        height: 11px;
        /* 角の丸みを指定する */
        border-radius: 999px;
        /* 背景を指定する */
        background:
            linear-gradient(90deg, #111111 0 9px, #f9f9f9 10px 47px, #d6d6d6 48px 57px, #111111 58px 68px);
        /* 影を指定する */
        box-shadow:
            0 1px 0 rgba(150, 150, 150, 0.3),
            inset 0 2px 0 rgba(255, 255, 255, 0.7);
    }

    .question-body .book-holes span::after {
        /* 表示方法を指定する */
        display: none;
    }

    .question-body .book-holes span::before {
        /* 疑似要素に表示する内容を指定する */
        content: "";
        /* 配置方法を指定する */
        position: absolute;
        /* 表示方法を指定する */
        display: block;
        /* 左からの位置を指定する */
        left: 18px;
        /* 上からの位置を指定する */
        top: -3px;
        /* 幅を指定する */
        width: 14px;
        /* 高さを指定する */
        height: 17px;
        /* 角の丸みを指定する */
        border-radius: 999px;
        /* 背景を指定する */
        background: #ffffff;
        /* 影を指定する */
        box-shadow: inset -3px 0 0 #d6d6d6;
    }

    .question-body .question-paper {
        /* 配置方法を指定する */
        position: absolute;
        /* 上下左右の位置をまとめて指定する */
        inset: 34px 18px 38px 42px;
        /* 表示方法を指定する */
        display: block;
        /* 幅を指定する */
        width: auto;
        /* 高さを指定する */
        height: auto;
        /* 最小高さを指定する */
        min-height: 0;
        /* 内側の余白を指定する */
        padding: 42px 32px 34px;
        /* 背景を指定する */
        background: #fff;
        /* 枠線を指定する */
        border: 3px solid #a8a8a8;
        /* 影を指定する */
        box-shadow: none;
    }

    .question-body .question-paper::before {
        /* 表示方法を指定する */
        display: none;
    }

    .question-body .question-paper::after {
        /* 疑似要素に表示する内容を指定する */
        content: "";
        /* 配置方法を指定する */
        position: absolute;
        /* 表示方法を指定する */
        display: block;
        /* 上からの位置を指定する */
        top: auto;
        /* 左からの位置を指定する */
        left: 0;
        /* 右からの位置を指定する */
        right: -12px;
        /* 下からの位置を指定する */
        bottom: -15px;
        /* 幅を指定する */
        width: auto;
        /* 高さを指定する */
        height: 12px;
        /* 背景を指定する */
        background:
            linear-gradient(#ffffff, #ffffff) 0 0 / 100% 4px no-repeat,
            linear-gradient(#d1d1d1, #d1d1d1) 0 4px / 100% 3px no-repeat,
            linear-gradient(#ffffff, #ffffff) 0 7px / 100% 3px no-repeat,
            linear-gradient(#bfbfbf, #bfbfbf) 0 10px / 100% 2px no-repeat;
        /* 影を指定する */
        box-shadow: 0 3px 0 rgba(180, 180, 180, 0.18);
        /* クリック操作の受け取り方を指定する */
        pointer-events: none;
    }

    .question-body .question-title {
        /* 幅を指定する */
        width: 100%;
        /* 高さを指定する */
        height: 60px;
        /* 外側の余白を指定する */
        margin: 0 auto 26px;
        /* 内側の余白を指定する */
        padding: 0;
        /* 表示方法を指定する */
        display: grid;
        /* 中身を縦横中央に配置する */
        place-items: center;
        /* 移動・回転・拡大縮小を指定する */
        transform: none;
        /* 枠線を指定する */
        border: 4px solid #d6d6d6;
        /* 角の丸みを指定する */
        border-radius: 999px;
        /* 文字サイズを指定する */
        font-size: 28px;
        /* 行の高さを指定する */
        line-height: 1;
        /* 文字の太さを指定する */
        font-weight: 900;
    }

    .question-body .question-image {
        /* 幅を指定する */
        width: 100%;
        /* 高さを指定する */
        height: 150px;
        /* 下側の余白を指定する */
        margin-bottom: 22px;
        /* 移動・回転・拡大縮小を指定する */
        transform: none;
        /* 背景色を指定する */
        background-color: #ffffff;
        /* 角の丸みを指定する */
        border-radius: 22px;
    }

    .question-body .question-text-area {
        /* 表示方法を指定する */
        display: grid;
        /* 中身を縦横中央に配置する */
        place-items: center;
        /* 幅を指定する */
        width: 100%;
        /* 高さを指定する */
        height: 150px;
        /* 内側の余白を指定する */
        padding: 16px 18px;
        /* 上側の余白を指定する */
        margin-top: 0;
        /* 移動・回転・拡大縮小を指定する */
        transform: none;
        /* 枠線を指定する */
        border: 4px solid #d6d6d6;
        /* 角の丸みを指定する */
        border-radius: 22px;
        /* 背景を指定する */
        background: #fff;
    }

    .question-body .question-text-area p {
        /* 文字サイズを指定する */
        font-size: 19px;
        /* 行の高さを指定する */
        line-height: 1.45;
    }

    .question-body .answer-panel {
        /* 表示方法を指定する */
        display: block;
        /* 幅を指定する */
        width: 340px;
        /* 最大幅を指定する */
        max-width: 100%;
        /* 最小高さを指定する */
        min-height: 0;
        /* 外側の余白を指定する */
        margin: 22px auto 0;
        /* 内側の余白を指定する */
        padding: 24px 14px 22px;
        /* 背景を指定する */
        background: #fff0fb;
        /* 角の丸みを指定する */
        border-radius: 0 0 14px 14px;
    }

    .question-body .answer-pin {
        /* 表示方法を指定する */
        display: none;
    }

    .question-body .answer-card {
        /* 幅を指定する */
        width: 100%;
        /* 最小高さを指定する */
        min-height: 0;
        /* 内側の余白を指定する */
        padding: 0;
        /* 表示方法を指定する */
        display: grid;
        /* グリッドの列を指定する */
        grid-template-columns: repeat(2, 1fr);
        /* 要素同士の間隔を指定する */
        gap: 18px 18px;
        /* 背景を指定する */
        background: transparent;
        /* 角の丸みを指定する */
        border-radius: 0;
    }

    .question-body .answer-button {
        /* 幅を指定する */
        width: 100%;
        /* 高さを指定する */
        height: 72px;
        /* 内側の余白を指定する */
        padding: 8px 10px;
        /* 枠線を指定する */
        border: 4px solid #d6d6d6;
        /* 角の丸みを指定する */
        border-radius: 14px;
        /* 背景を指定する */
        background: #fff;
        /* 文字サイズを指定する */
        font-size: 14px;
        /* 行の高さを指定する */
        line-height: 1.25;
    }
}

@media (max-width: 900px) {
    .kekka-body {
        /* 最小幅を指定する */
        min-width: 0;
        /* 横方向にはみ出した部分の表示方法を指定する */
        overflow-x: hidden;
        /* 縦方向にはみ出した部分の表示方法を指定する */
        overflow-y: auto;
        /* スマホでは少し小さめの水玉にする */
        background-image:
            radial-gradient(circle, rgba(238, 158, 198, 0.92) 0 28px, transparent 29px),
            radial-gradient(circle, rgba(238, 158, 198, 0.92) 0 28px, transparent 29px);
        /* 水玉を互い違いに配置する */
        background-position: -14px -14px, 58px 58px;
        /* 水玉の間隔を指定する */
        background-size: 144px 144px, 144px 144px;
    }

    .kekka-page {
        /* 幅を指定する */
        width: 100%;
        /* 最小高さを指定する */
        min-height: 100dvh;
        /* 高さを指定する */
        height: auto;
        /* 内側の余白を指定する */
        padding: 40px 0 42px;
        /* 幅と高さの計算方法を指定する */
        box-sizing: border-box;
        /* 移動・回転・拡大縮小を指定する */
        transform: none !important;
    }

    .kekka-binder {
        /* 配置方法を指定する */
        position: relative;
        /* 上からの位置を指定する */
        top: auto;
        /* 左からの位置を指定する */
        left: 50%;
        /* 幅を指定する */
        width: min(374px, calc(100vw - 22px));
        /* 高さを指定する */
        height: 770px;
        /* 内側の余白を指定する */
        padding: 0;
        /* はみ出した部分の表示方法を指定する */
        overflow: visible;
        /* 移動・回転・拡大縮小を指定する */
        transform: translateX(-50%) !important;
        /* 枠線を指定する */
        border: 6px solid #d7d7d7;
        /* 幅と高さの計算方法を指定する */
        box-sizing: border-box;
        /* 影を指定する */
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.72) inset,
            5px 5px 0 rgba(167, 167, 167, 0.45);
    }

    .kekka-binder::before {
        /* 上からの位置を指定する */
        top: 37px;
        /* 右からの位置を指定する */
        right: 15px;
        /* 下からの位置を指定する */
        bottom: 28px;
        /* 左からの位置を指定する */
        left: 23px;
        /* 幅を指定する */
        width: auto;
        /* 重なり順を指定する */
        z-index: 1;
        /* 背景を指定する */
        background: #ffffff;
        /* 枠線を指定する */
        border: 2px solid #a8a8a8;
        /* 影を指定する */
        box-shadow:
            2px 2px 0 rgba(170, 170, 170, 0.26),
            4px 4px 0 rgba(170, 170, 170, 0.18);
    }

    .kekka-binder::after,
    .kekka-spine,
    .kekka-top-tabs,
    .kekka-sheet::before,
    .kekka-sheet::after {
        /* 表示方法を指定する */
        display: none;
    }

    .kekka-sheet {
        /* 配置方法を指定する */
        position: absolute;
        /* 左からの位置を指定する */
        left: 23px;
        /* 右からの位置を指定する */
        right: 15px;
        /* 幅を指定する */
        width: auto;
        /* 背景を指定する */
        background: transparent;
        /* 枠線を指定する */
        border: 0;
        /* 影を指定する */
        box-shadow: none;
        /* 重なり順を指定する */
        z-index: 3;
    }

    .kekka-sheet-left {
        /* 上からの位置を指定する */
        top: 39px;
        /* 下からの位置を指定する */
        bottom: auto;
        /* 高さを指定する */
        height: 306px;
    }

    .kekka-sheet-right {
        /* 上からの位置を指定する */
        top: 381px;
        /* 下からの位置を指定する */
        bottom: auto;
        /* 高さを指定する */
        height: 296px;
    }

    .kekka-stamp {
        /* 上からの位置を指定する */
        top: 24px;
        /* 左からの位置を指定する */
        left: 34px;
        /* 幅を指定する */
        width: 80px;
        /* 高さを指定する */
        height: 80px;
        /* 重なり順を指定する */
        z-index: 2;
        /* 文字サイズを指定する */
        font-size: 28px;
        /* 行の高さを指定する */
        line-height: 1.08;
        /* 文字間隔を指定する */
        letter-spacing: 0;
    }

    .kekka-illustration {
        /* 上からの位置を指定する */
        top: 102px;
        /* 右からの位置を指定する */
        right: auto;
        /* 下からの位置を指定する */
        bottom: auto;
        /* 左からの位置を指定する */
        left: 50%;
        /* 幅を指定する */
        width: min(244px, calc(100% - 70px));
        /* 高さを指定する */
        height: 204px;
        /* 移動・回転・拡大縮小を指定する */
        transform: translateX(-50%);
        /* 文字サイズを指定する */
        font-size: 27px;
        /* 行の高さを指定する */
        line-height: 1.2;
    }

    .kekka-type-name {
        /* 配置方法を指定する */
        position: absolute;
        /* 上からの位置を指定する */
        top: 0;
        /* 左からの位置を指定する */
        left: 50%;
        /* 幅を指定する */
        width: 216px;
        /* 最小高さを指定する */
        min-height: 38px;
        /* 外側の余白を指定する */
        margin: 0;
        /* 移動・回転・拡大縮小を指定する */
        transform: translateX(-50%);
        /* 文字サイズを指定する */
        font-size: 24px;
        /* 行の高さを指定する */
        line-height: 1;
    }

    .kekka-description {
        /* 配置方法を指定する */
        position: absolute;
        /* 上からの位置を指定する */
        top: 60px;
        /* 左からの位置を指定する */
        left: 50%;
        /* 幅を指定する */
        width: 270px;
        /* 高さを指定する */
        height: 144px;
        /* 外側の余白を指定する */
        margin: 0;
        /* 移動・回転・拡大縮小を指定する */
        transform: translateX(-50%);
        /* 文字サイズを指定する */
        font-size: 31px;
        /* 行の高さを指定する */
        line-height: 1.2;
    }

    .kekka-back-button {
        /* 上からの位置を指定する */
        top: 260px;
        /* 右からの位置を指定する */
        right: auto;
        /* 下からの位置を指定する */
        bottom: auto;
        /* 左からの位置を指定する */
        left: 50%;
        /* 幅を指定する */
        width: 270px;
        /* 高さを指定する */
        height: 48px;
        /* 移動・回転・拡大縮小を指定する */
        transform: translateX(-50%);
        /* 枠線を指定する */
        border: 4px solid #d8d8d8;
        /* 角の丸みを指定する */
        border-radius: 999px;
        /* 背景を指定する */
        background: #ffffff;
        /* 文字サイズを指定する */
        font-size: 13px;
        /* 行の高さを指定する */
        line-height: 1;
    }

    .kekka-back-button br {
        /* 表示方法を指定する */
        display: none;
    }

    .kekka-type-a .kekka-type-name,
    .kekka-type-b .kekka-type-name,
    .kekka-type-c .kekka-type-name,
    .kekka-type-d .kekka-type-name,
    .kekka-type-e .kekka-type-name,
    .kekka-type-f .kekka-type-name {
        width: 278px;
        min-height: 48px;
        border-width: 3px;
        border-radius: 12px;
        font-size: 17px;
        letter-spacing: 0.16em;
    }

    .kekka-type-a .kekka-description,
    .kekka-type-b .kekka-description,
    .kekka-type-c .kekka-description,
    .kekka-type-d .kekka-description,
    .kekka-type-e .kekka-description,
    .kekka-type-f .kekka-description {
        width: 278px;
        height: auto;
        min-height: 158px;
        padding: 19px 21px;
        border-width: 3px;
        border-radius: 22px;
        font-size: 13px;
        line-height: 1.55;
    }

    .kekka-type-a .kekka-back-button,
    .kekka-type-b .kekka-back-button,
    .kekka-type-c .kekka-back-button,
    .kekka-type-d .kekka-back-button,
    .kekka-type-e .kekka-back-button,
    .kekka-type-f .kekka-back-button {
        top: 270px;
        left: auto;
        right: 16px;
        width: 64px;
        height: 60px;
        transform: none;
        border-width: 3px;
        border-radius: 13px;
        font-size: 11px;
        line-height: 1.15;
    }

    .kekka-type-f .kekka-back-button {
        top: 286px;
    }

    .kekka-rings {
        /* 上からの位置を指定する */
        top: 124px;
        /* 下からの位置を指定する */
        bottom: 92px;
        /* 左からの位置を指定する */
        left: -48px;
        /* 重なり順を指定する */
        z-index: 5;
        /* クリック操作の受け取り方を指定する */
        pointer-events: none;
    }

    .kekka-rings span {
        /* 幅を指定する */
        width: 74px;
        /* 高さを指定する */
        height: 14px;
        /* 影を指定する */
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
        /* 背景を指定する */
        background:
            linear-gradient(90deg,
                #eeeeee 0 53px,
                #000000 54px 74px);
    }
}