@charset "utf-8";

/*--------------------------------------------------------------------------------
topimage
--------------------------------------------------------------------------------*/

@media all and (max-width: 767px) {
	#topimage .container{ padding:0 !important; }
	
}
@media screen and (min-width: 768px) {
	#topimage {
		margin-bottom: 0px;
		background:#f7d82e;
		}
}

.ribbon1 {
  display: inline-block;
  position: relative;
  padding: 0 30px;/*横の大きさ*/
  box-sizing: border-box;
}

.ribbon1:before, .ribbon1:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbon1:before {
  top: 0;
  left: 0;
  border-width: 25px 0px 25px 15px;
  border-color: transparent transparent transparent #f7f7f7;
  border-style: solid;
}

.ribbon1:after {
  top: 0;
  right: 0;
  border-width: 25px 15px 25px 0px;
  border-color: transparent #f7f7f7 transparent transparent;
  border-style: solid;
}

.ribbon2 {
	display: inline-block;
	padding: .8em 1.6em .4em;
	position: relative;
	text-align: center;
	z-index: 1;
	transform:translate3d(0,0,1px);
	height:70px;
}
.ribbon2:before {
	content: "";
	position: absolute;
	top:10px;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background:#ed9a00;
	transform: scaleY(-.8) perspective(1.0em) rotateX(10deg);
	transform-origin: center ;
}

.ribbon2 span{
	position:absolute;
	display:block;
	z-index:2;
	width:auto;
	margin:auto;
	transform:translate3d(0,0,10px); //ここを追記
	
}
#about {
	line-height:2.8rem;
}

#about_concept {
	line-height:2.8rem;
	margin-bottom:30px;

}

#about_concept h2{
	color:#1a2681;
	font-size:5.8rem;
	font-weight:800;
	line-height:7.0rem;
}

#about_concept h2 span{
	color:#666;
}

#about_concept h2 .caption{
	text-align:center;
	display:block;
	color:#FFF !important;
	background:#32b16c;
	font-size:3.2rem;
	font-weight:600;
	line-height:5.0rem;
	margin-bottom:10px;
}

#about_concept_img{
	background:#eeeeee;
	padding:10px 2px 10px 2px;
}

#about_responsiveness{
	margin-bottom:60px;
}
#about_responsiveness_body {
	line-height:2.8rem;
	background:#ffffd9;
	padding:20px 30px 20px 30px;
	border-left:solid 3.5px #009be2;
	border-right:solid 3.5px #009be2;
	border-bottom:solid 3.5px #009be2;
}
	
#about_responsiveness h3{
	color:#009be2;
	font-size:2.5rem;
	font-weight:800;
	margin-bottom:10px;
}

#about_responsiveness_body_img {
	float:right;
	margin:0px 10px 0px;
	}


#about_reason {
	margin:50px 0px 80px 0px;
	}

#about_reason h2{
	color: #000;
	font-size:3rem;
	font-weight:800;
	text-align:center;

}

#about_reason_col .col{
	text-align:center;
	margin-bottom:20px;
}
#about_reason_col .col img{
	width:90%;
	margin-bottom:20px;
	margin-top:-15px;

}
#about_reason_col .card{
	border:solid 5px #ed9a00;
}

#about_reason_col .col strong{
	font-size:1.8rem;
	}
	
#about_reason_col .col p{
	text-align:left;
	border-top:#999 1px solid;
	padding:10px;
	margin:10px;
}
#about_reason_col .col .num{
	font-size:2.8rem;
	font-weight:800;
	color:#FFF;
	width:33%;
	margin:-15px auto auto auto;
}

#about_reason_col .col strong{
	display:block;	
	padding:0 15px;
}


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

#about_responsiveness_body_img {
	width:33%;

	}

}

@media all and (max-width: 767px) {
#about_concept h2{
	text-align:center;
	font-size:3.8rem;
	line-height:4.5rem;
}
#about_concept h2 .caption{
	display:block;
	font-size:1.8rem;
	padding: 5px;
	line-height:1.8rem;
	width:90%;
	margin:auto auto 5px auto;
}



#about_reason_col .col .num{
	font-size:2.0rem;
}

#about_responsiveness h3{
	font-size:2.0rem;
	text-align:center;
}

#about_responsiveness_body {
	padding:20px 10px 20px 10px;
}

#about_responsiveness_body_img {
	margin-bottom:10px;
	}

.ribbon1:before {
  top: 0;
  left: 0;
  border-width: 13px 0px 13px 10px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
  z-index:1;
}
.ribbon1:after {
  top: 0;
  right: 0;
  border-width: 13px 10px 13px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
  z-index:1;
}
.ribbon2 {
	height:60px;}
.ribbon2 span{
	font-size:3.0rem;
	
}
}