@charset "UTF-8";
/* CSS Document */

@media screen and (min-width: 768px) {
  header{
    height: 797px;
    text-align: center;
    padding-top: 80px;
    background: url("../img/mv_bk.jpg") no-repeat bottom center;
    background-size: cover;
    position: relative;
  }
  
  header .logo{
    position: absolute;
    top: 47px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  header h1{
    min-width: 1194px;
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  header a{
    position: absolute;
    bottom: 47px;
    left: 50%;
    margin-left: 297px;
  }
  
  header a:hover{
    opacity: 1;
    transform: translate(3px,3px)
  }
  
  header p.note{
    font-size: 10px;
    line-height: 1;
    color: #FFF;
    margin-top: 0;
    position: absolute;
    top: 15px;
    left: 50%;
    margin-left: 380px;
  }
  
  .c01{
    width: 100%;
    padding: 177px 0 140px;
    background: #fbeddb;
    overflow: hidden;
  }
  
  .pr{
    position: relative;
  }
    
  .pr::before{
    content: "";
    width: 208px;
    height: 346px;
    background: url("../img/luna01.png") no-repeat;
    position: absolute;
    top: 157px;
    left: 50%;
    transform: translateX(-690px);
  }
  
  .pr > div {
    height: 1240px;
    padding: 1px;
    background: url("../img/pr_wbox.png") top left no-repeat;
    background-size: 100% 100%;
    position: relative;
    z-index: 1;
  }
  
  .pr > div::after {
    content: "";
    width: 2235px;
    height: 1240px;
    background: url("../img/pr_kei01.png") top left no-repeat;
    position: absolute;
    top: 157px;
    right: -305px;
  }
  
  .pr h2{
    margin-top: -53px;
    margin-bottom: 54px;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  
  .pr h2::after{
    content: "";
    width: 280px;
    height: 275px;
    background: url("../img/pr_bakd.png") no-repeat;
    position: absolute;
    top: -33px;
    right: -26px;
  }
  
  .pr > div > div{
    width: 850px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  
  .pr h3{
    text-align: center;
    margin-bottom: 65px;
  }
  
  .pr p{
    font-size: 12px;
    line-height: 1.5;
    color: #913c16;
    font-feature-settings: "palt";
    margin: 0 auto 50px;
  }
  
  .pr p a{
    color: #913c16;
  }
  
  .pr a.popup{
    width: 100%;
    height: 85px;
    text-align: center;
    padding-top: 23px;
    background: #f57878;
    border-radius: 50px;
    display: block;
    margin: 20px auto 0;
    box-shadow: 10px 10px 0px 0px rgba(222, 207, 207, 1);
  }
  
  .ts{
    margin-top: 188px;
    text-align: center;
    position: relative;
  }
  
  .ts::before{
    content: "";
    width: 1808px;
    height: 765px;
    background: url("../img/pr_kei02.png") no-repeat left top;
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-833px);
  }
  
  .ts > div{
    width: 100%;
    min-height: 658px;
    padding: 1px;
    background: url("../img/ts_wbox.png") left top no-repeat;
    position: relative;
    z-index: 1;
  }
  
  .ts > div::before{
    content: "";
    width: 214px;
    height: 325px;
    background: url("../img/luna02.png") no-repeat;
    position: absolute;
    top: -240px;
    right: 30px;
  }
    
  .ts h2{
    text-align: center;
    margin: -58px 0 55px;
  }
  
  .ts h3{
    font-size: 30px;
    line-height: 1.2;
    color: #913c16;
    font-feature-settings: "palt";
    font-weight: bold;
    text-align: center;
    margin-bottom: 35px;
  }
  
  .ts h3 span{
    color: #f57878;
  }  
  
  .ts h3 em{
    font-style: normal;
    font-size: 130%;
  }
  
  .ts h3 sup{
    font-size: 12px;
  }
  
  .ts ul{
    text-align: left;
    position: absolute;
    bottom: 75px;
    left: 85px;
  }
  
  .ts ul li{
    font-size: 12px;
    line-height: 1.6;
    color: #913c16;
    display: inline-block;
    font-feature-settings: "palt";
    margin-right: 1em;
  }
  
  .ts ul li:last-of-type{
    display: block;
  }
  
  .c02{
    width: 100%;
    padding: 195px 0 150px;
    background-size: auto auto;
    background-color: rgba(162, 240, 255, 1);
    background-image: repeating-linear-gradient(90deg, transparent, transparent 35px, rgba(181, 243, 255, 1) 35px, rgba(181, 243, 255, 1) 55px );
    overflow: hidden;
  }
  
  .ob{
    width: 100%;
    min-height: 2700px;
    padding: 1px;
    background: url("../img/ob_wbok.png") no-repeat center top;
  }
        
  .ob > div{
    position: relative;
    z-index: 1;
  }
  
  .ob > div::before{
    content: "";
    width: 364px;
    height: 374px;
    background: url("../img/luna03.png") left top no-repeat;
    position: absolute;
    top: 800px;
    left: 50%;
    transform: translateX(-665px);
    z-index: -1;
  }
  
  .ob > div::after{
    content: "";
    width: 2407px;
    height: 1417px;
    background: url("../img/ob_kei.png") left top no-repeat;
    position: absolute;
    top: 163px;
    right: -826px;
    z-index: -1;
  }
  
  .ob h2{
    text-align: center;
    margin: -58px 0 65px;
  }
  
  .ob ol{
    width: 850px;
    text-align: center;
    margin: 80px auto 0;
  }
  
  .ob ol li{
    margin-top: 50px;
  }
  
  .ob ol h3{
    margin-bottom: 25px;
  }
  
  .ob ol p{
    font-size: 25px;
    line-height: 1.5;
    font-weight: 600;
    color: #913c16;
    font-feature-settings: "palt";
    margin-bottom: 15px;
  }
  
  .ob ol p.note{
    font-size: 12px;
    line-height: 1.5;
    font-weight: normal;
    margin-top: -10px;
  }

  .re{
    color: #913c16;
    margin-top: 175px;
    min-height: 946px;
    padding: 1px;
    background: url("../img/re_wbox.png") no-repeat;
    position: relative;
  }
  
  .re::before{
    content: "";
    width: 2354px;
    height: 1770px;
    background: url("../img/re_kei.png") no-repeat;
    position: absolute;
    top: -580px;
    right: -500px;
  }
  
  .re::after{
    content: "";
    width: 250px;
    height: 233px;;
    background: url("../img/luna04.png") no-repeat;
    position: absolute;
    bottom: -15px;
    right: 25px;
  }
  .re h2{
    text-align: center;
    margin-top: -50px;
    margin-bottom: 60px;
  }
  
  .re > div{
    width: 850px;
    margin: 0 auto;
  }
  
  .re h3{
    font-size: 26px;
    line-height: 1.5;
    text-align: center;
    font-weight: 600;
    font-feature-settings: "palt";
    margin-bottom: 20px;
  }
  
  .re h3 strong{
    color: #f57878;
  }
  
  .re ul.note{
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 50px;
  }
  
  .re ul.note.tp{
    text-align: center;
  }
  
  .re > div > div{
    display: flex;
    justify-content: space-between;
  }
  
  .re .bbox{
    width: 340px;
    color: #f57878;
    padding: 20px;
    border-radius: 15px;
    border: 3px dotted #f57878;
  }
  
  .re .bbox h4{
    font-size: 20px;
    line-height: 1.6;
    font-weight: 600;
    white-space: nowrap;
    margin-bottom: 25px;
  }
  
  .re .bbox ul{
    padding-left: 5px;
  }
  
  .re .bbox ul li{
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
    text-indent: -1em;
    padding-left: 1em;
  }
  
  .re .bbox ul li + li{
    margin-top: 5px;
  }
  
  .re p.pc{
    font-size: 12px;
    margin: 10px 0 20px;
  }
  
  .ht{
    width: 100%;
    height: 795px;
    text-align: center;
    background: url("../img/hit_dot.png") center center;
  }
  
  .ht > div{
    width: 100%;
    height: 100%;
    padding-top: 75px;
    background: url("../img/hit_kei.png") center bottom no-repeat;
    position: relative;
  }
  
  .ht h2{
    margin-bottom: 50px;
  }
  
  .ht p.txt{
    font-size: 30px;
    line-height: 1.5;
    font-weight: 600;
    color: #FFF;
    font-feature-settings: "palt";
  }
  
  
  .ht p.date{
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .ht p.date::before{
    content: "";
    width: 367px;
    height: 234px;
    background: url("../img/ht_luna.png") no-repeat;
    position: absolute;
    top: -234px;
    left: 50%;
    transform: translateX(-50%);
  }
  
}

.rules{
  color: #913c16;
  font-feature-settings: "palt";
  background: #c7f1ff;
  overflow: hidden;
  padding: 150px 15px 145px;
}

.rules a{
  color: #913c16;
}

.rules section{
  padding: 35px 60px 60px;
  border-radius: 20px;
  background: #FFF;
  position: relative;
}

@media screen and (min-width: 768px) {
  .rules section.luna::after{
    content: "";
    width: 205px;
    height: 342px;
    background: url("../img/luna05.png") no-repeat;
    position: absolute;
    top: 125px;
    right: -205px;
  }
}

.rules section + section{
  margin-top: 80px;
}

.rules h2{
  font-size: 45px;
  line-height: 1;
  color: #f57878;
  font-weight: 600;
  text-align: center;
  margin-bottom: 25px;
}

.rules h3{
  font-size: 18px;
  line-height: 1.6;
  font-weight: 600;
  color: #f57878;
}

.rules h4{
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
}

.rules p,
.rules li{
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
}

.rules span{
  color: #ff0000;
  background: linear-gradient(transparent 50%, #ffff00 50%);
}
.rules .note{
  margin-top: 5px;
}

.rules .note li{
  font-size: 12px;
  font-weight: 400;
}

.rules p.note{
  font-size: 12px;
  font-weight: 400;
}

.rules section > ul > li,
.rules section > ol > li{
  text-indent: -1em;
  padding-left: 1em;
}

.rules ol > li + li{
  margin-top: 5px
}

.rules p + h3,
.rules ul + h3,
.rules ol + h3,
.rules ul+ ul{
  margin-top: 35px;
}

.rules p + h4,
.rules ul + h4{
  margin-top: 15px;
}

.rules .mt{
  margin-top: 10px !important;
}

.attention ul ul{
  padding-left: 1em;
}

.terms ol{
  margin-top: 30px;
}

.terms ol > li + li{
  margin-top: 30px;
}

.terms li{
  text-indent: 0 !important;
  padding-left: 0 !important;
}

.contact{
  padding: 80px 15px 30px; 
  background: #002dad;
}

.contact h2{
  text-align: center;
  margin-bottom: 25px;
}

.contact h3{
  font-size: 25px;
  line-height: 1.4;
  color: #FFF;
  font-weight: 600;
  font-feature-settings: "palt";
  margin-bottom: 40px;
}

.contact h3 span{
  display: block;
}


.contact .wbox{
  width: 590px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-feature-settings: "palt";
  background: #FFF;
  color: #000;
  padding: 20px 15px 20px 20px;
  margin-bottom: 10px;
  box-sizing: border-box;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  position: relative;
}


.contact .wbox::after{
  content: "";
  width: 256px;
  height: 393px;
  background: url("../img/luna06.png") no-repeat;
  position: absolute;
  top: -135px;
  right: -330px;
}


.contact .wbox p{
  font-size: 12px;
  line-height: 1.2;
  vertical-align: middle;
  font-feature-settings: "palt";
}

.contact .wbox p.lg{
  font-size: 16px;
  line-height: 1.2;
  margin-top: 5px;
}

.contact .wbox p a.tel{
  font-size: 24px;
}

.contact .wbox p a{
  font-size: 22px;
  line-height: 1.2;
  color: #000;
  letter-spacing: .08em;
  font-weight: 700;
  vertical-align: middle;
}

.contact .wbox h4{
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  margin-top: 10px;
}

.contact .wbox h4 span{
  padding-right: .3em;
  background: #FFF;
  display: inline-block;
}

.contact .wbox > p span{
  vertical-align: middle;
  transform: translateY(.3em);
  display: inline-block;
}

.contact .wbox > p span::after{
  content: "：";
}

.contact .wbox h4{
  background: url("../img/dot.png") repeat-x left center;
}


.contact p.note{
  font-size: 12px;
  line-height: 1.3;
  color: #FFF;
  text-indent: -1em;
  padding-left: 1em;
}

.contact p.alc{
  margin-top: 25px;
}

.contact p.alc a{
  font-size: 18px;
  line-height: 1;
  color: #FFF;
  display: inline-block;
  text-decoration: underline;
}



@media screen and (max-width: 767px) {
  
  main{
    overflow: hidden;
  }
  
  header{
    position: relative;
  }
  
  header .logo{
    width: 23vw;
    position: absolute;
    top: 5vw;
    left: 50%;
    transform: translateX(-50%);
  }
  
  header a{
    width: 35vw;
    position: absolute;
    top: 14vw;
    right: 8vw;
  }
  header p.note{
    font-size: 3vw;
    color: #FFF;
    position: absolute;
    top: 2vw;
    right: 2vw;
  }
  
  .pr{
    position: relative;
  }
    
  .pr p{
    width: 65%;
    font-size: 2.7vw;
    line-height: 1.5;
    color: #913c16;
    font-feature-settings: "palt";
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .pr a.popup{
    width: 65%;
    height: 11vw;
    text-align: center;
    padding: 3vw 4vw 0;
    background: #f57878;
    border-radius: 10vw;
    display: block;
    box-shadow: 1vw 1vw 0px 0px rgba(233, 233, 233, 1);
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
  }
    
  .ts,    
  .ts h3{
    position: relative;
  }
  
  .ts h3{
    width: 100%;
    font-size: 5vw;
    line-height: 1.4;
    color: #913c16;
    font-feature-settings: "palt";
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 40vw;
    left: 0;
  }
  
  .ts h3 span{
    color: #f57878;
  }  
  
  .ts h3 em{
    font-style: normal;
    font-size: 130%;
  }
  
  .ts h3 sup{
    font-size: 12px;
  }
  
  .ts ul{
    color: #913c16;
    position: absolute;
    bottom: 33vw;
    left: 17vw;
  }
  
  .ts ul li{
    font-size: 2.7vw;
    line-height: 1.6;
    font-feature-settings: "palt";
    text-indent: -1em;
    padding-left: 1em;
  }
            
  .ob ol li{
    position: relative;
  }
    
  .ob ol p{
    display: none;
  }
  
  .ob ol p.btn{
    display: block;
  }
  
  .ob ol p a{
    width: 72%;
    position: absolute;
    bottom: 4vw;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .re {
    position: relative;
  }
  
  .re h3{
    width: 100%;
    font-size: 3.8vw;
    line-height: 1.5;
    color: #913c16;
    text-align: center;
    font-weight: 600;
    font-feature-settings: "palt";
    position: absolute;
    top: 30vw;
    left: 0;
  }
  
  .re h3 strong{
    color: #f57878;
  }
  
  .re ul.note{
    font-size: 2.5vw;
    color: #913c16;
    line-height: 1.5;
  }
  
  .re ul.note.tp{
    position: absolute;
    top: 63vw;
    left: 15vw;
  }
  
  .re ul.note li{
    text-indent: -1em;
    padding-left: 1em;
  }
  
  .re ul.note.bt{
    position: absolute;
    bottom: 38vw;
    left: 15vw;
  }
    
  .re .bbox{
    width: 69%;
    color: #f57878;
    padding: 5vw;
    margin: 6vw 0 4vw;
    border-radius: 5vw;
    border: 3px dotted #f57878;
    position: absolute;
    top: 190vw;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .re .bbox h4{
    font-size: 3.8vw;
    line-height: 1.6;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    margin-bottom: 4vw;
  }
    
  .re .bbox ul li{
    font-size: 3.6vw;
    line-height: 1.5;
    font-weight: 500;
    text-indent: -1.3em;
    padding-left: 1.3em;
  }
  
  .ht{
    width: 100%;
    position: relative;
  }
      
  .ht p.txt{
    width: 100%;
    font-size: 3.6vw;
    line-height: 1.5;
    text-align: center;
    font-weight: 600;
    color: #FFF;
    font-feature-settings: "palt";
    margin-bottom: 25vw;
    display: inline-block;
    position: absolute;
    top: 28vw;
    left: 0;
  }
  
  .rules{
    padding: 20vw 8vw;
  }

  .rules section{
    padding: 8vw 7vw 10vw;
  }

  .rules section + section{
    margin-top: 15vw;
  }

  .rules h2{
    font-size: 9vw;
    margin-bottom: 6vw;
  }

  .rules h3{
    font-size: 3.5vw;
  }

  .rules h4{
    font-size: 3.5vw;
    line-height: 1.5;
  }

  .rules p,
  .rules li{
    font-size: 3.5vw;
    line-height: 1.5;
    font-weight: 500;
  }

  .rules .note{
    margin-top: 1vw;
  }

  .rules .note li{
    font-size: 2.7vw;
  }

  .rules p.note{
    font-size: 2.7vw;
  }

  .rules ol > li + li{
    margin-top: 1vw
  }

  .rules p + h3,
  .rules ul + h3,
  .rules ol + h3,
  .rules ul+ ul{
    margin-top: 5vw;
  }

  .rules p + h4,
  .rules ul + h4{
    margin-top: 2vw;
  }

  .rules .mt{
    margin-top: 1vw !important;
  }


  .terms ol{
    margin-top: 5vw;
  }

  .terms ol > li + li{
    margin-top: 5vw;
  }

  .contact{
    padding: 15vw 6vw 10vw; 
  }

  .contact h2{
    margin-bottom: 5vw;
  }

  .contact h3{
    font-size: 4.2vw;
    line-height: 1.4;
    color: #FFF;
    font-weight: 600;
    text-align: center;
    font-feature-settings: "palt";
    margin-bottom: 12vw;
  }

  .contact h3 span{
    font-size: 4vw;
    display: block;
  }

  .contact .wbox{
    width: 100%;
    padding: 6vw 8vw 6vw;
    margin-bottom: 1vw;
    border-top-left-radius: 8vw;
    border-bottom-right-radius: 8vw;
  }

  .contact .wbox::after{
    content: "";
    width: 25vw;
    height: 40vw;
    background: url("../img/luna06.png") no-repeat center bottom;
    background-size: 100% auto;
    position: absolute;
    top: -16vw;
    right: 2vw;
  }

  .contact .wbox p{
    font-size: 3.5vw;
    line-height: 1.2;
    vertical-align: middle;
    font-feature-settings: "palt";
  }
  
  .contact .wbox p span{
    padding-bottom: .5vw;
    display: inline-block;
  }
  
   .contact .wbox p + p{
     margin-top: 1vw;
  }

  .contact .wbox p.lg{
    font-size: 3.3vw;
    line-height: 1.2;
    margin-top: 1vw;
  }

  .contact .wbox p a.tel{
    font-size: 7vw;
  }

  .contact .wbox p a{
    font-size: 5.8vw;
    line-height: 1.2;
    letter-spacing: normal;
    white-space: nowrap;
  }

  .contact .wbox h4{
    font-size: 3.5vw;
    line-height: 1;
    font-weight: normal;
    margin-top: 4vw;
  }

  .contact .wbox h4 span{
    padding-right: 2vw;
    padding-bottom: .5vw;
  }
  
  .contact .wbox > p span{
    vertical-align: middle;
    transform: translateY(.5em);
    display: inline-block;
  }

  .contact .wbox h4{
    background: url("../img/dot.png") repeat-x left center;
    background-size: .6vw auto;
  }
  
  .contact p.note{
    font-size: 3vw;
    line-height: 1.3;
  }

  .contact p.alc{
    margin-top: 5vw;
  }

  .contact p.alc a{
    font-size: 4vw;
  }

}