@charset "UTF-8";
/* ======================= BASE ====== */
/* ======================= LAYOUT ====== */
main {
  width: 100%;
  display: block;
  margin: 0 auto;
  background: url(../images/PC_bg_SNOW.png) repeat;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

nav {
  padding: 3px 0;
}

.inner {
  width: 880px;
  margin: 0 auto;
  display: block;
}

hr {
  background: url(../images/line.png) center center no-repeat;
  height: 8px;
  border: none;
}

.mv_area {
  width: 100%;
  height: 330px;
  background: url(../images/PC_bg_blue.png) repeat;
}
.mv_area .inner {
  height: 256px;
  background: url(../images/PC_cara_top2.png) right bottom no-repeat;
}
.mv_area .inner div {
  height: 256px;
  background: url(../images/PC_cara_top1.png) left bottom no-repeat;
}
.mv_area h1 img {
  width: 494px;
  display: block;
  padding: 30px 0 0 80px;
}

.foot_area {
  width: 100%;
  height: 360px;
  line-height: 18px;
  margin: -220px 0 0 0;
  padding: 200px 0 0 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: url(../images/PC_bg_blue.png) repeat;
}
.foot_area p {
  padding: 20px 40px;
  margin: 0 0 30px;
  width: 100%;
  display: block;
  background: #4eccea;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.foot_area .anchor_top {
  color: white;
  font-size: 16px;
  float: right;
}

.main {
  margin: 0 auto;
  display: block;
  position: relative;
  z-index: 10;
  top: -80px;
  width: 880px;
  background: url(../images/PC_bg_paper_PC.jpg) repeat;
  border: 6px solid #4fcdeb;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -moz-box-shadow: 0px -5px 10px rgba(100, 100, 100, 0.5), 0px 5px 10px rgba(100, 100, 100, 0.5);
  -webkit-box-shadow: 0px -5px 10px rgba(100, 100, 100, 0.5), 0px 5px 10px rgba(100, 100, 100, 0.5);
  box-shadow: 0px -5px 10px rgba(100, 100, 100, 0.5), 0px 5px 10px rgba(100, 100, 100, 0.5);
}
.main p {
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  color: #5f3b13;
}

.search_area {
  overflow: hidden;
  *zoom: 1;
}
.search_area div {
  float: left;
  text-align: center;
  width: 25%;
}
.search_area div p {
  color: #ff6f6c;
  margin: 0 0 10px;
  font-size: 18px;
}
.search_area div select {
  width: 178px;
  display: inline-block;
  margin: 0 0 10px;
}
.search_area div .btn {
  width: 178px;
  height: 34px;
  display: inline-block;
  text-indent: -99999px;
  border: none;
  outline: none;
  cursor: pointer;
  background: url(../images/PC_button_step1.png) center top no-repeat;
}
.search_area div .btn:hover {
  background-position: center bottom;
}

section {
  width: 100%;
  display: block;
  padding: 30px;
  position: relative;
  font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
section .inner {
  width: 100%;
  height: 100%;
  display: block;
}
section .inner span {
  width: 100%;
  height: 100%;
  display: block;
}
section .title_area {
  width: 100%;
  position: relative;
}
section .title_area h2 {
  font-size: 18px;
  font-weight: bold;
  position: absolute;
  top: 52px;
  left: 110px;
}

#sec1 {
  height: 607px;
  background: url(../images/PC_cara_step1.png) 460px 50px no-repeat;
}
#sec1 .area p {
  margin: 60px;
}
#sec1 .p1 {
  text-align: center;
  position: absolute;
  top: 86px;
  left: 564px;
}
#sec1 .p2 {
  text-align: center;
  position: absolute;
  top: 200px;
  left: 697px;
}

#sec2 {
  height: 530px;
  background: url(../images/PC_cara_step2-1.png) 70px 150px no-repeat;
}
#sec2 .inner {
  background: url(../images/PC_cara_step2-2.png) 460px 30px no-repeat;
}
#sec2 .inner span {
  background: url(../images/PC_or.png) 350px 225px no-repeat;
}
#sec2 .area p {
  margin: 60px;
}
#sec2 .p3 {
  text-align: center;
  position: absolute;
  top: 406px;
  left: 239px;
}
#sec2 .p4 {
  text-align: center;
  position: absolute;
  top: 97px;
  left: 669px;
}
#sec2 .orange_box {
  text-align: center;
  position: absolute;
  top: 372px;
  left: 465px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
#sec2 .orange_box span {
  border: solid 5px #ff6f6c;
  background: none;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
#sec2 .orange_box .title {
  background: #ff6f6c;
  color: white;
  font-size: 17px;
  padding: 6px 0;
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px;
  border-radius: 4px 4px 0 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#sec2 .orange_box .content {
  color: #ff6f6c;
  font-size: 28px;
  padding: 20px 0;
}
#sec2 .orange_box .day {
  color: #ff6f6c;
  font-size: 12px;
}

#sec3 {
  /*height: 740px;*/
  height: 510px;
  /*background: url(../images/PC_cara_step3.png) 40px 480px no-repeat;*/
   background: url(../images/PC_cara_step3.png) 40px 250px no-repeat;
}
#sec3 .inner {
  width: 754px;
 
}
#sec3 .pay_area div {
  width: 23%;
  display: inline-block;
  vertical-align: middle;
}
#sec3 .pay_area p {
  text-align: center;
  margin: 30px 0 10px;
  font-size: 18px;
  color: #ff6f6c;
}
#sec3 .p5 {
  text-align: center;
  position: absolute;
  /*top: 570px;*/
  top: 340px;
  left: 349px;
}
#sec3 .btn1 {
  width: 210px;
  height: 55px;
  display: block;
  position: absolute;
  /*top: 560px;*/
  top: 330px;
  left: 600px;
  text-indent: -99999px;
  background: url(../images/PC_button_step3.png) left top no-repeat;
}
#sec3 .btn1:hover {
  background-position: left bottom;
}
#sec3 .btn2 {
  width: 210px;
  height: 55px;
  display: block;
  position: absolute;
  /*top: 635px;*/
  top: 405px;
  left: 600px;
  text-indent: -99999px;
  background: url(../images/PC_button_step3.png) right top no-repeat;
}
#sec3 .btn2:hover {
  background-position: right bottom;
}

#sec4 {
  height: 600px;
  background: url(../images/PC_cara_step4-1.png) 190px 150px no-repeat;
}
#sec4 .inner {
  background: url(../images/PC_cara_step4and5-2.png) 610px 135px no-repeat;
}
#sec4 .p6 {
  text-align: center;
  position: absolute;
  top: 176px;
  left: 227px;
}
#sec4 .p7 {
  text-align: center;
  position: absolute;
  top: 185px;
  left: 664px;
}
#sec4 .btn1 {
  width: 190px;
  height: 55px;
  display: block;
  position: absolute;
  top: 490px;
  left: 625px;
  text-indent: -99999px;
  background: url(../images/PC_button_step4and5.png) center top no-repeat;
}
#sec4 .btn1:hover {
  background-position: center bottom;
}
#sec4 .orange_box {
  position: absolute;
  top: 320px;
  left: 55px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
#sec4 .orange_box span {
  border: solid 5px #ff6f6c;
  background: none;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#sec4 .orange_box .thanks {
  color: #ff6f6c;
  text-align: center;
  font-size: 22px;
  margin: 0 0 15px;
}
#sec4 .orange_box .title {
  text-align: center;
  background: #ff6f6c;
  color: white;
  font-size: 17px;
  padding: 6px 0;
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px;
  border-radius: 4px 4px 0 0;
}
#sec4 .orange_box .content {
  color: #ff6f6c;
  line-height: 30px;
  font-size: 16px;
  padding: 20px 10px;
}

#sec5 {
  height: 610px;
  background: url(../images/PC_cara_step5-1.png) 70px 160px no-repeat;
}
#sec5 .inner {
  background: url(../images/PC_cara_step4and5-2.png) 610px 150px no-repeat;
}
#sec5 .p8 {
  text-align: center;
  position: absolute;
  top: 184px;
  left: 255px;
}
#sec5 .p9 {
  text-align: center;
  position: absolute;
  top: 210px;
  left: 673px;
}
#sec5 .btn0 {
  width: 113px;
  height: 110px;
  display: block;
  position: absolute;
  top: 100px;
  left: 450px;
  text-indent: -99999px;
  background: url(../images/PC_button_step5-1.png) left top no-repeat;
}
#sec5 .btn0:hover {
  background-position: left bottom;
}
#sec5 .btn1 {
  width: 230px;
  height: 55px;
  display: block;
  position: absolute;
  top: 510px;
  left: 75px;
  text-indent: -99999px;
  background: url(../images/PC_button_step5-2.png) left top no-repeat;
}
#sec5 .btn1:hover {
  background-position: left bottom;
}
#sec5 .btn2 {
  width: 230px;
  height: 55px;
  display: block;
  position: absolute;
  top: 510px;
  left: 340px;
  text-indent: -99999px;
  background: url(../images/PC_button_step5-2.png) right top no-repeat;
}
#sec5 .btn2:hover {
  background-position: right bottom;
}
#sec5 .btn3 {
  width: 190px;
  height: 55px;
  display: block;
  position: absolute;
  top: 510px;
  left: 625px;
  text-indent: -99999px;
  background: url(../images/PC_button_step4and5.png) center top no-repeat;
}
#sec5 .btn3:hover {
  background-position: center bottom;
}

#sec6 {
  height: 540px;
  background: url(../images/PC_cara_step6-1.png) 30px 150px no-repeat;
}
#sec6 .inner {
  background: url(../images/PC_cara_step6-2.png) 470px 145px no-repeat;
}
#sec6 .inner span {
  background: url(../images/PC_or.png) 395px 315px no-repeat;
}
#sec6 .p10 {
  text-align: center;
  position: absolute;
  top: 196px;
  left: 55px;
}
#sec6 .p11 {
  text-align: center;
  position: absolute;
  top: 177px;
  left: 353px;
}
#sec6 .p12 {
  text-align: center;
  position: absolute;
  top: 195px;
  left: 577px;
}

#sec7 {
  height: 570px;
  background: url(../images/PC_cara_step7.png) 40px 70px no-repeat;
}
#sec7 .p13 {
  text-align: center;
  position: absolute;
  top: 188px;
  left: 67px;
}
#sec7 .p14 {
  text-align: center;
  position: absolute;
  top: 197px;
  left: 703px;
}

#sec8 {
  padding: 30px 30px 0 30px !important;
  height: 660px;
  background: url(../images/PC_cara_step8.png) 50px 60px no-repeat;
}
#sec8 .inner {
  background: url(../images/PC_cara_step_bottom.png) 30px bottom no-repeat;
}
#sec8 .btn {
  position: absolute;
  top: 500px;
  left: 210px;
  width: 500px;
  height: 80px;
  display: block;
  text-indent: -99999px;
  background: url(../images/PC_button_bottom.png) center top;
}
#sec8 .btn:hover {
  background-position: center bottom;
}

/* ======================= MODULE ====== */
/* ======================= STATE ====== */
/* ======================= THEME ====== */