@charset "UTF-8";
/* CSS Document */

.contents.reason {
	width: 100%;
	height: 100%;
	margin: 430px 0 0;
	padding: 0;
	float: left;
	background-image: url("../images/reason/bg_cream.png");
	background-position: left;
	background-repeat: repeat-y;
	background-color: #FFF;
}

.contents.reason .footprint01 {
	margin: 20px 5% 0 0;
	float: right;
}

.contents.reason .footprint02 {
	margin: 20px 0 0 500px;
	float: left;
}

.contents.reason .point1 {
	width: 100%;
	height: 500px;
	margin: 0;
	padding: 0;
	float: left;
	background-image: url("../images/reason/img01_bg.png");
	background-position: top left 20vw;
	background-repeat: no-repeat;
	background-size: cover;
}

.contents.reason .point1 .photo {
	margin: 100px 0 0;
	float: left;
}

.contents.reason .point2 {
	width: 100%;
	height: 500px;
	margin: 100px 0 50px;
	padding: 0;
	float: left;
	background-image: url("../images/reason/img02_bg.png");
	background-position: top right 20vw;
	background-repeat: no-repeat;
	background-size: cover;
}

.contents.reason .point2 .photo {
	margin: 100px 0 0;
	float: right;
}

.contents.reason .point3 {
	width: 100%;
	height: 500px;
	margin: 0 0 100px;
	padding: 0;
	float: left;
	background-image: url("../images/reason/img03_bg.png");
	background-position: top left 20vw;
	background-repeat: no-repeat;
	background-size: cover;
}

.contents.reason .point3 .photo {
	margin: 100px 0 0;
	float: left;
}

.contents.reason .tytle_box {
	width: 80%;
	margin: 50px 10% 0;
	float: left;
	color: #FFF;
}

.contents.reason .point2 .tytle_box {
	margin: 50px 0 0 20%;
}


.contents.reason .tytle_box dl {
	float: left;
	letter-spacing: 0;
	width: 100px;
}

.contents.reason .tytle_box dl dt {
	font-size: 1.2vw;
	width: 100%;
	text-align: center;
}

.contents.reason .tytle_box dl dd {
	font-size: 4.5vw;
	height: 80px;
	line-height: 80px;
	width: 100%;
	text-align: center;
}

.contents.reason .tytle_box p {
	width: auto;
	float: left;
	font-size: 4.5vw;
}

.contents.reason .tytle_box h2 {
	width: auto;
	margin: 100px 0 0;
	float: left;
	font-size: 150%;
}

.contents.reason .message {
	width: 70%;
	margin: 0 20% 0 10%;
	float: left;
	color: #FFF;
}

.contents.reason .point2 .message {
	width: 70%;
	margin: 0 10% 0 20%;
	float: left;
	color: #FFF;
}

/* ************************************************** */
/*         width    1400px    */
/* ************************************************** */

@media screen and (max-width:1400px) {

.glid-50 { width: 100%; }

.contents.reason .point1,
.contents.reason .point2,
.contents.reason .point3 {
	margin: 0 0 250px;
	background-position: center;
}

.contents.reason .tytle_box,
.contents.reason .point2 .tytle_box {
	width: 70%;
	margin: 50px 15% 0;
	padding: 0;
	float: left;
}

.contents.reason .tytle_box dl dt { font-size: 100%; }
.contents.reason .tytle_box dl dd {	font-size: 300%;height: 1em;line-height: 1em; }
.contents.reason .tytle_box p { font-size: 300%;margin: 0.7em 0 1em; }

.contents.reason .tytle_box h2 {
	width: 100%;
	margin: 0;
	float: left;
	text-align: center;
}

.contents.reason .message,
.contents.reason .point2 .message {
	width: 70%;
	margin: 50px 15% 0;
}

.contents.reason .point1 .photo,
.contents.reason .point2 .photo,
.contents.reason .point3 .photo {
	width: 100%;
	margin: 100px 0 0;
	text-align: center;
	float: left;
}

.contents.reason .point1 .photo img,
.contents.reason .point2 .photo img,
.contents.reason .point3 .photo img {
	width: 600px;
}


}

/* ************************************************** */
/*         width    1100px    */
/* ************************************************** */

@media screen and (max-width:1300px) {

.contents.reason { margin: 380px 0 0; }

}

/* ************************************************** */
/*         width    1100px    */
/* ************************************************** */

@media screen and (max-width:1100px) {

.contents.reason { margin: 500px 0 0; }

}


/* ************************************************** */
/*         width    780px    */
/* ************************************************** */

@media screen and (max-width:780px) {

.contents.reason .point1 .photo img { width: 80%;margin: -6vw 0 0; }

.contents.reason .point2 .photo img,
.contents.reason .point3 .photo img { width: 80%;margin: -3vw 0 0; }

}

/* ************************************************** */
/*         width    580px    */
/* ************************************************** */

@media screen and (max-width:580px) {

.contents.reason { margin: 400px 0 0; }

.contents.reason .tytle_box h2 { text-align: left;line-height: 1.3em; }

.contents.reason .message { letter-spacing: 0; }

}

/* ************************************************** */
/*         width    480px    */
/* ************************************************** */

@media screen and (max-width:480px) {

.contents.reason { letter-spacing: 0;margin: 85vw 0 0; }

}