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


#pankuzu,
.page-header{
	display:none;
}


.moku-section-title{
	text-align:center;
	margin-bottom:50px;
}


.moku-subtitle{
	font-size:30px;
	margin-bottom:25px;
	font-weight:bold;
}
.moku-section-title .moku-subtitle{
	margin-bottom:10px;
}


.moku-title{
	font-weight:bold;
	font-size:42px;
	margin-bottom:25px;
}
.moku-title.big{
	font-size:60px;
}
.moku-title sup{
	font-size:50%;
}


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

.moku-section-title{
	margin-bottom:35px;
}

.moku-subtitle{
	font-size:20px;
	margin-bottom:15px;
}
.moku-title{
	font-size:28px;
	margin-bottom:15px;
}
.moku-title.big{
	font-size:40px;
}


}



#moku-change .mainimg{
	margin-bottom:60px;
}



/*
===== moku-intro =====
*/

@media print, screen and (min-width: 1001px) {

.moku-intro .inner{
    display:flex;
	justify-content:space-between;
	column-gap: 40px;

}

.moku-intro .text{
	flex:1;
}
.moku-intro .img{
	width:585px;
}

}

.moku-intro .img .notes{
	margin-top:10px;
	font-size:90%;
}

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

.moku-intro .img{
	width:585px;
	margin-left:auto;
	margin-right:auto;
}

}

.moku-intro .twentytwenty-handle{
	transition: all .3s;
}

.moku-intro .inview .twentytwenty-handle{
	transition: all .0s;
}




/*
===== moku-voice =====
*/


.moku-voice .inner{

}
.moku-voice .inner:after{content: ""; display: block; clear: both;height: 0;}

.moku-voice .group{
	margin-bottom:70px;
	position:relative;
	font-size:14px;
}

@media print, screen and (min-width: 769px) {

.moku-voice .group{
	width:calc( (100% - 70px) / 2);
	float:left;
}

.moku-voice .group:nth-child(even){
	float:right;
}

}

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

.moku-voice .group{
	margin-bottom:45px;
}
.moku-voice .group:last-child{
	margin-bottom:0;
}


}

.moku-voice .group h3{
}

.moku-voice .group .img{
	position:relative;
}
.moku-voice .group-inner{
    display:flex;
	column-gap: 15px;
	align-items:center;

}
.moku-voice .group:nth-child(even) .group-inner{
    flex-direction:row-reverse;


}

.moku-voice .group .text{
	flex:1;
}

.moku-voice .group p:last-child{
	margin-bottom:0;
}


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

.moku-voice .group .img{
	width:120px;
}


}


@media print, screen and (min-width: 769px) {

.moku-voice .group1{
	left:40px;
}
.moku-voice .group1 h3{
	text-align:right;
	margin-right:35px;
}



.moku-voice .group2{
	padding-top:120px;
}
.moku-voice .group2 h3{
	margin-left:15px;
}

.moku-voice .group3 h3{
	text-align:right;
	margin-right:15px;
}


.moku-voice .group4{
	right:40px;
	margin-bottom:0;
}
.moku-voice .group3 h4{
	position:relative;
	left:-10px;
}

}


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

.moku-voice .group h3{
	text-align:center;
}
.moku-voice .group h3 img{
	width:280px;
}



}

/*
===== moku-change =====
*/

.moku-change{
	padding-bottom:30px;
}

.moku-change .top-area{
	text-align:center;
}
.moku-change .top-area .inner{
	display:inline-block;
	text-align: left;
}

.moku-change .top-area h2{
	margin-bottom:35px;
}
.moku-change .top-area h2 span{
	font-size:42px;
	display:inline-block;
	color:#fff;
	background:#231815;
	margin-bottom:10px;
	padding:2px 10px;
}

.moku-change .top-area h3{
	text-align:center;
	position:relative;
	padding:5px 5px 25px 5px;
	font-size:40px;
	margin-bottom:40px;
	background:url(../img/moku-change/change/title.png) center no-repeat;
	background-size:100% 100%;

}


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

.moku-change .top-area{
	margin-left:15px;
	margin-right:15px;
}

.moku-change .top-area h2{
	margin-bottom:10px;
}

.moku-change .top-area h2 span{
	font-size:22px;
	padding:2px 5px;
}
.moku-change .top-area h3{
	font-size:22px;
	margin-bottom:30px;
}


}


/* group */


.moku-change h4{
	text-align:center;
	font-size:40px;
	margin-bottom:25px;
}

.moku-change .group{
	margin-bottom:70px;
}


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

.moku-change .group{
	border-bottom:1px solid #dad9d7;
	margin-bottom:0;
	padding-bottom:50px;
}

.moku-change .group:nth-child(even){
	background:#f9f7f8;
	padding-top:50px;
	margin-bottom:50px;
}

.moku-change h4{
	font-size:28px;
}

}

.moku-change .group-inner{
    display:flex;
    flex-wrap:wrap;
	justify-content:space-between;

}

.moku-change .group .child{
	width:calc( (100% - 80px) / 2);
	position:relative;
}
.moku-change .group .before{
	z-index:2;
}

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

.moku-change .group-inner{
	margin:0 auto;
	width:460px;


}
.moku-change .group .child{
	width:100%;
}



}

.moku-change .group .title{
    display:flex;
    flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	column-gap: 15px;
	font-size:20px;
	
	margin-bottom:20px;

}

.moku-change .group .body{
	border:5px solid #dbdbdb;
	position:relative;
	border-radius: 25px;
	padding:45px 15px 25px 15px;
	text-align:center;
	background:#fff;

}

.moku-change .group .after .body{
	border-color:#b1adae;
}



.moku-change .group .before .body:before{
	background: url(../img/moku-change/change/bolda.png) center no-repeat;
	background-size:contain;
	width:132px;
	height:77px;
	content:"";
	
	position:absolute;
	top:50%;
	right:-115px;
	
	transform: translate(0%, -50%);


}

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

.moku-change .group .title .label img{
	width:55px;
}

.moku-change .group .before .body{
	margin-bottom:100px;
}


.moku-change .group .before .body:before{
	background-image:url(../img/moku-change/change/bolda-sp.png);
	width:120px;
	height:110px;
	top: auto;
	right: auto;
	
	left:50%;
	bottom:-100px;
	
	transform: translate(-50%, -0%);
	
}


}

.moku-change .group .body .label{
	position:absolute;
	left:0;
	top:0;
	background:#dbdbdb;
	width:95px;
	text-align:center;
	font-weight:bold;
	padding:3px 0;
	border-radius: 15px 0 0 0;
	color:#585657;
	font-size:18px;

}
.moku-change .group .after .body .label{
	background:#b1adae;
	color:#fff;
}


.moku-change .group .body .img{
	margin-bottom:20px;
}

.moku-change .group .body .text{
	font-size:20px;
	font-weight:bold;
}





/*
===== moku-qa =====
*/




.moku-qa dl{
	margin-bottom:25px;
	background:#f9f7f8;
}

.moku-qa section:last-child dl{
	border-bottom:0;
	margin-bottom:0;
}

.moku-qa dt,
.moku-qa dd{
	position:relative;
	padding:15px 15px 15px 85px;
}

.moku-qa dt{
	border-bottom:1px solid #d2d2d2;
}
.moku-qa dt:before,
.moku-qa dd:before{
	background: url(../img/moku-change/faq-q.png) center no-repeat;
	background-size:contain;
	width:26px;
	height:26px;
	content:"";
	
	position:absolute;
	left:40px;
	top:15px;


}
.moku-qa dd{
}

.moku-qa dd:before{
	background-image:url(../img/moku-change/faq-a.png);
}

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

.moku-qa dt,
.moku-qa dd{
	padding:12px 15px 12px 55px;
}
.moku-qa dt:before,
.moku-qa dd:before{
	left:15px;
	top:12px;
}


}

/*
===== moku-guide =====
*/

.moku-guide .line{
	background:#cdcbcc;
	height:1px;
}
.moku-guide .line-top{
	margin-bottom:90px;
}
.moku-guide .line-bottom{
	margin-top:90px;
}


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

.moku-guide .line-top{
	margin-bottom:40px;
}
.moku-guide .line-bottom{
	margin-top:40px;
}


}