/*
 * SP向けモーダルデザイン設定
 *
 * (一部を除き) #responsiveBaseFrame .**** の指定はチケット表示画面
 * .**** のみの指定はオンラインイベント画面
 */

 #responsiveBaseFrame .modal,
 .modal {
   visibility: hidden;
   overflow-y: scroll;
   opacity: 0;
   position: fixed;
   z-index: 100;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   transition: opacity 0.3s, visibility 0s 0.3s;
   background: rgba(0, 0, 0, 0.8);
   
   &.is-active {
     visibility: visible;
     opacity: 1;
     transition: opacity 0.3s, visibility 0s 0s;
   }
 }
 
 #responsiveBaseFrame .modal_container,
 .modal_container {
   display: flex;
   min-height: 100%;
   justify-content: center;
   align-items: center;
 
   &::after {
     content: "";
     min-height: inherit;
     font-size: 0;
   }
 }
 
 #responsiveBaseFrame .modal_inner div {
   margin: 5px auto;
   width: 85%;
   color: #666666;
   font-size: 12px;
   line-height: 1.7;
   margin: 5px auto;
   a {
     color:rgb(25, 181, 175);
     text-decoration:underline;
     }
 }
 
 .modal_inner div {
   margin: 20px auto;
   width: 85%;
 }
 
 #responsiveBaseFrame .modal_content,
 .modal_content {
   display: none;
   border-radius: 2px;
   background: #fff;
 
   .is-active & {
     display: block;
   }
 }
 
 #responsiveBaseFrame .modal_body,
 .modal_body {
   padding-top: 20px;
   margin: 0 auto;
   text-align: center;
 }
 
 .bottom-btn-flat-area {
   padding-bottom: 20px;
 }
 
 #submit-btn.btn-flat.btn-large {
   width: 230px;
   height: 12px;
   font-size: 12px;
   font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "メイリオ",
     Meiryo, "ＭＳ Ｐゴシック", Arial, verdana, sans-serif;
   display: flex !important;
 }
 
 .bottom-btn-flat-area_online-event {
   padding-top: 20px;
   padding-bottom: 20px;
   margin: 0 auto;
 }
 
 .modal .bottom-btn-flat-area {
   /* 背景を白に・×アイコンを右端に表示              */
   background: #fff url("../images/iconClose.png") no-repeat 95% 50%;
   background-size: 8px 7px;
   border: 1px solid #c9d3d3;
 
   margin: 10px; /* 外側余白を 10px に揃える  */
   padding: 5px; /* 内側余白 5px              */
 
   text-align: center; /* 中央寄せ                  */
   color: #666; /* 文字色                    */
   cursor: pointer;
 }
 
 /* リスト <li> -------------------------------------------- */
 .modal .bottom-btn-flat-area > li {
   list-style: none !important;
   list-style-type: none !important;
   list-style-image: none !important;
   margin: 0 !important;
   padding: 0 !important;
   height: auto !important;
   width: 100% !important;
   text-align: center !important;
   background: transparent !important;
   display: inline-block !important;
   width: 280px !important;
   height: 46px !important; /* 明示的に高さを指定 */
   line-height: 46px !important; /* 垂直中央揃え */
   padding: 0 20px !important;
   background: #666 !important;
   color: #fff !important;
   text-decoration: none !important;
   border-radius: 4px !important;
   font-size: 14px !important; /* フォントサイズを統一 */
   text-align: center !important;
   box-sizing: border-box !important;
 }
 
 /* ボタン本体（同意して表示） ------------------------------ */
 #submit-btn {
   display: block; /* ブロック化                 */
   width: 230px; /* 固定幅（A の値）           */
   padding: 20px 0 0; /* 上だけ 20px 開ける         */
 
   color: #333; /* 文字色                     */
   background: transparent;
   text-decoration: underline;
   font-size: 12px;
   line-height: 20.4px;
 }
 
 /* 「×」アイコンで閉じるボタンを使う場合 ------------------- */
 .modal .modalClose {
   /* 必要に応じて表示／非表示を切り替える */
   display: none; /* 最初は隠す                 */
 }
 
 /* モーダル自体（クリックで閉じる領域） -------------------- */
 .modal.is-active {
   /* 既に `.modal` で display:flex; を指定済みなら不要
      ここでは明示的に残しています                         */
   display: flex;
   align-items: center;
   justify-content: center;
 }