@charset "utf-8";
/* CSS Document */
/* 
-------------------------------------------------- */
.bg01--area {
	padding:1.667% 0 4.667%;
	background: none;
}
.bg02--area {
	background: #cde1fb;
}
.bg02--area .acc { margin-top: 9.4%;}

.faq { display: none;}

@media (min-width: 641px) {
/* PC用 */
	.container { padding-top:56px;}
	.bg01--area iframe { height:400px;}
}
@media (max-width: 640px) {
/* SP用 */
	.bg01--area {
	}
	.bg01--area iframe { height:208px;}
}


/* .intro
-------------------------------------------------- */
.intro { margin:0 5.3333% 6.33333%; padding-bottom: 5%; background:#e9ebed;}
.intro dd { background:#fff;}
.intro .acc {
	margin:1% 5.333% 0;
	background: #fff;
}

.movie--howto--index { margin-bottom:10%;}

@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
	.movie--howto iframe { height:208px;}
}


/* howtoUse
-------------------------------------------------- */
.howtoUse h2 { text-align: center;}
.howtoUse h2 span {
	display:inline-block;
	margin: 0 auto; 
	padding: .4em .5em .5em;
	min-width:76%;
	font-size: 2.34em;
	font-weight: 500;
	color: #fff;
	background: #3fa9f5; 
	border-radius: 40px;
}
.howtoUse .img { position: relative;}
.howtoUse p {
	margin:0 5.333333%;
	padding-bottom: 1em;
	font-size:min(1.8em, 4.4vw);
	text-align: center; 
	line-height: 1.5; 
	color: #3fa9f5;
	border-bottom:1px solid #3fa9f5;
}
.howtoUse p:has(+ h2),
.howtoUse p:has(+ ul) { border-bottom: none;}
.howtoUse p span { color: #dc0084;}
.howtoUse .small { font-size:1.5em; color: #111;}
.howtoUse p small { display: block; margin-top: 1em; font-size:15px; color: #111; }
.howtoUse p + h2 { margin-top: 3em;}

.howtoUse .ul--step01 p {
	font-size: min(2.8em, 5.5vw);
	text-align: left;
	border: none;
}
.howtoUse .ul--step01 p small { color: #dc0084;}

.howtoUse .ul--step01 li:nth-child(2) .img .icn { 
	position: absolute; right: -2.3%; bottom:-19%;
	width:22%;
}

.howtoUse h3 { margin:0 5.33333% 1em; padding-left: 1.2em; font-size:min(24px, 4.3vw); font-weight: normal; line-height: 1.5;}
.howtoUse h3:first-letter { margin-left:-1.15em;}

.howtoUse .ul--howto01 li { margin-bottom: 0;}

.howtoUse .ok { display: flex; margin-right: 5.33333%; align-items: center;}
.howtoUse .ok .img { width:30%;}
.howtoUse .ok .txt { width:70%;}
.howtoUse .ok.ng .txt li { color: #dc0084;}
.howtoUse .ok.ng { margin-bottom: 1.8em;}

.howtoUse .txt02 { margin:0 5.333%; padding: .6em .3em .5em; background: #fff;}
.howtoUse .txt02 p { padding-bottom: 0.2em; font-size:min(18px, 3.3vw); text-align: left; border: none;}

.howtoUse .btn--detail { margin:3.6em 5.333333% 0;}
.howtoUse .btn--detail a {
	position: relative;
	display: block;
	padding: 1em 1em 1.2em;
	font-size:min(24px, 4vw);
	font-weight: 500;
	color: #fff;
	text-align: center;
	background: #4a4f5d;
}
.howtoUse .btn--detail a::before {
	content:'';
	position: absolute;
	right:7%; top:50%; transform: translate(50%, -50%) rotate(45deg);
	width:11px; height:11px;
	border-top:2px solid #fff;
	border-right:2px solid #fff;
}
.howtoUse .btn--detail a::after {
}

@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
}


/* 
-------------------------------------------------- */
@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
}