@charset "UTF-8";

/* ****************************************************
base styles
***************************************************** */




/* environment/bn/case/index.html
=========================================*/
#products sup {
	vertical-align: top;
	font-size: 83%;
}

#accordion {
	overflow: hidden;
  display: flex;
}

#accordion li {
	overflow: hidden;
	list-style: none;
  display: flex;
}

.tab {
	width: 85px;
	height: 475px;
	opacity: 1;
	transition: all 1s ease-in-out;
	cursor: pointer;
}
.active .tab {
	width: 0;
	opacity: 0;
	z-index: -1;
	transition: all 1s ease;
}

.content {
	width: 0;
	height: 475px;
	transition: width 1s ease-in-out;
}
.active .content {
	width: 780px;
	background: #fadfd6;
}

.accordion--col-2 .active .content {
	width: 850px;
}
.accordion--col-3 .active .content {
	width: 780px;
}
.accordion--col-4 .active .content {
	width: 695px;
}




/* .pt_hd5 {
	border-left: none;
} */
.clm_2 .col {
	width: 48%;
	float: left;
	margin-right: 4%;
	margin-bottom: 2%;
}

.clm_2 .col:nth-child(2n) {
	margin-right: 0;
}

.clm_2 .col.fR,
.col_2 .text.fR {
	float: right;
	margin-right: 0;
}

.clm_2 .col.wImg {
	padding: 10px;
	box-sizing: border-box;
}



.image {
	-webkit-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.35);
	box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.35);
}

.text h4.pt_hd4 {
	font-size: 114%;
}

h3.pt_hd4 {
	padding: 0 0 8px 0;
}

h3 span.circle {
	text-decoration: underline;
	font-weight: normal;
	background-color: #a9ccf5;
	width: 70px;
	line-height: 70px;
	border-radius: 100%;
	text-align: center;
	color: #fff;
	font-size: 167%;
	margin-right: 10px;
}

h3 span {
	display: inline-block;
	vertical-align: middle;
}

.s_type {
	float: left;
	width: 214px;
	min-height: 265px;
	margin: 0 23px 20px 0;
}

.s_type:nth-child(4n){
	margin: 0 0 20px;
}

.sectionarea05 .pt_hd5 {
	margin-bottom: 20px;
	border-left: none;
	padding: 6px 10px;
	border-bottom: 2px solid #f5f5f5;
	text-align: left;
	font-size: 150%;
}

.s_type .p_desc {
	text-align: left;
}

.s_type .p_img {
	margin: 0 0 20px;
}

.buss {
	display: flex;
}
.buss p {
	float: left;
	margin: 0 4px 0 0;
}

.buss p:last-child {
	margin: 0;
}

.prod-ttl-01 {
	margin-bottom: 10px;
	font-size: 200%;
	text-align: left;
	font-weight: normal;
}

.prod-ttl-02 {
	text-align: left;
	position: relative;
}
.prod-ttl-02__txt {
	font-size: 117%;
	font-weight: normal;
	line-height: 1.2;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}


@media screen and (max-width: 640px) {
	.clm_2 .col,
	.clm_2 .col.fR,
	.col_2 .text.fR {
		float: none;
		width: 100%;
	}
	.col.wImg {
		width: 75%;
		margin: 0 auto 10px;
	}
	h3 span.circle {
		width: 50px;
		line-height: 50px;
		font-size: 118.8%;
	}

	.clm_2 .col:nth-child(2n) {
		margin-right: auto;
	}
	.s_type {
		width: 100%;
		min-height: auto;
	}
	.s_type .p_img{
		float: left;
		width: 90px;
		overflow: hidden;
	}
	.s_type .p_img img {
		margin: 0 0 0 -70%;
	}
	.s_type .p_desc {
		float: none;
		width: auto;
		overflow: hidden;
		padding-left: 6px;
	}
	.buss {
		display: block;
	}
	.buss p {
		width: 48%;
		margin: 0 4% 4% 0;
	}
	.buss p:nth-child(2n) {
		margin: 0 0 4%;
	}
	.pt_hd1 {
		padding: 0;
		background-size: 100% auto!important;
	}
	#accordion,
	#accordion li {
		display: block;
	}
	#accordion li p {
		float: none;
	}
	#accordion li .content {
		background: none!important;
		padding: 0;
		height: 0;
		transition: none;
	}
	#accordion li .tab {
		display: none;
	}
	#accordion li.active .content {
		width: 100%;
		height: 100%;
	}
	#accordion li.active .content img {
		width: 100%;
		height: auto;
	}
	.acc_nav {
		position: relative;
		text-align: left;
		padding: 10px 36px 10px 10px;
		font-size: 150%;
		font-weight: bold;
		background: rgba(255,255,255,1);
		background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(242,242,242,1)));
		background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%);
		background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%);
		background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%);
		background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2', GradientType=0 );
	}

	.acc_nav:after {
		position: absolute;
		top: 50%;
		right: 10px;
    -webkit-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    -o-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
		background: url(../../../common/images/arrw_red_c.png) no-repeat;
		width: 16px;
		height: 16px;
		content: "";
	}
	.s_type.active .acc_nav:after,
	#accordion li.active .acc_nav:after {
    -webkit-transform: translateY(-50%) rotate(-90deg);
    -ms-transform: translateY(-50%) rotate(-90deg);
    -o-transform: translateY(-50%) rotate(-90deg);
    transform: translateY(-50%) rotate(-90deg);
	}
	.s_type,
	#accordion li {
		border: 1px solid #f8f8f8;
	}
	.s_type,
	.s_type .pt_hd4,
	.s_type:nth-child(4n) {
		margin-bottom: 0;
	}
	.s_type .pt_hd4 {
		border-bottom: 0;
	}
	.s_type .content:before,
	.s_type .content:after {
		display: table;
		content: "";
	}
	.s_type .content:after {
		clear:both;
	}
	.s_type .content {
		display: none;
	}
	.s_type.active .content {
		display: block;
		padding: 20px 5px;
		box-sizing: border-box;
	}
	.prod-ttl-02__txt {
		font-size: 97.8%;
	}
}
@media screen and (max-width: 500px) {
	h3 span.head {
		width: 79%;
	}
}