:root{
  --hero-card-x: 0px;
  --hero-card-y: -18px;
}

/* header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246,248,251,.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height: 64px;
}

/* sections */
main{ padding-bottom: 60px; }
.section{ padding: 70px 0; }

/* hero base (layout only) */
.hero{
  padding: 0;
  background: none;
  border-bottom: 1px solid var(--line);
}

.hero.hero-bg{
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  background: url("../img/hero/hero.webp") center / cover no-repeat;
  padding: 92px 0 78px;
  overflow: hidden; /* ← handsや影がはみ出す事故を抑える */
}

/* overlay layer */
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* hero content wrapper */
.hero-inner{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* PC: 名刺を中心固定（位置決めはここだけ） */
@media (min-width: 1024px){
  .hero-title-img{
    position: absolute;
    left: calc(50% + var(--hero-card-x));
    top:  calc(50% + var(--hero-card-y));
    transform: translate(-50%, -50%);
    z-index: 4;
    pointer-events: none; /* 名刺がクリック対象じゃないなら */
  }
}

/* SP: 通常フローに戻す */
@media (max-width: 1023px){
  .hero-title-img{
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    z-index: 2;
    pointer-events: auto;
  }
}





.hero-inner{
  position: relative;
}


.hero-series{
  position: absolute;
  top: 38%;                 /* ← ここで上下位置を微調整 */
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: min(72vw, 520px);  /* 大きめ表示（PCもSPも対応） */
  height: auto;

  z-index: 2;
  pointer-events: none;     /* 演出用ならクリック無効 */
}
.hero-series{
  position: absolute;
  top: 38%;                 /* ← ここで上下位置を微調整 */
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: min(72vw, 520px);  /* 大きめ表示（PCもSPも対応） */
  height: auto;

  z-index: 2;
  pointer-events: none;     /* 演出用ならクリック無効 */
}
.hero-bg { z-index: 0; }
.hero-hands { z-index: 1; }
.hero-series { z-index: 2; }
.namecard-float { z-index: 3; }
.hero-lead,
.hero-sub { z-index: 4; }


/* 親が未指定なら */
.hero-inner{
  position: relative;
}

/* experience-namecard3_B.png */
.hero-series{
  position: absolute;
  top: 34%;                  /* もう少し上 */
  left: 50%;
  transform: translate(-50%, -50%);

  width: min(90vw, 780px);   /* ← かなり大きく */
  height: auto;

  z-index: 999;              /* ← 最前面 */
  pointer-events: none;
}
.hero-hands{ z-index: 10; }
.namecard-float{ z-index: 20; }
.hero-lead,
.hero-sub{ position: relative; z-index: 30; }
@media (max-width: 768px){
  .hero-series{ width: 92vw; top: 32%; }
}
filter: drop-shadow(0 20px 40px rgba(0,0,0,.18));
width: 96vw;
max-width: 900px;

/* layout */
.product-cta{ padding: 48px 0; }
.product-cta__inner{ max-width: 920px; margin: 0 auto; padding: 0 16px; }
.product-cta__actions{ display:flex; gap:12px; flex-wrap:wrap; margin: 0 0 28px; }

.product__title,
.samples__title{ margin: 0 0 12px; }

.product__grid{ display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px){
  .product__grid{ grid-template-columns: 1fr; }
}

/* cards */
.product-card{ padding: 18px; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; }
.product-card__catch{ margin: 0 0 6px; font-weight: 700; }
.product-card__name{ margin: 0 0 10px; }
.product-card__desc{ margin: 0 0 12px; line-height: 1.8; }
.product-card__list{ margin: 0; padding-left: 18px; line-height: 1.8; }

/* samples */
.samples{ margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(0,0,0,.08); }
.samples__lead{ margin: 0 0 10px; line-height: 1.8; }
.samples__list{ margin: 0; padding-left: 18px; line-height: 1.9; }

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.12);
  background: transparent;
}
.btn--primary{
  background: #0b2a55;
  border-color: #0b2a55;
  color: #fff;
}
.btn--ghost{
  color: #0b2a55;
  background: transparent;
}
.btn:hover{ opacity: .92; }




.offer{ margin-top: 24px; }
.offer__title{ margin: 0 0 12px; }

.offer__grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 860px){
  .offer__grid{ grid-template-columns: 1fr; }
}

.offer-card{
  border: 1px solid var(--line, rgba(0,0,0,.08));
  border-radius: 16px;
  padding: 16px;
  background: var(--card, #fff);
}

.offer-card__quote{
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line, rgba(0,0,0,.08));
  background: var(--soft, rgba(0,0,0,.02));
  font-weight: 800;
  line-height: 1.5;
  position: relative;
}
/* 吹き出しのしっぽ（色は背景に追従） */
.offer-card__quote::after{
  content:"";
  position:absolute;
  left: 18px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: var(--soft, rgba(0,0,0,.02));
  border-left: 1px solid var(--line, rgba(0,0,0,.08));
  border-bottom: 1px solid var(--line, rgba(0,0,0,.08));
  transform: rotate(45deg);
}

.offer-card__head{ margin: 0 0 10px; }
.offer-card__name{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
}
.offer-card__one{
  margin: 0;
  line-height: 1.8;
  color: var(--muted, rgba(0,0,0,.72));
}

.offer-card__list{
  margin: 10px 0 0;
  padding-left: 18px;
  line-height: 1.9;
}