@charset "utf-8";

/* Reset
----------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:top;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
img{vertical-align:bottom;}
h1, h2, h3, h4, h5, h6 {font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
strong {font-weight:bold;}
ul {list-style-type:none;}
ol {list-style-type:decimal;}
address, em{font-style:normal;}
a{text-decoration:none;}

/* Yahoo fonts.css 2.7.0
http://developer.yahoo.net/yui/license.txt
- Font size Adjustment.
 http://developer.yahoo.com/yui/examples/fonts/fonts-size_source.html
*/
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}

/* For html5
----------------------------------------------- */
header,footer,nav,article,aside,hgroup,section{display:block;}
small{font-size:inherit;}

/* Frame Layout
----------------------------------------------- */
body{color:#444; background-color:#000163;}
#wrapper{font-size:108%;/* 14px */ width:100%; position:relative;}
#header{width:100%; position:fixed; z-index:100;}
#container{position:relative; background-color:#FFF; padding:90px 0 0;}
.contents{width:960px; padding:100px 0; margin:0 auto;}

.pc{display:block;}
.mobile{display:none;}

/* Common
----------------------------------------------- */
.contents{line-height:1.6;}
.contents p{margin-bottom:1.2em;}

/*Links*/
a:link, a:visited{color:#1A78A8;}
a:hover, a:focus{text-decoration:none;}

a.ablock,
.ablock a{display:block; text-indent:-9999px; outline:0;}

.block{clear:both; margin-bottom:5em;}
.block_line{clear:both; padding-bottom:2.5em; margin-bottom:2.5em; border-bottom:1px solid #DDD;}
.block:after,
.block_line:after{display:block;height:0;visibility:hidden;clear:both;content:'';}

.fl{float:left;}
.fr{float:right;}
.r{text-align:right;}
.c{text-align:center;}

.grid{overflow:hidden;}
.column{float:left;}
.column-r{float:right;}
.column-new{clear:both;}
.grid:after{display:block;height:0;visibility:hidden;clear:both;content:'';}

.boxs > a,
.boxs > li,
.boxs > div,
.boxs > .column{
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
.column3 .column{width:33.3333%;}
.column4 .column{width:25%;}

a.btn{
	display:inline-block;
	padding:0.7em 1.5em;
	-moz-border-radius: 5px;	/* FireFox */
	-webkit-border-radius: 5px;	/* Safari and Chrome */
	border-radius: 5px;			/* Opera 10.5+, IE */
	position:relative; behavior:url(https://justice-jp.net/css/PIE.htc); /* IE */
}
a.btn{
	color:#FFF;
	background-color:#2E91BB;
	/* background-color:#80C6D9; */
}

a.btn:hover{
	background-color:#A2E0FF;
}

ul.disc{padding-left:1em; list-style-type:disc; list-style-position:outside;}

/*
a.arrow,
.arrow a{padding-right:20px; background:url(../images/common/arrow.png) no-repeat right center;}
a.arrow-back,
.arrow-back a{padding-left:20px; background:url(../images/common/arrow-back.png) no-repeat 0 center;}
*/

h1{height:100px; margin-bottom:2em; text-indent:-9999px;}

h2{font-size:123.1%;/* 16px */ margin:2em 0 1em; line-height:1.3;}
h3{font-size:108%;/* 14px */ margin-bottom:0.7em; line-height:1.3;}


.note{color:#666; font-size:93%;/* 12px */}
.hide{text-indent:-9999px;}

#header,
.wrap{
	-moz-box-shadow: 0 1px 3px rgba(13, 4, 9, 0.1);		/* Firefox */
	-webkit-box-shadow: 0 1px 3px rgba(13, 4, 9, 0.1);	/* Safari and Chrome */
	box-shadow: 0 1px 3px rgba(13, 4, 9, 0.1);			/* Opera 10.5+, IE */
	background-color:#FFF; /* IE */
	/* position:relative; */ /* IE */
	behavior:url(https://justice-jp.net/css/PIE.htc); /* IE */
}
.wrap{position:relative;}

ul.nav{margin:0; padding:0; list-style:none; display:flex;}

/* Header
----------------------------------------------- */
#header{height:65px; padding:25px 0 0;/*  border-bottom:1px solid #CCC; */ background-color:#FFF;}
#header .contents{padding:0;}
#header #logo{display:block; float:left; width:112px;}

/* Navi
----------------------------------------------- */
#navi{margin:0 0 0 130px;}
#navi li{float:left; width:18%;}
#navi li.navi1{width:28%;}
#navi li a{height:63px; margin:0 10%; border-bottom:2px solid transparent;}
#navi li.navi1 a{background:url(../images/common/navi1.png) no-repeat center 20px;}
#navi li.navi2 a{background:url(../images/common/navi2.png) no-repeat center 20px;}
#navi li.navi3 a{background:url(../images/common/navi3.png) no-repeat center 20px;}
#navi li.navi4 a{background:url(../images/common/navi4.png) no-repeat center 20px;}
#navi li.navi5 a{background:url(../images/common/navi5.png) no-repeat center 20px;}
#navi li a:hover,
#navi li.current a{border-color:#000163;}


/* Footer
----------------------------------------------- */
#footer .contents{padding:2em 0; color:#FFF;}
#fnav{display:flex; justify-content:space-between; align-items:center; margin-bottom:2em;}
#fnav>a{width:106px; max-width:34%;}
#fnav ul.nav{align-items:center; column-gap:3em;}
#fnav ul.nav li.icon{width:38px;}
#copyright{padding-top:2em; border-top:1px solid white; display:block; text-align:center;}

/* Home
----------------------------------------------- */
#home .contents{padding:0;}
#h1cover{background:url(../images/water.png) no-repeat center 0; background-size:cover;}
#h1cover .contents{height:560px; position:relative;}
#home h1{height:160px; width:100%; background:url(../images/h_main.png) no-repeat; position:absolute; bottom:3em; background-size:contain;}

/* home & infolist */
#home #info_area,
#info_area{padding:60px 0;}
#info_area #list{line-height:1.5em; margin-bottom:2em;}
#info_area #list time{display:inline-block; width:7em;}
#info_area #list > p,
#info_area #info_past > p{margin:-1.5em 0 0.5em 8em;}

#info_past{display:none;}

.info_detail{padding:2em 3em 0 8em; margin:0 0 1em; border-bottom:1px solid #CCC; display:none;}
.info_detail img{margin:1em;}
.info_detail img.fl{margin:0 1.5em 1.5em 0;}
.info_detail img.fr{margin:0 0 1.5em 1.5em;}
.info_detail:after{display:block;height:0;visibility:hidden;clear:both;content:'';}
.info_area_bnr{width:100%;
	position: relative;
	display: inline-block;
	margin:0 0 1em;
	} 
.info_area_bnr2{width:55%;
	position: relative;
	display: inline-block;
	margin:0 0 1em;
	} 

/* .info_area_bnr{padding:20px;
	font-size: 140%;
	position: relative;
	display: inline-block;
	border: 1px solid #444;
	margin:0 0 20px;
	}  */


/* Service
----------------------------------------------- */
#service h1{background:url(../images/common/h1_1.png) no-repeat center 0; background-size:contain;}
#service{background-color:#F4F4F4;}

#service .pos1 section p{margin:0;}
#service .pos1 .pos1-1{margin:0 20px 40px;}
#service .pos1 .pos1-2{margin:0 20px 40px;}
#service .pos1 .pos1-3{display: block; margin-left: auto; margin-right: auto}
#service .pos2 .column{padding:0 1.5em 1.5em;}
#service .pos2 .col1{background:#CBEFFF url(../images/flow1.png) no-repeat;}
#service .pos2 .col2{background:#A2E0FF url(../images/flow2.png) no-repeat;}
#service .pos2 .col3{background:#CBEFFF url(../images/flow3.png) no-repeat;}
#service .pos2 .col4{background:#A2E0FF url(../images/flow4.png) no-repeat;}

#service .pos2 h3{text-align:center; padding:110px 0 0; color:#1A78A8;}
#service .pos2 .col1 h3{background:url(../images/icon_1.png) no-repeat center 45px;}
#service .pos2 .col2 h3{background:url(../images/icon_2.png) no-repeat center 45px;}
#service .pos2 .col3 h3{background:url(../images/icon_3.png) no-repeat center 45px;}
#service .pos2 .col4 h3{background:url(../images/icon_4.png) no-repeat center 45px;}



/* Products
----------------------------------------------- */
#products h1{background:url(../images/common/h1_2.png) no-repeat center 0; background-size:contain;}
#product_list .item{padding:4em 0; border-bottom:1px solid #CCC;}
#product_list .item .media{max-width:400px; width:45%;}
#product_list .item .detail{width:40%;}

#product_list .styleL .media{float:left;}
#product_list .styleL .detail{float:right; padding:5em 5% 0 0;}

#product_list .styleC{text-align:center;}
#product_list .styleC .media{}
#product_list .styleC .detail{}

#product_list .styleR .media{float:right;}
#product_list .styleR .detail{float:left; padding:5em 0 0 5%;}


/* Company
----------------------------------------------- */
#company{background-color:#F4F4F4;}
#company .contents{padding:70px 0 100px;}
#company  h1{background:url(../images/common/h1_3.png) no-repeat center 0; background-size:contain;}
#company .img{margin-bottom:3em;}

#profile{width:70%; margin:0 auto;}
#profile dl{line-height:1.5em;}
#profile dl dt{width:8em;}
#profile dl dd{margin:-1.5em 0 0.7em 0; padding:0 0 0.7em 10em; border-bottom:1px dotted #CCC;}

#map_area{width:100%; height:465px}

/* Group
----------------------------------------------- */
#group h1{background:url(../images/common/h1_4.png) no-repeat center 0; background-size:contain;}

#jh h2{padding:1em 0 0.2em; margin:0;}
#jh strong{display:inline-block; padding:0.2em 1em; line-height:1.3em; font-size:85%; color:#666; /* background-color:#DDD; */ border:1px solid #999; margin-bottom:1.5em;}

.groups_list{margin-bottom:3em;}
.group_title{text-align:center; padding:0.3em 0; color:#666; margin-bottom:1.5em; border-top:1px solid #CCC; border-bottom:1px solid #CCC;}

#group .groups .column,
#group .groups .column-r{width:32%; margin-bottom:1.5em;}
#group .groups .col2{margin:0 2%;}

#group .groups h3{padding:0 1.5em; background-color:#A2E0FF; border-bottom:1px solid #FFF; line-height:3em;}
#group .groups ul{margin:0 1.5em 1.5em;}

#group .groups section{
	overflow:hidden;
	background-color:#CBEFFF;
	-moz-border-radius: 7px;	/* FireFox */
	-webkit-border-radius: 7px;	/* Safari and Chrome */
	border-radius: 7px;			/* Opera 10.5+, IE */
	position:relative; behavior:url(https://justice-jp.net/css/PIE.htc); /* IE */
}

#group .groups .other{width:32%; margin:0 auto;}
#group .groups section.other{background-color:#EEE;}
#group .groups .other h3{background-color:#DDD;}

/* Contact
----------------------------------------------- */
#contact{background-color:#F4F4F4;}
#contact h1{height:50px; background:url(../images/common/h1_5.png) no-repeat center 0; background-size:contain;}

#contact .tel{display:block; font-size:138.5%;/* 18px */ font-weight:bold;}

#contact_area{
	background-color:#FFF;
	width:70%;
	padding:3em;
	margin:0 auto;
	border:1px solid #CCC;
	-moz-border-radius: 5px;	/* FireFox */
	-webkit-border-radius: 5px;	/* Safari and Chrome */
	border-radius: 5px;			/* Opera 10.5+, IE */
	position:relative; behavior:url(https://justice-jp.net/css/PIE.htc); /* IE */
}

.input_area dl{line-height:1.5em;}
.input_area dl dt{width:12em;}
.input_area dl dd{margin:-1.5em 0 1em 0; padding:0 0 1em 13em; border-bottom:1px dotted #CCC; min-height:1.5em;}

.input_area .req{margin:0 0.5em; padding:1px 2px; font-size:smaller; color:red; background-color:#FFF; border:1px solid red;}

.input_area input{width:98%;}
.input_area input[type="submit"]{width:auto;}
.input_area ._firstname,
.input_area ._lastname,
.input_area ._firstkana,
.input_area ._lastkana{display:inline-block; width:45%; position:relative;}
.input_area .conf ._firstname,
.input_area .conf ._lastname,
.input_area .conf ._firstkana,
.input_area .conf ._lastkana{display:inline-block; width:auto; padding-right:1em;}

.input_area ._firstname input,
.input_area ._lastname input,
.input_area ._firstkana input,
.input_area ._lastkana input{width:80%;}

.input_area textarea{width:98%; height:10em; resize:none;}

input[type="submit"],
input[type="button"]{-webkit-appearance: none;}

.input_area .ermsg{color:red;}
.input_area .hint{padding:0 5px; color:#999; position:absolute;}

#comp_msg{padding:2em; margin-bottom:3em; background-color:#CBEFFF; border:1px solid #A2E0FF;}



/* css3-mediaqueries
----------------------------------------------- */
@media screen and (max-width:959px){ /* 基本サイズより小さい */

	/* Frame Layout
	----------------------------------------------- */
	#container{padding:80px 0 0;}
	.contents{width:inherit; padding:70px 0; margin:0 16px;}

	/* Header
	----------------------------------------------- */
	#header{padding:15px 0 0;}
	#header .contents{width:auto;}

}
@media screen and (max-width:889px){ /* Menuが隠れる */

	/* Navi
	----------------------------------------------- */
	#navi li,
	#navi li.navi1{width:20%;}
	#navi li a{margin:0 2%;}
	#navi li.navi1 a{background:url(../images/common/navi1s.png) no-repeat center center;}
	#navi li.navi2 a{background:url(../images/common/navi2s.png) no-repeat center center;}
	#navi li.navi3 a{background:url(../images/common/navi3s.png) no-repeat center center;}
	#navi li.navi4 a{background:url(../images/common/navi4s.png) no-repeat center center;}
	#navi li.navi5 a{background:url(../images/common/navi5s.png) no-repeat center center;}

	/* Products
	----------------------------------------------- */
	#product_list .item .media{width:35%;}
	#product_list .item .detail{width:50%;}

	#product_list .styleL .detail{padding:0 5% 0 0;}
	#product_list .styleR .detail{padding:0 0 0 5%;}


}
@media screen and (max-width:800px){
	/* Service
	----------------------------------------------- */
/*	#service .pos1{background-size:contain; padding-left:55%;}*/

}

@media screen and (max-width:768px){

	.column4 .column{width:50%; border-bottom:1px solid #F4F4F4;}
	h1{height:80px; margin-bottom:1em;}

	/* Home
	----------------------------------------------- */
	#h1cover .contents{height:400px;}
	#home h1{height:130px; bottom:1em;}

	/* Service
	----------------------------------------------- */
/*
	#service .pos2 h3{padding:70px 0 0;}
	#service .pos2 .col1 h3,
	#service .pos2 .col2 h3,
	#service .pos2 .col3 h3,
	#service .pos2 .col4 h3{background-position:center 20px;}
*/

	/* Products
	----------------------------------------------- */
	#product_list .item{padding:2em 0;}
	
	/* Company
	----------------------------------------------- */
	#company .contents{padding:30px 0;}
	#company .img img{width:250px;}
	#profile{width:auto;}
	
	#map_area{height:400px}

	/* Group
	----------------------------------------------- */
	.groups_list{margin-bottom:2em;}
	
	#group .groups .column,
	#group .groups .column-r,
	#group .groups .col2,
	#group .groups .other{width:48%; margin:0 1% 1em;}

	/* Contact
	----------------------------------------------- */
	#contact_area{width:auto; padding:1em;}

}


@media screen and (max-width:620px){

	.pc{display:none;}
	.mobile{display:block;}

	#container{padding:60px 0 0;}
	.contents{padding:30px 0; margin:0 16px;}
	.c{text-align:left;}
	.cc{text-align:center;}
	.column{float:none;}
	.column4 .column{width:auto;}
	h1{height:50px;}

	a.open{float:right; display:inline-block; height:40px; line-height:40px; padding:0 1em; color:#FFF; background-color:#2E91BB;}

	/* Header
	----------------------------------------------- */
	#header{height:auto; padding:10px 0;}
	#header .contents{margin:0;}
	#header #logo{width:80px; padding:0 0 0 16px;}

	/* Navi
	----------------------------------------------- */
	#navi{display:none; margin:0; border-top:1px solid #2E91BB; clear:both;}
	#navi li,
	#navi li.navi1{float:none; width:100%;}
	#navi .ablock a{text-indent:inherit; line-height:44px; height:44px; text-align:left; color:#444; background:none !important; margin:0 !important; padding:0 1em; border-bottom:1px solid #2E91BB;}

	/* Footer
	----------------------------------------------- */
	#fnav{flex-direction:column; gap:1.5em;}
	#fnav ul.nav{column-gap:2em;}

	/* Home
	----------------------------------------------- */
	#h1cover .contents{height:300px;}
	#home h1{height:100px;}

	/* home & infolist */
	#home #info_area,
	#info_area{padding:30px 0;}
	#info_area #list time{display:inline-block; width:auto;}
	#info_area #list > p,
	#info_area #info_past > p{margin:0 0 0.5em 0;}

	.info_detail{padding:2em 0 0 0;}
	.info_detail img{max-width:100px; width:100%; height:auto;}

	/* Service
	----------------------------------------------- */
	#service .pos1{background:none; padding:0;}
	#service .pos1 .pos1-1{margin-bottom:2em;}

	#service .pos2 h3{padding:70px 0 0;}
	#service .pos2 .col1 h3,
	#service .pos2 .col2 h3,
	#service .pos2 .col3 h3,
	#service .pos2 .col4 h3{background-position:center 20px;}

	/* Products
	----------------------------------------------- */
	#product_list .item{padding:2em 0;}
	#product_list .item .media{max-width:none; width:100%; text-align:center;}
	#product_list .item .media img{max-width:200px; width:100%; margin-bottom:1em;}
	#product_list .item .detail{width:100%; padding:0 !important;}

	#product_list .styleC{text-align:left;}
	#product_list .styleC img{max-width:300px; width:100%;}


	/* Company
	----------------------------------------------- */
	#company .contents{padding:30px 0;}
	#company .img{text-align:center; margin-bottom:1em;}
	#company .img img{width:160px;}
	
	#profile{width:auto;}
	#profile dl dt{width:auto; margin-bottom:0.5em; font-weight:bold;}
	#profile dl dd{margin:0 0 0.7em 0; padding:0 0 0.7em 0;}

	#map_area{width:100%; height:300px}

	/* Group
	----------------------------------------------- */
	#jh{text-align:center;}
	#jh p{text-align:left;}

	.groups_list{margin-bottom:1.5em;}
	#group .groups{margin:0;}
	#group .groups .column,
	#group .groups .column-r,
	#group .groups .col2,
	#group .groups .other{width:auto; margin:0 0 1em;}

	/* Contact
	----------------------------------------------- */
	#contact_area{width:auto; padding:1em;}
	
	.input_area dl{line-height:1.5em;}
	.input_area dl dt{width:auto; margin-bottom:0.5em;}
	.input_area dl dd{margin:0 0 0.5em 0; padding:0 0 0.5em 0;}

	.input_area input{width:98% !important;}
	input[type="submit"]{line-height:3em;}

	.input_area ._firstname,
	.input_area ._lastname,
	.input_area ._firstkana,
	.input_area ._lastkana{width:100%; margin-bottom:0.5em;}

}