@charset "UTF-8";


/* CSS Document */




.how_01_title {
margin:40px 0 36px;
padding: 15px 0 13px 65px;
font-size: 167%;
line-height:1;
letter-spacing:1px;
border:3px solid #5D99DE;
background-image:url(../../images/guide/howto/title_bk_01.png);
background-repeat:no-repeat;
background-position:center left;
}


.how_01_fig01_wrap {
background-color:#DDE9F7;
margin-bottom:50px;}

.how_01_fig01_inner {
width:1000px;
margin:0 auto;
text-align:center;
padding:25px 0 30px;}

.how_01_fig02_inner {
width:1000px;
margin:0 auto;
text-align:center;}

.how_01_fig02_inner img{
margin:0 40px;}

.how_01_btn_wrap{
padding:47px 0 50px;}

.how_01_btn_wrap a{
display:block;
width:300px;
margin:0 auto;
height:50px;
text-align:center;
font-size: 123.1%;
line-height:50px;
color:#FFFFFF;
letter-spacing:1px;
background-color:#3B79C7;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
text-decoration:none;
}

.how_01_btn_wrap a:hover{
background-color:#76A1D8;
}


.how_01_fig03_inner {
width:834px;
height:161px;
padding:64px 0 0 32px;
margin:0 auto ;
text-align:left;
background-image:url(../../images/guide/howto/fig3-01.png);
background-repeat:no-repeat;}





.how_01_fig04_wrap {
background-color:#DDE9F7;}

.how_01_fig04_inner {
width:1000px;
margin:0 auto;
text-align:center;
padding:0 0 0;}



.how_01_fig04_item_wrap {
width:868px;
margin:0 auto;
text-align:center;
padding:34px 0 0;}


.how_01_fig04_item {
float:left;
text-align:left;
width:316px;
margin:0 29px;
padding:25px 30px;
background-color:#FFFFFF;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
font-size: 108%;
line-height:210%;}

.how_01_fig04_item_title_bs {
text-align:center;
width:80px;
margin:0 0 10px;
padding:0;
background-color:#5D99DE;
letter-spacing:1px;
color:#FFFFFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
font-size: 123.1%;
line-height:200%;
font-weight:bold;}

.how_01_fig04_item_title_cs {
text-align:center;
width:80px;
margin:0 0 10px;
padding:0;
background-color:#3B79C7;
letter-spacing:1px;
color:#FFFFFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
font-size: 123.1%;
line-height:200%;
font-weight:bold;}

.how_01_fig04_item_text a {
color:#5330E1;
text-decoration:none;}

.how_01_fig04_item_text a:hover {
color:#5330E1;
text-decoration:underline;}







.how_01_05_title {
text-align:center;
background-image:url(../../images/guide/howto/fig5_bk_01.png);
background-repeat:repeat-x;
height:135px;}


.how_01_05_t_inner {
width:670px;
margin:0 auto;}

.how_01_05_t_op {
float:left;
color:#FFFFFF;
font-size: 167%;
line-height:1;
letter-spacing:2px;
font-weight:bold;
padding-top:75px;}

.how_01_05_t_img {
float:left;}




.how_01_05_item_inner{
width:100%;
overflow:hidden;}

.how_01_05_item_inner ul{
margin:0 0 0 -1%;}

.how_01_05_item_inner li{
float:left;
display:block;
height:376px;
width:49%;
margin:0 0 12px 1%;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;}

.how_01_05_item_inner li img{
width:230px;
height:auto;}

.how_01_05_item_inner .item_a {
background-image:url(../../images/guide/howto/how_item_01.jpg);}

.how_01_05_item_inner .item_b {
background-image:url(../../images/guide/howto/how_item_02.jpg);}

.how_01_05_item_inner .item_c {
background-image:url(../../images/guide/howto/how_item_03.jpg);}

.how_01_05_item_inner .item_d {
background-image:url(../../images/guide/howto/how_item_04.jpg);}

.how_01_05_item_inner .item_e {
background-image:url(../../images/guide/howto/how_item_05.jpg);}

.how_01_05_item_inner .item_f {
background-image:url(../../images/guide/howto/how_item_06.jpg);}


.how_01_05_item_win {
width:400px;
height:227px;
margin:67px auto 0;
border:10px solid #3B79C7;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background-color:#FFFFFF;}

.how_01_05_item_text {
width:350px;
margin:5px auto 0;
text-align:left;
color:#3B79C7;
font-size: 120%;
line-height:190%;}

.how_01_05_item_text p{
margin:5px 0 0;}







.how_01_fig06_inner {
width:840px;
margin:0 auto;}




.how_01_title_b {
width:1000px;
margin:40px auto 36px;
padding: 15px 0 13px 0px;
font-size: 167%;
line-height:1;
text-align:center;
letter-spacing:1px;
color:#5D99DE;
border:3px solid #5D99DE;}

























h2.title02 {
  box-shadow: #a39c97 0px 1px 3px 0px;
  -webkit-box-shadow: #a39c97 0px 1px 3px 0px;
  -moz-box-shadow: #a39c97 0px 1px 3px 0px;
  margin-bottom: 15px !important;
}

.guideBoxInner {
  padding: 21px 23px 23px 23px;
}

.illust01 {
  margin-bottom: 47px;
}

.flow01 {
  margin-bottom: 34px;
}

.illust02 {
  position: relative;
  margin-bottom: 31px;
}

.illust02 .btnChLineup a {
  position: absolute;
  top: 179px;
  left: 225px;
}

.illust03 {
  margin-bottom: 44px;
}

.flow02 {
  margin-bottom: 51px;
}

.illust04 {
  position: relative;
  margin-bottom: 82px;
}

.illust04 .btnChLineup a {
  position: absolute;
  top: 382px;
  left: 383px;
}

.illust04 .btnDetail01 a {
  position: absolute;
  top: 383px;
  left: 262px;
}

.illust04 .btnDetail02 a {
  position: absolute;
  top: 128px;
  left: 442px;
}

.flow03 {
  margin-bottom: 50px;
}

#squareLink {
  overflow: hidden;
}

#squareLink li {
  float: left;
  margin: 0 40px 0px 0;
}

#squareLink li.lastChild {
  float: left;
  margin: 0 0 0px 0;
}

div.squareLinkInner {
  background: url(../../images/guide/index/btn_square.png) no-repeat 0 0;
  width: 170px;
  height: 160px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 0px 10px 10px 0px;
  font-size: 153.9%;
  line-height: 180%;
}

#squareLink li a {
  color: #273a64;
  text-decoration:none;
}

#squareLink li a div.squareLinkInner {
  color: #273a64;
  text-decoration:none;
}

#squareLink li a:hover div.squareLinkInner {
  background: url(../../images/guide/index/btn_square_on.png) no-repeat 0 0;
  width: 170px;
  height: 160px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 10px 0px 0 10px;
  font-size: 153.9%;
  line-height: 180%;
  text-decoration: none;
  color: #273a64;
}

#squareLinkWrap {
  background: #eceeeb;
  padding: 20px 0 0 20px;
  margin-bottom: 42px;
  border-radius: 5px;
}

#squareLinkWrap02 {
  margin-bottom: 63px;
}

.padBox01 {
  padding: 0 16px 0 17px;
}






/*	レスポンシブ 850px以下
-----------------------------------------------------------	*/
@media only screen and (max-width: 850px){




.how_01_title {
margin:40px 0 36px;
padding: 17px 0 15px 65px;
font-size: 250%;
line-height:150%;
letter-spacing:1px;
border:3px solid #5D99DE;
background-image:url(../../images/guide/howto/title_bk_01_sp.png);
background-repeat:no-repeat;
background-position:center left;
}


.how_01_fig01_inner {
width:100%;
margin:0 auto;
text-align:center;
padding:0 0 0;}

.how_01_fig02_inner {
width:100%;
margin:0 auto;
text-align:center;}

.how_01_fig02_inner img{
margin:0 0px 34px;}

.how_01_btn_wrap{
padding:11px 0 50px;}

.how_01_btn_wrap a{
display:block;
width:508px;
margin:0 auto;
height:90px;
text-align:center;
font-size: 220%;
line-height:90px;
color:#FFFFFF;
letter-spacing:1px;
background-color:#3B79C7;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
text-decoration:none;
}

.how_01_btn_wrap a:hover{
background-color:#76A1D8;
}

.how_01_fig03_inner {
width:564px;
height:630px;
padding:30px 0 0 144px;
margin:0 auto 34px;
text-align:left;
background-image:url(../../images/guide/howto/fig3-01_sp.png);
background-repeat:no-repeat;}


.how_01_fig04_wrap {
background-color:#DDE9F7;
margin-bottom:90px;}

.how_01_fig04_inner {
width:100%;
margin:0 auto;
text-align:center;
padding:30px 0 0;}



.how_01_fig04_item_wrap {
width:628px;
margin:0 auto;
text-align:center;
padding:10px 0 36px;}


.how_01_fig04_item {
float:none;
text-align:left;
width:568px;
margin:30px 0 0;
padding:30px 30px;
background-color:#FFFFFF;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;}

.how_01_fig04_item_title_bs {
text-align:center;
width:160px;
margin:0 0 20px;
padding:0;
background-color:#5D99DE;
letter-spacing:5px;
color:#FFFFFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
font-size: 220%;
line-height:200%;
font-weight:bold;}

.how_01_fig04_item_title_cs {
text-align:center;
width:160px;
margin:0 0 20px;
padding:0;
background-color:#3B79C7;
letter-spacing:5px;
color:#FFFFFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
font-size: 220%;
line-height:200%;
font-weight:bold;}

.how_01_fig04_item_text {
font-size: 220%;
line-height:160%;}


.how_01_fig04_item_text a {
color:#5330E1;
text-decoration:none;}

.how_01_fig04_item_text a:hover {
color:#5330E1;
text-decoration:underline;}







.how_01_05_title {
text-align:center;
background-image:none;
background-color:#3B79C7;
height:210px;}


.how_01_05_t_inner {
width:100%;
margin:0 auto;}

.how_01_05_t_op {
width:100%;
float:none;
color:#FFFFFF;
font-size: 260%;
line-height:1;
letter-spacing:2px;
font-weight:bold;
padding-top:35px;}

.how_01_05_t_img {
width:100%;
float:none;}








.how_01_05_item_inner{
width:100%;
overflow:hidden;}

.how_01_05_item_inner ul{
margin:0 0 30px 0;}

.how_01_05_item_inner li{
float:none;
display:block;
height:420px;
width:100%;
margin:18px 0 2px 0;
padding-top:50px;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;}

.how_01_05_item_inner li img{
width:auto;
height:auto;}

.how_01_05_item_win {
width:650px;
height:350px;
margin:0 auto 0;
border:9px solid #3B79C7;
border-radius:9px;
-moz-border-radius:9px;
-webkit-border-radius:9px;
background-color:#FFFFFF;}

.how_01_05_item_text {
width:560px;
margin:10px auto 0;
text-align:left;
color:#3B79C7;
font-size: 220%;
line-height:150%;}

.how_01_05_item_text p{
margin:10px 0 0;}

.how_01_title_b {
width:708px;
margin:40px auto 36px;
padding: 17px 0 15px 0;
font-size: 250%;
line-height:150%;
text-align:center;
letter-spacing:1px;
color:#5D99DE;
border:3px solid #5D99DE;
}





.how_01_fig06_inner {
width:628px;
padding:9px 0 0;
margin:0 auto;}

.how_01_fig06_inner_in {
width:auto;
margin:0 0 0 -62px;
}





#squareLink li {
  float: left;
  margin: 0 0px 50px 62px;
}

#squareLink li.lastChild {
  float: left;
  margin: 0 0 50px 62px;
}




div.squareLinkInner {
  background: url(../../images/guide/index/btn_square_l_sp.png) no-repeat 0 0;
  width: 273px;
  height: 257px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 0px 10px 10px 0px;
  font-size: 240%;
  line-height: 160%;
}






#squareLink li a {
  color: #273a64;
  text-decoration:none;
}

#squareLink li a div.squareLinkInner {
  color: #273a64;
  text-decoration:none;
}


#squareLink li a:hover div.squareLinkInner {
  background: url(../../images/guide/index/btn_square_l_sp_on.png) no-repeat 0 0;
  width: 273px;
  height: 257px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 10px 0px 0px 10px;
  font-size: 240%;
  line-height: 160%;
  text-decoration: none;
  color: #3f5336;
}











}