@charset "utf-8";
main{ overflow: hidden;}
/*================================
mv
===================================*/
#mv {}
#mv #top{ width: 100%; display: flex; justify-content: center; align-items: center; height: 400px; background: #E6E8E9;}
#mv #top img{ height: 320px; width: auto; margin-bottom: 5px;}
/**/
#mv .wrap{ display: flex; flex-direction: column;}
#mv .inner{ max-width: 800px;}
#mv .info{ width:100%; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 60px 4% 100px;}
#mv .info .left{ display: flex; flex-direction: column; align-items: flex-start; justify-content: center;}
#mv .info .left .tit{ white-space:nowrap; display: flex; flex-direction: column-reverse; }
#mv .info .left .tit h2{ display: block;}
#mv .info .left .tit h2 span { display: inline-block; font-size: 11px; color: #777; margin-top: 15px; padding-top: 15px; border-top: solid 3px #ddd;}
#mv .info .left .tit h3{ font-size: 20px; letter-spacing: 4px; font-weight: 400;}
#mv .info .left p{ display: block;}
#mv .info .left p a { width: 100%; display: inline-block; padding: 4px 10px; font-size: 11px; border-radius: 2px; line-height: 1em; border: solid 1px #ccc; color: #777; transition: 0.8s; box-shadow: 0 0 0 0 #000 inset; margin-top: 4px;}
#mv .info .left p a:hover{ color: #fff; box-shadow: 200px 0 0 0 #000 inset; border: solid 1px #000;}
/**/
#mv .info .right{ display: block; margin-left: 10%;}
#mv .info .right ul{ width: 100%; display: block;}
#mv .info .right ul li{ width: 100%; display: flex; align-items: flex-start; margin: 8px 0;}
#mv .info .right ul li .tit{ width: 50px; display: block; color: #111; font-size: 12px; font-weight: 500;}
#mv .info .right ul li .txt{ flex: 1; display: block; color: #777; font-size: 12px;}

@media screen and (max-width: 850px) {
#mv .info .left{ width: 50%;}
#mv .info .right{ flex: 1;}
}
@media screen and (max-width: 700px) {
#mv .info{ flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 60px 4%;}
#mv .info .left{ width: 100%; align-items: center; justify-content: center;}
#mv .info .left .tit{ align-items: center;}

#mv .info .left .tit h2 span { margin-top:10px; padding: 10px 10px 15px; border-top: solid 1px #aaa;}
#mv .info .left .tit h3{ font-size: 20px; letter-spacing: 4px; font-weight: 800;}
#mv .info .left p{ display: flex; justify-content: center;}
#mv .info .left p a { min-width: 150px;  padding: 4px 10px 5px; border: solid 1px #000; color: #fff; transition: 0.8s; background: #000; text-align: center;}
/**/
#mv .info .right{ width: 100%; display: flex; justify-content: center; margin: 30px 0 0;}
#mv .info .right ul{ width: auto; display: block; padding: 20px; border: solid 1px #fff; box-shadow: 0 5px 12px rgba(0,0,0,.1); border-radius: 6px;}
}
@media screen and (max-width: 650px) {
#mv #top{ height: 50vh; background: #E6E8E9;}
#mv #top img{ height: auto; width: 86%;}
}
/*=====================================
	mkService
=======================================*/
#mkService{ padding: 0 5% 150px; display: flex; justify-content: center; position: relative; z-index: 10000;}
#mkService .box{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#mkService .box ul { width: auto; display: flex; flex-direction: column;}
#mkService .box ul li{ display: flex; align-items: center; padding: 25px 20px; border-bottom: solid 1px #ccc;}
#mkService .box ul li:last-child{ border-bottom: solid 4px #333;}
#mkService .box ul li.tit{ background: #111; border-radius: 14px 14px 0 0; padding: 8px 0; border-bottom: none; justify-content: center; position: relative; overflow: hidden;}
#mkService .box ul li h3{ display: flex; flex-direction: column; text-align: center; z-index: 10; position: relative; padding: 20px 0}
#mkService .box ul li h3 .en{ display: block; font-size: 20px; color: #fff; line-height: 1.4em;}
#mkService .box ul li h3 .jp{ display: block; font-size: 12px; color: #ccc; line-height: 1.4em; font-weight: 200;}
#mkService .box ul li img{ width:40px; height: auto; margin-right: 20px;}
#mkService .box ul li span{ display: block; font-weight: 500; line-height: 1.2em;}
@media screen and (max-width:800px){
#mkService{ padding: 0 3% 100px;}
}
@media screen and (max-width:650px){
#mkService .box ul li{ padding: 10px;}
#mkService .box ul li .img{ margin-right:30px;}
}
/*------------------
#imageArea
-------------------*/
#imageArea{ width: 100%; display: flex; flex-wrap: wrap; justify-content: center; padding: 80px 0;}
#imageArea .inner{ display: flex; flex-wrap: wrap; justify-content: flex-start;}
#imageArea .inner.pcImage > span{ display: block; width: 50%; padding: 0 30px 100px;}
#imageArea .inner.spImage > span{ display: block; width: 25%; padding: 0 15px 60px;}
#imageArea .inner > span img{ width: 100%; height: auto;  box-shadow: 0 8px 20px rgba(0,0,0,.3);}
@media screen and (max-width:700px) {
#imageArea .inner.pcImage > span{ width: 100%;}
#imageArea .inner.spImage > span{ width: 50%;}
}
/*================================
info-text
===================================*/
#info-text{ border-top: solid 1px #aaa; border-bottom: solid 1px #aaa; padding: 100px 0 20px;}
#info-text .wrap{ flex-direction: column; align-items: center;}
#info-text .wrap .inner-row{ max-width: 900px; margin-bottom: 80px;}
#info-text .wrap .inner-row h2{ width: 222px; display: flex; flex-direction: column;}
#info-text .wrap .inner-row h2 .en,
#info-text .wrap .inner-row h2 .en *{ font-size: 32px; font-weight: 900; letter-spacing: 0; line-height: 1.2em;}
#info-text .wrap .inner-row h2 .jp, 
#info-text .wrap .inner-row h2 .jp *{ font-size: 14px; line-height: 1em; color: #777;}
#info-text .wrap .inner-row p{ flex: 1; display: flex; flex-direction: column;}
#info-text .wrap .inner-row p span{ display: block; margin-bottom: 20px;}
@media screen and (max-width: 600px) {
#info-text .wrap .inner-row{ flex-direction: column; padding: 0 2%;}
#info-text .wrap .inner-row h2{ width: 100%;}
#info-text .wrap .inner-row p{ width: 93%; margin: 20px 0 0 7%;}
}
/*================================
top-design
===================================*/
body, 
html, 
main, 
#top-design, 
.td-wrap { overflow: auto !important;}

#top-design{ width: 100%; justify-content: space-between; padding: 0 0 80px;}
#top-design .td-wrap{ display: flex; justify-content: space-between;}
#top-design .td-wrap .imageArea{ width: 50%; display: flex; justify-content: flex-end;}
#top-design .td-wrap .imageArea span{ width: 100%; max-width: 1200px; display: block;}
#top-design .td-wrap .imageArea span img{ width: 100%; }
#top-design .td-wrap .textArea{ width: 50%; height: 80vh; position: sticky; top: 8vh; display: flex; justify-content: center; padding-left: 50px;}
#top-design .td-wrap .textArea > div{ width: 440px; display: flex; flex-direction: column; padding:0 20px 20px; overflow-y: auto; margin-top: 60px;}
#top-design .td-wrap .textArea > div::-webkit-scrollbar { width: 4px;}
#top-design .td-wrap .textArea > div::-webkit-scrollbar-track { background-color:#e5e5e5;}
#top-design .td-wrap .textArea > div::-webkit-scrollbar-thumb { background-color:#999; border-radius:8px; box-shadow:none;}
#top-design .td-wrap .textArea > div h4{ display: block; font-weight: 600; color: #000; line-height: 1.4em; margin-left: -8px;}
#top-design .td-wrap .textArea > div p{ display: block; margin:5px 0 30px; color: #555; font-size: 14px;}
#top-design .td-wrap .textArea > div p.m-title{ font-weight: bold; padding: 30px 0; position: absolute; color: #e5e5e5; z-index: -1; font-size: 40px; right: 45%; top: -60px; }
@media screen and (max-width: 1200px) {
#top-design .td-wrap .textArea{ justify-content: center; padding-left: 0;}
#top-design .td-wrap .textArea > div p.m-title{ right: 20px;}
}
@media screen and (max-width: 1000px) {
#top-design .td-wrap .textArea{ width: 45%; margin-left: 5%;}
}
@media screen and (max-width: 850px) {
#top-design { background: #eee;}
#top-design .td-wrap{ flex-direction: column-reverse; justify-content: center; align-items: center;}
#top-design .td-wrap .imageArea{ width: 90%; }
#top-design .td-wrap .textArea > div{ width: 100%; overflow: hidden; margin-top: 0;}
#top-design .td-wrap .textArea > div p{ margin-bottom: 60px;}
#top-design .td-wrap .textArea > div p:last-child{ margin-bottom: 0px;}
#top-design .td-wrap .textArea{ width: 90%; height: auto; position: static; top: auto; margin: 0 5%; padding:0 0 40px;}
#top-design .td-wrap .textArea > div p.m-title{ position: static; left: auto; display: flex; justify-content: center; width: 100%; color: #d0d0d0; padding: 0; margin:-7px 0 25px; font-size: 12vw; line-height: 1em; top: auto; letter-spacing: 0;}
}

/*================================
一覧：works-mv
===================================*/
#works-mv { padding:60px 0 20px;}
#works-mv .inner{ padding: 0 2%;}
#works-mv h2{ display: flex; flex-direction: column; align-items: flex-start;}
#works-mv h2 .en{ font-size: 100px; margin-bottom: 30px;}
#works-mv h2 .jp{ width: auto; display: inline-block; font-weight:600;}
#works-mv h2 .jp br{ display: none;}
#works-mv p{ color: #777; font-size: 14px; font-weight: bold;}
#works-mv ul{ display: flex; justify-content: flex-start; margin-top: 40px;}
#works-mv ul li{ display: block; margin-right: 15px;}
#works-mv ul li > *{ line-height: 1em; display: block; padding: 8px 25px; border-radius: 4px; font-size: 14px;}
#works-mv ul li > span{ background: #ddd; color: #555; border: solid 1px #aaa;}
#works-mv ul li > a{ background: #fff; color: #111; border: solid 1px #111; font-weight: bold;}
#works-mv ul li.current-cat > a, 
#works-mv ul li > a:hover{ background: #111; color: #fff;}

@media screen and (max-width: 750px) {
#works-mv h2 .en{ font-size: 16vw;}
#works-mv ul{ justify-content: space-between; margin-top:50px;}
#works-mv ul li{ margin-right: 0; width: 32%;}
#works-mv ul li > *{ padding: 15px 5px; font-size: 2.2vw; letter-spacing: 0; text-align: center;}
}
@media screen and (max-width: 600px) {
#works-mv h2 .jp br{ display: block;}
#works-mv p{ font-size: 13px; font-weight: 400; padding:10px 20% 0 0;}
}

/*--------------*/
#works-list { margin-bottom: 120px;}
#works-list .inner-row{ flex-wrap: wrap; align-items: stretch;}
#works-list .inner-row .post-item{ width: 29%; margin: 20px 2% 40px;}
#works-list .inner-row .post-item a{ height: 100%; display: flex; flex-direction: column; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.2); border-radius: 10px; padding: 20px 20px 40px; border: solid 1px #ddd;}
#works-list .inner-row .post-item a:hover{ background: #ddd; box-shadow: 0 4px 10px rgba(0,0,0,.0);}
#works-list .inner-row .post-item a .image{ }
#works-list .inner-row .post-item a:hover .image img{ transform: scale(0.95, 0.95)}
#works-list .inner-row .post-item a:hover *{ color: #000 !important;}
#works-list .inner-row .post-item a .textArea { width: 100%; display: flex; flex-direction: column; }
#works-list .inner-row .post-item a .textArea .title { width: 100%; display: flex; flex-direction: column-reverse; }
#works-list .inner-row .post-item a .textArea .title h3{ font-size: 11px; margin: 5px 0; color: #777; font-weight: bold;}
#works-list .inner-row .post-item a .textArea .title h4{ font-weight: bold; font-size: 18px; line-height: 1.2em; margin-bottom: 10px; padding: 5px 0 15px; border-bottom: solid 3px #eee;}
#works-list .inner-row .post-item a .textArea p{ display: block; font-size: 12px;}

@media screen and (max-width: 1150px) {
#works-list .inner-row .post-item{ width: 44%; margin: 20px 3% 40px;}
}
@media screen and (max-width: 750px) {
#works-list .inner-row .post-item{ width: 84%; margin: 20px 8% 60px;}
}

/**/
.works-post-bottom{ margin: 0 0 120px;}
@media screen and (max-width:800px) {
.works-post-bottom{ margin: 0 0 40px;}
}