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

@media screen and (min-width: 768px) {
  header{
    height: 790px;
    text-align: center;
    background: url("../img/mv_bk.png") no-repeat center top;
    position: relative;
  }
  
   header::after{
     content: "";
     width: 100%;
     height: 105px;
     background: #d06d8c;
     position: absolute;
     bottom:  0;
     left: 0;
     z-index: -1;
  }
  
  header .logo{
    width: 160px;
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  header h1{
    width: 100%;
    text-align: center;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  
  header a{
    position: absolute;
    bottom: 12px;
    left: 50%;
    margin-left: 297px;
  }
  
  header a:hover{
    opacity: 1;
    transform: translate(3px,3px)
  }
  
  header p.note{
    font-size: 10px;
    line-height: 1;
    color: #000;
    margin-top: 0;
    position: absolute;
    top: 165px;
    left: 50%;
    margin-left: 375px;
  }
  
  .c01{
    width: 100%;
    padding: 177px 0 130px;
    background: url("../img/co_bk01.png") repeat-y center top;
    background-size: 100% auto;
    overflow: hidden;
  }
  
  .pr{
    position: relative;
    z-index: 1;
  }
    
  .pr::before{
    content: "";
    width: 329px;
    height: 339px;
    background: url("../img/luna01.png") no-repeat;
    position: absolute;
    top: 75px;
    left: 50%;
    transform: translateX(-655px);
    z-index: 1;
  }
  
  .pr::after{
    content: "";
    width: 210px;
    height: 315px;
    background: url("../img/luna02.png") no-repeat;
    position: absolute;
    bottom: 250px;
    right: 50%;
    transform: translateX(675px);
    z-index: -1;
  }
  
  .pr > div {
    width: 1003px;
    height: 2721px;
    padding: 1px;
    background: url("../img/ki_bk.png") left top no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  
  .pr > div::before {
    content: "";
    width: 436px;
    height: 2241px;
    background: url("../img/co_ki01.png") top left no-repeat;
    position: absolute;
    top: 550px;
    left: -365px;
  }
  
  .pr > div::after {
    content: "";
    width: 461px;
    height: 1916px;
    background: url("../img/co_ki02.png") top left no-repeat;
    position: absolute;
    top: 165px;
    right: -415px;
  }
  
  .pr h2{
    margin-top: 170px;
    margin-bottom: 90px;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  
  .pr h2.sb::after{
    content: "";
    width: 330px;
    height: 290px;
    background: url("../img/ps_title_sb.png") no-repeat;
    position: absolute;
    top: -220px;
    right: -36px;
  }
  
  .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: #853228;
    font-feature-settings: "palt";
    margin: 0 auto 50px;
  }
  
  .pr p a{
    color: #853228;
  }
  
  .pr a.popup{
    display: block;
    margin: 35px auto 0;
  }
  
  .ts{
    margin-top: 135px;
    text-align: center;
    position: relative;
  }
    
  .ts h2{
    text-align: center;
    margin: 0 0 90px;
  }
  
  .ts h3{
    font-size: 30px;
    line-height: 1.2;
    color: #913c16;
    font-feature-settings: "palt";
    font-weight: 900;
    text-align: center;
    margin-bottom: 60px;
  }
  
  .ts h3 span{
    color: #e60012;
  }  
  
  .ts h3 em{
    font-style: normal;
    font-size: 130%;
  }
  
  .ts h3 sup{
    font-size: 12px;
  }
  
  .ts ul{
    text-align: left;
    padding-left: 175px;
    margin-top: 35px;
  }
  
  .ts ul li{
    font-size: 12px;
    line-height: 1.6;
    color: #853228;
    display: inline-block;
    font-feature-settings: "palt";
  }
  
  .ts ul li:nth-child(3),
  .ts ul li:last-of-type{
    display: block;
  }
  
  .c02{
    width: 100%;
    padding: 165px 0 120px;
    background: url("../img/co_bk02.png") no-repeat center top #f7c8d5;
    overflow: hidden;
  }
  
  .ob{
    width: 100%;
    padding: 1px 1px 80px;
    background: #FFF;
    border-radius: 20px;
  }
        
  .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: 500px;
    height: 320px;
    background: url("../img/luna04.png") left top no-repeat;
    position: absolute;
    bottom: -110px;
    right: -180px;
    z-index: -1;
  }
  
  .ob h2{
    text-align: center;
    margin: -45px 0 50px;
  }
  
  .ob ol{
    width: 850px;
    text-align: center;
    margin: 0 auto;
  }
  
  .ob ol li{
    margin-top: 50px;
  }
  
  .ob ol h3{
    margin-bottom: 40px;
  }
  
  .ob ol p{
    font-size: 25px;
    line-height: 1.5;
    font-weight: 800;
    color: #853228;
    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{
    margin-top: 135px;
    padding: 1px;
    background: #FFF;
    border-radius: 20px;
    position: relative;
  }
  
  .re h2{
    text-align: center;
    margin-top: -45px;
    margin-bottom: 40px;
  }
  
  .re > div{
    width: 850px;
    margin: 0 auto;
  }
  
  .re h3{
    font-size: 26px;
    line-height: 1.5;
    text-align: center;
    color: #913c16;
    font-weight: 800;
    font-feature-settings: "palt";
    margin-bottom: 20px;
  }
  
  .re h3 strong{
    color: #185aa5;
  }
  
  .re ul.note{
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 90px;
  }
  
  .re ul.note.bt{
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 80px;
  }
  
  .re ul.note.tp{
    text-align: center;
  }
  
  .re > div > div{
    display: flex;
    justify-content: space-between;
  }
  
  .re .bbox{
    width: 340px;
    color: #185aa5;
    padding: 20px;
    border-radius: 15px;
    border: 3px dotted #185aa5;
  }
  
  .re .bbox h4{
    font-size: 18px;
    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: 924px;
    text-align: center;
    background: url("../img/hi_bk.png") center center #faecad no-repeat;
  }
  
  .ht > div{
    padding-top: 255px;
    height: 100%;
    position: relative;
  }
  
  .ht > div::before{
    content: "";
    width: 520px;
    height: 320px;
    background: url("../img/luna05.png") no-repeat center bottom;
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(80px)
  }
  
  .ht h2{
    margin-bottom: 35px;
  }
  
  .ht p.txt{
    width: 760px;
    font-size: 30px;
    line-height: 1.5;
    font-weight: 600;
    text-align: left;
    font-feature-settings: "palt";
    margin: 0 auto;
  }
  
  .ht p.date{
    position: absolute;
    bottom: 125px;
    left: 50%;
    transform: translateX(60px);
  }
  
  
}

.rules{
  color: #913c16;
  font-feature-settings: "palt";
  overflow: hidden;
  padding: 180px 15px 120px;
}

@media screen and (min-width: 768px) {
  .rules{
    background: url("../img/rules_dot.png");
  }
}

.rules a{
  color: #913c16;
}

.rules section{
  padding: 40px 60px 60px;
  border-radius: 20px;
  background: #FFF;
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .rules section.luna::after{
    content: "";
    width: 210px;
    height: 365px;
    background: url("../img/luna06.png") no-repeat right top;
    position: absolute;
    top: 563px;
    left: -209px;
    z-index: -1;
  }
}

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

.rules h2{
  font-size: 45px;
  line-height: 1;
  color: #185aa5;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
}

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

.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: 24px;
  line-height: 1.4;
  color: #FFF;
  font-weight: 600;
  font-feature-settings: "palt";
  margin-bottom: 25px;
}

.contact h3 span{
  display: block;
}

.contact .wbox{
  width: 585px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-feature-settings: "palt";
  background: #FFF;
  color: #000;
  padding: 15px 20px 15px 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: 220px;
  height: 415px;
  background: url("../img/luna07.png") no-repeat;
  position: absolute;
  top: -165px;
  right: -360px;
}


.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;
  white-space: nowrap;
}

.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: 40vw;
    position: absolute;
    bottom: 5vw;
    right: 10vw;
  }
  header p.note{
    font-size: 2.8vw;
    color: #000;
    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: 210vw;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .pr a.popup{
    width: 70%;
    display: block;
    position: absolute;
    top: 315vw;
    left: 50%;
    transform: translateX(-50%);
  }
    
  .ts,    
  .ts h3{
    position: relative;
  }
  
  .ts h3{
    width: 100%;
    font-size: 5vw;
    line-height: 1.4;
    color: #8f3913;
    font-feature-settings: "palt";
    font-weight: 900;
    text-align: center;
    position: absolute;
    top: 20vw;
    left: 0;
  }
  
  .ts h3 span{
    color: #e60012;
  }  
  
  .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: 7vw;
    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: #185aa5;
  }
  
  .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: 28vw;
    left: 15vw;
  }
    
  .re .bbox{
    width: 69%;
    color: #185aa5;
    padding: 5vw;
    margin: 6vw 0 4vw;
    border-radius: 5vw;
    border: 3px dotted #185aa5;
    position: absolute;
    top: 195vw;
    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: #853228;
    font-feature-settings: "palt";
    margin-bottom: 25vw;
    display: inline-block;
    position: absolute;
    top: 36vw;
    left: 0;
  }
  
  .rules{
    background: url("../img/rules_dot_sp.png");
    background-size: 5vw auto;
    padding: 15vw 8vw;
  }

  .rules section{
    border-radius: 2vw;
    padding: 8vw 7vw 10vw;
  }

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

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

  .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: 10vw;
  }

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

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

  .contact .wbox::after{
    content: "";
    width: 20vw;
    height: 40vw;
    background: url("../img/luna07.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.8;
    margin-top: 1vw;
  }

  .contact .wbox p a.tel{
    font-size: 6vw;
    letter-spacing: .1em;
  }

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

  .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: 2.8vw;
    line-height: 1.3;
  }

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

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

}