@charset "utf-8";

.btn_menu,
#search{display:none;}

#top{border-bottom-color:#d9d9d9;}
#menuArea {background: #fff;}

.logo span {font-size: 27px;font-weight: 400;color: #333;margin: 6px 0 0;}
.logo strong {padding: 0;line-height: 37px;letter-spacing: -1px;padding: 0 0 6px;}

@media all and (max-width:1230px) {
	.inner{width:100%; padding-right:15px; padding-left:15px;}
}
@media all and (max-width:1240px){
    .logo span, .logo strong{font-size: 23px;}
}
@media all and (max-width:1024px) {
	.btn_menu {display:block;}
    .logo span {margin: 11px 0 0;}
    .logo strong {padding: 0; line-height: 1;}
}
@media all and (max-width:768px) {
	.logo span, .logo strong{font-size: 20px; line-height: 1;}
}
@media all and (max-width:380px) {
	.logo span, .logo strong{font-size: 19px; }
}

#topmenu {padding:0 0 0 30%;}
#topmenu > li {width: 16%;}
#topmenu > li:nth-child(3) {width: 20%;}
#topmenu > li:last-child {display:block;}
#topmenu li .tit{width:23%;}
#topmenu .menu{padding:50px 0 0 23%;}
#topmenu li.menu1 .tit:after{background-image:url(/images/common/bg_menu1.png);}
#topmenu li.menu2 .tit:after{background-image:url(/images/common/bg_menu3.png);}
#topmenu li.menu3 .tit:after{background-image:url(/images/common/bg_menu2.png);}
#topmenu li.menu4 .tit:after{background-image:url(/images/common/bg_menu9.png);}
#topmenu li.menu5 .tit:after{background-image:url(/images/common/bg_menu8.png);}
#topmenu li.menu6 .tit:after{background-image:url(/images/common/bg_menu6.png);}

@media all and (max-width:1230px) {
	#topmenu .menu{padding:50px 15px 0 23%;}
}

#footer {padding-top:45px; background: #313f47; color: #bdbdbd;}
#footer .logo img {margin: 7px 5px 0 0;}
#footer .logo strong {padding: 0; color: #bdbdbd;}
#footer .logo span > span{display: block; font-size: 11px; color: rgba(161,161,161,0.8); line-height: 1; margin: 2px 0 0; letter-spacing: -0.5px;}
#footer .copyright {font-size: 14px; color: rgba(161,161,161,0.8);}
#footer address {padding: 0 0 7px;}
#footer .info {padding: 10px 0 45px 295px; box-sizing: border-box;}

@media all and (max-width:1530px) {
	.btn_top{top:-27px;}
}
@media all and (max-width:768px) {
	.btn_top{top:-19px;}

	#footer {padding-top:35px;}
    #footer .logo span > span {letter-spacing: -1px; font-size: 10px;}
	#footer address{padding:20px 0 10px;}
    #footer .info {padding: 0;} 
    
}
@media all and (max-width:380px) {
	.btn_top{top:-17px;}
	#footer {padding-top:33px;}
}

#container_sub{background:url(/images/ch/sub/bg_sub.jpg) no-repeat 50% 100%;}

#subVisual{text-align:left; height: 340px; background:url(/images/ch/sub/bg.jpg) no-repeat 50% 50%; background-size:cover;}
#subVisual .slogan_wrap{width:1200px; height:250px; padding:0;}
#subVisual .slogan{position:relative; display:block; padding:60px 0 0 59px;}
#subVisual .slogan:before{z-index:4; content:''; display:block; position: absolute; top:0; right:50px; width:473px; height:250px; background:url(/images/ch/sub/bg_visual.png) no-repeat 100% 0;}
#subVisual img{height:auto; animation:none;}
@media all and (max-width:1230px) {
    #subVisual {height: 300px;}
	#subVisual .slogan_wrap{width:100%;}
	#subVisual .slogan:before{right:15px;}
}
@media all and (max-width:1024px) {
	#subVisual{height: 200px; background-position: top center;}
	#subVisual .slogan_wrap{height:130px;}
	#subVisual .slogan{display:table-cell; padding:0 0 10px 50px;}
	#subVisual .slogan:before{height:100%; background-size:contain;}
	#subVisual img{height:34px;}
}
@media all and (max-width:768px) {
	#subVisual{background-size:auto 150px; height: 150px;}
	#subVisual .slogan_wrap{height:105px;}
	#subVisual .slogan{padding:0 0 10px 20px;}
	#subVisual img{height:30px;}
}
@media all and (max-width:568px) {
	#subVisual{background-size:auto 140px; height: 140px;}
	#subVisual .slogan_wrap{height:95px;}
	#subVisual .slogan:before{height:90%;}
	#subVisual img{height:24px; margin:0;}
	#subVisual img:nth-of-type(2){margin:0;}
}
@media all and (max-width:380px) {
	#container_sub{background-size:auto 100px;}

	#subVisual .slogan_wrap{height:93px;}
	#subVisual img{height:23px;}
}
@media all and (max-width:360px) {
	#subVisual .slogan:before{display:none;}
}
 
.snb ul {display:none; z-index:3; position:absolute; top:60px; left:-1px; width:calc(100% + 1px); border:1px solid #e6e6e6; border-top:none; background:#fff; box-sizing:border-box; box-shadow:2px 3px 5px rgba(0,0,0,0.1);}
.snb ul li {width:100%;}
.snb ul a {display:block; line-height:53px; padding:0 0 0 20px;}
.snb ul li + li a {border-top:1px solid #e6e6e6;}
.snb ul a.on,
.snb ul a:hover,
.snb ul a:focus,
.snb ul a:active {background:#f7f7f7;}

@media all and (max-width:1024px) {
	.location{/* height:50px; */margin:-25px 15px 0;}
	.location .snb{font-size:15px;}
	.location .snb > li > a{width:auto; min-width:150px; height:50px; line-height:51px;}

	.snb ul {top:55px;}
	.snb ul a {line-height:45px;}
}
@media all and (max-width:768px) {
	.location {/* height:45px; *//* width:calc(100% - 20px); */margin:-22px 10px 0;}
	.location .snb{font-size:14px;}
	.location .snb > li > a {height:45px; line-height:46px;}

    .snb ul {top:45px;}
	.snb ul a {line-height:37px;}
}
@media all and (max-width:568px) {
	.location {/* height:39px; */margin:-20px 10px 0;}
    .location .home {background-size:13px; background-position: center;}
	.location .snb{font-size:13px;}
    .location .snb > li > a {height:39px; line-height:40px; min-width:100px; padding:0 30px 0 15px;}
    .location .snb > li > a:after {right:12px; width:6px; height:6px; margin:-5px 0 0 0;}
	.location .snb > li > a.on:after {margin:-2px 0 0 0;}

    .snb ul {top:39px;}
	.snb ul a {padding:0 0 0 15px; line-height:35px;}
}
@media all and (max-width:380px) {
	.location {/* height:37px; */margin:-19px 10px 0;}
    .location .snb > li > a {height:37px; line-height:38px; padding:0 25px 0 12px;}

    .snb ul {top:37px;}
}


#subContent #content {width:100%;}
#subVisual #pageInfo {padding: 80px 15px 0;}
#subVisual #pageTitle h3 {margin: 0 0 15px; padding: 0; text-align: left;} 
#pageInfo {padding:98px 0 50px 0; margin:0 auto; width: 1400px; border-bottom: none; float: none; text-align: center;}
#pageInfo:before{display:none;}
#pageTitle {float:none; }
#pageTitle h3{position:relative; padding:0 0 10px; font-size:42px; font-weight:600; letter-spacing:-3px;}


#pageTitle .btn_move{z-index:1; position:absolute; bottom:73px; left:0; width:30px; height:30px; font-size:0; text-indent:-9999px;}
#pageTitle .btn_move.right {left:auto; right:0;}
#pageTitle .btn_move:after{content:''; display:block; position:absolute; left:8px; top:4px; width:21px; height:21px; border-right:3px solid #383838; border-bottom:3px solid #383838; transform:rotate(135deg); opacity: 0.5; transition: 0.3s;}
#pageTitle .btn_move.right:after{transform:rotate(-45deg);}
#pageTitle .btn_move:hover:after{opacity: 1;}

.location_wrap {float: left;}

.util_wrap {position: static; float: left; margin: 0 0 0 40px;}

@media all and (max-width:1440px){
    #pageInfo {width: 100%;padding: 90px 0 50px;}
}

@media all and (max-width:1230px) {
    #pageInfo {padding: 80px 0 30px;}
    #subVisual #pageTitle h3 {font-size: 34px;}
	#pageTitle .btn_move {bottom: 50px;}
}
@media all and (max-width:1024px) {
    #pageInfo {padding: 40px 0 30px;}
	#subVisual #pageInfo {padding: 40px 0 0;}
	#pageTitle h3{padding: 0 14px 10px;font-size:27px;letter-spacing:-2px;}
    #subVisual #pageTitle h3 {padding: 0 14px 18px;}
	#pageTitle .btn_move{bottom:10px;}
    .util_wrap {margin: -21px 0 0;}
	#pageTitle .btn_move{bottom: 45px;}
}
@media all and (max-width:768px) {
	#subContent{padding-right:10px; padding-left:10px;}
    
	#pageInfo {padding:30px 0 0 0;margin:0 0 25px;}
	#pageTitle h3{padding: 0 12px 8px;font-size:23px;letter-spacing:-1px;}
    #subVisual #pageTitle h3 {padding: 0 12px 16px;font-size: 28px; text-align: left;}
    .util_wrap {margin: -24px 0 0;}
	#pageTitle .btn_move {bottom: 15px;left: 20px;}
	#pageTitle .btn_move.right {right:20px;}
}
@media all and (max-width:610px){
    .location_wrap {display: block; float: right;}
}
@media all and (max-width:568px) {
	#pageInfo {padding:30px 0 0 0; margin:0 0 20px;}
	#pageInfo > p {display:none;}
    #subVisual #pageInfo {padding: 30px 0 0;}
	#pageTitle h3{padding: 0 10px 5px;font-size:21px;}
    #subVisual #pageTitle h3 {padding: 0 10px 14px;font-size: 21px;}
    
    #pageTitle .btn_move {bottom: 0;width:30px;height:30px;}
    #pageTitle .btn_move:after{width:17px;height:17px;top: 5px;}

    .util_wrap {width: 80px;margin: -22px 0 0;}
	.util_wrap .btns {margin: 0;}
}
@media all and (max-width:380px) {
	#pageInfo {padding:28px 0 0 0; margin:0 0 18px;}
	#pageTitle h3{padding:0 10px 12px; font-size:20px;}
    #subVisual #pageTitle h3 {padding: 0 10px 12px;}
	.util_wrap {margin: -23px 0 0;}
}