@charset "shift_jis";

html {
  font-size: 62.5%;
}
body {
  font-size: 1rem; /*基本のフォントサイズを【1rem = 10px】に指定*/
  font-family:"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#contents img {
  vertical-align: bottom;
}

/*------------------------------
  ヘッダー
------------------------------*/
.mv{
  display: block;
  margin: 0 auto;
  width: 980px;
  text-align: center;
  vertical-align: bottom;
}
.ul01,.ul02,.ul03 {
  display: flex;
  flex-direction: row;
}
.ul02 {
  margin-right: 15px;
}
map {
  cursor: pointer;
}
area {
  outline: none;
}
.code01,.code02 {
  width: 71px
}
.mv_box {
  background: url(../images/mv_bg.png);
  background-size: cover;
  position: relative;
  height: 839px;
  padding-top: 40px;n
}
.codes {
  position: relative;
  width: 980px;
  margin: 0 auto;
}
.code01 {
  bottom: 16px;
  left: 608px;
  position: absolute;
}
.code02 {
  left: 901px;
  bottom: 16px;
  position: absolute;
}

.mv_cpn_box_thanks {
  background: url(../images/thanks_bg.png);
  background-size: cover;
  position: relative;
  height: 77px;
  padding-top: 15px;n
}
.mv_top{
  display: block;
  margin: 0 auto;
  width: 850px;
  text-align: center;
  vertical-align: bottom;
}

/*------------------------------
  コンテンツ
------------------------------*/
.area01 {
  background: url(../images/bk01.png) no-repeat center center;
}
.area02 {
  background: url(../images/bk02.png) no-repeat center center;
}
.area03 {
  background: url(../images/bk03.png) no-repeat center center;
}
.area04 {
  background: url(../images/bk04.png) no-repeat center center;
}
.area01,.area02,.area03,.area04 {
  background-size: cover;
  padding: 50px 0;
  width: 100%;
  height: 525px;
}
.area_inn {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin:0 auto;
  width: 980px;
}
.list01 {
  margin: 55px 0 0 55px;
}
.list02 {
  margin: 55px 0 0 46px;
}
.list03 {
  margin: 55px 0 0 51px;
}
.list04 {
  margin: 55px 0 0 43px;
}
.list li {
  font-size: 1.7rem;
  font-weight: bold;
  letter-spacing: .05rem;
  line-height: 2.4rem;
  margin-bottom: 30px;
  padding-left: 21px;
}
.or li {
  background: url(../images/dot_or.png) no-repeat left 4px;
  color: #4a3f38;
}
.gr li {
  background: url(../images/dot_gr.png) no-repeat left 4px;
  color: #fff;
}
.up {
  margin: -76px 0px 0 220px;
}
.down {
  margin-bottom: -260px;
}
.area01 .right {
  position: relative;
  left: 10%;
}
img.huki01 {
  position: absolute;
  right: 94%;
  top: -4%;
}
img.huki02 {
  position: absolute;
  left: 43%;
  top: 17%;
}
img.huki03 {
  position: absolute;
  right: 93%;
  top: 48%;
}
.area03 .right {
  position: relative;
  left: 11%;
}
img.huki04 {
  position: absolute;
  bottom: 58%;
  right: 90%;
}
img.huki05 {
  position: absolute;
  bottom: 14%;
  left: 42%;
}
.area04 .left {
  margin: 65px 30px 0 0;
}
.download,.inn,.out {
  display: flex;
  flex-direction: row;
}
.download {
  align-items: center;
  justify-content: center;
  margin: 100px auto 0;
}
.download .left {
  margin-right: 55px;
  width: 130px;
}
.download h2 {
  color: #4a3f38;
  font-size: 3.5rem;
  font-weight: bold;
  margin-bottom: 28px;
}
.mr40 {
  margin-right: 40px;
}
.caution {
  border: 1px dashed #696969;
  font-size: 1.4rem;
  line-height: 2.3rem;
  margin: 50px auto 50px;
  max-width: 630px;
  padding: 37px;
}
#footer {
  padding-top: 0 !important;
  position: relative !important;
}
.huki01,.huki02,.huki04,.huki05,.sp01,.sp02,.sp03 {
  width: 50%;
}
.sp04 {
  max-width: 100%;
}
.download img {
  width: 100%;
}
#container {
  overflow: hidden;
  width: 100vw;
}
.apple {
  width: 193px;
}
.code {
  width: 74px;
}
.google {
  width: 219px;
}
.huki03 {
  width: 46%;
}

/* IE10以降 */
@media all and (-ms-high-contrast:none){
  .sp04 {
    max-width: 60%;
  }
  .down {
  margin-bottom: -166px;
  }
}
 
/* IE11だけに適用 */
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop,.sp04 {
    max-width: 47%;
  }
  .down {
  margin-bottom: -260px;
  }
}