@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
body{font-family: 'Alata', sans-serif;}
#header{z-index:99;}
#fixed_right_banner .sns_link li{
   margin-left:auto;
}
#fixed_right_banner .sns_name{
  left:50px;
  top:0;
  z-index:-1;
  line-height:40px;
  background-color: #47E2E2;
}
.sns_link li:hover{
	width:200px;
}
.footer_sns .sns_name{
  left:50px;
  top:0;
  line-height:40px;
  background-color:transparent;
}
#video {
    padding-top: 150px;
    max-width: 1200px;
    margin: 0 auto;
    position:relative;
}
#video:after{
   content:'';
   position:absolute;
   width:100%;
   height:2px;
   background-color:white;
   bottom:0;
   left:0;
   z-index:1;
}
video{vertical-align: middle;}
#main_img,#intro{
	background-image: url(../img/test1.png);
    background-size: 5%;
}
#intro_txt{
	background-image: url(../img/intro_deco.png);
    background-repeat: no-repeat;
    background-position: center top;		
}
#contents .box1::before{
    content:'';
	position:absolute;
	display: block;
	background-image:url(../img/top_con1deco.png);
	background-repeat:no-repeat;
	width:395px;
	height:100px;
	top: -70px;
    right: 100px;
	
}
#contents .box1::after{
	content:'';
	position:absolute;
	display: block;
	background-color:#edf9fa;
	width:80%;
	height:110%;
	top:-20px;
	right:5%;
	z-index:-1;	
}

#contents .box2{
	background-image: url(../img/top_con2deco.png);
    background-repeat: no-repeat;
    background-position: center top;
}
#contents .box3::before{
    content:'';
	position:absolute;
	display: block;
	background-image:url(../img/top_con3deco.png);
	background-repeat:no-repeat;
	width:490px;
	height:100px;
	top: -70px;
    left: 100px;	
}
#contents .box3::after{
	content:'';
	position:absolute;
	display: block;
	background-color:#edf9fa;
	width:80%;
	height:110%;
	top:-20px;
	left:5%;
	z-index:-1;	
}

#top_cms_box1,#top_cms_box2{
	background-color: #edf9fa;
	background-image: radial-gradient(#fff 10%, transparent 20%), radial-gradient(#fff 10%, transparent 20%);
	background-position: 0 0, 10px 10px;
	background-size: 20px 20px;		
}
#top_cms .liver::after{
	content:'';
	position:absolute;
	display: block;
	background-image:url(../img/cms_liver.png);
	background-repeat:no-repeat;
	width:300px;
	height:100px;
	z-index:1;
	top: -100px;
    left: 0;
    right: 0;
    margin: 0 auto;	
}
#top_cms .liver_box span{
	display:none;
	width:100%;
	bottom:10px;	
}
#top_cms .liver_box:hover span{
	display:block;
	z-index:3
}
#top_cms .liver_box a:hover:after{
	position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0,113,185,0.4);
    z-index: 2;
	transition:all 0.3s;		
}
#top_cms .news::before{
	content:'';
	position:absolute;
	display: block;
	background-image:url(../img/cms_news.png);
	background-repeat:no-repeat;
	width:350px;
	height:100px;
	z-index:1;
	top: -100px;
    left: 0;
    right: 0;
    margin: 0 auto;	
}
.fade_off {
     opacity: 0;
    -webkit-transition: all 3s;
    -moz-transition: all 3s;
    -o-transition: all 3s;
    -ms-transition: all 3s;
    transition: all 3s;
}
.fade_on {opacity: 1;}

.fadein{
      opacity: 0;
    -webkit-transition: all 3s;
    -moz-transition: all 3s;
    -o-transition: all 3s;
    -ms-transition: all 3s;
    transition: all 3s;
}

.fadein.fadetrans{
     opacity: 1;
     transform: none
}


/*IE*/
@media all and (-ms-high-contrast: none){
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	#main_img{
		padding-top:86px;
	}
	#video {
    padding-top: 0;
}
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
	#fixed_right_banner {display: none;}
	#main_img{
		padding-top: 50px;	
	}
	#intro_txt{background-size: 90%;}
	#contents .box1 > div >div+div{padding:20px;}
	#contents .box1::before{
		    background-size: 75%;
		    left: 45px;
		    top: -60px;
	}
	#contents .box1::after{
		    height: 100%;
			top: -20px;
            right: 0;
		
	}
	#contents .box2{
		background-size: 90%;
	    background-image: url(../img/top_con2deco_sp.png);
	}
	#contents .box3::before{
		    background-size: 70%;
		    left: 15px;
            top: -55px;
	}	
	#contents .box3::after{
			top: -20px;
            left: 0;
	}	
	#top_cms .liver::after{
		background-image: url(../img/cms_liver_sp.png);
	    width: 257px;
		height:100px;
	}
	#top_cms .news::before{
		background-image: url(../img/cms_news_sp.png);
	    width: 280px;
		height:100px;
	}
	#top_cms_box2 .news{width:90%!important;}
	.slick-box .prev, .slick-box .next{top: 25%!important;}
}