@charset "utf-8";
/* CSS Document */

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

body{
	background: #58b6bc url(../img/main_wrapper.png) no-repeat center top;
	color: #333;
	width: 100%;
	min-width: 1100px;
	font-family:  "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif;
}


/*------------------------------------------------

container

------------------------------------------------*/
.container{
	padding-bottom: 50px;
}

div.txt p{
	padding-bottom: 15px;
	font-size: 13px;
	line-height: 1.4;
}

ul.snsInner{
	overflow: hidden;
}

ul.snsInner li{
	/*display: inline-block;*/
	float: left;
}

ul.snsInner li.tw{
	width: 100px;
}

ul.snsInner li.mx{
	width: 80px;
}

ul.snsInner li.fb{
	width: 100px;
}

ul.snsInner li.hn{
	width: 100px;
}


/*------------------------------------------------

main

------------------------------------------------*/
.main{
	width: 100%;
	height: 1092px;
	background: url(../img/main_bg.jpg) no-repeat center top;
}

.main .container{
	width: 1100px;
	height: 1092px;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

.main .container ul.snsInner{
	position: absolute;
	top: 20px;
	right: 0;
}

.main .container .logo{
	position: absolute;
	top: 14px;
	left: 70px;
}

.main .container .prf{
	position: absolute;
	top: 65px;
	right: 100px;
}

.main .container h1{
	position: absolute;
	top: 136px;
	right: 90px;
}

.main .container .catch{
	position: absolute;
	top: 113px;
	right: 95px;
}

.main .container h2{
	position: absolute;
	top: 477px;
	left: 406px;
}

.main .container .h2p{
	position: absolute;
	top: 555px;
	left: 495px;
	width: 275px;
	font-size: 12px;
	line-height: 1.4;
	text-indent: -0.5em;
}

.main .container .ext{
	position: absolute;
	bottom: 335px;
	left: 406px;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 1.4;
}
.ext .fs {
	font-size: 16px;
	font-weight: bold;
}

.main .container h3{
	position: absolute;
	bottom: 239px;
	right: 252px;
}

.main .container .pop{
	position: absolute;
	bottom: 180px;
	left: 350px;
}

.main .container .btn{
	position: absolute;
	bottom: 192px;
	left: 587px;
}

.main .container .sub{
	position: absolute;
	bottom: 40px;
	left: 234px;
	overflow: hidden;
}

.main .container .sub li{
	float: left;
}

.main .container .sub a{
	display: block;
	padding: 7px 23px 6px 24px;
}





/*------------------------------------------------

chapter01

------------------------------------------------*/
.chapter01{
	width: 960px;
	margin: 0 auto 50px;
	background-color: #fff;
	position: relative;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
    -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
}

.chapter01 h3{
	width: 100%;
	padding: 0;
	text-align: center;
}

.chapter01 .img{
}

.chapter01 h4{
	width: 550px;
	padding: 25px 35px 0 375px;
	font-weight: bold;
	font-size: 18px;
	line-height: 1.25;
	text-indent: -30px;
}

.chapter01 h4 img{
	margin-right: 10px;
	vertical-align: baseline;
}

.chapter01 div.txt{
	width: 560px;
	padding: 20px 35px 0 365px;
}

.chapter01 div.txt p.narrow{
	width: 350px;
}

.chapter01 ul.snsInner{
	padding: 20px;
}

.chapter01 a.ss01{
	display: block;
	position: absolute;
	left: -25px;
	bottom: 85px;
	z-index: 1;
}

.chapter01 a.ss02{
	display: block;
	position: absolute;
	right: -11px;
	bottom: 10px;
	z-index: 1;
}

/*------------------------------------------------

chapter02

------------------------------------------------*/
.chapter02{
	width: 960px;
	height: 858px;
	margin: 0 auto 50px;
	background-color: #fff;
	position: relative;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
    -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
}

.chapter02 h3{
	width: 384px;
	padding: 0;
	text-align: center;
	float: right;
}

.chapter02 .img{
	float: left;
}

.chapter02 h4{
	width: 316px;
	margin: 0 19px;
	padding: 25px 0 20px 30px;
	font-weight: bold;
	font-size: 18px;
	line-height: 1.25;
	border-top: #a5b8bb 1px solid;
	float: right;
	text-indent: -30px;
}

.chapter02 h4 img{
	margin-right: 10px;
	vertical-align: baseline;
}

.chapter02 div.txt{
	width: 334px;
	padding: 0 25px;
	float: right;
}

.chapter02 div.txt .ss{
	position: absolute;
	bottom: 10px;
	right: -25px;
}


/*------------------------------------------------

chapter03

------------------------------------------------*/
.chapter03{
	width: 960px;
	height: 888px;
	margin: 0 auto 50px;
	background-color: #fff;
	position: relative;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
    -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
}

.chapter03 h3{
	width: 384px;
	padding: 0;
	text-align: center;
	float: left;
}

.chapter03 .img{
	float: right;
}

.chapter03 h4{
	width: 316px;
	margin: 0 19px;
	padding: 25px 0 20px 30px;
	font-weight: bold;
	font-size: 18px;
	line-height: 1.25;
	border-top: #a5b8bb 1px solid;
	float: left;
	text-indent: -30px;
}

.chapter03 h4 img{
	margin-right: 10px;
	vertical-align: baseline;
}

.chapter03 div.txt{
	width: 334px;
	padding: 0 25px;
	float: left;
}

.chapter03 div.txt .ss{
	position: absolute;
	bottom: 70px;
	left: -29px;
}

.chapter03 ul.snsInner{
	position: absolute;
	bottom: 20px;
	left: 20px;
}

/*------------------------------------------------

chapter04

------------------------------------------------*/
.chapter04{
	width: 960px;
	height: 858px;
	margin: 0 auto 50px;
	background-color: #fff;
	position: relative;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
    -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
}

.chapter04 h3{
	width: 384px;
	padding: 0;
	text-align: center;
	float: right;
}

.chapter04 .img{
	float: left;
}

.chapter04 h4{
	width: 316px;
	margin: 0 19px;
	padding: 25px 0 20px 30px;
	font-weight: bold;
	font-size: 20px;
	line-height: 1.25;
	border-top: #a5b8bb 1px solid;
	float: right;text-indent: -30px;
}

.chapter04 h4 img{
	margin-right: 10px;
	vertical-align: baseline;
}

.chapter04 div.txt{
	width: 334px;
	padding: 0 25px;
	float: right;
}

.chapter04 div.txt .ss{
	position: absolute;
	bottom: 25px;
	right: -26px;
}

.chapter04 div.stepup{
	position: absolute;
	bottom: -75px;
	left: 408px;
	z-index: 100;
}

/*------------------------------------------------

chapter05

------------------------------------------------*/
.chapter05{
	width: 960px;
	height: 908px;
	margin: 0 auto 50px;
	background-color: #fff;
	position: relative;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
    -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
}

.chapter05 h3{
	width: 384px;
	padding: 0;
	text-align: center;
	float: left;
}

.chapter05 .img{
	float: right;
}

.chapter05 h4{
	width: 316px;
	margin: 0 19px;
	padding: 25px 0 20px 30px;
	font-weight: bold;
	font-size: 18px;
	line-height: 1.25;
	border-top: #a5b8bb 1px solid;
	float: left;
	text-indent: -30px;
}

.chapter05 h4 img{
	margin-right: 10px;
	vertical-align: baseline;
}

.chapter05 div.txt{
	width: 334px;
	padding: 0 25px;
	float: left;
}

.chapter05 div.txt .ss{
	position: absolute;
	bottom: 15px;
	left: -30px;
}

.chapter05 div.stepup{
	position: absolute;
	bottom: -76px;
	right: 229px;
	z-index: 100;
}

/*------------------------------------------------

chapter06

------------------------------------------------*/
.chapter06{
	width: 960px;
	height: 611px;
	margin: 0 auto 50px;
	background: #fff url(../img/ch06_img.jpg) no-repeat right 132px;
	position: relative;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
    -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
}

.chapter06 h3{
	width: 100%;
	padding: 0;
	text-align: center;
}

.chapter06 h4{
	width: 550px;
	padding: 25px 370px 0 50px;
	font-weight: bold;
	font-size: 18px;
	line-height: 1.25;
	text-indent: -30px;
}

.chapter06 h4 img{
	margin-right: 10px;
	vertical-align: baseline;
}

.chapter06 div.txt{
	padding: 20px 370px 0 25px;
	overflow: hidden;
}

.chapter06 div.txt p.narrow{
	width: 320px;
	float: right;
}

.chapter06 ul.snsInner{
	position: absolute;
	left: 32px;
	bottom: 30px;
}

.chapter06 .ss{
	position: absolute;
	left: 32px;
	bottom: 76px;
	z-index: 1;
}





/*------------------------------------------------

cm

------------------------------------------------*/
.cm{
	width: 962px;
	height: 134px;
	margin: 0 auto 50px;
	background: url(../img/cm_bg.png) no-repeat;
	position: relative;
}
.cm1{
	width: 393px;
	height: 151px;
	margin: 20px auto 10px;
	position: relative;
}
.cm2{
	width: 728px;
	height: 90px;
	margin: 30px auto 0;
	position: relative;
}

.cm h3{
	position: absolute;
	top: 15px;
	left: 16px;
}

.cm .btn{
	display: block;
	position: absolute;
	bottom: 16px;
	right: 21px;
}

/*------------------------------------------------

profile

------------------------------------------------*/
.profile{
	width: 100%;
	height: 316px;
	padding: 0;
	background-color: #88cdd1;
	position: relative;
}

.profile .box{
	width: 960px;
	height: 368px;
	background: url(../img/profile_bg.png) no-repeat;
	position: absolute;
	top: -31px;
	left: 50%;
	margin-left: -480px;
	z-index: 100;
}

.profile .box h3{
	position: absolute;
	top: 33px;
	left: 50%;
	margin-left: -52px;
}

.profile .box dl.data{
	position: absolute;
	top: 93px;
	left: 231px;
	width: 375px;
}

.profile .box dl.data dd{
	padding-top: 7px;
}

.profile .box dl.data dl{
	position: relative;
	overflow: hidden;
	display: inline-block;
	width: auto;

	/* For IE 6/7 */
    *display: inline;
    *zoom: 1;
}

.profile .box dl.data dl dt,
.profile .box dl.data dl dd{
	float: left;
	font-size: 12px;
	line-height: 1.4;
	padding: 0 10px 0 0;
}

.profile .box dl.data dl dt{
	color: #5c9396;
	font-weight: bold;
}

.profile .box .txt{
	position: absolute;
	top: 180px;
	left: 231px;
	width: 375px;
	font-size: 12px;
	line-height: 1.4;
}

.profile .box .photo-person{
	position: absolute;
	top: 96px;
	left: 64px;
}

.profile .box .photo-shop{
	position: absolute;
	top: 96px;
	right: 64px;
}

.profile .box .photo-shop-cap{
	position: absolute;
	bottom: 105px;
	right: 64px;
	width: 270px;
	text-align: center;
	font-size: 11px;
}





.ajcontainer{
	width: 100%;
	background: #feeff2 url(../img/about_bg.jpg) no-repeat center top;
	background-size: contain;
}

/*------------------------------------------------

about

------------------------------------------------*/
.about{
	width: 100%;
	padding: 60px 0 0;
	/*background: url(../img/about_bg.jpg) no-repeat center bottom;
	background-size: cover;*/
}

.about .box{
	width: 958px;
	height: 418px;
	margin: 0 auto;
	position: relative;
	border: #dedee3 1px solid;
	background: #fff;
	box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.20);
    -moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.20);
    -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.20);
}

.about .box h3{
	position: absolute;
	top: 35px;
	left: 35px;
}

.about .box .h3-p{
	position: absolute;
	top: 95px;
	left: 35px;
}

.about .box .h401{
	position: absolute;
	top: 135px;
	left: 17px;
}

.about .box .p01{
	position: absolute;
	top: 330px;
	left: 35px;
	width: 210px;
	font-size: 13px;
	line-height: 1.4;
}

.about .box .h402{
	position: absolute;
	top: 135px;
	left: 255px;
}

.about .box .p02{
	position: absolute;
	top: 330px;
	left: 275px;
	width: 210px;
	font-size: 13px;
	line-height: 1.4;
}

.about .box .h403{
	position: absolute;
	top: 135px;
	right: 219px;
}

.about .box .p03{
	position: absolute;
	top: 330px;
	right: 239px;
	width: 210px;
	font-size: 13px;
	line-height: 1.4;
}

.about .box .bgimg{
	position: absolute;
	top: 0;
	right: 0;
}

.about .box .bgimg img{
	margin-top: -53px;
	margin-right: -58px;
}

.about .box .btn-detail{
	display: block;
	position: absolute;
	bottom: 34px;
	right: 25px;
}


/*------------------------------------------------

join

------------------------------------------------*/
.join{
	width: 100%;
	/*background-color: #feeff2;*/
	padding: 10px 0 20px;
}

.join h3{
	width: 960px;
	margin: 0 auto;
}

.join .box{
	width: 960px;
	height: 516px;
	background: url(../img/join_bg.jpg) no-repeat;
	margin: 10px auto;
	position: relative;
}

.join .box .logo{
	position: absolute;
	bottom: 11px;
	left: 15px;
}

.join .box .p01{
	position: absolute;
	top: 29px;
	left: 27px;
}

.join .box .p02{
	position: absolute;
	top: 29px;
	left: 337px;
}

.join .box .p03{
	position: absolute;
	top: 29px;
	right: 20px;
}

.join .box .btn-detail{
	position: absolute;
	bottom: 30px;
	left: 365px;
}

.join .box .btn-free{
	position: absolute;
	bottom: 114px;
	right: 30px;
}

.join .box .btn-id{
	position: absolute;
	bottom: 76px;
	right: 30px;
}

.join .box .openid{
	position: absolute;
	bottom: 50px;
	right: 30px;
	overflow: hidden;
}

.join .box .openid dt,
.join .box .openid dd{
	float: left;
	padding-left: 10px;
}


/*------------------------------------------------

return top

------------------------------------------------*/
.rtnTop{
	width: 960px;
	margin: 0 auto;
	padding-bottom: 30px;
	overflow: hidden;
	text-align: right;
}

.rtnTop a{
	color: #333333;
	text-decoration: none;
	font-size: 13px;
}

.rtnTop a img{
	vertical-align: baseline;
}

/*------------------------------------------------

footer

------------------------------------------------*/
.footer{
	width: 100%;
	border-top: #efe1e4 solid 1px;
	padding: 30px 0;
	background-color: #fff;
}

.footer .box{
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}

.footer .box p{
	float: left;
	color: #666666;
	line-height: 1.4em;
	font-size: 13px;
}

.footer .box ul.snsInner{
	float: right;
}