/*
** import core file
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700;900&display=swap');
/*==================================================

** common
==================================================*/
.main .ctasec {
  background: #f23573;
  padding: 66px 0 66px;
}
.main .ctasec .cta-wrap {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}
.main .ctasec .cta-ttl {
  width: 27.3%;
  margin: 0 auto;
}
.main .ctasec .cta-notes {
  margin: 24px auto 0;
}
.main .ctasec .cta-flow {
  padding: 0 2.2% 0 2.2%;
  margin: 65px 0 0;
}
.main .ctasec .steplist {
  justify-content: space-between;
}
.main .ctasec .steplist > li {
  width: 22.0718%;
  position: relative;
}
.main .ctasec .steplist > li:nth-child(1) {
  width: 22.9%;
}
.main .ctasec .steplist > li:nth-child(2) {
  width: 22.15%;
}
.main .ctasec .steplist > li:nth-of-type(1):after, .main .ctasec .steplist > li:nth-of-type(2):after, .main .ctasec .steplist > li:nth-of-type(3):after {
  content: '';
  display: block;
  width: 8%;
  height: 6.3%;
  background: url("../images/ico_tri_wt_r.svg") no-repeat center center/contain;
  position: absolute;
  right: -12%;
  bottom: 32%;
}
.main .ctasec .btnlist {
  justify-content: space-between;
  margin: 60px 150px 0;
}
.main .ctasec .btnlist li {}
.main .ctasec .btnlist a {
  display: block;
}
.main .moviesec {
  margin: 32px auto 0;
  padding: 0 20px;
  max-width: 1694px;
}
.main .moviesec .moviebox {
  position: relative;
  padding-top: 53.3%;
}
.main .moviesec .moviebox iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 767px) {
  .main .ctasec {
    padding: 32px 0;
  }
  .main .ctasec .cta-wrap {
    max-width: 100%;
    padding: 0;
  }
  .main .ctasec .cta-ttl {
    width: 55.2%;
  }
  .main .ctasec .cta-notes {
    width: 90.6%;
    margin: 20px auto 0;
  }
  .main .ctasec .cta-flow {
    padding: 0;
    margin: 0;
  }
  .main .ctasec .steplist {
    justify-content: space-between;
    margin: 0 5%;
  }
  .main .ctasec .steplist > li {
    width: 46.897% !important;
    margin: 30px 0 0;
  }
  .main .ctasec .steplist > li:after {
    content: none !important;
  }
  .main .ctasec .steplist .btns {
    margin-left: 0;
    padding: 0 5.3% 0 1.3%;
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  .main .ctasec .btnlist {
    margin: 30px 5% 0;
    display: block;
  }
  .main .ctasec .btnlist li {
    width: 100%;
  }
  .main .ctasec .btnlist li + li {
    margin-top: 17px;
  }
  .main .moviesec {
    margin: 30px 0 0;
    padding: 0;
    max-width: 100%;
  }
}
/*==================================================

** index
==================================================*/
#mainvisual {
  position: relative;
}
#mainvisual .logo {
  position: absolute;
  right: 72px;
  top: 30px;
  width: 39.5%;
  z-index: 1;
}
#mainvisual .mv-catch {
  position: absolute;
  right: 47px;
  top: 153px;
  width: 45.2%;
  z-index: 1;
}
#mainvisual .mv-bg img {
  width: 100%;
}
#mainvisual .mv-beat {
  position: absolute;
  left: 35px;
  bottom: 34px;
  width: 68.7%;
  z-index: 1;
}
#trouble {
  text-align: center;
  margin: 40px auto 0;
}
#trouble img {
  width: 100%;
}
#feature-pc {
  background: #f2f2f2;
  padding: 90px 0;
}
#feature-pc .featurewrap {
  max-width: 1800px;
  padding: 0 20px;
  margin: 0 auto;
}
#feature-pc h2 {
  width: 49.4%;
  max-width: 890px;
  margin: 0 auto;
}
#feature-pc .featurelist {
  margin: 50px auto 0;
  max-width: 1600px;
}
#feature-sp {
  display: none;
}
#appeal-pc {
  padding: 95px 20px 112px;
}
#appeal-pc h2 {
  max-width: 1153px;
  width: 64%;
  margin: 0 auto;
}
#appeal-pc .appeallist {
  margin: 20px auto 0;
  max-width: 1260px;
}
#appeal-pc .appeallist li {
  margin: 20px 0 0;
  width: 23.65%;
}
#appeal-pc .appeallist img {
  width: 100%;
}
#appeal-pc .catch {
  max-width: 1547px;
  width: 87.8%;
  margin: 30px auto 0;
}
#appeal-sp {
  display: none;
}
#recommend {
  display: none;
}
#btmCta {
  padding-bottom: 53px;
}
#btmCta .cta-btmnotes {
  margin: 30px 0 0;
  padding: 0 3.8%;
  max-width: 1088px;
  width: 65.5%;
}
@media screen and (max-width: 960px) and (min-width: 768px) {
  #mainvisual {
    position: relative;
  }
  #mainvisual .logo {
    position: absolute;
    right: 8%;
    top: 3.3vw;
    width: 39.5%;
    z-index: 1;
  }
  #mainvisual .mv-catch {
    position: absolute;
    right: 5.1%;
    top: 16.1vw;
    width: 45.2%;
    z-index: 1;
  }
  #mainvisual .mv-bg img {
    width: 100%;
  }
  #mainvisual .mv-beat {
    position: absolute;
    left: 3.8%;
    bottom: 3.7vw;
    width: 68.7%;
    z-index: 1;
  }
  #appeal-pc .appeallist li {
    width: 23.5%;
  }
}
@media screen and (max-width: 767px) {
  #mainvisual .logo {
    position: static;
    width: 84%;
    padding: 10px 0 18px;
    margin: auto;
  }
  #mainvisual .mv-catch {
    position: static;
    right: 0;
    top: 0;
    width: 100%;
  }
  #mainvisual .mv-catch h1 {
    bottom: 0;
  }
  #mainvisual .mv-bg {
    margin: 28px 0 0;
  }
  #mainvisual .mv-beat {
    position: static;
    width: 93.6%;
    margin: 30px auto 0;
  }
  #trouble {
    margin: 0;
  }
  #feature-pc {
    display: none;
  }
  #feature-sp {
    display: block;
    background: #f2f2f2;
    padding: 25px 0;
  }
  #feature-sp .featurewrap {
    padding: 0 2.6%;
  }
  #feature-sp h2 {
    width: 98.5%;
    margin: 0 auto;
  }
  #feature-sp .featurelist {
    margin: 30px 0 0;
  }
  #feature-sp .featurelist img {
    width: 100%;
  }
  #appeal-pc {
    display: none;
  }
  #appeal-sp {
    display: block;
  }
  #appeal-sp img {
    width: 100%;
  }
  #recommend {
    display: block;
    margin: 35px 0 0;
  }
  #recommend h2 {
    max-width: 556px;
    width: 74.1%;
    margin: 0 auto;
  }
  #recommend .pht {
    margin: 0;
  }
  #recommend .pht img {
    width: 100%;
  }
  #start {
    padding: 32px 0 50px;
  }
  #start .txt {
    width: 85.7%;
    margin: 0 auto;
  }
  #btmCta {
    padding: 32px 0 40px;
  }
  #btmCta .cta-btmnotes {
    padding: 0;
    margin: 35px auto 0;
    width: 90.6%;
  }
}



/*追記20240206*/
.tab{
  border-bottom: 5px solid #f23573;
  padding: 0 10px;
}
.tab li{
  margin-bottom: -5px;
  margin-right: 10px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  cursor: pointer;
}
.tab-btn{
  background-color: #f23573;
  border-top: 5px solid #f23573;
  border-left: 5px solid #f23573;
  border-right: 5px solid #f23573;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: block;
  color: #FFF;
  padding:10px 20px;
  box-sizing: border-box;
}
/*liにactiveクラスがついた時の形状*/
.tab-btn.show,
.tab-btn:hover{
  background:#FFF;
  color: #f23573;
  text-decoration: none;
  opacity: 1;
}
.tab-contents{
  padding-bottom: 30px;
  display: none;
  opacity: 0;
}
.tab-contents.show {
    display: block;
    animation-name: displayAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.btn-area{
  display: flex;
  justify-content: center;
}
.btn-area a{
  margin: 0 !important;
  max-width: none;
}
@keyframes displayAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.cta1{
  background-color: #FFF;
}
.cta2{
  background-color: #f23573;
}
.cta1 a,
.cta2 a{
  display: block;
}
.cta1 a img,
.cta2 a img{
  height: auto;
  width: 100%;
}
@media print, screen and (min-width:768px) {
  #topCta__type2{
    margin-top: 60px;
  }
  #btmCta__type2{
    padding-bottom: 60px;
  }
  .tab{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .tab li{
    font-size:min(1.46vw,14px);
  }
  .cta1 a,
  .cta2 a{
    margin: 30px auto 30px;
    max-width: 360px;
    width: 50%;
  }
  
  .btn-area {
    margin-top: 35px;
  }
  .btn-area > a{
    width: 256px;
  }
  .btn-area a:nth-child(2){
    margin-left: 25px !important;
  }
}
@media screen and (max-width: 767px) {
  #topCta__type2{
    margin-top: 30px;
  }
  .tab{
    display: flex;
    margin-bottom: 10px;
  }
  .tab li{
    font-size:min(3.73vw,14px);
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 33.33%;
  }
  .tab-btn{
    padding: 5px 5px;
  }
  .cta1{
    padding-top: 30px;
  }
  .cta1 a,
  .cta2 a{
    margin: 30px auto 30px;
    width: 72%;
  }
  
  .btn-area {
    margin-top: 35px;
    padding: 0 30px;
  }
  .btn-area > a{
    width: 46.5%;
  }
  .btn-area a:nth-child(2){
    margin-left: 7% !important;
  }
}