@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');

#m_conts .inner.pos-rel {position:relative;}
#m_conts .inner:after {content:""; display:block; clear:both;}

#m_conts .no_data {display:block !important; position:relative !important; margin:0 !important; width:100% !important; text-align:center; padding:4rem 0; font-weight:400; color:#999; border:none !important;}
#m_conts .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; }

/****************************************************************
	Visual Area
****************************************************************/

.visualWrap {display:block; position:relative; padding:6rem 2rem; background:url('../img/main/bak_visual.jpg') no-repeat 50% 50%; background-size:cover;}
.visualWrap:after {content:""; display:block; clear:both;}

.visualWrap .title {display:block; position:absolute; left:0; right:68rem; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); color:#fff; font-size:1.9rem; word-break:keep-all;}
.visualWrap .title > * {display:block; position:relative; line-height:1.3;}
.visualWrap .title strong {font-size:3.052em; margin-bottom:.2em; font-family:'Godo';}
.visualWrap .title span {opacity:.8; font-weight:300;}

.mainPopup {display:block; position:relative; width:68rem; float:right;}
.mainPopup .control {display:block; position:absolute; right:4rem; bottom:2rem; z-index:99; height:4rem; background:#fff; border-radius:9em 0 0 9em; padding:.2rem 2.5rem .4rem .5rem; box-sizing:border-box; white-space:nowrap;}
.mainPopup .control .pager {display:inline-block; vertical-align:middle; position:relative; margin:0 0 0 4rem; line-height:3rem; bottom:auto; width:auto; font-family:'Raleway'; color:#454545; font-size:1.8rem; font-weight:400; letter-spacing:.1em;}
.mainPopup .control .pager em {font-size:1.3em; color:#00a2a4; font-weight:700;}
.mainPopup .control button,
.mainPopup .control a {display:inline-block; vertical-align:middle; width:3rem; height:3rem; overflow:hidden; text-indent:-999px; background:url('../img/main/spr_main.png') no-repeat -18rem 1rem; background-size:32rem auto;}
.mainPopup .control button {opacity:.3;}
.mainPopup .control button:hover {opacity:1;}
.mainPopup .control button.prev {position:absolute; top:.4rem; left:.5rem;}
.mainPopup .control button.next {margin-top:.2rem; background-position:-21.3rem 1rem;}
.mainPopup .control button.stop,
.mainPopup .control button.play {display:block; position:absolute; top:-.1rem; right:-2rem; width:4.2rem; height:4.2rem; border-radius:9em; background-position:0rem 1rem; background-color:#00a2a4; opacity:1;}
.mainPopup .control button.stop {background-position:1.7rem 1.4rem;}
.mainPopup .control button.play {display:none; background-position:-1.9rem 1.4rem;}
.mainPopup .slider {position:relative; height:36rem; clear:both;}
.mainPopup .slider .swiper-container {height:100%; border-radius:.8rem; overflow:hidden;}
.mainPopup .slider .swiper-slide {background:url(/common/img/board/sample_noimage.jpg) no-repeat 50% 50% #edf1fa;}
.mainPopup .slider .swiper-slide img[src*="noimage"] {opacity:0;}

@media all and (max-width:1024px) {
	.visualWrap {padding:5rem 2rem 4rem;}
	.visualWrap .title {position:relative; right:auto; top:auto; transform:translateY(0); -webkit-transform:translateY(0); text-align:center; padding-bottom:4rem; font-size:1.8rem;}
	
	.mainPopup {position:relative; top:auto; right:auto; margin:0 auto 8rem; float:none; max-width:100%; height:auto;}
	.mainPopup .slider {height:auto;}
	.mainPopup .control {bottom:-2rem; left:50%; right:auto; transform:translate(-50%, 100%); -webkit-transform:translate(-50%, 100%);}
	.mainPopup .control .pager {font-size:1.6rem;}	
}
@media all and (max-width:640px) {
	.visualWrap {padding:4rem 1rem;}
	.visualWrap .title {font-size:1.6rem;}
	
	.mainPopup {max-width:100%;}
	.mainPopup .slider {height:auto;}
	.mainPopup .control .pager {font-size:1.4rem;}
}
@media all and (max-width:480px) {
	.visualWrap .title {font-size:1.5rem;}
}



/****************************************************************
	Work Area
****************************************************************/

.workWrap {display:block; position:relative; padding:8.3rem 2rem 4rem; z-index:0; overflow:hidden;}
.workWrap:before {content:""; display:block; position:absolute; top:0; bottom:0; left:50%; margin-left:-86rem; right:0; border-radius:0 0 0 2rem; background:#f4f4f4; z-index:-2;}
.workWrap:after {content:""; display:block; position:absolute; top:0; bottom:45%; right:50%; margin-right:-86rem; left:0; border-radius:0 0 2rem 0; background:url('../img/main/bak_work01.png') no-repeat 100% 0 #14b9bb; background-size:auto 100%; z-index:-2;}
.workWrap .inner {position:relative; z-index:0;}

.mainWork .tit {display:block; position:relative; vertical-align:middle; height:6rem; line-height:6rem; padding-left:7rem; font-size:3.6rem; color:#fff; font-family:'Godo'; letter-spacing:-0.05em;}
.mainWork .tit:before {content:""; display:block; position:absolute; width:25.5rem; height:100%; left:2rem; top:-40%; background:url('../img/main/acc_title.png') no-repeat 0 0; background-size:contain;}
.mainWork .tit em {color:#fffaa7;}

.mainWork .control {display:block; position:absolute; top:0; left:59.5rem;}
.mainWork .control > * {display:inline-block; position:relative; vertical-align:middle; width:3.5rem; height:6rem; overflow:hidden; text-indent:-999px; opacity:.3;}
.mainWork .control > *:before {content:""; display:block; position:absolute; top:50%; left:50%; margin-top:-.85rem; margin-left:-.5rem; width:1rem; height:1.7rem; background:url('../img/main/spr_main.png') no-repeat -27.3rem -3.3rem; background-size:32rem auto;}
.mainWork .control > *.next:before {background-position:-31rem -3.3rem;}
.mainWork .control > *:hover {opacity:1;} 

.work-list {min-height:37.3rem;}
.work-item {display:block; position:relative; height:37.3rem; background:#fff; border-radius:1rem; padding:4rem; box-sizing:border-box; margin:3.5rem 0; transition:.3s all; -webkit-transition:.3s all;}
.work-item:hover {
	-webkit-box-shadow: 2rem 2rem 3.5rem 0px rgba(60,60,60,0.1);
	-moz-box-shadow: 2rem 2rem 3.5rem 0px rgba(60,60,60,0.1);
	box-shadow: 2rem 2rem 3.5rem 0px rgba(60,60,60,0.1);
}
.work-item .cate {display:inline-block; position:relative; padding:.7rem 1.5rem; border-radius:.5rem; background:#f0f0f0; font-size:1.4rem; color:#333333;}
.work-item .subj {display:block; position:relative; margin-top:2.4rem; font-size:2.2rem; color:#333333; line-height:1.4; height:2.8em; overflow:hidden; font-weight:600;}
.work-item .subj .new {display:inline-block; vertical-align:middle; margin-top:-.2em; 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;}
.work-item .txt {display:block; position:relative; margin:1.9rem 0 2.5rem; font-size:1.6rem; color:#888888; line-height:1.4; height:4.2em; overflow:hidden;}
.work-item .money {display:block; position:relative; padding-top:3.5rem; text-align:right; border-top:1px solid #e1e1e1; color:#515151; font-size:1.6rem;}
.work-item .money em {font-size:1.5em; color:#0a9799; font-family:'Montserrat'; font-weight:700;}

.mainLink {display:block; position:absolute; top:0; right:0; padding:1rem 0;}
.mainLink > * {display:inline-block; position:relative; font-size:1.8rem; padding:1.3rem 3.5rem; z-index:0; color:#ffffff !important;}
.mainLink > * + * {margin-left:.3rem;}
.mainLink > *:after {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:.5rem; background:#0a9799; z-index:-1;
	-moz-transform: skew(-13deg, 0deg);
	-webkit-transform: skew(-13deg, 0deg);
	-o-transform: skew(-13deg, 0deg);
	-ms-transform: skew(-13deg, 0deg);
	transform: skew(-13deg, 0deg);
}
.mainLink > a {padding-left:3rem;}
.mainLink > a:before {content:""; display:inline-block; position:relative; margin-top:-.2em; margin-right:1rem; width:2.1rem; height:2.1rem; vertical-align:middle; background:url('../img/main/spr_main.png') no-repeat 0rem -6.1rem; background-size:32rem auto;}
.mainLink > a:hover:after {background:#08787a;}
.mainLink > span:after {background:#4c4c4c;}
.mainLink > span em {color:#fffaa7;}


@media all and (max-width:1024px) {
	.mainLink {position:relative; right:auto; top:auto; text-align:center;}
	
}
@media all and (max-width:790px) {
	.mainWork .tit {padding-left:3rem; font-size:3.2rem;}
	.mainWork .tit:before {left:0; width:22rem; top:-26%;}
	.mainWork .control {right:0; left:auto;}
	
	.work-list {min-height:33rem;}
	.work-item {margin:2rem 0; padding:3rem; height:33rem;}
	.work-item:hover {
		-webkit-box-shadow: 1rem 1rem 2rem 0px rgba(60,60,60,0.1);
		-moz-box-shadow: 1rem 1rem 2rem 0px rgba(60,60,60,0.1);
		box-shadow: 1rem 1rem 2rem 0px rgba(60,60,60,0.1);
	}
	.work-item .cate {font-size:1.2rem;}
	.work-item .subj {font-size:2rem;}
	.work-item .txt {margin:1.5rem 0 2rem; font-size:1.5rem;}
	.work-item .money {font-size:1.5rem;}
	
	.mainLink > * {font-size:1.6rem; padding:0 2.5rem; line-height:4.2rem;}
	.mainLink > a {padding-left:2rem;}
}
@media all and (max-width:640px) {
	.workWrap {padding:6rem 1rem 3rem;}
	.mainWork .tit {line-height:1.4; height:auto; margin-bottom:1rem;}
	.mainWork .tit em {display:block;}
	.mainWork .tit:before {top:-20%; width:18rem;}
	.mainWork .control {top:3rem;}
}
@media all and (max-width:560px) {
	.workWrap {padding:5rem 1rem 3rem;}
	.mainWork .tit {font-size:2.8rem; padding-left:2rem;}
	.mainWork .tit:before {left:0; width:14rem;}
	.mainWork .control {top:2.5rem;}
	
	.work-list {min-height:30rem;}
	.work-item {margin:1rem 0 2rem 0; height:30rem;}
	.work-item .subj {margin-top:2rem; font-size:1.8rem;}
	.work-item .txt {font-size:1.4rem;}
	.work-item .money {padding-top:2.5rem;}
	
	.mainLink > a {width:49%; float:left; margin:0; margin-bottom:1rem;}
	.mainLink > a ~ a {float:right;}
	.mainLink > span {display:block; margin-top:1rem; clear:both;}
}



/****************************************************************
	Work Area
****************************************************************/

.boardWrap {padding:6rem 2rem 4rem;}
.mainBoard,
.mainSurvey {display:block; position:relative; width:68rem; float:left; max-width:49%;}
.mainSurvey {float:right;}
 
 
 /* Board */
 
.mainBoard .tabs {padding-right:5rem; margin-bottom:1.8rem;}
.mainBoard .tabs ul:after {content:""; display:block; clear:both;}
.mainBoard .tabs li {position:relative; width:auto; float:left; z-index:0;}
.mainBoard .tabs li:before {content:""; display:block; position:absolute; top:0; bottom:0; left:.5rem; right:.5rem; border-radius:.5rem; background:#0a9799; z-index:-1; opacity:0;
	-moz-transition:.3s -moz-transform; -webkit-transition:.3s -webkit-transform; -o-transition:.3s -o-transform; -ms-transition:.3s -ms-transform; transition:.3s transform;
	-moz-transform: skew(0deg, 0deg); -webkit-transform: skew(0deg, 0deg); -o-transform: skew(0deg, 0deg); -ms-transform: skew(0deg, 0deg); transform: skew(0deg, 0deg);
}
.mainBoard .tabs li.tab-active:before {opacity:1; -moz-transform: skew(-15deg, 0deg); -webkit-transform: skew(-15deg, 0deg); -o-transform: skew(-15deg, 0deg); -ms-transform: skew(-15deg, 0deg); transform: skew(-15deg, 0deg);}
.mainBoard .tabs li button {display:block; padding:0 2.8rem; height:4.5rem; text-align:center; color:#707070; font-size:1.8rem;}
.mainBoard .tabs li button.on {color:#fff; padding:0 7.5rem 0 3.4rem;}
.mainBoard .tabs li button.on:after {content:""; display:block; position:absolute; width:2.2rem; height:2.2rem; top:50%; right:3rem; margin-top:-1.1rem; background:url('../img/main/spr_main.png') no-repeat 0rem -9.9rem; background-size:32rem auto;}
.mainBoard .tabs li + li:after {content:""; display:block; position:absolute; top:50%; left:0%; margin-top:-.4rem; margin-left:-.3rem; width:.6rem; height:.8rem; background:url('../img/main/spr_main.png') no-repeat -3.8rem -3.4rem; background-size:32rem auto;}
.mainBoard .tabs li.tab-active:after,
.mainBoard .tabs li.tab-active + li:after {display:none;}

.mainBoard .board-list {min-height:29.2rem;}
.mainBoard .list {display:none;}
.mainBoard .list.on {display:block;}
.mainBoard .list li {display:block; position:relative; padding-left:1rem; line-height:1.2; overflow:hidden; margin-bottom:1.5rem;}
.mainBoard .list li:before {content:""; display:block; position:absolute; width:.3rem; height:.3rem; background:#555; left:0; top:.6em; margin-top:-.15rem;}
.mainBoard .list li a {display:block; position:relative; font-size:1.5rem; color:#555;}
.mainBoard .list li a .subj {display:inline-block; position:relative; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; line-height:1.3125; color:#666666; font-size:1.6rem;}
.mainBoard .list li a.new .subj {padding-right:3rem !important;}
.mainBoard .list 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 .list li a .con {display:none;}
.mainBoard .list li a .name {display:block; position:absolute; top:0; bottom:0; right:9.6rem; letter-spacing:-0.03em;}
.mainBoard .list li a .name:before {content:"["; margin-right:-.3rem;}
.mainBoard .list li a .name:after {content:"]"; margin-left:-.3rem;}
.mainBoard .list li a .name.ty1 {color:#355fe1;}
.mainBoard .list li a .name.ty2 {color:#f65237;}
.mainBoard .list li a .name.ty3 {color:#00cec6;}
.mainBoard .list li a .name.ty4 {color:#e4007f;}
.mainBoard .list li a .name.ty5 {color:#f39800;}
.mainBoard .list li a .date {display:block; position:absolute; top:0; bottom:0; right:0;}
.mainBoard .list li a .date > * {display:inline-block; vertical-align:middle; position:relative; color:#aaaaaa;}
.mainBoard .list li a .date i {width:.3em; height:1.2em; overflow:hidden; text-indent:-999px;}
.mainBoard .list 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 .list li a .date strong {font-weight:400;}
.mainBoard .list li a .date strong ~ i {display:none;}
.mainBoard .list li:first-child {padding:0 0 1rem 0;}
.mainBoard .list li:first-child:before {display:none;}
.mainBoard .list li:first-child a {padding:3rem 0 3rem 11rem; border-bottom:1px solid #dddddd;}
.mainBoard .list li:first-child a .name {display:none;}
.mainBoard .list li:first-child a .subj {color:#000; font-size:2rem; margin:0 0 1.6rem; padding:0; font-weight:800; max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.mainBoard .list li:first-child a .con {display:block; position:relative; font-size:1.6rem; color:#888888; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.mainBoard .list li:first-child a .date {display:block; position:absolute; width:9rem; height:8rem; color:#333333; text-align:center; padding-top:4.2rem; box-sizing:border-box; left:0; top:50%; margin-top:-4rem; border:.7rem solid #f0f0f0; font-size:1.3rem;}
.mainBoard .list li:first-child a .date strong {display:block; position:absolute; top:.7rem; left:0; right:0; font-size:3rem; color:#000000; font-weight:800;}
.mainBoard .list li:first-child a .date i ~ i {position:absolute; top:0; right:0; z-index:-999; opacity:0;}
.mainBoard .list .more {display:block; position:absolute; width:4.5rem; height:4.5rem; top:0rem; right:0; overflow:hidden; text-indent:-999px;}
.mainBoard .list .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;}


/* Survey */

.mainSurvey .tit {display:block; position:relative; color:#1e1e1e; font-size:2.6rem; font-family:'Godo'; font-weight:800; padding:1rem 0; margin-bottom:1.6rem;}
.mainSurvey .tit em {color:#00999b;}
.mainSurvey .control {display:block; position:absolute; top:1rem; right:.3rem; height:3rem;}
.mainSurvey .control .pager {display:inline-block; vertical-align:middle; position:relative; margin:0 0 0 3rem; line-height:3rem; bottom:auto; width:auto; font-family:'Raleway'; color:#454545; font-size:1.8rem; font-weight:400; letter-spacing:.1em; padding:0 1rem;}
.mainSurvey .control .pager em {font-size:2.4rem; color:#2ea988; font-weight:700;}
.mainSurvey .control button,
.mainSurvey .control a {display:inline-block; vertical-align:middle; width:3rem; height:3rem; overflow:hidden; text-indent:-999px; background:url('../img/main/spr_main.png') no-repeat -18rem 1rem; background-size:32rem auto;}
.mainSurvey .control button {opacity:.3;}
.mainSurvey .control button:hover {opacity:1;}
.mainSurvey .control button.prev {position:absolute; top:0; left:0;}
.mainSurvey .control button.next {background-position:-21.3rem 1rem;}
.mainSurvey .control a.more {background-position:-24.3rem 1rem;}

.mainSurvey .thumb {display:block; position:relative; max-width:33.1rem; height:19rem; border-radius:.8rem; overflow:hidden; text-align:center; background:#fafafa; margin-bottom:2.5rem;}
.mainSurvey .thumb img {margin:0 auto; max-height:100%;}
.mainSurvey .thumb em {display:block; position:relative; width:100%; height:100%; background:no-repeat 50% 50%; background-size:cover;}
.mainSurvey .info {display:block; position:relative;}
.mainSurvey .info .subj {display:block; position:relative; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size:2rem; color:#000; font-weight:600; margin-bottom:1.5rem;}
.mainSurvey .info .name,
.mainSurvey .info .date {display:inline-block; position:relative; vertical-align:middle;}
.mainSurvey .info .name {font-size:1.6rem; color:#888;}
.mainSurvey .info .date {font-size:1.5rem; color:#aaaaaa;}
.mainSurvey .info .date:before {content:""; display:block; position:absolute; width:1px; height:1rem; left:0; top:50%; margin-top:-.5rem; background:#e1e1e1;}
.mainSurvey .info .name ~ .date {margin-left:1.6rem; padding-left:1.6rem;}


@media all and (max-width:1024px) {
	.boardWrap {padding:4rem 2rem;}
	.mainBoard,
	.mainSurvey {float:none; width:auto; max-width:100%; margin-bottom:4rem;}
	.mainBoard {margin-bottom:5rem;}
}
@media all and (max-width:790px) {
	.mainBoard .tabs {margin-bottom:1rem;}
	.mainBoard .tabs li button {font-size:1.6rem; padding:0 2.5rem;}
	.mainBoard .tabs li button.on {padding:0 5.5rem 0 2.5rem;}
	.mainBoard .tabs li button.on:after {right:2rem;}
	
	.mainBoard .list li {margin-bottom:1rem;}
	.mainBoard .list li a {font-size:1.4rem;}
	.mainBoard .list li:first-child a .subj {font-size:1.8rem; margin-bottom:1.3rem;}
	.mainBoard .list li:first-child a .con {font-size:1.5rem;}
	
	.mainSurvey .tit {font-size:2.4rem;}
	.mainSurvey .thumb {height:15rem;}
	.mainSurvey .thumb em {}
	.mainSurvey .info .subj {font-size:1.8rem;}
	.mainSurvey .info .name,
	.mainSurvey .info .date {display:block; font-size:1.4rem; line-height:1.3;}
	.mainSurvey .info .name ~ .date {margin-left:0; padding-left:0; margin-top:.5rem;}
	.mainSurvey .info .date:before {display:none;}
}
@media all and (max-width:640px) {
	.boardWrap {padding:4rem 1rem 0;}
	
	.mainSurvey .control .pager {font-size:1.4rem;}
}
@media all and (max-width:460px) {
	.mainBoard .tabs {padding-right:0;}
	.mainBoard .list .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 .list .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 .tabs li {width:33.33%; float:left;}
	.mainBoard .tabs li button {text-align:center; padding:0 !important; width:100%;}
	.mainBoard .tabs li button.on:after {display:none;}
	
	
	.mainBoard .list li a .subj {font-size:1.4rem;}
	.mainBoard .list li:first-child a {padding:2rem 0 2rem 10rem;}
	.mainBoard .list li:first-child a .subj {margin-bottom:1rem;}
	.mainBoard .list li:first-child a .date {width:8rem; height:7rem; padding-top:3.2rem; margin-top:-3.5rem;}
	.mainBoard .list li:first-child a .date strong {font-size:2.5rem; top:.5rem;}
}