@charset "utf-8";
/*reset.css*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
}
html {
  overflow: inherit;
  height: 100%;


}

body {
    background: #e1e1e1;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
    font-size: 62.5%;
    line-height: 1.6;
    letter-spacing: 0;
    -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6, p, td, th, address {
  font-weight: normal;
  font-size: 1.2em;
}
ol, ul {
  list-style: none;
}
img {
    width: 100%;
    height: auto;
    max-width: 500px;
    vertical-align: bottom;
}
/*------------------------------------------*/
.wrapper {
    background-color: #fff;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    box-shadow: 0px 5px 5px 4px #e4e3e3;
}
.interview-movie{
    position: relative;
}
.interview-movie_youtube{
    top: 0;
    left: 0;
    position: absolute;
    width: 98%;
    height: auto;
    aspect-ratio: 16 / 9;
}
.interview-movie_youtube iframe {
    width: 100%;
    height: 100%;
}
.price{
    margin-bottom: 4%;
}

.cv-limited{
  position:relative;
}

.cv-limited .cv-limited_btn{
  position:absolute;
  left:51%;
  transform: translateX(-50%);
  top:83.5%;
  width:85.7%;
}

.cv-tel{
  position:relative;
}

.cv-tel .cv-tel_btn{
  position:absolute;
  left:51%;
  transform: translateX(-50%);
  top:71%;
  width:85.7%;
}

.cv-single{
  position:relative;
}

.cv-single .cv-single_btn{
  position:absolute;
  left:51%;
  transform: translateX(-50%);
  top:56%;
  width:85.7%;
}

.repay{
  position:relative;
}

.repay .repay_btn{
  position:absolute;
  left:51%;
  transform: translateX(-50%);
  top:83.5%;
  width:85.7%;
}

.guide{
    background-image: url("../img/bg_guide.jpg");
    background-position: top center;
    background-repeat: repeat-y;
    background-size: 100%;
}
.guide-link{
    position: relative;
}
.guide-link_repay{
    position: absolute;
    top: 91.3%;
    right: 24%;
    display: block;
    width: 12%;
    height: 34px;
}
@media screen and (max-width: 480px) {
    .guide-link_repay{
        height: 20px;
    }
}

/* ========
 * Animation
 */

.move {
  animation: beat linear 1.2s infinite;
 
}

@keyframes beat {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.035);
  }
  25% {
    transform: scale(.95);
  }
  35% {
    transform: scale(1.02);
  }
  40% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shake-opacity {
  10% {
    transform: translate(-4px, -1px) rotate(0.5deg);
    opacity: 0.08; }
  20% {
    transform: translate(3px, 3px) rotate(2.5deg);
    opacity: 0.13; }
  30% {
    transform: translate(5px, 1px) rotate(1.5deg);
    opacity: 0.07; }
  40% {
    transform: translate(-2px, 0px) rotate(0.5deg);
    opacity: 0.17; }
  50% {
    transform: translate(0px, 4px) rotate(-1.5deg);
    opacity: 0.43; }
  60% {
    transform: translate(1px, 1px) rotate(1.5deg);
    opacity: 0.02; }
  70% {
    transform: translate(3px, 2px) rotate(2.5deg);
    opacity: 0.06; }
  80% {
    transform: translate(-4px, 4px) rotate(2.5deg);
    opacity: 0.94; }
  90% {
    transform: translate(3px, -4px) rotate(-0.5deg);
    opacity: 0.8; }
  0%, 100% {
    transform: translate(0, 0) rotate(0); } }



/* floating-banner --------------------------------------------------------------------- */


.floating-banner {
    position: fixed;/* 追従 */
    z-index: 99999;/* 他の要素の下に隠れないように */
    bottom: 0;/* バナーの上下の位置 */
    left: 50%; /* 左端を中央に寄せるために左側の位置を50%に指定 */
    transform: translateX(-50%); /* 中央寄せを実現するために左端の50%を左に移動 */
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.floating-banner:hover {
    opacity: .9;/* ホバーで少し透過 */
}
.sp {
    display: none;/* PCではスマホ用のバナーは非表示に */

}
@media screen and (max-width: 990px) {/* タブレット用のブレイクポイントを指定 */
    .pc {
        display: none;/* タブレットサイズ以下でPC用のバナーを非表示に */
    }
}
@media screen and (max-width: 560px) {/* スマホ用のブレイクポイントを指定 */
    .sp {
        display: inline-block;/* 消していたスマホ用のバナーを表示させる */

    }
}