@charset "utf-8";

/* ==================================================================
	company.css
	
=================================================================== */

/* 共通の指定 */

	body#company section.categoryMenu li.company a,
	body#history section.categoryMenu li.history a,
	body#shopinfo section.categoryMenu li.shopinfo a,
	body#staff section.categoryMenu li.staff a,
	body.recruit section.categoryMenu li.recruit a,
	body#factory section.categoryMenu li.factory a,
	body#privacy section.categoryMenu li.privacy a,
	body#csr section.categoryMenu li.csr a
	{
        background-color: #14694b;
        color: #fff;
	}


.contents h2{
	margin-bottom:15px;
}


.main h3{
	margin:15px;
}


/* --------------------------------
   □ company
-------------------------------- */ 

.main p.txt{
	font-size: 116%;
    margin-bottom: 5%;
}

.main .message{
	background:url(../../images/company/company/message-bg.gif) 0 0 repeat;
}

.main .company-info2{
	margin:20px 0;
}

.main .message .president{
	float:left;
	text-align:center;
	font-weight:bold;
	margin-right: 4%;
}

.main .message .president img{
	margin-bottom:15px;
}

.main .company-info{
	width:700px;
	margin:20px;
}
/*----- 横幅指定 -----*/
.wd1 {width: 1%;}
.wd5 {width: 5%;}
.wd10 {width: 10%;}
.wd13 {width: 13%;}
.wd15 {width: 15%;}
.wd20 {width: 20%;}
.wd25 {width: 25%;}
.wd30 {width: 30%; height: auto;}
.wd35 {width: 35%;}
.wd40 {width: 40%;}
.wd44 {width: 44%;}
.wd45 {width: 45%;}
.wd50 {width: 50%;}
.wd60{width: 60%;}
.wd65 {width: 65%;}
.wd70 {width: 70%;}
.wd75 {width: 75%;}
.wd80 {width: 80%;}
.wd85 {width: 85%;}
.wd90 {width: 90%;}
.wd95 {width: 95%;}
.wd100 {width: 100%;}

.main .company-info2 th{
	background-color:#E1FEAA;
	border:1px solid #aaaaaa;
	padding:10px 20px;
	vertical-align:top;
	font-weight:normal;
	line-height:1.8em;
}

.main .company-info2 th.column1{
	width:500px;
}

.main .company-info2 td{
	border:1px solid #aaaaaa;
	padding:10px 20px;
	line-height:1.8em;
}
.main .company-info2 span{
	float: right;
	width: 290px;
	text-align: left;
	line-height: 1.4em;
	vertical-align: middle;
}

.main .company-info2 span.red{
	background:#cb2929;
	display:inline-block;
	padding:5px 10px;
	color:#fff;
	width: auto;
    float: none;
}

.main .company-info2 span.mt01{
	margin-top: 10px;
}
.main .company-info2 span.mt02{
	margin-top: 3px;
}
.main .company-info2 span.mt03{
	margin-top: 18px;
}
.main .company-info2 span.mt04{
	margin-top: 25px;
}

.main .company-info th{
	background-color:#ececec;
	border:1px solid #aaaaaa;
	padding:10px 20px;
	width:185px;
	vertical-align:top;
	font-weight:normal;
	line-height:1.8em;
}

.img_l {
	float:left;
	margin-right: 10px;
	text-align:left;
	vertical-align: middle;
}
.img_r {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
	text-align:left;
}
.font-l{
	font-size: 180%;
	font-weight: bold;
}
.font-s{
	font-size:85%;
}

.main .company-info td{
	border:1px solid #aaaaaa;
	padding:10px 20px;
	line-height:1.8em;
}

.txtRed{
	color:#be0f34;
}

@media only screen and
(max-width : 640px) {
    
#company section{
	margin: 0 0 30px;
}


.main .message .president {
    float: none;
    margin-right: 0;
	margin-bottom: 4%;
}


.main .company-info2 {
	width: 100%;
    box-sizing: border-box;
	border-top: 1px solid #aaa;
}


.main .company-info2 th{
	display:block;
	width:auto;
	border-top: none;
}

	.main .company-info2 th.column1 {
		width: auto;
	}
	
.main .company-info2 td {
	display:block;
	border-top: none;
	overflow: hidden;
}

.main .company-info2 .img_l {
	min-width: 60%;
    float: none;
    margin-right: 0; 
    display: block;
    margin: 4% auto;
}
	
.main .company-info2 span {
	display: block;
    float: none;
    width: 90%;
    text-align: left;
    line-height: 1.4em;
    vertical-align: middle;
	margin: 0 auto;
}	
	

}


/* --------------------------------
   □ shopinfo
-------------------------------- */ 


#shopinfo .navigation{
	overflow:hidden;
	margin:26px 0 26px 0;
	text-align:center;
}
#shopinfo .navigation li{
	display:inline;
	margin-right:2px;
}
#shopinfo .main .area-info{
	border:1px solid #a8a8a8;
	padding:20px;
	margin:15px 30px;
}

#shopinfo .main .area-info .leftCol{
	float:left;
	width:340px;
}


#shopinfo .main .area-info .leftCol .tbl-info{
	width:100%;
	margin-bottom:10px;
}

#shopinfo .main .area-info .leftCol .tbl-info th{
	color:#1b7055;
	vertical-align:top;
	padding:10px;
	border-bottom:1px solid #a8a8a8;
}

#shopinfo .main .area-info .leftCol .tbl-info td{
	vertical-align:top;
	padding:10px;
	border-bottom:1px solid #a8a8a8;
}

#shopinfo .main .area-info .leftCol .text-car{
	margin:10px 5px;
	text-align:left!important;
}


#shopinfo .main .area-info .rightCol{
	float:right;
	width:260px;
}

#shopinfo .main .area-info .rightCol img{
	margin-bottom:15px;
}
#shopinfo #shop1,
#shopinfo #shop2,
#shopinfo #shop3,
#shopinfo #shop4{
	margin-bottom:100px;
}
#shopinfo ul.firstinfo{
	overflow: hidden;
	float: right;
}
#shopinfo ul.firstinfo li{
	float: left;
	margin-right: 15px;
}
#shopinfo ul.firstinfo img{
	margin: 0 10px 0 10px;
	vertical-align: middle;
}
#shopinfo ul.firstinfo li.map{
	margin-bottom: 20px;
	background: url(../../../images/company/shopinfo/mi_2.png) no-repeat left top;
	background-size: 35px;
	min-height: 35px;
	padding-top: 10px;
	float: left;
	text-align: left;
	padding-left: 38px;
}
#shopinfo ul.firstinfo li.tel{
	margin-bottom: 20px;
	background: url(../../../images/company/shopinfo/mi_3.png) no-repeat left;
	background-size: 35px;
	float: left;
	text-align: left;
	padding-left: 38px;
}


#shopinfo .accent{
	text-align:center;
}

#shopinfo h4{
	margin-bottom: 25px;
}
#shopinfo .lines{
	position: relative;
	margin-bottom: 70px;
}
#shopinfo .lines img{
	position: absolute;
	top: -100px;
	right: 0;
}
#shopinfo ul.photogallery{
	overflow: hidden;
	margin-left:-17px;
}
#shopinfo ul.photogallery li{
	float: left;
	width: 232px;
	margin:0 0 17px 17px;
}
#shopinfo ul.photogallery li img{
	width: 100%;
	height: 160px;
}
#shopinfo ul.photogallery li:nth-child(3n){
	margin-right: 0;
}
#shopinfo ul.photogallery li dt{
	font-size: 140%;
	font-weight: bold;
	border-left: 6px solid #238667;
	padding: 0 0 0 7px;
	margin: 15px 0 5px 0;
}
#shopinfo .map{
	overflow: hidden;
}
#shopinfo .map .mapimg{
	float: left;
	text-align: center;
	width: 260px;
	line-height: 1.5em;
}
#shopinfo .map .mapimg p:last-child{
	width: 250px;
	margin: 0 auto;
}
#shopinfo .map table{
	float: right;
	width: 450px;
	border-collapse: collapse;
	border-left:1px solid #ccc;
}
#shopinfo .map td.linenone,
#shopinfo .map th.linenone{
		border-bottom: none;
}
#shopinfo .map td {
	padding:16px 8px;
	border-bottom:1px solid #ccc;
	vertical-align:middle;
}
#shopinfo .map td img{
	vertical-align: middle;
}
#shopinfo .map th {
	padding:16px 8px;
	text-align:left;
	border-bottom:1px solid #ccc;
	font-weight:bold;
	vertical-align:top;
}
#shopinfo .access{
	overflow: hidden;
	padding-top: 16px;
	border-top: 1px #ccc solid;
	margin-bottom: 30px;
}
#shopinfo .access .car{
	float: left;
	width: 45%;
}
#shopinfo .access .car h5{

}
#shopinfo .access .train{
	float: right;
	width: 45%;
}
#shopinfo .access .train h5{

}


@media only screen and
(max-width : 640px) {
	
	#shopinfo .navigation{
	}

	#shopinfo #shop1,
	#shopinfo #shop2,
	#shopinfo #shop3,
	#shopinfo #shop4{
		margin-bottom:100px;
		padding-bottom:20px;
		border-bottom:1px dotted #333;
	}
	#shopinfo ul.firstinfo{
		overflow: hidden;
		float: none;
	}
	#shopinfo ul.firstinfo li{
		display:block;
		margin:0;
	}
	#shopinfo ul.firstinfo li.map{
		margin-bottom: 5px;
		float: none;
	}
	#shopinfo ul.firstinfo li.tel{
		margin-bottom: 10px;
		float: none;
	}
	#shopinfo h4{
	}
	#shopinfo .lines{
		position: relative;
		margin-bottom: 0;
		text-align:right;
	}
	#shopinfo .lines img{
		position: static;
	}
	#shopinfo ul.photogallery{
		overflow: hidden;
		margin-left:-2%;
	}
	#shopinfo ul.photogallery li{
		float: left;
		width: 48%;
		margin:0 0 17px 2%;
	}
	#shopinfo ul.photogallery li img{
		width: 100%;
		height: auto;
	}
	#shopinfo ul.photogallery li:nth-child(3n){
		margin-right: 0;
	}
	#shopinfo ul.photogallery li dt{
		font-size: 120%;
		line-height:1.2;
	}
	

	#shopinfo .map{
		overflow: hidden;
	}
	#shopinfo .map .mapimg{
		float: none;
		text-align: center;
		width: auto;
		line-height: 1.5em;
		margin:0 auto;
		text-align:center;
	}
	#shopinfo .map .mapimg p:last-child{
		width: auto;
		margin: 0 auto;
		text-align:center;
	}
	
	#shopinfo .map .mapimg p img{
		display:block;
		margin:0 auto;
	}
	
	#shopinfo .map table{
		float: none;
		width: 100%;
	}
	#shopinfo .map td.linenone,
	#shopinfo .map th.linenone{
			border-bottom: none;
	}

	#shopinfo .map th {
		padding:16px 8px;
		text-align:left;
		border-bottom:1px solid #ccc;
		font-weight:bold;
		vertical-align:top;
		width:5em;
	}

	#shopinfo .access .car{
		float: left;
		width: 45%;
	}

	#shopinfo .access .train{
		float: right;
		width: 45%;
	}

	#shopinfo .access .car h5,
	#shopinfo .access .train h5{
		font-size:120%;
		padding-right:5px;
	}

	#shopinfo .access .car h6,
	#shopinfo .access .train h6{
		font-size:120%;
		padding-left:1.5em;
		background-size:auto 1em;
	}


}


/* --------------------------------
   □ staff
-------------------------------- */ 
#staff .main section > section{
	margin-bottom:30px;
}

#staff .main section .message{
	text-align:center;
	margin-bottom:30px;
}

.main .staff-list{
	margin:20px 0 20px 0;
}

.main .staff-list li{
	box-sizing:border-box;
	margin:10px 2%;
	border:2px solid #dfdfdf;
	float:left;
	width:46%;
}

.main .staff-list li .staff-photo{
	float:left;
	margin:10px;
}


.main .staff-list li .staff-name{
	margin:10px 10px 10px 0;
}


.main .staff-list li h5{
	display:inline-block;
	width:33%;
	margin:3px 0px;
	font-size:100%;
    padding: 0 5px 3px 25px;
}

.main .staff-list li p{
	margin:5px 10px 0 10px;
	padding-bottom:10px;
}

.main .staff-list li h5.staff-message{
	clear:both;
	width:auto;
	display:block;
	margin:10px;
}


@media only screen and
(max-width : 640px) {
	
	#staff .main section .message{
		text-align:left;
		color:#1C795C;
		border:1px solid #1C795C;
		padding:4%;
	}
		
	.main .staff-list li{
		box-sizing:border-box;
		margin:10px 2%;
		padding:4% 2%;
		float:none;
		width:auto;
	}
	
	.main .staff-list li .staff-photo{
		float:none;
		margin:0 auto 10px auto;
		text-align:center;
		display:block;
	}
	
	
	.main .staff-list li .staff-name{
		margin:10px 10px 10px 0;
	}
	
	
	.main .staff-list li h5{
		display:block;
		width:auto;
	}
	
	
	.main .staff-list li h5.staff-message{
		clear:both;
		width:auto;
		display:block;
		margin:3px 0px;
	}

	
	.main .staff-list li p:last-child{
		padding-bottom:20px;
	}
	

}

/* --------------------------------
   □ factory
-------------------------------- */ 
.main .factory-main{
	margin:15px 0;
	text-align:center;
	box-sizing:border-box;
}

.main .factory-info{
	margin:15px auto 15px auto;
	padding-bottom:15px;
}


.main .factory-info h5{
	margin:15px;
}


.main .factory-info p{
	margin:15px;
}

.main .factory-info img{
	display:block;
	margin:0 auto;
}


/* --------------------------------
   □ privacy
-------------------------------- */ 
.main .privacy p{
	margin:10px 0 25px 0;
}

.main .privacy h4{
	margin:25px 0 10px 0;

	background: url(../../images/common/title-h5.png) 0% 23% no-repeat;
    font-size: 185%;
	color:#333;
    padding: 0 35px 18px;
	border:0;
    border-bottom: 2px solid #14694b;
}

.main .privacy .web{
	border:1px solid #6e6e5f;
	padding:15px;
}


@media only screen and
(max-width : 640px) {
	
	.main .privacy h4{
		font-size: 120%;
		padding: 0 25px 8px;
	}
	
}

/* --------------------------------
   □ csr
-------------------------------- */ 
#csr .main section{
	margin-bottom:40px;
}
.main .csr p{
	margin:10px 0 25px;
	line-height:1.8em;
}

.main .csr p.logo-text{
	margin:35px 25px 25px;
	line-height:1.8em;
}

.main .csr .logo{
	float:left;
	margin:0 25px 10px;
}

.main .csr .topic{
	border:2px solid #0b8c3f;
	margin:25px;
	padding:20px 15px;
}

.main .csr .topic .explain{
	float:left;
	width:420px;
}


.main .csr .topic .topic-photo{
	float:right;
	margin:0 0 0 8px;
}

.main .csr .topic h4{
	clear:none;
}

.main .csr .course-photo{
	float:left;
	margin:0 15px 25px 25px;
}


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

	.main .csr p{
	}
	
	.main .csr p.logo-text{
		margin:10px 0 25px 0;
	}
	
	.main .csr .logo{
		display:block;
		float:none;
		margin:0 auto 10px auto;
	}
	
	.main .csr .topic{
		margin:0;
		padding:20px 15px;
	}
	
	.main .csr .topic .explain{
		float:none;
		width:auto;
	}
	
	.main .csr .topic .topic-photo{
		display:block;
		float:none;
		margin:0 auto 8% auto;
	}
	
	.main .csr .course-photo{
		display:block;
		float:none;
		margin:0 auto 20px auto;
	}

	
	.main .csr .text-right{
		text-align:center;
	}
	

}



/* --------------------------------
   □ recruit
-------------------------------- */ 

body.recruit .main .return{
	margin: 28px auto;
}

body.recruit .main .return a{
	display:inline-block;
	margin:10px 0;
}


body.recruit ul.type-list{
	margin:10px 0;
}

body.recruit ul.type-list li{
	float:left;
	margin:5px 8px;
}

#recruit .catch{
	margin:25px auto;
	text-align:center;
}

#recruit .president{
	float:right;
	text-align:right;
	margin:15px;
}

#recruit .president img{
	margin-bottom:10px;
}

#recruit .p-voice{
	margin:38px 25px;
}


#recruit .catch2{
	clear:both;
	padding:25px 0 0 0;
}

#recruit .catch2 .staff-photo{
	float:left;
	margin:18px 25px;
}

#recruit .catch2 .s-voice{
	margin:50px 25px 25px;
}

@media only screen and
(max-width : 640px) {
	
	body.recruit .contents .main  ul.type-list{
		margin:10px 0 20px 0;
	}
	
	body.recruit .contents .main  ul.type-list li{
		float:none;
		margin:10px 0;
	}
	
	#recruit .catch{
		text-align:left;
		color:#1C795C;
		border:1px solid #1C795C;
		padding:4%;
	}


	#recruit .president{
		display:block;
		float:none;
		margin:5px auto;
		text-align:center;
	}
	
	#recruit .president img{
		margin-bottom:10px;
	}
	
	#recruit .p-voice{
		margin:18px 0;
	}
	
	#recruit .catch2 .staff-photo{
		display:block;
		float:none;
		margin:0 auto;
	}
	
	#recruit .catch2 .s-voice{
		margin:20px 0;
	}
	
	#recruit .message-btn{
		margin-bottom:40px;	
	}

}

/* --------------------------------
   □ recruit message
-------------------------------- */ 
.main .recruit .staff-message{
	margin:15px;
	padding:15px;
	border:1px solid #e0d5cf;
	background:url(../../../images/company/recruit/message/voice-bg.jpg) 0 0 repeat;
}
	
	.main .recruit .staff-message .rightCol{
		width:470px;
		float:right;
	}
	
	.main .recruit .staff-message .leftCol{
		width:470px;
		float:left;
	}
	
	.main .recruit .staff-message h5{
		margin:0 0 20px;
		font-size:140%;
	}
	
	.main .recruit .staff-message h5 span{
		display:inline-block;
		margin-left:1em;
		font-size:70%;
	}
	
	.main .recruit .staff-message h6{
		font-size:130%;
		margin:10px 0 10px 0;
		background-size:auto 1em;
	}
	
	.main .recruit .staff-message img.left{
		margin-right:10px;
	}
	.main .recruit .staff-message img.right{
		margin-left:10px;
	}

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

	.main .recruit .staff-message{
	}
	
	.main .recruit .staff-message .rightCol,
	.main .recruit .staff-message .leftCol{
		width:auto;
		float:none;
	}
	
	.main .recruit .staff-message h5{
		margin:0 0 20px;
		font-size:140%;
	}
	
	.main .recruit .staff-message h5 span{
		display:inline-block;
		margin-left:1em;
		font-size:70%;
	}
	
	.main .recruit .staff-message h6{
		font-size:130%;
		margin:10px 0 10px 0;
		background-size:auto 1em;
	}

	.main .recruit .staff-message img.right,	
	.main .recruit .staff-message img.left{
		display:block;
		float:none;
		margin:0 auto 10px auto;
	}

}

/* --------------------------------
   □ recruit info
-------------------------------- */ 

.main section.info > section{
	margin-bottom:30px;
}

.main section.info > section > section{
	margin-bottom:20px;
}

.main section.info > section:last-child{
	margin-bottom:0px;
}

.main section.info > section > section:last-child{
	margin-bottom:0px;
}

.main section.info p{
	margin:25px 0 10px;
}

.main section.info > section > section h6{
	margin:0 0px 10px;
}
.main section.info > section > section p{
	margin:0 0px 10px;
}


.main section.info table.info-list{
	margin:15px 0px 25px 0px;
	width:100%;
}

.main section.info table.info-list th{
	background-color:#ececec;
	padding:10px;
	border:1px solid #aaaaaa;
	vertical-align:top;
	width:150px;
}

.main section.info table.info-list td{
	padding:10px;
	border:1px solid #aaaaaa;
	vertical-align:top;
}

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

	
	.main section.info table.info-list{
		margin:15px 0px 15px 0px;
	}
	
	.main section.info table.info-list th{
		background-color:#ececec;
		padding:6px;
		width:5em;
	}
	
	.main section.info table.info-list td{
		padding:6px;
	}

	.main section.info table.info-list td h6{
		font-size:100%;
		background-size:auto 1em;
		padding-left:1.5em;
		margin-bottom:8px;
	}

}