/* ==========================================================
   株式会社わぁお ─ ファーストビュー（ヘッダー＋ヒーロー）
   style.css の後に読み込む。既存指定は #id.class で上書き。
   ========================================================== */

:root{
  --wa-navy:      #16264f;
  --wa-navy-deep: #0f1b3d;
  --wa-yellow:    #ffd400;
  --wa-yellow-dk: #e0b900;
}

/* ── ヘッダー（モックアップ準拠） ── */
#site-header{ background: rgba(255,255,255,.96); border-bottom: 2px solid var(--wa-yellow); }
#site-header .inner{ height: 76px; max-width: 1780px; padding: 0 1.9%; }

.wa-logo{
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(1.2rem, 1.55vw, 1.7rem);
  color: var(--wa-navy);
  letter-spacing: .01em;
  white-space: nowrap;
}
.nav-pc.wa-nav{ gap: clamp(20px, 2vw, 34px); }
.nav-pc.wa-nav a{ color: var(--wa-navy); font-size: clamp(.85rem, 1.02vw, 1.1rem); }
.nav-pc.wa-nav a::after{ background: var(--wa-yellow); height: 3px; }
.wa-header-cta{
  background: var(--wa-navy);
  color: #fff !important;
  padding: .75em 1.6em;
  border-radius: 50px;
  font-weight: 700;
  font-size: clamp(.85rem, 1.02vw, 1.1rem);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .25s;
}
.wa-header-cta::after{ display: none !important; }
/* style.css の .nav a { padding-bottom:4px } に負けて文字が下寄りになるため打ち消す */
.wa-header-cta{ padding-bottom: .75em; justify-content: center; text-align: center; }
.wa-header-cta:hover{ background: var(--wa-navy-deep); }

/* ================= ヒーロー ================= */
#hero.wa-hero{
  height: auto;
  min-height: 0;
  overflow: hidden;
  padding: 80px 0 8px;
  background:
    radial-gradient(1200px 600px at 88% 30%, #fff8d6 0%, rgba(255,248,214,0) 60%),
    #ffffff;
  position: relative;
}
.wa-hero-inner{
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 2.5%;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

/* ── 左：テキスト ── */
.wa-hero-left{ position: relative; z-index: 3; }

.wa-hero-title{
  font-family: var(--font-jp);
  font-weight: 900;
  color: var(--wa-navy);
  font-size: clamp(1.9rem, 4.75vw, 5.35rem);
  line-height: 1.34;
  letter-spacing: .005em;
}
.wa-hero-title .t-line{ display: block; white-space: nowrap; }
.t-typewrap{ position: relative; display: inline-block; }
.t-hl{
  position: relative;
  display: inline-block;
  color: var(--wa-navy);
  padding: .02em .16em .06em;
  transform: rotate(-1.3deg);
  z-index: 0;
}
.t-hl::before{
  content: "";
  position: absolute;
  inset: -.04em -.02em;
  background: var(--wa-yellow);
  border-radius: 5px;
  filter: url(#roughpaper);
  z-index: -1;
}
.t-caret{
  display: inline-block;
  width: 4px; height: 1.05em;
  background: var(--wa-navy);
  margin-left: 4px;
  vertical-align: -.14em;
  animation: wa-blink 1s steps(1) infinite;
}
@keyframes wa-blink{ 50%{ opacity: 0; } }
.t-cursor{
  position: absolute;
  right: -1.9vw; top: .4em;
  width: 4.2vw; max-width: 80px; height: auto;
  transform: rotate(6deg);
  transform-origin: 20% 15%;      /* 矢じり側を支点に押し込む */
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.25));
  pointer-events: none;
  animation: wa-cursor-click 2.6s ease-in-out infinite;
}
/* クリック時に広がる波紋 */
.t-click{
  position: absolute;
  right: -1.1vw; top: .8em;
  width: 1.6vw; height: 1.6vw;
  max-width: 30px; max-height: 30px;
  border: .22vw solid var(--wa-navy);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: wa-cursor-ripple 2.6s ease-out infinite;
}
@keyframes wa-cursor-click{
  0%, 62%   { transform: rotate(6deg) scale(1); }
  68%       { transform: rotate(6deg) scale(.82); }  /* 押し込む */
  76%       { transform: rotate(6deg) scale(1); }    /* 離す */
  100%      { transform: rotate(6deg) scale(1); }
}
@keyframes wa-cursor-ripple{
  0%, 64%  { transform: scale(.3); opacity: 0; }
  70%      { transform: scale(.5); opacity: .85; }
  90%,100% { transform: scale(1.9); opacity: 0; }
}

/* ── 左：ネイビーのキャッチ ── */
.wa-hero-catch{
  display: inline-block;
  position: relative;
  z-index: 0;
  margin: .4vw 0 2.5vw;
  padding: .34em .8em .38em;
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(1.35rem, 3.6vw, 4.05rem);
  line-height: 1.28;
  white-space: nowrap;
  transform: rotate(-1.3deg);
}
.wa-hero-catch::before{
  content: "";
  position: absolute;
  inset: -2px;
  background: var(--wa-navy);
  border-radius: 4px;
  filter: url(#roughpaper) drop-shadow(0 12px 24px rgba(22,38,79,.3));
  z-index: -1;
}
.wa-hero-catch .c-arrow{ color: var(--wa-yellow); margin-right: .15em; }
.wa-hero-catch .c-big{ color: var(--wa-yellow); }
.wa-hero-catch::after{
  content: "✦ ✦";
  position: absolute;
  top: 8px; right: -6px;
  transform: translateX(100%);
  color: var(--wa-yellow);
  font-size: .5em;
  letter-spacing: .3em;
  line-height: 1.6;
  animation: wa-twinkle 2.2s ease-in-out .25s infinite;
}

/* ── 左：サブコピー ── */
.wa-hero-sub{
  font-family: var(--font-jp);
  font-weight: 700;
  color: var(--wa-navy);
  font-size: clamp(1rem, 1.75vw, 1.9rem);
  line-height: 1.5;
  margin-bottom: 2.2vw;
}
.wa-hero-sub .sub-hl{
  background: linear-gradient(transparent 58%, #ffe680 58%);
  padding: 0 .05em;
}

/* ── 左：CTAボタン ── */
.wa-hero-cta{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--wa-yellow);
  color: var(--wa-navy);
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(1rem, 1.6vw, 1.75rem);
  line-height: 1.35;
  padding: .72em 2.9em;
  border-radius: 16px;
  box-shadow: 0 8px 0 var(--wa-yellow-dk), 0 16px 26px rgba(0,0,0,.16);
  transition: transform .14s ease, box-shadow .14s ease;
}
.wa-hero-cta:hover{
  transform: translateY(3px);
  box-shadow: 0 5px 0 var(--wa-yellow-dk), 0 10px 18px rgba(0,0,0,.16);
}
.wa-hero-cta .cta-tri{ font-size: .8em; }
.wa-hero-cta .cta-cards{ width: 2.42em; height: 2.42em; flex: none; color: var(--wa-navy); }
.wa-hero-cta .cta-cards svg{ width: 100%; height: 100%; display: block; }

/* ── 左：無料相談リンク ── */
.wa-hero-consult{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: .7vw;
  color: var(--wa-navy);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.62vw, 1.85rem);
  border-bottom: 2px solid transparent;
  width: fit-content;
  transition: border-color .2s;
}
.wa-hero-consult:hover{ border-color: var(--wa-navy); }
.wa-hero-consult .consult-arw{ font-size: 1.2em; }

/* ── 右：イラスト・ステージ ── */
.wa-hero-right{ position: relative; z-index: 1; margin-right: -2.5%; display: block; overflow: visible; }
.wa-hero-right .stage{
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4.6;
  margin-left: auto;
}
/* 左テキストが高いときは、ステージを高さ基準にして左右の背丈を揃える */
@media (min-width: 1001px){
  .wa-hero-right .stage{ width: 122%; margin-left: 0; height: auto; aspect-ratio: 5 / 4.5; }
}
.wa-hero-right .el{ position: absolute; display: block; }

/* 背景の黄色い斜め形＋ハーフトーン */
.wa-hero-right .bg-shape{
  position: absolute;
  inset: 2% -8% 6% -1%;
  background: var(--wa-yellow);
  clip-path: polygon(20% 2%, 100% 0, 92% 96%, 2% 100%);
  box-shadow: 0 30px 60px rgba(224,185,0,.28);
}
.wa-hero-right .bg-dots{
  position: absolute;
  right: 2%; bottom: 2%;
  width: 46%; height: 46%;
  background-image: radial-gradient(var(--wa-navy) 22%, transparent 24%);
  background-size: 14px 14px;
  clip-path: polygon(34% 0, 100% 26%, 100% 100%, 0 100%);
  opacity: .85;
}

/* ノートPC */
.wa-hero-right .laptop{
  width: 70.4%;
  left: 5.1%; top: 7.4%;
  z-index: 2;
  filter: drop-shadow(0 24px 34px rgba(0,0,0,.28));
}
/* ワイヤーフレーム用紙 */
.wa-hero-right .wireframe{
  width: 37%;
  left: 10%; top: 55%;
  z-index: 3;
  transform: rotate(-7deg);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.22));
}
/* 付箋（右に4枚） */
.wa-hero-right .sticky{ width: 16.2%; z-index: 4; filter: drop-shadow(0 8px 12px rgba(0,0,0,.22)); }
.wa-hero-right .s1{ right: 16.16%; top: 1%;   transform: rotate(4deg); }
.wa-hero-right .s2{ right: 18%; top: 25%;  transform: rotate(-3deg); }
.wa-hero-right .s3{ right: 15%; top: 49%;  transform: rotate(3deg); }
.wa-hero-right .s4{ right: 17%; top: 72%;  transform: rotate(-2deg); }
/* マジックハットのバッジ */
.wa-hero-right .badge{
  width: 17.7%;
  left: 16.4%; bottom: 4.7%;
  z-index: 6;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.3));
}
/* 魔法リボン */
.wa-hero-right .ribbon{
  width: 57.5%;
  left: 5.5%; bottom: 2.5%;
  z-index: 5;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
}

/* 手描き風の吹き出し・矢印・キラキラ */
.wa-hero-right .doodle{ position: absolute; z-index: 7; }
.wa-hero-right .bubble{
  left: 43.7%; top: 59.5%;
  color: #2a6fd6;
  font-weight: 900;
  font-size: clamp(.9rem, 1.5vw, 1.35rem);
  line-height: 1.15;
  text-align: center;
  transform: rotate(-7deg);
  text-shadow: 0 1px 2px rgba(255,255,255,.8);
  white-space: nowrap;
}
.wa-hero-right .arrow{ width: 10.3%; height: auto; }
.wa-hero-right .arrow-a{ left: 37.2%; bottom: 28.2%; transform: rotate(8deg); }
.wa-hero-right .arrow-b{ left: 3.5%; bottom: 27.8%; transform: rotate(0deg); }
.wa-hero-right .star{
  color: var(--wa-navy);
  font-size: clamp(.7rem, 1.3vw, 1.1rem);
  animation: wa-twinkle 2.2s ease-in-out infinite;
}
/* きらめき：拡大しながら光って消える */
@keyframes wa-twinkle{
  0%, 100% { transform: scale(.75) rotate(0deg);   opacity: .45; }
  50%      { transform: scale(1.35) rotate(90deg); opacity: 1; }
}
/* 星ごとに時間差をつけて、順番にきらめかせる */
.wa-hero-right .st1{ animation-delay: 0s; }
.wa-hero-right .st2{ animation-delay: .45s; }
.wa-hero-right .st3{ animation-delay: .9s; }
.wa-hero-right .st4{ animation-delay: 1.3s; }
.wa-hero-right .st5{ animation-delay: 1.75s; }
.wa-hero-right .st6{ animation-delay: .65s; }
.wa-hero-right .st1{ left: 12%; top: 8%; color: var(--wa-yellow-dk); }
.wa-hero-right .st2{ left: 4%;  top: 24%; }
.wa-hero-right .st3{ right: 8%; top: 4%; color: var(--wa-yellow-dk); }
.wa-hero-right .st4{ left: 44%; bottom: 20%; color: var(--wa-yellow-dk); }
.wa-hero-right .st5{ right: 20%; top: 30%; }
.wa-hero-right .st6{ left: 37%; top: 2%; color: var(--wa-navy); font-size: clamp(.9rem, 1.6vw, 1.5rem); }
.wa-hero-right .lines{ left: 27%; top: -3%; width: 7.5%; height: auto; }

/* スクロール誘導 */
.wa-hero-scrollhint{
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-en);
  font-size: .7rem; font-weight: 700; letter-spacing: .2em;
  color: var(--wa-navy);
  z-index: 3;
}
.wa-hero-scrollhint i{
  width: 2px; height: 34px;
  background: linear-gradient(var(--wa-navy), transparent);
  animation: wa-scroll 1.8s ease-in-out infinite;
}
@keyframes wa-scroll{ 0%{ transform: scaleY(.3); transform-origin: top; } 50%{ transform: scaleY(1); } 100%{ transform: scaleY(.3); transform-origin: bottom; } }

/* ── レスポンシブ ── */
@media (max-width: 1000px){
  .wa-hero-inner{ grid-template-columns: 1fr; gap: 8px; }
  .wa-hero-right{ order: 2; margin-top: 8px; }
  .wa-hero-left{ order: 1; text-align: left; }
  .wa-hero-right .stage{ max-width: 560px; margin: 0 auto; }
  #site-header .inner{ height: 64px; }
}
@media (max-width: 560px){
  #hero.wa-hero{ padding: 92px 0 48px; }
  .wa-hero-inner{ padding: 0 22px; }
  .t-cursor{ width: 34px; right: -22px; top: -12px; }
  .wa-hero-catch{ font-size: 1.35rem; }
  .wa-hero-right .stage{ aspect-ratio: 5 / 4.8; }
  .wa-hero-scrollhint{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .t-caret, .wa-hero-scrollhint i, .t-cursor, .t-click,
  .wa-hero-right .star, .wa-hero-catch::after{ animation: none; }
  .t-click{ opacity: 0; }
  .wa-hero-right .star{ opacity: 1; transform: none; }
}