@charset "utf-8";
/*
Theme Name: yoshida_child
Template: yoshida
Author: innovesta
Author URI: http://www.innovesta.net
*/

/*========================*/

/*=========================
reason
=========================*/
#reason {
text-align: left;
line-height: 1.5em;
font-size: 16px;
}

#reason .item,
#reason .box { border: 1px solid #000; }
#reason .box { background: url(img/header/header_bg.gif) left bottom repeat; }
#reason .bg_blue {
	background: #91d0eb;
	padding: 15px 10px 25px; 
}

/*layout01*/
#reason .layout01 { display: flex; }
#reason .layout01 .left {
	width: 42%;
	margin: 0 3% 0 0;
}
#reason .layout01 .right { width: 55%; }
/*layout02*/
#reason .layout02 { display: flex; }
#reason .layout02 .left {
	width: 49%;
	margin: 0 2% 0 0;
}
#reason .layout02 .right { width: 49%; }
/*****************
width640px以下
*****************/
@media screen and (max-width:640px) {
/*layout01*/
#reason .layout01 { display: block; }
#reason .layout01 .left {
	width: 100%;
	margin: 0 auto 10px;
}
#reason .layout01 .right {
	width: 100%;
	margin: auto; 
}
/*layout02*/
#reason .layout02 { display: block; }
#reason .layout02 .left {
	width: 100%;
	margin: 0 auto 10px;
}
#reason .layout02 .right {
	width: 100%;
	margin: auto; 
}
}


/*
box01
*************/
/*item01*/
#reason .box01 .item01 { background: url(img/reason/box01_bg.png) left top repeat; }
#reason .box01 .item01 h1 {
	width: 90%;
	max-width: 670px;
	margin-bottom: 60px;
}

/*item02*/
#reason .box01 .item02 {
	background: url(img/index/box01_bg02.png) left top repeat;
	padding: 20px 10px 10px; 
}
#reason .box01 .item02 .child {
	width: 24%;
	max-width: 152px;
	margin-top: -60px;
}

#reason .box01 .item02 .child h2:hover {
	 opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

#reason .box01 .item02 .child:nth-child(1) h2 {
	width: 39%;
	max-width: 59px;
}
#reason .box01 .item02 .child:nth-child(2) h2 {
	width: 62%;
	max-width: 94px;
}
#reason .box01 .item02 .child:nth-child(3) h2 {
	width: 39%;
	max-width: 59px;
}
#reason .box01 .item02 .child:nth-child(4) h2 {
	width: 100%;
	max-width: 152px;
}

#reason .box01 .item02 .child:nth-child(1) p {
	width: 62%;
	max-width: 93px;
}
#reason .box01 .item02 .child:nth-child(2) p {
	width: 100%;
	max-width: 158px;
}
#reason .box01 .item02 .child:nth-child(3) p {
	width: 60%;
	max-width: 91px;
}
#reason .box01 .item02 .child:nth-child(4) p {
	width: 87%;
	max-width: 132px;
}


/*
box02
*************/
#reason .box02 {
	margin-bottom: 25px;
	box-sizing: border-box;
}
#reason .box02 h1 {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

/*child01*/
#reason .box02 .child01 h2 {
	width: 100%;
	max-width: 536px;
}


/*
box03
*************/
#reason .box03 {
	margin-bottom: 25px;
	box-sizing: border-box;
}
#reason .box03 h1 {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

/*child01*/
#reason .box03 .child01 h2 {
	width: 100%;
	max-width: 536px;
}


/*
box04
*************/
#reason .box04 {
	margin-bottom: 25px;
	box-sizing: border-box;
}
#reason .box04 h1 {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

/*child01*/
#reason .box04 .child01 h2 {
	width: 55%;
	max-width: 318px;
}
#reason .box04 .child01 h3 {
	width: 100%;
	max-width: 473px;
}
#reason .box04 .child01 .btn01 h4 {
	width: 100%;
	max-width: 473px;
}
/*btn*/
#reason .box04 .child01 .btn01,
#reason .box04 .child01 .btn02 {
	max-width: 320px;
	border: 1px solid #000;
	padding: 5px;
	box-sizing: border-box;
}
#reason .box04 .child01 .btn01 { background: url(img/index/box02_bg.jpg) left top repeat; }
#reason .box04 .child01 .btn02 {
	-webkit-background-size: 10px 10px;
	-moz-background-size: 10px 10px;
	background-size: 10px 10px;
	background-color: #f5f3e8;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%,
		color-stop(.25, #ebe8d3), color-stop(.25, transparent),
		color-stop(.5, transparent), color-stop(.5, #ebe8d3),
		color-stop(.75, #ebe8d3), color-stop(.75, transparent),
		to(transparent));
	background-image: -webkit-linear-gradient(-45deg, #ebe8d3 25%, transparent 25%,
		transparent 50%, #ebe8d3 50%, #ebe8d3 75%,
		transparent 75%, transparent);
	background-image: -moz-linear-gradient(-45deg, #ebe8d3 25%, transparent 25%,
		transparent 50%, #ebe8d3 50%, #ebe8d3 75%,
		transparent 75%, transparent);
	background-image: -ms-linear-gradient(-45deg, #ebe8d3 25%, transparent 25%,
		transparent 50%, #ebe8d3 50%, #ebe8d3 75%,
		transparent 75%, transparent);
	background-image: -o-linear-gradient(-45deg, #ebe8d3 25%, transparent 25%,
		transparent 50%, #ebe8d3 50%, #ebe8d3 75%,
		transparent 75%, transparent);
	background-image: linear-gradient(-45deg, #ebe8d3 25%, transparent 25%,
		transparent 50%, #ebe8d3 50%, #ebe8d3 75%,
		transparent 75%, transparent);
}
#reason .box04 .child01 .btn01 h4,
#reason .box04 .child01 .btn02 h4 {
	width: 100%;
	max-width: 290px;
}


/*
box05
*************/
#reason .box05 {
	margin-bottom: 25px;
	box-sizing: border-box;
}
#reason .box05 h1 {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

/*child01*/
#reason .box05 .child01 h2 {
	width: 100%;
	max-width: 584px;
}