@charset "UTF-8";

/* common
--------------------------------------------- */
body {
  font-family: "Noto Sans", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.container {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: #fff;
}
.p-header {
  display: grid;
  grid-template-columns: 8.125rem 15rem;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.625rem;
  position: relative;
}
.p_header_logo {
  width: 130px;
}
.p_header_logo a {
  display: block;
}
.p-header img {
  width: 100%;
  max-width: 100%;
}

.p-header .regis {
  position: absolute;
  right: 0;
  top: 5px;
  width: 160px;
}
.main {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}
.main img {
  width: 100%;
  max-width: 100%;
}

.img_fv {
  margin-top: 75px;
}
.p-box {
  position: relative;
}

.video {
  position: relative;
  padding-top: 44%;
  cursor: pointer;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video_interview {
  padding: 0 40px;
  background: #0f131e;
}
.video_interview iframe {
  width: 670px;
  height: 375px;
}
/* SP / PC only
--------------------------------------------- */
@media only screen and (max-width: 768px) {
  ._pc { display: none !important; }
  .video_interview {
    padding: 0;
  }
  .video_interview iframe {
    width: 100%;
  } 
}

@media only screen and (min-width: 769px) {
  ._sp { display: none !important; }
}


@-webkit-keyframes dokidoki {
  0% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  5% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  95% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(1.05);
  }
}

@keyframes dokidoki {
  0% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  5% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  95% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(1.05);
  }
}

/* Spacing Class */
.mb-75 {
  margin-bottom: calc(75/750*100%) !important;
}

.mt-75 {
  margin-top: calc(75/750*100%) !important;
}

.mb-55 {
  margin-bottom: calc(55/750*100%) !important;
}

.mt-55 {
  margin-top: calc(55/750*100%) !important;
}

.center  {
  text-align: center;
}

.cv-btn {
  width: calc(694/750*100%);
  margin: 0% auto 0 auto;
  -webkit-animation: dokidoki 1.5s infinite;
  animation: dokidoki 1.5s infinite;
}

.btn-price {
  display: flex;
  justify-content: center;
  margin-top: 19px;
  margin-left: 13px;
}

/* change */

.change {
  margin-top: 70px;
}
/*
Step
*/
.step {
  background: #0d131f;
}
.btn-step {
  background: #0f131e;
  text-align: center;
}

.step02 {
  padding-top: 130px;
}

.step02 .btn-step {
  padding-top: 55px;
}
.step03 {
  padding-top: 147px;
}

.btn-step a {
  margin: 0 23px 0 38px;
  box-sizing: border-box;
  display: block;
}

/* voice */
.voice h2 {
  background: #de1213;
  padding-top: 41px;
}

/* Comparing */
.comparing {
  background: #de1213;
}
/* /Comparing */

/* af_change */

.af_change {
  background: #e8e8e8;
  padding-bottom: 60px;
}

.af_change .video {
  background: #e8e8e8;
  margin: 0 40px;
} 
/* /af_change */

/* magazine */
.magazine {
  background: #fff;
}
.magazine .flow {
  margin-top: 50px;
}
.magazine .flow img {
  width: auto;
}
.magazine .eilible {
  margin-top: 70px;
}

/* compare */
.compare {
  background-color: #e8e8e8;
  padding-bottom: 86px;
}

/* why */
.why {
  background-color: #e1e5ee;
  padding-bottom: 48px;
}
.why_colum {
  display: flex;
}

.why_colum .colum02 {
  position: relative;
}

.btn_regis {
  position: absolute;
  top: 55%;
  left: 25px;
  transform: translateY(-51%);
}

/* qa
--------------------------------------------- */
.qa_inner {
  padding: 0 40px 80px;
  background-color: #0f131e;
}

.qa_list dt {
  position: relative;
  cursor: pointer;
}

.qa_list dt::after {
  content: "";
  position: absolute;
  top: 41%;
  right: 4.7%;
  width: 20px;
  padding-top: 3%;
  background: url(../img/qa_icn_arrow.png) no-repeat;
  background-size: 100%;
}

.qa_list dt.is-active::after {
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1);
}

.qa_list dt:not(:first-child) {
  margin-top: 35px;
}

.qa_list dd {
  display: none;
}
.qa_list img {
  width: 100%;
  max-width: 100%;
}

.qa_inner .btn_qa {
  margin-top: 86px;
  margin-left: -13px;
}
.qa_inner .btn_qa a {
  display: block;
}



/* footer
--------------------------------------------- */

.footer {
  background: #f03038;
}

.footer .footerInner {
  margin: 0 auto;
  padding: 6.4% 0;
}

.footer .footerList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 4%;
}

.footer .footerItem {
  position: relative;
  margin: 0 8px;
  color: #fff;
  font-size: clamp(10px, calc((16 / 750) * 100vw), 16px);
  line-height: 1;
}

.footer .footerItem:not(:last-child)::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: -8px;
  width: 1px;
  height: 100%;
  background: #fff;
}

.footer .footerCopy {
  color: #fff;
  font-size: clamp(10px, calc((16 / 750) * 100vw), 16px);
  line-height: 1;
  text-align: center;
}

@media (min-width: 750px) {
  .footer .footerInner {
    padding: 50px 0;
  }

  .footer .footerList {
    margin-bottom: 25px;
  }
}

/* utility
--------------------------------------------- */
.mt3 {
  margin-top: 3% !important;
}
.mt6 {
  margin-top: 6% !important;
}

.mt8 {
  margin-top: 8% !important;
}

.mt15 {
  margin-top: 15% !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mb5 {
  margin-bottom: 5% !important;
}

.mb8 {
  margin-bottom: 8% !important;
}

.mb10 {
  margin-bottom: 10% !important;
}

/* 注釈 */
.note-r {
  margin: 0 5% 8% 0;
  font-size: clamp(10px, calc((16 / 750) * 100vw), 16px);
  text-align: right;
}