@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@charset "UTF-8";
/* CSS Document */
/* Layout */
@media screen and (max-width: 834px){
/*@media screen and (min-width: 415px){*/

.top_txtarea {
	width: 80%;
	margin: 0 10%;
	padding: 32px 0;
	text-align: center;
	font: 400 16px/32px 'Noto Sans JP', sans-serif;
	color: #666;
	box-sizing: border-box;
}

.contact_box {
	max-width: 834px;
	min-width: 415px;
	marign: 0;
	padding: 80px 0 0;
	background: rgba(250,250,250,1.0);
	box-sizing: border-box;
}
	
.contact_txt {
	font: 400 12px/24px 'Noto Sans JP', sans-serif;
	color: #555;
}

.contact_txt table {
	width: 90%;
	margin: 0 5%;
	padding: 0;
}

.contact_txt table td {
	box-sizing: border-box;
	border-bottom: 1px solid #aaa;
}

.contact_txt table .firstcell {
	width: 30%;
	padding: 1.5em 0.5em 8px 2em;
	box-sizing: border-box;
}

.contact_txt table .secondcell {
	padding: 1.5em 2em 8px 0.5em;
	width: 70%;
}

form {
	font: 400 12px/24px 'Noto Sans JP', sans-serif;
	color: #555;
}

.secondcell textarea {
	width: 100%;
	font: 400 12px/24px 'Noto Sans JP', sans-serif;
	color: #555;
}

.cap_txt {
	font: 400 20px/30px 'Noto Sans JP', sans-serif;
	color: #111;
	text-shadow: 0px 0px 3px #fff;
	position: relative;
	top: 1ex;
	left: 1.5ex;
}


figure {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

figcaption {
	position: absolute;
	top: -156px;
	left: 0;
	z-index: 2;
	margin: 0;
	width: 100%;
	height: 100%;
	background: rgba(70,0,0,0.7);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
	box-sizing: border-box;
}

figure:hover figcaption {
	top: 0;
	left: 0;
}
figure:hover figcaption.top_bottom_icon25_text1 { background: rgba(60,0,0,10,0.7); }
figure:hover figcaption.top_bottom_icon25_text2 { background: rgba(0,80,20,0.7); }
figure:hover figcaption.top_bottom_icon25_text3 { background: rgba(0,20,120,0.7); }
figure:hover figcaption.top_bottom_icon25_text4 { background: rgba(30,0,80,0.7); }

.top_bottom_icon25_text1, .top_bottom_icon25_text2, .top_bottom_icon25_text3, .top_bottom_icon25_text4 {
	width: 100%;
	background:rgba(51,00,00,0.6);
	padding: 0;
	font:400 12px/12px 'Noto Sans JP', sans-serif;
	letter-spacing: 1px;
	color: #fff;
	text-align: center;
}

.top_bottom_icon25_text1 .capbox, .top_bottom_icon25_text2 .capbox, .top_bottom_icon25_text3 .capbox, .top_bottom_icon25_text4 .capbox {
	width: 100%;
	height: 100%;
	margin: 0;
	paddig: 0;
	box-sizing: border-box;
}

.top_bottom_icon25_text1 .capbox .cap, .top_bottom_icon25_text2 .capbox .cap, .top_bottom_icon25_text3 .capbox .cap, .top_bottom_icon25_text4 .capbox .cap {
	margin: 0;
	padding: 0;
	width: 500px;
	min-width: 368px;
	height: 156px;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	font:400 12px/20px 'Noto Sans JP', sans-serif;
	text-shadow: 2px 2px 4px #000;
	border: 24px solid rgba(255,255,255,0);
	border-radius: 12px;
	box-sizing: border-box;
}

.top_bottom_icon25_text1 .title, .top_bottom_icon25_text2 .title, .top_bottom_icon25_text3 .title, .top_bottom_icon25_text4 .title {
	margin: 0;
	padding: 4px 0;
}

#top_news_title {
	max-width: 999px;
	min-width: 688px;
	margin: 10px 0;
	padding: 8px 16px 4px;
	font:600 18px/18px 'Noto Sans JP', sans-serif;
	color: #fff;
	letter-spacing: 1px;
	text-align: left;
	background: #a01;
	border-bottom: 1px solid #999;
}

#top_news {
	background:#fafafa;
	max-width: 999px;
	min-width: 688px;
	min-height: 160px;
	margin: 0 0 16px;
	padding: 12px 16px;
	font:400 12px/32px 'Noto Sans JP', sans-serif;
	text-align: left;
	border: 1px solid rgba(255,255,255,0.0);
	box-sizing: border-box;
}

#top_news ul {
	list-style-type: circle;
	max-width: 895px;
	min-width: 616px;
	margin: 0;
	padding: 0 24px 0 48px;
}

#top_banner {
	width: 100%;
	height: 372px;
	margin: 16px 0 0;
	padding: 0;
	background: #f3f3f3;
	clear: both;
}

.top_bannerbox {
	max-width: 999px;
	min-width: 720px;
	height: inherit;
	margin: 0 auto;
	padding: 0;
	background: #f3f3f3;
	clear: both;
}

.top_bannerbox_txt {
	font: 400 12px/18px 'Noto Sans JP',sans-serif;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

.top_bannerbox_img {
	text-align: center;
	height: 118px;
	margin: 0;
	padding: 12px 0 0 0;
}

.top_bannerbox1 {
	width: 50%;
	min-width: 368px;
	height: 178px;
	margin: 8px 0 0;
	padding: 0;
	border-right: 1px solid #999;
	border-bottom: 4px solid #eee;
	box-sizing: border-box;
	float: left;
}

.top_bannerbox2 {
	width: 50%;
	min-width: 368px;
	height: 178px;
	margin: 8px 0 0;
	padding: 0;
	border-bottom: 4px solid #eee;
	box-sizing: border-box;
	float: left;
}

.top_bannerbox3 {
	width: 50%;
	min-width: 368px;
	height: 178px;
	margin: 8px 0 0;
	padding: 0;
	border-right: 1px solid #999;
	border-bottom: 4px solid #eee;
	box-sizing: border-box;
	float: left;
}

.top_bannerbox4 {
	width: 50%;
	min-width: 368px;
	height: 178px;
	margin: 8px 0 0;
	padding: 0;
	border-bottom: 4px solid #eee;
	box-sizing: border-box;
	float: left;
}


////////////////////////////////////

#btn_navi{
	width:600px;
}

.top_menu ul{
	width:840px;
	text-align:center;
	margin:0 0 10px 50%;
	position:absolute;
	left:-420px;
	bottom:0;
	color:white;
}

.top_menu ul li{
	float:left;
	width:120px;
}

.top_menu ul li a{text-decoration:none;padding:10px 10px 10px;border-radius:10px;}
.top_menu ul li a:link{color:#FFFFFF}
.top_menu ul li a:visited{color:#FFFFFF}
.top_menu ul li a:hover{color:#FFFFFF;font-weight:800;background:#FF3333;
    -moz-box-shadow: inset 0px 0px 5px 5px #666666;
    -webkit-box-shadow: inset 0px 0px 5px 5px #666666;
    box-shadow: inset 0px 0px 5px 5px #666666;
}

.fade1{
	animation-name: fade_in;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-direction:alternate;
	animation-play-state:runnning;
	animation-fill-mode: forwards;

	-moz-animation-name: fade_in;
	-moz-animation-duration: 2s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-delay: 1s;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction:alternate;
	-moz-animation-play-state:runnning;
	-moz-animation-fill-mode: forwards;

	-webkit-animation-name: fade_in;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-delay: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction:alternate;
	-webkit-animation-play-state:runnning;
	-webkit-animation-fill-mode: forwards;

	-o-animation-name: fade_in;
	-o-animation-duration: 2s;
	-o-animation-timing-function: ease-in-out;
	-o-animation-animation-delay: 1s;
	-o-animation-iteration-count: 1;
	-o-animation-direction:alternate;
	-o-animation-play-state:runnning;
	-o-animation-fill-mode: forwards;

	-ms-animation-name: fade_in;
	-ms-animation-duration: 2s;
	-ms-animation-timing-function: ease-in-out;
	-ms-animation-animation-delay: 1s;
	-ms-animation-iteration-count: 1;
	-ms-animation-direction:alternate;
	-ms-animation-play-state:runnning;
	-ms-animation-fill-mode: forwards;
	opacity: 0;
}

@-moz-keyframes fade_in {
	0%{opacity:0;}
	100%{opacity:1;}
}

@-webkit-keyframes fade_in {
	0%{opacity:0;}
	100%{opacity:1;}
}

@-o-keyframes fade_in {
	0%{opacity:0;}
	100%{opacity:1;}
}

@-ms-keyframes fade_in {
	0%{opacity:0;}
	100%{opacity:1;}
}

.fade2{
	animation-name: fade_in;
	animation-duration: 3.5s;
	animation-timing-function: ease-in-out;
	animation-delay: 2s;
	animation-iteration-count: 1;
	animation-direction:alternate;
	animation-play-state:runnning;
	animation-fill-mode: forwards;

	-moz-animation-name: fade_in;
	-moz-animation-duration: 3.5s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-delay: 2s;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction:alternate;
	-moz-animation-play-state:runnning;
	-moz-animation-fill-mode: forwards;

	-webkit-animation-name: fade_in;
	-webkit-animation-duration: 3.5s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-delay: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction:alternate;
	-webkit-animation-play-state:runnning;
	-webkit-animation-fill-mode: forwards;

	-o-animation-name: fade_in;
	-o-animation-duration: 3.5s;
	-o-animation-timing-function: ease-in-out;
	-o-animation-animation-delay: 2s;
	-o-animation-iteration-count: 1;
	-o-animation-direction:alternate;
	-o-animation-play-state:runnning;
	-o-animation-fill-mode: forwards;

	-ms-animation-name: fade_in;
	-ms-animation-duration: 3.5s;
	-ms-animation-timing-function: ease-in-out;
	-ms-animation-animation-delay: 2s;
	-ms-animation-iteration-count: 1;
	-ms-animation-direction:alternate;
	-ms-animation-play-state:runnning;
	-ms-animation-fill-mode: forwards;
	color:#FFFFFF;
	opacity: 0;
}

@-moz-keyframes fade_in {
	0%{opacity:0;color:#FFFFFF;}
	50%{color:#FFFFFF;}
	100%{opacity:1;color:#AA0011;}
}

@-webkit-keyframes fade_in {
	0%{opacity:0;color:#FFFFFF;}
	50%{color:#FFFFFF;}
	100%{opacity:1;color:#AA0011;}
}

@-o-keyframes fade_in {
	0%{opacity:0;color:#FFFFFF;}
	50%{color:#FFFFFF;}
	100%{opacity:1;color:#AA0011;}
}

@-ms-keyframes fade_in {
	0%{opacity:0;color:#FFFFFF;}
	50%{color:#FFFFFF;}
	100%{opacity:1;color:#AA0011;}
}