@charset "UTF-8";

html { height:100%; font-size:62.5%; }
body { 
position:relative;
margin-left:auto; margin-right:auto; width:auto; height:auto; 
	margin-top:0px;
	padding:0px;
/**/
    	background: url(../images/bk.png) repeat;
background-position: center center;

background-attachment: fixed;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight:100;
-webkit-text-size-adjust: 100%;
}
/*下からアニメーション*/
.fadein-bottom{
  -webkit-transition: all .5s linear;
  -o-transition: all .5s linear;
  transition: all .5s linear;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 0;
}

.fadein-bottom2{
  -webkit-transition: all .9s linear;
  -o-transition: all .9s linear;
  transition: all .9s linear;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  opacity: 0;
}


.fadein-bottom.active{
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 7;
}

.fadein-bottom2.active{
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 7;
}


/*フェードイン左から */

.fadein-left{
  -webkit-transition: all .9s linear;
  -o-transition: all .9s linear;
  transition: all .9s linear;
  -webkit-transform: translateX(-100px);
  -moz-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  transform: translateX(-100px);
  opacity: 0;
}
.fadein-left.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}
/*フェードイン右から */

.fadein-right{
  -webkit-transition: all .9s linear;
  -o-transition: all .9s linear;
  transition: all .9s linear;
  -webkit-transform: translateX(100px);
  -moz-transform: translateX(100px);
  -ms-transform: translateX(100px);
  transform: translateX(100px);
  opacity: 0;
}
.fadein-right.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}




/*フェードイン透明 */

.fadein-in{
  -webkit-transition: all 1.5s ease-in;
  -o-transition: all 1.5s ease-in;
  transition: all 1.5s ease-in;

  opacity: 0;
}
.fadein-in.active{
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}





/*--------------------------ナビ--------------------------------------------------------------------------------------------------*/

.site-header{
    background: rgba(255,255,255,0.5);
    display: flex;
    padding: 60px 20px;
    position: fixed;
    justify-content: space-between;
    transition: .5s;
    width: 100%;
    z-index:1;
}
.site-header.transform{
    background: rgba(255,255,255,0.9);
    padding: 20px;
    z-index:10;
}

.site-logo img{
    height: 20px;
    width: auto;
}
.gnav__menu{
    display: flex;
    padding-right:50px;
}
.gnav__menu__item{
    margin-right: 30px;
    list-style:none;
    font-size: 16px;
    color: #333;
}
.gnav__menu__item a{
    font-size: 16px;
    color: #333;
    text-decoration: none;
}



/*--------------------------メイン画面--------------------------------------------------------------------------------------------------*/
.main_imgBox {
    height: 880px;
    overflow: hidden;

    position: relative; }

  .main_logo {
    z-index:11;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:50%;
    height:auto;
}




  .main_img {
    z-index:10;
    opacity: 0;
    width: 100%;
    height: 880px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 36s 0s infinite;
    animation: anime 36s 0s infinite; }

    .main_img:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }

    .main_img:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s; }

    .main_img:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s; }

    .main_img:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s; }

    .main_img:nth-of-type(6) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s; }

  .main_imgM {
    opacity: 0;
    width:100%;
    height:100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 36s 0s infinite;
    animation: anime 36s 0s infinite; }

    .main_imgM:nth-of-type(2) {
      -webkit-animation-delay: 6s;
      animation-delay: 6s; }

    .main_imgM:nth-of-type(3) {
      -webkit-animation-delay: 12s;
      animation-delay: 12s; }

    .main_imgM:nth-of-type(4) {
      -webkit-animation-delay: 18s;
      animation-delay: 18s; }

    .main_imgM:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s; }

    .main_imgM:nth-of-type(6) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s; }

@keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 0;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
         transform: scale(1.2);
                    z-index:9;
    }
    100% { opacity: 0 }
}

@-webkit-keyframes anime {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 0;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
         -webkit-transform: scale(1.2);
            z-index:9;
    }
    100% { opacity: 0 }
}

/*--------------------------パラボ--------------------------------------------------------------------------------------------------*/
.parallax_content{
  min-height: 400px;
  height: 400px;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  z-index:-1;
}

.parallax_content.img_bg_01{
  background-image: url(../index_img/main2/1111.webp);
}

.p_img{
  position: absolute;
  right: 0;
height:400px;
}

.p_img2{
  position: absolute; right: 0; 
  z-index:0;
}


/*-----------------------カラー-----------------------------------------------------------------------------------------------------*/
.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #661A00 50%, #000 50%);
  bottom:0;
  left:-50%;
  opacity:.15;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}



@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}


  .main_imgBox_color {
    z-index:-2;

    top:50%;
    left:50%;
    transform:translate(-50%,-50%);

        height: 880px;
    overflow: hidden;
    position: relative;
}



/*-----------------------ＱＲ-----------------------------------------------------------------------------------------------------*/




.qr{
    z-index:-4;
	background: url(../images/bkbk.png) repeat;
position: relative;
	vertical-align:top;
height: 500px;
}

.qr_in{
margin: 0 auto;
   max-width: 1500px; /* 最大幅 */
   min-width: 1000px; /* 最小幅 */
}


.ss{
  margin: 0 auto;
  position: absolute; right: 150px; 
  z-index:0;
}

.qr_in p {
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 20px;
	line-height: 30px;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:50%;
    height:auto;
}


/*----------------------ＮＡＢＩ４--------------------------------------------------------------------*/
.nabi4{
  margin: 0 auto;
     display: flex;
     flex-wrap: wrap-reverse;
     overflow: hidden;
     max-width:  ;/* 最大幅 */
     min-width: 1000px; /* 最小幅 */
     background-color: rgba(196, 192, 195, 0.5);
     padding: 30px 0;

     min-width: 1000px; /* 最小幅 */
  }

  
  .nabi4>div{
  padding:10px;
      /*コレ*/width: 14.2%;
      /*コレ*/box-sizing: border-box;
  
      flex-wrap: wrap;
  }
  
  

/*----------------------バナー--------------------------------------------------------------------*/


.banner{
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  max-width: 1500px; /* 最大幅 */
  min-width: 1000px; /* 最小幅 */
}
.banner>div{
padding:4px;
   /*コレ*/width: 25%;
   /*コレ*/box-sizing: border-box;

 
}

.banner>span{
padding:4px;
   /*コレ*/width: 100%;
   /*コレ*/box-sizing: border-box;

 
}