@charset "utf-8";

* {min-width:0;}
.action-keyboard *:focus {outline:2px dotted red;}

.mainSection {position:relative; padding-left:1em; padding-right:1em; line-height:1.3; z-index:0;}
.mainSection .inner {max-width:1460px;}
.mainSection h2,
.mainSection h3,
.mainSection h4 {font-family:'TTWanjudaedunsancheB'; font-weight:800;}
.mainSection h3 {margin-bottom:1em;}
.mainSection h3 strong {display:block; font-size:1.8em; color:#000;}
.mainSection h4 {margin-bottom:.3125em;}
.mainSection h4 strong {display:block; font-size:1.6em; color:#fff;}

#m_conts {overflow:hidden;}

/*********************************
	Visual
**********************************/

.mainVisualWrap {padding-top:6em; padding-bottom:2em; background:#D7F3F2 url(../img/main/bak_visual.png) no-repeat 50% 0 / 100% auto;}
.mainVisualWrap .bak-obj1,
.mainVisualWrap .bak-obj2 {position:absolute; width:23.25em; height:18.85em; background:url(../img/main/spr_main.png) no-repeat 0 0 / 50em auto; z-index:-1;}
.mainVisualWrap .bak-obj1 {left:0; bottom:0;}
.mainVisualWrap .bak-obj2 {right:0; top:0; background-position-x:-23.25em;}
.mainVisualWrap .obj {position:absolute; right:1em; top:50%; width:41.5em; height:23.8em; margin-top:-11.9em; background:url(../img/main/spr_main.png) no-repeat 0 -19em / 50em auto; z-index:-2;}

.mainVisualWrap h2 {font-size:2.9em; color:#000; line-height:1.2;}
.mainVisualWrap h2 > * {display:block; word-break:keep-all;}
.mainVisualWrap h2 em {display:block; color:#539A68;}
.mainVisualWrap h2 + p {color:#33383D; margin-top:1em; margin-bottom:3em; word-break:keep-all;}

@media all and (max-width:1024px) {
	.mainVisualWrap .inner {font-size:.9em;}
	.mainVisualWrap .obj {font-size:.8em; right:-5em; top:auto; margin-top:auto; bottom:2em;}	
}
@media all and (max-width:700px) {
	.mainVisualWrap .bak-obj1,
	.mainVisualWrap .bak-obj2 {font-size:.5em;}
	.mainVisualWrap .obj {font-size:.6em; right:-5em; bottom:3em;}
}
@media all and (max-width:460px) {
	.mainVisualWrap h2 {font-size:2.5em;}
	.mainVisualWrap .bak-obj2 {font-size:.3em;}
	.mainVisualWrap .obj {font-size:.7em; right:-15em;}
}
@media all and (max-width:360px) {
	.mainVisualWrap h2,
	.mainVisualWrap h2 + p {text-align:center;}
	.mainVisualWrap h2 {font-size:2.6em;}
	.mainVisualWrap .bak-obj2 {font-size:.5em;}
}

.mainQuick {display:block; max-width:39em; margin-bottom:3.5em;}
.mainQuick ul,
.mainQuick li,
.mainQuick a {display:flex;}
.mainQuick ul {justify-content:space-between;}
.mainQuick li {width:calc((100% - 3em) / 3);}
.mainQuick li + li {margin-left:1em;}
.mainQuick a {display:flex; flex-direction:column; flex-grow:1; align-items:center; justify-content:center; padding:1em 1em 1em; border-radius:0 1em 0 1em; background:#fff; color:#33383D; transition:.3s all; -webkit-transition:.3s all;}
.mainQuick a strong {display:block; font-size:.9em; font-weight:600; white-space:nowrap;}
.mainQuick a:hover,
.mainQuick a:focus {background:#539A68; color:#fff;}
.mainQuick a .ico {display:block; width:4.5em; height:5.5em; background:url(../img/main/spr_icon.svg) no-repeat 0 0 / auto 5.5em; margin-bottom:.15em;}
.mainQuick a .ico.ty1 {background-position-x:0;}
.mainQuick a .ico.ty2 {background-position-x:-5.5em;}
.mainQuick a .ico.ty3 {background-position-x:-11em;}
.mainQuick a .ico.ty4 {background-position-x:-16.5em;}

@media all and (max-width:1024px) {
	.mainQuick {max-width:100%;}
}
@media all and (max-width:710px) {
	.mainQuick li {width:calc((100% - 1.5em) / 3);}
	.mainQuick li + li {margin-left:.5em;}
}
@media all and (max-width:640px) {
	.mainQuick ul {font-size:.9em;}
	.mainQuick a strong {font-size:1em;}
}
@media all and (max-width:520px) {
	.mainQuick ul {flex-wrap:wrap;}
	.mainQuick li {width:calc((100% - 2em) / 2); margin:.5em;}
}


.mainContact {display:flex; justify-content:center; align-items:center;}
.mainContact dl {display:flex; position:relative; border-radius:2em; background:#2F7370; color:#fff; padding:.65em 2em .65em 4em; justify-content:center; align-items:center;}
.mainContact dl:before {content:""; display:block; position:absolute; top:-1.3em; left:-1.1em; width:4.5em; height:5.5em; background:url(../img/main/ico_tel.png) no-repeat 50% 50% / contain;}
.mainContact dt,
.mainContact dd {font-size:1.1em; line-height:1.4;}
.mainContact dt {font-weight:800; flex-shrink:0;}
.mainContact dt:after {content:" : "; margin-right:.5em;}
.mainContact dd {opacity:.8; display:flex; align-items:center; flex-wrap:wrap;}
.mainContact dd span {margin:.2em;}
.mainContact dd span.line {opacity:.4; margin:.2em 1em;}

@media all and (max-width:1024px) {
	.mainContact dl {flex-wrap:wrap; padding:1em; padding-left:3em;}
	.mainContact dl:before {font-size:.8em;}
	.mainContact dl dt,
	.mainContact dl dd {font-size:1em;}
	.mainContact dt {width:100%; margin-bottom:.1em;}
	.mainContact dt:after {display:none;}
	.mainContact dd {flex-grow:1;}
	.mainContact dd span {margin:.1em;}
}


/*********************************
	Info
**********************************/

.mainInfoWrap {padding-top:3.7em; padding-bottom:5em; background:#2F734E}
.mainInfoWrap:before {content:""; display:block; position:absolute; top:0; right:0; width:50em; height:12.5em; background:url(../img/main/spr_main.png) no-repeat 0 -57.5em / 50em auto; z-index:-1;}
.mainInfoWrap .inner {display:flex; flex-direction:column; justify-content:center; align-items:center;}

.mainInfoWrap h3,
.mainInfoWrap h3 strong,
.mainInfoWrap h3 + p {color:#fff;}
.mainInfoWrap h3 {line-height:3.5em; margin-bottom:0;}
.mainInfoWrap h3 strong {font-size:2.3em;}
.mainInfoWrap h3 + p {opacity:.8; text-align:center; word-break:keep-all;}

.mainStep {display:flex; justify-content:center; margin-top:3em;}
.mainStep li {display:flex; position:relative; padding:0 1.85em;}
.mainStep .box {display:flex; position:relative; width:10.3em; flex-direction:column; align-items:center; background:#fff; padding:1.5em 0; z-index:0;}
.mainStep .box:before,
.mainStep .box:after {content:""; display:block; position:absolute; top:0; bottom:0; width:1.85em; background:no-repeat 50% 50% / 100% 100%; z-index:-1;}
.mainStep .box:before {left:-1.85em; background-image:url(../img/main/img_arrow_left.png);}
.mainStep .box:after {right:-1.85em; background-image:url(../img/main/img_arrow_right.png);}
.mainStep .ico {display:block; width:4.5em; height:5.5em; margin:0 auto .65em; background:url(../img/main/spr_icon.png) no-repeat 0 0 / auto 5.5em;}
.mainStep .ico.ty1 {background-position-x:-22em;}
.mainStep .ico.ty2 {background-position-x:-5.5em;}
.mainStep .ico.ty3 {background-position-x:-27.5em;}
.mainStep .ico.ty4 {background-position-x:-33em;}
.mainStep strong {font-family:'TTWanjudaedunsancheB'; font-size:1.2em; color:#296B3C;}
.mainStep span {display:block; font-size:.9em; color:#33383D; font-weight:600; word-break:keep-all;}
.mainStep .tip {position:absolute; white-space:nowrap; left:50%; font-size:.889em; width:11.875em; color:#fff; height:calc((35 / 16) * 1em); line-height:calc((35 / 16) * 1em); background:#1C3F3D; border-radius:calc((7 / 16) * 1em); padding:0 calc((18 / 16) * 1em) 0 calc((41 / 16) * 1em); top:100%; margin-top:-.5em; margin-left:-5.9375em; font-weight:400; z-index:2;}
.mainStep .tip:before {content:""; display:block; position:absolute; width:calc((18 / 16) * 1em); height:calc((18 / 16) * 1em); background:url(../img/main/ico_tip.svg) no-repeat 50% 50% / contain; left:.99em; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.mainStep .tip:after {content:""; display:block; position:absolute; width:1em; height:.75em; left:50%; margin-left:-.375em; bottom:100%; margin-bottom:-1px; background:url(../img/main/ico_tip_arrow.svg) no-repeat 50% 100% / contain;}

@media all and (min-width:1025px) {
	.mainStep li + li {margin-left:1.5em;}	
}
@media all and (max-width:1024px) {
	.mainStep {flex-wrap:wrap; margin-top:2.5em;}
	.mainStep li {width:calc(50% - .4em); margin:.5em .2em; padding:0 1.3em;}
	.mainStep .box {padding-left:5em; flex-grow:1;}
	.mainStep .ico {position:absolute; left:1em; top:50%; margin:-2.75em 0 0; font-size:.8em;}
}
@media all and (max-width:630px) {
	.mainStep {margin-top:2em;}
	.mainStep li {width:100%; margin:.5em 0; padding:0 1.85em;}
	.mainStep .box {text-align:right; align-items:end; padding-right:2em;}
}
@media all and (max-width:370px) {
	.mainStep .box {padding-right:1em;}
}


/*********************************
	Board
**********************************/

.mainBoardWrap {padding-top:5.75em; padding-bottom:5.75em;}
.mainBoardWrap .inner {display:flex; justify-content:space-between;}
.mainBoardWrap .inner > * + * {margin-left:1.5em;}

@media all and (max-width:1024px) {
	.mainBoardWrap .inner {flex-wrap:wrap;}	
}

.mainBoard {display:block; position:relative; flex-grow:1;}
.mainBoard .more {display:flex; align-items:center; position:absolute; top:.5em; right:0;}
.mainBoard .more:after {content:""; display:block; width:1.5em; height:1.5em; background:url(../img/main/spr_main.png) no-repeat -11.85em -46.5em / 50em auto; margin-left:.5em;}
.mainBoard .more span {display:block; font-size:.8em; color:#33383D;}
.mainBoard ul {display:block; position:relative;}
.mainBoard ul > li + li {margin-top:.5em;}
.mainBoard ul a {display:flex; align-items:center; padding:0 1.5em 0 2em; background:#F7F8F9; border-radius:1em; height:3.75em;}
.mainBoard ul a strong {display:block; font-size:.9em; color:#33383D; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:calc(100% - 7.5em);}
.mainBoard ul a .new {display:block; position:relative; width:1.5em; flex-shrink:0; height:1.5em; text-indent:-999px; overflow:hidden; margin-left:.75em; background:url(../img/main/spr_main.png) no-repeat -9.5em -46.5em / 50em auto;} 
.mainBoard ul a span {display:block; font-size:.8em; color:#808386; margin-left:auto;}

@media all and (max-width:1024px) {
	.mainBoard {width:100%; margin-bottom:2em;}	
}
@media all and (max-width:470px) {
	.mainBoard ul a strong {max-width:calc(100% - 2em);}
	.mainBoard ul a span {display:none;}
}
@media all and (max-width:380px) {
	.mainBoard ul a {padding:0 1em 0 1.5em;}
}


.mainGuide {flex-shrink:0; width:23.28%; background:#2F7370; border-radius:1em; padding:2em 1.75em 1.65em;}
.mainGuide ul li {display:flex; align-items:center; flex-wrap:wrap; padding:.75em 0 .5em;}
.mainGuide ul li + li {border-top:1px dashed rgba(255,255,255,.4);}
.mainGuide ul li em {display:block; position:relative; margin-right:.71428em; font-size:.7em; text-align:center; color:#2F7370; font-weight:600; width:calc((18 / 14) * 1em); height:calc((18 / 14) * 1em); line-height:calc((18 / 14) * 1em); border-radius:100%; background:#fff;}
.mainGuide ul li strong {display:block; font-size:.9em; color:#fff; font-weight:800;}
.mainGuide ul li p {display:block; width:100%; font-size:.8em; color:rgba(255,255,255,.8); margin-top:.4375em;}

@media all and (max-width:1024px) {
	.mainGuide {margin-left:0 !important; flex-grow:1; flex-shrink:1;}	
}

.mainBanner {display:flex; flex-shrink:0; width:23.28%;}
.mainBanner a {display:flex; position:relative; flex-grow:1; background:#2F5573; border-radius:1em; padding:2em 2.25em; z-index:0;}
.mainBanner a:after {content:""; display:block; position:absolute; width:7.9em; height:8.5em; background:url(../img/main/spr_main.png) no-repeat 0 -46em / 50em auto; bottom:1em; right:1.3em; z-index:-1;}
.mainBanner strong {display:block; color:#fff; font-family:'TTWanjudaedunsancheB'; font-size:1.6em;}
.mainBanner .arrow {display:block; position:absolute; left:2.25em; bottom:2.25em; width:2em; height:2em; background:url(../img/main/spr_main.png) no-repeat -14em -46.5em / 50em auto; transition:.3s all; -webkit-transition:.3s all;}
.mainBanner a:focus .arrow,
.mainBanner a:hover .arrow {bottom:3em;}

@media all and (max-width:1024px) {
	.mainBanner {flex-grow:1; flex-shrink:1;}	
}
@media all and (max-width:610px) {
	.mainBanner {width:100%; margin-left:0 !important; margin-top:1em;}
	.mainBanner a {overflow:hidden;}
	.mainBanner a:after {font-size:.8em; right:1em; bottom:.4em;}
	.mainBanner a .arrow {left:auto; right:1.5em; bottom:1.5em; z-index:1;}	
}
@media all and (max-width:390px) {
	.mainBanner a {font-size:.8em;}
}