/* =========================
   HERO (visual)
   - layout責務はlayout.css
   - ここは見た目/演出のみ
   ========================= */

/* series badge image */
.hero-series{
  width: 240px;
  max-width: 70%;
  opacity: .92;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.22));
}

/* title card image (名刺ロゴ) */
.hero-title-img{
  width: min(720px, 92%);
  height: auto;

  /* 名刺っぽい浮き/光 */
  filter:
    drop-shadow(0 14px 28px rgba(11,42,85,.42))
    drop-shadow(0 0 28px rgba(255,255,255,.65));
}

/* lead + sub */
.hero-lead{
  color: rgba(11,42,85,.90);
  font-size: 15px;
  line-height: 1.7;
  max-width: 44ch;

  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.35);
  padding: 14px 16px;
  border-radius: 14px;
  backdrop-filter: blur(8px);
}

.hero-sub{
  margin-top: 6px;
  max-width: 58ch;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(11,42,85,.82);

  background: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.28);
  padding: 10px 14px;
  border-radius: 12px;
  backdrop-filter: blur(8px);
}

/* overlay + background tone */
.hero-overlay{
  background:
    linear-gradient(
      180deg,
      rgba(11,42,85,.55) 0%,
      rgba(11,42,85,.35) 40%,
      rgba(246,248,251,.90) 100%
    );
}

.hero-bg{
  filter: saturate(.92) contrast(1.06);
}

/* PC: 左寄せの重心（コンテンツだけ） */
@media (min-width: 980px){
  .hero-inner{
    padding-left: 64px; /* 48〜88pxで好み調整 */
  }
}

/* SP: 中央寄せ */
@media (max-width: 860px){
  .hero-inner{
    align-items: center;
    text-align: center;
  }
  .hero-lead,
  .hero-sub{
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================
   名刺の浮遊（transform衝突回避）
   - translate を使う
   ========================= */
@keyframes float-card{
  0%,100%{ translate: 0 0; }
  50%{ translate: 0 -12px; }
}

.hero-title-img{
  translate: 0 0;
  animation: float-card 6.5s ease-in-out infinite;
  will-change: translate;
}

/* 動きを苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .hero-title-img{ animation: none; }
  .hand{ transition: none; }
}

/* =========================
   HERO hands (split + motion)
   ========================= */
.hero-hands{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hand{
  position: absolute;
  bottom: -6%;
  width: min(520px, 42vw);
  height: auto;

  opacity: .52;
  filter:
    drop-shadow(0 22px 36px rgba(0,0,0,.28))
    drop-shadow(0 0 18px rgba(255,255,255,.18));

  transition: transform 1.2s ease-out;
}

/* 中央基準で左右配置 */
.hand--left{
  right: 50%;
  transform: translateX(-8%);
}
.hand--right{
  left: 50%;
  transform: translateX(8%);
}

/* “受け取りに行く” */
.hero.is-reach .hand--left{
  transform: translateX(-2%) rotate(-1deg);
}
.hero.is-reach .hand--right{
  transform: translateX(2%) rotate(1deg);
}

/* mobile tuning */
@media (max-width: 768px){
  .hand{
    width: 70vw;
    bottom: -12%;
    opacity: .32;
  }
  .hand--left{ transform: translateX(-12%); }
  .hand--right{ transform: translateX(12%); }

  .hero-title-img{
    width: min(560px, 92%);
  }
}


/* =========================
   Cards / sections
   ========================= */
.card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 28px;
}

/* headings */
.section h3{
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 12px;
}
.section h4{
  font-size: 14px;
  color: var(--muted);
  margin: 18px 0 10px;
  letter-spacing: .04em;
}

/* text link */
.text-link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1px solid transparent;
}
.text-link:hover{
  color: var(--ink);
  border-bottom-color: rgba(11,42,85,.25);
}
.text-link::after{
  content:"→";
  opacity:.75;
}

/* lists */
.checklist{
  list-style:none;
  padding: 0;
  margin: 14px 0 0;
  display:grid;
  gap: 10px;
}
.checklist li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(246,248,251,.75);
}
.checklist li::before{
  content:"✓";
  display:inline-grid;
  place-items:center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(11,42,85,.10);
  color: var(--ink);
  font-weight: 900;
  flex: 0 0 auto;
}

.note{
  list-style:none;
  padding: 0;
  margin: 10px 0 0;
  display:grid;
  gap: 8px;
}
.note li{
  color: var(--muted);
  padding-left: 12px;
  position: relative;
}
.note li::before{
  content:"–";
  position:absolute;
  left:0;
  color: rgba(11,42,85,.35);
}

/* patterns */
.pattern-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.pattern{
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.9);
  box-shadow: 0 6px 18px rgba(11,42,85,.08);
  text-align:left;
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pattern:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(11,42,85,.14);
}
.pattern small{
  display:block;
  font-weight: 600;
  color: var(--muted);
  margin-top: 6px;
}

@media (max-width: 860px){
  .pattern-grid{ grid-template-columns: 1fr; }
}

/* =========================
   CTA (visual)
   ========================= */
.cta{
  color:#fff;
  text-align:center;
}

.cta .container{
  max-width: 820px;
}

.price{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}

.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  min-width: 280px;
  padding: 16px 28px;
  border-radius: 999px;

  background: #fff;
  color: #071c3a;
  font-weight: 900;
  letter-spacing: .02em;

  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.cta-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(0,0,0,.22);
}
.cta-btn:active{
  transform: translateY(0);
  opacity:.92;
}
.cta-btn::after{
  content:"→";
  opacity:.8;
}

.small{
  margin-top: 12px;
  line-height: 1.6;
  font-size: 12px;
  opacity: .72;
}

/* =========================
   Article blocks (if used)
   ========================= */
.article-meta{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .08em;
  margin-bottom: 10px;
}

.article-title{
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 14px;
}

.article-lead{
  font-size: 15px;
  color: rgba(11,42,85,.92);
  line-height: 1.9;
}

.article-hr{
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 22px 0;
}

.article-card h3{
  margin-top: 18px;
  margin-bottom: 10px;
}

.article-quote{
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 4px solid rgba(11,42,85,.30);
  background: rgba(246,248,251,.85);
  border-radius: 12px;
  font-weight: 800;
}

.article-actions{
  display:flex;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}



/* =========================
   HERO text OFF (temporary)
   ========================= */

.hero .hero-lead,
.hero .hero-sub{
  display: none !important;
}




















.card-float{
  --shadow: rgba(0,0,0,.28);
  --glow: rgba(255,255,255,.20);
  --glow2: rgba(255,255,255,.08);

  padding: 24px 0 10px;
}

.card-float__stage{
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 18px 16px 42px;
  perspective: 1100px;
  overflow: visible;
}

/* 背面の“光だまり” */
.card-float__stage::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 56%;
  width: min(560px, 92vw);
  height: 220px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(circle at 50% 40%, var(--glow), transparent 62%);
  filter: blur(2px);
  pointer-events:none;
}

/* 下に落ちる影（地面） */
.card-float__stage::after{
  content:"";
  position:absolute;
  left: 50%;
  top: calc(56% + 110px);
  width: min(520px, 88vw);
  height: 120px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, var(--shadow), transparent 65%);
  filter: blur(18px);
  opacity: .9;
  pointer-events:none;
}

.card-float__img{
  display:block;
  width: min(640px, 92vw);
  height: auto;
  margin: 0 auto;
  transform-style: preserve-3d;

  /* “浮いてる”角度 + 高さ */
  transform: translateY(-14px) rotateX(10deg) rotateY(-10deg) rotateZ(-1.2deg);

  /* 透過画像に効く：影を“形に沿って”落とす */
  filter:
    drop-shadow(0 28px 34px rgba(0,0,0,.26))
    drop-shadow(0 12px 16px rgba(0,0,0,.18));

  /* うっすら縁のハイライト（画像の外側に効く） */
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* iOS対策 */
}

/* ふわっと浮遊（やりすぎない） */
@media (prefers-reduced-motion: no-preference){
  .card-float__img{
    animation: floaty 4.8s ease-in-out infinite;
  }
  @keyframes floaty{
    0%,100%{
      transform: translateY(-14px) rotateX(10deg) rotateY(-10deg) rotateZ(-1.2deg);
    }
    50%{
      transform: translateY(-22px) rotateX(11deg) rotateY(-8deg) rotateZ(-.6deg);
    }
  }
}

.card-float__stage:hover .card-float__img{
  transform: translateY(-26px) rotateX(8deg) rotateY(6deg) rotateZ(.6deg);
  filter:
    drop-shadow(0 36px 44px rgba(0,0,0,.28))
    drop-shadow(0 16px 22px rgba(0,0,0,.18));
  transition: transform .35s ease, filter .35s ease;
}

.card-float__stage::before{
  background:
    radial-gradient(circle at 45% 35%, var(--glow), transparent 60%),
    radial-gradient(circle at 62% 42%, var(--glow2), transparent 68%);
}