@charset "UTF-8";
/* CSS Document */

.s_header{display:none;}
.s_footer{display:none;}
.pc{display:inline-block;}
.sp{display:none;}




@media (max-width: 640px) {

#container{width:100%; position:relative; height:auto;}
#container02{width:100%; position:relative; height:auto;}
#wrapperArea_02{height:auto; position:relative;}
#header{display:none;}
#footer{display:none;}
#main {clear: both; height: auto; margin: 0;  padding:0; width: 100%;}
#sukima {height: 1px; width: 100%;}

#title {background:none; float:none; height: auto; margin: 20px auto; padding: 0; width:96%;}
#title h3{position:relative; width: 100%; overflow:hidden;}
#title span{display:block; border-left:6px solid #666; padding-left:12px; background:#fff;}
#title span.line{display:block; border-top:1px solid #666; width:100%; position:absolute; top:12px; left:40%;}

.s_header{display:block;}
.s_footer{display:block;}
.pc{display:none;}
.sp{display:block;}

#main img {width:100%; height:auto;}
.s_header img {width:100%; height:auto;}
.s_footer img {width:100%; height:auto;}
.totop img {width:100%; height:auto;}
.box{display:none;}
.drop span{background:url(../hxg_img/sp/ICO_vec_left.png) no-repeat center right 2%; display:block; background-size: auto 20px;}
.drop.open span{background:url(../hxg_img/sp/ICO_vec_right.png) no-repeat center right 2%; display:block; background-size: auto 20px;}

.s_header{height:50px; position:relative; border-bottom:#000 1px solid;}
.s_header h1 a{background:none; text-indent:0; height:auto; margin:0; display:inline-block; width:auto;}
.s_header h1{width:80%; position:absolute; top:30%; left:2%; margin:0;}
.s_header p.nav_btn{width:auto; height:auto; position:absolute; top:0; right:2%; margin:0;}
.s_header p.nav_btn img{height:50px; width:auto;}
.s_header nav.dropmenu{display:none; width:100%;position:absolute; top:51px; z-index:10; background:#fff; box-shadow:#cdcdcd 0px 5px 5px; height:auto; padding:0;}
.s_header nav.dropmenu ul{width:100%; margin:0 auto; padding:0;}
.s_header nav.dropmenu ul li{width:100%; margin:0 auto; text-align:center; line-height:50px; border-bottom:#000 1px solid; clear:both; list-style:none;}
.s_header nav.dropmenu ul li.gray{background:#616161; color:#fff;}
.s_header nav.dropmenu .close{line-height:50px; text-align:center; margin:0;}
.s_header nav.dropmenu ul li.child{color:#fff;}
.s_header nav.dropmenu ul li.half{width:50%; float:left; clear: none; border-left:#000 1px solid; box-sizing:border-box;}
.s_header nav img{width:14px !important; margin:-1px 1% 0 0; vertical-align: middle;}
.s_header nav.dropmenu ul li.child span{background:url(../hxg_img/sp/ICO_h_nav_plus.jpg) no-repeat right 2% center; background-size:5%; display:block;}
.s_header nav.dropmenu ul li.child.open span{background:url(../hxg_img/sp/ICO_h_nav_minas.jpg) no-repeat right 2% center; background-size:5%;}
.s_header nav ul.child_nav{display:none;}
.s_header nav ul.child_nav li{background:#fff;}
.s_header nav a{color:#000;}

.s_footer{background:#f9f8f5; padding:20px 0; font-size:12px; font-weight:normal; text-align:center; clear:both;}
.s_footer table{width:100%; border-bottom:#999 1px solid; padding-bottom:20px;}
.s_footer table th{width:33%;}
.s_footer table th a{display:block; font-size:10px; font-weight:normal; color:#000; text-align:center;}
.s_footer table th.second{border-left:#000 solid 1px; border-right:#000 solid 1px;}
.s_footer h1 img{width:120px; margin:10px auto;}
.s_footer p img{width:60px; height:auto; margin:0 auto;}

.s_nav{clear:both;}
.s_nav ul{width:96%; margin:0 auto; padding:0;}
.s_nav ul li{background:#eaeaea; border:#cdcdcd 1px solid; border-radius:5px; list-style:none; float:left; width:49%; line-height:40px; margin-bottom:2%; box-sizing:border-box;}
.s_nav ul li:nth-child(odd){margin-right:2%;}
.s_nav ul li a{display:block; background:url(../hxg_img/sp/ICO_vec_right.png) no-repeat center right 10px; background-size:auto 20px;  font-family: "ＭＳ Ｐ明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",serif; color:#333; text-align:left; text-indent:30px; font-weight:normal; text-shadow:1px 1px #fff;}

.totop{position:fixed; bottom:20px; right:2%; width:50px;}


/***********************************

ホーム　*******************************/

#topkeyvisi{display:none;}
#mainContent { float: none; margin: 0; width:100%;}
#sideContent {background:#fff; float: none;  margin: 0 auto; padding: 0; width: 100%; clear:both; padding:20px 0;}
#sideContent p a{border:#dbdbdb solid 1px; display:block; box-sizing:border-box; width:96%; margin:0 auto;}
#sideContent .twitter{display:none;}
#sideContent .alsok{display:none;}
#sideContent .privacy{display:none;}
#nav{display:none;}
#calender{display:none;}
#top_products { float: none; height:auto; width: 96%; margin:0 auto;}
#top_products h3{margin:20px auto;}
#top_products a{width:32%; float:left; margin-right:0;}
#top_products a.second{margin:0 2%;}

#news{float: none; height: auto;
    letter-spacing: 0;
    line-height: 1.4;
    padding: 20px 0 0;
    width: 96%; margin:0 auto;}
#news .nt{display:none;}
#news h3.drop{width:100%; line-height:2; padding:5px 0; background-size:auto 43px; text-indent:5px; background-position:bottom center;}
#news h3.drop span{background:url("../hxg_img/sp/red_vec_left.png") no-repeat scroll right 2% center / auto 20px;}
#news h3.drop.open span{background:url("../hxg_img/sp/red_vec_right.png") no-repeat scroll right 2% center / auto 20px;}
.news_scroll{width: 100%; word-wrap: break-word; }
.news_wrap { float: none; width: 100%;}
.new_day { float:none; width: 100%;}
.new_text { float:none; width: 100%;}

/***********************************

ご挨拶　*******************************/

#mainContent02{width:96%; margin:0 auto; padding:20px 0 50px; float:none;}
#mainContent02 img.prex{width:50%; float:left; height:auto;}
#mainContent02 .name{width:50%; float:right; margin-top:70px;}
#mainContent02 .name h4{border-bottom:#999 solid 1px; width:100%; text-align:right; font-weight:normal; font-size:18px;}
#mainContent02 .name h4 span{display:block; font-size:14px;}
#mainContent02 p.messe{width:100%; margin:0 auto; font-size:14px; line-height:1.8; letter-spacing:0; clear:both;}

/***********************************

経営理念   *******************************/

h3.midtext{text-align:center; margin:20px auto !important; width:100%; float:none;}
.hxgtxt{width:100%; padding-top:6px; background:url(../hxg_img/sp/ICO_t_hexagonmark.jpg) no-repeat top center; background-size:14px auto; clear:both;}
.hxgtxt.hxn{background:none;}
.hxgtxt h4{font-size:20px;text-align:center; margin:20px 0 0;}
.hxgtxt p{font-size:14px;text-align:left; }
.hxgtxt p.center{text-align:center !important;}

/***********************************

会社概要   *******************************/

#cp_left{width:100%; float:none; clear:both; padding: 20px 0;}
#cp_left img{float:left; width:33.333%; height:auto;}
#cp_right {float: none; width: 100%; clear:both; padding: 20px 0;}

.cp_twrap {border-bottom: none; clear: both; float: none; margin: 10px auto 0; width: 96%;}
.cp_t {border-left: none; background:#e9e5e2; float: none; font-size: 14px; height: auto; line-height: 2; padding:2%; text-indent: 0; width: 96%;}
.cp_t2 {float: none; font-size: 14px; padding:2%; line-height: 1.4; width: 96%;}

#cp_access {font-size: 12px; line-height: 20px; margin: 0 auto; padding: 0; width: 96%;}
#cp_access .map {float: none; height: auto; width: 100%;}
#cp_access .map iframe{width:100% !important; height:auto !important;}
#cp_access .img {float: none; line-height: 17px; width: 100%; height:auto;}
#cp_access h4 {border-left: none; float:none; font-size: 16px; line-height: 40px; height:40px; margin: 0 0 0 -2%; padding: 2%; width: 100%; background:url(../hxg_img/sp/BG_titlbar.jpg) repeat; font-family: "ＭＳ Ｐ明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",serif; text-shadow: 1px 1px #fff; color:#333;}

#history {font-size: 12px; line-height: 20px; width: 96%; margin:0 auto; padding:20px 0;}
#history h4 {border-left: none; float:none; font-size: 16px; line-height: 40px; height:40px; margin: 0 0 0 -2%; padding: 2%; width: 100%; background:url(../hxg_img/sp/BG_titlbar.jpg) repeat;}
#history h4 span{font-family: "ＭＳ Ｐ明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",serif; text-shadow: 1px 1px #fff; color:#333;}
table.profile {width: 100%; padding:0; margin:0;}
table.profile tr {border-bottom: none;}
table.profile th {border-bottom: none; display:block; width: 96%; padding: 2%; background:#e9e5e2;}
table.profile td {display:block; width: 96%; padding: 2%;}

/***********************************

商品紹介   *******************************/

.product{margin:0 auto; display:block;}
.product ul{width:100%; clear:both; padding:0;}
.product ul li{float:left; width:50%; list-style:none;}
.product .hxgtxt{margin-top:30px; padding-top:40px;}

/***********************************

スタッフ紹介   *******************************/

.workswrap {clear: both; padding: 0; width:100%; margin:0 auto;}

.workswrap .workstitle {display:none;}
.workswrap .img {display:none;}
.workswrap .works {float: none; letter-spacing: 0; line-height: 30px; padding:10px 0 0; width: 100%; border-top:#333 solid 1px; margin-top:10px;}

.worksp{width:100%; margin-top:30px;}
.worksp h3{font-size: 18px; line-height: 40px; height:40px; width: 100%; margin:0 !important; float:none !important; background:url(../hxg_img/sp/BG_titlbar.jpg) repeat; text-align:center; font-family: "ＭＳ Ｐ明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",serif; text-shadow: 1px 1px #fff; color:#333; letter-spacing:1px;}
.worksp ul{clear:both; width:100%; margin:0; padding:20px 0; display:block;}
.worksp ul li{float:left; list-style:none;}
.worksp ul li:first-child{width:65%;}
.worksp ul li:last-child{width:35%;}
.worksp .red{color:#ff0000; font-size:14px;}
.worksp p{font-size:12px;}

/***********************************

採用情報   *******************************/

#rec_top {float: none; height: auto; margin-top: 0; padding: 0; width:100%;}
#mainContent02 .rec {clear: both; letter-spacing: 0.1em; line-height: 20px; padding-left: 0; width: 100%; margin:0 auto 30px;} /*{display:none;}*/

table.rec th {border:none; padding: 2%; text-align: center; width: 96%; display:block;}
table.rec td {border:none; padding: 2%; text-align: left; width: 96%; display:block;}
#mainContent02 table.rec tr:last-child th{height:auto !important;}

#oubo_butt { float: none; height: auto; margin: 0; padding:0; width:100%; background:url(../hxg_img/sp/BG_gardorange.jpg) repeat; border-radius:10px;}
#oubo_butt span{display:block; text-align:center; color:#fff; line-height:60px; font-weight:bold;}

#mainContent02 .thanks {line-height: 1.4; letter-spacing: 0; padding-left: 0; clear: both;　font-size: 14px; margin:0 0 30px 0;}

/***********************************

お問合せ   *******************************/

#contact {float: none; font-size: 12px; height: auto; letter-spacing: 0.1em; line-height: 32px; margin: 0 auto 50px; padding: 2%; width: 96%;}
#contact ul {clear: both; line-height: 2; margin: 0; padding: 0; width: 100%;}

/***********************************

オレンジ   *******************************/

#orange_main{width:100%; text-align:left;}
#orange_main img{height:auto;}
#ora_aisatsu{width:100%; height:auto;}
#ora_waku{width:100%;}
#ora_waku p{text-align:left; width:96%; margin:0 auto; font-size:12px; -webkit-text-size-adjust: 100%;}

/***********************************

プライバシー   *******************************/

#mainContent03{width:100%; position:relative; height:auto; margin:0; float:none;}
.privacy{width:96%; margin:0 auto;}
.privacy ol li{width:100%; -webkit-text-size-adjust: 100%;}
.privacy ol li ol li{width:100%; -webkit-text-size-adjust: 100%;}
.privacy ul li{width:100%; -webkit-text-size-adjust: 100%;}

/***********************************

サイトマップ   *******************************/

#sitemap{width:100%; margin:0 auto; height:auto; padding:0; float:none;}
#sitemap ul{width:96%; margin:10px auto 30px; padding:0;}

/***********************************

フォーム   *******************************/

#rec_top02 table{display:block; width:100%;}
#rec_top02 table tbody{display:block; width:100%;}
#rec_top02 table tr{width:100%; display:block;}
#rec_top02 table td{width:100%; display:block;}
#rec_top02 table td img{width:135px; margin:0 auto;}

#mp-main {width: 100%;}
#mp-main div.fieldset {padding:0;}

#mp-main dl dt{background:#e0e0e0; text-align:center; line-height:2; margin:10px 0 !important; padding:2% !important; height:auto !important;}
#mp-main div.fieldset dt span.required {background:none; padding-right:0;}
#mp-main dl dd{margin:10px 0 !important; padding:0 !important;}
#mp-main dl dd input{line-height:2; font-size:16px;}
#mp-main .t4{width:98%; margin:0 auto;}
#mp-main .t4 iframe{width:100%; height:auto;}
#mp-main sup{font-size: 10px; line-height:10px; vertical-align: 2px;  padding:3px 5px;}

#mp-main dl dd select#year{width:25%;}
#mp-main dl dd select#month{width:15%;}
#mp-main dl dd select#day{width:15%;}
#mp-main dl dd select#time01{width:30%; display:block !important;}
#mp-main dl dd select#time02{width:30%; display:block !important;}
#mp-main dl dd input#carrer_p{display:inline-block !important; margin:5px 0 !important;}
#mp-main dl dd input#carrer_i{display:inline-block !important; margin:5px 0 !important;}

input[type=text]{width:100%;}
input[type=text], textarea, select {-webkit-appearance: none; }
textarea{width:96%;}
select{line-height:2; width:48%; display:inline-block; margin:5px 0 !important;}

}