/*
COLOR

#9EBD75	グリーン系
#799B4A	上濃
#D1C579
#A89B71	ブラウン系
#B75C4A	オレンジ系（レンガ）
#DDC997
#EDE2C7	最淡

*/


*{
	font-size:18px;
	line-height:150%;
	font-family: 'Noto Sans Japanese';
	font-weight:300;
}

html{
	background:#9EBD75
}




/*----- header -----*/
header{
	widtn:100%;
	color:#FFF;
	background:#D1C579;
	clear:both;
}

header h1{
	font-family:serif;
}

@media screen and (min-width: 768px){
/*	header{
		height:;
		}
*/
	header h1{
		font-size:28px;
		}
	header h2{
		font-size:21px;
		font-weight:200;
		}

}

@media screen and (max-width: 767px){
/*	header{
		height:;
		}
*/
	header h1{
		font-size:24px;
		text-align:center;
		}
	header h2{
		font-size:18px;
		font-weight:200;
		text-align:center;
		}
}

/*----- Navigation-----*/
nav{
	width:100%;
	height:50px;
	background:#A89B71;
	clear:both;
}

nav .container{
	padding:0;
}

nav ul{
	list-style-type:none;

}

nav li{
	width:33.3%;
	height:50px;
	text-align:center;
	float:left;
}

@media screen and (max-width: 480px){
	nav li .sml{
		font-size:12px;
	}
}

nav a{
	line-height:50px !important;
	color:#FFF;
	text-decoration:none;
	display:block;
}

nav a:hover{background:#B75C4A;}
nav a:active{background:#B75C4A;}

/*----- section -----*/

section{
	width:100%;
	color:#222;;
	background:#FFF;
}

@font-face {
font-family: hui;
	src: url("//www.hatsutaetsuko.jp/font/HuiFontP29.eot");/*For IE*/
	src: url("//www.hatsutaetsuko.jp/font/HuiFontP29.woff") format("woff"),/*For Modern browser*/
		url("//www.hatsutaetsuko.jp/font/HuiFontP29.ttf") format("truetype");/*For iOS Android*/
}

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

	#main{
		height:300px;
		background:#EDE2C7 url('../img/bg_photol.jpg') no-repeat top right;
	}

	#main p{
		color:#877A54;
		margin-top:70px;
		font-size:28px;
		font-weight:400;
	font-family:hui;
		text-shadow:0 0 5px #FFFFFF;
	}
}

@media screen and (max-width: 480px){
	#main{
		height:200px;
		background:#EDE2C7 url('../img/bg_photos.jpg') no-repeat top right;
	}

	#main p{
		color:#877A54;
		margin-top:35px;
		font-size:19px;
		font-weight:400;
	font-family:hui;
		text-shadow:0 0 5px #FFFFFF;
	}
}

section h1{
	font-size:36px;
	color:#433B2E;
	margin-bottom:20px;
}

section h3{
	font-size:24px;
	color:#B75C4A;
	margin:10px 0;
	border-bottom:solid 2px #B75C4A;
}

h5{
	color:#F26E19;
}

section p{
	margin:10px 0;
}

section ul{
	padding-left:25px;
	list-style-image: url(../img/dot_01.png);

}

section img{
	margin:5px 5px 0 0;
}

section a:link{color:#799B4A;text-decoration:none;}
section a:visited{color:#799B4A;text-decoration:none;}
section a:hover{color:#B75C4A;text-decoration:underline;}
section a:active{color:#B75C4A;text-decoration:underline;}

/*----- footer -----*/

footer{
	widtn:100%;
	color:#FFF;
	background:#9EBD75;
	clear:both;
}

footer p{
	font-size:14px;
/*	margin-top:80px;*/
}

footer a:link{color:#FFFFFF;text-decoration:none;}
footer a:visited{color:#FFFFFF;text-decoration:none;}
footer a:hover{color:#FFFFFF;text-decoration:underline;}
footer a:active{color:#FFFFFF;text-decoration:underline;}

/*-----  -----*/

strong{
	font-size:36px;
}

/*----- Table -----*/

table.tb1{
	margin:10px 0;
	border:1px solid #CCC;
	border-collapse: collapse;
}

@media screen and (max-width: 480px){
	table.tb1{
		width:100%;
	}
}

table.tb1 td,th{
	font-weight:200;
	padding:10px;
	border:1px solid #CCC;
	border-collapse: collapse;
}

table.tb1 th{
	background:#EDE2C7;
	text-align:center;
	white-space: nowrap;
}

table.tb1 td{
	background:#FFF;
}

@media screen and (max-width: 480px){
	table.tb1 td,th{
		width:100%;
		display:block;
	}
}

/*----- Form -----*/

.fm1{
	width:400px;
	padding:2px;
}

.fm2{
	width:480px;
	padding:2px;
}

@media screen and (max-width: 480px){
	.fm1,.fm2{width:100%;}
}

/*----- button -----*/
.btn {
	width: 250px;
	color:#FFF !important;
	font-size: 21px;
	text-decoration: none;
	text-align: center;
	display: block;
	float:left;
	background: #799B4A;
	padding: 10px 0;
	margin:10px 10px 10px 0;
}

a:hover.btn {
	text-decoration:none;
    filter: alpha(opacity=60);
    -ms-filter: "alpha(opacity=60)";
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity:0.6;

}


.R90{
	transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	display: inline-block;
}

a:hover img {
	text-decoration:none;
    filter: alpha(opacity=60);
    -ms-filter: "alpha(opacity=60)";
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity:0.6;

}

.twitter{
	height:350px;
	overflow:scroll;
	overflow-y: scroll;
	overflow-x: hidden;
	border:solid 1px #EEE;
}

.movie-wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}