@media screen and (max-width: 767px) {
  body{
    background-color: #000;
  }
  .pc_only{
    display: none;
  }
  .menu_block{
    position: fixed;
    top: calc(35 * var(--content_width) / 375);
    right: calc(23 * var(--content_width) / 375);
    filter: drop-shadow(1px 1px 1px #000);
    z-index: 200;
  }
  .menu_block .btn_menu_link{
    display: none;
  }
  .menu_block .btn_sp_menu{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: calc(12 * var(--content_width) / 375);
    line-height: calc(17 * var(--content_width) / 375);
    gap: calc(5 * var(--content_width) / 375);
  }
  .menu_block .btn_sp_menu .menu_icon{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    width: 9px;
    height: 9px;
    margin-top: calc(2 * var(--content_width) / 375);
    line-height: 0;
  }
  .menu_block .btn_sp_menu .menu_icon div{
    width: 100%;
    height: 1px;
    
    background-color: #fff;
    transition: all 0.3s ease;
  }
  
  .content_wrapper.menu .menu_block .btn_sp_menu .menu_icon div:nth-of-type(1) {
    transform: translateY(4px) rotate(45deg);
  }
  .content_wrapper.menu .menu_block .btn_sp_menu .menu_icon div:nth-of-type(2) {
    opacity: 0;
  }
  .content_wrapper.menu .menu_block .btn_sp_menu .menu_icon div:nth-of-type(3) {
    transform: translateY(-4px) rotate(-45deg);
  }
  .content_transition,
  .content_movie_bg{
    display: none;
  }
  .modal_loading .loading_logo,
  .content_block.kv_wrapper{
    padding: calc(30 * var(--content_width) / 375) 0;
  }
  
  .modal_loading .loading_logo .logo_title,
  .content_block.kv_wrapper h1{
    padding: 0 calc(23 * var(--content_width) / 375);
    font-size: calc(25 * var(--content_width) / 375);
    line-height: calc(36 * var(--content_width) / 375);
  }
  .modal_loading .loading_logo .logo_period,
  .content_block.kv_wrapper h2{
    padding: 0 calc(23 * var(--content_width) / 375);
    font-size: calc(14 * var(--content_width) / 375);
    line-height: calc(20 * var(--content_width) / 375);
    letter-spacing: 0.01em;
  }
  
  .content_block .content_btn_block{
    display: none;
  }
  .content_block .cotnent_info_block{
    position: relative;
    padding: calc(20 * var(--content_width) / 375) calc(23 * var(--content_width) / 375) calc(60 * var(--content_width) / 375);
  }
  .content_block.content_info{
    padding: calc(20 * var(--content_width) / 375) calc(23 * var(--content_width) / 375) 0;
  }
  .content_block.kv_wrapper .cotnent_info_block{
    padding: 0;
  }
   
  .content_block .cotnent_info_block .cotnent_no{
    font-size: calc(12 * var(--content_width) / 375);
    line-height: calc(16 * var(--content_width) / 375);
    margin-bottom: calc(15 * var(--content_width) / 375);
    letter-spacing: 0.05em;
  }
  .content_block .cotnent_info_block .content_name{
    width: calc(275 * var(--content_width) / 375);
    height: calc(31 * var(--content_width) / 375);
    line-height: 0;
    background-size: 100% 100%;
  }
  .content_block .cotnent_info_block .content_name img{
    display: none;
  }
  .content_block.content1 .cotnent_info_block .content_name{ background-image: url(../images/content1_title_sp.png); }
  .content_block.content2 .cotnent_info_block .content_name{ background-image: url(../images/content2_title_sp.png); }
  .content_block.content3 .cotnent_info_block .content_name{ background-image: url(../images/content3_title_sp.png); }
  .content_block.content4 .cotnent_info_block .content_name{ background-image: url(../images/content4_title_sp.png); }
  
  .content_block .cotnent_info_block .content_movie{
    width: calc(280 * var(--content_width) / 375);
    margin: 0 auto calc(10 * var(--content_width) / 375);
  }
  #content2.content_block .cotnent_info_block .content_movie{
    position: relative;
    width: var(--content_width);
    margin: calc(-30 * var(--content_width) / 375) calc(-23 * var(--content_width) / 375) calc(-150 * var(--content_width) / 375);
    z-index: -1;
  }
  .content_block.kv_wrapper .cotnent_info_block .content_movie{
    width: 100%;
    margin: calc(10 * var(--content_width) / 375) 0;
  }
  .content_block.kv_wrapper .cotnent_info_block .content_movie video{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .content_block.kv_wrapper .content_navi{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: calc(56 * var(--content_width) / 375);
    margin: 0 auto;
  }
  .content_block.kv_wrapper .content_navi .scroll_text{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(56 * var(--content_width) / 375);
    font-size: calc(14 * var(--content_width) / 375);
    line-height: calc(20 * var(--content_width) / 375);
    background-color: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
  }
  .content_block.kv_wrapper .content_navi .scroll_line{
    width: 1px;
    margin-top: calc(-10 * var(--content_width) / 375);
    height: calc(90 * var(--content_width) / 375);
    background-color: #fff;
  }
  .content_block .cotnent_info_block .content_lead{
    font-size: calc(12 * var(--content_width) / 375);
    line-height: calc(23 * var(--content_width) / 375);
    margin-bottom: 1em;
    padding: 0 calc(14 * var(--content_width) / 375);
  }
  .content_block .cotnent_info_block .content_text{
    font-size: calc(12 * var(--content_width) / 375);
    line-height: calc(23 * var(--content_width) / 375);
    margin-bottom: calc(23 * var(--content_width) / 375);
    padding: 0 calc(14 * var(--content_width) / 375);
  }
  .content_block .cotnent_info_block .content_image_block{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(9 * var(--content_width) / 375);
  }
  
  .content_block.content_info .access_block{
    margin-bottom: calc(40 * var(--content_width) / 375);
  }
  .content_block.content_info .access_block .block_title{
    font-size: calc(32 * var(--content_width) / 375);
    line-height: calc(46 * var(--content_width) / 375);
    margin-bottom: calc(23 * var(--content_width) / 375);
    letter-spacing: 0.05em;
  }
  
  .content_block.content_info .access_block .map_block{
    width: 100%;
    height: calc(184 * var(--content_width) / 375);
    line-height: 0;
    margin-bottom: calc(23 * var(--content_width) / 375);
    
    background-image: url(../images/map_sp.jpg);
    background-size: 100% 100%;
  }
  .content_block.content_info .access_block .map_block img{
    display: none;
  }
  .content_block.content_info .access_block .info_block{
    display: flex;
    justify-content: flex-start;
    align-items: start;
    font-size: calc(14 * var(--content_width) / 375);
    line-height: calc(23 * var(--content_width) / 375);    
  }
  .content_block.content_info .access_block .info_block .info_title{
    width: 3em;
  }
  .content_block.content_info .access_block .info_block .info_detail a{
    text-decoration: underline;
  }
  .content_block.content_info .access_block .info_block+.info_block{
    margin-top: calc(15 * var(--content_width) / 375);
  }
  .content_block.content_info .about_block .block_title{
    font-size: calc(23 * var(--content_width) / 375);
    line-height: calc(33 * var(--content_width) / 375);
    margin-bottom: calc(18 * var(--content_width) / 375);
    letter-spacing: 0.05em;
  }
  .content_block.content_info .about_block .block_text{
    font-size: calc(16 * var(--content_width) / 375);
    font-weight: bold;
    line-height: calc(26 * var(--content_width) / 375);
    margin-bottom: calc(28 * var(--content_width) / 375);
  }
  .content_block.content_info .about_block .link_block{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
  }
  .content_block.content_info .about_block .link_block .btn_link{
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    font-size: calc(14 * var(--content_width) / 375);
    line-height: calc(20 * var(--content_width) / 375);
    margin-bottom: calc(14 * var(--content_width) / 375);
    gap: calc(6 * var(--content_width) / 375);
  }
  .content_block.content_info .about_block .link_block .btn_link.btn_menu_outlink::after{
    content: "";
    display: block;
    width: calc(8 * var(--content_width) / 375);
    height: calc(8 * var(--content_width) / 375);
    background-image: url(../images/icon_outlink.png);
    background-size: 100% 100%;
  }
  .content_wrapper .float_menu{
    position: sticky;
    bottom: calc(42 * var(--content_width) / 375);
    margin-top: calc(-55 * var(--content_width) / 375);
    margin-bottom: calc(10 * var(--content_width) / 375);
    left: calc(100% - (107 * var(--content_width) / 375));
    width: calc(92 * var(--content_width) / 375);
    height: calc(92 * var(--content_width) / 375);
    filter: drop-shadow(1px 1px 1px #000);
  }

  .content_wrapper .float_menu .btn_reserve{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    border: 1px solid #fff;
    border-radius: 50%;    
    opacity: 1;
  }
  .content_wrapper .float_menu .btn_reserve::after{
    content: "";
    position: absolute;
    top: calc(50% - calc(3 * var(--content_width) / 375));
    right: calc(-10 * var(--content_width) / 375);
    width: calc(20 * var(--content_width) / 375);
    height: calc(6 * var(--content_width) / 375);
    background-image: url(../images/btn_reserve_arrow.png);
    background-size: 100% 100%;
  }
  .content_wrapper .float_menu .btn_reserve .btn_reserve_text1{
    font-size: calc(16 * var(--content_width) / 375);
    line-height: calc(20 * var(--content_width) / 375); 
    letter-spacing: 0.05em;
  }
  .content_wrapper .float_menu .btn_reserve .btn_reserve_text2{
    font-size: calc(10 * var(--content_width) / 375);
    line-height: calc(20 * var(--content_width) / 375); 
  }
  
  footer{
    position: relative;
    width: 100%;
    padding: 0 calc(23 * var(--content_width) / 375);
  }
  footer .footer_inner{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px solid #fff;
    padding: calc(12 * var(--content_width) / 375) 0;
  }
  footer .footer_inner .copyright{
    font-size: calc(10 * var(--content_width) / 375);
    line-height: calc(14 * var(--content_width) / 375);
    letter-spacing: 0.1em;
  }
  
  
  .modal.modal_menu{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    overflow: hidden;
  }
  .modal.modal_menu.open{
    display: block;
  }
  .modal.modal_menu .menu_wrapper{
    position: absolute;
    top: 0;
    right: calc(-1 * var(--content_width));
    background-color: #101010;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    transition: right .5s;
  }
  .modal.modal_menu.open_action .menu_wrapper{
    right: 0;
  }
  .modal.modal_menu .menu_inner{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
    padding: calc(100 * var(--content_width) / 375) calc(65 * var(--content_width) / 375) calc(30 * var(--content_width) / 375);
    gap: calc(14 * var(--content_width) / 375);
  }
  .modal.modal_menu .menu_inner .btn_menu_link{
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    font-size: calc(14 * var(--content_width) / 375);
    line-height: calc(20 * var(--content_width) / 375);
    gap: calc(6 * var(--content_width) / 375);
    letter-spacing: 0.1em;
  }
  .modal.modal_menu .menu_inner .btn_menu_link.btn_reserve{
    margin-bottom: calc(40 * var(--content_width) / 375);
  }
  .modal.modal_menu .menu_inner .btn_menu_link.btn_menu_outlink::after{
    content: "";
    display: block;
    width: calc(8 * var(--content_width) / 375);
    height: calc(8 * var(--content_width) / 375);
    background-image: url(../images/icon_outlink.png);
    background-size: 100% 100%;
  }
  
  .modal.modal_loading.active{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 1000;
  }
  .modal_loading .loading_logo{
    position: absolute;
    left: 0;
    top: 0;
  }
  .modal_loading .loading_wrapper{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .modal_loading .loading_wrapper .loading_inner{
    display: flex;
    flex-direction: column;
    align-items: start;
  }
  .modal_loading .loading_wrapper .loading_inner .loading_label{
    font-size: calc(14 * var(--content_width) / 375);
    line-height: calc(20 * var(--content_width) / 375);
    letter-spacing: 0.1em;
  }
  .modal_loading .loading_wrapper .loading_inner .loading_progress_block{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: calc(5 * var(--content_width) / 375);;
  }
  .modal_loading .loading_wrapper .loading_inner .loading_progress_block .progress_bar{
    position: relative;
    width: calc(200 * var(--content_width) / 375);;
    height: 1px;
    background-color: #888;
  }
  .modal_loading .loading_wrapper .loading_inner .loading_progress_block .progress_bar .current{
    width: 0%;
    height: 100%;
    background-color: #fff;
  }
  .modal_loading .loading_wrapper .loading_inner .loading_progress_block .progress_per{
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
  }
  .modal_loading .loading_wrapper .loading_inner .loading_progress_block .progress_per .progress_val_txt{
    display: block;
    font-size: calc(18 * var(--content_width) / 375);
    line-height: calc(18 * var(--content_width) / 375);
    letter-spacing: 0.1em;
    width: 1.65em;
    text-align: right;
  }
  .modal_loading .loading_wrapper .loading_inner .loading_progress_block .progress_per .progress_txt{
    font-size: calc(10 * var(--content_width) / 375);;
    line-height: calc(18 * var(--content_width) / 375);;
    letter-spacing: 0.05em;
  }
}