@charset "UTF-8";
/* sp(320px) */

/* headline */
#pageFlow #headline {
	background-image: url(../img/flow/bg_headline_sp.jpg);
	background-position: 50% 50%;
}
#pageFlow .msg_top {
	font-size: 14px;
	font-weight: normal;
	text-align: left;
}
#pageFlow .msg_top span {
	display: block;
	font-size: 16px;
	font-weight: bold;
	color: #f467d2;
	margin-block-start: .4em;
}

#pageFlow #flow ol {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	column-gap: 0;
	row-gap: 20px;
}
#pageFlow #flow ol li {
	list-style: none;
	position: relative;
}
#pageFlow #flow ol li:not(:last-of-type)::after {
	content: '';
	width: 20px;
	background: #62a2f8;
	display: inline-block;
	aspect-ratio: 2;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	position: absolute;
	inset: auto auto -6px 50%;
}
#pageFlow #flow ol li p {
	margin-block-start: 1.2em;
	padding-inline: 1.4em;
}
/* フォームエリア */
#pageFlow #form_area {
	background-color: #f8f8f8;
}
#pageFlow #form_area .hl_form {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
	color: #2f3333;
	text-align: center;
}
#pageFlow #form_area .kiyaku {
	display: grid;
	grid-template-columns: 33px auto;
	grid-template-rows: auto;
	column-gap: .8em;
	row-gap: 0;
	margin-block-start: 1.4em;
}
#pageFlow #form_area .kiyaku a {
	text-decoration: underline;
}
#pageFlow #form_area .caution {
	margin-block-start: 2em;
	border: 1px solid #a4a4a4;
	padding: 1.2em 2em;
}
#pageFlow #form_area .check {
	margin-block-start: 2.4em;
}
#pageFlow #form_area .check > div:nth-of-type(2) {
	margin-block-start: .6em;
}
#pageFlow #form_area .check a {
	text-decoration: underline;
}

#pageFlow .form_btm {
	background-color: #fff;
}
#pageFlow #policy {
	block-size: 10em;
	overflow-x: hidden;

}
#pageFlow #policy .tl {
	font-weight: bold;
	margin-block-end: .6em;
}

@media handheld, print, screen and (min-width: 375px) {
/* iphone6 */


/* end of media query(iphone6) */	
}



@media handheld, print, screen and (min-width: 414px) {
/*  iPhone6 Plus */

/* end of media query(iPhone6 Plus) */	
}



@media handheld, print, screen and (min-width: 480px) {
/* tablet */

/* headline */
#pageFlow #headline {
	background-image: url(../img/flow/bg_headline.jpg);
	background-position: 50% 0%;
}

#pageFlow .msg_top {
	font-size: 15px;
}
#pageFlow .msg_top span {
	font-size: 17px;
}

#pageFlow #flow ol {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
	column-gap: 15px;
	row-gap: 0;
}
#pageFlow #flow ol li:not(:last-of-type)::after {
	width: 8px;
	aspect-ratio: 1/1.8;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	inset: 18% -12px auto auto;
}
#pageFlow #flow ol li p {
	margin-block-start: 1.2em;
	padding-inline: .2em;
}

/* フォームエリア */
#pageFlow #form_area .hl_form {
	font-size: 22px;
}
	@media (-webkit-min-device-pixel-ratio: 2){
		

	/* end of media query(retina) */	
	}

/* end of media query(tablet) */	
}



@media handheld, print, screen and (min-width: 620px) {
/* iPad */

#pageFlow .msg_top {
	font-size: 15px;
	text-align: center;
}
#pageFlow .msg_top span {
	font-size: 18px;
}

#pageFlow #flow ol {
	column-gap: 18px;
}
#pageFlow #flow ol li:not(:last-of-type)::after {
	width: 10px;
	inset: 25% -15px auto auto;
}

/* フォームエリア */
#pageFlow #form_area .hl_form {
	font-size: 26px;
}




/* end of media query(iPad) */	
}



@media handheld, print, screen and (min-width: 900px) {
/* pc */

#pageFlow .msg_top {
	font-size: 16px;
}
#pageFlow .msg_top span {
	font-size: 20px;
}
/* フォームエリア */
#pageFlow #form_area .hl_form {
	font-size: 30px;
}

/* end of media query(pc) */
}

@media handheld, print, screen and (min-width: 1020px) {
/* pc */

#pageFlow #flow ol {
	column-gap: 25px;
}
#pageFlow #flow ol li:not(:last-of-type)::after {
	width: 13px;
	inset: 120px -20px auto auto;
}




/* end of media query(pc) */
}