.sec-title5{
  font-family:  "cormorant", sans-serif;
  font-weight: 400;
    font-size: 5rem;
    padding:30px 10px;
    text-align: center;
    color: #FFF;
}


div.vid_contents {
  width: 100%;/*背景色を横幅いっぱいに広げる*/
  text-align: center;
  margin: auto;
  padding:10px;/*ここで動画の周りの余白を調整*/
  }
  video.vid_main {
    text-align: center;
  width: 100%;
  max-width: 920px;/*PC版での最大幅*/
  }





.video-wrapper {
  aspect-ratio: 16 / 10;  /* 縦横比（アスペクト比） */
  overflow: hidden;
  position: relative; /* 絶対配置するコンテンツや疑似要素の基準とする */
  width: 100%;
  max-width: 1000px;
}

/* 疑似要素でオーバーレイを表示 */
.video-wrapper::before {
  content: "";
  position: absolute; /* 絶対配置 */
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

/* video 要素 */
.video-wrapper video {
  width: 100%;  /* 明示的に幅を設定（必須） */
  height: 100%; /* 明示的に高さを設定（必須） */
  object-fit: cover; /* コンテンツボックスに収まるように拡大縮小 */
}

.video-content {
  position: absolute; /* 絶対配置 */
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

@media screen and (max-width: 480px) {
  .video-wrapper {
    aspect-ratio: 2 / 3;
  }
}







.mv-section{
  position: relative;
  max-width: 1000px;
  margin: auto;
}

.movie_ddf{
  width: 100%;
  height: 45vh;
  position: absolute;
  top: 0;
  left: 0;
overflow: hidden;
z-index: -1;
box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 60px 5px;
  }
  
  .movie_ddf::after{
  
    content: '';
    width: 100%;
    height: 100%;
  
    display: block;
    position: absolute;
    left: 0;
    top: 0;
  }
  
  .movie_ddf video {
    min-width: 100%;
    min-height:100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }




.kv-inner {
  display:none;
  width: 100vw; 
    height: 100vh; 
    background-image: url(../images/mk_fv1.png);
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}


.kv-title{
  max-width: 1200px;
color:  #ffffff;
font-style: italic;
font-family:  "cormorant", sans-serif;
font-weight: 400;

font-size: 5rem;
padding: 10px ;
text-align: center;
margin:auto;
	animation: text-shadow-drop-center 0.6s ease-in alternate both;
}
@keyframes text-shadow-drop-center {
  0% {
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
  }
}




.contact-img{
  font-family:  "cormorant", sans-serif;
  font-weight: 400;
    font-size: 3rem;
    padding:50px 10px;
    text-align: center;
    color:000;
    box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 60px 5px;
}

.ft-img{
  max-width: 250px;
  margin: auto;
  padding:50px 10px;
}

.ft-img :hover{

  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  opacity: 80%;
}



.greeting
{
  font-family:  "cormorant", sans-serif;
font-weight: 400;
  font-size: 3rem;
  padding:50px 10px;
  text-align: center;
  text-shadow: rgba(255, 255, 255, 0.5) 0px 0px 40px 5px;
  animation: text-focus-in 4s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes text-focus-in {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}


.gr-img{
  max-width: 300px;
  margin: auto;
  box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 30px 5px;
  
}


.gr-img1{
  display: none;
  max-width: 300px;
  margin: auto;
  box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 30px 5px;
  
}


.sec-title{
  font-family:  "cormorant", sans-serif;
font-weight: 400;
  font-size: 5rem;
  padding:30px 10px;
  text-align: center;
  animation: text-focus-in 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes text-focus-in {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }

}


.sec-sub{
  font-family:  "cormorant", sans-serif;
font-weight: 400;
  font-size: 1.6rem;
  padding-bottom: 30px;
  text-align: center;
line-height: 2;
animation: text-focus-in 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes text-focus-in {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}
  


.sec-sub2{
  font-family:  "cormorant", sans-serif;
font-weight: 400;
  font-size: 1.6rem;
  padding-bottom: 50px;
  text-align: center;
  color: #000;
}


.sec-sub22{
  font-family:  "cormorant", sans-serif;
font-weight: 400;
  font-size: 1rem;
  padding-bottom: 5px;
  text-align: center;
  color: #000;
}



.sec-sub3{
  font-family:  "cormorant", sans-serif;
font-weight: 400;
  font-size: 1.6rem;
  padding-bottom: 20px;
  text-align: center;
  color: #000;
}

.sec-subb{
  font-family:  "cormorant", sans-serif;
font-weight: 400;
  font-size: 1.6rem;
  padding: 200px 0;
  text-align: center;
letter-spacing: 0.7rem;
margin: auto;
animation: tracking-in-expand 7s cubic-bezier(0.215, 0.610, 0.355, 1.000) NaNs infinite alternate-reverse both;
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}



.ab-list{
display:block;
margin: auto;
padding:50px 0px;
}

.ab-text{
  display: block;
}


.abb{


  background-position: center center;
  background-size: cover;
  align-items: center;
  justify-content: center;
  background-image: url(../images/mk_bg\ 1.png);
}

.ab-item1
{
  margin-bottom: 20px;
  text-align: center;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../images/ab1.png);
  box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 40px 5px;
height: 30%;
animation: text-focus-in 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  }
  @keyframes text-focus-in {
    0% {
      filter: blur(12px);
      opacity: 0;
    }
    100% {
      filter: blur(0px);
      opacity: 1;
    }
  
  }


.ab-item2
{
  margin-bottom: 20px;
  text-align: center;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../images/ob2.png);
  box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 40px 5px;
height: 30%;
animation: text-focus-in 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  }
  @keyframes text-focus-in {
    0% {
      filter: blur(12px);
      opacity: 0;
    }
    100% {
      filter: blur(0px);
      opacity: 1;
    }
  
  }


.ab-item3
{
  margin-bottom: 20px;
  text-align: center;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../images/ab3.png);
  box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 40px 5px;
height: 30%;
animation: text-focus-in 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  }
  @keyframes text-focus-in {
    0% {
      filter: blur(12px);
      opacity: 0;
    }
    100% {
      filter: blur(0px);
      opacity: 1;
    }
  
  }


.ab-title{
  font-family:  "cormorant", sans-serif;
  font-weight: 400;
  line-height: 1.2;
    font-size: 3rem;
    padding:50px 10px;
    text-align: center;
    animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  }
  @keyframes text-focus-in {
    0% {
      filter: blur(12px);
      opacity: 0;
    }
    100% {
      filter: blur(0px);
      opacity: 1;
    }
  
  }

  .ab-text{
    font-family:  "cormorant", sans-serif;
    font-weight: 400;
    line-height: 1.2;
      font-size: 1.6rem;
      padding:30px 10px;
      text-align: center;
      animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    }
    @keyframes text-focus-in {
      0% {
        filter: blur(12px);
        opacity: 0;
      }
      100% {
        filter: blur(0px);
        opacity: 1;
      }
    }
  

    .intro-title{
      font-family:  "cormorant", sans-serif;
      font-weight: 400;
        font-size: 3rem;
        padding:10px;
        text-align: center;
        box-shadow: rgba(0, 0, 0, 0.9) 0px 0px 30px;
    }








.contact-img a img{
  transition:  .3s;
}
.contact-img a:hover{
  opacity: .8;
}
.contact-img a:hover img{
  transform: scale(1.05,1.05);
}
.contact-img a:hover .contact{
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,.08);
}


.cu-wrap{
  max-width: 100%; 
  background-color: rgba(255, 255, 255, 0.8);
  background-position: center center;
  background-size: cover;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(255, 255, 255, 0.8) 0px 0px  20px;
}


.sec-title2{
  font-family:  "cormorant", sans-serif;
  font-weight: 400;
    font-size: 5rem;
    padding:30px 10px;
    text-align: center;
    color: #000;
}


.ab-inner-img{
  max-width: 800px;
  margin: auto;
  padding: 10px;
}





/*------ スライダーの横幅 ------*/
.slider{
  width:90%;
  margin:0 auto;

  scroll-behavior: smooth;
}

.slider2{
  width:90%;
  margin:0 auto;

  scroll-behavior: smooth;
}

.slider2 .slick-slide{
	height:auto!important;
}

/*---------- 矢印 ----------*/
.slider2 .slick-next{
    right:0!important;
}
.slider2 .slick-prev{
    left:0!important;
}
.slider2 .slick-arrow{
    width: initial!important;
    height: initial!important;
    z-index:2!important;
}
.slider2 .slick-arrow:before{
    font-size: 20px!important;
}








/*------ スライダー画像 ------*/
.slider img{
	width:100%;
}

.sl_text{
  font-size: 3rem;
  text-align: center;
  margin:auto;
  padding:10px;
  font-family:  "cormorant", sans-serif;
  text-shadow: rgba(255, 255, 255, 0.5) 0px 0px 40px 5px;
  animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes text-focus-in {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}

.sl_sub{
  font-size: 1.6rem;
  text-align: center;
  margin:auto;
  padding-bottom:10px;
  font-family:  "cormorant", sans-serif;
  text-shadow: rgba(255, 255, 255, 0.5) 0px 0px 40px 5px;
  animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes text-focus-in {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}




/*-------- 高さ調整 ----------*/
.slider .slick-slide{
	height:auto!important;
}

/*---------- 矢印 ----------*/
.slider .slick-next{
    right:5!important;
}
.slider .slick-prev{
    left:5!important;
}
.slider .slick-arrow{
    width: initial!important;
    height: initial!important;
    z-index:2!important;
}
.slider .slick-arrow:before{
    font-size: 20px!important;
}
.slick-slide{
  margin-right: 2vw!important;
  margin-left: 2vw!important;
}



.sl-wrapper{
  display:flex;
  margin:auto;
}


.sl-wrapper3{
  display:flex;
  margin:auto;
  background-color: #740055;
}

.sl-wrapper4{
  display:flex;
  margin:auto;
}


.sl-wrapper5{
  display:flex;
  margin:auto;
  background-color: #747000;
}

.sl-wrapper6{
  display:flex;
  margin:auto;
  background-color: #014B4A;
}



.sl-wrapper2{
  display:flex;
  margin:auto;
}

.sl-text-wrapper{
  display: block;
  margin: auto;
  padding: 10px;
  max-width: 500px;

  }

.sl-text-wrapper2{
display: block;
margin: auto;
padding: 10px;
max-width: 600px;
background-color:rgba(0, 0, 0, 0.7);
}


.slimg{
  max-width: 400px;
  margin: auto;
  padding: 5px;
  
}

.slimg2{
  max-width: 400px;
  margin: auto;
  padding: 5px;
}

.slimg3{
  max-width: 400px;
  margin: auto;
  padding: 5px;
}








@media screen and (max-width: 834px) {

  .greeting
  {
    padding: 30px;
    font-size: 1.6rem;
  }


  .gr-img{
    max-width: 300px;
  }


  .slider{
    touch-action:pinch-zoom;
    width: 100%;
  }


  .slider2{
    touch-action: pinch-zoom;
  }



  .sl_text{
    font-size: 2rem;
  }

  .sl_sub{
    font-size:1.4rem;
  }

  
  .fl-img :hover{
    width: 55px;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    opacity: 80%;
  }
.kv-inner {
  height: 100vh;
}


  .kv-title{
padding: 10px;
    font-size: 4rem;
    letter-spacing: 2px;
}

.ft-img{
  max-width: 150px;
}

.sec-title{
  font-size:3rem;
}
.sec-title2{
  font-size:3rem;
}


.sec-title5{
  font-size:3rem;
}

.movie_ddf{
  height: 35vh;
}

.sec-subb{
  padding: 120px 0;
}



.sl-wrapper2{
  display:flex;
  flex-wrap: wrap;
  margin:auto;
}

.sl-text-wrapper{
display: block;
margin: auto;
padding: 10px;
max-width: 150px;
}

.sl-text-wrapper2{
  display: block;
  margin: auto;
  padding: 5px;
  max-width: 250px;
  }

.slimg2{
  max-width: 300px;
  margin: auto;
  padding: 5px;
}


.slimg{
  max-width: 150px;
  margin: auto;
  padding: 5px;
}


.slimg3{
  max-width: 100px;
  margin: auto;
  padding: 5px;
}



div.vid_contents {

  padding:5px;/*ここで動画の周りの余白を調整*/
  }


  .sl-wrapper4{
    height: 80%;
  }
}