/* CSS Document */







@media screen and (min-device-width:750px){ /*PC*/
#hajimete #contents {
	padding-top:60px;
}
}

@media screen and (max-device-width:749px){ /*スマホ*/
#hajimete #contents {
	padding-top:50px;
}
}




/* ■■■■■pankuzu■■■■■ */

.pankuzu {
	background-image:url(../../hajimete/images/pankuzu_bg.gif);
}

.pankuzu li.now{
	background:#e7d378;
	border-radius:3px;
}

/* ■■■■■contents■■■■■ */




h2 {
	background-image:url(../../hajimete/images/h2_bg.gif);
}




@media screen and (min-device-width:750px){ /*PC*/
h3 {font-size:2rem !important;}
}

@media screen and (max-device-width:749px){ /*スマホ*/
h3 {font-size:2rem !important;margin:0 0 10px 0;}
}



h3 span {
	display:block;
	border-bottom:1px dashed #c5c1bd;
}






#flow .step1,
#flow .step2,
#flow .step3,
#flow .step4,
#flow .step5,
#flow .step6 {
	position:relative;
}
@media screen and (min-device-width:750px){ /*PC*/
#flow .step1,
#flow .step2,
#flow .step3,
#flow .step4,
#flow .step5,
#flow .step6 {
	margin-bottom:0!important;
}
}

@media screen and (max-device-width:749px){ /*スマホ*/
#flow .step1,
#flow .step2,
#flow .step3,
#flow .step4,
#flow .step5,
#flow .step6 {
	margin-bottom:20px!important;
}

}

@media screen and (max-device-width:749px){ /*スマホ*/

#flow :not(:first-of-type) {
	padding-top:50px;
}

#flow div:not(:last-child):after {
	content:"●　●　●　●　●";
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-size:0.6rem;
	color:#e7d378;
	position:absolute;
	left:10vw;
	bottom:0;
}

#flow img {
	height:auto;
	position:absolute;
	right:5vw;
	bottom:0;
}
}



#flow .step1 h3:before,
#flow .step2 h3:before,
#flow .step3 h3:before,
#flow .step4 h3:before,
#flow .step5 h3:before,
#flow .step6 h3:before {
	float:left;
}


#flow .step1 h3:before {
	content:"①";
}
#flow .step2 h3:before {
	content:"②";
}
#flow .step3 h3:before {
	content:"③";
}
#flow .step4 h3:before {
	content:"④";
}
#flow .step5 h3:before {
	content:"⑤";
}
#flow .step6 h3:before {
	content:"⑥";
}



@media screen and (max-device-width:749px){ /*スマホ*/
#flow ul {
	padding:10px 0 0 20px;
}
}



/* ■■step1■■ */


@media screen and (min-device-width:750px){ /*PC*/
#flow div.step1 {
	width:600px;
	background-image:url(../../hajimete/images/step1_bg.gif);
	background-position:bottom 30px left;
	background-repeat:no-repeat;
}
}

@media screen and (max-device-width:749px){ /*スマホ*/
#flow div.step1 {
	padding-bottom:200px;
}
}



@media screen and (min-device-width:750px){ /*PC*/
#flow div.step1 img {
	position:absolute;
	right:0;
	top:0;
}
}

@media screen and (max-device-width:749px){ /*スマホ*/
#flow div.step1 img {
	width:110px;
}
}


@media screen and (min-device-width:750px){ /*PC*/
#flow div.step1 h3 {
	padding:32px 0 0 35px;
	width:400px;
}


#flow div.step1 p {
	padding:20px 0 130px 35px;
	width:400px;
}

}



/* ■■step2■■ */



@media screen and (min-device-width:750px){ /*PC*/
#flow div.step2 {
	margin:0 0 0 60px;
	padding:0 0 0 150px;
	width:510px;
	background:url(../../hajimete/images/step2_bg.gif) bottom left no-repeat;
}
}

@media screen and (max-device-width:749px){ /*スマホ*/
#flow div.step2 {
	padding-bottom:110px;
}
}



@media screen and (min-device-width:750px){ /*PC*/
#flow div.step2 img {
	position:absolute;
	left:20px;
	top:50px;
}
}
@media screen and (max-device-width:749px){ /*スマホ*/
#flow div.step2 img {
	width:124px;
}
}


@media screen and (min-device-width:750px){ /*PC*/
#flow div.step2 h3 {
	padding:0 0 0 35px;
	width:430px;
}

#flow div.step2 ul {
	padding:20px 0 100px 35px;
	width:430px;
}
}



#flow div.step2 ul li {
	background-image:url(../images/n_ic.gif);
	background-position:2px 3px;
	background-repeat:no-repeat;
	background-size:12px 12px;
}
@media screen and (min-device-width:750px){ /*PC*/
#flow div.step2 ul li {
	margin:0 0 3px 20px;
	padding:0 0 0 20px;
}
}
@media screen and (max-device-width:749px){ /*スマホ*/
#flow div.step2 ul li {
	margin:0 0 3px 0;
	padding:0 0 0 20px;
}
}




/* ■■step3■■ */



@media screen and (min-device-width:750px){ /*PC*/
#flow div.step3 {
	padding:0 0 0 30px;
	width:600px;
	background:url(../../hajimete/images/step3_bg.gif) bottom left no-repeat;
	top:-30px;
}
}

@media screen and (max-device-width:749px){ /*スマホ*/
#flow div.step3 {
	padding-bottom:185px;
}
}


@media screen and (min-device-width:750px){ /*PC*/
#flow div.step3 img {
	position:absolute;
	right:0;
	top:0;
}
}
@media screen and (max-device-width:749px){ /*スマホ*/
#flow div.step3 img {
	width:140px;
}
}



@media screen and (min-device-width:750px){ /*PC*/
#flow div.step3 h3 {
	padding:32px 0 0 35px;
	width:350px;
}

#flow div.step3 p {
	padding:20px 0 100px 35px;
	width:400px;
}
}





/* ■■step4■■ */


@media screen and (min-device-width:750px){ /*PC*/
#flow div.step4 {
	margin:0 0 0 60px;
	padding:0 0 0 250px;
	width:410px;
	background:url(../../hajimete/images/step4_bg.gif) bottom left no-repeat;
}
}

@media screen and (max-device-width:749px){ /*スマホ*/
#flow div.step4 {
	padding-bottom:150px;
}
}


@media screen and (min-device-width:750px){ /*PC*/
#flow div.step4 img {
	position:absolute;
	left:10px;
	top:100px;
}
}
@media screen and (max-device-width:749px){ /*スマホ*/
#flow div.step4 img {
	width:146px;
}
}



@media screen and (min-device-width:750px){ /*PC*/
#flow div.step4 h3 {
	padding:0 0 0 35px;
	width:360px;
}


#flow div.step4 p {
	padding:20px 0 0 35px;
}
}


@media screen and (min-device-width:750px){ /*PC*/
#flow div.step4 ul {
	padding:10px 0 100px 35px;
	width:340px;
}
}


#flow div.step4 ul li {
	background-image:url(../images/n_ic.gif);
	background-position:2px 3px;
	background-repeat:no-repeat;
	background-size:12px 12px;
}

@media screen and (min-device-width:750px){ /*PC*/
#flow div.step4 ul li {
	margin:0 0 3px 20px;
	padding:0 0 0 20px;
}
}

@media screen and (max-device-width:749px){ /*スマホ*/
#flow div.step4 ul li {
	margin:0 0 3px 0;
	padding:0 0 0 20px;
}
}



/* ■■step5■■ */


@media screen and (min-device-width:750px){ /*PC*/
#flow div.step5 {
	width:630px;
	background:url(../../hajimete/images/step5_bg.gif) bottom left no-repeat;
	position:relative;
	top:-30px;
}
}

@media screen and (max-device-width:749px){ /*スマホ*/
#flow div.step5 {
	padding-bottom:160px;
}
}


@media screen and (min-device-width:750px){ /*PC*/
#flow div.step5 img {
	position:absolute;
	right:20px;
	top:0;
}
}

@media screen and (max-device-width:749px){ /*スマホ*/
#flow div.step5 img {
	width:168px;
}
}



@media screen and (min-device-width:750px){ /*PC*/
#flow div.step5 h3 {
	padding:32px 0 0 35px;
	width:350px;
}


#flow div.step5 p {
	padding:20px 0 80px 35px;
	width:400px;
}

}


#flow div.step5 p span {
	display:block;
	margin:10px 0 0 0;
	padding:0px 0 0 20px;
	background-image:url(../images/i_ic.gif);
	background-position:5px 4px;
	background-repeat:no-repeat;
	background-size:12px 12px;
}




/* ■■step6■■ */


@media screen and (min-device-width:750px){ /*PC*/
#flow div.step6 {
	margin:0 0 0 60px;
	padding:0 0 0 240px;
	width:410px;
	background:url(../../hajimete/images/step6_bg.gif) bottom left no-repeat;
	position:relative;
	top:-40px;
}
}

@media screen and (max-device-width:749px){ /*スマホ*/
#flow div.step6 {
	padding-bottom:150px;
}
}

@media screen and (min-device-width:750px){ /*PC*/
#flow div.step6 img {
	position:absolute;
	left:10px;
	top:0;
}
}
@media screen and (max-device-width:749px){ /*スマホ*/
#flow div.step6 img {
	width:186px;
}
}




@media screen and (min-device-width:750px){ /*PC*/
#flow div.step6 h3 {
	padding:40px 0 0 35px;
	width:350px;
}

#flow div.step6 p {
	padding:20px 0 0 35px;
}
}