@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
=============================================================*/
#startcp {
	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;
}
/*=============================================================
 common Layout
=============================================================*/
#startcp *{
	box-sizing: border-box;
}
/* animation
-------------------------------------------------------------*/
#startcp .setScMc{
	transition:all 0.6s ease 0.2s;
}
#startcp .setScMc.enter{
}
#startcp .setScMc.def{
	opacity:0;
	transform:translateY(40px);
	transition:all 0.6s ease 0.2s;
}
#startcp .setScMc.def.enter{
	opacity:1;
	transform:translateY(0);
}
#startcp .setScMc.ttl{
	opacity:0;
	transform:translate(40px,-10px);
	transition:all 0.6s ease 0.2s;
}
#startcp .setScMc.ttl.enter{
	opacity:1;
	transform:translate(0,0);
}
#startcp .boxFoot.setScMc{
	width: 15%;
	position: absolute;
	transition:all 0.1s;
}
#startcp .boxFoot.setScMc .boxInner{
	opacity:0;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
#startcp .boxFoot.setScMc.enter .box1{
	opacity:1;
	transition-delay: 1.8s;
}
#startcp .boxFoot.setScMc.enter .box2{
	opacity:1;
	transition-delay: 1.3s;
}
#startcp .boxFoot.setScMc.enter .box3{
	opacity:1;
	transition-delay: 0.8s;
}
#startcp .boxFoot.setScMc.enter .box4{
	opacity:1;
	transition-delay: 0.3s;
}
/*=============================================================
 mainVis
=============================================================*/
#startcp #mainVis{
	padding: 0px 0px 40px;
	position: relative;
	z-index: 3;
	background: url("../img/mainvis_bg.png") no-repeat center center; 
	background-size: cover;
}
#startcp #mainVis .ttlArea{
	padding: 10px 0 0;
	width: 100%;
	transform: translate(-50px,0);
}
#startcp #mainVis .ttl{
	max-width: 423px;
}

#startcp #mainVis .icnLine01{
	width: 30%;
	position: absolute;
	z-index: 1;
	top: 20%;
	right: -7%;
	opacity: 0;
	transition:all 1.2s ease 0.2s;
}
#startcp #mainVis .enter .icnLine01{
	opacity: 1;
	animation: line1 2.5s ease-in-out infinite alternate-reverse;
}
@keyframes line1 {
  0% {
    transform: translateY(10%) rotate(20deg);
  }
  100% {
    transform: translateY(-20%) rotate(-5deg);
  }
}
#startcp #mainVis .icnLine02{
	width: 23%;
	position: absolute;
	z-index: 1;
	top: 45%;
	left: -4%;
	opacity: 0;
	transition:all 1.2s ease 0.2s;
}
#startcp #mainVis .enter .icnLine02{
	opacity: 1;
	animation: line2 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes line2 {
  0% {
    transform: translateY(15%) rotate(-20deg);
  }
  100% {
    transform: translateY(-5%) rotate(10deg);
  }
}
#startcp #mainVis .icnLine03{
	width: 23%;
	position: absolute;
	z-index: 1;
	top: 75%;
	left: -6%;
	opacity: 0;
	transition:all 1.2s ease 0.2s;
}
#startcp #mainVis .enter .icnLine03{
	opacity: 1;
	animation: line3 2.3s ease-in-out infinite alternate-reverse;
}
@keyframes line3 {
  0% {
    transform: translateY(-10%) rotate(10deg);
  }
  100% {
    transform: translateY(10%) rotate(-30deg);
  }
}

#startcp #mainVis .catch{
	padding: 10px 15%;
	transform: scale(3,3);
	opacity: 0;
	transition:all 0.6s ease 0.2s;
	position: relative;
	z-index: 2;
}
#startcp #mainVis .catch.enter{
	transform: scale(1,1);
	opacity: 1;
}
#startcp #mainVis .catch .star{
	padding: 3% 4% 0;
	opacity: 0;
	transition:all 0.6s ease 0.2s;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
#startcp #mainVis .catch .star.enter{
	opacity: 1;
}

#startcp #mainVis .catch .star01.enter img{
	animation: star01 2.3s ease-in-out infinite alternate-reverse;
}
#startcp #mainVis .catch .star02.enter img{
	animation: star02 1.8s ease-in-out infinite alternate-reverse;
}
#startcp #mainVis .catch .star03.enter img{
	animation: star03 2.0s ease-in-out infinite alternate-reverse;
}
#startcp #mainVis .catch .star04.enter img{
	animation: star04 1.6s ease-in-out infinite alternate-reverse;
}
@keyframes star01 {
  0% {
			opacity: 0;
  }
  100% {
   opacity: 1;
  }
}
@keyframes star02 {
  0% {
			opacity: 0;
  }
  100% {
   opacity: 1;
  }
}
@keyframes star03 {
  0% {
			opacity: 0;
  }
  100% {
   opacity: 1;
  }
}
@keyframes star04 {
  0% {
			opacity: 0;
  }
  100% {
   opacity: 1;
  }
}




#startcp #mainVis .cp{
	padding: 5px 25px;
	position: relative;
	z-index: 2;
}
#startcp #mainVis .cpIcn{
	width: 25%;
	position: absolute;
	top: -33%;
	left: 10px;
	transform: scale(0,0);
	opacity: 0;
	transition:all 0.6s ease 0.2s;
	transition-delay: 0.8s;
}
#startcp #mainVis .enter .cpIcn{
	transform: scale(1,1);
	opacity: 1;
}
#startcp #mainVis .cpTxt{
	position: relative;
	transform: scale(3,3);
	opacity: 0;
	transition:all 0.6s ease 0.2s;
	transition-delay: 0.5s;
}
#startcp #mainVis .enter .cpTxt{
	transform: scale(1,1);
	opacity: 1;
}
#startcp #mainVis .cpPhotoArea{
	padding: 5px 0;
	position: relative;
	z-index: 2;
}
#startcp #mainVis .cpCard{
	width: 70%;
	margin: 0 -35px 0 auto;
	position: relative;
	transform: scale(1.3,1.3) translateX(100%) translateY(40px);
	opacity: 0;
	transition:all 0.6s ease 0.2s;
}
#startcp #mainVis .enter .cpCard{
	transform: scale(1,1) translateX(0) translateY(0);
	opacity: 1;
}
#startcp #mainVis .cpHuki{
	width: 40%;
	position: absolute;
	top: 10px;
	left: 25px;
	opacity: 0;
	transition:all 0.6s ease 0.2s;
}
#startcp #mainVis .enter .cpHuki{
	opacity: 1;
	animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}

#startcp #mainVis .cpDate{
	margin-top: -50px;
	padding: 0px 25px;
	position: relative;
}










/*=============================================================
 newArea
=============================================================*/
#startcp #newArea{
	padding: 0 15px 90px;
	position: relative;
	z-index: 4;
}
#startcp #newArea .foot01{
	position: absolute;
	z-index: 1;
	left: 55%;
	top: -20px;
	transform: rotate(35deg);
}
#startcp #newArea .figBox{
	position: relative;
	z-index: 2;
}
#startcp #newArea p{
	position: relative;
}
#startcp #newArea p.figcatch{
	margin: -20px auto 0;
	transform: translateY(60px);
	opacity: 0;
	transition:all 0.6s ease 0.2s;
}
#startcp #newArea .enter p.figcatch{
	transform: translateY(0px);
	opacity: 1;
}
/*=============================================================
 tokuten
=============================================================*/
#startcp #tokuten{
	padding: 0 0 60px;
	position: relative;
	z-index: 5;
	background: url("../img/tokuten_bg.png") repeat center top; 
}
#startcp #tokuten .ttlArea{
	width: 100%;
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	transform: translate(-50px,-50%);
}
#startcp #tokuten .ttl{
	max-width: 423px;
}
#startcp #tokutenCatch{
	padding: 30px 0 0;
	position: relative;
	z-index: 1;
	background: url("../img/tokuten_ttl_bg.png") no-repeat center bottom; 
	background-size: cover;
}
#startcp #tokutenCatch p.catch{
	padding: 20px 13px;
	transform: scale(3,3);
	opacity: 0;
	transition:all 0.6s ease 0.2s;
}
#startcp #tokutenCatch p.catch.enter{
	transform: scale(1,1);
	opacity: 1;
}
#startcp #tokuten p.date{
	transform: scale(3,3);
	opacity: 0;
	transition:all 0.6s ease 0.2s;
}
#startcp #tokuten p.date.enter{
	transform: scale(1,1);
	opacity: 1;
}
#startcp #tokuten .tokutenArea{
	padding: 25px 25px 0;
}
#startcp #tokuten .tokutenBox{
	position: relative;
}
#startcp #tokuten .tokutenhuki{
	width: 50%;
	margin: 0 auto 10px;
	transform: translateY(60px);
	opacity: 0;
	transition:all 0.6s ease 0.2s;
}
#startcp #tokuten .tokutenhuki.enter{
	transform: translateY(0px);
	opacity: 1;
}
#startcp #tokuten .boxCp{
	position: relative;
}
#startcp #tokuten .boxCp .cp{
	position: relative;
	transform: scale(1.5,1.5);
	opacity: 0;
	transition:all 0.7s ease 0.2s;
}
#startcp #tokuten .boxCp.enter .cp{
	transform: scale(1,1);
	opacity: 1;
}
#startcp #tokuten .boxCp .icn{
	width: 26%;
	position: absolute;
	top: 28%;
	left: 4%;
	transform: scale(0,0);
	opacity: 0;
	transition:all 0.4s ease 0.2s;
	transition-delay: 0.3s;
}
#startcp #tokuten .boxCp.enter .icn{
	transform: scale(1,1);
	opacity: 1;
}
#startcp #tokuten .boxCp .icn2{
	top: 30%;
}
#startcp #tokuten .foot01{
	position: absolute;
	bottom: 0;
	right: 5%;
	z-index: 2;
	transform: rotate(-45deg);
}
#startcp #tokuten .foot02{
	position: absolute;
	bottom: 0;
	left: -10px;
	z-index: 2;
	transform: rotate(15deg);
}
/*=============================================================
 outlineArea
=============================================================*/
#startcp #outlineArea{
	padding: 60px 50px 90px;
	position: relative;
	z-index: 6;
}
#startcp #outlineArea .attention{
	height: 400px;
	border: 1px solid #ccc;
	padding: 15px;
	overflow-y: auto;
}
#startcp #outlineArea .attention h2{
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	color: #1fd400;
}
#startcp #outlineArea .attention h3{
	margin-top: 20px;
	font-size: 14px;
	font-weight: 700;
}
#startcp #outlineArea .attention ul{
}
#startcp #outlineArea .attention ul li{
	margin: 0 0 0 1.2em;
	list-style: disc;
	font-size: 15px;
}
/*=============================================================
 pointArea
=============================================================*/
#startcp #pointArea{
	padding: 0;
	position: relative;
	z-index: 7;
}
#startcp #pointArea .ttlArea{
	width: 100%;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	transform: translate(-50px,-50%);
}
#startcp #pointArea .ttl{
	max-width: 408px;
}
#startcp #pointAreaInner{
	padding: 50px 0px 45px;
	background: url("../img/point_bg.png") no-repeat center center; 
	background-size: cover;
	position: relative;
}
#startcp #pointAreaInner ul{
	padding: 10px 35px;
}
#startcp #pointAreaInner ul li{
	margin: 15px 0 0;
	position: relative;
	transform: translateY(60px);
	opacity: 0;
	transition:all 0.6s ease 0.2s;
}
#startcp #pointAreaInner ul li.enter{
	transform: translateY(0);
	opacity: 1;
}
#startcp #pointAreaInner ul li a{
	position: relative;
	z-index: 2;
}
#startcp #pointAreaInner ul li span.icn01{
	position: absolute;
	top: -25px;
	left: 5%;
	z-index: 1;
}
#startcp #pointAreaInner ul li span.icn02{
	position: absolute;
	top: 60%;
	right: -20px;
	z-index: 1;
}
#startcp #pointAreaInner ul li span.icn03{
	position: absolute;
	top: 25%;
	left: -25px;
	z-index: 1;
}
#startcp #pointAreaInner ul li .foot01{
	position: absolute;
	top: -40px;
	right: -8%;
	z-index: 1;
}
#startcp #pointAreaInner ul li .foot03{
	position: absolute;
	top: -40px;
	left: -15px;
	z-index: 3;
}
#startcp #pointAreaInner ul li .foot05{
	position: absolute;
	bottom: -10%;
	left: -15px;
	z-index: 3;
}
#startcp #pointArea .boxPoint{
	width: 100%;
	margin: 48px 0 0;
}
#startcp #pointArea .boxPoint>div{
	transform: scale(1,1);
	opacity: 1;
	transition:all 0.6s ease 0.2s;
}
#startcp #pointArea .boxPoint>p{
	transform: translateY(0);
	opacity: 1;
	transition:all 0.6s ease 0.2s;
}
#startcp #pointArea .boxPoint p{
	padding: 0 35px;
	font-size: 15px;
}

#startcp #pointArea ul.note{
	width: 100%;
	max-width: 100%;
	padding: 10px 35px 0;
	font-size: 13px;
}
#startcp #pointArea ul.note li{
	padding: 0 0 0 1em;
	text-indent: -1em;
	font-size: 13px;
}


/*=============================================================
 apliArea
=============================================================*/
#startcp #apliArea{
	padding: 36px 0 60px;
	background: #fff;
	position: relative;
	z-index: 8;
}
#startcp #apliArea h2{
	opacity: 0;
	transition:all 0.6s ease 0.2s;
	transform: translateY(60px);
}
#startcp #apliArea.enter h2{
	opacity: 1;
	transform: translateY(0);
}
#startcp #apliArea .boxBtn {
	width: 286px;
	margin: 0 auto;
	padding: 15px 0 0;
}
#startcp #apliArea .boxBtn p{
	margin: 0 0 10px;
}
#startcp #apliArea .boxBtn ul {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
#startcp #apliArea .boxBtn ul li{
	margin: 0 5px 0 0;
}
#startcp #apliArea .boxBtn ul li+li{
	margin: 0 0 0 5px;
}
#startcp #apliArea .boxNote ul{
	padding: 0 25px;
}
#startcp #apliArea .boxNote ul li{
	margin: 10px 0 0 0;
	font-size: 10px;
}

/*=============================================================
 pittartArea
=============================================================*/
#startcp #pittartArea{
	padding: 50px 0px 45px 25px;
	background: url("../img/pittari_bg.png") no-repeat center center; 
	background-size: cover;
	position: relative;
	z-index: 8;
}
#startcp #pittartArea .ttlArea{
	width: 100%;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	transform: translate(-50px,-50%);
}
#startcp #pittartArea .ttl{
	max-width: 423px;
}
#startcp #pittartArea .boxPittari{
	margin: 30px 0 0;
	transform: translateX(0);
	transition:all 0.6s ease 0.2s;
	overflow: hidden;
}

/*=============================================================
 stepArea
=============================================================*/
#startcp #otokuArea{
	padding: 36px 0 60px;
	background: #0fb2fe;
	position: relative;
	z-index: 9;

}
#startcp #otokuArea h2{
	width: 100%;
	max-width: 270px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	opacity: 0;
	transition:all 0.6s ease 0.2s;
}
#startcp #otokuArea h2 span{
	width: 103px;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	transform: translate(-50%,-70%) scale(0,0);
	transition:all 0.3s ease 0.2s;
	transition-delay: 0.5s;
}
#startcp #otokuArea h2.enter{
	opacity: 1;
}
#startcp #otokuArea h2.enter span{
	transform: translate(-50%,-70%) scale(1,1);
}

#startcp #otokuArea .boxOtok{
	position: relative;
	margin-top: 35px;
	opacity: 0;
	transform: translateX(-100%);
	transition:all 0.6s ease 0.2s;
}
#startcp #otokuArea .boxOtok.enter{
	opacity: 1;
	transform: translateX(0);
}
#startcp #otokuArea ul{
	margin-top: 10px;
}
#startcp #otokuArea ul li{
	padding: 0 0 0 1em;
	text-indent: -1em;
	font-size: 15px;
	color: #fff;
}



/*=============================================================
 stepArea
=============================================================*/
#startcp #stepArea{
	padding: 90px 25px 25px;
	background: #f1edec;
	position: relative;
	z-index: 10;
}
#startcp #stepArea .ttlArea{
	width: 100%;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	transform: translate(-50px,-50%);
}
#startcp #stepArea .ttl{
	max-width: 420px;
}

#startcp #stepArea .boxStep{
	position: relative;
	padding-bottom: 80px;
	z-index: 2;
}
#startcp #stepArea .boxStep.last{
	position: relative;
	padding-bottom: 0px;
}
#startcp #stepArea .boxStep:after{
	content: "";
	width: 25px;
	height: 19px;
	background: url("/lp/cotoca_debit_startcp/img/step_arw.png") no-repeat 0 0;
	background-size: 100% 100%;
	position: absolute;
	bottom: 40px;
	left: 50%;
}
#startcp #stepArea .boxStep.last:after{
	display: none;
}
#startcp .setScMc.boxStep:after{
	opacity:0;
	transform: translate(-50%,-25px);
	transition:all 0.6s ease 0.2s;
}
#startcp .setScMc.boxStep.enter:after{
	opacity:1;
	transform: translate(-50%,0);
}
#startcp #stepArea .boxStepIner{
	padding: 25px;
	background: #fff;
	position: relative;
	border-radius: 20px;
}
#startcp .setScMc.boxStepIner{
	opacity:0;
	transform:scale(0.7);
	transition:all 0.3s ease 0.2s;
}
#startcp .setScMc.boxStepIner.enter{
	opacity:1;
	transform:scale(1);
}
#startcp .step01.setScMc .boxcat{
	width: 55px;
	position: absolute;
	top: 0px;
	left: 60%;
	opacity:0;
	transition:all 0.3s ease 0.2s;
}
#startcp .step01.setScMc.enter .boxcat{
	opacity:1;
	top: -75px;
}
#startcp .step02 .boxFoot{
	right: -10px;
	top: 5%;
	transform: translateY(-50%) rotate(180deg) scale(-1, 1);
}
#startcp .step03 .boxFoot{
	left: -5%;
	top: 5%;
	transform: translateY(-50%) rotate(180deg) scale(-1, 1);
}
#startcp .step04 .boxFoot{
	right: -5%;
	bottom: 8%;
	transform: translateY(-50%) rotate(180deg);
}
#startcp #stepArea .boxStep h3{
	width: 260px;
	margin: -45px auto 0;
}
#startcp #stepArea .boxStep ul{
	margin-top: 10px;
}
#startcp #stepArea .boxStep ul li{
	margin: 0 0 0 1.2em;
	list-style: disc;
	font-size: 15px;
}



#startcp .btnArea{
	margin: 35px 25px 0;
}
#startcp .btnArea .box{
	width: 100%;
	max-width: 540px;
	margin: 10px auto 0;
}
#startcp ul.note{
	width: 100%;
	max-width: 540px;
	margin: 10px auto 0;
}
#startcp ul.note li{
	padding: 10px 0 0 1em;
	text-indent: -1em;
	font-size: 13px;
}







/*=============================================================
 foot
=============================================================*/
#startcp #footBtnArea{
	padding: 15px 50px 25px;
	background: #fff;
	background-size: cover;
	text-align: center;
}
#startcp #footBtnArea li{
	padding: 10px 0 0;
}


#startcp #footArea{
	padding: 15px 25px;
	background: url("/lp/cotoca_debit_startcp/img/ftr_bg.png") no-repeat center center;
	background-size: cover;
	text-align: center;
}
#startcp #footArea p{
	font-weight: 600;
	font-size: 14px;
	line-height: 1.55;
}
#startcp #footArea .telBox{
	width: 224px;
	margin: 0 auto;
	padding: 12px 0;
}
#startcp #footArea a{
	color: #000;
}