/* CSS Document */

body {
    width: 100%;
    max-width: 750px;
    margin:  0 auto;
}
img {
    max-width: 100%;
    vertical-align: top;
}

/* fade */
.fade {
  transition: .3s ease-in-out;
}

.fade:hover {
  opacity: .5;
}


/*.more {
  position: relative;
}
.more .btn {
  position: absolute;
  top: 50.773%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 90.133%;
}*/

.ways_head {
  position:  relative;
}
.ways_head .links {
  position:  absolute;
  top: 47.912%;
  padding: 0 6.533% 0 6.133%;
}
.ways_head .links li + li {
  margin-top: 3.33%;
}

footer {
  position: relative;
  padding-bottom: 10.8%;
  background: #d5edff;
  box-sizing: content-box;
}
.f_tel {
  width: 40.8%;
  position: absolute;
  top: 24.629%;
  left: 50%;
  transform: translate(-50%, 0);
}
.gmap {
  width: 84.4%;
  height: 26.676%;
  position: absolute;
  top: 58.716%;
  left: 50%;
  transform: translate(-50%, 0);
}
.gmap iframe {
  width: 100%;
  height: 100%;
}

.fix_btn {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 750px;
  z-index: 999;
  opacity: 0;                /* 最初は隠す */
  pointer-events: none;      /* 非表示時はクリック無効 */
  transition: opacity 0.4s ease;  
}
.fix_btn.show {
  opacity: 1;
  pointer-events: auto;
}

/* 動きありver. */
.kv {
  position: relative;
  overflow: hidden;
}
.kv > img {
  width: 100%;
  height: auto;
  display: block;
}

.kv-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end start;     /* 人物を下寄せ中央に配置。右寄せなら end end に */
}

/* 人物の初期状態（隠しておく） */
.kv-stage img {
  width: 66.133%;     /* 好みでサイズ調整 */
  height: auto;
  transform: translateY(24px); /* 下から */
  opacity: 0;
  filter: blur(8px);
  will-change: transform, opacity, filter;
}

/* アニメ後の状態 */
.kv-stage img.in {
  animation: kvRise 2.5s cubic-bezier(.25,.8,.2,1) forwards;
}

@keyframes kvRise {
  0%   { transform: translateY(40px); opacity: 0; filter: blur(8px); }
  60%  { filter: blur(0); }
  100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}

/* OSの「動きを減らす」に対応 */
@media (prefers-reduced-motion: reduce) {
  .kv-stage img { transform: none; opacity: 1; filter: none; }
  .kv-stage img.in { animation: none; }
}

.more {
  background: url("../images/more_bg.webp") no-repeat top center/auto 100%;
  padding: 11.733% 0 12.667%;
}

/* sub-copyは最初から表示 */
.more .sub-copy {
  opacity: 1;
  color: #FFFFFF;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  line-height: 1.47em;
  letter-spacing: 0.03em;
  text-align: center;
  width: 85.6%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.400vw solid #FFFFFF;
  border-radius: 7.867vw;
  margin: 0 auto 12.5%;
  padding: 0.4em 0 0.5em;
  font-size: 3.979vw;
}
/* 750px 以上は上限 29.84px に固定 */
@media (min-width: 750px) {
  .more .sub-copy { font-size: 29.84px; }
}

/* h2とtxtだけ初期は非表示 */
.more h2,
.more .txt {
  color: #FFFFFF;
  padding-left: 10%;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
}

.more .line,
.counseling .line {
  display: block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
  transition-delay: calc(var(--i, 0) * .25s);
}

.more.is-in .line,
.counseling.is-in .line {
  opacity: 1;
  transform: translateY(0);
}

.more h2 {
  font-size: 8.351vw;
  line-height: 1.73em;
  letter-spacing: 0.01em;
  margin-bottom: 1em;
}
@media (min-width: 750px) {
  .more h2 { font-size: 62.63px; }
}
.more h2 em {
  font-size: 110%;
}
.more .txt {
  font-size: 5.035vw;
  line-height: 2.54em;
  margin-bottom: 7.5%;
}
@media (min-width: 750px) {
  .more .txt { font-size: 37.76px; }
}

.more .btn {
  display: block;
  width: 90.133%;
  margin: 0 auto 10.267%;
}

.more .bleach_shade {
  width: 91.2%;
  margin: 0 auto;
}

/* 初期状態 */
.bleach_shade{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}

/* 画面に入ったらON */
.bleach_shade.in-view{
  opacity: 1;
  transform: none;
}

/* 動きを減らす設定の端末では即表示 */
@media (prefers-reduced-motion: reduce){
  .bleach_shade{ opacity:1; transform:none; transition:none; }
}

.secret {
  background: url("../images/secret_bg.webp")no-repeat top center/cover;
  padding: 9.6% 0 12%;
}

.secret h2 {
  width: 72.667%;
  margin: 0 auto 11.467%;
}

/* 初期状態（フェードアップ前） */
.secret .item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
  transition-delay: var(--d, 0ms); /* JSで遅延を付ける */
  will-change: opacity, transform;
  padding: 0 6.4%;
}

.secret .item.in-view {
  opacity: 1;
  transform: translateY(0);
}

.secret .item + .item {
  margin-top: 13.333%;
}

.case {
  background: url("../images/case_bg.webp")no-repeat top center/cover;
  padding: 12% 0;
}

.case h2 {
  width: 80.267%;
  margin: 0 auto 11.467%;
}

/* 初期状態（フェードアップ前） */
.case .item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
  transition-delay: var(--d, 0ms); /* JSで遅延を付ける */
  will-change: opacity, transform;
  padding: 0 6%;
}

.case .item.in-view {
  opacity: 1;
  transform: translateY(0);
}

.case .item + .item {
  margin-top: 6%;
}

.ways .cont {
  padding: 0 7.2% 11.2%;  
}

#ways1 {
  padding-top: 6.267%;
  background: url("../images/ways_bg01.webp")no-repeat top center/cover;
}
#ways1 h3 {
  width: 81.733%;
  margin: 0 auto 6.933%;
}

#ways2 {
  padding-top: 6.133%;
  background: url("../images/ways_bg02.webp")no-repeat top center/cover;
}
#ways2 h3 {
  width: 77.067%;
  margin: 0 auto 6.667%;
}

#ways3 {
  padding-top: 4%;
  background: url("../images/ways_bg03.webp")no-repeat top center/cover;
}
#ways3 h3 {
  width: 83.333%;
  margin: 0 auto 4.4%;
}

.ways .item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
  transition-delay: var(--d, 0ms); /* JSで遅延を付ける */
  will-change: opacity, transform;
  padding: 0 6%;
}

.ways .item.in-view {
  opacity: 1;
  transform: translateY(0);
}

.counseling {
  position: relative;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400; /* Regular */
}

.counseling div {
  position: absolute;
  top: 40.858%;
  left: 12%;
}

.counseling h2 {
  font-size: 5.833vw;
  line-height: 1em;
  letter-spacing: 0.05em;
  margin-bottom: 2em;
}
@media (min-width: 750px) {
  .counseling h2 { font-size: 43.75px; }
}
.counseling .txt {
  font-size: 3.889vw;
  line-height: 2.14em;
}
@media (min-width: 750px) {
  .counseling .txt { font-size: 29.17px; }
}

/* レール位置とステップ間の長さ */
.flow{
  --rail-x: 13.333vw;
  padding: 13.067% 0 12.8%;
  background: url("../images/flow_bg.webp")no-repeat top center/cover;
}
@media (min-width: 750px){
  .flow{ --rail-x: 100px;}
}

.flow h2 {
  width: 76.533%;
  margin-bottom: 5.467vw;
}
.flow .step{
  width: 93.867%;
}

.flow .step.is-last {
  width: 94.267%;
}
.flow .step + .step{
  margin-top: 9.333%;
}

/* 余白は維持 */
.flow .step{
  position: relative;
  margin-bottom: 0;
  opacity: 1;
  transform: none;
  transition: none;
  z-index: 1;
}

/* 画像はそのまま */
.flow .step img{ display:block; width:100%; height:auto; }

/* 縦線だけアニメ */
.flow .step::after{
  z-index: -1;
  content:"";
  position:absolute;
  left: var(--rail-x, 120px); /* 既存の値を使用 */
  top: 50%;                  /* 中央から下へ伸ばす */
  width: 2px;
  height: 0;                 /* 初期0 */
  background:#2f66c9;
  transform: translateX(-1px);
  transition: height 2s ease;  /* ← 線のみアニメ */
}
.flow .step.in-view::after{
  height: var(--gap, 0px);      /* JSで設定した長さまで伸びる */
}
.flow .step.is-last::after{ display:none; }