/* ===================================================================
CSS information
 file name  :  style.css
 style info :  All Page Desining
=================================================================== */
@charset "UTF-8";

html{
height: 100%;
min-height: 100%;
}
body{
background:#dbd496 url('../img/bg.png') repeat-y;
height: 100%;
min-height: 100%;
}

img{
vertical-align: bottom;
border: none;
}

body, textarea {
font-family: sans-serif;
font-size: 100%;
line-height: 100%;
}

br {
letter-spacing: normal; /* IE6 7 */
}

a.body:link{
font-size: 14px;
color:#0030ff;
text-decoration:none;
}
a.body:visited{
font-size: 14px;
color:#7102c7;
text-decoration:none;
}
a.body:active{
font-size: 14px;
color:#ff8fc6;
text-decoration:none;
}
a.body:hover{
font-size: 14px;
color:#ff8fc6;
text-decoration:none;
}


/*---------------------------------------------------------------------
  header
--------------------------------------------------------------------*/
#main_visual h1, #main_visual h2{
min-width:960px;
width: 1200px;
margin: 0 auto;
}

#main_visual h1{
background: url('../img/title.jpg') no-repeat;
background-position: center top;
height: 318px;
}

#main_visual h2{
background: url('../img/header.jpg') no-repeat;
background-position: center top;
height:0;
padding-top:280px;
overflow:hidden;
*white-space: nowrap; /*for IE7*/
text-indent:-9999px\9; /*for IE8-6 */
}


/*---------------------------------------------------------------------
  side Navi
--------------------------------------------------------------------*/
#followupWrap{
width: 175px;
height: 100%;
margin: 0 0 0 0;
position: fixed;
top: 0;
left: auto;
right: 0;
z-index: 9999;
}

#followupbt{
width:175px;
height:603px;
background: url("../img/followup_bk.png") no-repeat top left;
position: relative;
}

#followupf{
display: block;
width:97px;
height:95px;
top: 95px;
left: 46px;
position: absolute;
}
#followupk{
display: block;
width:114px;
height:115px;
top:211px;
left: 49px;
position: absolute;
}
#followupp{
display: block;
width:140px;
height:136px;
top:340px;
left:9px;
position: absolute;
}
#followuptop{
display: block;
width:96px;
height:94px;
top:495px;
left: 47px;
position: absolute;
}


/*---------------------------------------------------------------------
  common
---------------------------------------------------------------------*/
#wrap {
background:#fbfae3 url('../img/wrap.jpg') repeat-y;
min-width:960px;
width:1200px;
height: 100%;
min-height: 100%;
text-align: center;
margin: 0 auto;
}

/*---------------------------------------------------------------------
  main_culumn
---------------------------------------------------------------------*/

/*====== box01 ======*/
#box01 {}

#box01 h1{
background: url('../img/box01_caption.jpg') no-repeat;
background-position: center top;
height:0;
padding-top:106px;
overflow:hidden;
*white-space: nowrap; /*for IE7*/
text-indent:-9999px\9; /*for IE8-6 */
}
#box01 p{
background: url('../img/box01_text.jpg') no-repeat;
background-position: center top;
height:0;
padding-top:203px;
overflow:hidden;
*white-space: nowrap; /*for IE7*/
text-indent:-9999px\9; /*for IE8-6 */
}
#box01 div.Btn_Area{
background: url('../img/box01_btn_bg.jpg') no-repeat;
background-position: center top;
height:285px;
position:relative;
padding:0;
}
#box01 div.Btn{
position:absolute;
top:35px;
left: 20%;
right: 10%;
}
#box01 div.roulette01{
position:absolute;
top:18px;
left: 16%;
}

/*------------------------------------------------------------------*/
/*  eto contents
/*------------------------------------------------------------------*/
.container{
background: url('../img/box01_contents.jpg') no-repeat;
background-position: center top;
width:1200px;
height:798px;
margin:0 auto;
clear:both;
display:block;
}

.all-service{
float:left;
overflow:hidden;
}
.service-circles{
width:1200px;
height:798px;
float:left;
}
.service-circles img{
margin:0 auto;
}

.center-circle{
background:url('../img/eto_bg.png') no-repeat;
width:493px;
height:197px;
position:absolute;
margin:270px 0 0 345px;
*margin-left: -850px;/*for IE7*/
text-align:center;
z-index:1000;
}

.service1, .service2, .service3, .service4, .service5, .service6, .service7, .service8, .service9, .service10, .service11, .service12{
width:141px;
height:141px;
text-align:center;
}

.service1{
margin:20px 0 0 525px;
*margin-left: -80px;/*for IE7*/
position:absolute;
}
.service2{
  margin:42px 0 0 683px;
  *margin-left: 80px;/*for IE7*/
  position:absolute;
}
.service3{
  margin:180px 0 0 820px;
  *margin-left: 180px;/*for IE7*/
  position:absolute;
}
.service4{
  margin:333px 0 0 857px;
  *margin-left: 260px;/*for IE7*/
  position:absolute;
}
.service5{
  margin:495px 0 0 810px;
  *margin-left: 180px;/*for IE7*/
  position:absolute;
}
.service6{
  margin:625px 0 0 683px;
  *margin-left: 80px;/*for IE7*/
  position:absolute;
}
.service7{
  margin:660px 0 0 527px;
*margin-left: -80px;/*for IE7*/
  position:absolute;
}
.service8{
  margin:625px 0 0 378px;
  *margin-left: -260px;/*for IE7*/
  position:absolute;
}
.service9{
  margin:495px 0 0 260px;
  *margin-left: -370px;/*for IE7*/
  position:absolute;
}
.service10{
  margin:334px 0 0 213px;
  *margin-left: -400px;/*for IE7*/
  position:absolute;
}
.service11{
  margin:180px 0 0 253px;
  *margin-left: -340px;/*for IE7*/
  position:absolute;
}
.service12{
  margin:54px 0 0 371px;
  *margin-left: -240px;/*for IE7*/
  position:absolute;
}

.service-description {
  text-align:center;
  margin-top:0px;
}

@-webkit-keyframes spin {
from {
    -webkit-transform: rotate(0deg);
}
to {
    -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes spinback {
from {
    -webkit-transform: rotate(0deg);
}
to {
    -webkit-transform: rotate(-360deg);
    }
}
/*--animation --*/

.service-circles{
    -webkit-animation-name: spin;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 40s;
}
.service1, .service2, .service3, .service4, .service5, .service6, .service7, .service8, .service9, .service10, .service11, .service12{
    -webkit-animation-name: spinback;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 40s;
}

.map{
width:1200px;
height:0px;
float:left;
clear:both;
}



/*====== box02 ======*/
#box02 {}

#box02 h1{
background: url('../img/box02_caption.jpg') no-repeat;
background-position: center top;
height:0;
padding-top:308px;
overflow:hidden;
*white-space: nowrap; /*for IE7*/
text-indent:-9999px\9; /*for IE8-6 */
}
#box02 p{
background: url('../img/box02_text.jpg') no-repeat;
background-position: center top;
height:0;
padding-top:215px;
overflow:hidden;
*white-space: nowrap; /*for IE7*/
text-indent:-9999px\9; /*for IE8-6 *//
}
#box02 div.Btn_Area{
background: url('../img/box02_btn_bg.jpg') no-repeat;
background-position: center top;
height:224px;
position:relative;
padding:0;
margin-top:-2px;
}
#box02 div.Btn{
position:absolute;
left: 20%;
right: 10%;
}
#box02 div.roulette01{
position:absolute;
left: 16%;
top:-12px;
}


/*====== box03 ======*/
#box03 {}

/*#box03 h1{
background:url('../img/box03_caption.jpg') no-repeat;
background-position: center top;
height:0;
padding-top:130px;
overflow:hidden;
}*/


#box03 h1 {
display: block;
overflow: hidden;
width: 1200px;
height: 130px;
*text-indent: -9999px;/* for IE7/6 */
*background: url( '../img/box03_caption.jpg' ) 0 0 no-repeat;/* for IE7/6 */
}
#box03 h1:before {
display: inline-block;
content: url( '../img/box03_caption.jpg' );
font-size: 0;
line-height: 0;
}


section.part1, section.part2{
position:relative;
padding:0;
}
#box03 div.Btn_01{
position:absolute;
top:409px;
left: 10%;
right: 10%;
}
#box03 div.Btn_02{
position:absolute;
top:435px;
left: 10%;
right: 10%;
}


/*====== box04 ======*/
#box04{}

#box04 h1{
background: url('../img/box04_caption.jpg') no-repeat;
background-position: center top;
height:0;
padding-top:311px;
overflow:hidden;
*white-space: nowrap; /*for IE7*/
text-indent:-9999px\9; /*for IE8-6 */
}
#box04 p{
background: url('../img/box04_text.jpg') no-repeat;
background-position: center top;
height:0;
padding-top:102px;
overflow:hidden;
*white-space: nowrap; /*for IE7*/
text-indent:-9999px\9; /*for IE8-6 */
}
#box04 div.Btn_Area{
background: url('../img/box04_btn_bg.jpg') no-repeat;
background-position: center top;
height:295px;
position:relative;
padding:0;
}
#box04 div.Btn{
position:absolute;
top:62px;
left: 20%;
right: 10%;
}
#box04 div.roulette01{
position:absolute;
top:50px;
left: 16%;
}


/*====== box05 ======*/
#box05 {}

#box05 h1{
background: url('../img/box05_caption.jpg') no-repeat;
background-position: center top;
height:0;
padding-top:175px;
overflow:hidden;
*white-space: nowrap; /*for IE7*/
text-indent:-9999px\9; /*for IE8-6 */
}
#box05 p{
background: url('../img/box05_text.jpg') no-repeat;
background-position: center top;
height:0;
padding-top:79px;
overflow:hidden;
*white-space: nowrap; /*for IE7*/
text-indent:-9999px\9; /*for IE8-6 */
}
#box05 ul{
background: url('../img/box05_contents.jpg') no-repeat;
background-position: center top;
height:0;
padding-top:374px;
overflow:hidden;
list-style:none;
*white-space: nowrap; /*for IE7*/
text-indent:-9999px\9; /*for IE8-6 */
vertical-align:bottom;
}



/*====== box06--> profile_form(1) <--- ======*/
#box06 {
}

#p_center{
background: url('../img/form_center.jpg') repeat-y;
background-position: center top;
margin: 0 auto;
}

#box06 table{
margin: 0px auto 30px 270px;
}

#box06 table td b{
padding: 10px;
color: #32302b;
font-size: 18px;
font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'sans-serif';
text-align: left;
line-height: 1.4em;
vertical-align: middle;
}

#box06 table th{
padding:40px 0 0 30px;
text-align: center;
}

#box06 table td{
padding:40px 0 0 45px;
text-align: left;
}

#box06 p.domain_txt{
margin-top:10px;
font-size: 14px;
line-height:1.4em;
color: #32302b;
}

#box06 p img {
vertical-align: middle;
}


/*====== second text ======*/

#s_txt {
width: 680px;
font-size: 14px;
text-align: left;
line-height: 1.4em;
margin: 0 auto;
color:#32302b;
font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'sans-serif';
letter-spacing: 1px;
}

#s_txt h3 {
padding:20px 0 0 1px;
font-size: 15px;
margin:0;
color:#705607;
font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'sans-serif';
border-bottom: 1px dotted #705607;
}
#s_txt p, #s_txt ul, #s_txt ol{
padding-top: 15px;
}
#s_txt p, #s_txt ul{
padding-left: 20px;
}
#s_txt ul{
list-style:none;
}
#s_txt ol{
padding-left: 44px;
}
.mark_clr{
color:#705607;
}


/*====== footer ======*/
#footer {
background: url('../img/footer_bg.jpg') no-repeat;
background-position:center top;
height: 107px;
min-width:960px;
text-align: center;
margin: 0 auto;
color: #ffffff;
}

#f_link {
padding-top:45px;
}

#f_link a:link{
font-size: 13px;
line-height: 1.2em;
color: #ffffff;
text-decoration:none;
}
#f_link a:visited{
font-size: 13px;
line-height: 1.2em;
color: #7102c7;
text-decoration:none;
}
#f_link a:hover{
font-size: 13px;
line-height: 1.2em;
color: #ff8fc6;
text-decoration:none;
}
#f_link a:active{
font-size: 13px;
line-height: 1.2em;
color: #ff8fc6;
text-decoration:none;
}
p.copyright{
font-size: 13px;
color:#ffffff;
margin-top: 20px;
}


/*---------------------------------------------------------------------
  other
----------------------------------------------------------------*/

.clearfix:after { content:""; display:block; clear:both; height:0; }
* html .clearfix  { zoom: 1; }  /* IE6 */
*:first-child+html .clearfix { zoom: 1; }  /* IE7 */

@media screen and (max-width: 1000px) {
  #container{
    width : 95%;
  }
}
@media screen and (max-width: 760px) {
  /* style */
}