@charset "UTF-8";


/* css common 
---------------------------------------------------------- */
#wrapper {
	min-height:100%;
	margin:0px auto;
	position:relative;
}

#h_box, #footer_box, #copy_right p, #main_img, #main, .box, #topicPath ul{
	width: 1000px;
	min-width: 1000px;
	margin: 0 auto;
}

/* header 
---------------------------------------------------------- */
#header{
	background: #FFF;
	z-index: 10;
	-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
}
#header.header_js{
	position: fixed;
	width: 100%;
}

#h_left {
	width: 20%;
	float: left;
	padding-top: 10px;
}
#h_right {
	float: right;
	width: 80%;
	text-align: right;
	padding: 30px 0;
}

/* mainnav 
---------------------------------------------------------- */
#h_right ul {
	float:right;
}
.topmenu_h li{
	float:left;
	border-right: 1px solid #ccc;
	padding: 7px 30px;
	position:relative;
}
.topmenu_h li a{
	display: block;
	text-decoration:none;
	color: #000;
	font-size: 14px;
}
.topmenu_h.tel_h li{
	border-right: none;
	margin-top: -3px;
}
.lau_h li{
	padding: 4px 30px;
	border: none;
	padding-right:0;
}
.lau_h li a{
	float:left;
}
.lau_h img{
	width: 30px;
}
.topmenu_h.lau_h li a:first-child{
	margin-right: 10px;
}


/* level2 */
#mainnav .topmenu ul{
	width: 180px;
	display:none;
	background: rgba(10,80,160,0.7);
	position:absolute;
	z-index:9999;
	margin-top: 6px;
}
#mainnav .topmenu li li{
	border-left: none;
	float: none;
	border: none;
	box-sizing: border-box;
	text-align:left;
	padding: 0 15px;
}
#mainnav .topmenu li li a{
	padding: 10px 0px;	
	display: block;
	color: #FFF;
	text-decoration: none;
}




/* main 
---------------------------------------------------------- */
#main{
	margin-bottom: 80px;
	display: block;
}



/* pagetop 
---------------------------------------------------------- */
#scrollUp {
	width: 70px;
	height: 70px;
  bottom: 15%;
  right: 5%;
	background:url(common/images/common/pagetop.jpg) no-repeat right bottom;
	background-size: contain;
}


/* footer 
---------------------------------------------------------- */
#footer_contact{
	padding: 38px 0;
	background: url(common/images/common/bg_contact.jpg) no-repeat center top;
	background-size: cover;
	color: #fff;
}
#footer_contact .title_sub_top{
	color: #fff;
	background-image:url(common/images/common/title_wh.jpg);
}
#footer_contact .title_contact{
	color: #fff;
	border-bottom: 1px solid #fff;
	padding-bottom: 10px;
	margin-bottom: 10px;
	font-weight: 700;
	font-size: 125%;
	margin-bottom: 20px;
}
#footer_contact .col table{
	width: 100%;
}
#footer_contact .col li{
	display: inline-block;
	padding: 0 27px;
	border-left: 1px solid #fff;
}
#footer_contact .col li:first-child{
	padding-left: 0;
	border-left: none;
}
#footer_contact .col li img{
	width: 40px;
}
#footer_contact .col a{
	color: #fff;
}

/* --- copy_right --- */
#copy_right{
	background: #0a50a0;
	padding: 25px 0;
}
#copy_right .box{ overflow: hidden; }
#copy_right .footer_l{
	float:left;
	padding-top: 20px;
	width: 200px;
}
#copy_right .footer_c{
	float:left;
	width: 200px;
	padding: 25px 0 0 30px;
}
#copy_right .footer_c p{
	font-size: 11px;
	color: #fff;
}
#copy_right .footer_r{
	float:right;
	padding-right:15px;
}
#copy_right .footer_r img{
	width: 120px;
}

/* margin style
---------------------------------------------------------- */
.section {
	margin-bottom:60px;
}
.container {
	margin-bottom:50px;
}
.case {
	margin-bottom:30px;
}
.pack {
	margin-bottom:20px;
}
.item {
	margin-bottom:15px;
}
.mb_clear{ margin-bottom: 0; }

.section .container:last-child,
.container .case:last-child,
.case .pack:last-child,
.pack .item:last-child {
	margin-bottom:0px;
}
.pd_box{
	padding: 80px 0;
}


/* text-align style
---------------------------------------------------------- */
.txt_l{
	text-align:left !important;
}
.txt_c{
	text-align:center !important;
}
.txt_r{
	text-align:right !important;
}
.txt_b{
	font-weight:bold;
}

/* p section 
---------------------------------------------------------- */
main p {
	margin-bottom:20px;
}
main * p:last-child {
	margin-bottom:0px;
}


/* tb_style 
---------------------------------------------------------- */
.tb_style{
	width:100%;
	table-layout: auto;
	border-collapse: collapse;
}
.tb_style td,
.tb_style th{
	padding: 15px;
	border-bottom: 1px solid #ccc;
	box-sizing: border-box;
}
.tb_style th{
	background:#0A50A0;
	font-weight: bold;
	text-align: left;
	color: #fff;
}

.tb_normall{
	width:100%;
	table-layout: auto;
	border-collapse: collapse;
}
.tb_normall td,
.tb_normall th{
	box-sizing: border-box;
	text-align: left;
}

/* form
---------------------------------------------------------- */
.tb_form{
	width:100%;
	table-layout: auto;
	border-collapse: collapse;
}
.tb_form td,
.tb_form th{
	padding: 20px;
	box-sizing: border-box;
}
.tb_form th{
	font-weight: bold;
	text-align: left;
	vertical-align: top;
	width:20%;
}
.tb_form th span{ color: #F00; font-size: 80%; padding-left: 5px;}
.form select,
.form input[type="text"],
.form input[type="email"],
.form textarea{
	padding: 10px;
	width:80%;
	box-sizing:border-box;
	border: 1px solid #ccc;
	background: #eee;
}
.form input[type="text"],
.form textarea{
	-webkit-appearance: none;
	border-radius: 0;
}
.form input[type="radio"]{
	vertical-align: top;
	margin-top: 6px;
}
.form #postalcode{
	width:50%;
}
.form input[type="submit"] {
	width: 200px;
	background: #0A50A0;
	color: #FFF;
	padding:10px 20px;
	-webkit-appearance: none;
   border-radius: 0;
	 border: none;
	 cursor: pointer;
	 font-size: 100%;
	 font-weight: 600;
}
.form input[type="button"] {
	width: 150px;
	background: #CFCFCF;
	color: #000;
	padding:10px 20px;
	-webkit-appearance: none;
   border-radius: 0;
	 border: none;
	 cursor: pointer;
	 font-size: 100%;
	 font-weight: 600;
	 margin-left:10px;
}
.wpcf7-not-valid-tip{
	font-size: 80%;
	color: #F00;
}
.wpcf7-mail-sent-ok{
	text-align: center;
	background: #E8F9EE;
	padding: 10px;
	color: #307146;
	font-weight: bold;
}
.screen-reader-response{ display: none; }

.wpcf7-validation-errors{
	text-align: center;
	background: #F8EDDC;
	padding: 10px;
	color: #948671;
	font-weight: bold;
}


/* main_img_wrap
---------------------------------------------------------- */
#main_img_wrap {
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	height: 300px;
	background: url(common/images/company/bg_main.jpg) no-repeat center top fixed;
}
#main_img_wrap.main_flow {
	background-image: url(common/images/flow/bg_main.jpg);
}
#main_img_wrap.main_network {
	background-image: url(common/images/network/bg_main.jpg);
}
#main_img_wrap.main_news {
	background-image: url(common/images/news/bg_main.jpg);
}
#main_img_wrap.main_contact {
	background-image: url(common/images/contact/bg_main.jpg);
}
#main_img_wrap.main_product {
	background-image: url(common/images/product/bg_main.jpg);
}
/* title style 
---------------------------------------------------------- */
.title_main{
	padding-top: 110px;
	text-align:center;
}
.title_main span{
	font-size: 150%;
	font-weight: 500;
	display: inline-block;
	color: #fff;
	padding-bottom: 15px;
	background: url(common/images/common/title_wh.jpg) no-repeat center bottom;
}
.title_sub { 
	margin-bottom: 40px;
}
.title_sub span{
	font-size: 150%;
	padding-bottom: 10px;
	display: block;
	background: url(common/images/common/title_sub.jpg) no-repeat left bottom;
}
.title_sub span.txt_c{
	background-position: center bottom;
}
.title_sec {
	margin-bottom: 30px;
	border-bottom: 2px solid #ccc;
	
}
.title_sec span{
	font-size: 150%;
	display: inline-block;
	border-bottom: 2px solid #0a50a0;
	margin-bottom: -2px;
	padding-bottom: 10px;
}
.title_item {
	font-size: 130%;
	background: url(common/images/common/title_item.jpg) no-repeat left 9px;
	padding-left: 30px;
	margin-bottom: 15px;
}
.title_page{
	font-size: 130%;
	font-weight:bold;
	display:block;
	margin-bottom:5px;
	color: #0A50A0;
}



/*title_index_page*/
.title_sub_top {
	font-size: 225%;
	font-weight: 500;
	margin-bottom: 40px;
	text-align:center;
	padding-bottom: 10px;
	background: url(common/images/common/title_sub.jpg) no-repeat center bottom;
}
.title_pro{
	margin-bottom: 50px;
}
.title_pro span{
	font-size: 225%;
	font-weight: 700;
	display: inline-block;
	color: #fff;
	padding-bottom: 20px;
	background: url(common/images/common/title_wh.jpg) no-repeat 10px bottom;
}
.title_pro span.bg_r{
	background-position: 90% bottom;
}





.txt_sm{
	font-size:80%;
}
.txt_red{
	color:#F00;
}
.bg_white{
	background:#FFF;
	padding: 20px;
}
.line_box{
	padding: 40px;
	border:#ddd solid 1px;
}
.hightlight{
	padding: 50px;
	background: #efefef;
}



/* topicPath 
---------------------------------------------------------- */
#topicPath {
	clear:both;
	display: block;
	padding: 10px 0 30px 0;
}
#topicPath li {
	display:inline;
	font-size: 70%;
}
#topicPath li a {
	padding-right:13px;
	margin-right: 5px;
	background:url(common/images/common/arrow03.png) no-repeat right center;
	background-size: 5px;
	text-decoration:underline;
}
#topicPath li a:hover {
	text-decoration:none;
}

/* control_area 
---------------------------------------------------------- */
.control_area{
	text-align:center;
}
.control_area .btn_left{
	float:left;
}
.control_area .btn_right{
	float:right;
}
.control_area .btn_center{
	display:inline-block;
}
.control_txt a{
	color: #FFF;
	font-size: 80%;
	display: block;
	padding:5px 20px;
	border-radius:3px;	
	background: #00A2D9;
	margin-bottom:15px;
	text-decoration: none;
}
.control_txt a:hover{	background: #FFF; color: #00A2D9; }

/* container 
---------------------------------------------------------- */
.container {

}
.container .msg {
	width: 56%;
	word-break: break-all;
}
.container .img {
	width: 40%;
}
.pic_l .img, .pic_r .msg {
	float: left;
}
.pic_l .msg, .pic_r .img {
	float: right;
}

.flow_picl .img{ float:left; margin-right: 15px; margin-bottom: 5px;}
.flow_picr .img{ float:right; margin-left: 15px; margin-bottom: 5px;}


/* switch pc sp 
---------------------------------------------------------- */
.sp{ display: none; }
.pc{ display:block; }


/* list_dot 
---------------------------------------------------------- */
.list_dot{
	list-style:disc;
	margin-left: 17px;
}
.list_dot li{ margin-bottom: 5px; }

/* list_num 
---------------------------------------------------------- */
.list_num{
	list-style:decimal;
	margin-left: 17px;
}
.list_num li{ margin-bottom: 5px; }


/* list_notestar
---------------------------------------------------------- */
.list_notestar li{
	text-indent:-16px;
	margin-left:16px;
}



/* page_index 
---------------------------------------------------------- */
/*main_slide_wrap*/
#main_slide_wrap {
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	height: 100vh;
}
#main_slide_wrap .pc img {
	max-width: 100%;
	height: 100vh;
}
#logo{
	position: absolute;
	width: 100%;
	left: 0;
	top: 47%;
	z-index: 5;
	text-align: center;
}
#logo img{
	width: 330px;
}


/*products*/
.page_index #products p{
	line-height: 2.2;
}
.page_index #products.pd_box{
	padding-bottom: 0;
}
.page_index #products .container{
	margin-bottom: 80px;
}
.page_index #products .products_box .col{
	float:left;
	width:50%;
	position: relative;
}
.page_index #products .products_box .col p{
	color: #fff;
}
.page_index #products .products_box .col a{
	border: 1px solid #fff;
	padding: 5px 25px 5px 45px;
	display: inline-block;
}
.page_index #products .products_box .col a span{
	color: #fff;
	padding-right: 20px;
	background: url(common/images/common/arrow02.png) no-repeat right center;
	background-size: 6px auto;
}
.page_index #products .products_box .ver_out{
	display: table;	
	width: 100%;
	height: 100%;
}
.page_index #products .products_box .ver_in{
	display: table-cell;	
	width: 100%;
	height: 100%;
	vertical-align: middle;
	padding: 100px 60px;
	box-sizing: border-box;
}
.page_index #products .products_box .col:nth-child(1){
	background: url(common/images/index/img_manstop01.jpg) no-repeat center;
	background-size: cover;
}
.page_index #products .products_box .col:nth-child(2){
	background: url(common/images/index/img_manstop02.jpg) no-repeat center;
	background-size: cover;
	float:right !important;
}
.page_index #products .products_box .col:nth-child(5){
	background: url(common/images/index/img_manbottom01.jpg) no-repeat center;
	background-size: cover;
	text-align:right;
}
.page_index #products .products_box .col:nth-child(4){
	background: url(common/images/index/img_manbottom02.jpg) no-repeat center;
	background-size: cover;
	float:right !important;
}
.page_index #products .products_box .col:nth-child(7){
	background: url(common/images/index/img_ladystop01.jpg) no-repeat center;
	background-size: cover;
}
.page_index #products .products_box .col:nth-child(8){
	background: url(common/images/index/img_ladystop02.jpg) no-repeat center;
	background-size: cover;
	float:right !important;
}
.page_index #products .products_box .col:nth-child(10){
	background: url(common/images/index/img_ladybottom02.jpg) no-repeat center;
	background-size: cover;
	float:right !important;
}
.page_index #products .products_box .col:nth-child(11){
	background: url(common/images/index/img_ladybottom01.jpg) no-repeat center;
	background-size: cover;
	text-align:right;
}

/*news*/
#news{
	margin-bottom: 200px;
}
#news ul{
	height: 250px;
	overflow: auto;
	padding-right: 30px;
}
#news li{
	padding: 30px 0;
	border-top: 1px solid #ccc;
}
#news li:first-child{
	padding-top:0;
	border-top: none;
}
#news li a{
	color: #000;
	display: block;
}
#news li .date{
	float:left;
	display: block;
	width: 100px;
	color: #0a50a0;
	margin-right: 30px;
}
#news li .detail{
	float:right;
	display: block;
	width: 700px;
}
#news li .detail_img{
	float:right;
	display: block;
	width: 520px;
}
#news li .detail_img_box{
	float:right;
	display: block;
	width: 150px;
	margin-left: 30px;
}

/* page_company 
---------------------------------------------------------- */
.page_company #history .title_page{
	width: 70px;
	height: 70px;
	line-height: 70px;
	text-align: center;
	background-color: #0A50A0;
	display: inline-block;
	color: #FFF;
	border-radius: 300px;
	font-size: 110%;
	position: relative;
	right: -75px;
	margin-bottom: 15px;
	border: none;
	padding-bottom: 0;
}
.page_company #history .history_col2{
	background:url(common/images/common/bg_line_blue.jpg) repeat-y center top;
	padding: 15px 0;
}
.page_company #history .txt_r{
	padding-right: 30px;
}
.page_company #history .txt_l{
	padding-left: 30px;
}
.page_company #history .txt_l .title_page{
	right: auto;
	left: -75px;
}
.page_company #history p{
	border-bottom: 2px solid #ddd;
	padding-bottom: 15px;
}
/* page_flow
---------------------------------------------------------- */
.page_flow .title_flow{
	margin-bottom: 10px;
}
.page_flow .title_flow span{
	display: inline-block;
}
.page_flow .title_flow .title_page{
	top: -15px;
	position:relative;
	display: inline-block;
}
.page_flow .step_sty{
	display: inline-block;
	line-height: 1;
	text-align:center;
	margin-right: 15px;
	font-weight: 600;
	color: #ccc;
	background: #0A50A0;
	padding: 15px 20px;
	font-size: 100%;
	border-radius: 44px;
	border: 3px solid #ccc;
}
.page_flow .step_sty em{
	display:block;
	color: #fff;
	font-weight: 700;
	font-size: 220%;
	line-height: 1;
}
.page_flow .auto_col3{
	padding-left: 100px;
	box-sizing: border-box;
}
.page_flow .bg_line{
	background:url(common/images/common/bg_line_gray.jpg) repeat-y 43px top;
}
.page_flow .col img{
	margin-bottom: 15px;
}
.page_flow .col .txt_b{
	margin-bottom: 5px !important;
}

/* page_network
---------------------------------------------------------- */
.page_network li { 
	overflow: hidden;
	font-size: 95%;
	margin-bottom: 5px;
}
.page_network li span{
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	border-radius: 200px;
	background-color: #216FB7;
	color: #fff;
	margin-right: 10px;
	float:left;
	display: inline-block;
}
.page_network li em{ 
	font-style:normal;
	display: block;
	text-indent: -0px;
	padding-left: 35px;
}
.page_network .ch_color li span{
	background-color: #20478C;
}
.page_network .th_color li span{
	background-color: #5B8DB0;
}
.page_network .vt_color li span{
	background-color: #162542;
}
.page_network li a{
	color: #000;
}

/* page_news
---------------------------------------------------------- */
.page_news #news ul{
	height: 400px;
}

/* page_news_detail
---------------------------------------------------------- */
.page_news_detail .title_news{
	padding-bottom: 10px;
	border-bottom: 2px solid #ddd;
}
.page_news_detail .title_news h3{ font-weight: bold;}
.page_news_detail .title_news span{
	display: block;
	width: 120px;
	font-size: 80%;
	color: #FFF;
	font-weight: normal;
	margin-bottom: 10px;
	background: #0A50A0;
	text-align:center;
}

/* page_product
---------------------------------------------------------- */
.page_product .auto_col4{
	padding: 0 4%;
}
.bg_gray{
	background: #F1F1F1;
	padding: 4% 0 1px 0;
}
.page_product .auto_col4 img{
	margin-bottom: 15px;
}



.completion_box{ display: none;}
#sendEmail .error{ 
	border-color: #ff0000;
}
#sendEmail label.error{ 
	font-size: 80%;
	color: #ff0000;
	display: block;
	padding-top: 3px;
	border: none;
}



/* 右上のFacebookロゴ配置 */
        #header_fb {
            position: absolute;
            top: 40px;
            right: 40px;
            z-index: 100;
        }

        #header_fb img {
            max-width: 40px; /* アイコンの大きさを調整（お好みで変更してください） */
            width: 100%;
            height: auto;
            transition: opacity 0.3s ease;
            /* 背景が明るい画像でもロゴが見えるように影を付与 */
            filter: drop-shadow(0 0 8px rgba(0,0,0,0.3)); 
        }

        /* マウスを乗せたときに少し薄くするおしゃれ演出 */
        #header_fb a:hover img {
            opacity: 0.7;
        }

        /* モバイル対応（レスポンシブ） */
        @media screen and (max-width: 768px) {
            #header_fb {
                top: 20px;
                right: 20px;
            }
            #header_fb img {
                max-width: 32px; /* スマホでは少し小さく */
            }
        }