.modal_block_body {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: 100000;
  background-image: url("../top_1st_img/modal-bg.jpg"); 
    background-size: cover;
    background-position: center;
}
.modal_block_body .modal_head {
  max-width: 1700px;
  margin: 0 auto;
}
.modal_block_body .modal_head img {
  width: 277px;
  height: auto;
  padding-left: 18px;
}
.modal_block_body .modal_header_inner {
width: 99%;
min-width: 1000px;
overflow: visible;
margin: 35px auto 0 auto;
}


.modal_contentouter {
  position: relative;
  font-family: arial;
  font-size: 24px;
  margin: 0 auto;
  width: 100%;
  max-width: 1700px;
  height: 85vh;
  /* ���� */
  padding-left: 30px;
  padding-right: 30px;
}
.modal_contentouter .modal_contentinner {

  /* �����E���������̒������� */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

.modal_contentouter .copy_body p.copy_main {
  line-height: 1.2em;
  font-family: "Sawarabi Mincho";
  font-weight: 600;
  text-align: center;
  font-size: 30px;
  margin-bottom: 0.5em;
}
.modal_contentouter .copy_body p.copy_sub {
  text-align: center;
  font-family: "Sawarabi Mincho";
  font-weight: 400;
  font-size: 20px;
}
.image_box {
  text-align: center;
}

.animation_fadein {
  animation: fade-in 5s;
  animation-fill-mode: forwards;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


@media (min-width: 769px){
.image_box {
  text-align: center;
}
.image_box img {
  text-align: center;
  max-width: 500px;
  max-height: 500px;
  width: 100wh;
  height: 100vh;
}
}




@media (max-width: 768px){
.modal_block_body .modal_head img {
  width: 263px;
  height: auto;
  padding-left: 0;
  margin: 0 auto 0 15px;
}
.modal_block_body .modal_header_inner {
/*text-align: center;*/
width: 100%;
min-width: unset;
overflow: visible;
margin: 35px auto 26px auto;
}
.modal_block_body .modal_head {
}
.image_box img {
  width: 86%;
  height: auto;
}
.modal_contentouter .copy_body p.copy_main {
  line-height: 1.2em;
  font-family: "Sawarabi Mincho";
  font-weight: 600;
  text-align: center;
  font-size: 24px;
  margin-bottom: 0.5em;
}
.modal_contentouter .copy_body p.copy_sub {
  text-align: center;
  font-family: "Sawarabi Mincho";
  font-weight: 400;
  font-size: 16px;
}



}

@media (min-width: 769px) {
   .modal_contentouter .modal_contentinner .image_box img {
        text-align: center;
        max-width: 1000px;
        max-height: inherit;
        width: 100wh;
        height: 100vh;
    }
}

/* --- PCで大きく表示し、スマホで切り替える最終版 --- */

/* 1. PC用の設定（画面が769px以上のとき） */
.img_pc {
    display: block !important;
    width: 1000px !important; /* ここで1000pxに固定 */
    max-width: 95vw !important; /* 画面からはみ出さないための保険 */
    height: auto !important;
    margin: 0 auto !important; /* 中央寄せ */
}

/* 2. PCの時はスマホ用を絶対に隠す */
.img_sp {
    display: none !important;
}

/* 3. スマホ用の設定（画面が768px以下のとき） */
@media screen and (max-width: 768px) {
    
    /* 箱のサイズ固定（iPhone対策） */
    .modal_contentouter .modal_contentinner {
        width: 90% !important; 
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        position: absolute !important;
    }

    /* PC用を隠す */
    .img_pc {
        display: none !important;
    }

    /* スマホ用を出す */
    .img_sp {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* アニメーション：Safariのバグを避けるため記述を整理 */
    .animation_fadein {
        /* 最初を透明にするのではなく、アニメーション側で制御する */
        -webkit-animation: simple-fade 3s ease-in-out forwards !important;
        animation: simple-fade 3s ease-in-out forwards !important;
    }
}

/* アニメーションの定義（CSSの最後に置いてください） */
@-webkit-keyframes simple-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes simple-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}