@charset "UTF-8";
/* ==========================================================================
   ご利用について（howtouse.html）専用スタイル
   ・style.css の後に読み込みます
   ========================================================================== */

/* 見出し「HOW TO USE」用のフォント（元サイトにアップロードされている 07ラノベPOP） */
@font-face {
  font-family: "LightNovelPOP";
  src: url("../assets/fonts/lightnovelpop.woff2") format("woff2");
  font-display: swap;
}

/* --------------------------------------------------------------------------
   ページタイトル（動く背景の帯）
   -------------------------------------------------------------------------- */
.pg-title { position: relative; height: 338px; overflow: hidden; background: #fff; }
.pg-title__bg { position: absolute; inset: 0; }
.pg-title__sub {
  position: absolute; left: 0; right: 0; top: 116px;
  font-size: 16px; line-height: 16px; letter-spacing: .4em; font-weight: 400;
  color: var(--c-text2); text-align: center;
}
.pg-title__main {
  position: absolute; left: 0; right: 0; top: 133px;
  font-family: "LightNovelPOP", var(--font);
  font-size: 50px; line-height: 70px; color: var(--c-title); text-align: center;
}

/* --------------------------------------------------------------------------
   ご利用までの流れ
   -------------------------------------------------------------------------- */
.flow { background: #fff; }
.flow__inner { position: relative; width: 980px; height: 1851px; margin: 0 auto; }
.flow__inner > * { position: absolute; }

.flow__icon { left: 458px; top: 74px; width: 64px; height: 44px; }
.flow__title {
  left: 0; right: 0; top: 158px;
  font-size: 30px; line-height: 42px; font-weight: 700; color: var(--c-title); text-align: center;
}
.flow__lead {
  left: 0; right: 0; top: 237px;
  font-size: 16px; line-height: 22.4px; letter-spacing: .05em; color: var(--c-text2); text-align: center;
}

/* 縦線・丸・点線 */
.flow__line { left: 489px; top: 312px; width: 3px; height: 1404px; background: #323232; }
.flow__dot {
  left: 481px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 5px solid #323232;
}
.flow__dot--top { top: 303px; }
.flow__dot--bottom { top: 1735px; }
.flow__dash { width: 75px; height: 5px; border-top: 3px dashed #323232; }
.flow__dash--l { left: 415px; }
.flow__dash--r { left: 492px; }
.flow__dash--1 { top: 523px; }
.flow__dash--2 { top: 710px; }
.flow__dash--3 { top: 887px; }
.flow__dash--4 { top: 1099px; }
.flow__dash--5 { top: 1311px; }
.flow__dash--6 { top: 1491px; }

/* 番号の丸 */
.flow__num {
  left: 461px; width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border: 5px solid #323232; border-radius: 100px; background: #fff;
  font-size: 23px; font-weight: 700; color: #323232; cursor: pointer;
  --mw: 60px;
}
.flow__num--1 { top: 495px; }
.flow__num--2 { top: 683px; }
.flow__num--3 { top: 859px; }
.flow__num--4 { top: 1072px; }
.flow__num--5 { top: 1283px; }
.flow__num--6 { top: 1464px; }

/* カード */
.fcard {
  width: 413px; background: #fff; border-radius: 10px;
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, .6);
  color: var(--c-text2);
}
.fcard > * { position: absolute; }
.fcard__head { left: 0; top: 0; width: 100%; height: 59px; background: var(--c-title); border-radius: 10px 10px 0 0; }
.fcard__title {
  left: 70px; top: 13px; width: 277px;
  font-size: 24px; line-height: 33.6px; font-weight: 700; letter-spacing: 7.2px;
  color: #fff; text-align: center; white-space: nowrap;
}
.fcard__text { font-size: 14px; line-height: 22.4px; letter-spacing: .05em; text-align: center; }
.fcard__text p { min-height: 22.4px; }
.c-navy { color: #324158; }
.c-dark { color: #323232; }
.c-gray { color: #353535; }
.fcard__link { color: var(--c-title); }
.fcard__tel {
  left: 2px; top: 159px; width: 404px;
  font-size: 32px; line-height: 44.8px; font-weight: 700; color: #ff4f4f; text-align: center;
}
.fcard__hours {
  left: 0; top: 242px; width: 413px;
  font-size: 20px; line-height: 28px; letter-spacing: .05em; color: #324158; text-align: center;
}

.fcard--1, .fcard--3, .fcard--5 { left: 1px; }
.fcard--2, .fcard--4, .fcard--6 { left: 567px; }
.fcard--1 { top: 380px;  height: 293px; }
.fcard--2 { top: 567px;  height: 287px; }
.fcard--3 { top: 744px;  height: 288px; }
.fcard--4 { top: 921px;  height: 357px; }
.fcard--5 { top: 1168px; height: 288px; }
.fcard--6 { top: 1348px; height: 269px; }
.fcard--1 .fcard__title, .fcard--3 .fcard__title { top: 12px; }
.fcard--4 .fcard__title { left: 47px; width: 320px; }
.fcard--1 .fcard__text { left: 20px; top: 86px; width: 372px; }
.fcard--2 .fcard__text { left: 35px; top: 96px; width: 346px; }
.fcard--3 .fcard__text { left: 18px; top: 83px; width: 372px; }
.fcard--4 .fcard__text { left: 22px; top: 85px; width: 372px; }
.fcard--5 .fcard__text { left: 22px; top: 94px; width: 372px; }
.fcard--6 .fcard__text { left: 26px; top: 84px; width: 364px; }

/* --------------------------------------------------------------------------
   関連ページへのリンク（4つの丸い画像）
   -------------------------------------------------------------------------- */
.hlinks { display: flex; }
.hlinks__col { flex: 1 1 0; min-width: 245px; height: 326px; padding-top: 44px; background: rgba(255, 255, 255, .8); }
.hlinks__img { display: block; width: 225px; height: 225px; margin: 0 auto; border-radius: 50%; overflow: hidden; }
.hlinks__img img { width: 100%; height: 100%; object-fit: cover; }
.hlinks__label {
  width: 214px; margin: 21px auto 0;
  font-size: 25px; line-height: 35px; font-weight: 700; color: var(--c-title); text-align: center;
}

/* --------------------------------------------------------------------------
   このページで使うアニメーション
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* ふわっと表示（Fade In） */
  .a-fadein { animation: 1200ms cubic-bezier(.445, .05, .55, .95) var(--d, 1ms) 1 normal backwards m-fadeIn; }
  /* 線が伸びる（Reveal：--clip で伸びる向きを指定） */
  .a-clip { animation: var(--dur, 1200ms) cubic-bezier(.645, .045, .355, 1) var(--d, 1ms) 1 normal backwards hw-clipIn; }
  /* くるっと回って現れる（Curve In） */
  .a-curve { animation: 1200ms cubic-bezier(.25, .46, .45, .94) var(--d, 1ms) 1 normal backwards hw-curveIn; }
}
@keyframes hw-clipIn {
  0% { opacity: 0; animation-timing-function: step-end; }
  0.0001% { opacity: 1; clip-path: var(--clip); }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}
@keyframes hw-curveIn {
  0% { opacity: 0; animation-timing-function: step-end; }
  0.0001% { opacity: 0; transform: perspective(200px) translateZ(calc(var(--mw, 60px) * -3)) rotateY(var(--ry, 180deg)) translateZ(calc(var(--mw, 60px) * 3)); }
  100% { opacity: 1; transform: perspective(200px) translateZ(calc(var(--mw, 60px) * -3)) rotateY(0deg) translateZ(calc(var(--mw, 60px) * 3)); }
}

/* ==========================================================================
   スマホ（750px以下）
   ========================================================================== */
@media (max-width: 750px) {
  .pg-title { height: 156px; }
  .pg-title__sub { left: 20px; right: 20px; top: 53px; font-size: 12px; line-height: 12px; }
  .pg-title__main { left: 20px; right: 20px; top: 66px; font-size: 25px; line-height: 35px; }

  .flow__inner { width: auto; height: 2117px; }
  .flow__icon { left: calc(50% - 25px); top: 30px; width: 50px; height: 35px; }
  .flow__title { left: 20px; right: 20px; top: 75px; font-size: 20px; line-height: 28px; }
  .flow__lead { left: 24px; right: 25px; top: 114px; font-size: 12px; line-height: 16.8px; }

  .flow__line { left: calc(50% - 2px); top: 184px; height: 1892px; }
  .flow__dot { left: calc(50% - 10px); }
  .flow__dot--top { top: 170px; }
  .flow__dot--bottom { top: 2076px; left: calc(50% - 11px); }
  .flow__dash { display: none; }

  .flow__num { left: calc(50% - 26px); width: 50px; height: 35px; font-size: 14px; --mw: 50px; }
  .flow__num--1 { top: 226px; }
  .flow__num--2 { top: 490px; }
  .flow__num--3 { top: 779px; }
  .flow__num--4 { top: 1083px; }
  .flow__num--5 { top: 1450px; }
  .flow__num--6 { top: 1776px; left: calc(50% - 25px); }

  .fcard, .fcard--1, .fcard--2, .fcard--3, .fcard--4, .fcard--5, .fcard--6 { left: 20px; right: 21px; width: auto; }
  .fcard--1 { top: 279px;  height: 191px; }
  .fcard--2 { top: 545px;  height: 214px; }
  .fcard--3 { top: 834px;  height: 229px; }
  .fcard--4 { top: 1138px; height: 292px; }
  .fcard--5 { top: 1505px; height: 251px; }
  .fcard--6 { top: 1836px; height: 220px; }
  .fcard__head { height: 46px; }
  .fcard--6 .fcard__head { height: 50px; }
  .fcard__title,
  .fcard--1 .fcard__title, .fcard--3 .fcard__title, .fcard--4 .fcard__title {
    left: 22px; right: 17px; width: auto; top: 11px;
    font-size: 18px; line-height: 25.2px; letter-spacing: 5.6px;
  }
  .fcard--5 .fcard__title { top: 10px; }
  .fcard--6 .fcard__title { left: 21px; right: 18px; font-size: 20px; line-height: 28px; letter-spacing: 6px; }
  /* 行の間隔は元サイトの実測値（1 行 18.5px） */
  .fcard__text { font-size: 11px; line-height: 18.5px; }
  .fcard__text p { min-height: 18.5px; }
  .fcard--1 .fcard__text { left: 10px; right: 9px;  top: 64px; width: auto; }
  .fcard--2 .fcard__text { left: 13px; right: 11px; top: 64px; width: auto; }
  .fcard--3 .fcard__text { left: 9px;  right: 10px; top: 65px; width: auto; }
  .fcard--4 .fcard__text { left: 10px; right: 9px;  top: 64px; width: auto; }
  .fcard--5 .fcard__text { left: 12px; right: 12px; top: 64px; width: auto; }
  .fcard--6 .fcard__text { left: 9px;  right: 10px; top: 68px; width: auto; }
  .fcard__tel { left: 9px; right: 10px; width: auto; top: 106px; font-size: 23px; line-height: 32.2px; }
  .fcard__hours { left: 9px; right: 10px; width: auto; top: 144px; font-size: 14px; line-height: 19.6px; }

  .hlinks {
    display: grid; grid-template-columns: repeat(2, 145px); justify-content: center;
    background: rgba(255, 255, 255, .8);
  }
  .hlinks__col { min-width: 0; height: 196px; padding-top: 20px; background: none; }
  .hlinks__col:nth-child(n+3) { height: 202px; padding-top: 16px; }
  .hlinks__img { width: 133px; height: 133px; }
  .hlinks__label { width: auto; margin: 0; padding-top: 1px; font-size: 16px; line-height: 22.4px; }
}