@charset "utf-8";

/* common */
html,body{width:100%;height:100%;margin:0;padding:0}

.blind{display:block;overflow:hidden;position:absolute;top:0;left:-5000px;font-size:1.8em}
.hide{display:none;margin:0;padding:0}

#skip{display:none;}

#m_wrapper{position:relative;}

header{position:relative;z-index:10;width:100%;height:100px;background:url("/images/15_crab/common/top_bg.png");position:absolute;top:0;left:0;}
.header_warp{}
header:after{display:block;content:"";clear:both}
header h1{position:absolute;top:20px;left:10px;font-size:18px;}
header h1 *{vertical-align:middle;}
header h1 a{color:#fff;}
header h1 img{display:block;width:120px;}
header .sitemap{display:none}

nav{}
nav>ul{display:none; position:absolute;top:100px;left:0;background:url("/images/15_crab/common/navi_bg.png");width:100%;border-top:1px solid #d7d7d7;}
nav>ul li div{display:none;}
nav>ul.on{display:block;}
nav>ul li{width:100%; text-align:center; line-height:2em;border-bottom:1px solid #717477;}
nav>ul li a{color:#fff;padding:10px 0;display:block;}
nav>ul li.on>a{color:#fff799;}
nav ul li>a:hover, nav ul li>a:focus{color:#fff799;text-decoration:underline;}
nav>ul li.on div{display:block;}
nav>ul li.on div>a{}
nav ul li.on div ul{display:block;background:#fff; position:static;}
nav ul li.on div ul li{border-top:1px dashed #d7d7d7;border-bottom:none;}
nav ul li.on div ul li:first-child{border-top:none;}
nav ul li.on div ul li:hover, nav ul li.on div ul li:focus{background:#e8e8e8;}
nav ul li.on div ul li a{color:#000;font-size:13px;padding:6px 0}
nav ul li.on div ul li a:hover, nav ul li.on div ul li a:focus{color:#de0b33;}


header nav button{background:url("/images/15_crab/common/common_btn.jpg") no-repeat;width:50px;height:0;overflow:hidden;position:absolute;}
header nav button.nav_open{top:27px;right:10px;padding:50px 0 0 0}
header nav button.nav_close{background-position:-50px 0;top:27px;right:10px;padding:50px 0 0 0}

footer{background:#4a4a4a;}
footer .f_con h2{display:none;}
footer .f_con>div{padding:20px 15px;font-size:14px}
footer .f_link{overflow:hidden;margin:0 0 15px 0}
footer .f_link li{float:left;padding:0 0 0 20px;margin:0 0 5px 0;background:url("/images/15_crab/common/fng_blit.gif") no-repeat 8px center}
footer .f_link li:first-child{padding:0;background:none;}
footer .f_link li a{color:#fff}
footer .f_link li strong{color:#d66112;font-weight:400}
footer address{font-style:normal;padding:0 20px 0 0}
footer .addre{color:#acacac;line-height:1.5em} 
footer .addre span{width:0;height:0;padding:0 20px 0 0;overflow:hidden;display:inline-block;}
footer .addre a{color:#acacac;}
footer .copy{color:#acacac;line-height:1.5em}
footer .gotop{position:fixed;right:0;bottom:100px}
footer .gotop{display:block;background:url("/images/15_crab/common/common_btn.jpg") no-repeat -100px 0;width:50px;height:0;padding:50px 0 0 0;overflow:hidden}


/* sub_layout */
#s_wrapper{background:url("/upload_data/board_data/BBS_0000130/170805875108759.jpg") no-repeat center top;}

.s_contents{padding:120px 15px 60px 15px;}
.sub_title{width:100%; text-align:center;margin:0 0 30px 0;}
.sub_title h2 img{width:100%;}
.s_left{display:none;float:left;width:250px;margin:0 50px 50px 0}
.s_left h2{background:url("/upload_data/board_data/BBS_0000130/173871678784858.gif") no-repeat;height:100px;padding:70px 0 0 0;color:#fff;text-align:center}
.s_left li a{display:block}
.s_left>ul>li{margin:3px 0 0 0;background:#f3f3f3;border:1px solid #d7d7d7}
.s_left>ul>li>a{background:url("/images/15_crab/common/lnb_list.png") no-repeat 220px 20px #fff;color:#363636;font-size:16px;font-weight:600;padding:15px 35px 0 20px;height:33px}
.s_left>ul>li.on>a{background:url("/images/15_crab/common/lnb_list_on.png") no-repeat 220px 20px #f7941d;color:#fff}
.s_left>ul>li>ul{display:none;margin:20px}
.s_left>ul>li.on>ul{display:block}
.s_left li li{margin:8px 0 0 0;line-height:1.25em;font-size:14px}
.s_left li li:first-child{margin:0}
.s_left li li a{background:url("/images/15_crab/common/lnb_icon1.png") no-repeat 0 5px;padding:0 0 0 10px;color:#363636}
.s_left li li.on a{color:#5e9c0a;font-weight:600}
.s_left li li ul{margin:5px 0 10px 0}
.s_left li li li{margin:0 0 1px 0 !important}
.s_left li li li a{background:#fff;display:block;padding:5px 10px;font-weight:400 !important;color:#363636 !important}
.s_left li li li.on a{font-weight:600 !important;color:#000 !important}
.s_left .call_info{display:none;}
.sban01, .sban02, .sban03, sban04{display:none;}

.s_right .s_tit{padding:20px;margin:0 0 50px 0;position:relative;background:url("/images/15_crab/common/sub_tit_mbg.png");}
.s_right .s_tit h3{color:#000;font-size:30px;margin:0 0 10px 0}
.s_right .s_tit .local{background:url("/images/15_crab/common/local_icon.gif") no-repeat 0 3px;padding:0 0 0 20px;margin:0 0 10px 0;color:#636363;line-height:1.5em}
.s_right .s_tit .local span{color:#c1c1c1;font-size:5px;padding:0 10px}
.s_right .s_tit .local em{font-style:normal;color:#5c980a}
.s_right .s_tit>ul{position:relative;display:none;}
.s_right .s_tit>ul:after{content:"";display:block;clear:both}
.s_right .s_tit>ul>li{float:left;margin:0 5px 0 0}
.s_right .s_tit li>button{background:url("/images/15_crab/common/scon_icon.png") no-repeat;width:40px;height:0;padding:40px 0 0 0;overflow:hidden}
.s_right .s_tit .print>button{background-position:0 0}
.s_right .s_tit .sharing>button{background-position:0 -40px}
.s_right .s_tit .qrmark>button{background-position:0 -80px}
.s_right .s_tit .sharing div{display:none;position:absolute;top:40px;left:45px}
.s_right .s_tit .sharing div.on{display:block}
.s_right .s_tit .sharing li a{display:block;background:url("/images/15_crab/common/scon_icon.png") no-repeat;width:40px;height:0;padding:40px 0 0 0;overflow:hidden}
.s_right .s_tit .sharing li.face a{background-position:0 -120px}
.s_right .s_tit .sharing li.twi a{background-position:0 -160px}
.s_right .s_tit .sharing div button{background:url("/images/15_crab/common/common_btn.png") no-repeat -105px -5px;border-radius:100%;width:40px;height:0;padding:40px 0 0 0;overflow:hidden}
.s_right .s_tit .qrmark div{display:none;position:absolute;top:40px;left:0;border:1px solid #2d3ca3;background:#fff;text-align:center}
.s_right .s_tit .qrmark div.on{display:block}
.s_right .s_tit .qrmark div img{width:100px;margin:10px}
.s_right .s_tit .qrmark div button{background:#2d3ca3;width:100%;display:block;color:#fff;padding:6px 0}



.s_right .scon_bottom{border:1px solid #e2e2e2;margin:60px 0 0 0;line-height:1.25em}
.s_right .scon_bottom>div{padding:15px}
.s_right .manager{background:#f8f8f8;border-bottom:1px solid #e2e2e2}
.s_right .manager li{background:url("/images/15_crab/common/mng_icon.gif") no-repeat 0 6px;padding:0 0 0 8px;margin:5px 0 0 0;color:#555}
.s_right .manager li:first-child{margin:0}
.s_right .manager li strong{color:#000;margin:0 5px 0 0}
.s_right .research{}
.s_right .research .tit{color:#000;margin:0 0 10px 0}
.s_right .research ul{overflow:hidden}
.s_right .research li{float:left;width:100%}
.s_right .research li:first-child{margin:0 0 10px 0}
.s_right .research li *{vertical-align:middle}
.s_right .research li label{margin:0 20px 0 0}
.s_right .research li .sch_txt{border:1px solid #e1e1e1;width:65%;height:30px;box-sizing:border-box}
.s_right .research li .rsch_btn{background:#757575;color:#fff;width:35%;height:30px}


@media all and (min-width:420px) {
.sub_title{margin:0;}
.sub_title h2 img{width:400px;}
}

/* Tablet */
@media all and (min-width:768px) {

header nav button{display:none;}

nav{}
nav button{display:none;}
nav>ul{width:75%;display:block;background:none;top:25px;right:0;left:auto;border-top:none;}
nav>ul li{float:left;width:20%;border-bottom:none;background:url("/images/15_crab/common/navi_blit.gif") no-repeat right 20px;}
nav>ul li:last-child{background:none;}
nav>ul li>a{padding:15px 0;font-size:18px;}
nav ul li.on div{position:relative;padding:50px 0 0 0;background:url("/images/15_crab/common/navi_on.png") no-repeat center top}
nav ul li.on div ul{display:block;position:absolute;top:16px;left:-25%;width:150%;border-top:4px solid #ed244a;border-radius:20px;}
nav ul li.on div ul li{float:left;width:100%;background:none;border-radius:20px;}
nav ul li.on div ul li a{padding:10px 0;font-size:14px;}
nav ul li.on div ul ul{display:none;}

footer address{display:inline}

.s_contents{}
.s_right .s_tit h3{}
.s_right .s_tit>ul{position:absolute;top:40px;right:20px;display:block;}
.s_right .s_tit>ul>li{margin:0 0 0 5px}
.s_right .s_tit .sharing div{left:50px}
.s_right .s_tit .qrmark div{right:0}

.s_right .scon_bottom>div{padding:15px 20px}
.s_right .manager ul{overflow:hidden}
.s_right .manager li{float:left;margin:0 30px 0 0 !important}
.s_right .research li .sch_txt{width:80%}
.s_right .research li .rsch_btn{width:20%}
}


/* Desktop */
@media all and (min-width:1023px) {
#skip{top:0;right:50px;overflow:hidden;position:absolute;width:100%;height:25px;text-align:center;z-index:2000;}
#skip li a{display:block;left:-1000px;top:0;position:absolute; width:500px; text-align:center;z-index:0;height:20px;padding-top:5px}
#skip li a:hover, #skip li a:focus, #skip li a:active {background:#4578bb; padding:0; position:absolute; top:0px; left:40%;z-index:100; color:#fff;height:20px;padding-top:5px}

header{}
header h1{left:50px;font-size:22px;}
header h1 img{display:inline-block;width:auto;margin:0 10px 0 0;}
header .sitemap{display:block;position:absolute;top:27px;right:50px;}
header .sitemap a{display:block;padding:50px 0 0 0;background:url("/images/15_crab/common/common_btn.jpg") no-repeat;width:50px;height:0;overflow:hidden;}

nav>ul{width:43%;right:120px;}

footer{}
footer .f_con{width:1200px;margin:0 auto;overflow:hidden;}
footer .f_con h2{display:block;float:left;padding:60px 80px 0 130px;}
footer .f_con>div{padding:60px 0;font-size:14px;float:left;}

.s_contents{width:1200px;padding:230px 0 0 0;margin:0 auto; position:relative;}
.s_contents:after{content:"";display:block;clear:both}
.sub_title{ position:absolute;top:150px;right:0;}
.sub_title h2 img{width:auto;}
.s_left{display:block}
.s_left>ul{margin:20px 0;}
.s_left .call_info{display:block;margin:10px 0 0 0;}
.s_right{float:left;width:900px;margin:100px 0 50px 0;}
.s_right .s_tit{height:99px;padding:70px 0 0 0;margin:60px 0 40px 0;border-bottom:1px solid #d4d4d4;background:none;}
.s_right .s_tit h3{font-size:40px;}
.s_right .s_tit>ul{top:70px;}
.s_right .research ul{overflow:hidden}
.s_right .research li{width:50%;float:left}
.s_right .research li:first-child{margin: 5px 0 0 0;}

.sban01, .sban02, .sban03, .sban04{display:block;background:#f7f7f7;border:1px solid #e4e4e4;margin:5px 0;height:80px;}
.sban01 a{display:block;color:#000;font-size:17px;background:url("/images/15_crab/common/sub_ban01.png") no-repeat 30px center;padding:32px 0 29px 100px;width:150px;}
.sban02 a{display:block;color:#000;font-size:17px;background:url("/images/15_crab/common/sub_ban02.png") no-repeat 30px center;padding:32px 0 29px 100px;width:150px;}
.sban03 a{display:block;color:#000;font-size:17px;background:url("/images/15_crab/common/sub_ban03.png") no-repeat 30px center;padding:32px 0 29px 100px;width:150px;}
.sban04 a{display:block;color:#000;font-size:17px;background:url("/images/15_crab/common/sub_ban04.png") no-repeat 30px center;padding:32px 0 29px 100px;width:150px;}

}

@media all and (min-width:1400px) {
nav>ul{width:800px;right:120px;}
nav>ul li>a{padding:15px 0;font-size:20px;}
}     

.top_sns{position:absolute;top: 40px;right: 70px;text-align:center;z-index:1000;}
.top_sns button{background: none; font-weight: 600; margin: 0;color: #fff; font-size:16px;padding: 5px 5px 6px 0; display: block;width:100%;}
.top_sns button span {font-size: 0;}
.top_sns button span::after {content: ''; display: inline-block; background: url("/images/hydrogen/common/common_ico.png")no-repeat center -0.9%; width: 25px; height: 15px; margin-left: 5px;}
.top_sns .sns_list{display:none;}
.top_sns .sns_list.on{display:block;}
.top_sns .sns_list ul{background:#ed244a;border-radius:5px;padding:4px 0;}
.top_sns .sns_list li{padding:2px 10px;border-top:solid 1px rgba(255,255,255,0.4)}
.top_sns .sns_list li:first-child{border:none;}
.top_sns .sns_list li a{display:block;padding:4px 0;color:#fff;}

@media all and (min-width:768px) {
.top_sns{right:20px;}
}

@media all and (min-width:1024px) {
.top_sns{right:110px;}
.top_sns .sns_list li a:hover,
.top_sns .sns_list li a:focus{text-decoration:underline}
}