@charset "UTF-8";

/* *****************************************
/*+  init  +********************************
/***************************************** */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin: 0;
	padding: 0;
}
img { 
    max-width: 100%; 
    height:auto;
}
.sp {
	display: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
fieldset,img {border: 0;}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
	font-weight: normal;
}
em,strong,th {font-weight: bold;}
ol,ul {list-style: none;}
caption,th {text-align: left;}
h1,h2,h3,h4,h5,h6 {font-size: 100%;}
q:before,q:after {content: '';}
abbr,acronym {border: 0;}
sub,sup {
	font-size: .5em;
	line-height: 1;
}
hr {display: none;}

.l {float:left;}
.r {float:right;}
.no0{font-size:60%;} /* フォントズーム */
.no1{font-size:80%;} /* フォントズーム */
.no2{font-size:110%;} /* フォントズーム */
.txtr{text-align:right;}
strong{color:#ff0099}

/* *****************************************
/*+  link  +********************************
/***************************************** */
a {color:#8c8c8c;}
a:hover {color:#574013;text-decoration: underline;}

/*+ rollover + --------------------------- */

 #page-top {
	 position: fixed;
	 bottom: 67px;
	 right: 20px;
	 font-size: 77%;
	 z-index: 100;
}
 #page-top a {
	 background: #666;
	 text-decoration: none;
	 color: #fff;
	 width: 39px;
	 height: 39px;
	 padding: 0;
	 text-align: center;
	 display: block;
}
 #page-top a:hover {
	 text-decoration: none;
	 background-image: url(images/pagetop_on.gif);
}
 #page-top a:hover img {opacity: 0;}
 section #guide p {
	 font-size: 75%;
	 line-height: 175%
}

img {
    display: none;
}
/* *****************************************
/*+  layout  +******************************
/***************************************** */
body {
	font-family: 'ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	color: #596168;
	font-size:0.95rem;
	line-height: 1.8;
	text-align: center;
	-webkit-text-size-adjust: 100%;
}
#wrapper {
	/*min-width: 1920px;*/
	margin: 0 auto;
overflow: hidden;
}
.inner {
	margin: 0 auto;
	width: 1080px;
	position: relative;
}
.inner p, .inner li, .inner dl, .inner dt, .inner dd, .inner div {position: relative;}


.clear {clear:both;}

.effect{
	position: relative;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.8) inset;
	box-shadow: 0 1px 40px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.1) inset;
	background-color: #ffffff;
}
.effect:after{
	-moz-transform:skew(8deg) rotate(3deg);
	-ms-transform:skew(8deg) rotate(3deg);
	-o-transform:skew(8deg) rotate(3deg);
}


/*---main---*/
#main{
	background: url(images/main_bg.jpg) no-repeat 0 300px;
	height: 800px;
	position: relative;
	/*width: 1920px;*/
	margin: 0 auto;
    top: 80px;
}
#main .bg {
}

#main #main_img {
    left: -110px;
    text-align: left;
}

#main #main_item {
    top: -760px;
    left: 200px;
}
#main #main_item h2,#main #main_item h3 {
    margin: 30px 0 0;
}
#main #main_item p {
    margin: 15px 0 0;
}

#main #logo {
top: 30px;
}


#main .inner {
	/*height: 768px;
	overflow: hidden;
	clear: both;*/
}

/*---tk---*/
#tk.effect {
    width: 955px;
    margin: 0 auto;
    padding: 60px 30px 30px;
clear: both;
}
#tk p{text-align:right;padding-right: 20px;}

/*---action---*/
#action {
    margin: 150px 0 50px;
}
#action ul {
    display: table;
    table-layout:fixed;
    /* width:500px; */
    border-collapse: separate;
    border-spacing: 30px 0;
}
#action li{
	display: table-cell;
}
#action a:hover {
	border: #abb1c9 solid 4px;
    display: block;
    margin: -4px;

}
.copy {
	background: url(images/copy_bg.png) no-repeat;
	height: 280px;
	/*width: 1920px;*/
	margin: 80px auto;
clear: both;

}
.copy h2 {
    padding: 30px 0 0;
}

/*---point---*/
#point {
}

#point #point_01{
	background: url(images/point_01_bg.png) no-repeat;
	height: 655px;
	width: 1020px;
	margin: 0 auto;
}
#point #point_02{
	background: url(images/point_02_bg.png) no-repeat;
	height: 655px;
	width: 1020px;
	margin: 50px auto;
}
#point #point_03{
	background: url(images/point_03_bg.png) no-repeat;
	height: 785px;
	width: 1020px;
	margin: 50px auto;
}
#point #point_04{
	background: url(images/point_04_bg.png) no-repeat;
	height: 655px;
	width: 1020px;
	margin: 50px auto;
}

#point .su{
    position: relative;
    height: 0;
}
#point #p01{
top: -730px;
    left: -370px;
}
#point #p02{
    top: -670px;
    left: 310px;
    z-index: 100;
}
#point #p03{
        top: -750px;
    left: -280px;
    z-index: 100;
}
#point #p04{
    top: -780px;
    left: 310px;
    z-index: 100;
}

#point .con {
    text-align: left;
    position: relative;
}
#point .con h3{
margin:15px 0;
}
#point #point_01 .con {
    left: 300px;
    top: 90px;
}
#point #point_02 .con {
    left: 30px;
    top: 90px;
}
#point #point_03 .con {
    left: 450px;
    top: 90px;
}

#point #point_04 .con {
    left: 60px;
    top: 90px;
}

/*---4step---*/
#step {
	position: relative;
}
#step .item{
text-align: left;
}
#step .effect{
	height: 680px;
	width: 925px;
	margin: 80px auto;
}

#step #step1{
	background: url(images/4step_01_bg.png) no-repeat;
}
#step #step2{
	background: url(images/4step_02_bg.png) no-repeat;
}

#step #step3{
	background: url(images/4step_03_bg.png) no-repeat;
}

#step #step4{
	background: url(images/4step_04_bg.png) no-repeat;
}

#step .con {
    text-align: left;
    left: 380px;
    top: -620px;
}
#step .con h3{
margin:15px 0;
}

/*---review---*/
#review {
	background: url(images/re.png) no-repeat 550px 200px;
	border: #b5b5b5 solid 1px;
padding:30px;
width:925px;
    margin: 80px auto;
}
#review h2 {
margin: 40px 0 30px;
}
#review li {
    text-align: left;
    margin: 15px 0;
}
#review p {
    text-align: left;
    margin: 90px 0 15px;
}

/*---8th---*/
#th {
	background: url(images/8th_bg.png) no-repeat;
	height: 1245px;
	/*width: 1920px;*/
	margin: 0 auto;
    top: -250px;
    position: relative;
}
#th .inner{
    top: 250px;
}
#th li{
    float: left;
    /* width: 600px; */
    left: 150px;
    margin: 0 50px 0 0;
    top: -20px;
}


/*---pre---*/
#point #pre{
	background: url(images/pre_bg.png) no-repeat;
	height: 595px;
	width: 925px;
	margin: 0 auto;
}
#point #pre .con {
text-align: left;
    left: 270px;
    position: relative;
    top: 130px;
z-index: 10;
}
#point .su_p{
    top: -670px;
    position: relative;
    /* z-index: 0; */
    left: -370px;
    height: 0;
}

#all_c p{
text-align: left;
    margin: 20px 0;
}
/*---inBox---*/
#inBox {
	text-align:left;
	margin:80px 0;
}
#inBox h2{
	color: #00c04a;
	font-weight: normal;
}
#inBox h3{
	font-weight: normal;
	padding:10px 0 0;
}
#inBox p{font-size: 12px;}

/*---footer---*/
#footer{
	margin-top: 80px;
	border-top:1px #d9d9d9 solid;
}

#footer .l{padding:25px 0;}
#footer .r{padding:30px 0;}

#footlink{
	font-size: 0.75rem;
	clear:both;
	background-color:#efefef;
	height:40px;
}
#footlink ul{
	overflow: visible;
	padding-top: 5px;
}

#footlink li{
	float: left;
	margin: 8px 10px;
	padding: 0 0 0 10px;
}
#footlink li a {text-decoration: none;}
#footlink li a:hover{text-decoration: underline;}
#footlink p {
	float: right;
	font-size: 0.65rem;
	padding-top: 10px;
	text-align: right;
}
.social ul {
	margin: 0 auto;
    display: table;
    border-collapse: separate;
    border-spacing: 20px 0;
    table-layout:fixed;
}
.social li {
	display: table-cell;
	width:30px;
}
.social li:last-child {
	margin-right: 0;
}

.social li img {
	width:100%;
	height:auto;
}



/* media queries
--------------------------------------------------------- */
@media screen and (max-width: 768px) {
	* {
   -webkit-appearance: none;
}
.pc {
	display: none;
}
.sp {
	display: block;
}
/*---action---*/
#action {
    margin: 30px 0;
}
#action img{
    max-width: 100%; 
    height:auto;
}
#action ul {
}
#action li{
    display: -webkit-box;
    margin: 30px 0;
}
#action a:hover {
	border: #abb1c9 solid 4px;
    display: block;
    margin: -4px;

}




.wrapContainer {
	width: 100%;
}
.contentsAll {
	width: 100%;
	float: none;
	margin: 0 auto;
	padding-left:0;
}
.mainArea {
	width: 100%;
}
  footer .footnav1 li {
    border-top: 1px solid #969696;
text-align:left;
  }
  footer .footnav1 li:last-child {
    margin-right: 0;
    border-bottom: 1px solid #969696;
  }

footer .footnav1 li a {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 13px 24px;
    font-size: 100%;
}
footer .footnav1 li a {text-decoration: none;}
footer .footnav1 li a:hover{text-decoration: underline;}

footer .social {
    float: none;
    margin: 20px 0 60px;
}

footer p {
	padding: 0;
	text-align: center;
	margin-bottom: 10px;
    font-size: 70%;
}
/*---tk---*/
#tk.effect {
    width: 90%;
    margin: 0 auto 40px;
padding:0 0 30px;
clear: both;
}

#tk p{text-align:right;padding-right: 20px;}


}