@charset "UTF-8";

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
/*この上部を入れないとhanbargerのsp背景色の横幅が右切れる*/

*{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    box-sizing: border-box;
    color: #333;
}


ol, ul {
    list-style: none;
}
/* clearfix */
.cf {
	zoom: 1;
}
.cf:before, .cf:after {
	content: "";
	display: table;
}
.cf:after {
	clear: both;
}


a.navi3{
	color:#005239;
	text-decoration:none;
	
	
font-family:"Zen Kaku Gothic New" , sans-serif;
	
}

a.navi3:hover {
	color: #600;
	text-decoration:underline;
}



a.navi4{
	color:black;
	text-decoration:underline;
	
}


a.navi4:hover{
	opacity:0.5;
	text-decoration:underline;
	
}


a.navi5{
	color:white;
	text-decoration:underline;
	
}


a.navi5:hover{
	opacity:0.5;
	text-decoration:underline;
	
}







a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	text-decoration: none;
}

	
/*==========================================
 sp スタイル
===========================================*/

body {
  margin: 0px 0px 0px 0px;
 
  background: #fff;
}





/* メイン動画 */


#bg-video{
	
	position:fixed;
	right:0;
	top:0;
	min-width:100%;
	min-height:50%;
	width:auto;
	height:50%;
	z-index:-100;
	
	background-size:cover;
	
}


.fit{/*センタリング*/
	position:relative;
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:6;
	
}


.fitsize{
	position:absolute;
	
	z-index:10;
}


.fit h1{/******** sound **********/
	font-size:16px;
	color:white;
	/*font-family:"Zen Kaku Gothic New" , sans-serif;*/
	font-family: "Courier New", Courier, monospace;
	z-index:30;
	
	font-weight:bold;
	
	position:absolute;
	bottom:20px;
	left:23px;
	
	
	/* writing-mode:vertical-rl;縦書き 今使ってない*/
	
	align-items:center;/*中央揃え*/
    
	text-align:left;
	
	line-height:120%;

	
	}
	
	
	.fit h1 span{/******** 1970年代 **********/
	font-size:12px;
     text-align:center;
	
	line-height:120%;
	
	color:white;
letter-spacing:0.15em;

}

	





.fit h2{/******** scroll **********/
	font-size:1rem;
	color:white;
	/*font-family:"Zen Kaku Gothic New" , sans-serif;*/
	font-family: "Courier New", Courier, monospace;
	z-index:30;
	
	font-weight:bold;
	
	position:absolute;
	bottom:20px;
	right:23px;
	
	align-items:center;/*中央揃え*/
    
	line-height:120%;

	
	}
	
	
	
.fit img{/******** ロゴ **********/
	width:100%;
	max-width:100px;
	
	position:absolute;
	bottom:40px;
	right:13px;
	
	
z-index:31;
	
	}



.again{/* 最終動画画面から再生ボタン 配置位置調整*/
	
	display:none;
	
	font-size:16px;
	color:yellow;
	
	
	cursor:pointer;
	
	padding:10px;
	
	
	position:absolute;
	bottom:125px; /* 位置はここで設定*/
	left:37px;
	
	z-index:10; /*************** これ入れていないと画面に出ない ***************/
	
}



.again::before{/*円 最後からの再生ボタン分 使っている*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 40px;
	height: 40px;
	border:0px solid #E6C612;
	display: block;
	border-radius: 50%;
	content: "";
	
	background-image: url(../img/again.jpg);/*ここに背景画像で 再生三角ボタン 入れる*/
	background-color: white;
	background-size: 15px 15px;/*横 縦*/
	background-repeat: no-repeat;
	background-position: center center;
	
	
}







#video-btn{  /* 音声ボタン 配置位置調整*/
	z-index:10;
	cursor:pointer;
	font-size:16px;
	padding:10px;
	
	
	position:absolute;
	bottom:70px;/*ここで下部から位置指定*/
	left:37px;

	
}



#video-btn::before{/*円 使っている*/
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:40px;/*円のon off 固定共通サイズ*/
	height:40px;
	border:0px solid #224885;/*円枠ブルー*/
	display:block;
    border-radius:50%;

	content:"";
	background-color: white;

}


#video-btn::after{/*voice on 使っている*/
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	
	width:30px;
	height:30px;
	display:block;
	 border-radius:50%;
	 
	 content:"";


	background-image: url(../img/voice_off.jpg);/*ここに背景画像で voice on 入れる*/
	background-color: white;
	background-size: 22px 21px;/*横 縦*/
	background-repeat: no-repeat;
	background-position: center center;
	
	z-index:5;
	
}


#video{
	
}
	

.current{/*使っている*/
	background-repeat: no-repeat;
	
	background-color:;
	color: ;
	font-size:;
	
}




.current::before{/*円 voice off分 使っている*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 30px;
	height: 30px;
	border:3px solid #E6C612;
	display: block;
	border-radius: 50%;
	content: "";
	
	background-image: url(../img/voice_on.jpg);/*ここに背景画像で voice off 入れる*/
	background-color: white;
	background-size: 19px 21px;/*横 縦*/
	background-repeat: no-repeat;
	background-position: center center;
	
	
	z-index: 6;
}




/* コピーライト */

.read {
	width:100%;
	max-width:100%;
	
	
	
}


.read h1{
	width:100%;
	max-width:85%;
   text-align:left;
	
	line-height:2;
	
	margin:60px auto 10px auto;
	
font-family:"Zen Kaku Gothic New" , sans-serif;
	color:black;
	
	font-size:1.31em;
	letter-spacing:0.05em;
	
}



.read p{/*緑がそばに在る、ただそれだけで*/
	width:100%;
	max-width:85%;
   text-align:left;
	
	line-height:2.5;
	
	margin:15px auto 100px auto;
	
font-family:"Zen Kaku Gothic New" , sans-serif;
	color:black;
	
	font-size:1.13em;
	letter-spacing:-0.09em;
	
	font-feature-settings:"palt";
	
}

.read span{

    font-size:0.63em;
	letter-spacing:0.1em;
	
}
	








/* CONTENTS */

section#contents {
width:100%;
max-width:85%;
margin:0 auto 0 auto;
text-align:left;

display:flex;


	
}	

section#contents article {
text-align:left;
width:100%;
max-width:25%;


}




section#contents article h2	 {/*目次*/

font-family:"Zen Kaku Gothic New" , sans-serif;
	font-size: 1.13em;

	font-weight: bold;
	color:black;
	text-align:left;
    letter-spacing:0em;
	
	line-height:2;

 

	
}





section#contents article p{

font-family:"Zen Kaku Gothic New" , sans-serif;
	font-size: 1.06em;
	line-height: 100%;
	font-weight: normal;
	color:white;
	margin:0px;
	
	text-align:left;
	
	letter-spacing:0.1em;
	
	position:absolute;
    left:25px;
    top:-40px;
	
}











footer {
	margin:150px auto 40px auto;
	text-align:center;
	
}



footer img{
	width:100%;
	max-width:140px;
	
	margin:0 0 10px 0;

}



div.copyright {
	
	font-family: "Courier New", Courier, monospace;
	font-size: 0.75em;
	letter-spacing:0.05em;
	
	color:black;
	
	line-height:1;
	
}











/*==========================================
 タブレット 縦 スタイル
===========================================*/

@media only screen and (min-width: 741px) {
	





.read h1{
	width:100%;
	max-width:80%;
	
	font-size:23px;
	
	letter-spacing:0.2em;
	
	line-height:2;
	
}

.read p{
	width:100%;
	max-width:80%;
	
	font-size:19px;
	
	letter-spacing:0.02em;
	
	line-height:2;
	
	
	
}


header {
	text-align:center;
    background-color:white;
	width: 100%;
	height:70px;	
	position:absolute;
	top:0;
	z-index:10;
}








/* CONTENTS */

section#contents {
width:100%;
max-width:80%;



	
}	

section#contents article {
text-align:center;
width:100%;
max-width:80px;

background:;

margin:0 30px 0 0;


}




section#contents article h2	 {/*目次*/

	font-size:21px;
	
	letter-spacing:0.05em;

}

}






/*==========================================
 タブレット 横 スタイル
===========================================*/


@media only screen and (min-width: 1020px) {/*ipad 横1024*/



	
}



/*==========================================
 PC スタイル
===========================================*/

@media only screen and (min-width: 1490px) {


}







  
/* Flexible Image */
img {
  max-width: 100%; 
  height:auto;
}