@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

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

.visualWrap {position:relative;}
.visualWrap:after {content:""; display:block; clear:both;}

.mainIntro {display:block; position:relative; border-radius:1rem; width:67rem; height:45.9rem; float:left; overflow:hidden; background:url('../img/main/bak_intro.png') no-repeat 0 0; background-size:100% 100%;}
.mainIntro:before {content:""; display:block; position:absolute; left:0; bottom:0; width:35.4rem; height:42.8rem; background:url('../img/main/bak_intro_obj.png') no-repeat 0 100%; background-size:contain; z-index:0; opacity:0; transform:translateY(10%); -webkit-transform:translateY(10%); transition:.3s all; -webkit-transition:.3s all;}
.mainIntro .txt {display:block; position:absolute; top:9rem; right:5rem; width:27.6rem; height:36.5rem;}
.mainIntro .txt span {display:block; position:relative; padding:2.5rem 0 0 1.4rem; word-break:keep-all; font-size:1.5rem; line-height:1.4; color:#3b646e;}
.active .mainIntro:before {opacity:1; transform:translateY(0); -webkit-transform:translateY(0);}

.mainLink {position:relative; width:37rem; height:45rem; float:right;}
.mainLink li + li {margin-top:2rem;}
.mainLink a {display:block; position:relative; border-radius:1rem; height:14rem; padding:3.7rem 0 0 4.2rem; font-size:2rem; font-weight:800; color:#fff; background:#333; overflow:hidden;}
.mainLink a:after {content:""; display:block; position:relative; width:3.5rem; height:1.2rem; background:url('../img/main/ico_link.png') no-repeat 50% 50%; background-size:contain; margin-top:3rem; opacity:.3;}
.mainLink a:before {content:""; display:block; position:absolute; width:15.6rem; height:12.2rem; background:no-repeat 100% 100%; background-size:contain; right:2.5rem; bottom:0; transition:.3s all; -webkit-transition:.3s all;}
.mainLink a:hover:after {opacity:1;}
.mainLink a:hover:before {transform:translateY(10%); -webkit-transform:translateY(10%);} 
.mainLink a.ty1 {background:#26729d;}
.mainLink a.ty1:before {background-image:url(../img/main/bak_link_01.png);}
.mainLink a.ty2 {background:#1d9b9e;}
.mainLink a.ty2:before {background-image:url(../img/main/bak_link_02.png);}
.mainLink a.ty3 {background:#129a7c;}
.mainLink a.ty3:before {background-image:url(../img/main/bak_link_03.png);}

@media all and (max-width:1024px) {
	.mainIntro {width:auto; float:none; clear:both; margin-bottom:2rem;}
	.mainIntro:before {}
	.mainIntro .txt {width:auto; left:34rem;}
	
	.mainLink {width:auto; float:none; overflow:hidden; height:auto;}
	.mainLink ul {margin:0 -.5rem;}
	.mainLink li {padding:.5rem; float:left; width:33.33%; box-sizing:border-box;}
	.mainLink li + li {margin-top:0;}
	.mainLink a {padding:3rem 0 0 2rem; height:10rem; z-index:0;}
	.mainLink a:before {right:0rem; width:10rem; z-index:-1; }
	.mainLink a:after {margin-top:1rem;}
}
@media all and (max-width:640px) {
	.mainIntro {overflow:hidden; height:auto;}
	.mainIntro:before {max-width:40%; max-height:100%;}
	.mainIntro .txt {position:relative; top:auto; left:auto; right:auto; height:auto; margin:5rem 1rem 7rem 40%;}
	
	.mainLink li a {font-size:1.7rem; padding:2rem; line-height:1.5; height:12rem;}
	.mainLink a:before {width:7rem;}
	.mainLink a:after {position:absolute; left:2rem; bottom:2rem; margin:0;}
}
@media all and (max-width:540px) {
	.mainIntro:before {display:none;}
	.mainIntro .txt {text-align:left; margin:0; padding:4rem 2rem;}
}
@media all and (max-width:420px) {
	.mainLink li {width:auto; float:none;}
	.mainLink li a {height:9rem;}
}


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

.boardWrap {padding-top:4rem;}
.boardWrap:after {content:""; display:block; clear:both;}

.mainBoard {position:relative; width:63rem; float:left;}
.mainBoard .tit {font-size:2rem; color:#333; font-weight:800; padding-bottom:.5rem;}
.mainBoard li {display:block; position:relative; padding-left:1rem; line-height:1.2; overflow:hidden; margin-bottom:1rem;}
.mainBoard li:before {content:""; display:block; position:absolute; width:.3rem; height:.3rem; background:#555; left:0; top:.6em; margin-top:-.15rem;}
.mainBoard li a {display:block; position:relative; font-size:1.5rem; color:#555;}
.mainBoard li a .subj {display:inline-block; position:relative; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400 !important; line-height:1.3125; color:#666666; font-size:1.7rem;}
.mainBoard li a.new .subj {padding-right:2.5rem !important;}
.mainBoard li a .subj .new {display:block; position:absolute; top:50%; margin-top:-1.05rem; right:0; width:2.1rem; height:2.1rem; background:url('../img/main/spr_main.png') no-repeat -4.7rem -6.1rem; background-size:32rem auto; overflow:hidden; text-indent:-999px;}
.mainBoard li a .con {display:none;}
.mainBoard li a .name {display:block; position:absolute; top:0; bottom:0; right:9.6rem; letter-spacing:-0.03em;}
.mainBoard li a .name:before {content:"["; margin-right:-.3rem;}
.mainBoard li a .name:after {content:"]"; margin-left:-.3rem;}
.mainBoard li a .name.ty1 {color:#355fe1;}
.mainBoard li a .name.ty2 {color:#f65237;}
.mainBoard li a .name.ty3 {color:#00cec6;}
.mainBoard li a .name.ty4 {color:#e4007f;}
.mainBoard li a .name.ty5 {color:#f39800;}
.mainBoard li a .date {display:block; position:absolute; top:0; bottom:0; right:0; font-size:1.5rem;}
.mainBoard li a .date > * {display:inline-block; vertical-align:middle; position:relative; color:#aaaaaa;}
.mainBoard li a .date i {width:.3em; height:1.2em; overflow:hidden; text-indent:-999px;}
.mainBoard li a .date i:before {content:"."; display:block; position:absolute; top:0; left:0; width:100%; bottom:0; text-indent:0; text-align:center; font-weight:800;}
.mainBoard li a .date strong {font-weight:400 !important;}
.mainBoard li a .date strong ~ i {display:none;}
.mainBoard li:first-child {padding:0 0 1rem 0;}
.mainBoard li:first-child:before {display:none;}
.mainBoard li:first-child a {padding:3rem 0 3rem 10rem; border-bottom:1px solid #dddddd;}
.mainBoard li:first-child a .name {display:none;}
.mainBoard li:first-child a .subj {color:#000; font-size:1.8rem; margin:0 0 1rem; padding:0; font-weight:800 !important; max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.mainBoard li:first-child a .con {display:block; position:relative; font-size:1.6rem; color:#888888; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.mainBoard li:first-child a .date {display:block; position:absolute; width:8rem; height:8rem; color:#333333; text-align:center; padding-top:4.2rem; box-sizing:border-box; left:0; top:50%; margin-top:-4rem; border:.4rem solid #f0f0f0; font-size:1.3rem; border-radius:1em;}
.mainBoard li:first-child a .date strong {display:block; position:absolute; top:.7rem; left:0; right:0; font-size:3rem; color:#000000; font-weight:800 !important;}
.mainBoard li:first-child a .date i ~ i {position:absolute; top:0; right:0; z-index:-999; opacity:0;}
.mainBoard .more {display:block; position:absolute; width:4.5rem; height:4.5rem; top:-1rem; right:0; overflow:hidden; text-indent:-999px;}
.mainBoard .more:before {content:""; display:block; position:absolute; width:1.1rem; height:1.1rem; top:50%; left:50%; margin-top:-.55rem; margin-left:-.55rem; background:url('../img/main/spr_main.png') no-repeat -25.2rem 0rem; background-size:32rem auto;}
.mainBoard li.no_data {display:block !important; position:relative !important; margin:0 !important; width:100% !important; text-align:center; padding:7rem 0 6rem;}
.mainBoard li.no_data:before {content:''; display:block; position:relative; margin:0 auto; width:202px; height:154px; background:url('/common/img/board/img_nodata.png') 50% 50% no-repeat; }

.mainQuick {display:block; position:relative; width:37rem; float:right; padding:1rem;}
.mainQuick:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:1rem; background:#edeff4;}
.mainQuick ul {display:block; position:relative; background:#fff; overflow:hidden;}
.mainQuick ul:before,
.mainQuick ul:after {content:""; display:block; position:absolute; background:#edeff4;}
.mainQuick ul:before {top:2rem; bottom:2rem; left:50%; width:1px;}
.mainQuick ul:after {left:2rem; right:2rem; top:50%; height:1px;}
.mainQuick li {display:block; position:relative; width:50%; float:left;}
.mainQuick a {display:block; position:relative; text-align:center; padding:3.3rem 0 1.7rem;}
.mainQuick a img {display:block; margin:0 auto 2rem !important; width:6.5rem;}
.mainQuick a span {display:inline-block; color:#333333; font-size:1.7rem; font-weight:800; line-height:1.6; height:1.6em; box-sizing:border-box;}
.mainQuick a:hover span {border-bottom:1px solid #333;}


@media all and (max-width:1024px) {
	.mainBoard {width:auto; float:none; clear:both; margin-bottom:4rem;}
	.mainQuick {width:auto; float:none; clear:both;}
	.mainQuick ul:before,
	.mainQuick ul:after {display:none;}
	.mainQuick li {width:25%;}
	.mainQuick a img {width:5rem;}
	.mainQuick a span {font-size:1.6rem;}
}
@media all and (max-width:790px) {
	.mainBoard li {margin-bottom:1rem;}
	.mainBoard li a {font-size:1.4rem;}
	.mainBoard li a .subj {font-size:1.5rem;}
	.mainBoard li:first-child a .subj {font-size:1.8rem; margin-bottom:1.3rem;}
	.mainBoard li:first-child a .con {font-size:1.5rem;}
}
@media all and (max-width:480px) {
	.mainQuick ul:before,
	.mainQuick ul:after {display:block;}
	.mainQuick li {width:50%;}
	
}
@media all and (max-width:460px) {
	.mainBoard .more {position:relative; text-indent:0; width:auto; height:auto; text-align:center; font-size:1.4rem; padding:1rem; color:#333; border:1px solid #dadada; border-radius:.8rem; margin-top:3rem;}
	.mainBoard .more:before {display:inline-block; position:relative; vertical-align:middle; top:auto; left:auto; margin:0 1rem 0 0;}
}
@media all and (max-width:390px) {
	.mainBoard li a .subj {font-size:1.4rem;}
	.mainBoard li:first-child a {padding:2rem 0 2rem 10rem;}
	.mainBoard li:first-child a .subj {margin-bottom:1rem;}
	.mainBoard li:first-child a .date {width:8rem; height:7rem; padding-top:3.2rem; margin-top:-3.5rem;}
	.mainBoard li:first-child a .date strong {font-size:2.5rem; top:.5rem;}
}


/********************************************
	Contact
********************************************/

.contactWrap {padding-top:4rem;}

.mainContact {display:table; width:100%; table-layout:fixed; border-radius:1rem; border:1px solid #dbdee6; background:#edeff4;}
.mainContact > * {display:table-cell; position:relative; vertical-align:middle; padding:2.5rem 0; font-size:1.7rem; font-weight:800;}
.mainContact dt {width:23.5rem; text-align:center; color:#333; font-size:2rem; font-weight:800;}
.mainContact img {vertical-align:middle; width:4rem; margin-right:1.4rem !important;}

.mainContact span,
.mainContact strong {display:inline-block; vertical-align:middle;}
.mainContact span {font-family:'Montserrat'; font-size:2.6rem; vertical-align:middle; font-weight:700; color:#363c5a; margin-left:1.7rem; padding-left:1.8rem; background:url('../img/main/line.png') no-repeat 0 50%;}

@media all and (max-width:1024px) {
	.mainContact > * {font-size:1.5rem;}
	.mainContact dt {font-size:1.8rem; width:15rem;}
	.mainContact img {width:3rem; margin-right:1rem !important;}
	.mainContact span {font-size:2rem; margin-left:1rem; padding-left:1.1rem;}	
}
@media all and (max-width:740px) {
	.mainContact dt {width:9rem; padding:2rem 1.5rem; word-break:keep-all; line-height:1.5;}
}
@media all and (max-width:740px) and (min-width:541px) {
	.mainContact strong {display:block; position:relative; padding-left:5rem; padding-bottom:.5rem;}
	.mainContact strong img {display:block; position:absolute; top:0; left:0; width:4rem;}
	.mainContact span {display:block; padding-left:5rem; margin-left:0; background:none;}
}

@media all and (max-width:540px) {
	.mainContact {padding-bottom:2rem;}
	.mainContact,
	.mainContact dt,
	.mainContact dd {display:block; width:auto;}
	.mainContact dd {padding:0 1rem;}
	.mainContact dd + dd {margin-top:1rem;}
	
}