@charset "UTF-8";
@import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanjp.min.css);


html{
  font-size : 62.5%;
}

@media screen and (max-width:768px){
  html{
    font-size : 1.333vw;
  }
}

body{
  color: #000;
  font-size: 1.6rem;
  font-family: YakuHanJP, "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
  font-style: normal;
  font-feature-settings: 'palt';
  line-height: 1.5;
  /* min-width: 1080px; */
  /* overflow-x: hidden; */
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

/* TODO：PC版作成時確認 */
@media screen and (max-width:768px){
  /* body{
    min-width: 320px;
  } */
}


img{
  display : block;
  max-width : 100%;
  margin: auto;
  height: auto;
}

video {
  width: 100%;
}

picture{
  display: block;
}

@media screen and (max-width:768px){
  img{
    width : 100%;
  }
}

a{
  color:#000;
  display: block;
  text-decoration: none;
  transition: .2s;
}

a:hover,button:hover{
  filter: brightness(1.1);
}



.header,
.main,
.footer{
  margin: auto;
  max-width: 75rem;
}

.header{
  background: #fff;
  height: 6.4rem;
}

.header__logo--wrap{
  display: flex;
  align-items: center;
  padding: 0 0 0 1.2rem;
  height: 6.4rem;
  width: 29rem;
}

.header__logo01{
  width: 14rem;
}

.header__logo02{
  width: 13.2rem;
}

.main{
  background: #fff;
}

.footnote--campaign-limit{
  font-size:2.1rem;
  margin: 0.4em 20rem 4rem 0;
  text-align: right;
}

.footnote--list{
  /* margin: 0 0 0 8.5rem; */
  width: 65rem;
  margin: 0 auto;
}

.footnote--list li{
  font-size:2rem;
  margin: 0 0 0 1em;
  text-indent: -1em;
}

.campaign-info__image--04{
  margin: 0 margin 8rem;
}

.manga01__image{
  margin: auto;
  width: 75rem;
}

.point__title{
  margin: 0 auto;
}

.point__image--01_2{
  position: relative;
  z-index: 10;
}

.point--01__anim{
  margin: -9.5rem auto 0;
  position: relative;
  width: 95%;
  z-index: 1;
}

.point--02 img {
  position: relative;
  z-index: 10;
}

.point--02 video {
  padding: 0 2.5rem;
}

.point__mov--02_1 {
  margin-top: -11rem;
}

.point__image--02_3 {
  margin-top: -2rem;
}

.point__image--02_4 {
  margin-top: -17.5rem;
}

.uservoice__list{
  position:relative;
}

.uservoice__list:last-child{
  margin: 0 auto;
}

.uservoice__list__movie{
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  width: 57rem;
}

.uservoice__list__movie.movie1{
  bottom:8rem;
}

.uservoice__list__movie.movie2 {
  bottom: 16rem;
}

.uservoice__list__movie.movie3{
  bottom: 13rem;
}

.manga02{
  margin:2rem auto 4rem;
}

.manga03 {
  margin-bottom: 5rem;
}

.manga02__image{
  margin: auto;
  width: 75rem;
}

.offer__btn--1st{
  margin: 7.5rem auto 2.5rem;
}

.offer--2nd{
  margin: -2.5rem auto 10rem;
}

.offer__btn--wrapper{
  margin: 0 auto 3rem;
  position:relative;
  max-width: 83.2rem;
}

.offer__btn--red--wrapper{
  margin: 0 auto 3rem;
}

.offer__btn{
  bottom:3.2rem;
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  width: 65rem;
}

.offer__footnote{
  margin: 0 auto 3.5rem;
  width: 90%;
}

.offer__footnote li{
  font-size:2rem;
  margin: 0 0 0 1em;
  text-indent: -1em;
}

.offer__link{
  margin: 3.5rem auto;
  width: 67rem;
}

.offer__detail {
  position: relative;
  border: #c60001 solid .2rem;
  border-radius: 1.5rem;
  width: 90%;
  margin: 0 auto 2rem;
}

.offer__detail__arrow {
  position: absolute;
  top: 2.2rem;
  right: 3rem;
  width: 4rem;
  transform: rotate(180deg);
}
.offer__detail__arrow.open {
  transform: rotate(0);
}

.offer__detail__btn {
  cursor: pointer;
}

.offer__detail__ttl {
  margin: 0;
  padding: 2.5rem;
  height: 8.6rem;
  width: auto;
}

.offer__detail__table {
  padding: 1rem 2.5rem 2.5rem;
}

.modal--wrapper{
  align-items: center;
  background: rgba(0,0,0,0.9);
  display: none;
  height: 100vh;
  justify-content: center;
  left:0;
  position:fixed;
  top:0;
  width: 100vw;
}

.modal{
  display: none;
  height: 49.5rem;
  position: relative;
  width: 88rem;
}

.modal__close-btn{
  position:absolute;
  right: 0;
  top: -4rem;
  width: 3rem;
}

.modal__movie{
  display: none;
  height: 100% !important;
  left:0;
  position: absolute;
  top:0;
  width: 100% !important;
}

.post_note {
  width: 90%;
  margin: 0 auto 10rem;
}

.txt_red {
  color: #ff0000;
}

.footer{
  background: #ffc8c8;
  padding: 3.5rem 0 2rem;
  margin-top: 7.5rem;
}

.footer__text{
  margin: 0 auto 2.5rem;
  width: 43rem;
}
.footer__tel{
  margin: 0 auto 2rem;
  width: 42.5rem;
}

.footer__business-time{
  font-size:2.1rem;
  margin: 0 auto 3.5rem;
  text-align: center;
}

.footer__copyright{
  font-size:2rem;
  text-align: center;
}

/*
// sp style
*/

@media screen and (max-width:768px){
  .header,
  .main,
  .footer{
    margin: auto;
    max-width: 75rem;
  }

  .header{
    height: 8rem;
  }

  .header__logo--wrap{
    height: 8rem;
    padding: 0 0 0 1.5rem;
    width: 36rem;
  }

  .header__logo01{
    width: 17.6rem;
  }

  .header__logo02{
    width: 16.4rem;
  }

  .footnote--campaign-limit{
    margin: 0.4em 5rem 0.7em 0;
  }

  .footnote--list{
    margin: 1rem 5rem 0;
  }

  .footnote--list li{
    font-size:2.1rem;
    line-height: 1.25;
    margin: 0 0 0 1em;
    text-indent: -1em;
  }

  .campaign-info__image--04{
    margin: 0 0 7rem;
  }

  .point__title{
    margin: 0 auto 1.8rem;
  }

  .point--01__anim{
    margin: -11rem auto 0;
    width: 93%;
  }

  .uservoice__list{
    /* margin: 0 auto 3.5rem; */
    width: 100%;
  }

  .uservoice__list__movie{
    width: 57rem;
  }

  .number-of-contracts{
    margin: 0;
  }

  .offer__btn--1st{
    margin: 3.5rem auto 0;
    width: 65rem;
  }

  .offer--2nd{
    margin: -2.8rem auto 8rem;
  }

  .offer__btn--wrapper{
    margin: 0 auto 6rem;
    width: 70rem;
  }

  .offer__btn--red--wrapper{
    margin: 0 auto 3.5rem;
  }

  .offer__btn{
    bottom:4rem;
    width: 60rem;
  }

  .offer__footnote{
    margin: 0 auto 3rem;
    width: 67rem;
  }

  .offer__footnote li{
    font-size:2.4rem;
    line-height: 1.25;
  }

  .offer__link{
    margin: 3rem auto 6rem;
  }

  .modal{
    height: auto;
    padding-bottom: calc(0.5625 * 0.9 * 100%);
    width: 90%;
  }

  .modal__close-btn{
    top:-8.5rem;
    right:0;
    width: 5rem;
  }

  .footer{
    margin-top: 5rem;
  }

  .footer__copyright{
    font-size:1.8rem;
  }

  /* 60th logo */
  .lp-content-logo img {
    width: 28.4rem;
  }

}