@charset "utf-8";


.btn-more { width: 50%; max-width: 230px; margin: 0 auto;}
.btn-more div { position: relative; padding: 10px 0; border: solid 1px #000; color: #333; font-weight: 700; text-align: center; cursor: pointer; transition: 0.2s linear;}
.btn-more div:before,
.btn-more div:after { content: ''; display: block; width: 2px; height: 15px; background: #333; position: absolute; right: 20px; top: 50%;}
.btn-more div:before{ transform: translateY(-50%);}
.btn-more div:after { transform: translateY(-50%) rotate(90deg);}
.btn-more div:hover { background: #333; color: #fff;}
.btn-more div:hover:before,
.btn-more div:hover:after { background: #fff;}
@media (max-width: 641px) {
	.btn-more div { padding: 6px;}
}
@media (max-width: 481px) {
	.btn-more div { font-size: 13px;}
}

@keyframes move-arwL {
 0% { transform: translate(0px,-50%) rotate(45deg);}
 50% { transform: translate(-10px,-50%) rotate(45deg);}
 51% { transform: translate(20px,-50%) rotate(45deg);}
 100% { transform: translate(0px,-50%) rotate(45deg);}
}
@keyframes move-arwR {
 0% { transform: translate(0px,-50%) rotate(45deg);}
 50% { transform: translate(20px,-50%) rotate(45deg);}
 51% { transform: translate(-10px,-50%) rotate(45deg);}
 100% { transform: translate(0px,-50%) rotate(45deg);}
}
.pager { position: relative; width: 98%; margin: 0 auto; padding: 50px 180px;}
.pager .prev,
.pager .next { position: absolute; top: 50%; transform: translateY(-50%);}
.pager .prev { left: 0;}
.pager .next { right: 0;}
.pager .prev a,
.pager .next a { position: relative; display: block; padding: 10px 0; color: #333; font-weight: 700; text-decoration: none;}
.pager .prev a { padding-left: 45px;}
.pager .next a { padding-right: 45px;}
.pager .prev a:before,
.pager .prev a:after,
.pager .next a:before,
.pager .next a:after { content: ''; display: block; position: absolute; }
.pager .prev a:before,
.pager .next a:before{ width: 28px; height: 28px; top: 50%; transform: translateY(-50%) rotate(45deg); background: #333;}
.pager .prev a:before{ left: 0;}
.pager .next a:before{ right: 0;}
.pager .prev a:after,
.pager .next a:after{ width: 6px; height: 6px; top: 50%; transform: translate(0,-50%) rotate(45deg);}
.pager .prev a:after{ left: 12px; border-left: solid 2px #fff; border-bottom: solid 2px #fff;}
.pager .next a:after{ right: 12px; border-top: solid 2px #fff; border-right: solid 2px #fff;}

.pager .prev a:hover:after { animation: move-arwL 0.4s ease;}
.pager .next a:hover:after { animation: move-arwR 0.4s ease;}

.pager .prev a:hover,
.pager .next a:hover { opacity: 0.8;}
.pager .btn-back { width: 50%; max-width: 230px; margin: 0 auto;}
.pager .btn-back a { position: relative; display: block; padding: 10px 0; border: solid 1px #000;
 color: #333; font-weight: 700; text-align: center; text-decoration: none; transition: 0.2s linear;
}
.pager .btn-back a:hover { background: #333; color: #fff;}
@media (max-width: 641px) {
	.pager { padding: 50px 0px;}
	.pager .prev,
	.pager .next { top: 0%; transform: translateY(0%);}
	.pager .prev a,
	.pager .next a { padding: 8px 0; font-size: 14px;}
	.pager .prev a { padding-left: 35px;}
	.pager .next a { padding-right: 35px;}
	.pager .prev a:before,
	.pager .next a:before{ width: 20px; height: 20px;}
	.pager .prev a:after,
	.pager .next a:after{ width: 5px; height: 5px;}
	.pager .prev a:after{ left: 7px;}
	.pager .next a:after{ right: 7px;}
	.pager .btn-back a { padding: 6px 0;}
}
@media (max-width: 481px) {
	.pager { padding: 50px 0px 0px;}
	.pager .pager { width: 96%;}
}



@keyframes move-arw {
 0% { transform: translateX(0px) rotate(45deg);}
 50% { transform: translateX(30px) rotate(45deg);}
 51% { transform: translateX(-20px) rotate(45deg);}
 100% { transform: translateX(0px) rotate(45deg);}
}


#project {}
#project .inner-sct { width: 90%; max-width: 1200px; margin: 0 auto;}
#project .project-list { margin: 0 auto 30px; font-size: 0px;}
#project .box { display: inline-block; width: 33.33334%; padding: 20px; vertical-align: top;}
#project .box a { position: relative; display: block; width: 100%; min-height: 420px; background: #fff; border: solid 1px #000; box-shadow: 6px 6px 0 #e8e8e8; color: #333; text-decoration: none; overflow: hidden;}
#project .box a:before,
#project .box a:after { content: ''; display: block; position: absolute;}
#project .box a:before{ width: 0px; height: 0px; border: solid 40px transparent; border-bottom: solid 40px #333; border-right: solid 40px #333; right: 0; bottom: 0;}
#project .box a:after { width: 12px; height: 12px; border-top: solid 3px #fff; border-right: solid 3px #fff; right: 15px; bottom: 15px; transform: rotate(45deg);}
#project .box a span.th { display: block; width: 100%; padding-top: 54%; background-position: 50% 50%; background-size: 100% auto; transition: 0.2s linear;}
#project .box a img { width: 100%;}
#project .box a dl { display: block; padding: 20px 25px;}
#project .box a dl dt { min-height: 3.2em; font-size: 21px; font-weight: 700; line-height: 1.5; letter-spacing: 0.05rem;}
#project .box a dl dd { min-height: 6.4em; font-size: 15px; letter-spacing: 0.05rem;}
#project .box a:hover span.th { background-size: 106% auto;}
#project .box a:hover:after { animation: move-arw 0.4s ease;}
@media (max-width: 1001px) {
	#project .box { padding: 12px;}
	#project .box a { min-height: 380px;}
	#project .box a:before{ border: solid 30px transparent; border-bottom: solid 30px #333; border-right: solid 30px #333;}
	#project .box a:after { width: 10px; height: 10px; border-width: 2px; right: 12px; bottom: 12px;}
	#project .box a dl { padding: 15px 20px;}
	#project .box a dl dt { font-size: 18px;}
	#project .box a dl dd { font-size: 14px;}
}
@media (max-width: 801px) {
	#project .box { width: 50%;}
	#project .box a { box-shadow: 4px 4px 0 #e8e8e8;}
}
@media (max-width: 641px) {
	#project .box a dl dt { font-size: 16px;}
	#project .box a dl dd { font-size: 13px;}
}
@media (max-width: 481px) {
	#project .inner-sct { padding-bottom: 50px;}
	#project .project-list { width: 86%;}
	#project .box { display: block; width: 100%; padding: 10px 0;}
	#project .box a { min-height: auto;}
	#project .box a:before{ border: solid 20px transparent; border-bottom: solid 20px #333; border-right: solid 20px #333;}
	#project .box a:after { width: 6px; height: 6px; right: 8px; bottom: 8px;}
	#project .box a dl dt { margin-bottom: 10px; min-height: auto;}
	#project .box a dl dd { min-height: auto;}
}



#project .article {}
#project .article article { padding: 50px 50px 80px; border: solid 1px #000; box-shadow: 6px 6px 0 #e8e8e8;}
#project .article .article-hd { margin-bottom: 30px; padding-bottom: 20px; border-bottom: dashed 1px #d4d4d4;}
#project .article .article-hd h1 { position: relative; margin-bottom: 20px; padding-left: 50px; font-size: 34px; line-height: 1.4;}
#project .article .article-hd h1:before { content: ''; display: block; width: 15px; height: 30px; background: #b7272d;
 position: absolute; left: 12px; top: 0.25em; transform: skew(-40deg);
}
#project .article .article-hd p { color: #969696;}


#project .article .article-ctn p { color: #333; letter-spacing: 0.05rem;}
#project .article .article-ctn p.tips { font-size: 21px;}
#project .article .article-ctn p.fsM { font-size: 18px;}
#project .article .article-ctn p.mb { margin-bottom: 15px;}
#project .article .article-ctn p.mb2{ margin-bottom: 30px;}


#project .article .box-700 { width: 92%; max-width: 700px; margin: 0 auto;}
#project .article .box-800 { width: 92%; max-width: 800px; margin: 0 auto; padding: 30px 0;}
#project .article .box-800.mb { margin-bottom: 30px;}
#project .article .box-900 { width: 100%; max-width: 900px; margin: 0 auto; padding: 30px 0;}
#project .article .box-900.mb { margin-bottom: 20px;}
#project .article .box-900 h3 { margin-bottom: 10px; font-size: 20px;}
#project .article .box-900 p { font-size: 17px; letter-spacing: 0.05rem;}
#project .article .line-red { padding: 20px 30px; border: solid 2px #b91c22;}
#project .article .line-grey{ padding: 20px 30px; border: solid 2px #d5d4d4;}

#project .article .box-800 h3.tc { margin-bottom: 12px; font-size: 20px; text-align: center;}


#project .article .article-ctn ul { font-size: 0px;}
#project .article .article-ctn ul.mb { margin-bottom: 30px;}
#project .article .article-ctn ul.disc li { position: relative; margin-bottom: 8px; padding-left: 18px; color: #333; font-size: 16px; line-height: 1.8;}
#project .article .article-ctn ul.disc li:last-child { margin-bottom: 0px;}
#project .article .article-ctn ul.disc li:before { content: ''; display: block; width: 8px; height: 8px; background: #b7272d; border-radius: 50%;
 position: absolute; left: 0; top: 0.6em;
}
#project .article .article-ctn ul.program { border-top: solid 1px #c8c8c8;}
#project .article .article-ctn ul.program li { padding: 15px 0; border-bottom: solid 1px #c8c8c8;}
#project .article .article-ctn ul.program li dl { display: table; width: 100%;}
#project .article .article-ctn ul.program li dl dt,
#project .article .article-ctn ul.program li dl dd { display: table-cell; font-size: 19px;}
#project .article .article-ctn ul.program li dl dt { width: 120px; padding-left: 10px; font-weight: 700;}
#project .article .article-ctn ul.program li dl dd { width: auto;}

#project .article .article-ctn ul.inline3-2 { }
#project .article .article-ctn ul.inline3-2 li { display: inline-block; padding: 2px 0; font-size: 16px; vertical-align: top;}
#project .article .article-ctn ul.inline3-2 li:nth-child(even){ width: 35%;}
#project .article .article-ctn ul.inline3-2 li:nth-child(odd) { width: 65%;}


#project .article .tit-bk { margin: 0 auto 20px; padding: 8px; background: #474747;}
#project .article .tit-bk h3 { color: #fff; font-size: 24px; text-align: center;}
#project .article .tit-red { margin: 0 auto 40px; padding: 6px; background: #b91c22;}
#project .article .tit-red h3 { color: #fff; font-size: 24px; text-align: center;}
#project .article .tit-red h3 br { display: none;}

#project .article .tit-s { max-width: 700px; margin: 0 auto 20px; padding: 15px 25px; border: solid 2px #b91c22; text-align: center;}
#project .article .tit-s h4 { color: #b91c22; font-size: 20px; text-align: left;}

#project .article .ctn-flex { display: flex; justify-content: space-between;}
#project .article .ctn-flex.center { align-items: center;}
#project .article .ctn-flex.mb { margin-bottom: 30px;}
#project .article .ctn-flex .w50 { width: 48.5%;}
#project .article .ctn-flex figure img { max-width: 100%;}

#project .article .article-ctn .waku { margin: 0 auto; padding: 15px 25px; border: solid 2px #b91c22; text-align: center;}
#project .article .article-ctn .waku ul { display: inline-block; margin: 0; text-align: left;}
#project .article .article-ctn .waku ul li { margin-bottom: 0px; padding-left: 0px; color: #b91c22; font-size: 20px; font-weight: 700; line-height: 1.5; text-align: left;}
#project .article .article-ctn .waku ul li:before { content: none;}

#project .article .article-ctn dl.info { margin-bottom: 50px; text-align: center;} 
#project .article .article-ctn dl.info dt,
#project .article .article-ctn dl.info dd { font-size: 22px; font-weight: 700;}
#project .article .article-ctn dl.info dd span { display: inline-block; padding-left: 1.2em;}

#project .article figure { width: 100%; max-width: 700px; margin: 0 auto;}
#project .article figure.mb { margin-bottom: 50px;}
#project .article figure.wide { max-width: 900px;}
#project .article figure.w620 { max-width: 620px;}
#project .article figure.mb0 { margin-bottom: 0px;}
#project .article figure img { max-width: 100%;}
#project .article figure figcaption { display: block; margin-top: 15px; color: #333; font-size: 15px; letter-spacing: 0.05rem;}

#project .article .movie { margin-bottom: 60px;}
#project .article .movie .inner { width: 100%; max-width: 680px; margin: 0 auto 18px;}
#project .article .movie .inner div { position: relative; width: 100%; padding-top: 56.25%;}
#project .article .movie .inner div iframe { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 100%;}
#project .article .movie p { font-size: 19px; font-weight: 700; text-align: center;}

#project .article .note ul { display: inline-block; margin: 0 auto; text-align: left;}
#project .article .note ul li { position: relative; font-size: 16px;}
#project .article .note ul li:before { content: '※'; background: none; border-radius: 0%; top: 0.05em;}

#project .article .case {}
#project .article .case .tit { margin-bottom: 30px; padding: 6px; background: #b91c22;}
#project .article .case .tit h3 { color: #fff; font-size: 24px; text-align: center;}
#project .article .case .case-inner { width: 94%; max-width: 900px; margin: 0 auto;}
#project .article .case h4 { position: relative; margin-bottom: 15px; padding-left: 50px; font-size: 22px; line-height: 1.4;}
#project .article .case h4:before { content: ''; display: block; width: 10px; height: 20px; background: #b7272d;
 position: absolute; left: 12px; top: 0.25em; transform: skew(-40deg);
}
#project .article .case ul { border-top: solid 1px #c8c8c8;}
#project .article .case ul li { border-bottom: solid 1px #c8c8c8;}
#project .article .case ul li dl { display: table; width: 100%;}
#project .article .case ul li dl dt,
#project .article .case ul li dl dd { display: table-cell; font-size: 17px;}
#project .article .case ul li dl dt { width: 90px; padding: 18px 8px; font-weight: 700;}
#project .article .case ul li dl dd { padding: 18px 0;}
@media (max-width: 801px) {
	#project .article article { padding: 30px 30px 60px; box-shadow: 4px 4px 0 #e8e8e8;}
	#project .article .article-hd { margin-bottom: 20px; padding-bottom: 15px;}
	#project .article .article-hd h1 { margin-bottom: 8px; padding-left: 40px; font-size: 4.0vw;}
	#project .article .article-hd h1:before { width: 10px; height: 26px;}
	#project .article .tit-s { padding: 15px;}
	#project .article .tit-s h4 { font-size: 18px;}
	#project .article .ctn-flex.mb { margin-bottom: 20px;}
	#project .article .article-ctn p.fsM { font-size: 16px;}
	#project .article .article-ctn .waku { padding: 15px;}
	#project .article .article-ctn .waku ul li { font-size: 18px;}

	#project .article .box-900 h3 { font-size: 16px;}
	#project .article .box-900 p { font-size: 14px;}

	#project .article .tit-bk h3 { font-size: 2.4vw;}
	#project .article .tit-red { margin: 0 auto 20px;}
	#project .article .tit-red h3{ font-size: 2.4vw;}

	#project .article .article-ctn ul.program li { padding: 10px 0;}
	#project .article .article-ctn ul.program li dl dt,
	#project .article .article-ctn ul.program li dl dd { font-size: 2.0vw;}

	#project .article .article-ctn ul.inline3-2 li { display: block;}
	#project .article .article-ctn ul.inline3-2 li:nth-child(even){ width: 100%;}
	#project .article .article-ctn ul.inline3-2 li:nth-child(odd) { width: 100%;}

	#project .article .article-ctn dl.info dt,
	#project .article .article-ctn dl.info dd { font-size: 2.4vw;}

	#project .article .case .tit h3 { font-size: 2.4vw;}
	#project .article .case h4 { font-size: 2.2vw;}
	#project .article .case ul li dl dt,
	#project .article .case ul li dl dd { font-size: 15px;}
}
@media (max-width: 641px) {
	#project .article { margin-bottom: 40px;}
	#project .article .ctn .ctn-flex .w40 { width: 100%;}
	#project .article .ctn .ctn-flex .w60 { width: 100%;}
}
@media (max-width: 481px) {
	#project .article { margin-bottom: 20px;}
	#project .article article { padding: 15px 20px 40px;}
	#project .article .article-hd h1 { margin-bottom: 6px; padding-left: 30px; font-size: 18px;}
	#project .article .article-hd h1:before { width: 6px; height: 16px;}
	#project .article .article-hd p { font-size: 12px;}

	#project .article .tit-bk { padding: 5px;}
	#project .article .tit-bk h3 { font-size: 15px;}
	#project .article .tit-red { padding: 4px;}
	#project .article .tit-red h3 { font-size: 15px;}
	#project .article .tit-red h3 br { display: block;}
	#project .article .tit-s { margin: 0 auto; padding: 6px 8px; border-width: 1px;}
	#project .article .tit-s h4 { font-size: 14px;}

	#project .article .article-ctn p { font-size: 13px;}
	#project .article .article-ctn p.tips { font-size: 16px;}
	#project .article .article-ctn p.mb { margin-bottom: 10px;}
	#project .article .article-ctn p.fsM { margin-bottom: 0px; font-size: 14px;}
	#project .article .article-ctn ul.mb { margin-bottom: 20px;}
	#project .article .article-ctn ul.disc li { font-size: 13px; line-height: 1.65;}
	#project .article .article-ctn ul.disc li:before { top: 0.5em;}
	#project .article .article-ctn ul.inline3-2 li { font-size: 12px;}

	#project .article .box-800.mb { margin-bottom: 20px;}
	#project .article .box-800 h3.tc { margin-bottom: 6px; font-size: 15px;}
	
	#project .article .box-900 h3 { margin-bottom: 6px; font-size: 13px;}
	#project .article .box-900 p { font-size: 12px; letter-spacing: 0rem;}
	#project .article .line-red { padding: 10px 12px;}
	#project .article .line-grey{ padding: 10px 12px;}

	#project .article .article-ctn ul.program li { padding: 8px 5px;}
	#project .article .article-ctn ul.program li dl dt,
	#project .article .article-ctn ul.program li dl dd { display: block; font-size: 12px;}
	#project .article .article-ctn ul.program li dl dt { width: 100%; padding-left: 0px;}
	#project .article .article-ctn ul.program li dl dd span { display: block; text-indent: 5em;}
	#project .article .article-ctn ul.program li dl dd br.pc { display: none;}

	#project .article .article-ctn .waku { padding: 6px; border-width: 1px;}
	#project .article .article-ctn .waku ul li { font-size: 14px;}

	#project .article .ctn-flex { display: block;}
	#project .article .ctn-flex.mb { margin-bottom: 0px;}
	#project .article .ctn-flex .w50 { width: 100%; padding: 10px 0;}
	
	#project .article figure.mb { margin-bottom: 30px;}
	#project .article figure figcaption { margin-top: 10px; font-size: 12px;}

	#project .article .article-ctn dl.info { margin-bottom: 20px;}
	#project .article .article-ctn dl.info dt,
	#project .article .article-ctn dl.info dd { font-size: 13px;}
	#project .article .article-ctn dl.info dd span { display: block; padding-left: 0em;}

	#project .article .movie { margin-bottom: 30px;}
	#project .article .movie .inner { margin: 0 auto 8px;}
	
	#project .article .note ul li { font-size: 12px;}

	#project .article .case .tit { margin-bottom: 12px; padding: 4px;}
	#project .article .case .tit h3 { font-size: 15px;}
	#project .article .case .case-inner { width: 94%; max-width: 900px; margin: 0 auto;}
	#project .article .case h4 { margin-bottom: 10px; padding-left: 30px; font-size: 14px;}
	#project .article .case h4:before { width: 4px; height: 12px;}
	#project .article .case ul li dl dt,
	#project .article .case ul li dl dd { display: table-cell; font-size: 12px;}
	#project .article .case ul li dl dt { width: 60px; padding: 10px 5px;}
	#project .article .case ul li dl dd { padding: 10px 0;}
}