/*
Theme Name: hiya
Theme URI: https://hiyasan.com/
Author: らふがき（Takashi Kojima）
Description: 観光インフルエンサー「ひやさん」公式サイト用テーマ。デザイン案A「ポップ＆キュート」を本実装したバージョン。丸ゴシック＋水色ベースに差し色、コミック調のあしらい。写真はご本人の実写に差し替えるまでAI生成の仮画像を使用。
Version: 0.5.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: hiya
*/

/* =========================================================
   デザイン案A「ポップ＆キュート」をテーマへ移植したもの。
   元は デザイン案/A_pop/assets/style.css + deco.css。

   このファイルは _build/build-style.py が生成している。直接編集しないこと。
   直すときはカンプ側のCSSを直してから、下記を実行して作り直す。
       python3 _build/build-style.py

   移植にあたり、クラス名とカスタムプロパティに hiya- を付けている
   （WordPress本体・プラグインのCSSと衝突させないため）。
   ========================================================= */

/* =========================================================
   ひやさん公式サイト デザイン案A「ポップ＆キュート」共通スタイル
   トーン：くぼたび路線。丸ゴシック／水色ベース／差し色多め／手描き感。
   ねらい：ひやさん本人のキャラクターと「行ってみたい！」の熱量を前面に。
   ※クラス名はテーマ hiya への移植を想定した構成にしている。
   ========================================================= */
:root{
  --hiya-accent:#33c3e8; --hiya-accent-d:#0f9ec5; --hiya-accent-l:#e4f7fd;
  --hiya-pink:#ff8fab; --hiya-yellow:#ffd23f; --hiya-mint:#6fded1; --hiya-orange:#ffb35c;
  --hiya-ink:#2b2b3c; --hiya-sub:#6f6f83; --hiya-line:#ecf0f4;
  --hiya-bg-soft:#f1fbfe; --hiya-bg-soft2:#fff6fa;
  --hiya-sh:0 14px 38px rgba(51,195,232,.16);
  --hiya-sh-s:0 6px 18px rgba(43,43,60,.08);
  --hiya-r:24px; --hiya-max:1140px;
}
*{box-sizing:border-box}
body{margin:0;color:var(--hiya-ink);background:#fff;line-height:1.9;
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.hiya-wrap{width:100%;max-width:var(--hiya-max);margin-inline:auto;padding-inline:22px}
.hiya-en{font-family:"Baloo 2",system-ui,sans-serif;letter-spacing:.06em}

/* ---------- ヘッダー ---------- */
.hiya-hd{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:2px solid var(--hiya-accent-l)}
.hiya-hd__in{display:flex;align-items:center;gap:18px;min-height:72px}
.hiya-logo{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:21px;color:var(--hiya-accent-d)}
.hiya-logo__mark{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#c9f2fd,var(--hiya-accent));
  box-shadow:0 4px 12px rgba(51,195,232,.45);display:grid;place-items:center;color:#fff;font-size:16px;font-weight:900}
.hiya-gnav{margin-left:auto}
.hiya-gnav>ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.hiya-gnav>ul>li{position:relative}
.hiya-gnav a{display:block;padding:10px 15px;font-weight:700;font-size:15px;border-radius:12px;transition:.15s}
.hiya-gnav a:hover{background:var(--hiya-accent-l);color:var(--hiya-accent-d)}
.hiya-gnav .hiya-is-current>a{color:var(--hiya-accent-d);background:var(--hiya-accent-l)}
/* 実績一覧のドロップダウン */
.hiya-gnav ul ul{list-style:none;margin:0;padding:8px;position:absolute;top:calc(100% + 6px);left:50%;
  transform:translateX(-50%) translateY(8px);background:#fff;border-radius:16px;box-shadow:var(--hiya-sh);
  min-width:210px;opacity:0;visibility:hidden;transition:.18s}
.hiya-gnav>ul>li:hover>ul,.hiya-gnav>ul>li:focus-within>ul{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.hiya-gnav ul ul a{padding:9px 15px;border-radius:10px;font-size:14px;white-space:nowrap}
.hiya-hd__cta{background:var(--hiya-pink);color:#fff;border-radius:999px;padding:11px 24px;font-weight:900;font-size:14px;
  box-shadow:0 6px 16px rgba(255,143,171,.4);transition:.15s;white-space:nowrap}
.hiya-hd__cta:hover{transform:translateY(-2px)}
.hiya-gnav__cta{display:none}

/* ---------- ハンバーガー（900px以下） ---------- */
.hiya-burger{display:none;margin-left:auto;width:46px;height:46px;padding:0;border:0;cursor:pointer;
  background:var(--hiya-accent-l);border-radius:14px;place-items:center;z-index:130}
.hiya-burger i{display:block;width:22px;height:2.5px;border-radius:2px;background:var(--hiya-accent-d);transition:.22s}
.hiya-burger i::before,.hiya-burger i::after{content:"";position:absolute;left:0;width:22px;height:2.5px;
  border-radius:2px;background:var(--hiya-accent-d);transition:.22s}
.hiya-burger i{position:relative}
.hiya-burger i::before{top:-7px}
.hiya-burger i::after{top:7px}
.hiya-burger[aria-expanded="true"] i{background:transparent}
.hiya-burger[aria-expanded="true"] i::before{top:0;rotate:45deg}
.hiya-burger[aria-expanded="true"] i::after{top:0;rotate:-45deg}
.hiya-nav-scrim{position:fixed;inset:0;background:rgba(44,44,58,.45);z-index:110;animation:hiya-scrim-in .22s ease}
@keyframes hiya-scrim-in{from{opacity:0}to{opacity:1}}

@media(max-width:900px){
  /* backdrop-filter があると position:fixed の基準がヘッダーになってしまうため、
     ドロワーを画面基準で出すスマホ幅では無効にする。 */
  .hiya-hd{backdrop-filter:none;background:#fff}
  .hiya-burger{display:grid}
  .hiya-hd__cta{display:none}
  .hiya-gnav{position:fixed;top:0;right:0;bottom:0;width:min(330px,86vw);margin:0;z-index:120;
    background:#fff;padding:calc(var(--hiya-hd-bottom,72px) + 18px) 20px 36px;overflow-y:auto;
    box-shadow:-12px 0 44px rgba(44,44,58,.18);
    translate:100% 0;transition:translate .26s cubic-bezier(.4,0,.2,1)}
  .hiya-gnav[data-open="true"]{translate:0 0}
  .hiya-gnav>ul{display:block}
  .hiya-gnav a{padding:14px 16px;font-size:16px;border-radius:14px}
  /* ドロップダウンはスマホでは開いたまま並べる */
  .hiya-gnav ul ul{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;min-width:0;padding:0 0 6px 14px;border-radius:0}
  .hiya-gnav ul ul a{font-size:14.5px;color:var(--hiya-sub);padding:10px 16px}
  .hiya-gnav ul ul a::before{content:"└ ";opacity:.5}
  .hiya-gnav__cta{display:block;margin-top:18px}
  .hiya-gnav__cta a{background:var(--hiya-pink);color:#fff;text-align:center;font-weight:900;
    border-radius:999px;box-shadow:0 6px 16px rgba(255,143,171,.4)}
  .hiya-gnav__cta a:hover{background:var(--hiya-pink);color:#fff}
}
@media(min-width:901px){.hiya-nav-scrim{display:none}}

/* ---------- ヒーロー（トップ） ---------- */
.hiya-hero{position:relative;overflow:hidden;padding-block:70px 90px;
  background:radial-gradient(900px 480px at 88% -12%,#d5f4fd 0,transparent 62%),
             radial-gradient(680px 420px at -5% 30%,#ffeef5 0,transparent 58%),#fff}
.hiya-hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hiya-hero__in>*{min-width:0}
.hiya-badge{display:inline-flex;align-items:center;gap:7px;background:#fff;border:2.5px solid var(--hiya-accent);color:var(--hiya-accent-d);
  font-weight:900;font-size:13.5px;border-radius:999px;padding:7px 18px;box-shadow:var(--hiya-sh-s)}
.hiya-hero h1{font-size:clamp(28px,3.5vw,44px);font-weight:900;line-height:1.5;margin:20px 0 20px;letter-spacing:.01em}
.hiya-hero h1 .hiya-mk{color:var(--hiya-accent-d);white-space:nowrap;padding-inline:2px;
  background:linear-gradient(transparent 62%,#ffe98a 62%,#ffe98a 92%,transparent 92%)}
.hiya-hero__lead{color:var(--hiya-sub);font-size:16.5px;margin:0 0 30px}
.hiya-hero__btns{display:flex;gap:14px;flex-wrap:wrap}
.hiya-hero__scatter{position:absolute;inset:0;z-index:0;pointer-events:none}
.hiya-hero__scatter i{position:absolute;border-radius:50%;opacity:.55}
.hiya-hero__scatter i:nth-child(1){width:14px;height:14px;background:var(--hiya-pink);top:16%;left:4%}
.hiya-hero__scatter i:nth-child(2){width:10px;height:10px;background:var(--hiya-yellow);top:78%;left:7%}
.hiya-hero__scatter i:nth-child(3){width:18px;height:18px;background:var(--hiya-mint);top:44%;left:1.5%}
.hiya-hero__scatter i:nth-child(4){width:12px;height:12px;background:var(--hiya-accent);top:88%;right:3%}

/* 縦型リール */
.hiya-reel{position:relative;height:min(70vh,560px);overflow:hidden;border-radius:26px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
.hiya-reel__track{display:flex;gap:16px;height:100%;width:max-content;animation:hiya-slide 30s linear infinite}
@keyframes hiya-slide{to{transform:translateX(-50%)}}
.hiya-reel__item{position:relative;flex:0 0 auto;height:100%;aspect-ratio:9/16;border-radius:20px;overflow:hidden;box-shadow:var(--hiya-sh)}
.hiya-reel__item .hiya-ph{place-items:end center;padding-bottom:18px}
.hiya-bubble{position:absolute;top:-6px;left:-10px;z-index:3;background:#fff;font-weight:900;font-size:13.5px;
  padding:10px 18px;border-radius:16px;box-shadow:var(--hiya-sh-s)}
.hiya-bubble::after{content:"";position:absolute;left:26px;bottom:-9px;border:9px solid transparent;border-top-color:#fff;border-bottom:0}

/* 写真（枠いっぱいに切り抜いて配置） */
.hiya-reel__item img,
.hiya-vgrid li img,
.hiya-card__th img,
.hiya-arow__img img{width:100%;height:100%;object-fit:cover}
.hiya-arow__img img{border-radius:30px}

/* 画像プレースホルダー（画像未設定のときのフォールバック） */
.hiya-ph{position:relative;width:100%;height:100%;display:grid;place-items:center;color:#fff;font-weight:900;font-size:14px;
  text-shadow:0 1px 6px rgba(0,0,0,.28)}
.hiya-ph::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 78% 18%,rgba(255,255,255,.3) 0 22%,transparent 23%),
  radial-gradient(circle at 16% 82%,rgba(255,255,255,.22) 0 16%,transparent 17%)}
.hiya-p1{background:linear-gradient(140deg,#bdeefb,#33c3e8)}
.hiya-p2{background:linear-gradient(140deg,#ffd7e4,#ff8fab)}
.hiya-p3{background:linear-gradient(140deg,#fff0c2,#ffce4d)}
.hiya-p4{background:linear-gradient(140deg,#c9f3e4,#6fded1)}
.hiya-p5{background:linear-gradient(140deg,#ffe2c4,#ffb35c)}
.hiya-p6{background:linear-gradient(140deg,#d8e4ff,#8fb4ff)}
.hiya-play{position:absolute;inset:0;margin:auto;width:52px;height:52px;background:rgba(255,255,255,.92);border-radius:50%;
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.hiya-play::after{content:"";margin-left:4px;border:10px solid transparent;border-left-color:var(--hiya-accent-d);border-right:0}

/* ---------- ボタン ---------- */
.hiya-btn{display:inline-block;font-weight:900;border-radius:999px;padding:15px 36px;border:3px solid var(--hiya-accent);
  color:var(--hiya-accent-d);background:#fff;box-shadow:var(--hiya-sh-s);transition:.16s;font-size:15.5px}
.hiya-btn:hover{transform:translateY(-3px);box-shadow:var(--hiya-sh)}
.hiya-btn--pri{background:var(--hiya-accent);color:#fff}
.hiya-btn--hiya-pink{background:var(--hiya-pink);border-color:var(--hiya-pink);color:#fff}

/* ---------- セクション共通 ---------- */
.hiya-sec{padding-block:88px;position:relative}
.hiya-sec--soft{background:var(--hiya-bg-soft)}
.hiya-sec--soft2{background:var(--hiya-bg-soft2)}
.hiya-sec__label{display:inline-block;background:var(--hiya-accent);color:#fff;font-weight:800;font-size:12px;letter-spacing:.16em;
  padding:6px 16px;border-radius:999px;margin:0 0 14px;box-shadow:0 5px 12px rgba(51,195,232,.34)}
.hiya-sec__title{font-size:clamp(25px,3.6vw,38px);font-weight:900;margin:0;line-height:1.45}
.hiya-sec__titlewrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hiya-sec__illust{width:clamp(56px,8vw,86px);flex:0 0 auto}
/* 見出しの右に置くひやさん本人のアイコン。本番はWordPressから差し替える */
.hiya-sec__avatar{width:clamp(48px,6vw,68px);flex:0 0 auto;border-radius:50%}
.hiya-sec__lead{color:var(--hiya-sub);margin:14px 0 40px;font-size:15.5px}
.hiya-center{text-align:center}
.hiya-center .hiya-sec__titlewrap{justify-content:center}
.hiya-mt{margin-top:40px}

/* ---------- 下層ページの見出し（ページヘッダー） ---------- */
.hiya-phead{position:relative;overflow:hidden;padding-block:52px 58px;
  background:radial-gradient(800px 380px at 82% -20%,#d5f4fd 0,transparent 62%),
             radial-gradient(600px 340px at -5% 40%,#ffeef5 0,transparent 58%),#fff}
.hiya-bread{font-size:12.5px;color:var(--hiya-sub);margin:0 0 18px}
.hiya-bread a:hover{color:var(--hiya-accent-d)}
.hiya-bread span{margin-inline:8px;opacity:.6}
.hiya-phead__ttl{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hiya-phead h1{font-size:clamp(27px,4vw,40px);font-weight:900;margin:0;line-height:1.4}
.hiya-phead__en{font-family:"Baloo 2",system-ui;font-size:13px;font-weight:800;letter-spacing:.22em;color:var(--hiya-accent-d);margin:0 0 6px}
.hiya-phead__lead{color:var(--hiya-sub);font-size:15.5px;margin:16px 0 0;max-width:720px}

/* ---------- 数字で見るひやさん ---------- */
.hiya-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none;padding:0;margin:0}
.hiya-num{background:#fff;border-radius:var(--hiya-r);padding:28px 18px;text-align:center;box-shadow:var(--hiya-sh-s);
  border:3px solid #fff;transition:.18s}
.hiya-num:hover{transform:translateY(-4px);box-shadow:var(--hiya-sh)}
.hiya-num__v{font-family:"Baloo 2",system-ui;font-size:clamp(32px,4.6vw,46px);font-weight:800;line-height:1.1;color:var(--hiya-accent-d)}
.hiya-num:nth-child(2) .hiya-num__v{color:var(--hiya-pink)}
.hiya-num:nth-child(3) .hiya-num__v{color:var(--hiya-orange)}
.hiya-num:nth-child(4) .hiya-num__v{color:#3ec1ad}
.hiya-num__v small{font-size:.5em;margin-left:3px}
.hiya-num__k{font-size:13.5px;font-weight:800;color:var(--hiya-sub);margin-top:6px}
@media(max-width:820px){.hiya-nums{grid-template-columns:repeat(2,1fr)}}

/* ---------- 動画グリッド ---------- */
.hiya-vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none;padding:0;margin:0}
.hiya-vgrid li{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;box-shadow:var(--hiya-sh-s);transition:.18s}
.hiya-vgrid li:hover{transform:translateY(-5px) rotate(-1deg);box-shadow:var(--hiya-sh)}
.hiya-vcap{position:absolute;left:12px;bottom:12px;color:#fff;font-weight:900;font-size:13px;z-index:2;text-shadow:0 1px 5px rgba(0,0,0,.5)}
@media(max-width:900px){.hiya-vgrid{grid-template-columns:repeat(2,1fr)}}

/* ---------- できること（4事業） ---------- */
.hiya-svc{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none;padding:0;margin:0}
.hiya-svc li{background:#fff;border-radius:var(--hiya-r);padding:30px 22px 26px;box-shadow:var(--hiya-sh-s);position:relative;transition:.18s;
  border-top:6px solid var(--hiya-accent)}
.hiya-svc li:nth-child(2){border-top-color:var(--hiya-pink)}
.hiya-svc li:nth-child(3){border-top-color:var(--hiya-orange)}
.hiya-svc li:nth-child(4){border-top-color:var(--hiya-mint)}
.hiya-svc li:hover{transform:translateY(-6px);box-shadow:var(--hiya-sh)}
.hiya-svc__no{font-family:"Baloo 2";font-size:13px;font-weight:800;color:var(--hiya-sub);letter-spacing:.14em}
.hiya-svc__ic{width:64px;height:64px;border-radius:50%;background:var(--hiya-accent-l);display:grid;place-items:center;margin:8px 0 14px;font-size:28px}
.hiya-svc li:nth-child(2) .hiya-svc__ic{background:#ffeef4}
.hiya-svc li:nth-child(3) .hiya-svc__ic{background:#fff4e6}
.hiya-svc li:nth-child(4) .hiya-svc__ic{background:#e5faf6}
.hiya-svc h3{font-size:18px;font-weight:900;margin:0 0 10px}
.hiya-svc p{font-size:14px;color:var(--hiya-sub);margin:0 0 16px;line-height:1.8}
.hiya-svc a{font-size:13.5px;font-weight:900;color:var(--hiya-accent-d)}
@media(max-width:900px){.hiya-svc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hiya-svc{grid-template-columns:1fr}}

/* ---------- 強み（アイコン横一列＋下に文章） ---------- */
/* カードの箱を持たせず、アイコンが一列に並んで見えるようにしている。
   行揃えのため、アイコン・見出し・本文はサブグリッドで各行の高さをそろえる。 */
.hiya-str{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 34px;list-style:none;padding:0;margin:0}
.hiya-str li{display:grid;grid-template-rows:subgrid;grid-row:span 3;text-align:center;gap:0}
.hiya-str__ic{width:clamp(88px,9vw,116px);margin:0 auto 18px;transition:.2s}
.hiya-str__ic img{width:100%;height:auto}
.hiya-str li:hover .hiya-str__ic{transform:translateY(-6px) rotate(-3deg)}
.hiya-str h3{font-size:clamp(16px,1.5vw,18.5px);font-weight:900;margin:0 0 12px;line-height:1.5;
  padding-bottom:12px;position:relative}
.hiya-str h3::after{content:"";position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:38px;height:4px;border-radius:999px;background:var(--hiya-accent)}
.hiya-str li:nth-child(2) h3::after{background:var(--hiya-pink)}
.hiya-str li:nth-child(3) h3::after{background:var(--hiya-orange)}
.hiya-str p{font-size:14px;color:var(--hiya-sub);margin:0;line-height:1.9}
@media(max-width:760px){
  .hiya-str{grid-template-columns:1fr;gap:38px;max-width:460px;margin-inline:auto}
  .hiya-str li{grid-row:auto;grid-template-rows:none}
}

/* ---------- 実績カード ---------- */
.hiya-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none;padding:0;margin:0}
.hiya-card{background:#fff;border-radius:var(--hiya-r);overflow:hidden;box-shadow:var(--hiya-sh-s);transition:.18s}
.hiya-card:hover{transform:translateY(-5px);box-shadow:var(--hiya-sh)}
.hiya-card__th{aspect-ratio:4/5;overflow:hidden;position:relative}
.hiya-card__bd{padding:14px 16px 20px}
.hiya-tag{display:inline-block;font-size:11px;font-weight:900;color:#fff;background:var(--hiya-accent);padding:3px 12px;border-radius:999px;margin-bottom:9px}
.hiya-tag--casting{background:var(--hiya-pink)}.hiya-tag--event{background:var(--hiya-orange)}.hiya-tag--ope{background:#3ec1ad}
.hiya-card h3{font-size:15px;font-weight:800;margin:0;line-height:1.6}
.hiya-card time{display:block;font-size:11.5px;color:var(--hiya-sub);margin-top:8px}
@media(max-width:900px){.hiya-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hiya-cards{grid-template-columns:1fr}}

/* ---------- 実績一覧のサブタブ ---------- */
.hiya-tabs{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0 0 30px}
.hiya-tabs a{display:block;border:3px solid var(--hiya-line);border-radius:999px;padding:9px 22px;font-size:14.5px;font-weight:900;
  color:var(--hiya-sub);background:#fff;transition:.16s}
.hiya-tabs a:hover{border-color:var(--hiya-accent);color:var(--hiya-accent-d);transform:translateY(-2px)}
.hiya-tabs .hiya-is-active a{background:var(--hiya-accent);color:#fff;border-color:var(--hiya-accent);box-shadow:0 6px 16px rgba(51,195,232,.35)}
.hiya-tabs .hiya-is-active--casting a{background:var(--hiya-pink);border-color:var(--hiya-pink);box-shadow:0 6px 16px rgba(255,143,171,.35)}
.hiya-tabs .hiya-is-active--event a{background:var(--hiya-orange);border-color:var(--hiya-orange);box-shadow:0 6px 16px rgba(255,179,92,.35)}
.hiya-tabs .hiya-is-active--ope a{background:#3ec1ad;border-color:#3ec1ad;box-shadow:0 6px 16px rgba(62,193,173,.35)}

/* タブの下に出る導入文（吹き出し風） */
.hiya-tabdesc{position:relative;background:var(--hiya-bg-soft);border-radius:var(--hiya-r);padding:26px 30px;margin:0 0 40px}
.hiya-tabdesc::before{content:"";position:absolute;top:-11px;left:44px;border:11px solid transparent;
  border-bottom-color:var(--hiya-bg-soft);border-top:0}
.hiya-tabdesc h2{font-size:clamp(18px,2.4vw,22px);font-weight:900;margin:0 0 10px}
.hiya-tabdesc p{margin:0 0 8px;color:var(--hiya-sub);font-size:14.5px}
.hiya-tabdesc p:last-child{margin-bottom:0}

/* 件数表示・ページネーション */
.hiya-count{font-size:13px;color:var(--hiya-sub);margin:0 0 18px;font-weight:800}
.hiya-pager{display:flex;justify-content:center;gap:9px;list-style:none;padding:0;margin:48px 0 0}
.hiya-pager a,.hiya-pager span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font-weight:900;font-size:15px;
  background:#fff;box-shadow:var(--hiya-sh-s);color:var(--hiya-sub);transition:.16s}
.hiya-pager a:hover{color:var(--hiya-accent-d);transform:translateY(-3px)}
.hiya-pager .hiya-is-current{background:var(--hiya-accent);color:#fff}
.hiya-pager .hiya-nx{width:auto;padding-inline:22px;border-radius:999px}

/* ---------- 取引企業 ---------- */
.hiya-clients{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;list-style:none;padding:0;margin:0}
.hiya-clients li{background:#fff;border-radius:16px;box-shadow:var(--hiya-sh-s);aspect-ratio:3/2;display:grid;place-items:center;
  font-size:12.5px;font-weight:800;color:var(--hiya-sub);padding:10px;text-align:center}
@media(max-width:900px){.hiya-clients{grid-template-columns:repeat(3,1fr)}}

/* ---------- ひやさんとは？：画像と文章を左右交互 ---------- */
.hiya-arow{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.hiya-arow+.hiya-arow{margin-top:74px}
.hiya-arow--rev .hiya-arow__media{order:2}
.hiya-arow__img{position:relative;aspect-ratio:4/5;border-radius:30px;box-shadow:var(--hiya-sh);max-width:400px;margin-inline:auto}
.hiya-arow__img .hiya-ph{border-radius:30px;overflow:hidden}
.hiya-arow__no{position:absolute;top:-14px;left:-14px;z-index:2;width:56px;height:56px;border-radius:50%;background:#fff;
  display:grid;place-items:center;font-family:"Baloo 2";font-size:21px;font-weight:800;color:var(--hiya-accent-d);box-shadow:var(--hiya-sh-s)}
.hiya-arow--rev .hiya-arow__no{left:auto;right:-14px}
.hiya-arow__text h2{font-size:clamp(21px,2.8vw,27px);font-weight:900;margin:0 0 16px;position:relative;padding-left:18px}
.hiya-arow__text h2::before{content:"";position:absolute;left:0;top:.28em;bottom:.28em;width:6px;border-radius:3px;background:var(--hiya-accent)}
.hiya-arow:nth-of-type(2) .hiya-arow__text h2::before{background:var(--hiya-pink)}
.hiya-arow:nth-of-type(3) .hiya-arow__text h2::before{background:var(--hiya-orange)}
.hiya-arow:nth-of-type(4) .hiya-arow__text h2::before{background:var(--hiya-mint)}
.hiya-arow__text p{margin:0 0 14px;color:var(--hiya-sub);font-size:15px}
@media(max-width:820px){
  .hiya-arow{grid-template-columns:1fr;gap:26px}
  .hiya-arow+.hiya-arow{margin-top:52px}
  .hiya-arow--rev .hiya-arow__media{order:0}
  .hiya-arow__img{max-width:330px}
}

/* プロフィール表 */
.hiya-prof{background:#fff;border-radius:var(--hiya-r);box-shadow:var(--hiya-sh-s);padding:12px 30px;max-width:720px;margin-inline:auto}
.hiya-prof dl{display:grid;grid-template-columns:150px 1fr;margin:0;font-size:14.5px}
.hiya-prof dt{font-weight:900;color:var(--hiya-accent-d);padding:16px 0;border-bottom:2px dashed var(--hiya-line)}
.hiya-prof dd{margin:0;padding:16px 0;border-bottom:2px dashed var(--hiya-line);color:var(--hiya-sub)}
.hiya-prof dl>:nth-last-child(-n+2){border-bottom:0}
@media(max-width:620px){.hiya-prof dl{grid-template-columns:1fr}.hiya-prof dt{padding-bottom:0;border-bottom:0}}

/* ---------- お問い合わせフォーム ---------- */
.hiya-form{max-width:720px;margin-inline:auto;background:#fff;border-radius:var(--hiya-r);box-shadow:var(--hiya-sh);padding:38px 40px 42px}
.hiya-form .hiya-row{margin:0 0 26px}
.hiya-form label{display:block;font-weight:900;margin-bottom:9px;font-size:15px}
.hiya-req{color:#fff;background:var(--hiya-pink);font-size:11px;margin-left:9px;padding:3px 10px;border-radius:999px;vertical-align:2px;font-weight:900}
.hiya-opt{color:var(--hiya-sub);background:var(--hiya-line);font-size:11px;margin-left:9px;padding:3px 10px;border-radius:999px;vertical-align:2px;font-weight:900}
.hiya-form input[type=text],.hiya-form input[type=email],.hiya-form input[type=tel],.hiya-form select,.hiya-form textarea{
  width:100%;padding:14px 16px;border:3px solid var(--hiya-line);border-radius:16px;font:inherit;background:#fbfeff;transition:.16s}
.hiya-form input:focus,.hiya-form select:focus,.hiya-form textarea:focus{outline:none;border-color:var(--hiya-accent);background:#fff;
  box-shadow:0 0 0 4px rgba(51,195,232,.14)}
.hiya-form textarea{min-height:180px;resize:vertical}
.hiya-form .hiya-hint{font-size:12.5px;color:var(--hiya-sub);margin:8px 0 0}
/* 種別はラジオをボタン風に */
.hiya-types{display:flex;gap:12px;flex-wrap:wrap}
.hiya-types label{position:relative;margin:0;cursor:pointer}
.hiya-types input{position:absolute;opacity:0;width:0;height:0}
.hiya-types span{display:block;border:3px solid var(--hiya-line);border-radius:999px;padding:11px 24px;font-size:14.5px;font-weight:900;
  color:var(--hiya-sub);background:#fff;transition:.16s}
.hiya-types input:checked+span{background:var(--hiya-accent);border-color:var(--hiya-accent);color:#fff;box-shadow:0 6px 16px rgba(51,195,232,.34)}
.hiya-types label:hover span{border-color:var(--hiya-accent);color:var(--hiya-accent-d)}
.hiya-form .hiya-submit{text-align:center;margin-top:34px}
.hiya-form .hiya-submit .hiya-btn{border:0;cursor:pointer;font-family:inherit}
/* 問い合わせページ上部の3ステップ */
.hiya-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;padding:0;margin:0 0 50px;counter-reset:f}
.hiya-flow li{background:#fff;border-radius:var(--hiya-r);box-shadow:var(--hiya-sh-s);padding:26px 22px;text-align:center;position:relative}
.hiya-flow li::before{counter-increment:f;content:"STEP " counter(f);font-family:"Baloo 2";font-size:12px;font-weight:800;
  letter-spacing:.16em;color:var(--hiya-accent-d)}
.hiya-flow h3{font-size:16.5px;font-weight:900;margin:8px 0 8px}
.hiya-flow p{font-size:13.5px;color:var(--hiya-sub);margin:0}
@media(max-width:820px){.hiya-flow{grid-template-columns:1fr}}
/* よくある質問 */
.hiya-faq{max-width:720px;margin:0 auto;list-style:none;padding:0}
.hiya-faq li{background:#fff;border-radius:20px;box-shadow:var(--hiya-sh-s);padding:22px 26px;margin-bottom:14px}
.hiya-faq h3{font-size:15.5px;font-weight:900;margin:0 0 8px;padding-left:32px;position:relative}
.hiya-faq h3::before{content:"Q";position:absolute;left:0;top:-2px;width:24px;height:24px;border-radius:50%;background:var(--hiya-accent);
  color:#fff;font-family:"Baloo 2";font-size:14px;display:grid;place-items:center}
.hiya-faq p{font-size:14px;color:var(--hiya-sub);margin:0;padding-left:32px}

/* ---------- お問い合わせCTA ---------- */
.hiya-cta{background:linear-gradient(135deg,#33c3e8,#6fded1);color:#fff;border-radius:36px;padding:56px 30px;text-align:center;
  box-shadow:var(--hiya-sh);position:relative;overflow:hidden}
.hiya-cta::before,.hiya-cta::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.16)}
.hiya-cta::before{width:220px;height:220px;top:-70px;right:-50px}
.hiya-cta::after{width:150px;height:150px;bottom:-60px;left:-30px}
.hiya-cta h2{font-size:clamp(23px,3.2vw,32px);font-weight:900;margin:0 0 12px;position:relative}
.hiya-cta p{margin:0 0 28px;font-size:15px;position:relative;opacity:.95}
.hiya-cta .hiya-btn{background:#fff;border-color:#fff;color:var(--hiya-accent-d);position:relative}

/* ---------- フッター ---------- */
.hiya-ft{background:var(--hiya-bg-soft);border-top:2px solid var(--hiya-accent-l);padding-block:46px;margin-top:70px;font-size:13.5px;color:var(--hiya-sub)}
.hiya-ft ul{display:flex;flex-wrap:wrap;gap:20px;list-style:none;padding:0;margin:0 0 20px}
.hiya-ft a{font-weight:800}
.hiya-ft a:hover{color:var(--hiya-accent-d)}

/* ---------- カンプ用の注記バー（本番では削除） ---------- */
.hiya-note{background:linear-gradient(90deg,#2b2b3c,#4a4a63);color:#fff;font-size:12.5px;font-weight:700;text-align:center;padding:9px 14px}
.hiya-note a{color:#7fe3ff;text-decoration:underline}

@media(max-width:820px){.hiya-hero__in{grid-template-columns:1fr}.hiya-reel{height:46vh;max-height:400px;order:-1}}

/* =========================================================
   コミック調あしらい（CSS実装分）
   網点・集中線・コマ枠は繰り返しの幾何パターンなので、画像ではなくCSSで持つ。
   色は --cm-* を上書きすれば個別に変えられる。
   ========================================================= */
:root{
  --hiya-cm-ink:#141420;
  --hiya-cm-dot:#33c3e8;
  --hiya-cm-dot-size:8px;
  --hiya-cm-ray:#141420;
  --hiya-cm-shadow:6px 6px 0 var(--hiya-cm-ink);
}

/* ---------- 網点（ハーフトーン） ---------- */
/* isolation で自前の stacking context を作っているので、
   z-index:-1 でも要素自身の背景色より前・文字より後ろに乗る。 */
.hiya-cm-halftone{position:relative;isolation:isolate}
.hiya-cm-halftone::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:var(--hiya-cm-dot-a,.5);
  background-image:radial-gradient(var(--hiya-cm-dot) 1.6px,transparent 1.7px);
  background-size:var(--hiya-cm-dot-size) var(--hiya-cm-dot-size)}

/* 下端に向かって濃くなる網点。セクションの足元に敷く用。 */
.hiya-cm-halftone--fade::before{
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000);
  mask-image:linear-gradient(to bottom,transparent,#000)}

/* 角から放射状に薄れる網点。カード背景など面で使う用。 */
.hiya-cm-halftone--corner::before{
  -webkit-mask-image:radial-gradient(120% 120% at 0% 0%,#000 10%,transparent 70%);
  mask-image:radial-gradient(120% 120% at 0% 0%,#000 10%,transparent 70%)}

.hiya-cm-halftone--hiya-pink{--hiya-cm-dot:var(--hiya-pink)}
.hiya-cm-halftone--hiya-yellow{--hiya-cm-dot:var(--hiya-yellow)}
.hiya-cm-halftone--dense{--hiya-cm-dot-size:5px}
.hiya-cm-halftone--loose{--hiya-cm-dot-size:13px}
.hiya-cm-halftone--faint{--hiya-cm-dot-a:.25}
.hiya-cm-halftone--strong{--hiya-cm-dot-a:.9}

/* ---------- 集中線 ---------- */
/* 中心が抜けて外側に向かって線が出る。見出しや主役画像の後ろに敷く。
   ::before は要素より大きく広げるので、はみ出さないよう overflow で必ず囲う。 */
/* マスクは楕円（closest-side）にしてある。要素が横長でも縦長でも、
   抜き穴と減衰が縦横比に追従するので、そのまま使える。 */
.hiya-cm-rays{position:relative;isolation:isolate;overflow:hidden}
.hiya-cm-rays::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:50%;left:50%;width:150%;height:150%;translate:-50% -50%;opacity:.5;
  background:repeating-conic-gradient(from 0deg,
    var(--hiya-cm-ray) 0deg .45deg, transparent .45deg 3.6deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent 20%,#000 40%,#000 66%,transparent 88%);
  mask-image:radial-gradient(closest-side,transparent 20%,#000 40%,#000 66%,transparent 88%)}

.hiya-cm-rays--soft::before{opacity:.22}
.hiya-cm-rays--strong::before{opacity:.85}
.hiya-cm-rays--blue{--hiya-cm-ray:var(--hiya-accent)}
/* 線を太く・本数を減らした版。小さい面積で使うとき用。 */
.hiya-cm-rays--bold::before{
  background:repeating-conic-gradient(from 0deg,
    var(--hiya-cm-ray) 0deg 1.1deg, transparent 1.1deg 6.5deg)}

/* ---------- コマ枠 ---------- */
/* 中身の量で高さが変わっても崩れないよう、枠は borderと影だけで作る。 */
.hiya-cm-panel{position:relative;background:#fff;
  border:3.5px solid var(--hiya-cm-ink);border-radius:6px;
  box-shadow:var(--hiya-cm-shadow);padding:26px 28px}
.hiya-cm-panel--tilt{rotate:-1.2deg}
.hiya-cm-panel--tilt-r{rotate:1.4deg}
.hiya-cm-panel--blue{background:var(--hiya-accent-l)}
.hiya-cm-panel--hiya-yellow{background:#fff6d6}
.hiya-cm-panel--hiya-pink{background:var(--hiya-bg-soft2)}
/* 影を色付きにした軽い版。カードを並べるとき用。 */
.hiya-cm-panel--pop{--hiya-cm-shadow:5px 5px 0 var(--hiya-accent)}

/* コマを少しずつ傾けて並べる。手作業で角度を振らずに済ませる。 */
.hiya-cm-strip{display:grid;gap:26px}
.hiya-cm-strip>.hiya-cm-panel:nth-child(3n+1){rotate:-1deg}
.hiya-cm-strip>.hiya-cm-panel:nth-child(3n+2){rotate:.8deg}
.hiya-cm-strip>.hiya-cm-panel:nth-child(3n+3){rotate:-.5deg}

/* ---------- 区切り線 ---------- */
/* ギザギザの断裁線。セクションの境目に置く。 */
.hiya-cm-divider{height:14px;border:0;margin:0;
  background:
    linear-gradient(135deg,var(--hiya-cm-ink) 25%,transparent 25%) 0 0/14px 14px,
    linear-gradient(225deg,var(--hiya-cm-ink) 25%,transparent 25%) 0 0/14px 14px}

/* 斜めストライプの帯。 */
.hiya-cm-stripe{height:16px;border:0;margin:0;
  background:repeating-linear-gradient(-45deg,
    var(--hiya-cm-ink) 0 6px, transparent 6px 14px)}

/* ---------- あしらい画像の置き方 ---------- */
/* 生成した透過PNGを、本文に干渉させずに散らすための土台。 */
.hiya-cm-deco{position:absolute;z-index:0;pointer-events:none;user-select:none;
  width:var(--hiya-w,110px);opacity:var(--hiya-o,1);rotate:var(--hiya-rot,0deg)}
.hiya-cm-deco img{width:100%;height:auto}
.hiya-cm-deco--front{z-index:3}

/* ふわっと上下する。控えめに。 */
@keyframes hiya-cm-float{from{translate:0 0}to{translate:0 -9px}}
.hiya-cm-deco--float{animation:hiya-cm-float 2.8s ease-in-out infinite alternate}
.hiya-cm-deco--float-slow{animation:hiya-cm-float 4.2s ease-in-out infinite alternate}

@media (prefers-reduced-motion:reduce){
  .hiya-cm-deco--float,.hiya-cm-deco--float-slow{animation:none}
}

@media (max-width:767px){
  /* 狭い画面では散らし素材が本文を圧迫するので小さくする。 */
  .hiya-cm-deco{width:calc(var(--hiya-w,110px) * .62)}
  .hiya-cm-panel{padding:20px 18px;box-shadow:4px 4px 0 var(--hiya-cm-ink)}
}


/* =========================================================
   ここから下はWordPress固有の調整。カンプ側には存在しない。
   ========================================================= */

/* --- 本文書体を M PLUS Rounded 1c に --- */
/* インスタのサムネで使っている書体に寄せる。同じ丸ゴシックだが、
   Zen Maru Gothic より太く子どもっぽい表情になる。
   900 だけでなく 400〜800 も読み込んでいるので、本文の細さはそのまま保てる。 */
body { font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", system-ui, sans-serif; }

/* --- ヘッダーのバーを水色に、ロゴとメニューを白に --- */
/* スマホ幅では .hiya-hd を白に戻す指定が元々あるので、そこも上書きする。
   ただしドロワー（.hiya-gnav）は白い板のままなので、
   メニュー文字を白くするのは横並びで出る901px以上だけに限る。 */
/* 地が不透明になったので、後ろをぼかす処理はもう効かない。切っておく。 */
.hiya-hd { background: var(--hiya-accent); border-bottom-color: rgba(255, 255, 255, .35);
  backdrop-filter: none; }
@media (max-width: 900px) { .hiya-hd { background: var(--hiya-accent); } }
.hiya-logo { color: #fff; }
/* 丸マークは水色のグラデだったので、water色の地に埋もれる。白地に水色の文字へ反転させる。 */
.hiya-logo__mark { background: #fff; color: var(--hiya-accent-d);
  box-shadow: 0 4px 12px rgba(15, 158, 197, .35); }
/* ハンバーガーも同じ考えで反転 */
.hiya-burger { background: rgba(255, 255, 255, .22); }
.hiya-burger i, .hiya-burger i::before, .hiya-burger i::after { background: #fff; }

@media (min-width: 901px) {
  .hiya-gnav > ul > li > a { color: #fff; }
  .hiya-gnav > ul > li > a:hover,
  .hiya-gnav .hiya-is-current > a,
  .hiya-gnav .current-menu-item > a,
  .hiya-gnav .current-menu-ancestor > a,
  .hiya-gnav .current_page_item > a,
  .hiya-gnav .current-menu-parent > a { background: #fff; color: var(--hiya-accent-d); }
  /* ドロップダウンは白い板の上なので、文字は元の濃い色に戻す */
  .hiya-gnav ul ul a { color: var(--hiya-ink); }
  .hiya-gnav ul ul a:hover { background: var(--hiya-accent-l); color: var(--hiya-accent-d); }
}

/* --- できること（4事業）のカード：丸アイコンをやめて上部の横長画像に --- */
/* .hiya-svc__ic はカンプでは64pxの丸だった。クラス名は据え置き
   （カスタマイザーの設定キー hiya_svc_icon_* と対応しているため）。 */
.hiya-svc__ic { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 14px;
  overflow: hidden; margin: 0 0 16px; display: block; }
.hiya-svc__ic img { width: 100%; height: 100%; object-fit: cover; }
/* 画像が主役になったぶん、カード上部の余白は詰める */
.hiya-svc li { padding-top: 22px; }

/* --- 実績ページの説明文：行間を詰める --- */
/* body の line-height:1.9 をそのまま受けていて、短い説明文には広すぎた。 */
.hiya-tabdesc p { line-height: 1.3; }

/* --- 下層ページ：見出し帯とその下の中身をくっつける --- */
/* .hiya-phead の下余白58px と .hiya-sec の上余白が足し算になって
   100px超の空白ができていた。直後のセクションだけ上を詰める。 */
.hiya-sec--tight { padding-top: 10px; }

/* --- ヒーローの帯に入る動画 --- */
/* 静止画（.hiya-reel__item img）と同じ収まりにする。
   縦横比が9:16でない動画が来ても、枠に合わせて切り取られる。 */
.hiya-reel__video { width: 100%; height: 100%; object-fit: cover; display: block;
  background: var(--hiya-accent-l); }

/* --- 見出しとタブの吹き出し --- */
/* 角のない丸い形。文字数がいくつでも形が崩れないので、
   カスタマイザーで見出しを変えても崩れない。 */
.hiya-sec__title,
.hiya-phead h1,
.hiya-tabs a {
  background: #fff;
  border: 3px solid var(--hiya-ink);
  border-radius: 999px;
  max-width: 100%;
}

/* ホームのセクション見出しと、下層ページの見出し。
   二行になったときに左詰めだと吹き出しの中で偏るので、常に中央ぞろえにする。 */
.hiya-sec__title,
.hiya-phead h1 { border-width: 4px; padding: 14px 40px; margin-block: 8px; text-align: center; }

/* 実績ページのタブ */
.hiya-tabs a { border-color: var(--hiya-ink); color: var(--hiya-ink); box-shadow: none; }
.hiya-tabs a:hover { border-color: var(--hiya-ink); color: var(--hiya-accent-d);
  background: var(--hiya-accent-l); }
.hiya-tabs .hiya-is-active a,
.hiya-tabs .hiya-is-active--casting a,
.hiya-tabs .hiya-is-active--event a,
.hiya-tabs .hiya-is-active--ope a { border-color: var(--hiya-ink); color: #fff; box-shadow: none; }

@media (max-width: 720px) {
  .hiya-sec__title,
  .hiya-phead h1 { padding: 11px 26px; }
}

/* --- セクション見出しは常に中央ぞろえ --- */
/* カンプではセクションごとに .hiya-center を付けたり付けなかったりで、
   できること・取引企業だけ中央、ほかは左寄せというちぐはぐな状態だった。
   .hiya-center はラップ全体を中央にするのでカードの本文まで巻き込む
   （だから元は ul に text-align:left を打ち返していた）。
   見出しの部品そのものを中央にすれば、中身の左ぞろえはそのままにできる。 */
.hiya-sec__titlewrap { justify-content: center; }
.hiya-sec__lead { text-align: center; max-width: 760px; margin-inline: auto; }

/* --- 見出しの横のひやさんイラスト --- */
/* カンプでは正方形の顔アイコンを丸く抜く想定だったが、実際に入るのは全身のイラスト。
   幅で決めて丸く抜くと、縦長の絵が細長い楕円に切られて頭と足が消える。
   高さで決めて縦横比はそのままにし、丸抜きもやめる。
   横長の絵が来たときに見出しを押し出さないよう、幅の上限だけ決めておく。 */
.hiya-sec__avatar { width: auto; height: clamp(58px, 7.5vw, 92px);
  max-width: min(130px, 28vw); object-fit: contain; border-radius: 0; }

/* --- ヘッダーの「お問い合わせ」ボタンを黄色に --- */
/* 黄色に白文字はそのままだと読めないので、文字に黒フチを付けて浮かせる
   （見出しの吹き出しと同じ考え方）。
   paint-order で塗りを上にしないと、フチが文字の内側を削って細く見える。
   影もピンクのままだと下ににじむので、黄色に合わせる。 */
.hiya-hd__cta, .hiya-gnav__cta a {
  color: #fff;
  -webkit-text-stroke: 2px var(--hiya-ink);
  paint-order: stroke fill;
}
.hiya-hd__cta { background: var(--hiya-yellow);
  box-shadow: 0 6px 16px rgba(255, 210, 63, .5); }
@media (max-width: 900px) {
  .hiya-gnav__cta a, .hiya-gnav__cta a:hover { background: var(--hiya-yellow); color: #fff;
    box-shadow: 0 6px 16px rgba(255, 210, 63, .5); }
}

/* --- ヘッダーのロゴを画像にしたとき --- */
/* どんな縦横比のロゴが来ても収まるよう、高さだけ決めて幅は成り行きにする。
   横に長すぎるロゴがナビを押し出さないよう、上限も決めておく。

   ロゴは水色の帯より大きくして、下にはみ出させる。
   場所として確保するのは常に72px（帯の高さ）ぶんだけ。
   上5px＋高さH＋下(67px - H) = 72px。
   この式にしておくと、ロゴをどれだけ大きくしても帯の高さは変わらない。 */
/* ロゴの高さは下層ページの見出しでも使う（はみ出す分の場所をあけるため）ので、
   :root に置いて全体で共有する。 */
:root { --hiya-logo-h: clamp(140px, 15.5vw, 208px); }
@media (max-width: 900px) { :root { --hiya-logo-h: clamp(96px, 30vw, 140px); } }

.hiya-logo--img { gap: 0;
  align-self: flex-start; margin-top: 5px; margin-bottom: calc(67px - var(--hiya-logo-h));
  position: relative; z-index: 3;
  transition: margin-bottom .3s cubic-bezier(.2, .8, .3, 1); }
/* max-width は保険。万一ロゴが横に伸びてもナビを押し出さないための上限。 */
.hiya-logo__img { width: auto; height: var(--hiya-logo-h); max-width: min(430px, 40vw);
  object-fit: contain;
  /* はみ出した部分が水色の地から浮いて見えるように、薄く影を落とす */
  filter: drop-shadow(0 8px 14px rgba(10, 90, 120, .24));
  transition: height .3s cubic-bezier(.2, .8, .3, 1); }
/* スマホは横にハンバーガーが並ぶので、max-width の保険もその分ゆるめる。 */
@media (max-width: 900px) { .hiya-logo__img { max-width: min(300px, 66vw); } }

/* 下層ページは、ヘッダーのすぐ下にパンくずが来る。
   ロゴがそこまで垂れてくると隠してしまうので、はみ出す分だけ上を広げる。
   ロゴの下端は「5px + ロゴの高さ」、帯の下端は74px。差が「はみ出し」。 */
.hiya-phead { padding-top: max(52px, calc(var(--hiya-logo-h) - 53px)); }

/* 少しでもスクロールしたら帯の中に収める（assets/nav.js がクラスを付け外しする）。
   はみ出したままだと、本文の左上にロゴが乗ってしまうため。
   上5px＋高さ62px＋下5px = 72px で、行き来しても帯の高さは変わらない。 */
.hiya-scrolled .hiya-logo--img { margin-bottom: 5px; }
.hiya-scrolled .hiya-logo__img { height: 62px; }

/* ページを開いたときの「ボヨーン」。下端を軸に、つぶれて跳ねる。 */
@keyframes hiya-logo-pop {
  0%   { opacity: 0; transform: translateY(-20px) scale(.5, .5); }
  46%  { opacity: 1; transform: translateY(0) scale(1.16, .86); }
  64%  { transform: translateY(-8px) scale(.94, 1.08); }
  80%  { transform: translateY(0) scale(1.04, .97); }
  92%  { transform: translateY(-2px) scale(.99, 1.01); }
  100% { transform: translateY(0) scale(1, 1); }
}
.hiya-logo--img { transform-origin: 50% 100%;
  animation: hiya-logo-pop .95s cubic-bezier(.2, .8, .3, 1) .1s both; }

@media (prefers-reduced-motion: reduce) {
  .hiya-logo--img { animation: none; transition: none; }
  .hiya-logo__img { transition: none; }
}

/* --- wp_nav_menu が出すクラスを、カンプの .hiya-is-current に合わせる --- */
.hiya-gnav .current-menu-item > a,
.hiya-gnav .current-menu-ancestor > a,
.hiya-gnav .current_page_item > a,
.hiya-gnav .current-menu-parent > a { color: var(--hiya-accent-d); background: var(--hiya-accent-l); }

/* メニュー未設定時のフォールバックナビも同じ見た目にする */
.hiya-gnav ul { list-style: none; margin: 0; padding: 0; }

/* --- 管理バーが出ているときに固定ヘッダーが隠れないようにする --- */
.admin-bar .hiya-hd { top: 32px; }
@media (max-width: 782px) { .admin-bar .hiya-hd { top: 46px; } }

/* --- 投稿本文（実績・取材記事の詳細、固定ページ） --- */
.hiya-article { max-width: 760px; margin-inline: auto; font-size: 15.5px; }
.hiya-article h2 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 900; margin: 44px 0 16px; }
.hiya-article h3 { font-size: 18px; font-weight: 900; margin: 32px 0 12px; }
.hiya-article p { margin: 0 0 18px; color: var(--hiya-sub); }
.hiya-article img { border-radius: 20px; margin-block: 10px; }
.hiya-article a { color: var(--hiya-accent-d); font-weight: 800; text-decoration: underline; }
.hiya-article ul, .hiya-article ol { color: var(--hiya-sub); padding-left: 1.4em; margin: 0 0 18px; }
.hiya-article blockquote { margin: 0 0 18px; padding: 16px 22px; background: var(--hiya-bg-soft);
  border-radius: 16px; color: var(--hiya-sub); }

/* WordPressの画像配置クラス */
.alignleft { float: left; margin: 6px 24px 18px 0; }
.alignright { float: right; margin: 6px 0 18px 24px; }
.aligncenter { margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 12.5px; color: var(--hiya-sub); text-align: center; }

/* スクリーンリーダー専用テキスト */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* --- 実績一覧のページネーション（paginate_links の出力に当てる） --- */
.hiya-pager .page-numbers { display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; font-weight: 900; font-size: 15px; background: #fff;
  box-shadow: var(--hiya-sh-s); color: var(--hiya-sub); transition: .16s; }
.hiya-pager a.page-numbers:hover { color: var(--hiya-accent-d); transform: translateY(-3px); }
.hiya-pager .page-numbers.current { background: var(--hiya-accent); color: #fff; }
.hiya-pager .page-numbers.next, .hiya-pager .page-numbers.prev { width: auto; padding-inline: 22px; border-radius: 999px; }

/* --- フォームのエラー表示 --- */
.hiya-formerr { max-width: 720px; margin: 0 auto 22px; background: #fff0f4; border: 3px solid var(--hiya-pink);
  border-radius: 18px; padding: 16px 22px; color: #c2185b; font-weight: 800; font-size: 14.5px; }

/* --- 検索結果・404など、素の一覧 --- */
.hiya-plain { max-width: 760px; margin-inline: auto; color: var(--hiya-sub); }
.hiya-plain li { margin-bottom: 12px; }

/* --- 実績・取材記事の詳細ページ --- */
.hiya-single__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 26px; }
.hiya-single__thumb { max-width: 760px; margin: 0 auto 34px; border-radius: 26px; overflow: hidden;
  box-shadow: var(--hiya-sh); }
.hiya-single__thumb img { width: 100%; height: auto; }

/* --- 取引企業のロゴ（画像が入ったとき） --- */
.hiya-clients li img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* --- 動画にリンクが設定されているときだけ <a> が入る。カード全体を押せる面にする --- */
.hiya-vgrid li > a, .hiya-reel__item > a { position: absolute; inset: 0; z-index: 3; display: block; }

/* --- ヒーロー見出しのマーカーの色ちがい（カスタマイザーで選ぶ） --- */
.hiya-hero h1 .hiya-mk--pink { color: #d94f77;
  background: linear-gradient(transparent 62%, #ffc9d8 62%, #ffc9d8 92%, transparent 92%); }
.hiya-hero h1 .hiya-mk--blue { color: var(--hiya-accent-d);
  background: linear-gradient(transparent 62%, #bfeefc 62%, #bfeefc 92%, transparent 92%); }

/* --- 見出しの中の「スマホだけの改行」 --- */
/* カスタマイザーの見出し欄で改行すると、その位置に入る。
   PCは幅に余裕があるので一行のまま（改行を無効にする）。 */
.hiya-brsp { display: none; }
@media (max-width: 720px) { .hiya-brsp { display: inline; } }

/* --- スマホでは「あしらい・見出し・ひやさん」を必ず横一列に並べる --- */
/* 元は flex-wrap:wrap だったので、見出しが長いセクションほど画面に収まらず、
   あしらいが上の行へ、ひやさんが下の行へ、と勝手にはがれて三段になっていた。
   セクションごとに段数が違うので、並べたときにガタガタして見える。

   折り返しを禁止したうえで、見出しの吹き出しだけが縮んで幅を譲る形にする。
   これで文字数がいくつでも、必ず一列に収まる。
   あしらいとひやさんは flex:0 0 auto なので縮まない（絵がつぶれない）。 */
@media (max-width: 720px) {
  .hiya-sec__titlewrap { flex-wrap: nowrap; gap: 8px; }

  /* min-width:0 が無いと、flexの既定（縮んでも中身の最小幅は保つ）に阻まれて
     吹き出しが縮まず、はみ出してしまう。

     文字の大きさは、画面幅から「両脇の絵・すきま・吹き出しの内側の余白」を
     引いた残りを10文字で割った値。ホームの見出しはほぼ10文字以内なので、
     これで一行に収まる。「インフルエンサーキャスティングの強み」だけは18文字あり
     さすがに一行では読めない大きさになるため、吹き出しの中で二行になる。

     line-break:strict は、二行になったとき「ャ」「っ」などの小さい字で
     行が始まるのを防ぐ（禁則処理）。 */
  .hiya-sec__title { min-width: 0; font-size: clamp(15px, calc(7.7vw - 9.5px), 24px);
    padding: 10px 16px; border-width: 3px; line-height: 1.4; line-break: strict; }

  /* 譲れる幅を作るため、両脇の絵も少しだけ小さくする */
  .hiya-sec__illust { width: clamp(38px, 11vw, 52px); }
  .hiya-sec__avatar { height: clamp(42px, 12vw, 58px); max-width: 22vw; }

  /* 下層ページの見出しも同じ。こちらは左のあしらいが無いぶん余裕がある。
     記事タイトルのような長い見出しが入っても、ひやさんは横に居続ける。 */
  .hiya-phead__ttl { flex-wrap: nowrap; gap: 10px; }
  .hiya-phead h1 { min-width: 0; font-size: clamp(18px, calc(7vw - 3px), 32px);
    padding: 10px 18px; border-width: 3px; line-height: 1.4; line-break: strict; }
}

/* --- スマホでお問い合わせの箱の見出しを一行に収める --- */
/* 「お仕事のご依頼・ご相談はこちら」が「…はこ／ちら」と2文字だけ落ちて不格好だった。
   箱の左右の余白を詰めたうえで、文字の大きさを画面幅から逆算する。
   15文字ぶんが必ず一行に収まる寸法。
   （それ以上長い見出しに変えたときは、text-wrap:balance が
     読みやすい位置で二行に分けてくれる） */
@media (max-width: 720px) {
  .hiya-cta { padding: 44px 16px; }
  .hiya-cta h2 { font-size: clamp(16px, calc(6.4vw - 4.8px), 32px);
    text-wrap: balance; line-break: strict; }
}

/* 小さい端末では、ボタンの左右の余白のせいで
   「キャスティングの実績を見る」の最後の一文字だけが落ちていた。余白を詰める。 */
@media (max-width: 380px) { .hiya-btn { padding-inline: 22px; } }

/* --- 空のセクションに出す案内。ログイン中の運営者にだけ見せる --- */
.hiya-empty { background: #fff; border: 3px dashed var(--hiya-line); border-radius: var(--hiya-r);
  padding: 26px 30px; color: var(--hiya-sub); font-size: 14.5px; font-weight: 700; text-align: center; }
.hiya-empty a { color: var(--hiya-accent-d); text-decoration: underline; }