@charset "utf-8";

/* ==================================================================

	advantage.css
	
=================================================================== */

/* --------------------------------
   □ 共通
-------------------------------- */ 
.contents{
}
.contents main {
	padding-bottom: 120px;
}
.contents main section .explain .title._lv3 > span {
    display: block;
    margin-bottom: 8px;
    font-size: 1.6rem;
    letter-spacing: 0.06em;
    text-decoration: underline;
	font-family: "Hind", sans-serif;
    font-weight: 400;
	text-align: left;
}
.contents main section .explain .title._lv3 {
    font-size: 4.0rem;
    margin-bottom: 30px;
}
.contents main section .explain .title._lv3 > small {
    display: block;
    font-size: 1.8rem;
    margin-top: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.animation-left.inview.confirmed{
	animation-duration: 0.8s;	
	-webkit-animation-duration: 0.8s;
}
.animation-right.inview.confirmed{
	animation-duration: 0.8s;	
	-webkit-animation-duration: 0.8s;	
}
.contents main section .explain .buttonStyle {
	text-align: left;
}

/* SP用
-------------------------------------------- */
@media only screen and
(max-width : 767px) {

	.contents{
		padding-bottom: 0;
	}
	.contents main {
		padding-bottom: 80px;
	}
	.contents main section .explain .buttonStyle {
		margin-bottom: 20px;
	}
}


/* SP用
-------------------------------------------- */
@media only screen and
(max-width : 767px) {

	.contents main .accentArea{
		margin: 80px 0 60px;
		width: 100%;
	}
	.contents main .accentArea .inner{
		padding: 0;
		margin: 0 4%;
	}
	.accentArea h1{
		text-align: center;
	}
	.accentArea h1 span{
		width: 60%;
		margin: 0 auto;
	}
	.accentArea h1 em.en{
		margin-top: 6%;
	}
	
}

/* --------------------------------
   □ .pointArea
-------------------------------- */ 
.contents .pointArea{
	margin-bottom: 0;
	padding: 76px 0;
	background-color: #fff;
}
.contents .pointArea .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.contents .pointArea.leftStyle .container {
	flex-direction: row-reverse;
}
.contents .pointArea .explain{
	position: relative;
	width: 510px;
}
	.contents .pointArea .explain p.no{
		margin-bottom: 56px;
	}

	.contents .pointArea .explain .decoration{
		position: absolute;
		top: 0;
	}
	.contents .pointArea .explain .decoration1{
		left: 184px;
	}
	.contents .pointArea .explain .decoration2{
		left: 366px;
	}

	.contents .pointArea .explain h2{
		font-size: 175%;
		margin-bottom: 45px;
	}
	.contents .pointArea .explain p.text{
		line-height: 2;
	}

.contents .pointArea div.image{
	position: relative;
}

/* SP用
-------------------------------------------- */
@media only screen and
(max-width : 767px) {

	.contents .pointArea{
		margin-bottom: 40px;
		padding: 52px 0;
	}
	.contents .pointArea .container {
        flex-direction: column;
        align-items: center;
		gap: 20px 0;
	}
		.contents .pointArea .container > * {
			width: 100%!important;
			max-width: inherit!important;
			min-width: inherit!important;
		}
	.contents .pointArea.leftStyle .container {
        flex-direction: column;
	}
	.contents .pointArea .explain{
		position: relative;
	}
		.contents .pointArea .explain .decoration{
			position: absolute;
			top: 0;
		}
		.contents .pointArea .explain .decoration1,
		.contents .pointArea .explain .decoration2{
			left: auto!important;
			right: 0;
			display: block;
		}
}


/* --------------------------------
   □ #point4
-------------------------------- */ 
#point4 .container{
	display: block;
}
#point4 .explain{
	display: flex;
	width: 100%;
	justify-content: space-between;
}
#point4 .explain h3{
	width: 240px;
}
#point4 .explain .text{
	width: 754px;
}
#point4-images{
	width: 100%;
	padding: 64px;
	background: #fff;
	border-radius: 8px;
	border: 1px solid #dfdfdf;
	text-align: center;
	margin-top: 40px;
	box-sizing: border-box;
}

/* SP用
-------------------------------------------- */
@media only screen and
(max-width : 767px) {
	
	#point4 .explain{
        flex-direction: column;
        align-items: center;
		gap: 0 0;
	}
	#point4 .explain h3{
		width: 100%;
	}
	#point4 .explain .text{
		width: 100%;
		margin-bottom: 0;
	}
	#point4-images{
		padding: 20px;
		margin-top: 30px;
	}
}