@charset "utf-8";
/* CSS Document */
.section{
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
}
#section0{
	background-image:url(images/top/head.jpg);
}
#section2{
	width:100%;
	padding-top:56.25%;
	background-image:url(../images/top/img_1.jpg);
	background-repeat: no-repeat;
	background-size:cover;
	background-position: 50% 50%;
	z-index: 1;
	position:relative;
	background-attachment:fixed;
}
#myVideo,.myVideo{
	position: absolute;
	right: 0;
	bottom: 0;
	top:0;
	right:0;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	background-color: black; /* in case the video doesn't fit the whole page*/
	background-image: /* our video */;
	background-position: center center;
	background-size: contain;
	object-fit: cover; /*cover video background */
	z-index:3;
}
#section0 .layer{
	position: absolute;
	z-index: 4;
	width: 35%;
	left: 0;
	top: 36%;
	right:0;
	margin:auto;

	/* 
	* Preventing flicker on some browsers 
	* See http://stackoverflow.com/a/36671466/1081396  or issue #183
	*/
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/*solves problem with overflowing video in Mac with Chrome */
#section0{
	overflow: hidden;
}
/* Hiding video controls 
* See: https://css-tricks.com/custom-controls-in-html5-video-full-screen/
* --------------------------------------- */
#myVideo::-webkit-media-controls {
  display:none !important;
}
/*
video::-webkit-media-controls {
  display:none !important;
}
*/

.back1{
	width:100%;
	padding-top:56.25%;
	background-image:url(../images/top/bg_1.jpg);
	background-repeat: no-repeat;
	background-size:cover;
	background-position: 50% 50%;
	z-index: 1;
	position:relative;
	background-attachment:fixed;
}
.back1 .tex1{
	float: right;
	/* background-image:url(../images/top/tex_1-1.png); */
	background-repeat:no-repeat;
	background-position:0px 0;
	position:relative;
}
.back1 .tex1 p{
	position:absolute;
	/* background-image:url(../images/top/tex_1-1.png); */
	/* background-repeat:no-repeat; */
	top:0;
	height:250px;
	opacity:0;
}
.back1 .tex1 .text-1-1{
	/* background-position:-65px 0; */
	width: 115px;
	right:0;
}
.back1 .tex1 .text-1-2{
	background-position:0px 0;
	width:50px;
	right:65px;
}
.back1 .tex2{
	/*background-image:url(../images/top/tex_1-2.png);
	background-repeat:no-repeat;
	background-position:0px 0;*/
	position:relative;
	float: left;
	width:343px;
	height:459px;
}
.back1 .tex2 p{
	position:absolute;
	/* background-image:url(../images/top/tex_1-2.png); */
	background-repeat:no-repeat;
	top:0;
	width:26px;
	height:459px;
	opacity:0;
}
.back1 .tex2 .text-2-1{
	background-position:-312px 0;
	right:5px;
}
.back1 .tex2 .text-2-2{
	background-position:-277px 0;
	right:40px;
}
.back1 .tex2 .text-2-3{
	background-position:-244px 0;
	right:73px;
}
.back1 .tex2 .text-2-4{
	background-position:-210px 0;
	right:107px;
}
.back1 .tex2 .text-2-5{
	background-position:-175px 0;
	right:142px;
}
.back1 .tex2 .text-2-6{
	background-position:-142px 0;
	right:175px;
}
.back1 .tex2 .text-2-7{
	background-position:-109px 0;
	right:208px;
}
.back1 .tex2 .text-2-8{
	background-position:-75px 0;
	right:242px;
}
.back1 .tex2 .text-2-9{
	background-position:-40px 0;
	right:277px;
}
.back1 .tex2 .text-2-10{
	background-position:-7px 0;
	right:310px;
}
/**/
.back2{
	width:100%;
	padding-top:56.25%;
	background-image:url(../images/top/bg_2.jpg);
	background-repeat: no-repeat;
	background-size:cover;
	background-position: 50% 50%;
	z-index: 1;
	position:relative;
	background-attachment:fixed;
}
.back2 .tex1{
	float: right;
	/*background-image:url(../images/top/tex_2-1.png);
	background-repeat:no-repeat;
	background-position:0px 0;*/
	position:relative;
}

.back2 .tex1 p{
	position:absolute;
	/* background-image:url(../images/top/tex_2-1.png); */
	background-repeat:no-repeat;
	top:0;
	height:389px;
	opacity:0;
}

.back2 .tex1 .text-1-1{
	background-position:-72px 0;
	width:50px;
	right:0;
}
.back2 .tex1 .text-1-2{
	background-position:-7px 0;
	width:50px;
	right:65px;
}
.back2 .tex2{
	/*background-image:url(../images/top/tex_3-2.png);
	background-repeat:no-repeat;
	background-position:0px 0;*/
	position:relative;
	float: left;
	width:280px;
	height:472px;
}
.back2 .tex2 p{
	position:absolute;
	/* background-image:url(../images/top/tex_3-2.png); */
	background-repeat:no-repeat;
	top:0;
	width:34px;
	height:520px;
	opacity:0;
}
.back2 .tex2 .text-2-1{
	background-position:-242px 0;
	right:4px;
}
.back2 .tex2 .text-2-2{
	background-position:-208px 0;
	right:38px;
}
.back2 .tex2 .text-2-3{
	background-position:-174px 0;
	right:72px;
}
.back2 .tex2 .text-2-4{
	background-position:-140px 0;
	right:106px;
}
.back2 .tex2 .text-2-5{
	background-position:-106px 0;
	right:140px;
}
.back2 .tex2 .text-2-6{
	background-position:-72px 0;
	right:174px;
}
.back2 .tex2 .text-2-7{
	background-position:-38px 0;
	right:208px;
}
.back2 .tex2 .text-2-8{
	background-position:-4px 0;
	right:242px;
}

/**/
.back3{
	width:100%;
	padding-top:56.25%;
	background-image:url(../images/top/bg_3.jpg);
	background-repeat: no-repeat;
	background-size:cover;
	background-position: 50% 50%;
	z-index: 1;
	position:relative;
	background-attachment:fixed;
}
.back3 .tex1{
	float: right;
	/*background-image:url(../images/top/tex_3-1.png);
	background-repeat:no-repeat;
	background-position:0px 0;*/
	position:relative;

}
.back3 .tex1 p{
	position:absolute;
	/* background-image:url(../images/top/tex_3-1.png); */
	background-repeat:no-repeat;
	background-position:0px 0;
	top:0;
	height:463px;
	opacity:0;
}
.back3 .tex1 .text-1-1{
	background-position:-65px 0;
	width:50px;
	right:0;
}
.back3 .tex1 .text-1-2{
	background-position:0px 0;
	width:50px;
	right:65px;
}
.back3 .tex2{
	/*background-image:url(../images/top/tex_2-2.png);
	background-repeat:no-repeat;
	background-position:0px 0;*/
	position:relative;
	float: left;
	width: 395px;
	height: 520px;
	margin-top: -52px;
}
.back3 .tex2 p{
	position:absolute;
	/* background-image:url(../images/top/tex_2-2.png); */
	background-repeat:no-repeat;
	top:0;
	width:34px;
	height:472px;
	opacity:0;
}
.back3 .tex2 .text-2-1{
	background-position:-370px 0;
	right:60px;
}
.back3 .tex2 .text-2-2{
	background-position:-336px 0;
	right:94px;
}
.back3 .tex2 .text-2-3{
	background-position:-302px 0;
	right:128px;
}
.back3 .tex2 .text-2-4{
	background-position:-268px 0;
	right:162px;
}
.back3 .tex2 .text-2-5{
	background-position:-234px 0;
	right:196px;
}
.back3 .tex2 .text-2-6{
	background-position:-200px 0;
	right:230px;
}
.back3 .tex2 .text-2-7{
	background-position:-166px 0;
	right:264px;
}
.back3 .tex2 .text-2-8{
	background-position:-132px 0;
	right:298px;
}
.back3 .tex2 .text-2-9{
	background-position:-98px 0;
	right:332px;
}
.back3 .tex2 .text-2-10{
	background-position:-62px 0;
	right:368px;
}


/*====================
5/22追記分
====================*/
.back1{
	width:100%;
	padding-top:56.25%;
	background-repeat: no-repeat;
	background-size:cover;
	background-position: 50% 50%;
	z-index: 1;
	position:relative;
	background-attachment:fixed;
}
.back1 .tex1{
	float: right;
	/* background-image:url(../images/top/tex_1-1.png); */
	background-repeat:no-repeat;
	background-position:0px 0;
	position:relative;
}
.back1 .tex1 p{
	position:absolute;
	top:0;
	height:250px;
	opacity:0;
}
.back1 .tex1 .text-1-1{
	width: 115px;
	right:0;
}
.back1 .tex1 .text-1-2{
	background-position:0px 0;
	width:50px;
	right:65px;
}
.back1 .tex2{
	position:relative;
	float: left;
	width:343px;
	height:459px;
}
.back1 .tex2 p{
	position:absolute;
	/* background-image:url(../images/top/tex_1-2.png); */
	background-repeat:no-repeat;
	top:0;
	width:26px;
	height:459px;
	opacity:0;
}
.back1 .tex2 .text-2-1{
  right: 1px;
  top: 1px;
  width: 103px;
}
.back1 .tex2 .text-2-2{
  right: 104px;
  width: 136px;
}
.back1 .tex2 .text-2-3{
  right: 240px;
  top: 1px;
  width: 102px;
}

/**/
.back2{
	width:100%;
	padding-top:56.25%;
	background-repeat: no-repeat;
	background-size:cover;
	background-position: 50% 50%;
	z-index: 1;
	position:relative;
	background-attachment:fixed;
}
.back2 .tex1{
	float: right;
	position:relative;
}

.back2 .tex1 p{
	position:absolute;
	/* background-image:url(../images/top/tex_2-1.png); */
	background-repeat:no-repeat;
	top:0;
	height:389px;
	opacity:0;
}

.back2 .tex1 .text-1-1{
  width: 137px;
  right: 0;
  top: -1px;
  position: absolute;
}
.back2 .tex1 .text-1-2{
	background-position:-7px 0;
	width:50px;
	right:65px;
}
.back2 .tex2{
	position:relative;
	float: left;
	width:280px;
	height:472px;
}
.back2 .tex2 p{
	position:absolute;
	/* background-image:url(../images/top/tex_3-2.png); */
	background-repeat:no-repeat;
	top:0;
	width:34px;
	height:520px;
	opacity:0;
}
.back2 .tex2 .text-2-1{
  width: 70px;
  top: 1px;
  right: 3px;
}
.back2 .tex2 .text-2-2{
  width: 162px;
  right: 48px;
  top: -2px;
}
.back2 .tex2 .text-2-3{
  width: 70px;
  right: 210px;
  top: 0px;
}

/**/
.back3{
	width:100%;
	padding-top:56.25%;
	background-repeat: no-repeat;
	background-size:cover;
	background-position: 50% 50%;
	z-index: 1;
	position:relative;
	background-attachment:fixed;
}
.back3 .tex1{
	float: right;
	position:relative;

}
.back3 .tex1 p{
	position:absolute;
	/* background-image:url(../images/top/tex_3-1.png); */
	background-repeat:no-repeat;
	background-position:0px 0;
	top:0;
	height:463px;
	opacity:0;
}
.back3 .tex1 .text-1-1{
	background-position:-65px 0;
	width:122px;
  right:-7px;
  position: absolute;
}
.back3 .tex1 .text-1-2{
	background-position:0px 0;
	width:50px;
	right:65px;
}
.back3 .tex2{
	position:relative;
	float: left;
	width: 395px;
	height: 520px;
	margin-top: -52px;
}
.back3 .tex2 p{
	position:absolute;
	/* background-image:url(../images/top/tex_2-2.png); */
	background-repeat:no-repeat;
	top:0;
	width:34px;
	height:472px;
	opacity:0;
}
.back3 .tex2 .text-2-1{
  right: 56px;
  top: 52px;
  width: 211px;
}
.back3 .tex2 .text-2-2{
  right: 267px;
  top: 52px;
  width: 141px;
}

.embed-container {
	  bottom: 0;
	  left: 0;
	  overflow: hidden;
	  position: absolute; /* fixed の場合。absolute でも同じ */
	  right: 0;
	  top: 0;
	  z-index: 0!important;
	  pointer-events: none;
}

.embed-container iframe {
	  box-sizing: border-box;
	  height: 56.25vw; /* 16:9 の高さなので 56.25% (= 9 ÷ 16) */
	  left: 50%;
	  min-height: 120%;
	  min-width: 120%;
	  position: absolute;
	  top: 50%;
	  transform: translate(-50%, -50%);
	  width: 177.77777778vh; /* 16:9 の幅なので 177.77% (= 16 ÷ 9) */
	  pointer-events: none;
}

.clear {clear: both;}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
@media print, screen and (min-width : 980px) {
    
	.newsWrap {
		overflow: hidden;
	}

	.newsL {
		float: left;
		width: 160px;
	}
	
    .newsL .pc_none {
        display: none!important;
    }

	.newsR {
		float: right;
		padding-right: 20px;
		width: calc(100% - 180px);
		height: 200px;
		overflow-y:scroll;
	}

	.newsR li {
		margin-bottom: 20px;
	}

	.newsR li:last-child {
		margin-bottom: 0;
	}

	.newsTime {
		font-size: 12px;
		margin: 0 0 5px;
	}   

	.newsTitle {
		border-bottom: 2px solid #ccc;
		margin: 0 0 10px;
		padding: 0 0 10px;
	}

	.newsContent {
		background: #fff;
		padding: 15px;
	}
	
	.head-btn-img {
	    width: 520px;
	    margin: 40px auto 0;
    }
    
	.head-btn-img img {
		width: 100%;
    }

    .btn-img-01 {
    	float: left;
    	width: 48%;
    }
    
    .btn-img-02 {
    	float: right;
    	width: 48%;
    } 
    
	.head-btn-img a:hover {
        opacity: 0.6;   
        text-decoration: none;
    }    
	
	.head-btn {
	    width: 520px;
	    margin: 40px auto 0;
    }
    
    .head-btn a {
        display: block;
        width: 250px;
        background: #c00;
        padding: 10px 0;
        color: #fff;
        text-align: center;
	    border-radius: 5px;
	    -webkit-border-radius: 5px;
    	-moz-border-radius: 5px;	
    	font-size: 14px;
    }
    
    .head-btn a span {
        font-size: 16px;   
    }
    
    .head-btn a:hover {
        opacity: 0.6;   
        text-decoration: none;
    }
    
    .btn-01 a {
    	float: left;
    }
    
    .btn-02 a {
    	float: right;
    } 
	
}
@media print, screen and (max-width : 979px) {

	.newsWrap {
		overflow: hidden;
	}

	.newsL h2 {
        padding: 10px;
        background: #fff;
        border-bottom: 2px solid #000;
        text-align: center;
        margin-bottom: 20px;  
	 }

    .newsL .sp_none {
        display: none!important;
    }

	.newsR {
		height: 300px;
		overflow-y:scroll;
		padding-right: 20px;
	}

	.newsR li {
		margin-bottom: 20px;
	}

	.newsR li:last-child {
		margin-bottom: 0;
	}

	.newsTime {
		font-size: 12px;
		margin: 0 0 5px;
	}   

	.newsTitle {
		border-bottom: 2px solid #ccc;
		margin: 0 0 10px;
		padding: 0 0 10px;
	}

	.newsContent {
		background: #fff;
		padding: 15px;
	}

	.head-btn-img {
		padding: 0 20px;
	    margin: 30px auto 10px;
    }
    
	.head-btn-img a:hover {
        opacity: 0.6;   
        text-decoration: none;
    }        
    
	.head-btn-img img {
		width: 100%;
    }

    .btn-img-01 {
    	float: left;
    	width: 48%;
    }
    
    .btn-img-02 {
    	float: right;
    	width: 48%;
    } 

	.head-btn {
	    margin: 20px auto 0;
	    padding: 0 20px;
    }
	
    .head-btn a {
        display: block;
        width: 48%;
        background: #c00;
        padding: 7px 0;
        color: #fff;
        text-align: center;
	    border-radius: 5px;
	    -webkit-border-radius: 5px;
    	-moz-border-radius: 5px;	
    	font-size: 12px;
    }
    
    .head-btn a span {
        font-size: 13px;   
    }
    
    .head-btn a:hover {
        opacity: 0.6;  
        text-decoration: none;
    }
    
    .btn-01 a {
    	float: left;
    }
    
    .btn-02 a {
    	float: right;
    } 
}

.tCat {
	display: inline-block;
	background: #000;
	color: #fff;
	padding: 3px 10px;
	font-size: 12px;
	border-radius: 3px;
}