@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　reason
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* page-nav-area
-----------------------------------------------------------------*/
.page-nav-area{
	padding: 85px 0 100px;
	
}
.page-nav-list{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.page-nav-list li{
	max-width: 378px;
	width: calc((100% - 20px)/3);
	border-bottom: 1px solid #231815;
}
.page-nav-list li:nth-child(n+4){
	margin-top: 30px;
}
.page-nav-list li a{
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	padding-right: 25px;
	font-weight: bold;
	padding-bottom: 5px;
}
.page-nav-list li a::after{
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 20px;
	height: 12px;
	content: "";
	background: url(../img/reason/arw_down.svg) no-repeat;
	background-size: 100% auto;
	transition: .3s;
}
.page-nav-list li a:hover::after{
	top: 60%;
}
.page-nav-list li .num{
	flex-shrink: 0;
	margin-right: 15px;
	color: #9F0817;
	font-size: 5rem;
	font-family: 'Oswald', sans-serif;
	line-height: 1;
}
.page-nav-list li .ttl{
	line-height: 1.4;
}


/* reason
-----------------------------------------------------------------*/
.reason{
	margin-bottom: 100px;
}
.reason-hd{
	position: relative;
	margin-bottom: 50px;
	padding: 0 20px;
	background: #231815;
	color: #FFF;
	font-weight: bold;
}
.reason-hd::before{
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 50%;
	height: 100%;
	content: "";
	background: #9F0817;
}
.reason-hd .inner{
	position: relative;
	max-width: 1200px;
	padding: 0;
	background: #231815;
}
.reason-hd h2{
	display: flex;
	align-items: center;
}
.reason-hd h2 .num{
	flex-shrink: 0;
	clip-path: polygon(0 0, 100% 0%, calc(100% - 50px) 100%, 0% 100%);
	padding: 20px 80px 20px 0;
	background: #9F0817;
	line-height: 1;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	font-size: 8rem;
}
.reason-hd h2 .num small{
	display: block;
	width: fit-content;
	margin-inline: auto;
	font-size: 2rem;
}
.reason-hd h2 .ttl{
	padding-left: 10px;
	font-size: 3.2rem;
	line-height: 1.2;
}
.reason h3._has_bg{
	width: fit-content;
	margin-inline: auto;
	padding: 15px 45px 20px;
	border-radius: 100vmax;
	background: #231815;
	color: #FFF;
	font-size: 2.2rem;
	line-height: 1;
}
.reason .reason-cont > .txt{
	line-height: 2.25;
}
.reason .btn-base{
	margin-top: 15px;
}
.reason .btn-base a{
	max-width: 240px;
	height: 40px;
	line-height: 1;
}
.reason .btn-base a span::after{
	right: 20px;
	width: 24px;
	height: 6px;
}
.reason .btn-base a:hover span::after{
	right: 15px;
}
.reason .btn-base a span{
	width: 100%;
	padding: 0 40px 0 20px;
	font-size: 1.3rem;
}

/* reason01 ------------------------------*/
.reason01 .reason-cont .txt:nth-child(1){
	margin-bottom: 50px;
	font-weight: 500;
}
.reason01 .chinese-maker h3{
	margin-bottom: 25px;
}
.reason01 .chinese-maker h3 + .txt{
	margin-bottom: 35px;
	text-align: center;
	font-weight: 500;
	line-height: 2.25;
}
.chinese-maker-list > div{
	padding: 0 3.75%;
	border-radius: 12px;
	background: #E8E7E8;
}
.chinese-maker-list > div:nth-child(n+2){
	margin-top: 10px;
}
.chinese-maker-list dt{
	position: relative;
	display: flex;
	align-items: center;
	padding: 30px 0;
	cursor: pointer;
}
.chinese-maker-list dt::after{
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 45px;
	height: 45px;
	content: "";
	background: url(../img/reason/ico_plus.svg) no-repeat;
	background-size: 100% auto;
}
.chinese-maker-list dt.open::after{
	background-image: url(../img/reason/ico_minus.svg);
}
.chinese-maker-list dt .logo{
	flex-shrink: 0;
	margin-right: 40px;
}
.chinese-maker-list dt .txt{
	padding-right: 100px;
	font-weight: bold;
}
.chinese-maker-list dd{
	display: none;	
	padding-bottom: 45px;
}
.chinese-maker-list dd .layout-box{
	flex-wrap: wrap;
	align-items: flex-start;
}
.chinese-maker-list dd .pic{
	max-width: 364px;
	margin-right: 20px;
}
.chinese-maker-list dd .txt-area{
	max-width: 709px;
}
.chinese-maker-list dd .txt-area h4{
	color: #A00817;
}
.chinese-maker-list dd .txt-area h4 + p{
	font-weight: 500;
}
.chinese-maker-list dd .txt-area p + h4{
	margin-top: 15px;
}

/* reason02 ------------------------------*/
.reason02 .reason-cont .txt{
	max-width: 590px;
	line-height: 2.25;
	font-weight: 500;
}
.reason02 .reason-cont .pic{
	max-width: 580px;
	margin-left: 20px;
}

/* reason03 ------------------------------*/
.reason03 .layout-box > div{
	max-width: 580px;
	width: calc(50% - 10px);
}
.reason03 .reason-cont h3{
	margin-bottom: 15px;
	font-size: 2.2rem;
	line-height: 1.5;
}
.reason03 .reason-cont .txt{
	margin-bottom: 20px;
	line-height: 2.25;
}

/* reason04 ------------------------------*/
.reason04 .reason-cont h3{
	margin-bottom: 15px;
	font-size: 2.2rem;
	line-height: 1.5;	
}
.reason04 .reason-cont .txt{
	line-height: 2.25;
	font-weight: 500;
}
.reason04 .btn-list{
	display: flex;
	margin-bottom: 30px;
}
.reason04 .btn-list li:nth-child(n+2){
	margin-left: 25px;
}
.reason04 .btn-list li:nth-child(1){
	max-width: 290px;
	width: calc(50% - 10px);
}
.reason04 .btn-list li:nth-child(1) .btn-base a{
	max-width: 290px; 
}
.reason04 .btn-list li:nth-child(2){
	max-width: 210px;
	width: calc(50% - 10px);
}
.reason04 .layout-box{
	margin-bottom: 45px;
}
.reason04 .layout-box .pic{
	max-width: 585px;
	width: calc(50% - 10px);	
}

/* reason05 ------------------------------*/
.reason05 .reason-cont .txt:nth-child(1){
	margin-bottom: 45px;
	font-weight: 500;
}
.reason05 .competitors-comparison h3{
	margin-bottom: 20px;
}
.reason05 .competitors-comparison{
	margin-bottom: 60px;
}
.reason05 table{
	width: 100%;
	border-collapse: collapse;
	font-weight: 500;
}
.reason05 table th,
.reason05 table td{
	padding: 15px 20px;
	border: 1px solid #C9CACA;
}
.reason05 table tr th:nth-child(1){
	width: 20%;
	background: #766F6E;
	color: #FFF;
	text-align: left;
	vertical-align: top;
}
.reason05 table tr th:nth-child(1) small{
	display: inline-block;
	text-indent: -.5em;
}
.reason05 table .ensei{
	width: 40%;
	background: #FDEADF;
}
.reason05 table tr *:nth-child(2) strong{
	color: #A00817;
}
.reason05 table tr:nth-child(1) th{
	vertical-align: middle;
}
.reason05 .points h3{
	margin-bottom: 30px;
}
.reason05 .point-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.reason05 .point-list > div{
	max-width: 580px;
	width: calc(50% - 10px);
}
.reason05 .point-list > div:nth-child(n+3){
	margin-top: 30px;
}
.reason05 .point-list dt{
	position: relative;
	margin-bottom: 15px;
	padding-left: 20px;
	font-size: 2rem;
	font-weight: bold;
}
.reason05 .point-list dt::before{
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 6px;
	height: 100%;
	content: "";
	border-radius: 100vmax;
	background: #9F0817;
}
.reason05 .point-list dd{
	line-height: 2.25;
	font-weight: 500;
}

/* reason06 ------------------------------*/
.reason06{
	margin-bottom: 220px;
}
.reason06 .layout-box{
	flex-direction: row-reverse;
}
.reason06 .txt-area{
	max-width: 590px;
}
.reason06 .txt-area .txt{
	line-height: 2.25;
	font-weight: 500;
}
.reason06 .txt-area .txt + .txt{
	margin-top: 30px;
}
.reason06 .txt-area .txt strong{
	color: #9F0817;
}
.reason06 .pic{
	max-width: 580px;
	margin-left: 20px;
}
.reason06 .btn-base{
	margin-top: 25px;
}
.reason06 .btn-base a{
	max-width: 220px;
}

























/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

/* page-nav-area
-----------------------------------------------------------------*/
	.page-nav-area{
		padding: 45px 0;		
	}
	.page-nav-list{
		display: block;
	}
	.page-nav-list li{
		width: auto;
		margin-inline: auto;
	}
	.page-nav-list li:nth-child(n+2){
		margin-top: 15px;
	}
	.page-nav-list li a:hover::after{
		top: 50%;
	}
	.page-nav-list li .num{
		margin-right: 10px;
		font-size: 3.2rem;
	}
	.page-nav-list li .ttl{
		font-size: 1.3rem;
		text-align: justify;
	}


/* reason
-----------------------------------------------------------------*/
	.reason{
		margin-bottom: 60px;
	}
	.reason-hd{
		margin-bottom: 25px;
	}
	.reason-hd h2 .num{
		clip-path: polygon(0 0, 100% 0%, calc(100% - 30px) 100%, 0% 100%);
		padding: 15px 30px 15px 0;
		font-size: 3.5rem;
	}
	.reason-hd h2 .num small{
		font-size: 1rem;
	}
	.reason-hd h2 .ttl{
		padding-left: 5px;
		font-size: 1.7rem;
		line-height: 1.4;
	}
	.reason h3._has_bg{
		padding: 15px 30px;
		font-size: 1.5rem;
	}
	.reason .reason-cont > .txt{
		line-height: 1.6;
	}
	.reason .btn-base{
		margin-top: 15px;
	}
	.reason .btn-base a{
		max-width: 270px;
		height: 50px;
	}
	.reason .btn-base a span::after{
		right: 15px;
		width: 30px;
		height: 7px;
	}
	.reason .btn-base a:hover span::after{
		right: 15px;
	}
	.reason .btn-base a span{
		padding: 0 40px 0 30px;
	}

/* reason01 ------------------------------*/
	.reason01 .reason-cont .txt:nth-child(1){
		margin-bottom: 30px;
		text-align: justify;
	}
	.reason01 .chinese-maker h3{
		margin-bottom: 15px;
	}
	.reason01 .chinese-maker h3 + .txt{
		margin-bottom: 25px;
		line-height: 1.6;
		text-align: justify;
	}
	.chinese-maker-list > div{
		padding: 0 20px;
		border-radius: 10px;
	}
	.chinese-maker-list dt{
		display: block;
		padding: 15px 0;
	}
	.chinese-maker-list dt::after{
		width: 30px;
		height: 30px;
	}
	.chinese-maker-list dt .logo{
		width: 150px;
		margin: 0 auto;
	}
	.chinese-maker-list dd{
		padding-bottom: 30px;
	}
	.chinese-maker-list dd .layout-box{
		display: block;
	}
	.chinese-maker-list dd .pic{
		max-width: none;
		margin: 0 0 15px;
	}	
	.chinese-maker-list dd .txt-area{
		max-width: none;
	}
	.chinese-maker-list dd .pic + .txt{
		margin-bottom: 15px;
		line-height: 1.6;
		text-align: justify;
	}
	.chinese-maker-list dd .txt-area h4 + p{
		font-size: 1.2rem;
		text-align: justify;
	}
	.chinese-maker-list dd .txt-area p + h4{
		margin-top: 10px;
	}

/* reason02 ------------------------------*/
	.reason02 .reason-cont .layout-box{
		display: block;
	}
	.reason02 .reason-cont .txt{
		max-width: none;
		line-height: 1.6;
	}
	.reason02 .reason-cont .pic{
		max-width: none;
		margin: 15px 0 0;
	}

/* reason03 ------------------------------*/
	.reason03 .layout-box{
		display: block;
	}
	.reason03 .layout-box > div{
		max-width: none;
		width: auto;
	}
	.reason03 .layout-box > div:nth-child(n+2){
		margin-top: 20px;
	}
	.reason03 .reason-cont h3{
		margin-bottom: 10px;
		font-size: 1.5rem;
	}
	.reason03 .reason-cont .txt{
		margin-bottom: 15px;
		line-height: 1.6;
		text-align: justify;
	}

/* reason04 ------------------------------*/
	.reason04 .reason-cont h3{
		margin-bottom: 15px;
		font-size: 1.5rem;
	}
	.reason04 .reason-cont .txt{
		line-height: 1.6;
		text-align: justify;
	}
	.reason04 .btn-list{
		display: block;
		margin-bottom: 30px;
	}
	.reason04 .btn-list li:nth-child(n+2){
		margin: 13px 0 0;
	}
	.reason04 .btn-list li:nth-child(1){
		max-width: 305px;
		width: 100%;
	}
	.reason04 .btn-list li:nth-child(1) .btn-base a{
		max-width: 305px; 
	}
	.reason04 .btn-list li:nth-child(2){
		max-width: 230px;
		width: 100%;
	}
	.reason04 .layout-box{
		display: block;
		margin-bottom: 40px;
	}
	.reason04 .layout-box .pic{
		max-width: none;
		width: 100%;	
	}
	.reason04 .layout-box .pic:nth-child(n+2){
		margin-top: 15px;
	}

/* reason05 ------------------------------*/
	.reason05 .reason-cont .txt:nth-child(1){
		margin-bottom: 30px;
		text-align: justify;
	}
	.reason05 .competitors-comparison h3{
		margin-bottom: 15px;
	}
	.reason05 .competitors-comparison{
		margin-bottom: 30px;
	}
	.reason05 .table-area{
		width: calc(100% + 20px);
		padding-bottom: 15px;
		overflow: auto;
	}
	.reason05 table{
		width: 560px;
		margin-right: 20px;
	}
	.reason05 table th,
	.reason05 table td{
		padding: 10px;
	}
	.reason05 table tr th:nth-child(1){
		width: 20%;
	}
	.reason05 table tr th:nth-child(2),
	.reason05 table td th:nth-child(2){
		width: 40%;
	}
	.reason05 table th img{
		width: 130px;
	}
	.reason05 .points h3{
		margin-bottom: 30px;
	}
	.reason05 .point-list{
		display: block;
	}
	.reason05 .point-list > div{
		max-width: none;
		width: 100%;
	}
	.reason05 .point-list > div:nth-child(n+2){
		margin-top: 25px;
	}
	.reason05 .point-list dt{
		margin-bottom: 10px;
		padding-left: 15px;
		font-size: 1.7rem;
		line-height: 1.6;
	}
	.reason05 .point-list dt::before{
		width: 4px;
	}
	.reason05 .point-list dd{
		line-height: 1.6;
		text-align: justify;
	}

/* reason06 ------------------------------*/
	.reason06{
		margin-bottom: 100px;
	}
	.reason06 .layout-box{
		display: block;
	}
	.reason06 .txt-area{
		max-width: none;
	}
	.reason06 .txt-area .txt{
		line-height: 1.6;
		text-align: justify;
	}
	.reason06 .txt-area .txt + .txt{
		margin-top: 15px;
	}
	.reason06 .pic{
		max-width: none;
		margin: 0 0 20px 0;
	}
	.reason06 .btn-base{
		margin-top: 20px;
	}
	.reason06 .btn-base a{
		max-width: 240px;
	}


}