@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;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

@media screen and (max-width:768px){
  body{
    min-width: 320px;
  }
}


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

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;
  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;
}

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

.manga01{
  margin:0 auto 12rem;
}

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

.point__title{
  margin: 0 auto;
}

.point--image {
  position: relative;
  z-index: 1;
}

.point__image--02_1 {
  margin-bottom: -11.5rem;
}

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

section.point video {
  display: block;
  width: 60rem;
  margin: 0 auto;
}

.point--01__anim{
  margin: -2.5rem auto 0;
  position: relative;
  width: 84rem;
}

.uservoice__list--wrapper{
  background: #f9f0eb;
  padding: 3.5rem 0 5.5rem;
}

.uservoice__list{
  margin: 0 auto 4rem;
  position:relative;
  width: 100%;
}

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

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

.number-of-contracts{
  margin: 0 auto 6rem;
}

.manga02{
  margin:0 auto 4rem;
}

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

.campaign-info02__image--01{
  margin: 0 auto 5rem;
}

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

.offer__header-arrow{
  margin: 0 auto 3rem;
  width: 44.8rem;
}

.offer__header{
  margin: 0 auto 2rem;
  width: 88.8rem;
}

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

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

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

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

.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;
}

.footer{
  background: #ffc8c8;
  padding: 3.5rem 0 2rem;
}

.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;
}

/* 60th logo */
.lp-content-logo img {
  margin: 7rem auto 6rem;
  width: 22rem;
}


/*
// sp style
*/
@media screen and (max-width:768px){
  .header,
  .main,
  .footer{
    margin: auto;
    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;
  }

  .manga01{
    margin:0 auto;
  }

  .point__title{
    margin: 0 auto 1.8rem;
  }

  .point--01__anim{
    margin: -7rem auto 0;
    width: 60rem;
  }

  .uservoice__list--wrapper{
    padding: 3rem 0 7.7rem;
  }

  .uservoice__list{
    margin: 0 auto 3.5rem;
    width: 67rem;
  }

  .uservoice__list__movie{
    bottom:8.5rem;
    width: 57rem;
  }

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

  .campaign-info02__image--01{
    margin: 0 auto 4.5rem;
  }

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

  .offer--2nd{
    margin-bottom: 5rem;
  }

  .offer__header-arrow{
    margin: 0 auto 2.5rem;
    width: 43rem;
  }

  .offer__header{
    margin: 0 auto 2rem;
    width: 100%;
  }

  .offer__btn--wrapper{
    margin: 0 auto 6rem;
    /* width: 75rem; */
  }

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

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

  .offer__footnote{
    margin: 0 auto 3rem;
  }

  .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;
  }

}