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

#mv_right{
	background-image:url("../img/mv.webp");
}

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  #mv_right {
    background-image:url("../img/mv@2x.webp");
  }
}


/*--------イントロ---------*/

#intro{
	width: 56%;
	max-width: 1000px;
	margin: 0 auto 27rem auto;
	display: grid;
	grid-template-columns: 24% 1fr;
	column-gap: 15.5%;
}

#intro_inner{
	display: contents;
}

#intro_left {
	width: auto;
	grid-column: 1;
	grid-row: 1 / 3;
}

#intro_right {
	width: auto;
	grid-column: 2;
	grid-row: 1;
}

#intro > p {
	grid-column: 2;
	grid-row: 2;
}

#intro h2{
	margin-bottom: 3rem;
}

#intro h2 span{
	display: block;
	font-size: 1.5vw;
	background: none;
	color: #000000;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: #000000;
	margin-bottom: 2rem;
}

#intro h2 span br{
	display: none;
}


/*-----------特長--------------*/

#merit{
	margin-bottom: 28rem;
}

#merit h2{
	text-align: center;
	margin-bottom: 9.5rem;
}

#merit_01 h2,
#merit_02 h2{
	text-align: left;
	margin-bottom: 3.5rem;
	line-height: 2em;
	font-size: 2vw;
}

#merit_01{
	width: 87.2%;
	background: #F7E4DF;
	padding: 9.5rem 8%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top-right-radius: 21rem;
	border-bottom-right-radius:5rem; 
	margin-bottom: 15rem;
}

#merit_02{
	width: 87.2%;
	background: #F7E4DF;
	padding: 9.5rem 8%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top-left-radius: 21rem;
	border-bottom-left-radius:5rem;
	margin-left: auto;
	margin-right: 0;
}

#merit h2 span{
	display: inline-block;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: #fff;
	margin-bottom: 2rem;
	padding: 23px 38px;
	background: #F18974;
	color: #fff;
	font-size: 2.3rem;
	border-radius: 35px 0 35px 0;
	border-bottom: 1.5rem;
	line-height: 0;
}

.point{
	display: inline-block;
	padding: 10px 10px 12px 10px;
	background: #F18974;
	color: #fff;
	border-radius: 100px;
	line-height: 0;
	margin-bottom: 1rem;
}

.youtube {
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-bottom: 2rem;
}

.youtube iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.merit_left{
	width: 33vw;
}

.merit_right{
	width: 28.5vw;
}

#merit li{
		padding-left: 1em;
		text-indent: -1em;
		margin-bottom: 1em;
}

/*----------ブレイク-------------*/

#break{
	text-align: center;
	margin-bottom: 28rem;
}

#break img{
	display: block;
	width: 10%;
	margin: 0 auto 2rem auto;
}

#break h2{
	margin-bottom: 3.5rem;
}

#break h2 br.br_spnone{
	display: none;
}


/*-----------お客様の声--------------*/

#review{
	width: 90%;
	background: #F7E4DF;
	border-top-right-radius: 260px;
	border-bottom-right-radius: 50px;
	padding: 21rem 0;
	margin-bottom: 27.8rem;
}

#review .h2_bg{
	font-size: 2.08vw;
    width: 72.93cqw;
    padding: 1.3cqw 5.2cqw 1.3cqw 34cqw;
    background: #ffffff;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    position: relative;
    margin-bottom: 29rem;
}

#review .h2_bg h2{
	text-align: center;
}

#review .h2_bg::before{
	content: "";
	position: absolute;
	top:48%;
	left:0;
	transform: translateY(-50%);
	width: 35%;
    height: 5px;
    border-bottom: 1px solid #F18974;
}

#review .h2_bg::after{
	content: "";
	background: url("../img/illust_01.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 7.35cqw;
    height: 11.5cqw;
    position: absolute;
    left: 25cqw;
    bottom: calc(100% + -18rem);
}

.message{
	width: 53.75cqw;
	padding: 3.48cqw 5cqw;
	position: relative;
	background: #ffffff;
	border-radius: 20px 120px 20px 20px;
	margin-bottom: 30rem;
}

.message:last-child{
	margin-bottom: 0;
}

.message:nth-child(odd){
	margin-left: 33%;
}

.message:nth-child(even){
	margin-left: 19.27%;
}

.message h3{
	width: 31.25cqw;
	padding: 15px 0;
	margin:-90px 0 30px 5.2cqw;
	text-align: center;
	background: linear-gradient(49deg,rgba(17, 181, 201, 1) 0%, rgba(247, 200, 211, 1) 100%);
	color:#ffffff;
	border-radius: 20px;
	font-size: 1.56vw;
}

.age{
	font-size: 1.3vw;
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: solid 1px #F18974;
}

#message_01:before{
	content: "";
	background: url("../img/illust_02.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 7.8cqw;
    height: 16.465cqw;
	position: absolute;
	left:-2cqw;
	bottom: calc(100% + -13rem);
}

#message_02:before{
	content: "";
    background: url(../img/illust_03.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 12.697cqw;
    height: 15.195cqw;
    position: absolute;
    left: -5cqw;
    bottom: calc(100% + -5rem);
}

#message_03:before{
	content: "";
	background: url("../img/illust_04.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 12.528cqw;
    height: 12.953cqw;
    position: absolute;
        left: -4cqw;
    bottom: calc(100% + -7rem);
}



@media (max-width: 1024px) {
	
	/*----------イントロ-----------*/

	#intro {
		width: 85%;
		max-width: none;
		margin: 0 auto 20rem;
		display: block;
	}

	#intro_inner {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		align-items: center;
	}

	#intro_left {
		width: 25%;
		flex-shrink: 0;
	}

	#intro_left img {
		width: 100%;
		height: auto;
		display: block;
	}

	#intro_right {
		width: 69%;
	}

	#intro_right h2 {
		margin: 0;
		font-size: 4.5vw;
		line-height: 1.45;
	}

	#intro_right h2 span {
		display: block;
		margin-bottom: 1.2rem;
		font-size: 4vw;
		line-height: 1.45;
	}

	#intro > p {
		width: 100%;
		margin-top: 3.5rem;
		font-size: 3vw;
		line-height: 2;
	}
	
	#intro h2 span br{
	display: inline;
	}
	
	/*-----------メリット--------------*/
	#merit h2{
		margin-bottom: 5.5rem;
	}
	
	#merit_01{
		width: 95%;
		padding: 9.5rem 8%;
		display: block;
		border-top-right-radius: 25rem;
		border-bottom-right-radius:5rem; 
		margin-bottom: 15rem;
	}

	#merit_02{
		width: 95%;
		padding: 9.5rem 8%;
		display: block;
		border-top-left-radius: 25rem;
		border-bottom-left-radius:5rem;
		margin-left: auto;
		margin-right: 0;
	}
	
	#merit h2 span {
        padding: 19px 25px;
        font-size: 2.5rem;
    }
	
	#merit_01 h2, #merit_02 h2 {
		font-size: 4vw;
		margin-bottom: 2rem;
	}
	
	
	.merit_left{
		width: 100%;
		margin-bottom: 7rem;
	}

	.merit_right{
		width: 100%;
	}
	
	.movie{
		width: 100%;
		height: 250px;
	}
	
	.point{
		padding: 10px 14px 17px 14px;
	}
	
	/*----------ブレイク-----------*/
	#break{
		text-align: center;
		margin:0 auto 17rem auto;
		width: 85%;
	}

	#break img{
		display: block;
		width: 30%;
		margin: 0 auto 2rem auto;
	}

	#break h2{
		margin-bottom: 3.5rem;
	}

	#break h2 br.br_spnone{
		display: inline;
	}
	
	#break p{
		text-align: left;
	}
	
	/*-----------お客様の声---------------*/
	#review{
		width: 100%;
		border-top-right-radius: 75px;
		padding: 6rem 0 10rem 0;
		margin-bottom: 14rem;
	}

	#review .h2_bg{
		font-size: 2.08vw;
        width: 92%;
        padding: 2cqw 5.2cqw 2cqw 13cqw;
        margin-bottom: 28rem;
	}

	#review .h2_bg::before{
		display: none;
	}

	#review .h2_bg::after{
		content: "";
		background: url("../img/illust_01.svg");
		background-size: contain;
		background-repeat: no-repeat;
		width: 15cqw;
        height: 18.8cqw;
        position: absolute;
        left: 5cqw;
        bottom: calc(100% + -18rem);
	}

	.message{
		width: 90%;
		padding: 4rem 5%;
		position: relative;
		background: #ffffff;
		border-radius: 15px 60px 15px 15px;
		margin: 0 auto 26rem auto;
	}

	.message:last-child{
		margin-bottom: 0;
	}

	.message:nth-child(odd){
		margin-left: auto;
	}

	.message:nth-child(even){
		margin-left: auto;
	}

	.message h3{
		width: auto;
        padding: 9px 23px;
        margin: 0;
        text-align: left;
        border-radius: 18px;
        position: absolute;
        right: 3%;
        top: -20px;
		font-size:3.5vw;
	}

	.age{
		font-size: 3.5vw;
		padding-bottom: 5px;
		margin-bottom: 5px;
		border-bottom: solid 1px #F18974;
	}

	#message_01:before{
		content: "";
		background: url("../img/illust_02.svg");
		background-size: contain;
		background-repeat: no-repeat;
		width:12.68cqw;
		height: 27.9cqw;
		position: absolute;
		left: 6cqw;
        bottom: calc(100% + -5rem);
	}

	#message_02:before{
		content: "";
		background: url("../img/illust_03.svg");
		background-size: contain;
		background-repeat: no-repeat;
		width:24.25cqw;
		height: 22.56cqw;
		position: absolute;
		left: 0cqw;
        bottom: calc(100% + -4.5rem);
	}

	#message_03:before{
		content: "";
		background: url("../img/illust_04.svg");
		background-size: contain;
		background-repeat: no-repeat;
		width: 21cqw;
        height: 20cqw;
        position: absolute;
        left: -2cqw;
        bottom: calc(100% + -4rem);
	}
}


@media (max-width: 767px) {
	/*--------------イントロ--------------*/
	
	#intro{
		margin-bottom: 15rem;
	}
	
	#intro > p {
		font-size: 4vw;
	}
	
	/*----------特長--------------*/
	
	#merit{
		margin-bottom: 17rem;
	}
	
	#merit h2{
		margin-bottom: 5.5rem;
	}
	
	#merit_01{
		padding: 6.5rem 8%;
		border-top-right-radius: 14rem;
		border-bottom-right-radius:5rem; 
		margin-bottom: 15rem;
	}

	#merit_02{
		padding: 6.5rem 8%;
		border-top-left-radius: 14rem;
		border-bottom-left-radius:5rem;
		margin-left: auto;
		margin-right: 0;
	}
	
	#merit h2 span {
		margin-bottom: 1rem;
		padding: 14px 25px;
		font-size: 1.5rem;
	}
	
	#merit_01 h2, #merit_02 h2 {
		font-size: 4.5vw;
		margin-bottom: 2rem;
	}
	
	.merit_left{
		margin-bottom: 4rem;
	}
	
	.movie{
		width: 100%;
		height: 250px;
	}
	
	.point {
        padding: 10px 14px 14px 14px;
    }
	
	/*-------------ブレイク-----------------*/
	
	#break{
		margin-bottom: 17rem;
	}
	
	/*-----------お客様の声---------------*/
	#review{
		border-top-right-radius: 75px;
		padding: 6rem 0 10rem 0;
		margin-bottom: 14rem;
	}

	#review .h2_bg{
        width: 92%;
        padding: 2cqw 5.2cqw 2cqw 17cqw;
        margin-bottom: 15rem;
	}
	
	#review .h2_bg h2{
		font-size: 4vw;
	}

	#review .h2_bg::before{
		content: "";
		position: absolute;
		top:48%;
		left:0;
		transform: translateY(-50%);
		width: 15%;
		height: 5px;
		border-bottom: 1px solid #F18974;
	}

	#review .h2_bg::after {
        width: 14cqw;
        height: 17.8cqw;
        left: 6cqw;
        bottom: calc(100% + -8rem);
    }

	.message{

		margin: 0 auto 13rem auto;
	}

	.message h3{
        padding: 9px 10px;
        border-radius: 7px;
        position: absolute;
        right: 7%;
        top: -20px;
	}

	#message_01:before{
		width:12.68cqw;
		height: 27.9cqw;
		left: 6cqw;
        bottom: calc(100% + -5rem);
	}

	#message_02:before{
		width:24.25cqw;
		height: 22.56cqw;
		left: 0cqw;
        bottom: calc(100% + -4.5rem);
	}

	#message_03:before{
		width: 21cqw;
        height: 20cqw;
        left: -2cqw;
        bottom: calc(100% + -4rem);
	}


}