@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Karla:400,700');

/* Defalut Setting */
* {box-sizing:border-box;}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display:block;margin:0;padding:0}
html, body {width:100%;height:100%;margin:0;padding:0;background-color:#40b850;-webkit-text-size-adjust:none;-webkit-overflow-scrolling:touch}
body {font-family:'Karla', sans-serif;font-size:18px;line-height:1.3;background:#40b850;word-break:keep-all;word-wrap:break-word;overflow:auto}
body.sub {background-color:#000;min-height:100%;height:auto}
p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,butto n,img{margin:0;padding:0}
ul, ol, li {list-style:none}
a {cursor:pointer;color:#000}
a:link, a:active, a:visited {text-decoration:none}
a:hover {text-decoration:none}
button {border:0;background:none;line-height:100%;vertical-align:bottom}
input {font-family:sans-serif}
img {vertical-align:bottom;border:none}
.txt {font-size:0;color:transparent;text-indent:-9999px}
.bar {display:block;background:#000;height:2px;margin-top:-2px}
.clear {clear:both}
.pc_txt {display:block}
.m_nav {display:none}
#map {padding-bottom:100%;height:100%}
hr {margin:0;border-color:transparent}
/* header */
header {position:relative;margin:0 auto;width:100%;height:93px;max-width:1600px;z-index:9990;background:#40b850}
header.fixed{position:fixed;top:0;left:0;right:0}
header.fixed + .wrapper{padding-top:93px}
header > div {margin:0 32px;width:calc(100% - 64px);height:93px;border-bottom:1px solid #000;}
header h1 {font-size:0;width:77px;}
header h1 a {position:relative;display:block;padding:38px 0}
header > div > nav {position:absolute;top:0;right:32px}
header > div > nav ul {display:inline-block}
header > div > nav ul li {margin-right:23px;float:left}
header > div > nav ul li:last-child {margin:0}
header > div > nav ul li a {display:block;padding:32px 0;font-size:24px;}
header a.btn_menu {display:none}
/* works detail */
ul.col {overflow:hidden;margin:0 -16px;font-size:0}
ul.col > li {display:inline-block;width:50%;padding:0 16px;vertical-align:top}
ul.col.list{margin:-16px}
ul.col.list > li{padding:16px}
.wrapper {max-width:1600px;width:100%;margin:0 auto;padding:0 32px 0;}
.wrapper .info {padding:192px 0;text-align:center}
.wrapper .info p {padding-bottom:83px;font-size:30px;line-height:1.4;text-align:center}
.wrapper .info .visual {position:relative;overflow:hidden}
.wrapper .info .visual div {position:relative;width:41%;float:left}
.wrapper .info .visual div img {width:100%}
.wrapper .info .visual div > p {position:absolute;top:50%;left:0;right:0;margin:-45px auto 0;padding:0;width:100%;line-height:1.5;color:#fff}
.wrapper .info .visual p.bar {position:absolute;display:block;margin:auto;padding:0;top:calc(50% - 1px);left:0;right:0;width:25%;height:2px;background:#fff}
.wrapper .info .visual div.shape-1 {margin-left:10.5%}
.wrapper .info .visual div.shape-2 {margin-left:-4.5%}
.area_tit {width:100%;padding:28px 0 32px;width:100%;border-top:1px solid #000;}
.area_tit_w {width:100%;padding:37px 0;text-align:center;}
.area_tit_w h2 {font-size:40px;line-height:1.13}
.area_tit.map ul li{font-size:18px}
.area_txt {width:100%;padding:28px 0 32px;border-top:1px solid #000}
.area_txt ul.col > li:first-child {font-size:24px;line-height:1.3} /* tc modified : original was 16px 1.5 */
.area_txt ul.col > li:last-child {font-size:18px;line-height:1.78}
.area_txt ul.col > li.row ul li {margin-bottom:33px}
.area_txt ul.col > li.row ul li:last-child {margin:0}
.area_txt ul.col > li.large {font-size:30px;line-height:1.4} /* tc added */
.area_img {margin:0 0 32px;width:100%;}
.area_img.right {text-align:right}
.area_img dl dd ul {padding:16px 0}
.area_img p.description {font-size:12px;margin-top:8px} /* tc added */
.area_img img {width:100%}
.area_img dl dd {font-size:18px}
.area_img dl dd ul {padding:16px 0 0;overflow:hidden}
.area_img dl dd ul li {display:inline-block;}
.area_img dl dd ul li:first-child {float:left}
.area_img dl dd ul li:last-child {float:right}
.area_img ul.col li.btn_more dl dt {position:relative;width:100%;padding-bottom:100%;border-radius:100%;background:#000;text-align:center;transition:background 0.2s ease-in;font-size:18px}
.area_img ul.col li.btn_more dl dt span {position:absolute;top:50%;left:50%;color:#fff;transform:translate(-50%, -50%);transition:color 0.3s 0.1s ease-in;}
.area_img ul.col.work > li {display:none}
.area_img ul.col.work > li.active {display:inline-block;}
.area_tit h3 {padding-bottom:32px;font-size:16px;font-weight:normal;line-height:1.5}
.area_tit p {font-size:30px;line-height:1.4}
.area_tit ul li:last-child {line-height:1.78}
.area_img.list ul.col > li {padding:0 16px 48px;}
.area_img.list ul.col > li > a {display:block}
.area_slide {width:100%;padding-bottom:30px;}
.area_slide .img_frame {position:relative}
.area_frame {position:relative;margin-bottom:32px;width:100%;overflow:hidden}
.img_frame {position:relative;width:100%;height:100%}
.img_frame.square {text-align:center}
.area_slide .img_frame ul {text-align:center}
.area_slide .img_frame ul li {width:100%;float:left}
.area_slide ul li.btn {position:absolute;display:inline-block;top:0;bottom:0;margin:auto;width:80px;height:80px;background:url('../img/common/btn.jpg');background-size:80px 80px}
.area_slide ul li.btn.disabled {display:none}
.area_slide ul li.btn.prev {left:0}
.area_slide ul li.btn.next {right:0;transform:rotate(-180deg)}
.area_slide .img_frame {overflow:hidden;position:relative;width:100%;height:100%}
.area_slide .slide_container {width:100%;height:100%}
.area_slide .slide_container::after{content:'';display:block;position:relative;clear:both;width:0;height:0}
.area_slide .slide_item {position:relative;width:auto;height:100%;float:left;text-align:center}
.area_slide .slide_item .image_area {position:relative;width:100%;height:100%}
.area_slide .slide_num p {margin-top:16px;text-align:right}
.m_area_txt p {padding:192px 0;font-size:30px;line-height:1.4;text-align:center}
.filter_wrap {padding:32px 0;font-size:30px;line-height:1.4}
.filter_wrap a span {display:inline-block;color:#fff}
.filter_wrap a span::after {content:'';display:block;height:2px;background:#fff}
.filter_wrap .work_filter {display:none;position:fixed;top:0;left:0;right:0;margin:auto;width:100%;height:100%;background:#40b850;z-index:9992;overflow:auto}
.filter_wrap .work_filter .filter_nav{max-width:1600px;padding:0 32px;margin:0 auto}
.filter_wrap .work_filter .filter_nav dl dt {height:93px;border-bottom:1px solid #000;line-height:93px}
.filter_wrap .work_filter .filter_nav dl dd li {cursor:pointer;line-height:2.7}
.filter_wrap .work_filter .filter_nav dl dd li a {display:block}
.filter_wrap .work_filter .filter_nav dl dd li a.select {color:#fff}
.filter_wrap .work_filter .filter_nav dl dd li::after {content:'';display:block;height:1px;background:#000}
footer {padding:32px 0;border-top:1px solid #000;}
footer ul > li{font-size:16px;line-height:1.5}
footer ul > li > a {display:inline-block}
.area_screen {margin:0 0 20px;text-align:center;background:#000}
.area_screen img {max-width:100%}
.lock {position:fixed;width:100%;height:auto}
img {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
}
::selection {
    background:#000;
    color:#FFF;
    text-shadow: none;
}
::-moz-selection {
    background:#000;
    color:#FFF;
    text-shadow: none;
}
::-webkit-selection {
    background:#000;
    color:#FFF;
    text-shadow: none;
}

@media screen and (max-width:767px){
    .pc_txt {display:none}
    .wrapper {width:100%;padding:0 20px 0}
    ul.col > li {width:100%;float:none}
    header {height:69px}
    header > div {margin:0 20px;width:calc(100% - 40px);height:69px;}
    header h1{width:68px;}
    header h1 a {padding:25px 0}
    header nav {display:none}
    header a.btn_menu {display:block;position:absolute;top:0;right:0;width:64px;height:69px;z-index:9992}
    header a.btn_menu.active {display:none}
    header a.btn_menu div {position:relative;}
    header a.btn_menu span {position:absolute;display:block;left:0;right:0;margin:auto;width:24px;height:2px;background:#000;}
    header a.btn_menu span:first-child {top:24px}
    header a.btn_menu span:nth-child(2) {top:33px}
    header a.btn_menu span:last-child {top:42px}
    header .m_nav {display:none;position:fixed;top:0;left:0;padding:0 20px;width:100%;height:100%;background:#40b850}
    header .m_nav.active {display:block}
    header .m_nav nav {position:relative; display:block;top:50%;transform:translateY(-50%);font-size:24px;line-height:2.67;text-align:center}
    header .m_nav nav ul li a {display:block}
    header .m_nav nav ul li a::after {content:'';display:block;height:1px;background:#000}
    header.fixed + .wrapper{padding-top:69px}
    .wrapper .info {padding:80px 0}
    .wrapper .info p {padding-bottom:60px;font-size:24px;line-height:1.3;text-align:left}
    .wrapper .info .visual div {width:100%;float:none}
    .wrapper .info .visual div > p {left:0;margin-top:-30px;font-size:20px;line-height:1.5;text-align:center}
    .wrapper .info .visual p.bar {transform:rotate(90deg)}
    .wrapper .info .visual div.shape-1 {margin:0!important;padding:0 10px;}
    .wrapper .info .visual div.shape-2 {margin:-14% 0 0;padding:0 20px;}
    .wrapper .info .visual p.bar {top:50%;left:0;width:50%}
    .area_txt {padding:24px 0 30px}
    .area_txt ul.col > li:last-child > ul > li:last-child {margin:0}
    .area_txt ul.col > li:first-child {margin:0 0 13px;text-align:center}
    .area_txt ul.col > li:last-child, .area_tit ul.col > li:last-child {font-size:16px;line-height:1.88}
    .area_tit {padding:24px 0 30px}
    .area_tit_w {padding:31px 0}
    .area_tit_w h2 {font-size:30px;line-height:1.07}
    .area_tit h3 {padding-bottom:13px;font-size:16px;line-height:1.5;text-align:center}
    .area_tit p {font-size:24px;line-height:1.5}
    .area_tit ul li:last-child ul li {margin-bottom:15px}
    .area_tit.map ul li:last-child li:first-child {margin-top:20px;}
    .area_txt ul.col > li:last-child > ul > li {text-align:center}
    .area_txt ul.col > li.row ul li {text-align:left}
    .area_img {margin:0 0 28px}
    /* .area_img > ul > li{padding:0;margin:0 0 20px 0}
    .area_img > ul > li:last-child{margin:0} */
    .area_img {margin:0 0 20px}
    .area_img > ul > li,  ul.col.list > li{padding:0 0 20px;}
    .area_img > ul > li:last-child {padding:0}
    .area_img.list ul.col > li {padding:0 0 36px}
    .area_img ul.col {margin:0}
    .area_frame {margin-bottom:20px}
    .area_slide {padding-bottom:20px;}
    .area_slide ul li.btn {width:40px;height:40px;background-size:40px 40px}
    .filter_wrap {padding:32px 0;font-size:24px;line-height:1.3}
    .filter_wrap .work_filter .filter_nav {padding:0 20px 40px}
    .filter_wrap .work_filter .filter_nav dl dt {margin-bottom:20px;height:69px;line-height:69px}
    .filter_wrap .work_filter .filter_nav dl dd li {line-height:2}
    .filter_wrap .work_filter .filter_nav dl dd li::after {display:none}
    .m_area_txt p {padding:80px 0;font-size:24px;line-height:1.3;text-align:left}
    .m_area_txt p br {display:none}
    footer {padding:20px 0}
    footer ul.col > li:first-child {margin-bottom:25px}
}
@media (min-width:768px) {
    header > div > nav ul li a:hover, dd ul li:hover, footer ul li a:hover {color:#fff;}
    .area_img ul.col li.btn_more dl dt:hover span {color:#000}
    .area_img ul.col li.btn_more dl dt:hover, dd ul li:hover > span.bar, footer ul li a:hover span.bar {background:#fff}

}
@media (min-width:768px) and (max-width:1024px){
    .wrapper .info .visual div > p{font-size:24px}
    .area_slide ul li.btn {width:60px;height:60px;background-size:60px 60px}
}
@media (min-width:1024px) {
    .area_img.list ul.col > li {width:33.333%}
}