/* ============================================================
   hanaimo_top_mv.css ― TOPメインビジュアル（手紙の1枚固定版）
   置き場所: /common/css/hanaimo_top_mv.css
   対応HTML: top_mv_single.html（CSSプレフィックス hni-mv）
   ============================================================ */
/* === Hanaimo / TOP main visual ========================================== */
.hni-mv{
  --mv-ratio-pc: 16/7;
  --mv-ratio-sp: 4/5;
  --mv-ink: #222;
  --mv-accent: var(--hni-dark, #015e53);
  position: relative;
  width: 100%;
  margin: 0 0 8px;
  font-family: var(--hni-font);
}
.hni-mv, .hni-mv *, .hni-mv *::before, .hni-mv *::after{ box-sizing: border-box; }
.hni-mv__text{ writing-mode: horizontal-tb; }
.hni-mv__slide{ position: relative; overflow: hidden; background: #f4f8f6; }
.hni-mv__link{ display: block; position: relative; color: var(--mv-ink); text-decoration: none; }
.hni-mv__pic,
.hni-mv__pic img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--mv-ratio-sp);
  object-fit: cover;
  object-position: var(--mv-focus-sp, center center);
}
/* 文字：SPは写真の下（写真に重ねない）、PCは写真の左に重ねる */
.hni-mv__text{
  position: static;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 20px 24px;
  background: #faf7f2;
}
.hni-mv__eyebrow{
  font-family: 'Montserrat', var(--hni-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--mv-accent);
}
.hni-mv__title{
  margin: 0;
  font-family: var(--hni-font-serif, 'Noto Serif JP', serif);
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--mv-ink);
}
.hni-mv__sub{
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #444;
}
.hni-mv__sub > span{ display: inline-block; }
.hni-mv__more{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--mv-accent);
  border-bottom: 1px solid currentColor;
}
.hni-mv__link:focus-visible{ outline: 2px solid var(--mv-accent); outline-offset: -4px; }
.hni-mv__more::after{ content: "›"; margin-left: 8px; font-size: 18px; line-height: 1; }


/* SPでも写真に文字を重ねる版（section に hni-mv--sp-overlay を付けたときだけ） */
@media (max-width: 899px){
  .hni-mv--sp-overlay .hni-mv__text{
    position: absolute;
    z-index: 2;
    left: 0; bottom: 0; right: auto;
    width: 64%;
    max-width: 300px;
    gap: 4px;
    padding: 56px 12px 16px 16px;
    background: radial-gradient(ellipse 120% 100% at 0% 100%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.82) 55%, rgba(255,255,255,0) 100%);
  }
  .hni-mv--sp-overlay .hni-mv__title{ font-size: 22px; line-height: 1.45; }
  .hni-mv--sp-overlay .hni-mv__sub{ font-size: 13px; line-height: 1.6; }
  .hni-mv--sp-overlay .hni-mv__more{ font-size: 14px; }
}

/* SP：スクロールを短くする（ボタンを1行に、余白を詰める） */
@media (max-width: 899px){
  .hni-mv-copy{ padding: 20px 16px 4px; }
  .hni-mv-copy__heading{ margin-bottom: 8px; }
  .hni-mv-copy__sub{ margin-bottom: 12px; font-size: 14px; line-height: 1.75; }
  .hni-mv-copy__points{ margin-bottom: 16px; gap: 2px 16px; }
  .hni-mv-copy__cta{ flex-wrap: nowrap; gap: 8px; margin-bottom: 16px; }
  .hni-mv-copy__cta > a{ flex: 1 1 0; min-width: 0; min-height: 48px; padding-left: 4px !important; padding-right: 4px !important; justify-content: center; text-align: center; font-size: 14px; white-space: nowrap; }
}

/* ボタン：角を落とさないスクエア型で統一（PC・SP共通） */
.hni-mv-copy__cta > a{
  border-radius: 0 !important;
  min-height: 48px;
  min-width: 168px;
  padding: 0 20px !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; letter-spacing: .06em;
  box-shadow: none !important;
}
/* SP：さらに短く（創業の2行と3つの特長はSPでは出さない。PCは表示） */
@media (max-width: 899px){
  .hni-mv-copy .hni-mv-copy__sub,
  .hni-mv-copy .hni-mv-copy__points{ display: none; }
  .hni-mv-copy .hni-mv-copy__heading{ margin-bottom: 14px; }
  .hni-mv-copy .hni-mv-copy__cta > a{ min-width: 0; padding: 0 4px !important; }
}

@media (min-width: 900px){
  .hni-mv__pic,
  .hni-mv__pic img{
    aspect-ratio: var(--mv-ratio-pc);
    max-height: 640px;
    object-position: var(--mv-focus-pc, center center);
  }
  .hni-mv__text{
    position: absolute;
    z-index: 2;
    top: 0; bottom: 0; left: 0; right: auto;
    width: min(42%, 500px);
    min-width: 380px;
    justify-content: center;
    gap: 10px;
    padding: 40px 40px 40px 56px;
    background: linear-gradient(to right, rgba(255,255,255,.88) 0%, rgba(255,255,255,.7) 55%, rgba(255,255,255,0) 100%);
  }
  .hni-mv__eyebrow{ font-size: 13px; }
  .hni-mv__title{ font-size: clamp(28px, 2.6vw, 38px); }
  .hni-mv__sub{ font-size: 15px; }
}

/* スライダー下：ブランドコピー */
.hni-mv-copy{
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 16px 8px;
  text-align: center;
  font-family: var(--hni-font);
  color: #222;
}
.hni-mv-copy__eyebrow{
  margin: 0 0 8px;
  font-family: 'Montserrat', var(--hni-font);
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  color: var(--hni-primary, #01796a);
}
.hni-mv-copy__heading{
  margin: 0 0 12px;
  font-family: var(--hni-font-serif, 'Noto Serif JP', serif) !important;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
}
.hni-mv-copy__heading > span{ display: inline-block; }
.hni-mv-copy__heading strong{ color: var(--hni-primary, #01796a); font-weight: 600; }
.hni-mv-copy__sub{ margin: 0 0 20px; font-size: 15px; line-height: 1.9; color: #444; }
.hni-mv-copy__points{
  list-style: none; margin: 0 auto 24px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px;
  font-size: 14px; line-height: 1.8;
}
.hni-mv-copy__points li::before{ content: "◆"; margin-right: 6px; color: var(--hni-gold, #b8893a); font-size: 12px; }
.hni-mv-copy__cta{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 24px; }

/* ボタン＋同梱リンクを1行に（旧：大きな同梱バナー） */
.hni-mv-copy__actions{
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center;
  gap: 12px; margin: 0 auto 16px; max-width: 1000px;
}
.hni-mv-copy .hni-mv-copy__actions .hni-mv-copy__cta{ margin: 0; flex-wrap: nowrap; gap: 12px; }
.hni-mv-copy .hni-mv-copy__cta > a{ min-height: 56px; min-width: 150px; }
.hni-mv-gift{
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 0 14px 0 0;
  background: #fff; border: 1px solid #c6d8d3;
  color: #222; text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.hni-mv-gift:hover{ border-color: var(--hni-primary, #01796a); background: #f4f8f6; }
.hni-mv-gift:focus-visible{ outline: 2px solid var(--hni-primary, #01796a); outline-offset: 2px; }
.hni-mv-gift__thumb{ flex: 0 0 56px; width: 56px; height: 56px; overflow: hidden; align-self: stretch; }
.hni-mv-gift__thumb img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: 28% 50%; }
.hni-mv-gift__body{ display: flex; flex-direction: column; align-items: flex-start; line-height: 1.35; text-align: left; }
.hni-mv-gift__label{ font-family: var(--hni-font-serif, 'Noto Serif JP', serif); font-size: 16px; font-weight: 600; color: var(--hni-dark, #015e53); letter-spacing: .04em; }
.hni-mv-gift__text{ font-size: 13px; color: #444; }
.hni-mv-gift__arrow{ margin-left: 4px; font-size: 20px; line-height: 1; color: var(--hni-gold, #b8893a); }
@media (max-width: 899px){
  .hni-mv-copy .hni-mv-copy__actions{ flex-direction: column; gap: 10px; }
  .hni-mv-copy .hni-mv-copy__cta{ gap: 8px; }
  .hni-mv-copy .hni-mv-copy__cta > a{ min-height: 48px; min-width: 0; }
  .hni-mv-gift{ min-height: 56px; }
  .hni-mv-gift__arrow{ margin-left: auto; }
}