@charset "utf-8";


/*----------------------------------------------
	Overall settings
-----------------------------------------------*/

body{ color: #111; text-align: center;}
body.ovh{ position: fixed; left: 0; top: 0; width: 100%; height: 100vh;}
a{ color: #111; text-decoration:none; -webkit-transition: all .2s; transition: all .2s;}
a:hover{ opacity: .7; text-decoration:none;}
.underline{ text-decoration: underline;}
/* font */
.gothic{ font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;}
.mincho{ font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;}
/* bg */
.bg-white{ background: #fff;}
/* color */
.white{ color: #fff;}
.red{ color: #c00;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 599px) {/* 以下スマホサイズ */
	a:hover{ opacity: 1;}
}
@media screen and (max-width: 350px) {
	html{ font-size: 50%;}
}



/*----------------------------------------------
	header
-----------------------------------------------*/

header{ clear: both; box-sizing: content-box; margin-left: auto; margin-right: auto; padding: 30px 5%; text-align: left;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 599px) {
}



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

.wrap{ clear: both; box-sizing: content-box; max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: 5%; padding-right: 5%;}
h2{ font-size: 46px; font-weight: bold; line-height: 1.2; padding-bottom: .8em;}
h2 span{ color: #00B050;}
h2 small{ display: block; font-size: 20px; letter-spacing: .1em; padding-top: .5em;}
section{ padding: 80px 0 30px; background: url(../img/bg1.svg) right top no-repeat, url(../img/bg2.svg) left bottom no-repeat, #E2F0D9;}
.pamphlet{ display: flex; flex-wrap: wrap;}
.pamphlet a{ width: 23%; margin: 0 1% 2%; padding: 1em 1em 3em; border: 1px solid #fff; position: relative;}
.pamphlet a:hover{ opacity: 1; background: #fff;}
.pamphlet a figure{ padding-top: 140%; margin-bottom: .5em; background-size: contain!important; background-position: center!important; background-repeat: no-repeat!important;}
.pamphlet a .txt{ display: block; margin-bottom: .5em; line-height: 1.4;}
.pamphlet a .btn{ position: absolute; left: 1em; bottom: 1em; width: calc(100% - 2em); display: block; padding: .3em 0; color: #fff; font-size: 14px; white-space: nowrap;line-height: 1.4; background: #92D050;}
.pager{ display: flex; justify-content: center;}
.pager a{ width: 3em; line-height: 3; margin: 0 .5em; background: #ccc;}
.pager a.active{ color: #fff; background: #0075C1;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 800px) {
	.pamphlet a{ width: 31%;}
}
@media screen and (max-width: 599px) {
	h2{ font-size: 26px;}
	h2 small{ font-size: 14px;}
	section{ padding: 40px 0;}
	.pamphlet a{ width: 48%;}
	.pamphlet a .btn{ font-size: 12px;}
	footer{ font-size: 14px;}
}