@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

/*==================================================
index.css
================================================== */
body {
	line-height: 1.8;
}
.dot_list{
	font-size: 18px;
	text-align: left !important;
}
.dot_list>li:before {
	content: "・";
	position: unset !important;
	left: unset !important;
	font-size: inherit;
}
.-img{
	max-width: 100%;
	width: auto;
}
.ta-center{
	text-align: center !important;
}
section h2{
	display: inline-block !important;
}
section h3{
	text-align: left;
	padding-left: 1em;
	font-size: 18px;
	color: #2968b9;
	margin-bottom: 24px;
}
#app_info .text_area{
	margin: 0 auto;
	text-align: center;
}
#app_info .text_area img{
	margin: 0 auto;
	text-align: center;
}
#anchor_02 .text_area img{
	margin: 0 auto;
	text-align: center;
}
.period{
	display: inline-block;
}
.img_area{
	display: flex;
	align-items: center;
	gap: 70px;
}
.article_wrap{
	position: relative;
}
#main_visual{
	background-color: #42b1e2 !important;
	background-image: url(../images/bg_mv.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	padding: 34px 0 20px;
	position: relative;
}
#main_visual .section_inner{
	max-width: 1100px;
	padding: 0;
}
#anchor_01{
	max-width: 1060px;
	border-radius: 10px;
	background-color: #42b1e2;
	margin: -20px auto 0;
	text-align: center;
}
#anchor_02{
	max-width: 1040px;
	border-radius: 10px;
	background-color: #42b1e2;
	margin: 0 auto;
	text-align: center;
}
#anchor_03{
	max-width: 1040px;
	border-radius: 10px;
	background-color: #ffecc2;
	margin: 0 auto;
	text-align: center;
}
#anchor_04{
	max-width: 1060px;
	border-radius: 10px;
	background-color: #42b1e2;
	margin: 0 auto;
	text-align: center;
}
[id^="anchor"] .anchor_inner[data-bg="ivory"]{
	max-width: 1040px;
	border-radius: 10px;
	background-color: #fff5e0;
	margin: 0 10px;
	padding: 50px 20px 42px;
}
[id^="anchor"] .anchor_inner[data-bg="ivory_plus"]{
	max-width: 1040px;
	border-radius: 10px;
	background-color: #fff5e0;
    margin: -20px 10px 0;
	padding: 50px 20px 42px;
}
[id^="anchor"] .anchor_inner[data-bg="white"]{
	max-width: 1020px;
	border-radius: 10px;
	background-color: #fff;
	margin: 0 10px;
	padding: 40px 32px 56px;
}
.section_wrap{
	max-width: 1400px;
	width: 100%;
	padding: 10px 0 10px;
	margin: 0 auto;
}
.answer_button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 537px;
	height: 76px;
	font-size: 28px;
	text-align: center;
	text-decoration: none;
	position: relative;
	background: #2968b9;
	color: #fff;
	border-radius: 50px;
	margin: 0 auto;
}
.answer_button[data-layout="w500"] {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 500px;
	height: 76px;
	font-size: 28px;
	text-align: center;
	text-decoration: none;
	position: relative;
	background: #2968b9;
	color: #fff;
	border-radius: 50px;
	margin: 0 auto;
}
.answer_button[data-layout="w350"] {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 350px;
	height: 50px;
	font-size: 18px;
	text-align: center;
	text-decoration: none;
	position: relative;
	background: #2968b9;
	color: #fff;
	border-radius: 50px;
	margin: 0;
}
a.answer_button::before,
a.answer_button::after {
	content: '';
	position: absolute;
	top: 0;
	right: 20px;
	bottom: 0;
	margin: auto;
	vertical-align: middle;
}
a.answer_button::after {
	content: '→';
	position: absolute;
	color: #2968b9;
	font-size: 14px;
	line-height: 140%;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
}
a:hover.answer_button{
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	opacity: 0.8;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	zoom: 1;
}
.attention{
	display: flex;
	max-width: 850px;
	border-radius: 8px;
	border: #ffba00 2px solid;
	margin: 0 auto;
	text-align: left;
}
.attention[data-layout="w660"]{
	display: flex;
	max-width: 660px;
	border-radius: 8px;
	border: #ffba00 2px solid;
	margin: 0 auto;
	text-align: left;
}
.attention_inner {
	width: 100%;
	padding: 18px;
	border-radius: 4px;
	background:repeating-linear-gradient(
	-45deg,
	#000,
	#000 15px,
	#ffd800 0,
	#ffd800 30px
	);
}
.attention_inner .attention_column{
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: #ffd800;
	border-radius: 8px;
	height: 80px;
	margin: 0 auto;
	padding-left: 12px;
}
[data-layout="w660"] .attention_inner .attention_column{
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: #ffd800;
	border-radius: 8px;
	width: 620px;
	height: 80px;
	margin: 0 auto;
	padding-left: 8px;
}
.attention_colmn img{
	width: 55px;
	height: 48px;
}
.attention_column p{
	color: #b60101;
	font-size: 26px;
	font-weight: bold;
	line-height: 120%;
}
[data-layout="w660"] .attention_column p{
	color: #b60101;
	font-size: 19px;
	font-weight: bold;
	line-height: 150%;
}
#app_info{
	text-align: center;
}
#app_info img{
	max-width: 100%;
	width: auto;
}
.note{
	font-size: 14px !important;
	color: #000;
	font-weight: normal;
}
.note a{
	text-decoration: none;
}
#smile_point{
	max-width: 1040px;
	border-radius: 10px;
	border: 2px #42b1e2 dashed;
	margin: 0 auto 80px;
	text-align: center;
	padding: 46px 20px 38px;
}
#smile_point .smile_point_inner .smile_point_column{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	margin-bottom: 30px;
}
#smile_point .smile_point_inner .smile_point_column p{
	font-size: 18px;
	color: #000;
}
#smile_point .smile_point_inner .smile_point_column p{
	font-size: 16px;
	color: #000;
	font-weight: bold;
}
#smile_point .smile_point_inner .smile_point_column p span{
	font-size: 24px;
	color: #026cb6;
	font-weight: bold;
}
.smile_point_inner .text_area{
	font-size: 18px;
	max-width: 810px;
	margin: 0 auto 12px;
	text-align: left;
}
.smile_point_inner .period{
	max-width: 810px;
	margin: 0 auto;
	text-align: left;
}
aside{
	max-width: 1040px;
	margin: 0 auto 100px;
}
#app_join{
	background-color: #fff5e0;
	border-bottom: 4px #42b1e2 solid;
	border-top: 2px #42b1e2 solid;
	padding: 60px 20px 30px;
}
.app_join_inner{
	max-width: 1070px;
	margin: 0 auto;
	display: flex;
	gap: 30px;
}
.app_join_inner .right_col{
	text-align: center;
}

.app_join_inner .right_col .right_col_text p{
	font-size: 16px;
	font-weight: bold;
}
.app_join_inner .right_col .right_col_text dl{
	text-align: left;
	font-size: 16px;
	max-width: 660px;
	margin: 0 auto;
}
.app_join_inner .right_col .right_col_text dl dt{
	color: #2968b9;
	font-weight: bold;
}
.app_join_inner .right_col .right_col_text dl dd{
	padding-left: 0.5em;
}
#flow{
	background-color: #fff;
	border-top: 2px #2968b9 solid;
	text-align: center;
	padding: 72px 90px;
}
.flow_inner{
	max-width: 900px;
	margin: 0 auto;
}
.flow_inner [class^=step]{
	max-width: 900px;
	border-radius: 10px;
	border: 2px #42b1e2 dashed;
	background-color: #fff5e0;
	margin: 0 auto 8px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-left: 40px;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 40px;
}

.flow_inner .text_area{
	text-align: left;
	max-width: 50%;
	font-size: 18px;
	font-weight: bold;
	flex: 2 1 0;
}
#inquiry{
	margin-bottom: 100px;
}
.inquiry_inner{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-bottom: 12px;
}
.inquiry_title{
	display: block;
	width: 257px;
	height: 32px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	line-height: 150%;
	background: #fff;
	color: #0072bb;
	border-radius: 16px;
	border: 1px #0072bb solid;
}
.tel{
	font-size: 18px;
	font-weight: bold;
}
.font-bold{
	font-weight: bold !important;
}

/* ----------------------------------------
 - set margin
---------------------------------------- */
.mb-8{
	margin-bottom: 8px !important;
}
.mb-18{
	margin-bottom: 18px !important;
}
.mb-24{
	margin-bottom: 24px !important;
}
.mb-30{
	margin-bottom: 30px !important;
}
.mb-40{
	margin-bottom: 40px !important;
}
.mb-56{
	margin-bottom: 56px !important;
}
.mb-64{
	margin-bottom: 64px !important;
}
.mb-70{
	margin-bottom: 70px !important;
}
.mb-75{
	margin-bottom: 75px !important;
}
.mb-120{
	margin-bottom: 120px !important;
}
.pc-ml-48{
	margin-left: 48px !important;
}
.mt-12{
	margin-top: 12px !important;
}

@media screen and (max-width: 736px) {
	#main_visual{
		background-image: url(../images/bg_mv_sp.png);
		background-repeat: no-repeat;
		background-position: center bottom;
		position: relative;
		background-size: contain;
	}
	#anchor_01{
		margin: -50px auto 0 !important;
	}
	.article_wrap{
		box-sizing: border-box;
		width: 100%;
		margin: 0 auto;
		padding: 0 calc(35 / 736 * 100vw);
	}
	.note{
		text-align: left;
	}
	#smile_point .smile_point_inner .smile_point_column {
		display: flex;
		flex-direction: column;
		justify-content: left;
		align-items: normal;
	}
	#smile_point .smile_point_inner .smile_point_column p {
		text-align: left;
	}
	.inquiry_inner{
		flex-direction: column;
	}
	.inquiry_title{
		width: 50%;
		height: calc(32 / 763 * 100vw);
		line-height: 120%;
		font-size: calc(24 / 763 * 100vw);
	}
	.tel{
		font-size: calc(32 / 763 * 100vw);
	}
	.dot_list{
		font-size: calc(24 / 763 * 100vw);
		text-indent: -1em;
		text-align: left;
	}
	.note {
		font-size: calc(18 / 763 * 100vw) !important;
	}
	section h3{
		text-align: left;
		padding-left: 0;
		font-size: calc(28 / 763 * 100vw) !important;
		margin-bottom: 12px;
	}
	.attention_column p{
		font-size: calc(19 / 763 * 100vw) !important;
	}
	.app_join_inner .right_col .right_col_text p{
		font-size: calc(24 / 763 * 100vw) !important;
	}
	.app_join_inner .right_col .right_col_text dl{
		font-size: calc(24 / 763 * 100vw) !important;
	}
}

@media screen and (max-width: 736px) {
	.mb-8{
		margin-bottom: calc(8 / 736 * 100vw) !important;
	}
	.mb-18{
		margin-bottom: calc(18 / 736 * 100vw) !important;
	}
	.mb-24{
		margin-bottom: calc(24 / 736 * 100vw) !important;
	}
	.mb-30{
		margin-bottom: calc(30 / 736 * 100vw) !important;
	}
	.mb-40{
		margin-bottom: calc(40 / 736 * 100vw) !important;
	}
	.mb-56{
		margin-bottom: calc(56 / 736 * 100vw) !important;
	}
	.mb-64{
		margin-bottom: calc(64 / 736 * 100vw) !important;
	}
	.mb-70{
		margin-bottom: calc(70 / 736 * 100vw) !important;
	}
	.mb-75{
		margin-bottom: calc(75 / 736 * 100vw) !important;
	}
	.mb-120{
		margin-bottom: calc(120 / 736 * 100vw) !important;
	}
	.pc-ml-48{
		margin-left:unset !important;
	}
	.mt-12{
		margin-top: calc(12 / 736 * 100vw) !important;
	}
}

@media screen and (max-width: 1100px) {
	.article_wrap > #main_visual {
		background-color: #42b1e2 !important;
		inset-inline: 50%;
		width: 100vw;
		margin-inline: -50vw;
		padding-inline: calc((100vw - 100%) / 2);
		background-size: contain;
	}
	.article_wrap{
		box-sizing: border-box;
		width: 100%;
		margin: 0 auto 40px;
		padding: 0 calc(35 / 736 * 100vw);
	}
	.attention_column p{
		font-size: calc(26 / 1100 * 100vw);
	}
	.app_join_inner {
		flex-direction: column;
	}
	.pc-ml-48 {
		margin-left: unset !important;
	}
	.img_area{
		gap: 50px;
	}
	[data-layout="w660"] .attention_inner .attention_column {
		width: 100%;
	}
	[data-layout="w660"] .attention_column p {
		font-size: calc(18 / 1100 * 100vw);
	}
}
@media screen and (max-width: 950px) {
	.img_area{
		gap: 20px;
	}
	#flow{
		padding: 72px calc(35 / 736 * 100vw);
	}
	.flow_inner [class^=step]{
		width: 100%;
		flex-wrap: wrap;
	}
	.img_area{
		display: flex;
		justify-content: center;
		width: 33%;
		gap: 20px;
	}
	.img_area img{
		width: 50% !important;
		object-fit: contain;
	}
	.flow_inner .text_area{
		max-width: 100%;
	}
	.answer_button[data-layout="w350"]{
		margin: 30px auto 0;
	}
}
@media screen and (min-width:737px) and (max-width:950px){
	.answer_button[data-layout="w350"] {
		width: calc(350 / 950 * 100vw);
		height: 50px;
		font-size: 18px;
	}
}
@media screen and (max-width:680px){
	.answer_button{
		width: 100%;
		height: 50px;
		font-size: calc(23 / 680 * 100vw);
	}
	.answer_button[data-layout="w500"] {
		width: 100%;
		height: 50px;
		font-size: calc(23 / 680 * 100vw);
	}
	.answer_button[data-layout="w350"] {
		width: 100%;
		height: 50px;
		font-size: calc(17 / 680 * 100vw);
	}
}
@media screen and (max-width:680px){
	.img_area{
		display: flex;
		justify-content: center;
		width: 50%;
		gap: 20px;
	}
	.flow_inner [class^=step] {
        width: 100%;
		flex-direction: column;
    }
	[id^="anchor"] .anchor_inner[data-bg="ivory_plus"]{
		padding: 10px 20px 42px;
	}
}
@media screen and (max-width: 480px) {
	[id^="anchor"] .anchor_inner[data-bg="white"]{
		padding: 20px 20px 28px;
	}
	.attention_inner{
		padding: 9px;
		background: repeating-linear-gradient(-45deg, #000, #000 10px, #ffd800 0, #ffd800 20px);
	}
	[id^="anchor"] .anchor_inner[data-bg="ivory_plus"]{
		padding: 10px 20px 20px;
	}
	#inquiry{
		margin-bottom: 0;
	}
	.attention_inner .attention_column{
		flex-direction: column;
		padding: 16px;
		height: 120px !important;
	}
}