@charset "utf-8";
/* ===================================================
	charm CSS
====================================================== */
/* ---------------------------------------------------
lead_tit
------------------------------------------------------ */

.lead_tit { padding: 100px 0 110px;}
.lead_tit h2 { line-height: 1.5; font-size: 40px; color: #8f847e; text-align: center; font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.lead_tit p { padding: 47px 0 0; text-align: center;}

@media screen and (max-width: 600px) {
	.lead_tit { padding: 60px 0 70px;}
	.lead_tit h2 { font-size: 26px;}
	.lead_tit p { padding: 30px 0 0; text-align: left;}
}


/* ---------------------------------------------------
section
------------------------------------------------------ */
section[id^="sec"] { padding: 0 0 120px; background: url(../img/bg2.gif);}
section[id^="sec"] >img { width: 100%; height: 650px;}
section[id^="sec"] .sec_photo { display: flex;}
section[id^="sec"] .sec_photo li { width: 50%;}
section[id^="sec"] .sec_photo li img { width: 100%; height: 650px;}
section[id^="sec"] p.num { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: -60px auto 20px; width: 120px; height: 120px; background-color: #423734; color: #beb2ab; text-align: center; font-size: 40px; font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; line-height: 1.2;}
section[id^="sec"] p.num span { display: block; font-size: 19px;}
section[id^="sec"] h2 { margin: 0 0 30px; text-align: center; font-size: 40px; color: #305194; font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
section[id^="sec"] h2+p { text-align: center;}
section[id^="sec"] .sec_inn ul { display: flex; justify-content: space-between; margin: 70px 0 0;}
section[id^="sec"] .sec_inn ul li { max-width: 32%; text-align: center;}
section[id^="sec"] .sec_inn ul li p { padding: 25px 0 0;}
section[id^="sec"] .sec_inn a { display: block; width: 330px; max-width: 90%; margin: 40px auto 0; padding: 15px 0; color: #fff; background-color: #2b4a87; border-radius: 50px; text-align: center; transition: all 0.5s;}

@media (hover: hover) {
section[id^="sec"] .sec_inn a:hover { background-color: #1a3569; text-decoration: none; opacity: 1;}
}

@media screen and (max-width: 600px) {
	section[id^="sec"] { padding: 0 0 50px;}
	section[id^="sec"] >img { height: 60vw; min-height: 250px;}
	section[id^="sec"] .sec_photo li img { height: 60vw; min-height: 250px;}
	section[id^="sec"] p.num { width: 80px; height: 80px; margin: -40px auto 20px; font-size: 26px;}
	section[id^="sec"] p.num span { font-size: 12px;}
	section[id^="sec"] h2 { margin: 0 0 20px; font-size: 26px;}
	section[id^="sec"] h2+p { text-align: left;}
	section[id^="sec"] .sec_inn ul { display: block; margin: 45px 0 0;}
	section[id^="sec"] .sec_inn ul li { max-width: 100%; width: 100%;}
	section[id^="sec"] .sec_inn ul li p { padding: 0 0 25px;}
	section[id^="sec"] .sec_inn a { margin: 25px auto 0;}
}