.sub {}
.sub #main {padding:9rem 0 20rem;}
.sub #main .section {padding-top:0; padding-bottom:20rem;}


.sub .about {background:url('../images/sub_bg.png') no-repeat fixed right -20rem top 37rem;}

.sub #benefit {background:transparent;}
.sub #benefit .mtit {color:#2b2b2b;}
.sub #benefit .list {color:#2b2b2b;}
.sub #benefit .list li::before {background-image:url('../images/icon_benefit_sub.png');}



.sub .clients {background:url('../images/sub_bg_clients.png') no-repeat right 2rem bottom -7rem;}
.sub #clients {background:none;}

.sub #contact {}


.board-list {width:100%; border-top:0.3rem solid #f7f7f7; border-bottom:0.3rem solid #f7f7f7; table-layout:fixed; color:#2b2b2b;}
.board-list th,
.board-list td {padding:0 4rem;}
.board-list th {height:7rem; border-bottom:0.3rem solid #f7f7f7; font-size:2.7rem; font-weight:800; text-align:left;}
.board-list td {height:6rem; border-bottom:0.1rem solid #f7f7f7; text-align:left; font-size:2.1rem; font-weight:600;}
.board-list td a {display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.board-list .td_date {width:25%; box-sizing:border-box;}




.paginate {margin-top:5.5rem; text-align:center; font-size:0;}
.paginate a {display:inline-block; vertical-align:top; width:3rem; height:3rem; margin:0 1.4rem; border-radius:0.5rem; line-height:3rem; text-align:center; font-size:2.5rem; color:#2b2b2b; font-weight:700;}
.paginate a.cur {color:#fff; background:#75c8d1;}
.paginate .page {background:no-repeat center/contain;}
.paginate .page.prev,
.paginate .page.next {margin:0 3rem; background-image:url('../images/icon_page_arr.png');}
.paginate .page.next {transform:rotate(180deg);}

.board-view {border-top:0.3rem solid #f7f7f7; color:#2b2b2b;}
.board-view .top {display:flex; justify-content:space-between; padding:2.5rem 0; border-bottom:0.1rem solid #f7f7f7;}
.board-view .top h3 {flex:1; min-width:0; padding-right:5rem; font-size:3.2rem; font-weight:800;}
.board-view .top > span {font-size:2.7rem; font-weight:600;}
.board-view .board-contents {padding:7.5rem 0; font-size:2.3rem; color:#616060; font-weight:400; line-height:1.52;}
.board-view .board-contents img {max-width:90%;}
.post-navi {border-top:0.3rem solid #f7f7f7;}
.post-navi dl {display:flex; align-items:center; min-height:6.2rem; border-bottom:0.3rem solid #f7f7f7; font-size:2.1rem; font-weight:600;}
.post-navi dt {position:relative; width:35rem; padding-left:6rem;}
.post-navi dt::before {position:absolute; top:0; bottom:0; left:3rem; width:1.1rem; background:url('../images/icon_post_navi_arr.png') no-repeat center/contain; content:'';}
.post-navi dt.prev::before {transform:rotate(180deg);}
.post-navi dd {overflow:hidden; flex:1; min-width:0; white-space:nowrap; text-overflow:ellipsis;}



.tab-wrap > button {display:none;}
.tab-wrap .tab-list {display:flex; text-align:center;}
.tab-wrap .tab-list li {margin-right:3rem;}
.tab-wrap .tab-list a {display:block; padding:0 0.7rem; border-radius:1rem; font-size:2rem; color:#2a2a2a; font-weight:600; line-height:3.5rem; background:#;}
.tab-wrap .tab-list .on a {color:#fff; background:#75c8d2;}
.works-list {display:flex; flex-wrap:wrap; margin-top:6rem;}
.works-list li {width:50%;} 
.works-list .inbox {overflow:hidden; position:relative;}
.works-list .inbox::before {position:absolute; top:0; left:0; right:0; bottom:0; z-index:3; background:rgba(0,0,0,0.7); content:''; opacity:0; transition:opacity 0.4s;}
.works-list .img {position:relative; padding-bottom:56.16%; transition:transform 0.4s;}
.works-list .img img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit: cover;}
.works-list .tbox {opacity:0; position:absolute; top:50%; left:5%; right:5%; z-index:5; transform:translateY(-50%); text-align:center; color:#fff; transition:opacity 0.4s;}
.works-list .tbox strong {font-size:3.3rem; font-weight:800;}
.works-list .tbox p {font-size:3rem;}
.works-list a:hover .img {transform:scale(1.1);}
.works-list a:hover .inbox::before, 
.works-list a:hover .tbox {opacity:1;}


.works-top {display:flex; align-items:center; margin-bottom:7rem; color:#2b2b2b;}
.works-top h3 {font-size:5rem; margin-right:3rem; font-weight:800;}
.works-top strong {border-bottom:0.3rem solid #2b2b2b; padding-bottom:0.3rem; font-size:3.5rem; font-weight:500;}
.works-contents {font-size:3.5rem; font-weight:500; color:#656565;}
.works-contents img {max-width:100%;}
.work-dl {display:flex; flex-wrap:wrap; margin-top:7rem;}
.work-dl dt,
.work-dl dd {padding:1rem 0;}
.work-dl dt {padding-right:3.5rem; font-weight:800; color:#75c8d2}
.work-dl dd {flex:1; min-width:0;}
.work-dl dd.full {flex:auto;}

.works-contents .img-wrap {display:flex; align-items:center; gap:3.2rem;}
.works-contents .img-wrap div {width:40%;}
.works-contents .img-wrap div:first-child {width:57.333%;}
.works-contents .img-wrap div img+img {margin-top:3.2rem;}



.pc-none {display:none;}

.btn-list-more {display:block; width:40rem; margin:7rem auto 0; border-radius:4.5rem; border:0.3rem solid #222222; font-size:3.2rem; color:#222222; font-weight:700; text-align:center; line-height:8.4rem; transition:all 0.4s;}
.btn-list-more.mint {border-color:#25c9d4; color:#25c9d4;}

.btn-area {margin-top:5rem; display:flex;}
.btn-area .right {margin-left:auto;}
.btn-area .ubtn {display:inline-block; min-width:8rem; height:6rem; padding:0 2rem; border-radius:1rem; line-height:6rem; font-size:2.5rem; color:#fff; font-weight:600; text-align:center; background:#92c7d0;}

@media (max-width: 1500px) {
	.sub {}
}
@media (max-width: 800px) {
	.sub .about {background-size:85rem auto; background-position:-1rem 28rem}

	.board-list {border-color:#222222;}
	.board-list th,
	.board-list td {padding:0 3rem;}
	.board-list th {border-color:#222222;}
	.board-list td {border-color:#222222;}
	.board-list .td_date {width:18rem;}

	.m-none {display:none;}
	.pc-none {display:block;}

	.board-view {border-color:#222222;}
	.board-view .top {padding:2rem 3rem; border-color:#222222;}
	.board-view .top h3 {font-size:2.5rem;}
	.board-view .top > span {font-size:2.1rem;}
	.post-navi {border-color:#222222;}
	.post-navi dl {border-color:#222222; border-width:0.2rem}
	.post-navi dt {width:25rem;}
	.btn-area .ubtn {background:#272727}


	.tab-wrap {position:relative; z-index:100;}
	.tab-wrap > button {display:block; width:100%; height:6rem; border-radius:1.5rem; font-size:3rem; font-weight:500; text-align:center; color:#fff; line-height:6rem; background:url('../images/icon_btn_arr.png') #25c9d4 no-repeat right 2.5rem center; background-size:3.3rem auto;}
	.tab-wrap .tab-list {display:none; position:absolute; top:6rem; left:0; right:0; background:#f1f1f1; border-radius:1.5rem;}
	.tab-wrap .tab-list li {margin:0;}
	.tab-wrap .tab-list li+li {border-top:0.1rem solid #dfdfdf}
	.tab-wrap .tab-list a {display:block; line-height:8rem; font-size:3rem; font-weight:700; color:#252525 !important; background:none !important;}
	.tab-wrap.open .tab-list {display:block;}
	.works-list li {width:100%;} 
	.works-list li+li {margin-top:5rem;}
	.works-list a:hover .img {transform:scale(1);}
	.works-list a:hover .inbox::before, 
	.works-list a:hover .tbox {display:none;}

	
	.works-top h3 {font-size:4.5rem;}
	.works-top strong {font-size:3.2rem;}


	.works-contents .img-wrap {flex-wrap:wrap;}
	.works-contents .img-wrap > div {width:100% !important;}
	.works-contents .img-wrap div img+img {display:none;}
	.works-contents .img-wrap div img {width:100%;}
}