/*------------------------------
  共通設定
-------------------------------- */
 :root {
     --sp-width: 430px;
     /*  --sp-width: 393px;*/
     --color-MV: #02501E;

     --color-bkMVtext: #EAD787;
     --color-bgColor: #fff;
     --color-btnOn: #9C0308;
     --color-btnbk: #0a1421;
     --color-btnOff: #fff;
     --color-rankText: #F40000;
     --color-tokai: #ED6D00;
     --color-black: #000;
     --color-white: #fff;
 }

 /* --------------------------------
  Layout
-------------------------------- */

 /*iOS Safari のフォントサイズ自動調整機能off*/
 html {
     -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
 }


 body {
     font-family: 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",
         "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo",
         "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif";
     font-weight: normal;
     color: var(--color-black);
     background-color: var(--color-white);
     margin: 0;
 }

 main {
     margin-top: 66px;
     background-color: var(--color-bgColor);
 }

 #kingdom *,
 #kingdom *::before,
 #kingdom *::after {
     box-sizing: border-box;
 }

 #kingdom ul {
     list-style: none;
     padding-left: 0;
 }

 #kingdom table {
     border-collapse: collapse;
     border-spacing: 0;
 }

 #kingdom button {
     /* 枠線を消す */
     border: none;
     /* クリックした際に枠線をnone消す */
     outline: none;
     /* 影を消す */
     box-shadow: none;
     margin: 0;
     /* ブラウザ標準の余白を消す */
     padding: 0;
     /* 必要に応じて初期化 */
 }

 .event__border {
     border: none;
     /* デフォルトの枠線を消す */
     border-top: 2px solid var(--color-white);
     /* 線を太く */
     width: 25%;
     margin: 20px auto 15px;
 }

 .underline {
     color: var(--color-white);
     text-decoration: underline solid var(--color-white);
     /*iOS Safari でアンダーバー表示が適用されない挙動の対応*/
     -webkit-text-decoration: underline solid var(--color-white);
 }

 /*キングダム ボタン
----------------------------*/
 .event-btm {
     justify-content: center;
     color: var(--color-white);
 }

 .event-btm__inner {
     width: 84%;
     margin: 0 auto;
 }

 .event-btm__list {
     display: flex;
     flex-direction: column;
     gap: 20px;
     padding: 15px 0;
 }

 /* main class="page-content"
----------------------------------------------- */
 .page-content {
     width: var(--sp-width);
     max-width: 430px;
     padding-top: 60px;
     min-height: calc(100vh - 150px);
     margin: auto;
     display: block;
     overflow: hidden;
     background-color: var(--color-tokai);
     background-image: 100%;
 }



 /* section class="main-visual"
----------------------------------------------- */
 .main-Visual {
     background-color: var(--color-black);
     margin-bottom: 15px;
 }

 .visual__image {
     width: var(--sp-width);
 }

 .visual__text {
     font-weight: 700;
     font-size: 1.25rem;
     /*20px*/
     color: var(--color-white);
     line-height: 1.4em;
     padding-bottom: 10px;
     text-align: center;
 }

 .visual__text-upper {
     text-align: center;
     font-weight: 700;
     font-size: 1.1875rem;
     color: var(--color-black);
     background-image: url(/view/event/kingdom/svg/bk_gold.svg);
     background-repeat: no-repeat;
     background-position: center;
     padding: 10px 0;
     margin: 5px auto 0;
 }

 .ranking__title>span {
     display: block;
     padding-bottom: 10px;
 }

 /* 貴方のランクは ログオフ
----------------------------------------------- */
 .ranking {
     text-align: center;
 }

 .ranking-outer {
     margin-top: 10px;
 }

 .ranking__title {
     font-family: "Noto Serif JP", serif;
     text-align: center;
     font-weight: 900;
     font-size: 1.4375rem;
     /*23px*/
     background-repeat: no-repeat;
     background-position: center;
     padding: 15px 0;
     margin: 10px 0 15px;
 }

 .ranking__title>span {
     display: block;
     padding-bottom: 10px;
 }

 /*認証セクション
----------------------------------------------- */
 .registration {
     background-color: var(--color-btnbk);
     margin-top: 15px;
 }

 .registration__inner {
     width: 91.6%;
     margin: 0 auto;
 }

 /* 認証処理ボタン 
----------------------------------------------- */
 .registration__list {
     display: flex;
     flex-direction: column;
     gap: 10px;
     padding: 18px 0;
 }

 .btn {
     display: flex;
     justify-content: center;
     color: var(--color-white);
     -webkit-user-select: none;
     -webkit-touch-callout: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     border: none;
 }

 .btn-registration,
 .btn-login {
     background-color: var(--color-btnOn);
     /* 基本色 */
 }

 /*アカウント新規登録*/
 .btn-registration__icon-left {
     flex: 3;
     margin: auto;
     padding-right: 10px;
 }

 .btn-registration__text {
     flex: 8;
     text-align: center;
     font-size: 1.25rem;
     font-weight: bold;
     margin: 15.5px auto;
 }

 .btn-registration__icon-right {
     flex: 1;
 }

 .btn__registration-icon-size {
     height: auto;
 }

 /*ログイン*/
 .btn-login__icon-left {
     flex: 7;
     margin: auto;
     padding-right: 10px;

 }

 .btn-login__text {
     flex: 20;
     text-align: center;
     font-size: 1.25rem;
     font-weight: bold;
     margin: 15.5px auto;
     padding-right: 1rem;
 }

 .btn-login__icon-right {
     flex: 3;
 }

 .btn__login-icon-size {
     width: 18px;
     height: auto;
 }



 /* コンテンツ ご注意事項 
----------------------------------------------- */
 /*ご注意事項ボタン*/
 .warning-content {
     padding: 0 0 20px 0;
     margin: 0 auto 10px auto;
     transition: 0.5s;
 }

 .toggleWarning {
     cursor: pointer;
     position: relative;
 }

 .toggleWarning__title {
     color: var(--color-white);
     text-indent: -3em;
     font-size: 1.0rem;
     font-weight: bold;
     margin: 5px;
     text-align: center;
     padding: 8px 0 0px 0;
 }

 /*icon デザイン*/
 .open__icon__block {
     position: absolute;
     right: 35%;
     top: 68%;
     transform: translatey(-50%);
     width: 24px;
     height: 24px;
     background: #000;
     border-radius: 50%;
     z-index: 2;
 }

 .open__icon {
     position: relative;
     display: inline-block;
     width: 100%;
     height: 100%;
 }

 .open__icon::before,
 .open__icon::after {
     position: absolute;
     content: "";
     display: block;
     transition: all 0.3s;
     background: #fff;
     left: 50%;
     top: 50%;
     width: 50%;
     height: 2px;
     transform: translate(-50%, -50%);
 }

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

 .open__icon.open::before {
     transform: translate(-50%, -50%) rotate(0deg);
 }

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

 /*icon ログオン時非表示*/
 .registration-off {
     display: none;
 }

 /* あなたのランクは(ログオン時表示) 
----------------------------------------------- */
 .ranking-logon-off {
     display: none;
 }

 .ranking-logon {
     margin-top: 20px;
     margin-bottom: 65px;
     position: relative;
 }

 .ranking-content__wrapper {
     width: 89.06%;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 20px;
 }

 .ranking__title--logon {
     position: relative;
     z-index: 1;
     /* 上に表示される */
     margin-bottom: -33px;
     /* 下に引っ張り出して画像に重ねる */
 }

 .ranking__img {
     display: block;
     width: 100%;
     height: auto;
     z-index: 0;
     /* 上に表示される */
 }

 .ranking__text {
     color: var(--color-rankText);
     background-color: var(--color-white);
     font-size: 1.1875rem;
     /*19px*/
     font-weight: 700;
     padding: 14.5px 0;
 }

 /*キングダム ボタン オレンジ*/
 .btn-kingdom-orange {
     display: flex;
     /* 中のテキストをflexで中央に */
     text-align: center;
     justify-content: center;
     align-items: center;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: contain;
     background-color: transparent;
     /*透過*/
 }

 .btn-kingdom-orange__text {
     color: var(--color-black);
     font-size: 1.25rem;
     /*20px*/
     font-weight: 700;
     letter-spacing: 0.05em;
     padding: 10.5px 0;
 }

 .btn-kingdom-orange__text>span {
     display: block;
     padding-bottom: 0px;
 }

 /*ランキングリンク*/
 .ranking-link__text {
     font-size: 1.25rem;
     /*20px*/
     font-weight: 700;
     color: var(--color-white);
     position: relative;
     margin-left: 1.5rem;
     letter-spacing: 0.05em;
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 4px;
     margin-top: 15px;
     z-index: 0;
 }

 .ranking-link__text::before {
     position: absolute;
     content: "";
     background-image: url(/view/event/kingdom/svg/crown.svg);

     top: 3px;
     left: -15px;
     width: 20px;
     height: 100%;
     background-size: contain;
     background-repeat: no-repeat;
     z-index: -1;

 }

 /*キングダム ボタン 赤
----------------------------*/
 .btn-kingdom-red {
     display: flex;
     /* 中のテキストをflexで中央に */
     text-align: center;
     justify-content: center;
     align-items: center;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: contain;
     background-color: transparent;
     /*透過*/
 }

 .btn-kingdom-red__text {
     font-size: 1.125rem;
     /*18px*/
     font-weight: 700;
     padding: 30px 0;
     letter-spacing: 0.05em;
 }

 .btn-kingdom-red__text>span {
     display: block;
     padding-bottom: 10px;
 }


 /*  メインコンテンツ
   クイズ
----------------------------------------------*/
 .event {
     margin: 5px 0;
 }

 .page-content__wrapper {
     width: 91.6%;
     margin-left: auto;
     margin-right: auto;
     border: 2px solid var(--color-white);
     position: relative;
     z-index: 0;
 }

 .page-content__wrapper::before {
     position: absolute;
     content: "";
     top: 0px;
     left: 0px;
     width: 150px;
     height: 114px;
     background-size: contain;
     background-repeat: no-repeat;
     z-index: -1;
     background-image: url(/view/event/kingdom/img/parts_kumo1.webp);
     filter: brightness(60%);
     /*明るさ調整*/
 }

 .page-content__wrapper::after {
     position: absolute;
     content: "";
     bottom: -3px;
     right: -16px;
     width: 150px;
     height: 114px;
     background-size: contain;
     background-repeat: no-repeat;
     z-index: -1;
     background-image: url(/view/event/kingdom/img/parts_kumo2.webp);
     filter: brightness(60%);
     /*明るさ調整*/
 }

 .quiz {
     text-align: center;
     color: var(--color-white);
     margin: 25px 0 20px;
 }

 .quiz-title {
     font-size: 1.375rem;
     /*22px*/
     font-weight: 900;
     letter-spacing: 0.06em;
     line-height: 1.3;
 }

 .quiz-title>span {
     font-size: 1.0625rem;
     /*17px*/
     color: #30C1FF;
 }

 .event-quiz-text {
     font-size: 0.9378rem;
     /*15px*/
     font-weight: 900;
     line-height: 1.7em;
     letter-spacing: 0.05em;
 }

 .event-quiz-text>span {
     font-size: 0.75rem;
     /*12px*/
     font-weight: 400;
 }

 .quiz-schedule {
     position: relative;
     text-align: center;
     padding-bottom: 20px;
 }

 .quiz-schedule-title {
     font-family: "Noto Serif JP", serif;
     font-size: 1.6875rem;
     /*27px*/
     font-weight: 800;
     letter-spacing: 0.08em;
     z-index: 0;

     background: linear-gradient(to right, #f0d96e 0%, #faeeb7 30%, #8f7e31 100%);
     color: transparent;
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 /*シャドウの作成*/
 .quiz-schedule-title--shadow {
     position: absolute;
     content: "";
     inset: 0;
     z-index: -1;
     color: black;
     -webkit-text-stroke: 0.2rem black;
 }


 /*スケジュール*/
 .vertical-table {}

 .vertical-table__body-row {}

 .vertical-table__inner {
     width: 86.8%;
     color: var(--color-white);
     margin: 0 auto;
 }

 .vertical-table__inner tr {
     height: 30px;
     /* ← 各行の高さを固定 */
 }

 .vertical-table__body-row {
     font-size: 0.9375rem;
     /*15px*/
     font-weight: 700;
     letter-spacing: 0.04em;
 }

 th.vertical-table__text {
     text-align: left;
     width: 24%;
     white-space: nowrap;
 }

 .vertical-table__text--center {
     text-align: center;
     width: 3%;
 }

 td.vertical-table__text {
     text-align: left;
     letter-spacing: 0.05em;
     white-space: nowrap;
 }

 /*ノベリティー　注意事項
-------------------------------*/
 .event-warning {
     width: 90%;
     margin: 0 auto;
 }

 /*リスト*/
 .event-warning-list {
     font-size: 0.687rem;
     font-weight: 300;
     letter-spacing: 0.04em;
     text-align: left;
     line-height: 1.7;
     padding-left: 5px;
 }

 .event-warning-list__item {
     position: relative;
     font-size: 0.75rem;
     /*12px*/
     letter-spacing: 0.06em;
     padding-left: 17px;
     /*リスト左スペース調整*/
     padding-right: 0;
     /*リスト右スペース調整*/
     color: var(--color-white);
 }

 .event-warning-list__item::before {
     content: "※";
     position: absolute;
     left: 0.0em;
     /*ドット位置調整*/
 }

 /*リスト上部のスペース調整*/
 .event-warning-list__item:first-child {
     margin-top: 1em;
 }

 /*リスト下部のスペース調整*/
 .event-warning-list__item:last-child {
     margin-bottom: 0;
 }


 /*クイズに進むボタン
------------------------*/

 .event-btm__inner-quiz {
     width: 92.8%;
     margin: 0 auto 0;
 }

 .event-btm__list-quiz {
     padding: 10px 0 20px;
 }

 .btn-kingdom-red__text-quiz {
     letter-spacing: 0.2em;
 }

 /*司令その弐*/
 .wallpaper {
     text-align: center;
     color: var(--color-white);
     margin: 25px 0 20px;
 }

 .event-2 {
     margin-top: 20px;
 }

 .event__border-2 {
     margin-top: 20px;
 }

 .event-btm--wallpaper {
     padding-bottom: 10px;
 }

 .btn-kingdom-red__text-album {
     letter-spacing: 0.05em;
 }

 .event-btm__list--wallpaper {
     padding: 0 0 10px;
 }


 /*壁紙
  トップ
----------------------------*/
 .Single-page-top {
     position: relative;
     z-index: 0;
 }

 .Single-page-top::before {
     position: absolute;
     content: "";
     top: 0px;
     left: 0px;
     width: 75px;
     height: 57px;
     background-size: contain;
     background-repeat: no-repeat;
     z-index: -1;
     background-image: url(/view/event/kingdom/img/parts_kumo1.webp);
     filter: brightness(60%);
     /*明るさ調整*/
 }

 .Single-page-top::after {
     position: absolute;
     content: "";
     top: -15px;
     right: -7px;
     width: 75px;
     height: 57px;
     background-size: contain;
     background-repeat: no-repeat;
     z-index: -1;
     background-image: url(/view/event/kingdom/img/parts_kumo2.webp);
     filter: brightness(60%);
     /*明るさ調整*/
 }

 .Single-page-top__wrapper {
     text-align: center;
     color: var(--color-white);
     margin-bottom: 40px;
 }

 .Single-page-top__title {
     font-size: 1.375rem;
     /*22px*/
     font-weight: 900;
     padding-top: 13px;
 }


 /*----------------------------------------------------
    トップページに戻るボタン
-----------------------------------------------------*/
 .return-section {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .btm-return {
     background: rgba(0, 0, 0, 0);
     padding: 10px 20px;
     border-radius: 8px;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 360px;
     height: 52.25px;
     border: 2px solid var(--color-white) !important;
 }

 .btm-return__text {
     font-size: 1.25rem;
     font-weight: 700;
     letter-spacing: 0.05em;
     text-align: center;
 }

 .warning-content--quiz {
     margin-bottom: 0;
 }

 .return-section__inner {
     margin-bottom: 43px;
 }


 /*----------------------------------------------------
  壁紙 表示
-----------------------------------------------------*/
 /*デザイン共通*/
 .wallpaper-image {}

 .wallpaper-image__wrapper {
     margin-bottom: 15px;
 }

 .wallpaper-image-body {
     display: block;
     width: 100%;
     height: auto;
     margin: 53px auto 15px;
 }

 .wallpaper-image {
     width: 100%;
     height: auto;
 }

 .wallpaper-image__text {
     font-size: 0.9375rem;
     /*15px*/
     font-weight: 500;
     color: var(--color-white);
     text-align: center;
 }

 /*----------------------------------------------------
  画面下ボタン
-----------------------------------------------------*/
 /*カスタマイズ*/
 .wallpaper-btm__list {
     gap: 7px;
 }

 .wallpaper-btm__inner {
     padding-bottom: 27px;
 }

 /*キングダム ボタン 赤
----------------------------*/
 .btn-kingdom-red {
     display: flex;
     /* 中のテキストをflexで中央に */
     text-align: center;
     justify-content: center;
     align-items: center;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: contain;
     background-color: transparent;
     /*透過*/
 }

 .btn-kingdom-red__text {
     font-size: 1.25rem;
     /*20px*/
     font-weight: 700;
     padding: 30px 0;
     letter-spacing: 0.05em;
 }

 .btn-kingdom-red__text>span {
     display: block;
     padding-bottom: 10px;
 }

 /*キングダム ボタン オレンジ*/
 .btn-kingdom-orange {
     display: flex;
     /* 中のテキストをflexで中央に */
     text-align: center;
     justify-content: center;
     align-items: center;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: contain;
     background-color: transparent;
     /*透過*/
 }

 .btn-kingdom-orange__text {
     color: var(--color-black);
     font-size: 1.25rem;
     /*20px*/
     font-weight: 700;
     letter-spacing: 0.05em;
     padding: 10.5px 0;
 }

 .btn-kingdom-orange__text>span {
     display: block;
     padding-bottom: 0px;
 }



 /*オリジナルアルバム
  トップ
----------------------------*/
 .album-top {
     position: relative;
     z-index: 0;
 }

 .album-top::before {
     position: absolute;
     content: "";
     top: 0px;
     left: 0px;
     width: 75px;
     height: 57px;
     background-size: contain;
     background-repeat: no-repeat;
     z-index: -1;
     background-image: url(/view/event/kingdom/img/parts_kumo1.webp);
     filter: brightness(60%);
     /*明るさ調整*/
 }

 .album-top::after {
     position: absolute;
     content: "";
     top: -15px;
     right: -7px;
     width: 75px;
     height: 57px;
     background-size: contain;
     background-repeat: no-repeat;
     z-index: -1;
     background-image: url(/view/event/kingdom/img/parts_kumo2.webp);
     filter: brightness(60%);
     /*明るさ調整*/
 }

 .album-top__wrapper {
     text-align: center;
     color: var(--color-white);
     margin-bottom: 20px;
 }

 .album-top__title {
     font-size: 1.375rem;
     /*22px*/
     font-weight: 900;
     padding-top: 13px;
 }

 .album-top__title-deadline {
     font-size: 0.9378rem;
     /*15px*/
     font-weight: 400;
     margin-top: 25px;
     margin-bottom: 10px;
 }

 /*セレクトボックス*/
 .select-Wrap {
     display: block;
     position: relative;
 }

 select {
     appearance: none;
     display: block;
     width: 282px;
     height: 45px;
     padding: 0 30px 0 10px;
     /* 上下paddingをゼロに iPhone実機文字ずれ対応*/
     margin: 0 auto;
     font-size: 1.4375rem;
     line-height: 45px;
     /* 高さと同じにする  iPhone実機文字ずれ対応*/
     vertical-align: middle;
     color: var(--color-black);
 }

 .select-Wrap::after {
     position: absolute;
     right: 90px;
     top: 0;
     bottom: 0;
     margin: auto;
     content: '';
     display: block;
     width: 10px;
     height: 10px;
     border-right: 1px solid #000;
     border-bottom: 1px solid #000;
     transform: rotate(45deg);
 }

 select:focus {
     outline: none;
     /*セレクトボックスの選択色を変える場合は有効にする*/
     /*border: 2px solid #ff8800;*/
     /*border-radius: 4px;*/
 }


 /*----------------------------------------------------
  アルバム サムネイル表示
-----------------------------------------------------*/
 /*デザイン共通*/
 .album-image__wrapper {
     margin-bottom: 45px;
 }

 /*デザイン共通*/
 .album-image__wrapper {
     padding-top: 1px;
     margin-bottom: 44px;
 }

 .album-image-body {
     color: var(--color-white);
     text-align: center;
 }

 /*タイトルバー*/
 .album-image__title {
     font-size: 1.1875rem;
     /*19px*/
     margin: 11px;
     position: relative;
     z-index: 0;
 }

 .album-image__title::before {
     position: absolute;
     content: "";
     top: 10px;
     left: 18px;
     width: 106px;
     height: 10px;
     background-size: cover;
     background-repeat: no-repeat;
     z-index: -1;
     background-image: url(/view/event/kingdom/svg/bk_score_red.svg);
     filter: brightness(100%);
     /*明るさ調整*/
 }

 .album-image__title::after {
     position: absolute;
     content: "";
     top: 10px;
     right: 15px;
     width: 106px;
     height: 10px;
     background-size: cover;
     background-repeat: no-repeat;
     z-index: -1;
     background-image: url(/view/event/kingdom/svg/bk_score_red.svg);
     filter: brightness(100%);
     /*明るさ調整*/
 }

 /*サムネイル画像表示*/
 .thumbnail-image-ul__wrapper {
     width: 91.6%;
 }

 .thumbnail-image-ul {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     /* 3列 */
     gap: 5px;
     /* 画像間の余白 */
     list-style: none;
     padding: 0;
     margin: 0 auto;
 }

 .thumbnail-image-list {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .thumbnail-image {
     max-width: 100%;
     height: auto;
 }

 /*カスタマイズデザイン シークレット*/
 .thumbnail-image-ul__secret {
     display: flex;
     /* gridをflexに切り替え */
     justify-content: center;
     /* 横方向中央寄せ */
     width: calc(32.1% - 10px);
 }

 .album-image__wrapper--secret {
     margin-bottom: 65px;
 }


 /*----------------------------------------------------
  トップページに戻るボタン
-----------------------------------------------------*/
 .return-section {
     display: flex;
     justify-content: center;
     /* 横中央 */
     align-items: center;
     /* 縦中央にしたいなら親に高さ必要 */
 }

 .btm-return {
     background: rgba(0, 0, 0, 0);
     padding: 10px 20px;
     border-radius: 8px;
     display: flex;
     /* ボタン内の文字を中央揃え */
     justify-content: center;
     align-items: center;
     width: 360px;
     height: 52.25px;
     border: 2px solid var(--color-white) !important;
 }

 .btm-return__text {
     font-size: 1.25rem;
     /*20px*/
     font-weight: 700;
     letter-spacing: 0.05em;
     text-align: center;
 }

 .warning-content--quiz {
     margin-bottom: 0;
 }

 .return-section__inner {
     margin-bottom: 40px;
 }


 /*  メインコンテンツ
   クイズ
----------------------------------------------*/
 .event {
     margin: 5px 0;
 }

 .page-content__wrapper {
     width: 91.6%;
     margin-left: auto;
     margin-right: auto;
     border: 2px solid var(--color-white);
     position: relative;
     z-index: 0;
 }

 .quiz {
     text-align: center;
     color: var(--color-white);
     margin-bottom: 40px;
 }

 .quiz-title {
     font-size: 1.375rem;
     /*22px*/
     font-weight: 900;
     letter-spacing: 0.06em;
     line-height: 1.3;
 }

 .quiz-title>span {
     font-size: 1.0625rem;
     /*17px*/
     color: #30C1FF;
 }


 /*クイズに進むボタン
------------------------*/
 .event-btm__inner-quiz {
     width: 92.8%;
     margin: 0 auto 0;
 }

 /*クイズ メイン
----------------------------*/
 .event-quiz {
     position: relative;
     z-index: 0;
 }

 .event-quiz::before {
     position: absolute;
     content: "";
     top: 0px;
     left: 0px;
     width: 150px;
     height: 114px;
     background-size: contain;
     background-repeat: no-repeat;
     z-index: -1;
     background-image: url(/view/event/kingdom/img/parts_kumo1.webp);
     filter: brightness(60%);
     /*明るさ調整*/
 }

 .event-quiz__wrapper {
     width: 91.6%;
     margin-left: auto;
     margin-right: auto;
 }


 /*クイズボタンレイアウト
-------------------------------*/
 .ul-quiz {
     text-align: center;
 }

 .ul-quiz__list {
     display: flex;
     flex-direction: column;
     justify-content: center;
     /* 横中央 */
     align-items: center;
     /* 縦中央にしたいなら親に高さ必要 */
     gap: 0px;
     padding: 15px 0 0;

 }

 .ul-quiz__list:first-child {
     padding: 0;
 }

 .btn-kingdom-red__quiz-on {
     height: 76px;
     width: 330px;
     background-size: cover;
 }

 .btn-kingdom-red__quiz-off {
     height: 68px;
     width: 330px;
     background-size: cover;
 }

 .btm-quiz-main--text {
     font-size: 1.25rem;
     /*20px*/
     font-weight: 700;
     letter-spacing: 0.05em;
     margin: 0;
     padding-left: 2.2em;
 }

 .btm-quiz-main--text>span {
     display: block;
     padding-bottom: 10px;
 }

 .btm-text-off {
     opacity: 0.5;
 }

 /*剣のアイコン*/
 .btn--swords {
     position: relative;
 }

 .btn--swords::before {
     position: absolute;
     content: "";
     left: 4px;
     width: 31px;
     height: 31px;
     background-size: contain;
     background-repeat: no-repeat;
     z-index: 1;
     background-image: url(/view/event/kingdom/img/crossedswords.webp);
     filter: brightness(100%);
     /*明るさ調整*/
 }

 .event__border--quiz-main {
     margin-top: 23px;
 }

 .quiz--main {
     margin-bottom: 32px;
     padding-top: 30px;
 }

 .btm-quiz__text {
     font-size: 0.9375em;
     /*15px*/
     margin: 4px 0;
 }

 .btm-quiz__text--btn-on {
     margin-top: 0;
     margin-bottom: 5px;
 }

 .event-quiz__wrapper-main {
     margin-bottom: 20px;
 }


 /*----------------------------------------------------
  トップページに戻るボタン
-----------------------------------------------------*/
 .return-section {
     display: flex;
     justify-content: center;
     /* 横中央 */
     align-items: center;
     /* 縦中央にしたいなら親に高さ必要 */
 }

 .btm-return {
     background: rgba(0, 0, 0, 0);
     padding: 10px 20px;
     border-radius: 8px;
     display: flex;
     /* ボタン内の文字を中央揃え */
     justify-content: center;
     align-items: center;
     width: 360px;
     height: 52.25px;
     border: 2px solid var(--color-white) !important;
 }

 .btm-return__text {
     font-size: 1.25rem;
     /*20px*/
     font-weight: 700;
     letter-spacing: 0.05em;
     text-align: center;
 }

 .warning-content--quiz {
     margin-bottom: 0;
 }

 .return-section__inner {
     margin-bottom: 43px;
 }


 /*モーダルここから
------------------------------------*/
 /*モーダル共通
------------------------------------*/
 .modal__inner {
     width: 350px;
     height: auto;
     padding-bottom: 20px;
     margin: 0 auto;
     background-color: var(--color-white);
     text-align: center;
     max-height: 90vh;
     /* ← 画面の高さに収まるように */
     overflow-y: auto;
     /* ← 内容がはみ出したらスクロール */
 }

 .modal__title {
     font-size: 1.1875rem;
     /*19px*/
     font-weight: 900;
     letter-spacing: 0.03em;
     color: var(--color-black);
     padding: 16px 0 6px;
     position: relative;
 }

 /*雲左*/
 .modal__title::before {
     position: absolute;
     content: "";
     bottom: -18px;
     left: 25px;
     width: 37px;
     height: 100%;
     background-image: url("/view/event/kingdom/svg/cloud_left.svg");
     background-size: contain;
     background-repeat: no-repeat;
 }

 /*雲右*/
 .modal__title::after {
     position: absolute;
     content: "";
     bottom: -18px;
     right: 24px;
     width: 35px;
     height: 100%;
     background-image: url("/view/event/kingdom/svg/cloud_right.svg");
     background-size: contain;
     background-repeat: no-repeat;
 }


 /*背景 オーバーレイ透過処理*/
 .modal-overlay {
     position: fixed;
     /* 画面全体に固定 */
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: rgba(0, 0, 0, 0.8);
     /* 黒の透過80% */
     display: flex;
     /* モーダルを中央寄せ */
     justify-content: center;
     align-items: center;
     z-index: 100;
     /* 他要素より前に出す */
 }

 /*背景 オーバーレイ透過処理*/
 .modal-overlay {
     position: fixed;
     /* 画面全体に固定 */
     inset: 0;
     width: 100vw;
     min-width: var(--sp-width);
     height: 100vh;
     background: rgba(0, 0, 0, 0.8);
     /* 黒の透過80% */
     display: flex;
     /* モーダルを中央寄せ */
     justify-content: center;
     align-items: center;
     z-index: 100;
     /* 他要素より前に出す */
 }


 /*クローズボタンデザイン*/
 .btn-modal__close {
     position: absolute;
     /* モーダル枠に対して絶対配置 */
     top: 15px;
     right: 6vw;
     width: 32px;
     height: 32px;
     z-index: 1;
 }

 .btn-modal__close::before,
 .btn-modal__close::after {
     /* 共通設定 */
     content: "";
     position: absolute;
     top: 50%;
     right: 50%;
     transform: translateY(-50%);
     width: 1px;
     /* 棒の幅（太さ） */
     height: 47px;
     /* 棒の高さ */
     background: var(--color-white);
     transform-origin: center;
 }

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

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

 /*モーダルのみ適用
実機横幅430px以下のデザイン崩壊対応
----------------------------------*/
 /* .page-content {
     width: 100%;
 } */




 /*カスタマイズ
/*キャラクターを選択する デザイン
------------------------------------*/
 .character-selection {}

 .character {
     display: flex;
     flex-wrap: wrap;
     margin: 0 auto;
 }

 .character__inner {
     display: flex;
     flex-direction: column;
     padding-left: 28px;
 }

 .kyoukai {
     padding-left: 17px;
 }

 .ouhon {
     padding-left: 0;
 }

 .character__img {
     display: block;
     margin-top: auto;
     width: 141px;
     height: auto;
 }

 .character__title {
     font-size: 1.125rem;
     /*18px*/
     font-weight: 700;
     margin: 5px 0;
 }

 .ouhon>.character__img {
     width: 159px;
 }

 .ouhon>.character__title {
     padding-left: 1em;
 }

 /*キングダム ボタン オレンジ シャドー*/
 .btn-kingdom-oranges {
     display: flex;
     /* 中のテキストをflexで中央に */
     text-align: center;
     justify-content: center;
     align-items: center;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: contain;
     background-color: transparent;
     /*透過*/
 }

 .btn-kingdom-oranges__text {
     color: var(--color-black);
     font-size: 1.25rem;
     /*20px*/
     font-weight: 700;
     letter-spacing: 0.05em;
     padding: 10.5px 0;
 }

 .btn-kingdom-oranges__text>span {
     display: block;
     padding-bottom: 10px;
 }

 .event-btm__list--character {
     padding: 10px 0;
 }


 /*カスタマイズ
  クイズ挑戦者のランク分布 デザイン
-------------------------------*/
 .quiz-rank-distribution {}

 .quiz-rank-distribution__inner {
     height: 399px;
 }

 .quiz-rank-distribution__title {
     margin-top: 10px;
     padding-left: 0.2em;
     letter-spacing: 0.03em;
 }

 /*雲左*/
 .quiz-rank-distribution__title::before {
     bottom: -20px;
     left: 20px;
     width: 37px;
     height: 100%;
 }

 /*雲右*/
 .quiz-rank-distribution__title::after {
     bottom: -23px;
     right: 16px;
     width: 35px;
     height: 100%;
 }

 /*テーブルレイアウト*/
 .horizontal-table {
     border: 1px solid #ddd;
     width: 84.285%;
     margin: 20px auto 0;
 }

 .horizontal-table__inner {
     width: 100%;
 }

 .horizontal-table__body {
     font-size: 1.1875rem;
     /*19px*/
     font-weight: 900;
     letter-spacing: 0.05em;
 }

 .horizontal-table__header {
     width: 50%;
     height: 39px;
     padding-left: 0.5em;
     background-color: #efefef;
     border-bottom: 1px solid #ddd;
     text-align: left;
 }

 .horizontal-table__text {
     padding-left: 0.5em;
     border-bottom: 1px solid #ddd;
     text-align: center;
 }

 .horizontal-table__row:last-child .horizontal-table__header,
 .horizontal-table__row:last-child .horizontal-table__text {
     border-bottom-width: 0;
 }

 /*テーブル背景カラー*/
 .horizontal-table__color01 {
     background-color: #E2C56D;
 }

 .horizontal-table__color02 {
     background-color: #939393;
 }

 .horizontal-table__color03 {
     background-color: #D5D6D6;
 }

 .horizontal-table__color04 {
     background-color: #F9B361;
 }

 .horizontal-table__color05 {
     background-color: #F0C088;
 }

 .horizontal-table__color06 {
     background-color: #D5B287;
 }

 .horizontal-table__color07 {
     background-color: #B59C80;
 }