@charset "UTF-8";

/* ========================================
	common
======================================== */
#bg1 {
	background: url(../common/bg01.jpg) center 0 no-repeat;
}
#bg2 {
	background: url(../common/bg02.jpg) center 1000px no-repeat;
}
#bg3 {
	background: url(../common/bg03.jpg) center 2000px no-repeat;
}
#bg4 {
	background: url(../common/bg04.jpg) center 3000px no-repeat;
}

.fade-first,
.fade-second {
	display: none;
}

/* ========================================
	#ttl-area
======================================== */
#ttl-area {
	height: 370px;
}

#ttl {
	position: absolute;
	top: 36px;
	left: 263px;
}

#copy {
	position: absolute;
	top: 148px;
	left: 80px;
}

#vince {
	position: absolute;
	top: 75px;
	left: 534px;
}


/* ========================================
	#basic
======================================== */
#basic {
	height: 1332px;
}

#basic-ttl-area {
	position: relative;
	width: 960px;
	height: 261px;
	margin: 0 auto;
}

.lesson-ttl {
	position: absolute;
	top: 0;
	left: 265px;
}

.basic-ttl {
	position: absolute;
	top: 75px;
	left: 47px;
}

.basic-copy {
	position: absolute;
	top: 103px;
	left: 345px;
}

/* --- step1 --- */
#step1 {
	position: relative;
	width: 960px;
	height: 360px;
	margin: 0 auto;
}

.step1-ttl {
	position: absolute;
	top: 0;
	left: 60px;
}

.step1-point {
	position: absolute;
	top: 89px;
	left: 350px;
}

/* --- step2 --- */
#step2 {
	position: relative;
	width: 960px;
	height: 251px;
	margin: 0 auto;
}

.step2-ttl {
	position: absolute;
	top: 0;
	left: 210px;
}

.step2-point1 {
	position: absolute;
	top: 82px;
	left: 80px;
}

.step2-point2 {
	position: absolute;
	top: 82px;
	left: 568px;
}

#arw1 {
	position: absolute;
	top: -75px;
	left: 56px;
}

/* --- step3 --- */
#step3 {
	position: relative;
	width: 960px;
	height: 378px;
	margin: 0 auto;
}

.step3-ttl {
	position: absolute;
	top: 69px;
	left: 361px;
}

.step3-point {
	position: absolute;
	top: 155px;
	left: 211px;
}

.step3-chara {
	position: absolute;
	top: 63px;
	left: 56px;
}

.step3-img {
	position: absolute;
	top: 155px;
	left: 565px;
}

#arw2 {
	position: absolute;
	top: -6px;
	left: 212px;
}

/* ========================================
	#apply
======================================== */
#apply {
	height: 655px;
}

.apply-ttl {
	position: absolute;
	top: 5px;
	left: 47px;
}

.apply-copy {
	position: absolute;
	top: 29px;
	left: 345px;
}

.apply-catch {
	position: absolute;
	top: 162px;
	left: 238px;
}

.apply1,
.apply2 {
	position: absolute;
	top: 197px;
	text-align: center;
}

.apply1 {
	left: 76px;
}

.apply2 {
	left: 493px;
}

#apply dd {
	margin-top: 15px;
}

/* ========================================
	#paint
======================================== */
#paint {
	height: 795px;
}

.paint-ttl {
	position: absolute;
	top: 5px;
	left: 47px;
}

.paint-copy {
	position: absolute;
	top: 29px;
	left: 345px;
}

.item01,
.item02,
.item03 {
	position: absolute;
	top: 174px;
}
.item01 {
	left: 76px;
}
.item02 {
	left: 356px;
}
.item03 {
	left: 636px;
}

.item04,
.item05 {
	position: absolute;
	top: 457px;
}
.item04 {
	left: 216px;
}
.item05 {
	left: 500px;
}