@charset "UTF-8";


 /* モーダルのZ-index */
 .remodal-overlay {
   z-index: 10000;
 }

 /* モーダルウィンドウの基本設定 */
 .remodal {
   max-width: 500px;
   padding: 25px;
   box-sizing: border-box;
   text-align: center;
   /* (変更) 全体を中央揃えに */
 }

 /* 導入テキスト (要求1 & 2) */
 .remodal p.modal-intro {
   font-size: 16px;
   line-height: 1.6;
   text-align: left;
   margin: 0 0 20px 0;
   color: #333;
 }

 /* (新規) ボタン前の説明 (要求3) */
 .remodal .modal-plan-description {
   font-size: 14px;
   font-weight: bold;
   color: #000;
   margin: -10px 0 10px 0;
   text-align: center;
 }

 /* ボタン (Safety Pack) (要求4) */
 .remodal a.modal-button {
   display: block;
   padding: 15px;
   text-decoration: none;
   color: #fff;
   font-weight: bold;
   font-size: 18px;
   text-align: center;
   border-radius: 5px;
   margin-bottom: 25px;
   transition: opacity 0.3s;
   line-height: 1.5;
   /* (変更) <br>削除のため調整 */
 }

 .remodal a.modal-button::after {
   position: absolute;
   top: 50%;
   right: 20px;
   display: block;
   content: '';
   width: 8px;
   height: 8px;
   margin-top: -4px;
   border-top: 2px solid #fff;
   border-right: 2px solid #fff;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
 }

 .remodal a.modal-button:hover {
   opacity: 0.8;
 }

 /* 赤ボタン (画像参考) */
 .remodal a.button-safety {
   background-color: #e60012;
   position: relative;
 }

 /* (変更) Techno Pack 注意書きエリア (下部全体) */
 .remodal .modal-techno-note {
   text-align: center;
   padding-top: 20px;
   border-top: 1px dashed #aaa;
 }

 /* (新規) 下部の見出し (要求5) */
 .remodal .modal-other-plans-title {
   font-size: 18px;
   font-weight: bold;
   color: #000;
   margin: 0 0 15px 0;
 }

 /* (新規) 下部のプラン一覧 (要求6 & 7) */
 .remodal .modal-other-plans-list {
   list-style: none;
   padding: 0;
   margin: 0 0 15px 0;
   text-align: left;
   display: inline-block;
   /* 中央寄せのため */
 }

 .remodal .modal-other-plans-list li {
   font-size: 14px;
   line-height: 1.6;
   color: #333;
   margin-bottom: 10px;
 }

 .remodal .modal-other-plans-list li:last-child {
   margin-bottom: 0;
   /* 最後の要素の余白を削除 */
 }

 .remodal .modal-other-plans-list li strong {
   font-size: 15px;
   color: #000;
 }

 .remodal .modal-other-plans-list li strong .check-techno-icon {
   color: #0092ff;
 }

 .remodal .modal-other-plans-list li strong .check-shaken-icon {
   color: #ff9915;
 }

 /* (新規) 下部の行動喚起 (要求8) */
 .remodal .modal-phone-prompt {
   font-size: 15px;
   line-height: 1.7;
   margin: 0 0 5px 0;
 }

 /* (変更) 電話番号リンク (要求9) - スタイルを画像に寄せる */
 .remodal .modal-techno-note a {
   padding: 15px;
   text-decoration: none;
   font-weight: bold;
   font-size: 18px;
   text-align: center;
   border-radius: 5px;
   margin-bottom: 25px;
   transition: opacity 0.3s;
   background-color: #1183d5;
   position: relative;
   display: block;
   color: #fff;
 }

 .remodal .modal-techno-note a:hover {
   opacity: 0.8;
 }

 .remodal .modal-techno-note a::after {
   position: absolute;
   top: 50%;
   right: 20px;
   display: block;
   content: '';
   width: 8px;
   height: 8px;
   margin-top: -4px;
   border-top: 2px solid #fff;
   border-right: 2px solid #fff;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
 }

 /* (変更) 電話アイコンのスタイル (Font Awesome用) */
 .phone-icon {
   margin-right: 0.3em;
   /* font-size: 0.9em; */
   /* アイコンサイズ調整 */
 }

 /* (新規) スマホのみ改行 */
 .sp-only {
   display: none;
 }

 @media screen and (max-width: 480px) {
   .sp-only {
     display: block;
     /* <br> のため block */
   }
 }

 /* レスポンシブ調整 */
 @media screen and (max-width: 960px) {
   .remodal a.modal-button {
     font-size: 16px;
   }

   /* (追加) スマホでの電話番号サイズ調整 */
   .remodal a.modal-phone-link {
     font-size: 18px;
   }
 }

 .remodal .modal-note {
   font-size: 14px;
   line-height: 1.6;
   color: #e60012;
   font-weight: bold;
   margin-bottom: 20px;
 }