@charset "utf-8";

:root{
  --mv-width: 1600;
  --mv-height: 598;
  --mv-btn-width: 10;
  --mv-btn-height: 50;
  --mv-btn-x: 785;
  --mv-btn-y: 440;
  --sp-mv-width: 750;
  --sp-mv-height: 812;
  --sp-mv-btn-width: 294;
  --sp-mv-btn-height: 62;
  --sp-mv-btn-x: 442;
  --sp-mv-btn-y: 634;
  --half: .5;
  --c-pri: #1a1a1a;
  --c-sec: #f0f0f0;
}
body {
  position: relative;
}

.main-column > .inner,
.dl_area > .inner,
.app_area > .inner,
.flow_area > .inner {
  position: relative;
  width: 960px;
  margin: 0 auto;
}

.kv_area > .inner img,
.dl_area > .inner img,
.app_area > .inner img:not(.icn-_blank),
.flow_area > .inner img {
  vertical-align: bottom;
}

@media screen and (max-width: 767px) {
  .main-column > .inner,
  .dl_area > .inner,
  .flow_area > .inner,
  .app_area > .inner {
    width: 100%;
    padding: 0 20px;
  }
  .dl_area > .inner img,
  .app_area > .inner img:not(.icn-_blank),
  .flow_area > .inner img {
    width: 100%;
    height: auto;
  }
}

/*
KVエリア
*/
.kv_area{
  display: block;
  position: relative;
}

.kv_area > .inner img {
  max-width: 100%;
}

.kv_area #mv{
  text-align: center;
  display: block;
}
.kv_area #mv-btn{
  left: calc(var(--mv-btn-x) / var(--mv-width) * 100%);
  top: calc(var(--mv-btn-y) / var(--mv-height) * 100%);
  position: absolute;
  bottom: 0;
  display: inline-block;
}

.kv_area > .inner > .other_area .panel_area a:hover {
  text-decoration: none;
  opacity: .8;
}

@media screen and (max-width: 767px){
  .kv_area #mv-btn{
    left: calc((var(--sp-mv-btn-x) * var(--half)) / (var(--sp-mv-width) * var(--half)) * 100%);
    top: calc(var(--sp-mv-btn-y) * var(--half) / (var(--sp-mv-height) * var(--half)) * 100%);
  }
  .kv_area #mv-btn img{
    max-width: calc(var(--sp-mv-btn-width) * .5 * 1px);
    max-height: calc(var(--sp-mv-btn-height) * .5 * 1px);
  }
}


/*
========================
DLエリア
========================
*/

.dl_area {
    background-color: var(--c-pri);
    padding-bottom: 50px;
    padding-top: 60px;
}

.dl_area.min {
    padding-top: 28px;
    padding-bottom: 28px;
}

.dl_area > .inner {
    max-width: 724px;
}

.dl_area > .inner > .hdg > .txt,
.dl_area > .inner > .hdg_app > .txt {
    text-align: center;
    color: #fff;
    display: block;
}

.dl_area > .inner > .hdg > .txt {
    font-size: 20px;
    letter-spacing: .8px;
    font-weight: bold;
}
@media screen and (max-width: 767px) {
    .dl_area {
        padding: 30px 24px 10px;
    }

    .dl_area > .inner > .hdg > .txt {
        font-size: 20px;
    }
    .dl_area.min {
        padding: 16px 24px 20px;
    }
}

.lyt-app-link {
    margin-top: 15px !important;
    display: grid;
    grid-template: 'apple google' auto / 1fr 1fr;
    grid-gap: 0 80px;
    max-width: 100%;
}

.lyt-app-link > .item.apple {
    grid-area: apple;
}

.lyt-app-link > .item.google {
    grid-area: google;
}

.lyt-app-link > .item {
    padding-top: 40px;
    display: grid;
    grid-template:
        'store qr' auto
        'txt txt' auto
        / 1fr auto;
    grid-gap: 8px 30px;
    position: relative;
}

.lyt-app-link > .item > .img_store {
    grid-area: store;
}

.lyt-app-link > .item > .img_store > a > img {
    max-width: 100%;
}

.lyt-app-link > .item > .img_qr {
    grid-area: qr;
    position: relative;
}

.lyt-app-link > .item:nth-child(2n+1)::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 1px;
    background-color: #cbcbcb;
    right: -40px;
    top: 0;
}

.lyt-app-link.min > .item:nth-child(2n+1)::before {
    height: 110%;
    top: -4px;
}

.lyt-app-link > .item > .txt {
    grid-area: txt;
    color: #fff;
    font-size: 14px;
    line-height: 1.75;
}

.lyt-app-link.min > .item {
    padding-top: 0;
    grid-gap: 0 30px;
}

.lyt-app-link.min > .item > .img_store {
    padding-top: 10px;
}

@media screen and (min-width: 768px) {
    .lyt-app-link > .item > .img_store > a {
        transition: opacity .2s ease-out;
    }

    .lyt-app-link > .item > .img_store > a:hover {
        opacity: .7;
    }
}

@media screen and (max-width: 767px) {
    .lyt-app-link {
        grid-gap: 0 50px;
        margin-top: 22px !important;
    }

    .lyt-app-link > .item {
        grid-template:
            'store' auto
            'txt' auto
            / auto;
            padding-top: 0;
            grid-gap: 6px 30px;
    }

    .lyt-app-link > .item > .img_store {
        text-align: center;
    }

    .lyt-app-link > .item > .img_qr {
        display: none;
    }

    .lyt-app-link > .item > .txt {
        font-size: 12px;
    }

    .lyt-app-link > .item:nth-child(2n+1)::before {
        height: 92%;
        right: -25px;
    }

    .lyt-app-link.min > .item > .img_store {
        padding-top: 0;
    }

    .lyt-app-link.min > .item:nth-child(2n+1)::before {
        top: -7px;
        right: -25px;
    }
}

/*
========================
アプリ紹介エリア
========================
*/

.app_area {
  padding: 20px 0 60px;
  background-color: var(--c-sec);
}

.app_area > .inner {
  text-align: center;
}

.app_area > .inner > .mod-list {
  text-align: left;
  margin-bottom: 15px;
}

.app_area > .inner h2 {
  margin: 85px auto 40px;
}

.app_area > .inner p {
  font-size: 1.6375rem;
  margin-bottom: 30px;
}

.btn-app {
  margin: 50px auto 0;
  text-align: center;
}

.btn-app > a:hover {
  opacity: .7;
  transition: .2s ease-out;
}

@media screen and (max-width: 767px) {
  .app_area {
    padding: 23px 0 47px;
  }
  .app_area > .inner h2 {
    width: 92%;
    margin: 70px auto 35px;
  }
  .app_area > .inner p {
    margin-bottom: 20px;
  }
  .btn-app {
    margin: 35px auto 0;
  }
}

/*
========================
応募方法エリア
========================
*/

.flow_area {
  padding: 60px 0 70px;
  background-color: #fff;
}

.flow_area > .inner {
  text-align: center;
}

.flow_area > .inner h2 {
  margin: 0 auto 50px;
}

.flow_area > .inner .flow_list {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .flow_area {
    padding: 0 0 50px;
  }
  .flow_area > .inner {
    padding: 0 40px;
  }
  .flow_area > .inner h2 {
    width: 85%;
    margin: 50px auto 30px;
  }
  .flow_area > .inner .flow_list {
    flex-direction: column;
  }
  .flow_area > .inner .flow_list li:not(:last-child) {
    margin-bottom: 16.5px;
  }
}

/*
========================
その他
========================
*/

.mod-btn .anc a::after{
    background-image:none !important;
}
.mod-btn .anc a::before{
    width: 17px !important;
}
.fixedArea {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #f2f6f7;
  padding: 15px 20px;
  z-index: 9999;
}
.fixedArea.active {
  display: block;
}


.mod-list {
  margin-bottom: 40px;
}

.mod-list> .list> li::before {
  background: #223;
  position: absolute;
  top: .6em;
  left: 9px;
  display: block;
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 15px;
}

  [class^="str-outer"]> .str-inner:last-child {
    padding-bottom: 20px;
  }

.js-copy {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  background: #f2f6f7;
  padding: 25px 20px;
  z-index: 9999;
}

.js-copy > * {
  margin-top: 0!important;
}
.js-copy > *:last-child {
  margin-bottom: 0!important;
}

:not(.str-scrollTop) :not(.mod-link-list):not(.mod-link-anchor) *> :not(li)> a[href^="#anc-01"]::before,
:not(.str-scrollTop) :not(.mod-link-list):not(.mod-link-anchor) *> :not(li)> a[href^="#anc-02"]::before,
:not(.str-scrollTop) :not(.mod-link-list):not(.mod-link-anchor) *> :not(li)> a[href^="#anc-03"]::before {
    background-image: none;
    background-repeat: no-repeat;
    background-position: -23px -135px;
    background-size: 201px 196px;
    display: inline-block;
    width: 0;
    height: 0;
    margin: 0;
    content: "";
}

/* 終了対応 */
/* .r-camp-end-wrap {
  padding: 30px 0 10px;
}
.r-camp-end {
  max-width: 960px;
  width: 100%;
  text-align: center;
  border: 2px solid #FFFFFF;
  margin: 0 auto 50px;
  padding: 10px;
  font-size: 1.8rem;
  font-weight: bold;
  box-sizing: border-box;
}
.r-camp-end p {
  color: #FFFFFF;
} */

/* @media only screen and (max-width: 767px) {
.r-camp-end-wrap {
  padding: 15px 15px 0;
}
.r-camp-end {
  font-size: 1.6rem;
}
} */

/*
========================
パネル内のボタンエリア
========================
*/

.btn_area_panelA,
.btn_area_panelB {
  position: relative;
  top: -74px;
  right: -87px;
  display: inline-block;
}

@media only screen and (max-width: 767px) {
  .btn_area_panelA {
    right: -18%;
    display: inline-block;
    bottom: 19.5%;
    max-width: 165px;
    top: auto;
  }

  .btn_area_panelB {
    right: -16%;
    display: inline-block;
    bottom: 20%;
    max-width: 165px;
    top: auto;
  }
}