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

.main_image { background-image: url("../../../../uploads/2024/10/main_reason.webp"); }

.contents.common.reason .wrapper {
	width: 100%;
	float: left;
	display:flex;
	text-align: center;
	padding: 0 30px;
	justify-content: center;
}

.contents.common.reason .inner {
	width: 100%;
	max-width: 1860px;
	margin: 0 auto;
	padding: 0;
	background-color: #FFF;
	border-radius: 30px;
	text-align: justify;
}

.reason .flow {
	width: 90%;
	margin: 50px 5%;
	padding: 0;
	float: left;
}

.reason .flow .copy {
	width: 100%;
	margin: 50px 0;
	padding: 0;
	float: left;
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.7em;
}

.reason .flow .copy br { display: none; }

.reason .flow .message {
	width: 80%;
	margin: 0 10% 50px;
	padding: 0;
	float: left;
}

.reason h3 {
	width: 80%;
	margin: 0 5% 20px;
	padding: 0 5%;
	border-bottom: #ED6C00 1px solid;
}

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

.reason .block .glid {
	width: 50%;
	margin: 50px 0;
	padding: 0;
	float: right;
}

.reason .block.client .glid { float: left; }

.reason .block .glid h2 {
	width: 90%;
	margin: 0 5% 50px;
	padding: 0 0 0 10px;
	font-size: 24px;
	background-image: url("../image/common/cub_orange.png");
	background-repeat: repeat-y;
	background-position: left;
	line-height: 37px;
}

.reason .block .glid.photo { float: left; }
.reason .block.client .glid.photo { float: right; }

.reason .block .glid.photo img {
	width: 90%;
	margin: 50px 5% 50px;
	padding: 0;
	float: left;
}

.reason .block .glid p {
	width: 90%;
	max-width: 800px;
	margin: 0 auto;
	line-height: 30px;
}

.readmore1 {
	width: 90%;
	margin: 0 5% 20px;
	padding: 0;
	float: left;
}

.readmore1 .point {
	letter-spacing: 0;
	font-weight: 400;
	margin: 0 1em 0 0;
	color: #ED6C00;
	font-size: 15px;
}

.readmore1 .point span {
	font-weight: 700;
	font-size: 20px;
}

.readmore1 h3 {
	width: auto;
	margin: 0;
	padding: 0;
	float: left;
	border: none;
}

.readmore1 .btn::after { 
	content: "▼";
	font-size: 10px;
	position: relative;
	top: -5px;
	text-align: center;
}

.contents.common.reason .readmore1 p.btn {
	width: 20px;
	height: 20px;
	cursor: pointer;
	background-color: #ed6c00;
	color: #FFF;
	padding: 0;
	margin: 3px 0 0 10px;
	text-align: center;
	transition:all .2s ease;
	font-weight: 700;
	float: left;
	border-radius: 10px;
}

.readmore1 .content_more {
  display: none;
  width: 100%;
  margin: 50px 0;
}


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



}


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

.reason .flow { width: 100%;margin: 50px 0; }
.reason .flow .copy br { display: block; }

.reason .block .glid { width: 100%;margin: 50px 0 0; }

.reason .block .glid.photo {
	text-align: center;
	display: flex;
}

.reason .block .glid.photo img {
	width: 90%;
	max-width: 800px;
	margin: 0 auto;
	float: none;
}

}

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

.reason .flow .copy {
	width: 90%;
	margin: 0 5% 30px;
	padding: 0;
	text-align: justify;
	font-size: 20px;
}

.reason .flow .message { width: 90%;margin: 0 5% 50px; }


}

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

.contents.common.reason h2 { font-size: 18px;line-height: 25px; }

.reason h3 { font-size: 16px; }

.readmore1 h3 { width: 100%; }

.contents.common.reason .readmore1 p.btn {
	width: 50%;
	margin: 10px 25%;
}

}