@charset "UTF-8";
@import url("ress.min.css");
@import url("compiled.css");

html {
  font-size: 62.5%
}

body {
  width: 100%;
  background-color: #fafdff;
  font-size: 1.6rem;
  font-family: 'Noto Sans JP', sans-serif;
  color: rgb(34, 34, 34);
}
p{
  line-height: 2;
}

.is-sp {
  display: none;
}

@media screen and (max-width: 750px) {
  .is-sp {
    display: block;
  }

  .is-pc {
    display: none;
  }
}

.header-inner {
  position: relative;
  background-image: url("../images/header.png");
  background-position: center center;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  overflow: hidden;

}

.header-warpper {
  max-width: 1000px;
  height: 100vh;
  position: relative;
  margin: 0 auto;
}

.header-title {
  position: absolute;
  width: 72%;
  top: 50%;
  left: -62px;
  transform: translateY(-50%);
  z-index: 100;
}

.header-logo {
  -ms-align-items: center;
  align-items: center;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  position: absolute;
  left: 12%;
  bottom: 25%;
  height: 11%;
  width: 53%;
}

.dl-logo {
  margin: 0px 8px;
}

.dl-logo a{
  display: block;
}
.dl-logo img{
  height: inherit;
}
.qr{
  width: 30%;
}


.hand {
  position: absolute;
  width: 43%;
  right: -7%;
  bottom: -40px;
}

.hand img {
  position: relative;
  z-index: 100;
}

.sp-mv {
  position: absolute;
  width: 45%;
  top: 2%;
  left: 16%;
}

.logo {
  width: 126px;
  position: absolute;
  left: 15px;
  top: 15px;
}

/*mediq query*/
@media screen and (max-width: 750px) {
  .hand {
    right: -16px;
  }

  .header-title {
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50% -50%);
    -o-transform: translate(-50% -50%);
    transform: translate(-50% -50%);
    width: 90%;
  }

  .header-logo {
    width: 66%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 40%;
    top: auto;
  }

  .dl-logo {
    margin: 0;
  }

  .dl-logo + .dl-logo {
    margin-left: 10px;
  }

  .qr {
    display: none;
  }
  .logo{
    left: 15px;
    top: 15px;
    width: 107px;
  }
}

/* /mediq query*/


.about-inner {
  margin: 0 auto;
  max-width: 1000px;
  padding: 0 10px;
  box-sizing: border-box;
}

.about-text{
  font-size: 1.6rem;
  font-weight: bold;
  font-feature-settings: normal;
}
.about-inner .about-contents {
  z-index: 10;
  position: relative;
  padding-left: 50%;
}

.about-inner .inner:nth-of-type(even) .about-contents {
  padding-right: 50%;
  padding-left: 0;
}

.inner {
  position: relative;
  margin-top: 60px;
}
.inner + .inner{
  margin-top: 116px;
}

.text-title {
  width: 100%;
  margin-bottom: 36px;
}
.sub-text{
  margin-top: 60px;
  padding-left: 17px;
}

.inner1 .about-contents{
  padding-top: 80px;
  padding-bottom: 50%;
  max-height: 530px;
}
.inner1 .title-image {
  position: absolute;
  left: -116px;
  width: 74%;
  top: 0;
}

.inner2 .about-contents{
  padding-bottom: 10%;
  max-height: 484px;
}
.inner2 .title-image {
  position: absolute;
  right: -4%;
  left: auto;
  width: 44%;
  top: -30px;
}
.inner3{
  z-index: 10;
}

.inner3 .title-image {
  position: absolute;
  left: -40px;
  width: 43%;
  top: 0;

}

.inner3 .about-contents {
  padding-top: 50px;
}
.present{
  text-align: right;
}
.bg-blue-fl{
  display: none;
}

.annotation{
  font-size: 1.2rem;
  margin-top: 20px;
}

.inner.inner2 {
  margin-top: 162px;
}

.inner.inner4 {
  margin-top: 168px;
}

.inner.inner5 {
  margin-top: 158px;
}

.inner4 .about-block {
  position: relative;
}

.inner4 .title-image {
  position: absolute;
  top: 0;
  right: 0;
}

.coin {
  margin-top: 72px;
  padding-left: 80px;
  width: auto;
  height: auto;
}

.inner5 .title-image {
  position: absolute;
  top: -45px;
  left: -110px;
}

.app-sub-text {
  margin-top: 49px;
}

.inner5 .about-inner .title-image {
  width: 50%;
}

/*media query*/
@media screen and (max-width: 800px) {
  .coin {
    padding-left: 40px;
  }
}
@media screen and (max-width: 750px) {
  .inner{
    padding: 0 30px;
  }
  .inner + .inner{
    margin-top: 60px;
  }
  .text-title{
    margin-bottom: 27px;
  }
  .about-text{
    font-size: 1.4rem;
    font-feature-settings: "palt";
  }
  .about-inner .about-contents, .about-inner .inner:nth-of-type(even) .about-contents{
    width: 100%;
    padding: 0;
  }
  .about-inner .title-image{
    margin: 50px auto 0;
    position: static;
    width: 100%;
  }
  .sub-text{
    padding: 0;
  }
  .bg-blue-fl{
    display: block;
    position: absolute;
    z-index: -1;
   width: 100%;
  }


  .inner1 .about-contents{
    width: 100%;
    padding: 0;
  }
  .inner1 .title-image {
    position: relative;
    top: 0;
    left: -6%;
    width: 112%;
    margin: 50px auto 0;
  }
  .inner1 .bg-blue-fl{
    left: -50%;
    bottom: 13%;
  }

  .inner1 .about-contents{
    padding-top: 0;
  }
  .inner2 .bg-blue-fl{
    bottom: 2%;
    left: 0;
  }
  .inner3 .bg-blue-fl{
    left: -8%;
    bottom: 10%;
    width: 85%;
  }
  .inner3 .about-contents {
    padding-top: 0;
  }

  .inner4 .text-title {
    padding-right: 50px;
  }

  .inner.inner5 {
    margin-top: 85px;
  }

  .inner5 .title-image {
    margin-left: -25px;
    width: calc(100% + 25px);
  }

  .inner5 .bg-blue-fl {
    left: -150px;
  }

  .app-sub-text {
    display: none;
  }

  .app-sub-text img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

}

/* /media query*/

.about2 .warpper {
  position: relative;
  background-image: url("../images/background-color.png");
  margin: 0 auto;
  top: 60px;
  background-position: center top;
  padding-top: 175px;
  padding-bottom: 110px;
  background-size: cover;
}
.about2-inner{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
}


.about2-ttl{
  margin-bottom: 70px;
  font-size: 4.8rem;
  font-weight: bold;
  color: #ffff;
  text-align: center;
}

.menu {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 auto;
  text-align: center;
  width: calc(100% + 40px);
  left: -20px;
  position: relative;
}

.flex-container {
  width: calc(100%/ 3);
  padding: 0 20px;
}
.flex-container:nth-of-type(n + 4){
  margin-top: 73px;
}
.container-text h3 {
  font-size: 1.8rem;
  font-weight: bold;
  color: white;
  margin-top: 30px;
}

.flex-container .container-text p {
  font-size: 1.5rem;
  color: white;
  margin-top: 20px;
  text-align: left;
  line-height: 28px;
}

/*media query*/
@media screen and (max-width: 750px){
  .about2 .warpper {
    position: relative;
    background: url("../images/round_sp.png") no-repeat center top , url("../images/pattern.png") repeat center top;
/*    -webkit-background-size: 100% auto, 1px 1px;*/
/*    background-size: 100% auto, 1px 1px;*/
    margin: 0 auto;
    top: -10px;
    padding-top: 175px;
    padding-bottom: 110px;
  }
  .about2-ttl{
    margin-bottom: 60px;
    font-size: 2.9rem;
  }
  .menu{
    display: block;
  }
  .flex-container{
    width: 100%;
    padding: 0 30px;
  }
  .flex-container + .flex-container{
    margin-top: 45px;
  }
  .flex-container .container-text p {
    font-size: 1.4rem;
  }
  .container-text h3{
    font-size: 1.8rem;
    margin-bottom: 15px;
  }

}

/* /media query*/

.attention{
  padding: 60px 15px 80px;
}

.attention .attention-warpper {
  margin: 0 auto;
  padding: 0 10px;
}

.attention .attention-title {
  margin-top: 80px;
  margin-bottom: 43px;
}

.attention .attention-title h2 {
  font-size: 3.6rem;
  color: #0050b6;
  text-align: center;
}

.attention-inner {
  max-width: 800px;
  margin: 0 auto;
}

.def-list{
  font-size: 1.6rem;
  line-height: 1.8;
}
.def-list > li{
  position: relative;
  padding-left: 1em;
}
.def-list > li:before{
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 750px) {
  .attention .attention-title {
    margin-top: 0;
    margin-bottom: 30px;
  }
  .attention .attention-title h2 {
    font-size: 2.4rem;
  }
  .def-list {
    font-size: 1.4rem;
  }
}

/************fotter****************/

.fotter-inner {
  position: relative;
  background-image: url("../images/header.png");
  background-position: center center;
  background-size: cover;

}

.fotter-warpper {
  position: relative;
  margin: 0 auto;
  padding: 40px 0 35px 16px;
  max-width: 1000px;
}

.fotter-inner .fotter-title {
  width: 43%;
  z-index: 100;
  position: relative;
}

.fotter-logo {
  -ms-align-items: center;
  align-items: center;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 18%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 70%;
}
.fotter-title .coupon{
  left: 88%;
}

.fotter-logo .dl-logo {
  margin: 0px 8px;
}
.coupon {
  position: absolute;
  bottom: 0;
  left: 85%;
  width: 49%;
  z-index: 200;
}

.fotter-warpper .hand {
  position: absolute;
  width: 35%;
  right: 0;
  bottom: 0;
}

.scroll-top{
  z-index: 1500;
  position: absolute;
  bottom: 10%;
  right: 0;
}
.scroll-top a{
  display: block;
}
.scroll-top-inner {
}

@media screen and (max-width: 750px){
  .fotter-warpper{
    padding: 50px 5px;
  }
  .fotter-inner .fotter-title{
    position: relative;
    width: 100%;
  }
  .fotter-logo{
    bottom: 35%;
  }
  .dl-logo.qr{
    display: none;
  }
  .scroll-top{
    width: 60px;
    right: 30px;
    bottom: 40px;
  }
  .l-footer .hand{
    display: none;
  }
}