@charset "UTF-8";

@import "https://fonts.googleapis.com/css?family=Lato:400,900";

/*--------------------------------------------
DATA TEXT
---------------------------------------------*/

[data-before]:before{
	content : attr( data-before );
}

[data-after]:after{
	content : attr( data-after );
}

/*--------------------------------------------
WRAP OVER
---------------------------------------------*/

@media screen and (max-width:999px){
	.fluid{
		margin-right : calc(50% - 50vw);
		margin-left : calc(50% - 50vw);
	}
}

/*--------------------------------------------
MAP
---------------------------------------------*/

.map-container{
	position : relative;
}

.map-container > #map , .map-container > iframe{
	width : 100%;
	height : 100%;
	position : absolute;
	top : 0;
	left : 0;
	right : 0;
	bottom : 0;
	margin : auto;
}

.is-sp{
	display : none !important;
}

/*--------------------------------------------
FONTS
---------------------------------------------*/

.yugothic{
	font-family : "游ゴシック体" , "Yu Gothic" , YuGothic , "ヒラギノ角ゴシック", "Hiragino Sans", "メイリオ" , Meiryo , sans-serif;
}

.lato{
	font-family : "Lato", sans-serif;
}

/*--------------------------------------------
TITLES
---------------------------------------------*/

.title01{
	text-align : center;
	width : 800px;
	margin-left : auto;
	margin-right : auto;
	border-bottom : solid 2px #6c3;
	font-size : 30px;
	padding-bottom : 22px;
	position : relative;
	letter-spacing : 0;
}

.title01:after{
	display : block;
	position : absolute;
	left : 50%;
	transform : translateX(-50%);
	font-size : 15px;
	letter-spacing : 0;
	bottom : -27px;
	font-family : "Lato", sans-serif;
	color : #999;
}

.title02{
	text-align : center;
}

.title02 > span{
	display : inline-flex;
	align-items : center;
	min-height : 71px;
	font-size : 25px;
	line-height : 30px;
	letter-spacing : .4em;
	position : relative;
	padding-left : 35px;
	padding-right : 35px;
}

.title02 > span:before{
	content : "";
	display : block;
	background : url("../images/ui/title/bg0201.png") left top no-repeat;
	width : 21px;
	height : 72px;
	position : absolute;
	top : 50%;
	transform : translateY(-50%);
	left : -21px;
}

.title02 > span:after{
	content : "";
	display : block;
	background : url("../images/ui/title/bg0202.png") left top no-repeat;
	width : 19px;
	height : 71px;
	position : absolute;
	top : 50%;
	transform : translateY(-50%);
	right : -19px;
}

.title03{
	display : flex;
	align-items : center;
	color : #fff;
	font-size : 16px;
	padding-left : 25px;
	height : 50px;
	background-color : #393;
	font-weight : 500;
}

.title04{
	font-weight : 500;
	font-size : 40px;
	line-height : 50px;
	color : #f90;
}

.title05{
	font-size : 25px;
	letter-spacing : .4em;
	border-bottom : 2px solid #393;
	width : 550px;
	margin-left : auto;
	margin-right : auto;
	padding-bottom : 13px;
	text-align : center;
}

.title06{
	text-align : center;
}

.title06 span{
	position : relative;
	display : flex;
	align-items : center;
	justify-content : center;
	font-size : 25px;
	letter-spacing : .2em;
}

.title06 span:before , .title06 span:after{
	content : "";
	display : block;
	width : 184px;
	height : 6px;
	background-color : #cfc;
}

.title06 span:before{
	margin-right : 30px;
}

.title06 span:after{
	margin-left : 30px;
}

.archive-title{
	display : flex;
	align-items : center;
	font-size : 25px;
	letter-spacing : .2em;
	height : 120px;
	padding-left : 21px;
	padding-right : 21px;
	background-color : #64c424;
	color : #fff;
}

.archive-title + .list-staffs{
	margin-top : 15px;
}

.header-single{
	position : relative;
	background-color : #64c424;
	color : #fff;
	padding-top : 34px;
	position : relative;
	padding-bottom : calc( 35px - 4.5px );
	padding-left : 24px;
	padding-right : 24px;
}

.header-single time{
	font-size : 14px;
}

.header-single h2{
	margin-top : calc( 21px - 4.5px );
}

.header-single h2 a{
	display : block;
	font-size : 25px;
	line-height : 36px;
	color : #fff;
	text-decoration : underline;
}

.header-single .category{
	position : absolute;
	right : 14px;
	top : -10px;
}

.header-single + .tags{
	margin-bottom : calc( 35px - 8px );
}

/*--------------------------------------------
PARTS
---------------------------------------------*/

.squareLinks{
	display : flex;
}

.squareLinks li{
	width : 25%;
	min-height : 317px;
}

.squareLinks li:nth-child(odd){
	background-color : #ebf8cd;
}

.squareLinks li:nth-child(even){
	background-color : #eaf5ea;
}

.squareLinks h4{
	width : 100%;
	height : 222px;
	background-position : center center;
	background-repeat : no-repeat;
	transition : background .3s ease-in-out;
	-webkit-backface-visibility : hidden;
	        backface-visibility : hidden;
	will-change : background;
	background-size : 100% 100%;
	color : #fff;
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	font-size : 20px;
	letter-spacing : 0;
}

.squareLinks p{
	font-size : 14px;
	line-height : 21px;
	padding-left : 19px;
	padding-right : 19px;
	padding-top : calc( 15px - 3.5px );
}

.squareLinks li a:hover h4{
	background-size : 120% 120%;
	opacity : 1;
}

.overviewFlex{
	position : relative;
	overflow : hidden;
}

.overviewFlex .bg{
	background-color : #f1fcd8;
	position : relative;
}

.overviewFlex .wrap{
	position : relative;
}

.overviewFlex .absolute{
	position : absolute;
}

.overviewList{
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	position : relative;
	padding-top : 31px;
	padding-bottom : 41px;
}

.overviewList:before{
	content : "";
	display : block;
	position : absolute;
	left : 50%;
	transform : translateX(-50%);
	background-color : #f1fcd8;
	width : 1200px;
	height : 100%;
	top : 0;
	z-index : -1;
}

.overviewList > li{
	position : relative;
	box-shadow : 3px 3px #333;
	background-color : #fff;
	padding-top : calc( 116px - 2px );
	padding-bottom : calc( 20px - 3.5px );
	background-repeat : no-repeat;
	background-position : center 30px;
}

.overviewList > li h4{
	font-size : 18px;
	text-align : center;
	font-weight : 500;
	line-height : 22px;
}

.overviewList > li h4 span{
	font-size : 14px;
	line-height : 1;
}

.overviewList > li h4:after{
	margin-top : calc( 13px - 2px );
	content : "";
	display : block;
	height : 2px;
	background-color : #64c424;
	margin-left : 25px;
	margin-right : 25px;
}

.overviewList > li p{
	padding-left : 12px;
	padding-right : 12px;
	font-size : 14px;
	line-height : 21px;
	margin-top : calc( 11px - 3.5px );
}

.overviewWrap{
	padding-top : 31px;
	padding-bottom : calc( 14px - 3px );
	position : relative;
	margin-top : 24px;
}

.overviewWrap:before{
	content : "";
	display : block;
	position : absolute;
	left : 50%;
	transform : translateX(-50%);
	background-color : #f1fcd8;
	width : 1200px;
	height : 100%;
	top : 0;
	z-index : -1;
}

.overviewWrap .overviewWrapList{
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	position : relative;
}

.overviewWrap .overviewWrapList > li{
	position : relative;
	box-shadow : 3px 3px #333;
	background-color : #fff;
	padding-top : calc( 116px - 5px );
	padding-bottom : calc( 20px - 3.5px );
	background-repeat : no-repeat;
	background-position : center 30px;
	width : 350px;
}

.overviewWrap .overviewWrapList > li:nth-child(n+4){
	margin-top : 21px;
}

.overviewWrap .overviewWrapList > li h4{
	font-size : 18px;
	line-height : 28px;
	text-align : center;
	font-weight : 500;
}

.overviewWrap .overviewWrapList > li h4 span{
	font-size : 14px;
	line-height : 1;
}

.overviewWrap .overviewWrapList > li h4:after{
	content : "";
	display : block;
	width : 300px;
	margin-left : auto;
	margin-right : auto;
	background-color : #64c424;
	height : 2px;
	margin-top : calc( 13px - 5px );
}

.overviewWrap .overviewWrapList > li p{
	padding-left : 12px;
	padding-right : 12px;
	font-size : 14px;
	line-height : 21px;
	margin-top : calc( 11px - 3.5px );
}

.overviewWrap > p{
	font-size : 12px / 18px;
	text-align : right;
	letter-spacing : 0;
}

.overviewWrap > p:nth-of-type(1){
	margin-top : calc( 19px - 3px );
}

/*--------------------------------------------
PAGINATION
---------------------------------------------*/

.paginationDetail{
	margin-top : 59px;
	display : flex;
	align-items : center;
	justify-content : center;
}

.paginationDetail a{
	font-size : 16px;
	letter-spacing : 0;
	padding-left : 1em;
	padding-right : 1em;
}

.paginationDetail a:nth-of-type(2){
	display : flex;
	align-items : center;
	justify-content : center;
	position : relative;
}

.paginationDetail a:nth-of-type(2):before , .paginationDetail a:nth-of-type(2):after{
	content : "｜";
	display : block;
	position : absolute;
	top : 50%;
	transform : translateY(-50%);
}

.paginationDetail a:nth-of-type(2):before{
	left : -.5em;
}

.paginationDetail a:nth-of-type(2):after{
	right : -.5em;
}

/*--------------------------------------------
CATEGORY
---------------------------------------------*/

.category{
	width : 216px;
	height : 40px;
	color : #fff;
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	font-size : 16px;
}

.category.category-34{
	background-color : #88abda;
}

.category.category-35{
	background-color : #facd89;
}

.category.category-36{
	background-color : #f29c9f;
}

.category.category-37{
	background-color : #7ecef4;
}

.list-staffs{
	display : flex;
	justify-content : space-between;
	flex-wrap : wrap;
}

.list-staffs a{
	display : block;
	padding-bottom : 48px;
}

.list-staffs > li{
	width : 380px;
}

.list-staffs picture{
	overflow : hidden;
}

.list-staffs picture > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	font-family : "object-fit: cover;";
}

.list-staffs picture{
	width : 100%;
	height : 285px;
}

.list-staffs .category{
	margin-left : 10px;
	margin-top : -20px;
	position : relative;
	z-index : 1;
}

.list-staffs h2 , .list-staffs h3{
	font-size : 22px;
	line-height : 1.1818;
	font-weight : 500;
	margin-top : calc( 14px - 2px );
}

.list-staffs time{
	display : block;
	margin-top : calc( 12px - 2px );
	font-size : 16px;
	color : #666;
}

.tags{
	display : flex;
	flex-wrap : wrap;
	margin-left : -12px;
}

.tags li{
	height : 30px;
	margin-left : 12px;
	margin-top : 10px;
}

.tags a{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	height : 100%;
	padding-left : 15px;
	padding-right : 15px;
	font-size : 12px;
	border : 1px solid #ccc;
	border-radius : 15px;
}