@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400;500;600;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanjp.css");
/*=============================================================
 Smartphones
=============================================================*/
#wrap{
	background-color: #f5f5f5;
}
#debitSc {
	color: #000000;
	font: normal normal 14px/1.75 YakuHanJP, "Noto Sans JP", sans-serif;
	font-feature-settings: "pwid";
	letter-spacing: 0.01em;
	text-align: left;
	overflow: hidden;
	width: 100%;
	max-width: 768px;
	margin: 0 auto;
	background-color: #fff;
}
/*=============================================================
 common Layout
=============================================================*/
#debitSc *{
	box-sizing: border-box;
}
#debitSc .inner{
	padding: 0 8%;
}
#debitSc .note{
	font-size: clamp(11px, 3.4375vw, 22px);
}
#debitSc .note li{
	padding: 0 0 0 1em;
	text-indent: -1em;
	line-height: 1.25;
}
#debitSc .note li+li{
	padding: 2% 0 0 1em;
}
#debitSc .note li a{
	text-decoration: underline;
}

/* btnArea
-------------------------------------------------------------*/
.btnArea{
	text-align: center;
}
.btnArea ul{
	padding: 0 0 5%;
}
.btnArea li{
	padding: 5% 0 0;
}
.btnArea li a{
	display: block;
	padding: 1% 0 0;
}
.btnArea li span{
	display: inline-block;
	position: relative;
	font-size: clamp(14px, 4.375vw, 28px);
}
.btnArea li span:before,
.btnArea li span:after{
	content: "";
	width: 1px;
	height: 70%;
	background-color: #000;
	position: absolute;
	top: 50%;
}
.btnArea li span:before{
	left: -0.8em;
	transform: translateY(-50%) rotate(-30deg);
}
.btnArea li span:after{
	right: -0.8em;
	transform: translateY(-50%) rotate(30deg);
}
/* animation
-------------------------------------------------------------*/
#debitSc .setScMc{
	transition:all 0.6s ease 0.2s;
	opacity: 0;
}
#debitSc .setScMc.enter{
	opacity: 1;
}
/*=============================================================
 mainVis
=============================================================*/
#debitSc #mainVis{
	padding: 3% 0 8%;
	background: url("../img/bg_main.svg") no-repeat 0 0;
	background-size: cover;
}
#debitSc #mainVis h1{
	padding: 0 0 0;
}
#debitSc #mainVis p{
	padding: 4% 0 0;
}
/*=============================================================
 tokutenArea
=============================================================*/
#debitSc #tokutenArea{
}
#debitSc #tokutenBox{
	padding: 0 0 16%;
	background: url("../img/bg_tokuten.svg") no-repeat 0 0;
	background-size: cover;
}
#debitSc #tokutenBox p{
	padding: 8% 0 0;
}
#debitSc .tokutenBtm{
	position: relative;
}
#debitSc .tokutenBtm h3{
	width: 100%;
	position: absolute;
	top: -9%;
	left: 0;
}

/*=============================================================
 outlineArea
=============================================================*/
#debitSc #outlineArea{
	padding: 5% 8% 0;
}
#debitSc #outlineArea #about{
	padding: 8% 0% 3% 0%;
}
#debitSc #outlineArea #about .attention{
/*	height: 400px;*/
	border: 1px solid #ccc;
	padding: 5%;
/*	overflow-y: auto;*/
}
#debitSc #outlineArea #about .attention h2{
	text-align: center;
	font-size: clamp(15px, 4.6875vw, 30px);
	font-weight: 700;
	color: #1fd400;
}
#debitSc #outlineArea #about .attention h3{
	margin-top: 7.5%;
	font-size: clamp(11px, 3.4375vw, 22px);
	font-weight: 700;
}
#debitSc #outlineArea #about .attention p{
	font-size: clamp(11px, 3.4375vw, 22px);
}
#debitSc #outlineArea #about .attention ul{
}
#debitSc #outlineArea #about .attention ul li{
	margin: 0 0 0 1.2em;
	list-style: disc;
	font-size: clamp(11px, 3.4375vw, 22px);
}

/*=============================================================
 pointArea
=============================================================*/
#debitSc #pointArea{
	padding: 15% 0 8%;
}
#debitSc #pointAreaBtn{
	padding: 20% 0 7%;
	background: url("../img/bg_point.png") no-repeat 0 0;
	background-size: cover;
	position: relative;
}
#debitSc #pointAreaBtn h2{
	width: 100%;
	position: absolute;
	top: -7%;
	left: 0;
}
#debitSc #pointAreaBtn ul{
	width: 100%;
	padding: 0 8%;
}
#debitSc #pointAreaBtn ul li{
	padding: 3% 0 0;
}
#debitSc #pointArea .box{
	padding: 12.5% 0 0;
}
#debitSc #pointArea .box p{
	padding: 3% 8% 0;
	font-size: clamp(13px, 4.0625vw, 26px);
}
#debitSc #pointArea .note{
	padding: 3% 8% 0;
}
/*=============================================================
 apliArea
=============================================================*/
#debitSc #apliArea{
	padding: 0 0 10%;
}
#debitSc #apliArea .boxBtn {
	width: 75%;
	margin: 0 auto;
	padding: 7% 0 5%;
}
#debitSc #apliArea .boxBtn p{
	margin: 0 0 3%;
}
#debitSc #apliArea .boxBtn ul {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
#debitSc #apliArea .boxBtn ul li{
	width: 43%;
}
#debitSc #apliArea .boxBtn ul li+li{
	width: 53%;
}
#debitSc #apliArea .inner p{
	font-size: clamp(11px, 3.4375vw, 22px);
	line-height: 1.45;
}
#debitSc #apliArea .inner p+p{
	padding: 3% 0 0;
}
/*=============================================================
 pittariArea
=============================================================*/
#debitSc #pittariArea{
	padding: 22% 0 5%;
	background: url("../img/bg_pittari.svg") no-repeat 0 0;
	background-size: cover;
	position: relative;
}
#debitSc #pittariArea h2{
	width: 100%;
	position: absolute;
	top: -3.5%;
	left: 0;
}
#debitSc #pittariArea p{
	width: 100%;
	padding-top: 7%;
}
/*=============================================================
 otokuArea
=============================================================*/
#debitSc #otokuArea{
	padding: 51% 0 13.75%;
	background-color: #0fb2fe;
	position: relative;
}
#debitSc #otokuArea h2{
	width: 100%;
	position: absolute;
	top: -5.2%;
	left: 0;
}
#debitSc #otokuArea p{
	width: 100%;
	padding-top: 7%;
}
#debitSc #otokuArea .note{
	padding-top: 5%;
	color: #fff;
}
/*=============================================================
 stepArea
=============================================================*/
#debitSc #stepArea{
	padding: 30% 8% 5%;
	background-color: #f1edec;
	position: relative;
}
#debitSc #stepArea h2{
	width: 97%;
	position: absolute;
	top: -2.2%;
	left: 0;
}
#debitSc #stepArea .boxStep{
	position: relative;
	padding-bottom: 25%;
	z-index: 2;
}
#debitSc #stepArea .boxStep.last{
	padding-bottom: 5%;
}
#debitSc #stepArea .boxStep:after{
	content: "";
	width: 8%;
	height: 6%;
	background: url("../img/arw_step.svg") no-repeat 0 0;
	background-size: 100% 100%;
	position: absolute;
	bottom: clamp(32px, calc(10.7143vw - 2.2857px), 80px);
	left: 50%;
	transform: translate(-50%,0);
}
#debitSc #stepArea .boxStep.last:after{
	display: none;
}
#debitSc #stepArea .boxStepIner{
	padding: 4%;
	background: #fff;
	position: relative;
	border-radius: 6.25%;
}
#debitSc #stepArea .boxStep h3{
	width: 80%;
	margin: -14% auto 0;
}
#debitSc #stepArea .boxStep ul{
	margin-top: 10px;
}
#debitSc #stepArea .boxStep ul li{
	margin: 0 0 0 1.2em;
	list-style: disc;
	font-size: clamp(13px, 4.0625vw, 26px);
	line-height: 1.35;
}



/*=============================================================
 foot
=============================================================*/
#debitSc #footBtnArea{
	padding: 5% 8%;
	background: #fff;
	text-align: center;
}
#debitSc #footBtnArea li{
	padding: 3% 0 0;
}
#debitSc #footBtnArea li:first-child{
	padding: 0;
}
#debitSc #footArea{
	padding: 5% 8%;
	background: url("../img/bg_footer.svg") no-repeat center center;
	background-size: cover;
	text-align: center;
}
#debitSc #footArea p{
	font-weight: 600;
	font-size: clamp(12px, 3.75vw, 24px);
	line-height: 1.55;
}
#debitSc #footArea .telBox{
	width: 70%;
	margin: 0 auto;
	padding: 5% 0;
}
#debitSc #footArea a{
	color: #000;
}
footer{
	padding: 5%;
	text-align: center;
	font-size: clamp(10px, calc(1.875vw + 4px), 16px);
}