@charset "utf-8";



/********************** top *******************************/

body { box-sizing: border-box; margin: 0; padding: 32px; }
.outer-frame { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; border: 1.5vw solid #000000; outline: 2px solid #07C138; outline-offset: -2px; box-sizing: border-box; pointer-events: none; z-index: 9996; }
.outer-frame::before { content: ""; position: absolute; top: -30px; left: -30px; width: 100vw; height: 2px; background-color: #D71F21; z-index: 9997; }
.site-frame span {
  position: fixed;
  z-index: 9998;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.site-frame .corner-bl, .corner-br { width: 12vw;height: 4vw;}
.site-frame .corner-bl { bottom: -2px; left: 0; background-image: url(../images/parts/frame_corner.png); }
.site-frame .corner-br { bottom: -2px; right: 0; transform: scaleX(-1); background-image: url(../images/parts/frame_corner.png); }

.site-frame .side-l, .site-frame .side-r { width: 1.5vw; height: 25vw; top: 50%; }
.site-frame .side-l { left: 0; transform: translateY(-50%); background-image: url(../images/parts/frame_side.png); }
.site-frame .side-r { right: 0; transform: translateY(-50%) scaleX(-1); background-image: url(../images/parts/frame_side.png); }

@media only screen and (max-width: 835px){
.outer-frame {border: 3vw solid #000000; }
.site-frame .corner-bl, .corner-br { width: 18vw;height:7.5vw;}
.site-frame .side-l, .site-frame .side-r { width: 3vw; height: 140vw; top: 50%; }
  .site-frame .side-l { left: 0; transform: translateY(-50%); background-image: url(../images/parts/frame_side_sp.png); }
  .site-frame .side-r { right: 0; transform: translateY(-50%) scaleX(-1); background-image: url(../images/parts/frame_side_sp.png); }
}


main img{ width: 100%;}

.container{width:90%; margin:0 auto;}

.top_main{ width:100%; position:relative; font-family: var(--f_noto);margin-bottom: 7vw;}
.top_main img{ width:100%;}
.top_main a.anotherkv{background-color: var(--c_blue); display: block; border-top: 2px solid var(--c_theme_color);border-bottom: 2px solid var(--c_theme_color); padding: min(1.2em, 3vw) 0 min(1.1em, 2.2vw); display: flex; justify-content: center; gap: 1vw;
img{filter: brightness(1.15); width:100%; max-width: 370px; aspect-ratio: 800 / 81; position: relative;transition: transform 0.2s ease;
&:hover{transform: translateY(3px); opacity: 1;}}
&::after{content: ""; background-image: url(../images/kv/teaser_btn_arrow.svg); width: min(50px, 6vw); aspect-ratio:168 / 40;background-size: contain; background-repeat: no-repeat; background-position: center;}}
    .top_kv_wrap{position: relative;
.top_kv {position: relative;overflow: hidden; width: calc(100% - 3vw); margin: 0 auto;margin-top:1.5vw;
  .kv_img_v1, .kv_img_v2 { width: 100%; height: auto; display: block; transition: opacity 0.5s ease; }
  .kv_img_v1 { position: relative; z-index: 1; opacity: 1; }
  .kv_img_v2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; opacity: 0; }
  
  .kv_dots { position: absolute; right: 20px; bottom: min(20px, 3vw); display: flex; flex-direction: column; gap: min(15px, 3vw); z-index: 10;
    span { display: block; width: min(20px, 4vw); height: min(20px, 4vw); border: 1px solid #ffffff; transform: rotate(45deg); box-sizing: border-box; cursor: pointer; transition: opacity 0.3s ease; }
  }

  &.active-v1 {
    .kv_img_v1 { opacity: 1; } .kv_img_v2 { opacity: 0; }
    .kv_dots {
      .kv_dot_v1 { background-color: var(--c_blue); opacity: 1; pointer-events: auto; }
      .kv_dot_v2 { background-color: transparent; opacity: 0.5; pointer-events: auto; } /* ※ボタンとして押せるようにnoneではなく0.5に調整 */
    }
  }
  
  &.active-v2 {
    .kv_img_v1 { opacity: 0; } .kv_img_v2 { opacity: 1; }
    .kv_dots {
      .kv_dot_v1 { background-color: transparent; opacity: 0.5; pointer-events: auto; }
      .kv_dot_v2 { background-color: var(--c_blue); opacity: 1; pointer-events: auto; }
    }
  }
}
.main_logo{position: absolute; bottom: 1vw;transform: translateX(-50%); left: 50%;width:min(650px, 40vw); z-index: 5;}
}


@media only screen and (max-width: 835px){
    .top_main{margin-bottom: 10vw; padding-top: var(--nav_trigger_size);}
    .top_main .main_l{ position: inherit; height: auto; top: 0; max-height: none; width: 100%; left: 0;}
    .top_main .main_l .date{ width: 80%;}
    .top_main .top_cast{ width: 100%; padding: 0;}
	.top_main .main_l h1 {  margin: 10vw auto 8vw;  transform: translate(2%, 0px);}
  .top_main a.anotherkv{
img{width:40%;}}
.top_kv_wrap{
  .top_kv{margin-top: unset;}
  }
}

/* .comingsoon { margin-bottom: 13vw; margin-top: -2.5vw; position: relative; z-index: 2;}
.comingsoon .txt1{ width: 100%; margin: 0 auto 15vw;}
.comingsoon .txt2{ width: 80%; margin: 0 auto ; } */

.sns{font-family:var(--f_vina); font-size: 3vw; line-height: 1em;margin-bottom: 9vw;}
.sns h2{ margin-bottom: 0.5em;}
.sns ul{ display: flex; justify-content: center; gap: 2%;}
.sns li{ width: 70px;}

@media only screen and (max-width: 835px){
    /* .comingsoon { width: 100%; margin: 0 auto 15vw;}
	.comingsoon .txt1{ width: 80%; margin-bottom: 10vw; }
	.comingsoon .txt2{ width: 100%; } */
	
	.sns{ font-size: 8vw;}
	.sns li{ width: 60px;}
}



/* ---------- TEXT SLIDE ---------- */
.textslide { width: 100vw; height: auto;padding: 0; transform-origin: center; pointer-events: none;font-family:var(--font_en); font-size:10vw; line-height: 1; top: 0; left: 0; display: flex; flex-wrap: wrap; align-content: center; position: absolute;}
.textslide .inner { display: flex; }
.textslide .inner span {  color: /*rgba(0, 0, 0, 0)*/#fff; /*text-stroke: 5px #fff; -webkit-text-stroke: 5px #fff; */font-weight: bold;  white-space: nowrap; margin-bottom: 0; line-height: 1em; display: block; margin-right: 0.25em; width: auto; opacity: 1;}
.textslide .inner .slide_l { display: block; animation: slide_l1 80s linear infinite; }
.textslide .inner .slide_r { display: block; animation: slide_r1 80s linear infinite; }

.textslide.bgslide{transform: translate(-50%, -50%) rotate(-20deg);
    width: 100vw;
    position: fixed;
    z-index: -1;
    left: 50%;
    top: 50%;}
.textslide.bgslide .inner{height: 10vw; width: 100vw; }
.textslide.bgslide .inner:first-of-type{ height: 60vw;}
.textslide .inner:nth-of-type(3) span{}

.textslide.movie_bg { overflow: hidden; font-size: 1rem; line-height: 1;    transform: translate(0,-50%); top: 50%;}
.textslide.movie_bg span{ width: 90vw; opacity: 1;}

@keyframes slide_l1 { 0% { transform: translateX(-100%); }
  to { transform: translateX(-200%); } }
@keyframes slide_r1 { 0% { transform: translateX(-100%); }
  to { transform: translateX(0%); } }

@media only screen and (max-width: 835px){
    .textslide.bgslide{  width: 80lvh; height: 80lvh; font-size: 10lvh; }
	.textslide.bgslide .inner{  height: 10lvh }
	.textslide.bgslide .inner:first-of-type{ height: 80lvh;}
}


/* アニメーション */
.loader{background-image:url(../images/logo/logo.webp);background-repeat : no-repeat; background-size:16%; background-position : 50% 46%; z-index:10001; position:absolute; top:0; left:0; width: 100%; height: 100vh;  }
.loader_bg{ background-color:#000000; /*background-image: url("../images/load_bg.webp");*/ background-size: cover; background-position: center;width:0%; height:100vh; position:absolute; top:0; z-index: 10000; transition: 0.5s ease-out; }
.loader_bg.left{ left:0;}
.loader_bg.right{ right:0;}


.intro_loader{ overflow:hidden; height:100vh;}
.intro_loader .loader_bg{ width: 50%;}

.intro00 .top_cast{ opacity: 0; transform: scale(1.7);}
.intro00 .main_l{ opacity: 0; top: 15vw; }
.intro00 .catch{ opacity: 0; top:-5vw;}
.intro00 .bgslide{ opacity: 0;}

.intro01 .main_l,
.intro01 .catch,
.intro01 .top_cast,
.intro00 .bgslide{ transition: 2s;}

@media only screen and (max-width: 835px){
    .loader{ background-size:40%;}
    .intro00 .main_l{  top: 130vw; }
    .intro00 .catch{  top:60vw;}
}


.top_date{display: flex; gap: 3%; margin-bottom: 7vw;
    .top_date_img{width:50%;
        img{width: 100%;max-width: 643px; }
    }
}

@media only screen and (max-width: 835px){
.top_date{flex-direction: column; gap:5vw;margin-bottom: 12vw;
    .top_date_img{width:87%; margin: 0 auto;
    }
}
}

.top_news{background-color: #fff; border: 1px solid #000; padding:3% 5%; margin: 0 auto;  margin-bottom: 9vw; position: relative; opacity: .9;
  &::before{position: absolute; top: 0; left:50%; transform: translateX(-50%); width: 25vw; height: 1vw; background-image: url(../images/parts/top_news_deco.svg); background-size: contain; background-repeat: no-repeat; background-position: center;content:"";}
  .top_news_sq{position: absolute;
  &.tl{ transform: none; top: -.4vw; left: -.4vw;}
  &.tr{ transform: scaleX(-1); top: -.4vw; right:-.4vw;}
    &.bl{ transform: scaleY(-1); bottom: -.4vw; left: -.4vw;}
  &.br{ transform: scale(-1, -1); bottom: -.4vw; right: -.4vw;} 
}
    .cmn_news_list{ margin-bottom: 5.6vw;
        .cmn_news_rack{
            .news_link{color: var(--c_theme_color); display: flex; gap: 3%;border-bottom: 1px solid #000;padding: 3% 0;
              &.disactive{pointer-events: none;}
            .date{font-size: min(54px, 10vw); font-family: var(--f_vina); font-weight: 400; margin: 0;line-height: .7em;
            span{font-size: .6em;}}
            .title{font-size: clamp(14px, 2vw, 18px);line-height: 2.5em;font-weight: 500;}
            }
        }
    }
}

@media only screen and (max-width: 835px){
.top_news{width: calc(100% - 3vw); border-top:1px solid #000; border-bottom: 1px solid #000;padding:5% 5% 12%;
  &::before{width: 80vw; height: 4vw;}
  .top_news_sq{display: none;
}
    .cmn_news_list{ margin-bottom: 5.6vw;
        .cmn_news_rack{
            .news_link{flex-direction: column; text-align: left;
            }
        }
    }
}
}


.in_news{
 .cmn_news_list{margin-bottom: 6vw; 
    .cmn_news_rack{
        .news_link{color: var(--c_theme_color); display: flex; gap: 3%;  background-color: #fff; border: 1px solid #000; padding: 2% 3%; margin-bottom: .7em;
            .date{font-size: min(54px, 9vw); font-family: var(--f_vina); font-weight: 400; margin: 0;line-height: .7em;
            span{font-size: .7em;}}
            .title{font-size: clamp(15px, 2.5vw, 18px);line-height: 2.5em;font-weight: 500;}
            &.disactive{pointer-events: none;}
          }}
 }
 .single_news{background-color: #fff; border: 1px solid #000;margin-bottom: 6vw; text-align: left;
    .title_block{border-bottom: 1px solid #000; padding: 3% 4%;
    .date{font-size: min(34px, 9vw); font-family: var(--f_vina); font-weight: 400; margin: 0 0 .3em;line-height: .7em;padding:.2em 0 0;
    span{font-size: .7em;}}
    .title{font-size: clamp(18px, 2.6vw,22px);font-weight: 500;}
    }
    .cmn_write_box_outer{padding: 3% 4%;
        .cmn_write_box{font-size: clamp(15px, 2vw, 16px); 
          h3{font-size: 1.2em; border-left: 3px solid #000; padding-left: .5em; font-weight: 600;margin-bottom: .3em;}
          h4{background-color: #000; color: #fff; padding: .2em .4em .3em; line-height: 1.3em;display: inline-block;margin-bottom: .3em; font-size: 1.1em;}
          h5{position: relative; display: block; margin-bottom: .3em; font-size: 1.08em; line-height: 1.4em; font-weight: 600; padding-left: .7em;
          &::before{position: absolute; display: block; content: ""; top: .75em; left: 0; width: .3em; height: .6em; background-color: #000; transform: translateY(-50%); clip-path: polygon(0 0, 0% 100%, 100% 50%);}}
            p{
            &:last-child{margin-bottom: 0;}}
        }
    }
 }
}

@media only screen and (max-width: 835px){
  .in_news{
 .cmn_news_list{
    .cmn_news_rack{
        .news_link{flex-direction: column;text-align: left;padding:5% 3%;
          .date{margin-bottom: .3em;}
          .title{line-height: 1.5em;}
            }}
 }
}
}

#schedule{padding:0 0 calc(var(--base_distance) * 0.7);
    .schedule_block{margin-bottom: 2em;
        .date_img{max-width: 756px;
        &.hyogo{max-width: 900px;}}
        .hoshi_img{
            &.hyogo{width: 40%;}
        }
    }
    .w_icon{
      .w_icon_list{display: flex;font-size: min(18px, 3.5vw); line-height: 1.3em;
        &:not(:last-child){margin-bottom: .3em;}
      img{width: min(24px,5vw);}}
    }
}

@media only screen and (max-width: 835px){
  #schedule{
    .schedule_block{
        .date_img{max-width: 756px;
        &.hyogo{max-width: unset;}}
        .hoshi_img{
            &.hyogo{width: 100%;}
        }
    }
}
}

#ticket{
    .price_list{background-color: #fff; border:1px solid #000;
        .price_rack{ border-bottom: 1px solid #000;
            &:last-of-type{border-bottom: unset;}
            .price_flex{display: flex; justify-content: center; padding: 4% 3% 3%; gap: 3%;
            .price_title{font-size: min(40px, 5vw); font-weight: 700;line-height: 1em;
              span{font-size: .4em;}
            }
        .price{font-size: min(40px, 6vw); font-weight: 700; margin-bottom: 0;line-height: 1em;
        span{font-size: .4em;}}}
        .border_bottom{border-bottom: 1px solid #000;}
        }
    }
    .ticket_sec{text-align: left; background-color: #FFFFFFCC; border: 1px solid #000; padding: 4%; margin-bottom: 3vw;
      .cmn_h_title_03{font-size: min(32px, 4.7vw); font-weight: 700; line-height: 1em; margin-bottom: .7em;padding: .2em 0 0;}
      .ticket_list{
        .ticket_box{ background-color: #fff; padding: 3%; margin-bottom: 1em;
          .ticket_title{color: #00A12A; font-weight: 700; font-size: min(28px, 4.2vw);line-height: 1.4em;margin-left: 1.5em; margin-bottom: .4em;
            &:before{content: "■"; display: inline-block; transform: rotate(45deg); margin-left: -1.5em; margin-right: 0.3em;}
          }
          .period{font-size: min(18px, 3.8vw); font-weight: 500;}
          .cmn_link_btn{display: block; background-color:#D71F21; padding: min(25px, 3vw); font-size: min(20px, 3.5vw); font-weight: 700; color: #fff; margin: 1em 0; text-align: center;transition: transform 0.2s ease;
          &:hover{transform: translateY(6px);}}
        &:last-of-type{margin-bottom: 0;}
        }
      }
      p{
          &:last-child{margin-bottom: 0;}
        }
    }
}

@media only screen and (max-width: 835px){
  #ticket{
    .price_list{
        .price_rack{
            .price_flex{flex-direction: column; gap: .5em; text-align: left; padding: 4% 4% 3%;
              .price_title{
              span{font-size: .6em;}
            }
            .price{
        span{font-size: .6em;}}}
        }
    }
    .ticket_sec{padding: 5%;
      p{font-size: 15px;}
    }
}
}

#cast {padding:0 0 calc(var(--base_distance) * 0.7);
  .cast_block {
    .cast_list {
      &.mod_flex_box { display: flex; flex-wrap: wrap; gap: var(--base_gap); justify-content: center;
        .box_02 { width: calc((100% - var(--base_gap) * 1) / 2); }
        .box_04 { width: calc((100% - var(--base_gap) * 4) / 4); }
        .box_03 { width: calc((100% - var(--base_gap) * 1) / 3); 
        &:nth-child(3){margin-bottom: 1em;} }
        .box_02, .box_03, .box_04{
          figure { border: 2px solid #000; position: relative; margin: 0 auto; width: 100%; margin-bottom: .6em;
            img { width: 100%; height: auto; display: block; }
          }
          .name_block { font-weight: 700;
            .part { font-size: min(16px, 1.4vw); line-height: 1.3em; margin-bottom: .4em;
                span { display: block; }
              .space{padding:min(16px, 1.4vw) 0 0 0;margin-bottom: .4em;} }
            .name {font-size: min(24px, 2vw);font-weight: 700;}
          }
        }
      }
      &.change {
        figure {
          .cv_img_v1, .cv_img_v2 { width: 100%; height: auto; display: block; transition: opacity 0.5s ease;object-fit: cover;}
          .cv_img_v1 { position: relative; z-index: 2; opacity: 1; pointer-events: auto; }
          .cv_img_v2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; opacity: 0; pointer-events: none;}
          .cv_dots { position: absolute; right: 3%; bottom: 3%; z-index: 10; width: min(62px, 17vw); height: min(62px, 17vw);
            span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer;transition: transform 0.1s ease-out, opacity 0.3s ease;overflow: hidden; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
              &:hover{transform: scale(0.90);}
              &:active { transform: scale(0.90); }
              img { width: 100%; height: auto; display: block;}
             &::after { content: ''; position: absolute; top: -100%; left: -150%; width: 60%; height: 300%; background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100% ); transform: rotate(45deg); animation: shiny 2.5s ease-in-out infinite; }
            }
          }
          &.active-v1 {
            .cv_img_v1 { opacity: 1; z-index: 2; pointer-events: auto; } 
            .cv_img_v2 { opacity: 0; z-index: 1; pointer-events: none; }
            .cv_dots .cv_dot_v1 { opacity: 1; pointer-events: auto; } .cv_dots .cv_dot_v2 { opacity: 0; pointer-events: none; }
          }
          &.active-v2 {
            .cv_img_v1 { opacity: 0; z-index: 1; pointer-events: none; } 
            .cv_img_v2 { opacity: 1; z-index: 2; pointer-events: auto; }
            .cv_dots .cv_dot_v1 { opacity: 0; pointer-events: none; } .cv_dots .cv_dot_v2 { opacity: 1; pointer-events: auto; }
          }
        }
      }
    }
    .name_block {
      &.other{
      .other_part{font-size: min(16px, 1.4vw);font-weight: 700; margin-bottom: .7em;}
      .other_name{font-size: min(22px, 2vw);font-weight: 700;line-height: 1.5em; display: flex; justify-content: center; gap: min(15px, 1.3vw);
      }
      }
    }
  }
}

@keyframes shiny {
  0% { left: -150%; }
  60% { left: 180%; }
  100% { left: 150%; }
}

#staff{
    .staff{
        .staff_block{ margin-bottom: 2em; 
         .staff_list{display: flex; flex-direction: column;font-size: min(20px, 2vw); margin-bottom: .8em;
           .role{display: block; margin-bottom: .2em;
            span{display: inline-block; background-color: #000; color: #fff;line-height: 1.3em; padding: .2em .6em .3em; font-size: .7em; font-weight: 500;}}
            .long{font-size: .7em; line-height: 1.5em; margin-bottom: .5em; padding-top: .3em;font-weight: 700;}
            .name{line-height: 1.5em; font-weight: 700;
          span{font-size: .7em; line-height: .7em;}}
        }
      }
    }
}

@media only screen and (max-width: 835px){
  #cast {padding:0 0 calc(var(--base_distance) * 0.7);
  .cast_block {
    .cast_list {
       &.change {
        figure {
          .cv_dots {
          }
        }
      }

      &.mod_flex_box {flex-direction: column;gap: 14px;
        .box_03 { width: 100%;margin: 0 auto .2em;}
        .box_04 { width: 90%;margin: 0 auto .2em;}
        .box_02, .box_03, .box_04{         
          .name_block { font-weight: 700;
            .part { font-size: min(16px, 4.3vw); margin-bottom: 0; line-height: 1.5em;
            .space{padding: min(16px, 4.3vw) 0 0 0; display: none;line-height: 1.5em;}}
            .name {font-size: min(24px, 6vw); line-height: 1.7em;}
          }
        }
      }
    }
        .name_block {
        &.other{
      .other_part{font-size: min(16px, 4vw);}
      .other_name{font-size: min(22px, 5vw);display:grid; grid-template-columns: repeat(2, 1fr); gap: min(15px, 1.3vw) min(20px, 2vw);
          &:first-of-type{margin-bottom: min(15px, 1.3vw);}
        .other_name_list{
        &:nth-child(odd) { text-align:right; }
        &:nth-child(even) { text-align:left; }
        }
      }
      }
    }
  }
}
#staff{
    .staff{
        .staff_block{
         .staff_list{font-size: min(20px, 4vw);
        }
      }
    }
}
}


#placement{
.plment_block{
  .plment_list{position: relative;background-color: #fff;background-image:linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(../images/placement/placement_bg.webp);background-repeat: repeat;background-size: auto;padding:3vw 0; box-sizing: border-box; min-height: min(700px, 70vw); margin-bottom: 5vw;background-size: 59px;
    .left_top{position: absolute; left: 0; top: 0; line-height: 0;
    img{aspect-ratio: 427 / 708; width: 3vw;}}
    .right_top{position: absolute; right: 0; top: 0; line-height: 0;
    img{aspect-ratio: 900 / 36;width: 28vw;}}
    .left_bottom{position: absolute; left: 0; bottom: 0; line-height: 0;
    img{aspect-ratio: 900 / 36;width: 28vw;}}
     .right_bottom{position: absolute; right: 0; bottom: 0; line-height: 0;
    img{aspect-ratio: 427 / 708;width: 3vw; transform: rotate(180deg);}}
    .name_tit{background-color: #acacac; border-bottom: 2px solid #000; text-align: left; padding: 1.7vw 0 1.7vw 50%; font-weight: 900; font-size: min(30px, 5vw); display: flex;justify-content: center;line-height: 1.2em;

    &.tiger{background-color:#55E9AB;}
    &.bunny{background-color:#FD77AA ;}
    &.blue{background-color:#68DCF5;}
    &.rock{background-color:#5BA46D;}
    &.sky{background-color:#BC91FC;}
    &.dragon{background-color:#F6B05B;}
    &.paper{background-color:#63B7F7;}
    &.fire{background-color:#FF7D7D;}
  }

      .img_box{position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); display: flex; gap: 5%; max-width: min(750px, 80vw); width: 100%;
      .img_box_l{ width: 50%;
        figure{position: relative;
          img{height:100%; width:auto; max-width:100%; max-height:fit-content; border: 3px solid #000;outline: 1px solid #000;
              &.tiger{border: 3px solid #55E9AB;}
              &.bunny{border: 3px solid #FD77AA ;}
              &.blue{border: 3px solid #68DCF5;}
              &.rock{border: 3px solid #5BA46D;}
              &.sky{border: 3px solid #BC91FC;}
              &.dragon{border: 3px solid #F6B05B;}
              &.paper{border: 3px solid #63B7F7;}
              &.fire{border: 3px solid #FF7D7D;}}
              &.sponsor_change {
                .cv_img_v1, .cv_img_v2 { width: 100%; height: auto; display: block; transition: opacity 0.5s ease; }
                .cv_img_v1 { position: relative; z-index: 1; opacity: 1; }
                .cv_img_v2 { position: absolute; top: 0; left: 0;}
                &.active-v1 {
                  .cv_img_v1 { opacity: 1; } .cv_img_v2 { opacity: 0; }
                }
                &.active-v2 {
                  .cv_img_v1 { opacity: 0; } .cv_img_v2 { opacity: 1; }
                }
              }
        }
      }
      .img_box_r{width: 47%; padding-top: 5vw;
      figure{ display: flex; flex-direction: column; gap: 1vw;
        img{height:100%; width:auto; max-width:100%; max-height:fit-content;}
      }
      }
    }
    
    }
  }
}

@media only screen and (max-width: 835px){
  #placement{
.plment_block{
  .plment_list{min-height: 180vw; padding: 7vw 0;
    &.single_short{min-height:162vw;}
    &.mult_logo{min-height: 210vw;}
    &.lot_logo{min-height: 220vw;}
        .left_top{
    img{width: 6vw;}}
    .right_top{transform: rotate(180deg);
    img{width: 41vw;}}
    .left_bottom{
    img{width: 41vw;}}
     .right_bottom{
    img{width: 6vw;}}

    .name_tit{padding: 1em; text-align: center;
  }

      .img_box{ flex-direction: column;max-width: unset; top: 55%;
      .img_box_l{ width: calc(90% - 40px); margin: 0 auto;
      }
      .img_box_r{ width: calc(90% - 40px); margin: 0 auto;
      figure{ display: flex; flex-direction: column; gap: 1vw;
      }
      }
    }
    
    }
  }
}
}

#intro{
	.head_tit{
		&.in_page_head{width: 70%;
	&.short{width: 40%;}}}
  .intro_block{background-color: #fff; border: 1px solid #000; text-align: center; padding: 5%; word-break: auto-phrase;
  p{font-size: min(18px, 4vw); line-height: 2.5em; font-weight: 600;
    &:last-child{margin-bottom: 0;}
  &.quote{font-size: min(22px, 4.8vw); line-height: 2.2em; font-weight: 800;}}
  }
}
@media only screen and (max-width: 835px){
  #intro{
	.head_tit{
		&.in_page_head{width: 90%;
	&.short{width: 54%;}}}
    .intro_block{text-align: left;
      p{line-height: 2em;
      &.quote{font-size: min(26px, 4.8vw); line-height: 2em;}}
  }
}
}

.footer_bnr{
img{width: 100%; max-width: 360px; }
}

@media only screen and (max-width: 835px){
.footer_bnr{
img{width: calc(100% - 30vw);}
}
}