.txt_color3{
    color: #F1AF48;
}
.bg_color3{
    background-color: #F1AF48;
}
.mg-off{
    margin: 0;
}
.ntjp{
    font-family: 'Noto Serif JP', serif;
}
.ntjpimp{
    font-family: 'Noto Serif JP', serif!important;
}
.height100per.height90vh{
    height: 90vh;
}
.height100per.height90vh.min1000vh{
    min-height: 1000px;
}
.mg_r-40px {
    margin-right: 40px;
}
.trY50{
    transform: translateY(110vh);
}
.trY100{
    transform: translateY(190vh);
}
#tbbg,#tbc1{
    display: none;
}
@media (max-width: 768px){
    .tb_d-none{
        display: none;
    }
}
/*fv*/
#catchCopy {
    z-index: 10;
    top: 0;
    right: 0;
    max-width: 75%;
}
#fv_sns ul{
    margin-top: 20px;
    margin-right: 70px;
    justify-content: flex-end;
    gap: 50px;
}
#fv_sns ul li{
    max-width: 50px;
}
@media (max-width: 768px){
    #catchCopy{
        top: 50%;
        transform: translateY(-50%);
        max-width: 55%;
    }
    #fv_sns ul li{
        max-width:60px;
    }  
}
@media (max-width: 667px){
    #fv_sns ul{
        margin-top: 10px;
        margin-right: 10px;
        gap: 25px;
    }
    #fv_sns ul li{
        max-width: 22px;
    }    
}
/*header*/
.pc_box .link_box .flex_space-between{
    justify-content: flex-start;
    gap: 40px;
}
.pc_box .link_box ul li{
    max-width: 40px;
    height: 40px;
}
#headersns{
    opacity: 0;
    transition-duration: 0.5s;
}
#headersns.op1{
    opacity: 1;
    transition-duration: 0.5s;
}
@media (max-width: 768px){
    h1#logo{
        text-align: center;
    }

}
/* ----- モーダルウィンドウ ----- */
.modal_wrap{
	top: 0;
	left: 0;
	opacity: 1.0;
	z-index: 999;
}
.modal_wrap .modal_scroll{
	overflow-y: auto;
}
.modal_wrap .close_bt{
	top: 20px;
	right: 80px;
	cursor: pointer
}
.more_btn{
    transition-duration: 0.5s;
}
.more_btn.border_so1{
    border: none;
}
.more_btn:hover{
    transform: scale(1.1);
    transition-duration: 0.5s;
}

.modal_wrap .bg_color4{
    background-color: rgba(0,0,0,0.95);
}
.modal_wrap .modal_txt_wrap h2, .modal_wrap .modal_txt_wrap p{
    color: #fefefe;
}
.modal_wrap .close_bt i{
    color: #fefefe;
}
.modal_wrap h2{
    font-family: 'Noto Serif JP', serif!important;
    text-align: left;
}
/*top*/
#contents1 p.more_btn.width_300-max, #contents2 p.more_btn.width_300-max, #contents3 p.more_btn.width_300-max {
    max-width: 780px;
}
#contents_box .contents1_wrap{
    height: 100vh;
}
#contents1{
    width: 100%!important;
    height: 95vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
#contents1.pd_r-20px{
    padding-right: 0;
}
#contents1 p span br{
    display: none;
}
#contents1 .modal_wrap h2 br{
    display: none;
}
#contents1.pd_l-40px{
    padding-left: 0;
}
#attach p.more_btn{
    font-size: 64px;
    font-weight: bold;
    color: #fefefe;
    transform: skew(-20deg);
    max-width: 780px;
}
#attach .more_btn::first-letter{
    font-size: 120px;
}
#attach .modal_btn {
    padding: 280px 0 280px 0;
}
#attach .modal_txt_wrap p{
    font-weight: bold;
}
#contents1 p.more_btn{
    font-size: 40px;    
}
#contents1 h2{
    
    transform: skewX(0);
    -moz-transform: skewX(0);
    -webkit-transform: skewX(0);
    border-left: none;
    border-bottom: 1px solid;
    text-align: left;
}
.contents1_subtitle.txt_center{
    text-align: left;
}
#contents1 h2::before{
    display: none;
}
#contents1 .height100per.height90vh{
    height: 100vh;
}
#contents1 .modal_wrap h2, #contents2 .modal_wrap h2{
    font-size: 46px;
}
#contents2 p span.more_btn_txt, #contents3 #attach p span.more_btn_txt{
    text-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}
#contents2 p.more_btn.mg_center{
    margin: 0;
}
#contents2 p.more_btn.txt_center{
    text-align: left;
}
.more_btn:hover{
    background-color: transparent!important;
}
#con3line{
    max-width: 500px;
}
#modal04 .modal__content h2 br{
    display: none;
}
@media (max-width: 768px){
    .modal_btn{
        line-height: 6.5rem;
    }
     #contents2 p{
         line-height: 6.5rem;
     }
     #tbc1{
         display: flex;
         justify-content: center;
         align-items: center;
         height: 65vh;
     }
     #tbc1 a p br{
         display: none;
     }
     #modal04 .modal__content h2 br{
        display: block;
    }
    #tbbg{
        display: block;
        background-image: url('./Dup/img/TOPcon11.jpg');
        background-size: cover;
        background-repeat: no-repeat;
    }
    #tbbg .content p{
        max-width: 100%;
        border-bottom: solid 1px #fefefe;
        font-size: 6vmin;
        font-weight: bold;
        transform: skew(-20deg);
    }
    #tbbg .content p.txt_color1{
        color: #fefefe;
    }
    #tbbg .content p.pd_l-100px{
        padding-left: 0;
    }
    #tbbg .content p.pd_b-50px{
        padding-bottom: 0;
    }
    #tbbg .content p.pd_5px{
        padding: 0;
        padding-bottom: 40px;
        padding-top: 20px;
    }
    #tbbg .content p::first-letter{
        font-size: 8.5vmin;
    }
    #tbbg .modal__content .contents1_title {
        font-size: 4.5vmin;
        text-align: left;
    }
    
    
    .content{
        margin: 0 auto;
        padding: 40px;
    }
    .modal{
        display: none;
        height: 100vh;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10;
    }
    .modal__bg{
        background: rgba(0,0,0,0.8);
        height: 100vh;
        position: absolute;
        width: 100%;
    }
    .modal__content{
        background: #fff;
        max-height: 51vh;
        left: 50%;
        padding: 80px 40px 120px 40px;
        position: absolute;
        top: 55%;
        transform: translate(-50%,-50%);
        width: 65%;
        overflow: scroll;
    }
    #modal03 .modal__content{
        overflow: scroll;
    }
}
@media (max-width: 667px){
    .modal_wrap .close_bt{
        right: 0;
    }
    .more_btn.pd_b-50px{
        padding-bottom: 20px;
    }
    .more_btn.pd_l-100px{
        padding-left: 20px;
    }
    .modal_wrap .close_bt{
        top: 100px;
        z-index: 99999;
    }
    #attach{
        max-height: 200px;
    }
    #attachbg{
        position: relative;
        z-index: 10;
    }
    #contents1 p.more_btn{
        font-size: 18px;
    }
    #contents1 .modal_wrap h2, #contents2 .modal_wrap h2{
        font-size: 20px;
    }
 /*   #contents3 #attach{
        padding: 50px 0;
    }
    #contents3 #attach .blurrrr{
        padding: 0 20px;
    }
    #contents3 #attach .modal_wrap{
        transform: translateY(-5vh);
        z-index: 99999;
    }  */
}
/*下層一般*/
@media (max-width: 667px){
    #page_title h2.font_23_tb{
        font-size: 21px;
    }
    #page_title .title_img{
        height: 220px;
    }
}
/*footer*/
@media (max-width: 667px){
    #map .ggmap{
        padding-bottom: 240px;
    }
}


.textEffect, .textEffect::after {
    width: 100%;
    height: 100%;
  font-size: 36px;
  font-family: 'Bebas Neue', cursive;
  background: linear-gradient(45deg, transparent 5%, transparent 5%); /*#FF013C*/
  border: 0;
  color: #fff;
  letter-spacing: 3px;
  line-height: 88px;
  box-shadow: 6px 0px 0px transparent;  /*#00E6F6*/
  outline: transparent;
  position: relative;
}

.textEffect::after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);
  
  content: 'Leap Lyoto since 2022';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 3%, #F1AF48 3%, #F1AF48 5%, #5e5454b0 5%);
  text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6 ;
  clip-path: var(--slice-0);
}

.textEffect:hover::after {
  animation: 1s glitch;
  animation-timing-function: steps(2, end);
}

@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }
  10% {
    clip-path: var(--slice-3);
    transform: translate(10px, 10px);
  }
  20% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 10px);
  }
  30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 5px);
  }
  40% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 0px);
  }
  50% {
    clip-path: var(--slice-3);
    transform: translate(5px, 0px);
  }
  60% {
    clip-path: var(--slice-4);
    transform: translate(5px, 10px);
  }
  70% {
    clip-path: var(--slice-2);
    transform: translate(-10px, 10px);
  }
  80% {
    clip-path: var(--slice-5);
    transform: translate(20px, -10px);
  }
  90% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 0px);
  }
  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}
@media (max-width: 667px){
    #catchCopy{
        max-width: 55%;
        top: 12vh;
        right: 1px;
    }
}