@charset "utf-8";
.wrapper-profile1{
	}
.col-profile-1-w{
	flex: 0 1 auto;
	font-size:1.1em;
	font-weight:bold;
	margin:0px 30px;
	flex-grow: 1;
	}
.col-profile-1-list{
	flex: 0 1 auto;
	margin:0px 30px;
	width:calc(50% - 60px);}
.dec-profile img{
	width:30%;
	}
.wrapper-vender{
	float:left;
	clear:both;
	width:100%;
	flex-wrap:wrap;
	}
.wrapper-vender li{
	flex: 0 0 auto;
	width:calc(33% - 10px);
	padding:20px 5px;
	}
.wrapper-vender li:not(:nth-child(3n)){
	background-image: url(../img/profile/divided.jpg);
	background-repeat: no-repeat;
	background-position: right center;
	}
	
@media screen  and (max-width: 800px) {	
.wrapper-profile1{
	flex-wrap:wrap
	}
.dec-profile.txt_right{
	text-align:center}
.col-profile-1-w{
	font-size:1em;
	margin:0px 5%;
	width:90%;}
.col-profile-1-list{
	flex: 0 1 auto;
	margin:0px 5%;
	width:90%;
}
}
@media screen  and (max-width: 500px) {	
.wrapper-vender li{
	width:calc(50% - 10px);
	padding:20px 5px;
	}
.wrapper-vender li:not(:nth-child(3n)){
	background-image: url(../img/all/0.png);
	background-repeat: no-repeat;
	}
.wrapper-vender li:not(:nth-child(2n)){
	background-image: url(../img/profile/divided.jpg);
	background-repeat: no-repeat;
	background-position: right center;
	}
}
/*wrapper-profile2col*/
.wrapper-profile2col{}
.col-profile2col{flex: 0 1 auto;
margin:0px 50px;
width:calc(50% - 50px)}
.box-pro-list-mask h1 {
	float: left;
	clear: both;
	width: 90%;
	text-align: center;
	margin-bottom: var(--section-padding-tb);
	padding-right: 5%;
	padding-left: 5%;
}
	
.box-pro-list-mask h1 span{
	font-size: 0.7em;
	font-weight: bold;
	color: #FFF;
	padding-bottom: 15px;
	border-bottom-width: 2px;
	border-bottom-style: double;
	border-bottom-color: #FFF;
	}
.box-pro-list-mask h2 {
	float:left;
	clear:both;
	width: 90%;
	font-size:0.9em;
	padding-right: 5%;
	padding-left: 5%;
	color: #FFF;}
@media screen  and (max-width: 1280px) {
.col-profile2col{
		flex: 0 1 auto;
		margin:0px 20px;
		width:calc(50% - 40px)}
.box-pro-list-mask h1 span{
	font-size:20px;
	}
.box-pro-list-mask h2 {
	font-size:16px;
}
.box-pro-list-mask h1 span{
	padding-bottom: 5px;
	}
}
@media screen  and (max-width: 650px) {
.col-profile2col{
		flex: 0 1 auto;
		margin:0px 10px;
		width:calc(100% - 20px)}
.box-pro-list-mask h1 span{
	font-size:18px;
	}
.box-pro-list-mask h2 {
	font-size:13px;
}
}
@media screen  and (max-width: 500px) {
.wrapper-profile2col{flex-wrap:wrap}
.col-profile2col:first-child{
	margin-bottom:30px}
}
/*wrapper-profile1col*/
.wrapper-pro-bg{
	width: 100%;
	float: left;
	clear: both;
	background-repeat: no-repeat;
	background-position: center center;
	background-size:cover;
	min-height:300px;
}
.wrapper-pro-bg.on{
	 -webkit-animation:   ani_scale  0.5s forwards; 
     -moz-animation:    ani_scale  0.5s forwards;
     -o-animation:      ani_scale  0.5s forwards;
     animation:         ani_scale  0.5s forwards;}
.wrapper-pro-bg.out{
	 -webkit-animation: ani_scaleout  0.5s forwards; 
     -moz-animation:    ani_scaleout  0.5s forwards;
     -o-animation:      ani_scaleout  0.5s forwards;
     animation:         ani_scaleout  0.5s forwards;}
	 
@media screen  and (max-width: 500px) {
	 .wrapper-pro-bg{
	min-height:200px;
}
}
/*wrapper-panner===========================*/
.wrapper-panner{
	width: 90%;
	float: left;
	clear: both;
	margin-bottom: var(--section-padding-tb);
	margin-top: var(--section-padding-tb);
	margin-right: 5%;
	margin-left: 5%;
}
.wrapper-panner h2{
	width:100%;
	float:left;
	clear:both;
	font-size:1em}
.pannerlist{
	width:100%;
	float:left;
	clear:both;
	flex-wrap:wrap}
.pannerlist li{
	flex: 0 1 23%;
	margin: 15px 1%;
	font-size: 0.9em;
	line-height: 1em;
}
	 
@media screen  and (max-width: 650px) {
.pannerlist li{
	flex: 0 1 30%;
	margin: 15px 1.5%;
}
	
}
@media screen  and (max-width: 360px) {
.pannerlist li{
	flex: 0 1 46%;
	margin: 15px 2%;
}
	
}