@charset "utf-8";
/*
サイトトップ
index.html
========================================================= */

/*
transition
========================================================= */
.mainimg .lead,
.mainimg .logo{
  -webkit-transition: all .4s;
	transition: all .4s;
  }



/*
header
========================================================= */
#header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color:transparent;
  }
#nav .btn_nav .txt{
  color: #fff;
  }
#nav .btn_nav p span{
  background-color: #fff;
  }

#nav .btn_nav.icon_close .txt{
  color: #000;
  }
#nav .btn_nav.icon_close p span{
  background-color: #000;
  }

#header.blk #nav .btn_nav .txt{
  color: #000;
  }
#header.blk #nav .btn_nav p span{
  background-color: #000;
  }


  
@media print, screen and (min-width: 769px) {
  #header.scrollheader{
    height: 130px;
    border-bottom: 0;
    }    
  #header.scrollheader .logo,
  #header.scrollheader .logo a{
    width: 250px;
    height: 85px;
    }
  #header.scrollheader .logo{
    padding: 22px 0 0 0;
    }
  #header.scrollheader #nav .btn_nav{
    top: 30px;
    }
  } 


/*
contents
========================================================= */
#contents{
  padding-top: 0;
  }

@media print, screen and (min-width: 769px) {
  #contents{
    padding-top: 0;
    }
  }
  

/*
mainimg
========================================================= */
.mainimg{
  position: relative;
  overflow:hidden;
  height: 125vw;
  max-height: 640px; 
  margin-bottom: 0;
  padding: 0;
  /*background-color:#fff;*/
  }
.mainimg .img_bg{
  z-index:0;
  position: fixed;
  top: 0;left: 0;right: 0;
  /*opacity: 0;*/
  width: 100%;
  height: 125vw;
  max-height: 640px;
  margin: auto;
  background:url(../img/index/mainimg.jpg) left 40% top no-repeat;
  background-size:cover;
}
 
  
  
 .mainimg .logoBox{
  position:absolute;
  top: 50px;
  left: 0;right: 0;
  margin: auto;
  text-align:center;
  }
.mainimg .lead{
  margin: 0 auto 20px !important;
  padding: 0 20px;
  box-sizing:border-box;
  font-size: 4.6vw;
  /*font-size: 2.2rem;*/
  color: #fff;
  line-height:1.6 !important;
  font-weight: 600;
  text-shadow: 1px 1px 8px rgba(0,0,0,.1), -1px -1px 8px rgba(0,0,0,.1);
  }
.mainimg .lead span.txt02{
  display:inline-block;
  margin-top: -.15em !important;
  }
.mainimg .logo{
  width: 130px;
  height: 175px;
  margin: auto;
  }
@media print, screen and (min-width: 370px) {
  .mainimg .logo{
    width: 160px;
    height: 216px;
    }
   .mainimg .logoBox{
    top: 50px;
    }
  .mainimg .lead{
    margin: 0 auto 20px !important;
    }
  }

@media print, screen and (min-width: 480px) {
  .mainimg{
    height: 110vw;
    } 
   .mainimg .logoBox{
    top: 50px;
    }
  .mainimg .img_bg{
    height: 110vw;
    }
  .mainimg .lead{
    line-height:1.4;
    margin: 0 auto 40px;
    font-size: 4vw;
    }
  .mainimg .lead span.txt02{
    margin-top: -.2em !important;
    }
  .mainimg .logo{
    width: 200px;
    height: 270px;
    }
  }
  
@media print, screen and (min-width: 769px) {
  .mainimg{
    height: 736px;
    max-height: 736px;
    /*margin-bottom: 90px;
    background-color:#fff;*/
    }  
  .mainimg .img_bg{
    height: 736px;
    max-height: 736px;
    background:url(../img/index/mainimg.jpg) center top no-repeat;
    background-size:cover;
    }
   .mainimg .logoBox{
    top: 80px;
    }
  .mainimg .lead{
    margin: 0 auto 17px !important;
    line-height:1.4;
    font-size: 3rem;
    } 
  .mainimg .logo{
    width: 276px;
    height: 372px;
    }
  }


@media print, screen and (min-width: 1000px) {
  .only_tb{display: none;}
  
  .mainimg .logoBox{
    top: 110px;
    }
  .mainimg .lead{
    line-height:1.2;
    font-size: 3.4rem;
    } 
  }

  
  

/*
con1
========================================================= */

#con1{
  position:absolute;
  margin-bottom: 0;
  padding-top: 40px;
  padding-bottom: 80px;
  background:url(../img/index/con1_bg.png) center 80% no-repeat;
  background-size: contain;
  background-attachment:fixed;
  }

#con1 .con1_1{
  margin-bottom: 40px;
  }
#con1 .txt{
  margin-bottom: 30px;
  padding: 0 20px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
  }
  
#con1 .riken{
  width: 180px;
  height: auto;
  margin: auto;
  }
    

@media print, screen and (min-width: 769px) {
  #con1{
    padding-top: 90px;
    padding-bottom: 150px;
    
    background:url(../img/index/con1_bg.png) center 320px no-repeat;
    background-size: cover;
    background-attachment:fixed;
    
    }
  #con1 .con1_1{
    width: 100%;
    overflow: hidden;
    /*margin-bottom: 130px;*/
    margin-bottom: 90px;
    } 
  #con1 .txt{
    float: left;
    width : -webkit-calc(100% - 210px);
    width : calc(100% - 210px);
    padding: 0 20px 0 0;
    box-sizing:border-box;
    font-size: 2.1rem;
    }
    
  #con1 .riken{
    float: right;
    width: 210px;
    height: 144px;
    }
  }
/*@media print, screen and (min-width: 1280px) {
  #con1{
    background:url(../img/index/con1_bg.png) center 320px no-repeat;
    background-size: cover;
    background-attachment:fixed;
    }
  }*/


/*
con2
========================================================= 
#con2{
  margin-bottom: 0;
  padding-top: 25px;
  }
#con2 .innerBox{
  max-width:1000px;
  padding: 30px 30px 40px;
  background-color: #f7f5f5;
  }
#con2 .innerBox h2{
  margin-bottom: 20px;
  padding-bottom: 0;
  }
#con2 .innerBox h2:after{
  display: none;
  }
@media print, screen and (min-width: 769px) {
  #con2{
    padding-top: 45px;
    }
  #con2 .innerBox{
    padding: 50px 70px 80px;
    }
  #con2 .innerBox h2{
    margin-bottom: 40px;
    }
  }*/





/*
news
========================================================= */
#con1 .innerBox2{
  max-width:1000px;
  margin-top: 50px;
  padding: 30px 30px 40px;
  /*background-color: rgba(0,0,0,.04);*/
  background-color: #f7f5f5;
  }
#con1 .innerBox h2{
  margin-bottom: 20px;
  padding-bottom: 0;
  }
#con1 .innerBox h2:after{
  display: none;
  }
  
/* news */
.news{
  margin-bottom: 30px;
  }
.news dl{
  padding: 10px 15px;
  border-left: solid 1px #203864;
  border-bottom: solid 2px #f7f5f5;
  cursor: pointer;
  background-color: #fff
  }
.news dl:last-child{
  border-bottom: 0;
  margin-bottom: 0;
  }
.news dt,
.news dd{
  box-sizing:border-box;
  }
.news dt{
  margin-bottom: 5px;
  font-size: 1.2rem;
  }
.news dd{
  }
.news dd a{
  font-size: 1.4rem;
  color: #333;
  }

@media print, screen and (min-width: 769px) {
  /*#con2{
    padding-top: 45px;
    }*/
  #con1 .innerBox2{
    margin-top: 90px;
    padding: 50px 70px 80px;
    background-color: #f7f5f5;
    }
  #con1 .innerBox2 h2{
    margin-bottom: 40px;
    }
     
  /* news */
  .news{
    margin-bottom: 60px;
    }
  .news dl{
    display: table;
    width: 100%;
    padding: 20px 0;
    cursor: auto;
    }
  .news dl:last-child{
    border-bottom: 0;
    }
  .news dt,
  .news dd{
    display: table-cell;
    vertical-align:middle;
    }   
  .news dt{
    width: 150px;
    margin-bottom: 0;
    text-align:center;
    font-size: 1.2rem;
    }
  .news dd{
    width: auto;
    }
  .news dd a{
    font-size: 1.4rem;
    }
  }












/*
アニメーション
========================================================= */
.mainimg .img_bg{
  animation: fadeIn 3.4s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
 
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
 


.mainimg .logo{
  opacity:0;
}
.mainimg .logoAnimation{
  animation: fadeInLogo2 1.6s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  /*animation-delay: 3.4s;*/
}
@keyframes fadeInLogo2 {
  0% {
   opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
 
 
/*
@keyframes fadeInLogo {
  0% {
    margin-top: -20vw;
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  70% {
    margin-top: -20vw;
  }
  100% {
    margin-top: 0;
  }
}
@media print, screen and (min-width: 768px) {
   
  @keyframes fadeInLogo {
    0% {
      margin-top: -100px;
      opacity: 0;
      filter: blur(25px);
    }
    10% {
      opacity: 0;
      filter: blur(25px);
    }
    40% {
      opacity: 1;
      filter: blur(0px);
    }
    75% {
      margin-top: -100px;
    }
    100% {
      margin-top: 0;
    }
  }
}
*/





#con1,
#con2,
#footer{
  position: relative;
  z-index: 1;
  background-color: #fff;
  }







/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:1.2s;
	animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:1.2s;
	animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.txt01 {animation-delay: 0s;}
.txt02 {animation-delay: .8s;}

.txt01sp {animation-delay: 0s;}
.txt02sp {animation-delay: .5;}

/*.txt01 {animation-delay: 1.4s;}
.txt02 {animation-delay: 2.2s;}
.txt01sp {animation-delay: 1.4s;}
.txt02sp {animation-delay: 1.9s;}
.txt03sp {animation-delay: 2.4s;}
.txt04sp {animation-delay: 2.9s;}*/