@charset "utf-8";

/* ------------------------------------------
	- COMMON SETTING
	- COMPANY
	- ABOUT
------------------------------------------ */

/* ==============================================================
	COMMON SETTING
============================================================== */

/* HEADER
------------------------------------------------ */

#company header,#about header{
	background: url(../img/company/header_img.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}

/* MAIN
------------------------------------------------ */

span.tag{
	display: inline-block;
	color: #fff;
	padding:2px 15px;
	margin-right:8px;;
}
p sup{font-size: 10px;}
/* ==============================================================
	COMPANY
============================================================== */
.intro h2{	font-size: 24px; margin-top:20px;}
.intro p{	margin-top: 40px;}
.intro p.notes{	font-size: 14px;}
.frame_set{
	border:3px solid #6fb92c;
	background:rgba(111,185,44,0.2);
	border-radius: 5px;
	position: relative;
	padding:60px 40px 20px;
	margin:80px auto;
}
.frame_set h3{
	display: block;
	width:250px;
	background: #6fb92c;
	padding: 12px 20px;
	border-radius: 50px;
	position: absolute;
	top:-30px;
	left: 0;
	right:0;
	margin: auto;
	font-size: 20px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.frame_set h3 img{	margin-right: 10px;}
.frame_set ul li{
	font-size: 18px;
	display: inline-block;
	margin-right:18px;
	margin-bottom: 15px;
}
@media screen and (max-width:750px){
	.intro h2{	margin:10px auto 30px;}
	.intro p{	margin-top: 15px;}
	.intro p.notes{	font-size: 12px;}
	.intro img{	width:70%; max-width: 346px;}
	.frame_set{
		padding:50px 10px 20px;
	}
	.frame_set h3{
		width:80%;
		font-size: 16px;
	}
	.intro h3 img{	width:20%; max-width: 44px;}

	.frame_set ul li{
		font-size: 14px;
		display: block;
		margin-right:0;
		margin-bottom: 5px;
		text-align: center;
	}

}

/* POINT
------------------------------------------------ */
.point{
	background: url(../img/company/point_bg.png) no-repeat;
	background-position: center top;
	background-size: cover;
}
.point h2{color: #000;}
.point .contents{justify-content: space-around; align-items: stretch;}
.point_item{	width:30%;}
.point_item .text{	position: relative; padding:30px 0;}
.point_item .text h3{	font-size: 22px;}
.point_item .text h3.oneline{	margin:20px auto;}
.point_item .text p{	margin-top: 0; font-size: 14px;}
.point_item .text p.point_icon{
	width:150px;
	position: absolute;
	top:-25px;
	background: #6fb92c;
	border:3px solid #fff;
	font-size: 16px;
	color: #fff;
	border-radius: 50px;
	padding:5px 0;
	z-index: 1;
	display: block;
	left:0;
	right:0;
	margin: auto;
}
@media screen and (max-width:750px){
	.point{
		background: url(../img/company/point_bg_sp.png) no-repeat;
		background-position: center top;
		background-size: cover;
	}
	.point h2 img{ width:auto;height:40px;}
	.point_item{	width:100%;}
	.point_item .text h3,
	.point_item .text h3.oneline{	font-size: 18px;margin:5px auto;}

}

/* DIVISION
------------------------------------------------ */
.division h2{color: #f7b400;}
.division .flexbox{	align-items: stretch;}
.division .flexbox:nth-child(even) {  flex-direction: row-reverse;}
.division .flexbox .item_box {	width:50%;	align-self: stretch;}
.division .flexbox .img img{	width:100%;}
.division .flexbox .text{
	display: flex;
  flex-wrap: wrap;
	align-items: center;
	align-content: center;
}
.division .flexbox .text h3,.division .flexbox .text p{
	text-align: left;
	width:90%;
	margin:0 auto;
}
.division .flexbox .text h3{	font-size: 28px;	color: #6fb92c;}
.division .flexbox .text p{	margin-bottom: 20px;}
.division .btn{	margin:50px auto 30px;}
.division .btn a{
	font-size: 16px;
	color: #fff;
	background: #005ca1;
	display: inline-block;
	padding:25px 100px;
	border-radius: 10px;
}

@media screen and (max-width:750px){
	.division .contents{	width:100%;}
	.division .flexbox .item_box {	width:100%;	align-self: stretch;}
	.division .flexbox .text h3{
		font-size: 18px;
		text-align: center;
		margin:20px auto;
	}
	.division .btn{	margin:10px auto 50px;}
	.division .btn a{
		font-size: 14px;
		padding:20px 80px;
		border-radius: 10px;
	}
}

/* ==============================================================
	ABOUT
============================================================== */

.title_tag{height:20px; background: #f7b400; position: relative;}
.title_tag h2{
	font-size: 24px;
	display: inline-block;
	padding:50px 40px 40px;
	background: #f7b400;
	color: #fff;
	border-radius: 10px;
	position: absolute;
	top:-130px;
	left:10%;
	font-family: 'Lato', sans-serif;
}
.title_tag h2 span.jp_title{	color: #fff;	font-size: 14px;}
#about .contents{	text-align: left;	padding-bottom:20px;}
#about h3{	color: #fff;	padding:25px 30px;	background: #1b1b1b;}

@media screen and (max-width:750px){
	.title_tag h2{
		font-size: 18px;
		display: inline-block;
		padding:20px 20px 10px;
		background: #f7b400;
		color: #fff;
		border-radius: 5px 5px 0 0;
		position: absolute;
		top:-55px;
		left:5%;
		font-family: 'Lato', sans-serif;
	}
	.title_tag h2 span.jp_title{font-size: 12px;}
	#about h3{	padding:15px 30px;}
}

/* TABLE
------------------------------------------------ */
#about table{ width:100%;}
#about table tr{ border-bottom: dotted 2px #bdbab4;}
#about table th{width:200px; padding:20px 0 20px 35px;}
#about table td{ padding:20px 35px 20px 0;}
#about table td.location,
#about table td.store{ display: flex; flex-wrap: wrap;}
#about table td.location .location_item,
#about table td.store .store_item{ width:47%; }
#about table td.location .location_item:nth-child(odd),
#about table td.store .store_item:nth-child(odd){ margin-right:40px;}
#about table td.location .location_item:nth-child(3),
#about table td.store .store_item:nth-child(3){ margin-top:40px;}
#about table td.location .location_item a,
#about table td.store .store_item a,
#about table td.group a{ color:#005ca1; }
#about table.table02 th{width:170px; padding:20px 0 20px 35px;}
#about table.table02 td.manth{ padding:20px 45px 20px 20px; }

@media screen and (max-width:750px){
	#about table{ margin-top:20px;}
	#about table tr{ border-bottom: none;}
	#about table th,#about table td{	display: block;}
	#about table th{
		text-align: center;
		background: #bdbab4;
		width:100%;
		padding:10px 0;
	}
	#about table td{	width:97%;	padding:10px 0 10px 3%;}
	#about table td.location .location_item:nth-child(odd),
	#about table td.store .store_item:nth-child(odd){ margin-right:0;}
	#about table td.location .location_item:nth-child(3),
	#about table td.store .store_item:nth-child(3){ margin-top:0;}
	#about table td.location .location_item,
	#about table td.store .store_item{ width:100%; margin:0 0 20px 0; }
	#about table td.location .location_item:last-child,
	#about table td.store .store_item:last-child{ margin-bottom:0; }
	#about table.table02 th{width:100%; padding:10px 0;}
	#about table.table02 td.manth{ width:97%; padding:10px 0 0 3%; }
	#about table.table02 td.upper{ border-top: dotted 2px #bdbab4; }
}

/* TAB CONTENT
------------------------------------------------ */
.office .flexbox{justify-content: space-between; margin:40px auto 80px;}
.tabcontent{width:55%;}
.tabcontent h4{font-size: 22px;}
.tabnav{	width:35%;}
.tabnav li{	padding-bottom:20px;}
.tabnav li > a{	text-decoration: none;	font-size: 16px;	font-weight: bold;}
.tabnav li > a:hover{opacity: 0.7;}
.tabnav li p{	font-size: 14px;}
.tabnav li p a{	color: #005ca1;	font-size: 14px;}
.map{	width:550px;	height:550px;	margin-top:20px;}

@media screen and (max-width:750px){
	.tabcontent{display: none;}
	.tabnav{	width:100%;}
	.map{	width:100%;	height:250px;	}
	.tabnav li{	margin-bottom: 20px;}

}