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

.content.reason .main_img {
	background-image: url("../images/reason/main_img.webp");
}

.content.reason .title { 
	color: #3B3B3B;
}

.content.reason .title .title_en { 
	font-size: 70px;
	line-height: 1.3em;
	font-weight: 300;
}

/* ************************************************************
             INTRO  RAYOUT
*************************************************************** */

.content.reason .intro { 
	width: 90%;
	margin: 0 5% 100px;
	padding: 0;
	float: left;
}

.content.reason .intro .copy { 
	width: 80%;
	margin: 0 10% 50px;
	padding: 0;
	float: left;
	font-family: "Noto Serif JP", serif;
	font-size: 32px;
	font-weight: 700;
	text-align: center;
	line-height: 1.3em;
}

.content.reason .intro .message { 
	width: 80%;
	margin: 0 10%;
	padding: 0;
	float: left;
	line-height: 30px;
	text-align: center;
}

/* ************************************************************
             REASON  RAYOUT
*************************************************************** */

.content.reason .block { 
	width: 100%;
	margin: 0;
	padding: 0 0 50px;
	float: left;
}

.content.reason .block .glid { 
	width: 50%;
	margin: 0;
	padding: 0;
	float: left;
}

.content.reason .block.reverse .glid { 
	float: right;
}

.content.reason .block .glid.photo img { 
	width: 80%;
	margin: 0 10%;
	padding: 0;
	float: left;
	border-radius: 20px;
}

.content.reason .block .glid.textblock { 
	background-image: url("../images/reason/reason_bg.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 70%;
}

.content.reason .block .glid.textblock .flame { 
	width: 80%;
	height: 18vw;
	margin: 0 5% 50px;
	padding: 30px 5%;
	background-color: #FFF;
}

.content.reason .block .glid.textblock .title_reason { 
	width: 100%;
	margin: 0 0 2vw;
	color: #0058A6;
	font-weight: 700;
	font-size: 20px;
}

.content.reason .block .glid.textblock .title_reason span { 
	font-weight: 400;
	font-size: 60px;
}

.content.reason .block .glid.textblock .copy { 
	width: 100%;
	margin: 0 0 2vw;
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	font-size: 28px;
	text-align: center;
}

.content.reason .block .glid.textblock .message { 
	margin: 0 0 5vw;
}


/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 1200px */
/* **************************************************************** */
@media only screen and (max-width:1200px){

.content.reason .intro { width: 90%;margin: 0 5% 100px; }
.content.reason .intro .copy { width: 100%;	margin: 0 0 50px; }
.content.reason .intro .message { width: 100%;margin: 0; }

.content.reason .block .glid { width: 100%; }
.content.reason .block .glid.photo img { width: 60%;margin: 0 20%; }
.content.reason .block .glid.textblock .flame { height: auto; }

}

/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 980px */
/* **************************************************************** */
@media only screen and (max-width:980px){

.content.reason .intro .copy { font-size: 20px;	margin: 0 0 30px; }
.content.reason .intro .message { text-align: justify; }

.content.reason .block .glid.textblock .copy { font-size: 20px; }
.content.reason .block .glid.textblock .title_reason span { font-size: 40px; }

}

/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 580px */
/* **************************************************************** */
@media only screen and (max-width:580px){

.content.reason .intro .copy,
.content.reason .block .glid.textblock .copy { text-align: justify; }

.content.reason .block .glid.photo img { width: 90%;margin: 0 5%; }

}

/* **************************************************************** */
/*  RESPONSIVE  RAYOUT  MAX-WIDTH 480px */
/* **************************************************************** */
@media only screen and (max-width:480px){

.content.reason .block .glid.textblock .copy { float: left;margin-bottom: 30px; }

}