@charset "utf-8";

/* === import css === */

@import "common.css";
@import "reset.css";





/* Basic Styles
-------------------------------------------------------------*/

body {
  background-color: #fff;
  text-align: center;
  font-family:  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  font-size: 13px;
  line-height: 1.1;
  color: #666;
}



/*-- html body --*/

html { overflow: auto; }

html,
body { height: 100%; }



/*-- ancher --*/

a { color: #03c; }
  a:hover {
    color: #c30;
    text-decoration: none;
  }



/*-- h2 --*/

.flow-image h2,
.guide-text h2 {
  background: url(../images/h2_image.png) no-repeat center top;
  text-indent: -9999px;
  width: 100%;
  height: 40px;
  display: block;
  margin: 0 auto 20px;
}

.flow-image h2 { background-position: center 0; }

.guide-text h2 { background-position: center -60px; }





/* Layout Styles
-------------------------------------------------------------*/

.text-content {
  width: 760px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
  overflow: hidden;
}




/* Big Image Styles
-------------------------------------------------------------*/

@media screen and (min-width: 1000px) {
.title-back {
  background: url(../images/bg_topTitle.png) no-repeat center top fixed;
  width: 100%;
  height: 520px;
  text-indent: -9999px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}

.bottom-back {
  background: url(../images/bg_topBottom.png) no-repeat center bottom;
  width: 100%;
  height: 450px;
  text-indent: -9999px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: -100;
}

.sec {
  padding: 20px 0 60px;
  margin: 440px 0 320px;
  background: #fff;
}
}

@media screen and (max-width: 999px) {
.title-back {
  background: url(../images/bg_topTitle.png) no-repeat center -80px;
  width: 100%;
  height: 440px;
  text-indent: -9999px;
}

.bottom-back {
  background: url(../images/bg_topBottom.png) no-repeat center top;
  width: 100%;
  height: 320px;
  text-indent: -9999px;
}

.sec {
  padding: 20px 0 60px;
  margin: 0;
  background: #fff;
}
}





/* Entry Box Styles
-------------------------------------------------------------*/

.box-shadow {
  background: url(../images/bg_shadow.png) no-repeat center bottom;
  padding-bottom: 10px;
  margin-bottom: 30px;
  width: 460px;
  float: left;
}
  .box-shadow:first-child { margin-right: 30px; }


.entry-box {
  border: 1px solid #ddd;
  padding: 8px 0 0;
  position: relative;
  overflow: hidden;

  -webkit-transition: -webkit-all 0.2s linear;
        -moz-transition: -moz-all 0.2s linear;
          -ms-transition: -ms-all 0.2s linear;
            -o-transition: -o-all 0.2s linear;
                  transition: all 0.2s linear;
}
  .entry-box:hover { border-color: #aaa; }


.bronze-class { background: url(../images/bar_bronze.png) no-repeat center top; }
.silver-class { background: url(../images/bar_silver.png) no-repeat center top; }

.entry-box h2 {
  background: url(../images/className.png) no-repeat;
  height: 30px;
  margin-bottom: 20px;
  text-indent: -9999px;
}
  .entry-box.bronze-class h2 { background-position: 0px   0px; border-bottom: 1px solid #c8815f; }
  .entry-box.silver-class h2 { background-position: 0px -30px; border-bottom: 1px solid #9b9c9c; }

.entry-sheet {
  background: #f8f4ea;
  padding: 10px 15px 15px;
  margin: 5px;
  position: relative;
}


.entry-box dt {
  background: #fff;
  border: 1px solid #80671f;
  padding: 2px 0;
  width: 64px;
  text-align: center;
  float: left;
  clear: both;
  color: #80671f;
}

.entry-box dt.square {
  font-size: 18px;
  padding: 8px;
  width: 48px;
  line-height: 1.3
}

.entry-box dd {
  float: right;
  width: 340px;
  line-height: 1.8;
  color: #333;
  overflow: hidden;
}

.entry-box dt,
.entry-box dd { margin-bottom: 10px; }

.entry-box dt:last-child,
.entry-box dd:last-child { margin-bottom: 20px; }

.entry-box em {
  font-size: 18px;
  font-weight: bold;
}

.entry-box span { font-size: 11px; }

.entry-box .summary-text {
  background: #fff;
  padding: 10px 30px;
  margin-bottom: 20px;
  height: 50px;
  line-height: 1.3;
  clear: both;
  position: relative;

  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}

.entry-box .summary-text:before,
.entry-box .summary-text:after {
  background: url(../images/icon_decoration.png) no-repeat;
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 5px;
}
  .entry-box .summary-text:before { background-position:   0px; left:  5px; }
  .entry-box .summary-text:after  { background-position: -20px; right: 5px; }



/*-- entry-button --*/

.entry-box .entry-button {
  background: #bbb;
  text-align: center;
  color: #fff;
  padding: 10px;
  font-size: 14px;
}

.entry-box .entry-button,
.entry-box .entry-button a {
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}

.entry-box .entry-button strong {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

.entry-box .entry-button a {
  background: url(../images/btn_entry.png) repeat-x center #0359f6;
  color: #fff;
  text-decoration: none;
  display: block;
  margin: -10px;
  padding: 9px 10px;
  border: 1px solid #0057f6;
}
  .entry-box .entry-button a:hover {
    background-image: none;
	background-color: #f60;
    border-color: #f60;
  }

.entry-box .entry-button a strong { text-shadow: 0px 1px 2px #333; }
  .entry-box .entry-button a:hover strong { text-shadow: none; }





/* Flow Image Styles
-------------------------------------------------------------*/

.flow-image {
  clear: both;
  margin-bottom: 30px;
}

.flow-image + * { clear: both; }

.flow-image ul {
  margin: 30px 0;
  overflow: hidden;
}

.flow-image li { float: left; }

.flow-image li.flow-step {
  background: url(../images/flow_arow.gif) no-repeat right center;
  padding-right: 30px;
}

.flow-image li dl {
  background: #f8f4ea;
  border: 5px solid #d3bc7a;
  width: 166px;
  color: #80671f;

  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
	box-sizing: border-box;
}

.flow-image li dt {
  text-align: center;
  border-bottom: 1px solid #d3bc7a;
  padding: 15px 0;
  margin-bottom: 10px;
  font-size: 18px;
  position: relative;
}
  .flow-image li dt:before,
  .flow-image li dt:after {
    background: url(../images/icon_decoration.png) no-repeat;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
  }
    .flow-image li dt:before { background-position:   0px; left:  5px; }
    .flow-image li dt:after  { background-position: -20px; right: 5px; }


.flow-image li dd {
  padding: 0 15px;
  height: 60px;
  line-height: 1.3;
}





/* Guide Text Styles
-------------------------------------------------------------*/

.guide-text { margin-bottom: 60px; }

.guide-text p { margin-bottom: 20px; }

.guide-text .more-nav { float: right; }





/* Information Styles
-------------------------------------------------------------*/

.information {
  background: #f8f4ea;
  border: 1px solid #d3bc7a;
  width: 758px;
  margin: 0 auto;

  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}

.information h2 {
  background: url(../images/h2_image.png) no-repeat center -120px;
  width: 100%;
  padding-top: 30px;
  margin: 10px 0;
  text-align: center;
  font-size: 14px;
  color: #80671f;
  position: relative;
}

.information h2:before,
.information h2:after {
  background: url(../images/icon_decoration.png) no-repeat;
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
}
  .information h2:before { background-position:   0px; left:  10px; }
  .information h2:after  { background-position: -20px; right: 10px; }

.information ul {
  background: #fff;
  border: 1px solid #d3bc7a;
  padding: 0 10px;
  margin: 5px;

  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}

.information li {
  padding: 16px 0;
  border-bottom: 1px dashed #ccc;
  clear: both;
  overflow: hidden;
}
  .information li:last-child { border-bottom: none; }

.information li dt {
  float: left;
  width: 18%;
  line-height: 1.3;
}

.information li dd {
  float: right;
  width: 82%;
  line-height: 1.3;
  font-size: 14px;
}