﻿@charset "utf-8";
	*{margin:0; padding:0; /*vertical-align:bottom;*/}
	body{
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	overflow-x:hidden;
	}
	
	.mb60{margin-bottom: 60px;}
	.t33p{top: 33%;}	


	.fl{float:left;}
	.fr{float:right;}
	.cb{clear:both;}
	.mincho {font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}
	.tx_shadow{text-shadow:2px 2px 2px #666;}
	.fs85{font-size:85%;}
	.fs95{font-size:95%;}
	.setu{font-size:87.5%; margin:15px 30px; text-indent:1em; text-align:justify;}
	.flex{display:flex; flex-wrap:wrap;}


.inner{max-width:980px; margin:0 auto;}


	/*wrapper*/
	#wrapper1{width:1100px; margin:0 auto; background:#333;}
	#wrapper2{width:1100px; margin:0 auto; background:#fff;}

	@media screen and ( max-width:1099px ){
	#wrapper1, #wrapper2{width:100%; margin:0;}
	}


	/*header*/
	header{
margin:0 -800px; padding:10px 800px; background:#333; height:80px; color:#eee;
border-top: solid 3px #aaa;
}
@media screen and ( max-width:1099px ){
header{margin:0; padding:10px 0;}
}
	#header_left{margin-left:10px;}
	header h1{line-height:1.2; font-size:150%; letter-spacing:2px;}

	header ul li{display:inline; list-style-type:none; width:calc(20% - 20px); margin:0 10px; font-weight: bold;}
	header ul li a, header ul li a:link, header ul li:visited{color:#eee;}

	#header_nav_area{margin-top:35px;}
@media screen and ( max-width:699px ){#header_nav_area{margin-top:15px; margin-bottom:5px;}}





	/*header underlineに関する記述ここから*/

	.underline-from-center:hover:before, 
	.underline-from-center:focus:before, 
	.underline-from-center:active:before {
	    left: 0px;
	    right: 0px;
	}
	.underline-from-center:before {
	    content: "";
	    position: absolute;
	    z-index: -1;
	    left: 50%;
	    right: 50%;
	    bottom: 0px;
	    background: #eee;
	    height: 4px;
	    transition-property: left, right;
	    transition-duration: 0.3s;
	    transition-timing-function: ease-out;
	}    

	.underline-from-center {
	    display: inline-block;
	    vertical-align: middle;
	    transform: translateZ(0px);
	    box-shadow: 0px 0px 1px transparent;
	    backface-visibility: hidden;
	    position: relative;
	    overflow: hidden;
	}
	.underline-from-center{
	    line-height:40px;
	    cursor: pointer;
	    text-decoration: none;
	    color: #eee;
	}
	/*header underlineに関する記述ここまで*/



/*news box等の記述*/


#main #news_box{display:flex; flex-wrap:wrap; margin-top:30px;}
#main #news_box div.news_img_box{width:calc(25% - 16px); margin:8px; /*position:relative;*/ border-radius: 10px; box-shadow: 2px 2px 2px #BBB; overflow: hidden; padding: 0px; }
@media screen and ( max-width:859px ){#main #news_box div.news_img_box{width:calc(33.3% - 16px);}}
@media screen and ( max-width:639px ){#main #news_box div.news_img_box{width:calc(50% - 16px); }}

#main #news_box div.news_img_box img {
    /*max-height: 178px;*/
	max-width:100%;
    /*position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;*/
    margin: auto auto -8px auto;
}

.flex_contener{display:flex; flex-wrap:wrap;}
.flex_contener div{width:calc(33.3% - 38px); margin:10px; border-radius:12px; background:#fffab3; padding:6px 9px; box-shadow:2px 2px 2px #ccc;}
.flex_contener .bnr{width:calc(33.3% - 20px); margin:10px; border-radius:2px; background:#fff; padding:0px; box-shadow:0px 0px; position:relative;}
.flex_contener .bnr p{position:absolute; bottom:5%; color:#fff; font-size:1.3vw; font-weight:400; text-shadow:1px 1px 1px #ccc;}


.flex_contener .bnr img{ box-shadow:2px 2px 2px #ccc;}

.flex_contener div img{width:100%;}
@media screen and ( max-width:859px ){.flex_contener div{width:calc(50% - 20px); margin:5px; border-radius:10px; padding:4px 5px;}}
@media screen and ( max-width:639px ){
.flex_contener div{width:calc(100% - 16px); margin:4px; border-radius:10px; padding:4px 4px;}
.flex_contener div.fl_min50{width:calc(50% - 14px); margin:3px; border-radius:6px; padding:4px 4px;}}
}



