@charset "utf8";

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
}
picture {
  display: block;
  height: 100%;
  margin: 0 auto;
  line-height: 0;
}
@media screen and (max-width: 767px) {
  ._pc{ display: none; }
}

@media screen and (min-width: 768px) {
  ._sp{ display: none; }
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
}
img {
  width: 100%;
  height: auto;
}
/*---------------------------
section
---------------------------*/
section {
  width: 100%;
}

/*---------------------------
article
---------------------------*/
.header {
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .header {
    width: 100%;
  }  
}
.fv {
  position: relative;
  width: 750px;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .fv {
    width: 100%;
  }  
}
.fv-cta {
  position: absolute;
  top: 46.6%;
  left: 50%;
  transform: translateX(-50%);
  width: 724px;
}
@media screen and (max-width: 767px) {
  .fv-cta {
    width: calc(346vw / 3.6);
  }
}
#current-time {
  display: none;
}
.fv-cta .p_2 {
  display: none;
}
#cta-area.active {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 750px;
  height: 300px;
  background-color: #FFF;
  box-shadow: 0 -10px 10px 0 rgba(0, 0, 0, 0.3);
  z-index: 30;
}
@media screen and (max-width: 767px) {
  #cta-area.active {
    width: 100%;
    height: calc(146vw / 3.6);
    box-shadow: 0 calc(-5vw / 3.6) calc(5vw / 3.6) 0 rgba(0, 0, 0, 0.3);
  }
}
#cta-area.active .p_1 {
  display: none;
}
#cta-area.active .p_2 {
  display: block;
}
#cta-area.active #current-time {
  position: absolute;
  display: block;
  top: 10%;
  left: 5%;
  font-size: 30px;
  line-height: 1;
  text-decoration: none;
  color: #000000;
  font-family: "Noto Sans JP";
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  #cta-area.active #current-time {
    top: 10%;
    left: 5%;
    font-size: calc(15vw / 3.6);
  }
}
#cta-area.active .fv-cta {
  position: static;
  display: block;
  transform: unset;
  width: 724px;
  margin: 16px auto 0;
}
@media screen and (max-width: 767px) {
  #cta-area.active .fv-cta {
    width: calc(346vw / 3.6);
    margin: calc(8vw / 3.6) auto 0;
  }
}
.cta-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 724px;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .cta-wrap {
    width: calc(346vw / 3.6);
  }
}
.fv-cta-wrap {
  top: 53.8%;
}
@media screen and (max-width: 767px) {
  .fv-cta-wrap {
    top: 53.8%;
  }
}
.item-01 {
  width: 750px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .item-01 {
    width: 100%;
  }
}
.item-02 {
  width: 750px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .item-02 {
    width: 100%;
  }
}
.item-03 {
  width: 750px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .item-03 {
    width: 100%;
  }
}
.item-04 {
  width: 750px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .item-04 {
    width: 100%;
  }
}
.item-05 {
  width: 750px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .item-05 {
    width: 100%;
  }
}
.item-06 {
  position: relative;
  width: 750px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .item-06 {
    width: 100%;
  }
}
.item-06-cta {
  position: absolute;
  top: 74.6%;
  left: 50%;
  transform: translateX(-50%);
  width: 724px;
}
@media screen and (max-width: 767px) {
  .item-06-cta {
    top: 74.6%;
    width: calc(346vw / 3.6);
  }
}
.item-06-cta-wrap {
  top: 88.8%;
}
@media screen and (max-width: 767px) {
  .item-06-cta-wrap {
    top: 88.8%;
  }
}
.item-07 {
  width: 750px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .item-07 {
    width: 100%;
  }
}
.item-08 {
  width: 750px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .item-08 {
    width: 100%;
  }
}
.item-09 {
  position: relative;
  width: 750px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .item-09 {
    width: 100%;
  }
}
.item-09-cta {
  position: absolute;
  top: 73.4%;
  left: 50%;
  transform: translateX(-50%);
  width: 724px;
}
@media screen and (max-width: 767px) {
  .item-09-cta {
    top: 73.4%;
    width: calc(346vw / 3.6);
  }
}

.item-09-cta-wrap {
  top: 88.4%;
}
@media screen and (max-width: 767px) {
  .item-09-cta-wrap {
    top: 88.4%;
  }
}
.item-10 {
  width: 750px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .item-10 {
    width: 100%;
  }
}
/*---------------------------
footer
---------------------------*/
.item-footer {
  width: 750px;
  margin: 0 auto 300px;
  background-color: #000C07;
}
@media screen and (max-width: 767px) {
  .item-footer {
    width: 100%;
    margin: 0 auto calc(146vw / 3.6);
  }
}
.footer-copy {
  padding-bottom: 30px;
  font-size: 24px;
  text-align: center;
  color: #FFF;
}
@media screen and (max-width: 767px) {
  .footer-copy {
    padding-bottom: calc(15vw / 3.6);
    font-size: calc(12vw / 3.6);
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}