/* ===== ファーストビュー（参考：写真3枚が横に送られる。PC は 540px の高さ、右上に縦書きの文と丸い札） ===== */
.fv { position: relative; width: 100%; }
.fv__slider { position: relative; width: 100%; height: 50vh; overflow: hidden; }
.fv__track { display: flex; height: 100%; will-change: transform; }
.fv__slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; }
.fv__slide img { width: 100%; height: 100%; object-fit: cover; }
.fv__slide:nth-child(1) img { object-position: 60% 40%; }
.fv__slide:nth-child(2) img { object-position: 50% 50%; }
.fv__slide:nth-child(3) img { object-position: 50% 0%; }
/* 写真の右下の筆記体の屋号（参考の右下の白い筆記体） */
.fv__wm { position: absolute; right: 0; bottom: -18px; display: none; font-family: var(--f-script); font-size: 15rem; line-height: 1; color: rgba(255, 255, 255, .85); letter-spacing: 0; pointer-events: none; }

.fv__logo-sp { position: relative; z-index: 2; margin: 20px auto 26px; text-align: center; }
.fv__catch { font-size: 1.4rem; line-height: 3.6rem; letter-spacing: .34rem; color: var(--ink); text-align: center; }
.fv__circle { display: none; }

@media (max-width: 767px) {
  .fv { min-height: calc(100svh - 31px); padding-bottom: 80px; }
}

@media (min-width: 768px) {
  .fv { height: 540px; overflow: hidden; }
  .fv__slider { height: 540px; }
  .fv__wm { display: block; right: 24px; bottom: -10px; font-size: 13rem; }
  .fv__logo-sp { display: none; }
  /* 縦書きの文（参考：top 110px・right 190px） */
  .fv__catch { position: absolute; top: 110px; right: 190px; z-index: 2; writing-mode: vertical-rl; text-align: left; color: var(--ink-head); text-shadow: 0 0 10px rgba(255, 255, 255, .95), 0 0 2px rgba(255, 255, 255, .9); }
  /* 丸い札（参考：130px の円。乗ると円が少し大きく・薄くなる） */
  .fv__circle { position: absolute; top: 90px; right: 15px; z-index: 3; display: block; width: 130px; height: 130px; padding-top: 14px; font-size: 1.6rem; line-height: 2.4rem; font-weight: 700; color: #fff; text-align: center; letter-spacing: .1rem; }
  .fv__circle::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--rose); transition: .4s ease-in-out; }
  .fv__circle::after { content: ""; display: block; width: 6px; height: 6px; margin: 4px auto 0; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); }
  .fv__circle:hover::before { opacity: .7; transform: scale(1.1); }
  .fv__circle-s { display: inline-block; padding-bottom: 2px; border-bottom: 1px solid #fff; font-size: 1rem; line-height: 2.6rem; font-weight: 400; }
  .fv__circle-m { font-size: .9rem; line-height: 2rem; font-weight: 400; letter-spacing: 0; }
}