/* =========================
   ファーストビュー
   ========================= */
.firstview{
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #fff7f9;
}

/* ① テキスト：中央に出現 → 上へスライド */
.fv-text{
  position:absolute;
  top:30%;                      /* 初期位置（画面高さの40%） */
  left:50%;
  transform: translateX(-50%);  /* 横中央のみ調整 */
  opacity:0;
  transition: top 1200ms ease, opacity 1200ms ease;
  text-align:center;
  z-index:1;
}
.fv-text.show{
  opacity:1;
}
.fv-text.shift {
  top: 10vh !important;  /* ← 強制的に効かせる */
}

.fv-text h1 {
  font-family: "Tsukushi A Round Gothic", sans-serif; 
}

.fv-text p {
  font-family: "Tsukushi A Round Gothic", sans-serif;
}

/* メインタイトル */
.fv-text h1 {
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 700;
  line-height: 1.05;  /* 行内の行間も極限まで詰める */
  margin: 0;
  color: #da699c;         
  white-space: nowrap;
}

.title-span{
   color: transparent;
   display: block;
   overflow: hidden;
   position: relative;
   transition: color 0.5ms 1s;
   width: max-content;
}
.title-span::after{
  content: "";
  left: 0;
  display: block;
  position: absolute;
  top: 0;
  transform: translateX(-100%);
  width: 100%;
  height: 100%;
  background-color: #da699c;
}
.title-span.active{
  color: #da699c;
}
.title-span.active::after{
  animation: lineAnime 1.8s;
}
@keyframes lineAnime {
  0% {
    transform: translateX(-100%)
  }
  50% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(100%)
  }
}

.fv-text h1,
.fv-text p {
  margin: 0 !important;    /* 強制的に上下の余白を消す */
  padding: 0 !important;   /* 念のためパディングも削除 */
}

/* サブタイトル */
.fv-text p {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 550;
  line-height: 1.1;
  margin: 0;
  color: #555;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 1s ease forwards; /* 同じ動き */
  animation-delay: 1.5s;              /* h1より遅く */
}

/* 共通アニメーション */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 端末別に微調整 */
@media (max-width: 767px){
  .fv-text.shift{ top: 8vh; } /* スマホ時はやや下げる */
}
@media (min-width: 1920px){
  .fv-text.shift{ top: 6vh; } /* 大画面は少し下げる */
}

/* ③ 画像：下で出現（その場フェードでもOKに） */
.fv-image{
  position: absolute;
  left: 50%;
  top: 30%;
  bottom: 0%;
  transform: translateX(-50%) scale(0.98);
  opacity: 0;
  transition: opacity 1.6s ease, bottom 1.6s ease, transform 1.6s ease;
  z-index: 2;
}
.fv-image.show{
  bottom: -20%;                       /* 画像の最終位置（余白の微調整） */
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.fv-image img{
  display: block;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: cover;
  border-radius: 70px;
}

/* フルスクリーン時 */
.fv-image.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;

  transform: none !important; /* ← これでずれを防止 */
}
.fv-image.fullscreen img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  border-radius: 70px;
}

.fv-image {
  position: absolute;
  left: 50%;
  top: 30%;
  bottom: 0%;
  transform: translateX(-50%) scale(0.98);
  opacity: 0;  /* ← show がつくまでは非表示 */
  transition: opacity 1.6s ease, bottom 1.6s ease, transform 1.6s ease;
  z-index: 2;
}

.fv-image.show {
  bottom: -20%;
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.fv-image img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 100vw;
  max-height: 100vh;
  object-fit: cover;
  border-radius: 70px;
  opacity: 0;
  transition: opacity 1.6s ease; /* フェード時間 */
}

.fv-image img.active {
  opacity: 1;
  z-index: 1;
}

/* スマホ専用調整 */
@media (max-width: 767px) {
  .fv-text h1 {
    font-size: 2.3rem;       /* スマホ用に固定（必要なら2.2remなど調整可） */
    line-height: 1.3;
    white-space: normal;   /* 改行を許可 */
    word-break: keep-all;
    text-align: center;
  }

  .fv-text p {
    font-size: 1.6rem;     /* サブタイトルを少し小さめに */
    line-height: 1.5;
    white-space: normal;
    text-align: center;
  }
}

/* デフォルトは改行を消す */
.sp-br {
  display: none;
}

/* スマホだけ改行を有効化 */
@media (max-width: 767px) {
  .sp-br {
    display: inline;
  }
}

/* タブレット専用調整 */
@media (min-width: 768px) and (max-width: 1180px) {
  .fv-text h1 {
    font-size: 4.5rem;       /* スマホより大きく、PCより小さめ */
    line-height: 1.3;
    white-space: normal;   /* 自然に改行 */
    word-break: keep-all;
    text-align: center;
  }

  .fv-text p {
    font-size: 3.0rem;     /* サブタイトルも少し大きめ */
    line-height: 1.5;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .firstview-sp {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff7f9;
    overflow: hidden;
    position: relative;
  }

  /* タイトル（縦積みレイアウトに変更） */
  .fv-text-sp {
    position: relative;          /* ← absoluteをやめる */
    margin-top: 30vh;            /* ← 出現位置を画面の下の方に */
    opacity: 0;
    transition: margin-top 1.2s ease, opacity 1.2s ease;
    text-align: center;
    z-index: 5;
  }
  .fv-text-sp.show {
    opacity: 1;
  }
  .fv-text-sp.shift {
    margin-top: 8vh;             /* ← 上に引き上げ */
  }

  .fv-text-sp h1 {
    font-size: 3.9rem;
    line-height: 1.5;
    color: #da699c;
    font-family: "Tsukushi A Round Gothic", sans-serif;
    text-align: center;   /* ← 左寄せではなく中央寄せ */
    margin: 0 auto;
    margin-bottom: 0rem;
    white-space: normal;
  }



@media (max-width: 767px) {
  .fv-subtitle-sp {
    margin-top: 0 !important;      /* ← 強制リセット */
    margin-bottom: 0 !important;   /* ← 下も消す */
    padding: 0 !important;         /* ← 内側余白も消す */
    font-size: 1.3rem;       /* 小さめに */
    font-weight: 400;
    line-height: 1.6;
    color: #555;             /* グレーで控えめに */
    text-align: center;      /* タイトルと同じ中央寄せ */
    font-family: "Tsukushi A Round Gothic", sans-serif;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeUp 1s ease forwards;
    animation-delay: 2s;   /* ← タイトルより少し遅れて出現 */
  }
}





  /* 画像（下に配置される） */
  .fv-image-sp {
    position: relative;
    width: 92vw;
    margin: 4vh auto 0;          /* ← テキストと間隔を作る */
    aspect-ratio: 3 / 4;
    border-radius: 28px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.6s ease;
  }
  .fv-image-sp.show {
    opacity: 1;
  }

  .fv-image-sp img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
  }
  .fv-image-sp img.active {
    opacity: 1;
  }
}

  /* 帯アニメーション付きタイトル */
  .title-span-sp {
    color: transparent;
    display: inline-block;
    position: relative;
    overflow: hidden;
    transition: color 0.5ms 1s;
  }
  .title-span-sp::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #da699c;
    transform: translateX(-100%);
  }
  .title-span-sp.active {
    color: #da699c;
  }
  .title-span-sp.active::after {
    animation: lineAnimeSp 1.8s forwards;
  }

  @keyframes lineAnimeSp {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(0); }
    100% { transform: translateX(100%); }
  }
}