/* =========================================================
  Akari Web | style.css (Rebuild v1)
  Base → Layout → Components → Sections → Utilities
========================================================= */

/* -----------------------------
  1) Design Tokens
----------------------------- */
:root{
  /* Color Theme (旧CSSの世界観を踏襲) */
  --accent: #BF364F; /* 赤 */
  --main:   #4E6BA6; /* 青 */
  --sub:    #B6DAE6; /* 水色 */
  --paper:  #EFEAE4; /* 生成り */
  --gray:   #6E6B62;

  --ink: #222;
  --muted: rgba(34,34,34,.72);
  --line: rgba(34,34,34,.22);

  --radius: 22px;
  --radius-sm: 16px;
  --max: 1120px;

  /* Shadows */
  --shadow-soft: 0 14px 30px rgba(0,0,0,.10);
  --shadow-btn: 4px 4px 0 rgba(34,34,34,.22);
  --shadow-panel: 10px 10px 0 rgba(78,107,166,.20);
  --shadow-panel-strong: 10px 10px 0 rgba(191,54,79,.22);
  --shadow-hero: 10px 10px 0 rgba(191,54,79,.95); /* 漫画っぽいズレ影 */

  /* Panel glow (旧CSSで参照されてたが定義不足だったものを補完) */
  --panel-glow: radial-gradient(
    520px 320px at 88% 12%,
    rgba(30, 120, 180, .18),
    rgba(30, 120, 180, 0) 62%
  );

  /* Spacing */
  --gutter: 22px;
  --gap: 14px;

  /* Type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","Meiryo", sans-serif;
}

/* -----------------------------
  2) Base
----------------------------- */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}

a{
  color: inherit;
  text-decoration: none;
}
a:focus-visible{
  outline: 3px solid rgba(191,54,79,.45);
  outline-offset: 3px;
  border-radius: 10px;
}

/* -----------------------------
  3) Background Layers
----------------------------- */
.manga-bg{
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(110,107,98,.45) 1px, transparent 1px);
  background-size: 10px 10px;
  opacity: .10;
  z-index: -2;
  pointer-events: none;
}
.color-clouds{
  position: fixed;
  inset: 0;
  background:
    radial-gradient(700px 420px at 18% 10%, rgba(182,218,230,.55), transparent 60%),
    radial-gradient(700px 420px at 85% 20%, rgba(78,107,166,.35), transparent 60%),
    radial-gradient(820px 520px at 55% 85%, rgba(191,54,79,.20), transparent 62%);
  z-index: -3;
  pointer-events: none;
}

/* -----------------------------
  4) Layout
----------------------------- */
.wrap{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

/* front-page専用の下余白 */
.wrap.front{
  padding: 26px 0 60px;
}

/* Generic grid */
.grid{
  display: grid;
  gap: clamp(14px, 2vw, 18px);
}

.grid--2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* タブレット2列→スマホ1列 */
@media (max-width: 980px){
  .grid--3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .grid--3{ grid-template-columns: 1fr; }
}

/* -----------------------------
  5) Components: Panel
----------------------------- */
.panel{
  border: 4px solid var(--ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(239,234,228,.60));
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  padding: 20px;
  margin: 18px auto;
  position: relative;
  overflow: hidden;
}

.panel::after{
  opacity: .14;
  z-index: 0;
}
.panel > *{
  position: relative;
  z-index: 1;
}

/* Panel head */
.panelHead{
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.panelHead__title{
  margin: 0 0 8px;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  letter-spacing: -.01em;
}

.panelHead__lead{
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
  max-width: 68ch;
}

.panelHead--left{
  text-align: left;
}

/* -----------------------------
  Services (#services)
----------------------------- */
.panel--services{
  /* パネル内の空気感を少しだけ上品に */
  padding: clamp(18px, 2.2vw, 26px);
}

/* services の3カラム：PCは3→タブレット2→スマホ1 */
.panel--services .grid--3{
  gap: clamp(14px, 2vw, 18px);
}

/* servicesパネル内：上段3カードと事例ブロックの“間”を作る */
.panel--services .servicesWorks{
  margin-top: clamp(20px, 3vw, 40px);
}

@media (max-width: 980px){
  .panel--services .grid--3{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px){
  .panel--services .grid--3{
    grid-template-columns: 1fr;
  }
}

/* 小カード（上段3つ） */
.panel--services .card--sm{
  background: rgba(255,255,255,.62);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 4px 4px 0 rgba(191,54,79,.16); /* うっすら赤の影 */
  min-height: 110px;

  display: flex;
  flex-direction: column;
  gap: 8px;
}

.panel--services .card--sm .card__title{
  margin: 0;
  font-size: 1.02rem;
  letter-spacing: -.01em;
}

.panel--services .card--sm .card__text{
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  font-size: .92rem;
}

/* -----------------------------
  6) Components: Card
----------------------------- */
.card{
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: rgba(239,234,228,.72);
  padding: 14px;
  box-shadow: 6px 6px 0 rgba(191,54,79,.18);
  position: relative;
  z-index: 1;
}

.card--sm{
  padding: 14px;
}

.card--media{
  padding: 0;
  overflow: hidden;
  background: rgba(255,255,255,.78);
}

.card__title{
  margin: 0 0 6px;
  font-size: 1rem;
}

.card__text{
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
  font-size: .95rem;
}

/* -----------------------------
  7) Components: Button
----------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 2px solid var(--ink);
  background: #fff;
  font-weight: 950;
  letter-spacing: .02em;
  box-shadow: var(--shadow-btn);
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
}
.btn.primary{
  background: var(--accent);
  color: #fff;
  border-color: rgba(0,0,0,.12);
  box-shadow: 6px 6px 0 rgba(34,34,34,.25);
}
.btn.secondary{
  background: rgba(182,218,230,.55);
}

/* -----------------------------
  8) Common helpers used in sections
----------------------------- */
.list{
  margin: 10px 0 0;
  padding-left: 1.1em;
  color: var(--muted);
  line-height: 1.9;
}
.list li{ margin: 0 0 6px; }

/* -----------------------------
  9) Sections: Works baseline layout
----------------------------- */
.workTile{
  display: grid;
  gap: 10px;
  align-content: start;
}

.workTile__media{
  display: block;
  text-decoration: none;
}

.workTile__cta.btn{
  width: 100%;
}

/* -----------------------------
  10) Sections: Profile baseline layout
----------------------------- */
.profileBlock{
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.profileBlock__photo{
  margin: 0;
}

.profileBlock__photo img{
  width: 100%;
  display: block;
  border-radius: 18px;
  border: 2px solid rgba(34,34,34,.18);
  box-shadow: var(--shadow-soft);
}

.profileBlock__body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.profileBlock__text{
  margin: 10px 0 14px;
  color: var(--muted);
  line-height: 1.9;
  max-width: none;
}

.profileBlock__body .btn{
  align-self: flex-start;
}

/* -----------------------------
  11) Sections: Yomoyama baseline
----------------------------- */
.mediaItem{
  display: grid;
  gap: 10px;
}
.mediaCard img{
  width: 100%;
  height: auto;
}

/* -----------------------------
  12) Sections: Q&A baseline
----------------------------- */
.qaList{
  display: grid;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.qaItem{
  overflow: hidden;
}
.qaItem__q{
  cursor: pointer;
  list-style: none;
  padding: 14px 14px;
  font-weight: 900;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.qaItem__q::-webkit-details-marker{ display:none; }

.qaItem__a{
  padding: 0 14px 14px;
  color: var(--muted);
  line-height: 1.9;
}

.qaItem__tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 10px;
  border: 2px solid var(--ink);
  background: rgba(182,218,230,.55);
  font-weight: 950;
  flex: 0 0 auto;
}
.qaItem__tag--a{
  background: rgba(191,54,79,.14);
}

.sectionCta{
  margin-top: 14px;
  position: relative;
  z-index: 1;
}

/* -----------------------------
  13) Sections: Contact baseline
----------------------------- */
.contactBox{
  position: relative;
  z-index: 1;
}
.contactBox__cta{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 2px dashed rgba(34,34,34,.22);
  background: rgba(255,255,255,.65);
}
.contactBox__lead{
  margin: 0 0 10px;
  color: var(--muted);
}
.contactBox__note{
  margin: 12px 0 0;
  color: rgba(34,34,34,.55);
  font-size: .92rem;
  line-height: 1.8;
}

/* -----------------------------
  14) Responsive
----------------------------- */
@media (max-width: 980px){
  .wrap{
    width: min(var(--max), calc(100% - 28px));
  }

  .grid--3{ grid-template-columns: 1fr; }
  .grid--2{ grid-template-columns: 1fr; }

  .profileBlock{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
  HERO (front-page)
========================================================= */
/* =========================================================
  HERO (front-page) - OLD CSS faithful rebuild
========================================================= */

/* 旧：背景に cover 画像＋紙グラデ :contentReference[oaicite:2]{index=2} */
.home .hero{
  min-height: 100svh;
  margin: 18px 18px 0;
  border: 8px solid var(--ink);
  background:
    linear-gradient(180deg, rgba(239,234,228,.75), rgba(239,234,228,.60)),
    url('img/cover.jpg') center/cover; /* 必要に応じて cover.jpg に */
  position: relative;
  overflow: hidden;
}

.home .hero-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  padding: 22px;
}

/* 旧：site-title は4/6で左寄せ＋ちょいmargin :contentReference[oaicite:3]{index=3} */
.home .site-title{
  grid-column: 4 / 6;
  justify-self: start;
  margin-left: 8px;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .06em;
}

/* ★ここが本体：外側(=hero-panel)を傾ける。旧は -6deg & origin 20/40 :contentReference[oaicite:4]{index=4} */
.home .hero-panel{
  grid-column: 5 / 13;
  align-self: center;

  background: rgba(255,255,255,.92);
  border: 4px solid var(--ink);
  border-radius: var(--radius);

  /* 旧CSSは var(--shadow) 参照だったので、新CSS側で定義しておく（下に追記あり） */
  box-shadow: var(--shadow);

  transform: rotate(-6deg);
  transform-origin: 20% 40%;
}

/* 旧：中身は回転させない（文字は水平のまま）:contentReference[oaicite:5]{index=5} */
.home .hero-panel__inner{
  transform: none;
  padding: 32px 34px;
}

.home .hero-panel__inner h1{
  margin: 0 0 10px;
  font-size: clamp(2rem, 4.8vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.home .hero-panel__inner p{
  margin: 0 0 16px;
  color: rgba(34,34,34,.78);
  font-size: 1rem;
  line-height: 2.0;
  max-width: 52ch;
}

.home .cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* walker 旧版 :contentReference[oaicite:6]{index=6} */
.home .hero-walker{
  position: absolute;
  right: 18px;
  top: 110px;
  width: clamp(120px, 28vw, 220px);
  pointer-events: none;
  z-index: 3;
  opacity: .92;
  filter: drop-shadow(0 10px 0 rgba(0,0,0,.08));
}

.home .hero-walker img{
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 980px){
  .home .hero-walker{
    width: clamp(130px, 34vw, 180px);
    right: 8px;
    top: 92px;
  }
}

/* PCでちょい揺れ（旧）:contentReference[oaicite:7]{index=7} */
@media (min-width: 981px){
  .home .hero-walker{ animation: walkerFloat 2.8s ease-in-out infinite; }
  @keyframes walkerFloat{
    0%,100%{ transform: translateY(0) rotate(1deg); }
    50%{ transform: translateY(8px) rotate(-1deg); }
  }
}

/* SP：傾きを弱める。旧は inner を逆回転させてた :contentReference[oaicite:8]{index=8} */
@media (max-width: 980px){
  .home .hero-panel{
    grid-column: 1 / 13;
    transform: rotate(-2.5deg);
  }
  .home .hero-panel__inner{
    transform: rotate(2.5deg);
  }
}

/* =========================================================
  Nav（PC：左固定、画面中央基準） - OLD CSS faithful
========================================================= */
.magazine-nav{
  position: fixed;
  left: 18px;
  top: 60px;       /* ここが肝。ズレたら60→140で調整 */
  transform: none;
  z-index: 1200;

  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 170px;

  /* 台座を消す（前回の白背景の原因を根絶） */
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
}

/* ボタンは全部同じ幅にする */
.magazine-nav a{
  display: flex;
  align-items: center;

  width: 100%;
  white-space: nowrap;

  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  font-weight: 900;
  font-size: .85rem;

  border: 2px solid #fff;
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--accent);
  text-decoration: none;

  transition: transform .12s ease, filter .12s ease;
}
.magazine-nav a:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

/* 相談するだけ反転 */
.magazine-nav a.is-contact{
  background: #fff;
  color: var(--ink);
  border-color: var(--ink);
}

/* visited紫回避（保険） */
.magazine-nav a:visited{ color:#fff; }
.magazine-nav a.is-contact:visited{ color:var(--ink); }

/* ★ */
.magazine-nav .star{
  margin-left: 6px;
  line-height: 1;
}

/* SP（横並び） */
@media (max-width: 820px){
  .magazine-nav{
    position: sticky;
    top: 8px;
    left: 10px;
    right: 10px;

    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;

    padding: 8px;
    border-radius: 12px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(6px);
  }

  .magazine-nav a{
    width: auto;
    padding: 10px 12px;
    font-size: .82rem;
  }

  .magazine-nav a,
  .magazine-nav a:visited{
    color: #fff;
  }
}

/* ① 相談する★を赤に */
.magazine-nav a.is-contact .star{
  color: var(--accent);
}

/* ② PCナビ幅を正解に固定（付箋） */
@media (min-width: 821px){
  .magazine-nav{
    width: 170px !important;
  }
  .magazine-nav a{
    width: 100% !important;
  }
}

@media (min-width: 821px){
  .magazine-nav a{
    padding: 10px 14px !important; /* 正解値に固定 */
  }
}

/* ③ スマホのサイト名ラベル崩れを修正 */
@media (max-width: 820px){
  .site-title{
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    margin-left: 0 !important;

    display: inline-flex;
    width: fit-content;
    white-space: nowrap;     /* ←縦割れ防止の核心 */
    padding: 10px 14px;
  }
}

/* ④ ヒーローパネルを外枠からはみ出させる（正解演出） */
.home .hero{
  overflow: visible !important; /* これで「はみ出し」が可能になる */
}

.home .hero-panel{
  position: relative;
  right: -15px;  /* 右へはみ出す量：必要なら -20〜-60で調整 */
  top: -5px;    /* ちょい上に */
}



/* ===== magazine-nav width hard lock ===== */
@media (min-width: 821px){
  .magazine-nav{
    width: 170px !important;
    max-width: 170px !important;
    min-width: 170px !important;
  }
  .magazine-nav a{
    width: 170px !important;        /* ←100%じゃなくpxで殺す */
    max-width: 170px !important;
    min-width: 170px !important;
  }
}

/* ===== SPナビ：コンテナは横幅でも、ボタンは付箋幅に固定 ===== */
@media (max-width: 820px){
  .magazine-nav{
    left: 10px;
    right: 10px;
    width: auto;
  }

  .magazine-nav a{
    width: 170px !important;      /* 付箋幅で固定 */
    max-width: 170px !important;
    flex: 0 0 170px;              /* 伸びない */
    justify-content: flex-start;  /* 左寄せ（付箋っぽい） */
  }
}

/* ===== SP nav：文字サイズ基準の付箋 ===== */
@media (max-width: 820px){

  .magazine-nav{
    position: sticky;
    top: 8px;
    left: 10px;
    right: 10px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;

    padding: 8px;
    border-radius: 12px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(6px);
  }

  .magazine-nav a{
    width: auto;                 /* ←固定幅をやめる */
    flex: 0 0 auto;              /* ←伸びない */
    white-space: nowrap;

    padding: 10px 14px;          /* 文字＋余白 */
    font-size: .85rem;

    border-radius: 10px;
  }

}

/* =========================================================
  SP magazine-nav FINAL (後勝ちを強制でねじ伏せる)
========================================================= */
@media (max-width: 820px){

  .magazine-nav{
    position: sticky !important;
    top: 8px !important;
    left: 10px !important;
    right: 10px !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;

    width: auto !important;
    padding: 8px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.72) !important;
    backdrop-filter: blur(6px) !important;
  }

  .magazine-nav a{
    width: auto !important;      /* ←文字幅ベース */
    flex: 0 0 auto !important;   /* ←伸びない */
    white-space: nowrap !important;

    padding: 10px 14px !important;
    font-size: .85rem !important;

    border-radius: 10px !important;
  }

  /* 相談する★は赤 */
  .magazine-nav a.is-contact .star{
    color: var(--accent) !important;
  }
}

.panel{
  position: relative;
}

.panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background: radial-gradient(
    700px 420px at 88% 12%,
    rgba(30,120,180,.20),
    rgba(30,120,180,0) 60%
  );

  z-index:0;
}

.panel > *{
  position:relative;
  z-index:1;
}


/* --- CTAボタン：左寄り＋文字幅 --- */
.workTile{
  display: grid;
  gap: 12px;
  align-content: start;
}

.workTile__cta.btn{
  width: fit-content;     /* 文字幅に */
  justify-self: start;    /* 左寄せ */
  align-self: start;
  padding-inline: 18px;   /* ちょい余白が“正解感” */
}



/* クリック要素のせいで枠が崩れないように */
.workTile__media{
  display: block;
  text-decoration: none;
  color: inherit;
}



/* ==============================
   Services内：TV枠を確実に出す（上書き勝ち）
   ============================== */

/* workTileの並び（画像→ボタン） */
.home #services .workTile{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

/* ② ボタンを左寄せ＋文字幅に */
.home #services .workTile__cta{
  align-self:flex-start; /* ← よもやまと同じ効かせ方 */ /*  :contentReference[oaicite:1]{index=1} */
  width: fit-content;
  justify-content:flex-start;
}



/* footer（全ページ共通） */
.site-footer{
  margin: 80px 18px 40px;
  padding: 34px 0;
  border-top: 2px dashed var(--line, rgba(34,34,34,.20));
  color: var(--gray, rgba(34,34,34,.70));
  font-size: .85rem;
}

.site-footer .wrap{
  text-align: center;
  padding: 0 14px;
}

.site-footer strong{
  display:block;
  font-weight:900;
  letter-spacing:.08em;
  margin-bottom:10px;
}

.site-footer .credit{
  margin-top:8px;
  font-size:.75rem;
  color:#7a7a7a; /* opacityじゃなく色で調整 */
}

.site-footer .credit a{
  color:#555;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px dotted #999;
}

.site-footer .credit a:hover{
  color:#000;
  border-bottom-color:#000;
}


.panel--contact .contact__col h3{
  margin: 0 0 8px;
  font-size: 14px;
}

.panel--contact .contact__col ul{
  margin: 0;
  padding-left: 1.1em;
  color: rgba(34,34,34,.85);
  line-height: 1.7;
}

.panel--contact .contact__cta{
  padding-left: 16px;
  border-left: 1px solid rgba(34,34,34,.15);
  text-align: center;
  min-width: 230px;
}

.panel--contact .contact__ctaLead{
  margin: 0 0 10px;
  font-size: 13px;
  color: rgba(34,34,34,.75);
}

.panel--contact .contact__btn{
  gap: 8px;
  box-shadow: rgba(34,34,34,.12) 0 6px 0;
}

.panel--contact .contact__btn:hover{
  transform: translateY(-1px);
}

.panel--contact .contact__btn:active{
  transform: translateY(2px);
  box-shadow: rgba(34,34,34,.12) 0 2px 0;
}

.panel--contact .contact__note{
  margin: 12px 0 0;
  font-size: 12px;
  color: rgba(34,34,34,.6);
}

/* Contact 3カラム基礎 */
.panel--contact .contact__cols{
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px;
  align-items: stretch;
}

/* SP */
@media (max-width: 820px){
  .panel--contact .contact__cols{
    grid-template-columns: 1fr;
  }

  .panel--contact .contact__cta{
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(34,34,34,.15);
    padding-top: 14px;
    text-align: left;
    min-width: auto;
  }
}

/* Worksのサムネ枠が太いのは、card枠が重なってる可能性大 */
.workTile__media.card,
.workTile__media.card--media,
.workShot.card,
.workShot.card--media{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent;
}



/* パネル同士をゆったり */
.panel{
  margin: clamp(26px, 3.2vw, 52px) 18px; /* 上下を増やす */
}

/* パネル内の余白を増やす */
.panel{
  padding: clamp(22px, 3vw, 44px);
}

.grid{
  gap: clamp(16px, 2.6vw, 26px);
}

.panel--works{
  margin-top: clamp(34px, 4vw, 64px);
  margin-bottom: clamp(34px, 4vw, 64px);
}

/* =========================================
   TV UNIT CLEAN
   - front-page / works 共通で使うTV枠
   - 画面には加工しない
   - 立体感は枠だけで出す
========================================= */

.tvUnit{
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  text-decoration: none;
  color: inherit;

  /* 調整用変数 */
  --tv-b: 8px;      /* 外枠の太さ */
  --tv-r: 26px;     /* 外側の角丸 */
  --tv-gap: 14px;   /* 外枠と内枠の距離 */
  --tv-in: 2px;     /* 内枠の太さ */
}

.tvUnit__frame{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--tv-r);
  overflow: hidden;
  display: block;
  background: transparent;
}

/* 画面部分 */
.tvUnit__screen{
  position: absolute;
  inset: var(--tv-b);
  border-radius: calc(var(--tv-r) - var(--tv-b));
  overflow: hidden;
  background: #000;
  z-index: 1;
}

/* 画像 */
.tvUnit__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  opacity: 0;
  transition: opacity 520ms ease;

  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}

.tvUnit__img.is-active{
  opacity: 1;
}

/* 外枠 */
.tvUnit__bezel{
  position: absolute;
  inset: 0;
  border-radius: var(--tv-r);
  pointer-events: none;
  z-index: 3;

  border: var(--tv-b) solid var(--ink);
  box-shadow: 6px 6px 0 rgba(0,0,0,.12);
}

/* 枠のツヤ */
.tvUnit__bezel::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background:
    radial-gradient(
      120px 90px at 14% 12%,
      rgba(255,255,255,.50),
      rgba(255,255,255,0) 65%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.20),
      rgba(255,255,255,0) 38%
    );
  mix-blend-mode: screen;
  opacity: .9;
}

/* 内枠 */
.tvUnit__inner{
  position: absolute;
  inset: calc(var(--tv-b) + var(--tv-gap));
  border-radius: calc(var(--tv-r) - var(--tv-b) - var(--tv-gap));
  border: var(--tv-in) solid rgba(0,0,0,.32);
  pointer-events: none;
  z-index: 4;
}

/* ラベル */
.tvUnit__label{
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: 10px 14px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.70);
  font-weight: 800;
  line-height: 1;
}

.tvUnit__play{
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.25);
  background: rgba(255,255,255,.92);
  font-size: 12px;
}

/* ラベル非表示版 */
.tvUnit--nolabel .tvUnit__label{
  display: none;
}

/* services内の並び */
.home #services .workTile{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home #services .workTile__cta{
  align-self: flex-start;
  width: fit-content;
  justify-content: flex-start;
}

/* 念のため、旧cardの枠が被らないようにする */
.workTile__media.card,
.workTile__media.card--media,
.workShot.card,
.workShot.card--media{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* =========================================
   Media Card
========================================= */

.panel--media .panelHead__lead{
  max-width: 60ch;
}

.mediaGrid{
  align-items: start;
}

.mediaCard{
  display: grid;
  gap: 14px;
  align-content: start;
}

.mediaCard__thumb{
  display: block;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  box-shadow: 6px 6px 0 rgba(0,0,0,.10);
  text-decoration: none;
}

.mediaCard__thumb img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.mediaCard__body{
  display: grid;
  gap: 10px;
  align-content: start;
}

.mediaCard__label{
  margin: 0;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--main);
}

.mediaCard__title{
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: -.01em;
}

.mediaCard__title a{
  text-decoration: none;
}

.mediaCard__title a:hover{
  opacity: .82;
}

.mediaCard__cta{
  width: fit-content;
  justify-self: start;
}

@media (max-width: 820px){
  .mediaCard__thumb img{
    aspect-ratio: 16 / 10;
  }
}

/* =========================================
   Media Card / Featured
========================================= */

.panel--media{
  overflow: visible;
}

.mediaFeaturedList{
  display: grid;
  gap: clamp(22px, 3vw, 38px);
}

.mediaCard{
  position: relative;
}

/* -----------------------------
   featured 基本形
----------------------------- */
.mediaCard--featured{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  align-items: center;
  gap: clamp(18px, 3vw, 42px);

  padding: clamp(28px, 4vw, 48px);
  border-radius: 28px;
  background: #1b1209;
  color: #eaf1ff;
  overflow: hidden;

  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 18px 40px rgba(0,0,0,.10);
}

.mediaCard--featured .mediaCard__content{
  max-width: 32rem;
  position: relative;
  z-index: 2;
}

.mediaCard--featured .mediaCard__label{
  display: inline-block;
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px dotted rgba(255,107,122,.6);
  color: #BF364F;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mediaCard--featured .mediaCard__title{
  margin: 0 0 18px;
  color: #eaf1ff;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.22;
  letter-spacing: -.02em;
}

.mediaCard--featured .mediaCard__title a{
  color: inherit;
  text-decoration: none;
}

.mediaCard--featured .mediaCard__title a:hover{
  opacity: .86;
}

.mediaCard--featured .mediaCard__desc{
  margin: 0 0 26px;
  color: rgba(234,241,255,.96);
  font-size: clamp(1rem, 1.25vw, 1.08rem);
  line-height: 1.85;
  white-space: normal;
}

.mediaCard--featured .mediaCard__cta{
  width: fit-content;
  justify-self: start;
  background: #BF364F;
  color: #fff;
  border-color: rgba(0,0,0,.12);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(191,54,79,.35);
  transition: .2s;
}

.mediaCard--featured .mediaCard__cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(191,54,79,.45);
}

.mediaCard--featured .mediaCard__visual{
  display: block;
  position: relative;
  z-index: 1;
  text-decoration: none;
}

.mediaCard--featured .mediaCard__visual img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
}

/* -----------------------------
   note / podcast 差分
----------------------------- */
.mediaCard--note .mediaCard__visual{
  transform: translateX(12px);
}

.mediaCard--podcast .mediaCard__visual{
  transform: translateX(-8px);
}

/* -----------------------------
   reveal
----------------------------- */
.js-reveal{
  opacity: 0;
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.8,.2,1);
  will-change: transform, opacity;
}

.js-reveal.reveal-left{
  transform: translateX(-44px);
}

.js-reveal.reveal-right{
  transform: translateX(44px);
}

.js-reveal.reveal-up{
  transform: translateY(28px);
}

.js-reveal.is-visible{
  opacity: 1;
  transform: translate(0, 0);
}

/* -----------------------------
   レスポンシブ
----------------------------- */
@media (max-width: 980px){
  .mediaCard--featured{
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 26px;
  }

  .mediaCard--featured .mediaCard__title{
    font-size: clamp(1.7rem, 6vw, 2.6rem);
  }

  .mediaCard--note .mediaCard__visual,
  .mediaCard--podcast .mediaCard__visual{
    transform: none;
  }

  .mediaCard--featured .mediaCard__visual{
    order: -1;
  }

  .mediaCard--featured .mediaCard__visual img{
    width: 100%;
  }
}

@media (max-width: 620px){
  .mediaCard--featured{
    padding: 20px;
  }

  .mediaCard--featured .mediaCard__label{
    margin-bottom: 14px;
    padding: 8px 12px;
    font-size: .78rem;
  }

  .mediaCard--featured .mediaCard__title{
    margin-bottom: 14px;
    line-height: 1.22;
  }

  .mediaCard--featured .mediaCard__desc{
    margin-bottom: 18px;
    line-height: 1.75;
  }
}


.workTile{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.workTile__title{
  position: static;
  display: block;
  margin: 0 0 6px;
  padding: 0 4px;

  font-size: 1.1rem;        /* ←ちょいアップ */
  font-weight: 700;
  letter-spacing: 0.02em;   /* ←少しだけ締まる */

  line-height: 1.4;

  color: #222;              /* ←明示して安定 */
}

@media (max-width: 768px){

  .workTile{
    margin-bottom: 28px;
  }

}


.pricePage {
  padding-bottom: 96px;
}

.panel--priceHero {
  padding-top: 32px;
}

.priceCardGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.serviceCard {
  height: 100%;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.serviceCard__inner {
  padding: 28px;
}

.serviceCard__title {
  margin: 0 0 12px;
}

.serviceCard__lead {
  margin: 0 0 16px;
}

.serviceCard__list {
  margin: 0 0 20px;
  padding-left: 1.2em;
}

.serviceCard__price {
  margin: 0;
  font-weight: 700;
  font-size: 1.125rem;
}

.priceFlow {
  display: grid;
  gap: 12px;
  padding-left: 1.2em;
}

.contactGuide {
  display: grid;
  gap: 20px;
}

.contactGuide__item {
  padding: 24px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  background: #fff;
}

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

.priceBasicBlock {
  margin-top: 32px;
}

.priceVisual {
  margin-bottom: 24px;
  border-radius: 24px;
  overflow: hidden;
}

.priceVisual img {
  display: block;
  width: 100%;
  height: auto;
}

.priceBasicTable {
  margin-top: 32px;
  display: grid;
  gap: 16px;
}

.priceRow {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) max-content;
  gap: 24px;
  align-items: start;

  padding: 20px 24px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: #fff;
}

.priceRow__title {
  font-weight: 700;
}

.priceRow__desc ul {
  margin: 0;
  padding-left: 1.2em;
}

.priceRow__price {
  font-weight: 700;
  font-size: 1.1rem;
  text-align: right;
  white-space: nowrap;
}

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

  .priceRow__price {
    text-align: left;
    margin-top: 8px;
  }
}

.serviceCard--name { border-top: 4px solid #aaa; }
.serviceCard--mono { border-top: 4px solid #666; }
.serviceCard--color { border-top: 4px solid #c33; }

.priceHistory {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
  margin-top: 32px;
}

.priceHistory__visual img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}

.priceHistory__lead {
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.priceHistory__points {
  padding-left: 1.2em;
}

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

.panel--priceHistory {
  background: rgba(255,255,255,.4);
}

.historyPlanGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.historyPlan {
  padding: 28px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.historyPlan__label {
  font-size: 0.85rem;
  opacity: 0.7;
}

.historyPlan__title {
  font-size: 1.2rem;
  margin: 0;
}

.historyPlan__desc {
  font-size: 0.95rem;
  line-height: 1.6;
}

.historyPlan__list {
  padding-left: 1.2em;
  margin: 0;
}

.historyPlan__price {
  margin-top: auto;
  font-weight: 700;
  font-size: 1.3rem;
}

/* ★ 強調（30周年） */
.historyPlan--featured {
  border: 2px solid #c44;
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
  transform: translateY(-6px);
  position: relative;
}

.historyPlan__badge {
  position: absolute;
  top: -10px;
  left: 16px;
  background: #c44;
  color: #fff;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

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

  .historyPlan--featured {
    transform: none;
  }
}

.priceHistory__visual img {
  box-shadow: 0 30px 80px rgba(0,0,0,.18);
}

.panel--priceHistory {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.2),
    rgba(255,255,255,0.5)
  );
}

.priceNote {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.08);
  font-size: 0.85rem;
  line-height: 1.6;
  opacity: 0.8;
}

.priceNote a {
  color: #c44;
  text-decoration: none;
  border-bottom: 1px solid #c44;
  transition: all .2s ease;
}

.priceNote a:hover {
  opacity: 0.7;
  border-bottom: 1px solid transparent;
}

.historyNote {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.historyNote__lead {
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.historyNote__sub {
  font-size: 0.85rem;
  line-height: 1.6;
  opacity: 0.75;
}

.historyNote a {
  color: #c44;
  text-decoration: underline;
}

.optionGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.optionItem {
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.optionItem:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.optionItem__title {
  font-size: 1rem;
  margin-bottom: 6px;
}

.optionItem__price {
  font-weight: bold;
  margin-bottom: 8px;
}

.optionItem__desc {
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.8;
}

.optionItem__link {
  display: inline-block;
  margin-top: 8px;
  color: #c44;
  text-decoration: underline;
  font-size: 0.9rem;
}

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

.flow {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}

.flowItem {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
}

.flowItem__num {
  font-weight: bold;
  color: #c44;
  line-height: 1.2;
}

.flowItem__body h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.flowItem__body p {
  margin: 6px 0 0;
  font-size: 0.9rem;
  line-height: 1.7;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .flowItem {
    grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 16px;
  }

  .flowItem__body h3 {
    font-size: 0.98rem;
  }

  .flowItem__body p {
    font-size: 0.88rem;
  }
}

.corpLink {
  color: #c44;
  text-decoration: underline;
  font-weight: 500;
}

.corpLink:hover {
  opacity: 0.7;
}

.priceIndex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.priceIndex a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: inherit;
  text-decoration: none;
  font-size: 0.92rem;
  transition: .2s ease;
}

.priceIndex a:hover {
  color: #c44;
  border-color: #c44;
}

@media (max-width: 768px) {
  .priceIndex {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .priceIndex a {
    justify-content: center;
    padding: 10px 12px;
    min-height: 44px;
    text-align: center;
  }
}

/* ==============================
   pageHero
============================== */
.panel--pageHero {
  border: none;
  box-shadow: none;
  padding: 48px 32px 40px;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.58),
    rgba(210,223,236,0.42)
  );
  border-radius: 28px;
}

.panelHead--pageHero .panelHead__eyebrow {
  margin: 0 0 10px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

.panelHead--pageHero .panelHead__title {
  margin-top: 8px;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.35;
}

.panelHead--pageHero .panelHead__lead {
  margin-top: 12px;
  max-width: 42rem;
  line-height: 1.9;
}

.pageHero__index {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.pageHero__index a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  color: inherit;
  text-decoration: none;
  font-size: 0.92rem;
  transition: .2s ease;
}

.pageHero__index a:hover {
  color: #c44;
  border-color: #c44;
}

.pageHero__cta {
  margin-top: 18px;
}

@media (max-width: 768px) {
  .panel--pageHero {
    padding: 36px 20px 28px;
    border-radius: 24px;
  }

  .panelHead--pageHero .panelHead__title {
    font-size: 1.7rem;
  }

  .panelHead--pageHero .panelHead__lead {
    line-height: 1.8;
  }

  .pageHero__index {
    gap: 8px;
    margin-top: 20px;
  }

  .pageHero__index a {
    min-height: 38px;
    padding: 0 12px;
    font-size: 0.88rem;
  }
}

/* =========================
   Profile Hero photo layout
========================= */

.panel--profileHero{
  padding: 36px 32px;
}

.profileHero__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 320px;
  gap: 32px;
  align-items: center;
}

.profileHero__body{
  min-width: 0;
}

.profileHero__photo{
  margin: 0;
}

.profileHero__photo img{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

.panel--profileHero .panelHead{
  margin-bottom: 0;
}

.panel--profileHero .pageHero__index{
  margin-top: 24px;
}

/* tablet */
@media (max-width: 960px){
  .profileHero__grid{
    grid-template-columns: 1fr 280px;
    gap: 24px;
  }
}

/* mobile */
@media (max-width: 768px){
  .profileHero__grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .profileHero__photo{
    order: -1;
    max-width: 280px;
  }
}


#basic-price,
#history-price,
#option-price,
#flow-price,
#contact-guide {
  scroll-margin-top: 110px;
}

.panel--profileHero .panelHead__eyebrow{
  margin: 0 0 10px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}


.panel--profileHero .panelHead__lead{
  max-width: 46rem;
}


.profileStory{
  max-width: 46rem;
}

.profileStory p{
  margin: 0 0 1.2em;
  line-height: 2;
  color: var(--muted);
}

.profileBlock{
  max-width: none;
}

.profileBlock p{
  line-height: 2;
  margin-bottom: 1.2em;
}

.panelSplit{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.panelSplit__media img{
  width: 100%;
  border-radius: 16px;
}

.careerList li,
.workList li,
.clientsList li{
  margin-bottom: 8px;
  line-height: 1.8;
}

.panel--history .panelHead__lead{
  max-width: 44rem;
}

.historyStack{
  display: grid;
  gap: 18px;
}

.historyItem{
  padding: 20px 22px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.35);
}

.historyItem__title{
  margin: 0 0 12px;
  font-size: 1.02rem;
  line-height: 1.6;
  letter-spacing: -.01em;
}

.historyItem__body p{
  margin: 0 0 .9em;
  color: #444;
  line-height: 1.95;
}

.historyItem__body p:last-child{
  margin-bottom: 0;
}

.panel--historyVisual{
  position: relative;
  overflow: hidden;
}

.historyVisual__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  pointer-events: none;

  opacity: .22;
  filter: grayscale(100%) contrast(108%);
}

.panel--historyVisual .panelHead,
.panel--historyVisual .historyStack{
  position: relative;
  z-index: 1;
}

@media (max-width: 768px){
  .historyItem{
    padding: 16px 16px;
    border-radius: 16px;
  }

  .historyItem__title{
    font-size: .98rem;
  }

  .historyItem__body p{
    line-height: 1.85;
  }
}

.clientList{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px 32px;
  list-style: none;
  padding: 0;
}

.clientList li{
  font-size: 0.95rem;
  line-height: 1.9;
  color: #444;
}

/* タブレット */
@media (max-width: 900px){
  .clientList{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマホ */
@media (max-width: 600px){
  .clientList{
    grid-template-columns: 1fr;
  }
}

/* =========================
   NOW（splitレイアウト）
========================= */

.panelSplit{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}

/* 画像 */
.panelSplit__media img{
  width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
}

/* テキスト */
.panelSplit__body{
  max-width: 42rem;
}

.panelSplit__body p{
  margin-bottom: 1.2em;
  line-height: 1.9;
  color: #444;
}

/* =========================
   スマホ対応
========================= */

@media (max-width: 768px){

  .panelSplit{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .panelSplit__media{
    order: -1; /* 画像を上に */
  }

  .panelSplit__media img{
    border-radius: 14px;
  }

  .panelSplit__body{
    max-width: 100%;
  }

  .panelHead__title{
    font-size: 1.3rem;
    line-height: 1.5;
  }

}

/* =========================
   WORK ENV
========================= */

.workList{
  list-style: none;
  padding: 0;
  margin-top: 18px;
  display: grid;
  gap: 16px;
}

.workList li{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items: start;
}

.workList__label{
  font-size: 0.85rem;
  color: #777;
  letter-spacing: .04em;
}

.workList__body{
  font-size: 0.95rem;
  line-height: 1.9;
  color: #444;
}

/* スマホ */
@media (max-width: 768px){
  .workList li{
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .workList__label{
    font-size: 0.8rem;
  }
}

.workEnv{
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 32px;
  align-items: start;
  margin-top: 24px;
}

.workEnv__media img{
  width: 100%;
  border-radius: 16px;
  display: block;
}

/* スマホ */
@media (max-width: 768px){
  .workEnv{
    grid-template-columns: 1fr;
  }
}

/* =========================
   Works page / latest cards
========================= */

.worksArchiveGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 20px;
}

.worksArchiveGrid > *{
  min-width: 0;
}

.worksCard{
  min-width: 0;
}

.worksCard__link{
  display: block;
  cursor: pointer;
}

.worksCard__more{
  display: inline-block;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.worksCard__thumb{
  margin: 0 0 14px;
  aspect-ratio: 4 / 4;
  overflow: hidden;
  border-radius: 8px;
  background: #f3f3f3;
}

.worksCard__thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.worksCard__body{
  min-width: 0;
}

.worksCard__category{
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(34,34,34,.72);
}

.worksCard__title{
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
  max-height: calc(1.45em * 2);
  overflow: hidden;
}

.worksCard__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.worksCard__tags li{
  font-size: 12px;
  line-height: 1.4;
  color: rgba(34,34,34,.82);
}

.worksCard__excerpt{
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(34,34,34,.88);
  max-height: calc(1.75em * 3);
  overflow: hidden;
  background: transparent;
  word-break: break-word;
}

.worksCard__more{
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: transparent;
}

.worksArchiveEmpty{
  margin: 0;
  font-size: 14px;
  color: rgba(34,34,34,.72);
}

@media (max-width: 980px){
  .worksArchiveGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .worksArchiveGrid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .worksCard__title{
    font-size: 17px;
  }
}

/* =========================
   Works Single
========================= */

.worksSingle{
  display: grid;
  gap: 32px;
}

.workSingleArticle{
  display: grid;
  gap: 32px;
}

.workHero{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 32px;
  align-items: center;
}

.workHero__body{
  min-width: 0;
}

.workHero__category{
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(34,34,34,.72);
}

.workHero__title{
  margin: 0 0 22px;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.2;
}

.workHero__media{
  margin: 0;
}

.workHero__media img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4;
  object-fit: cover;
  border-radius: 16px;
  background: #f3f3f3;
}

.workHero__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.workHero__tags li{
  font-size: 12px;
  line-height: 1.4;
  color: rgba(34,34,34,.82);
}

.workMeta{
  display: grid;
  gap: 14px;
  margin: 0;
}

.workMeta__row{
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  align-items: start;
}

.workMeta__label{
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(34,34,34,.55);
}

.workMeta__value{
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(34,34,34,.92);
  word-break: break-word;
}

.workMeta__value a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================
   Works gallery / WP block
========================= */

.workGalleryEditor .wp-block-gallery,
.workGalleryEditor .wp-block-gallery.has-nested-images{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: start;
}

.workGalleryEditor .wp-block-gallery > .wp-block-image{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: stretch !important;
  align-self: start !important;
}

.workGalleryEditor .wp-block-gallery > .wp-block-image > a{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  text-decoration: none;
}

.workGalleryEditor .wp-block-gallery > .wp-block-image > img,
.workGalleryEditor .wp-block-gallery > .wp-block-image > a > img{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  border-radius: 12px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.workGalleryEditor .wp-block-gallery figcaption,
.workGalleryEditor .wp-block-gallery .wp-element-caption{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(34,34,34,.68);
}

@media (max-width: 640px){
  .workGalleryEditor .wp-block-gallery,
  .workGalleryEditor .wp-block-gallery.has-nested-images{
    grid-template-columns: 1fr !important;
  }

  .workGalleryEditor .wp-block-gallery > .wp-block-image > img,
  .workGalleryEditor .wp-block-gallery > .wp-block-image > a > img{
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
}


/* =========================
   Lightbox
========================= */

.lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.88);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}

.lightbox.is-active{
  opacity: 1;
  visibility: visible;
}

.lightbox__img{
  display: block;
  max-width: min(82vw, 960px);
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}

.lightbox__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .2s ease;
}

.lightbox__btn:hover{
  background: rgba(255,255,255,.22);
}

.lightbox__btn--prev{
  left: 18px;
}

.lightbox__btn--next{
  right: 18px;
}

.lightbox__close{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lightbox__counter{
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 64px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  text-align: center;
}

@media (max-width: 640px){
  .lightbox__counter{
    bottom: 10px;
    font-size: 12px;
    padding: 7px 10px;
  }

  .lightbox__img{
    max-width: 86vw;
    max-height: 68vh;
  }

  .lightbox__btn{
    width: 42px;
    height: 42px;
    font-size: 20px;
  }

  .lightbox__btn--prev{
    left: 10px;
  }

  .lightbox__btn--next{
    right: 10px;
  }

  .lightbox__close{
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

.workPdf{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.workPdf__item{
  display: grid;
  gap: 6px;
  justify-items: start; /* ←これ！ */
}

.workPdf__label{
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: rgba(34,34,34,.7);
}

.workPdf__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(34,34,34,.16);
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
}

.workPdf__link:hover{
  transform: translateY(-1px);
}

/* =========================
   Work Note（備考）完全制御版
========================= */

.workNote{
  font-size: 16px;
  line-height: 1.9;
  color: #222;
}

/* テキスト系をすべて継承に統一 */
.workNote p,
.workNote li,
.workNote a,
.workNote span,
.workNote strong,
.workNote em{
  font-size: inherit;
  line-height: inherit;
}

/* 段落 */
.workNote p{
  margin: 0 0 1em;
}

.workNote p:last-child{
  margin-bottom: 0;
}

/* 見出し（全部段落サイズに潰す） */
.workNote h1,
.workNote h2,
.workNote h3,
.workNote h4,
.workNote h5,
.workNote h6,
.workNote .wp-block-heading{
  font-size: 1em;
  font-weight: 600;
  line-height: inherit;
  margin: 0 0 0.8em;
}

/* リスト */
.workNote ul,
.workNote ol{
  margin: 0 0 1em 1.4em;
  padding: 0;
  line-height: 1.8;
}

.workNote li + li{
  margin-top: 0.35em;
}

/* リンク（hover復活） */
.workNote a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s ease;
}

.workNote a:hover{
  color: #0073aa; /* 好きな色に変えてOK */
}

/* 画像などが来ても崩れないように */
.workNote img{
  max-width: 100%;
  height: auto;
}

.worksArchiveGrid--related{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

  .worksArchiveGrid--related{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .workMeta__row{
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .workHero__title{
    margin-bottom: 18px;
  }

  .workHero__tags{
    margin-top: 18px;
  }
}

/* ===============================
  業種（ピル）
=============================== */
.worksCard__industry{
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 700;
  color: #222;
}

/* 一覧（リンクなし） */
.worksCard__industry span,
.worksCard__industry a{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34,34,34,.06);
  color: inherit;
  text-decoration: none;
}

.worksCard__industry{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.worksCard__thumbLink{
  display: block;
  color: inherit;
  text-decoration: none;
}

.worksCard__title a{
  color: inherit;
  text-decoration: none;
}

.worksCard__title a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}

.worksCard__industry a:hover{
  transform: translateY(-1px);
}

.worksCard__more{
  display: inline-block;
}


/* single（リンクあり用） */
.worksCard__industry a{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(34,34,34,.16);
  color: inherit;
  text-decoration: none;
  transition: .2s;
}

.worksCard__industry a:hover{
  transform: translateY(-1px);
}


/* ===============================
  タグ
=============================== */

/* single（クリックできる） */
.workHero__tags a{
  color: #555;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: .2s;
}

.workHero__tags a:hover{
  color: #000;
}


/* ===============================
  その他リンク
=============================== */
.workMeta__value a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================
   Works archive pages
   tag.php / taxonomy-industry.php
========================= */

.worksArchivePage{
  display: grid;
  gap: 32px;
}

.panel--worksArchiveHero .panelHead__lead{
  max-width: 760px;
}

.worksArchiveHero__meta{
  margin: 16px 0 0;
}

.worksArchiveHero__meta span{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(34,34,34,.06);
  font-size: 13px;
  line-height: 1.4;
  color: rgba(34,34,34,.72);
}

.panel--worksArchiveList{
  display: grid;
  gap: 20px;
}

/* ページ送り */
.worksArchivePagination{
  margin-top: 28px;
}

.worksArchivePagination .page-numbers{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.worksArchivePagination .page-numbers li{
  margin: 0;
  padding: 0;
}

.worksArchivePagination a,
.worksArchivePagination span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(34,34,34,.14);
  font-size: 13px;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  background: #fff;
}

.worksArchivePagination .current{
  background: #222;
  color: #fff;
  border-color: #222;
  font-weight: 700;
}

.worksArchivePagination a:hover{
  transform: translateY(-1px);
}

/* スマホ */
@media (max-width: 640px){
  .worksArchiveHero__meta{
    margin-top: 14px;
  }

  .worksArchivePagination{
    margin-top: 24px;
  }
}

/* =========================
   Works page / industry nav
========================= */

.worksIndustryNav{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.worksIndustryNav__link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(34,34,34,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.worksIndustryNav__link:hover{
  transform: translateY(-1px);
  border-color: rgba(34,34,34,.24);
  background: rgba(255,255,255,.92);
}

.worksIndustryNav__name{
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  color: #222;
}

.worksIndustryNav__count{
  font-size: 12px;
  line-height: 1.4;
  color: rgba(34,34,34,.58);
}

@media (max-width: 640px){
  .worksIndustryNav{
    gap: 10px;
  }

  .worksIndustryNav__link{
    width: 100%;
    justify-content: space-between;
  }
}

/* =========================
   Contact Form 基本
========================= */

.form-container{
  max-width: 720px;
  margin: 40px auto 0;
}

/* 各ブロック */
.form-group{
  margin-bottom: 22px;
}

/* ラベル */
.form-group label{
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  color: rgba(34,34,34,.85);
  font-weight: 600;
}

/* 入力系 */
.form-group input,
.form-group textarea,
.form-group select{
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(34,34,34,.15);
  background: #fff;
  font-size: 14px;
  transition: all .2s ease;
}

/* フォーカス */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
  outline: none;
  border-color: #BF364F;
  box-shadow: 0 0 0 2px rgba(191,54,79,.15);
}

/* テキストエリア */
.form-group textarea{
  min-height: 160px;
  line-height: 1.6;
}

/* チェックボックス・ラジオ */
.form-group input[type="checkbox"],
.form-group input[type="radio"]{
  width: auto;
  margin-right: 6px;
}

/* =========================
   送信ボタン
========================= */

.form-submit{
  margin-top: 30px;
  text-align: center;
}

.form-submit input[type="submit"]{
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: #BF364F;
  color: #fff;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: rgba(191,54,79,.25) 0 6px 14px;
}

/* hover */
.form-submit input[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: rgba(191,54,79,.35) 0 10px 18px;
}

/* active */
.form-submit input[type="submit"]:active{
  transform: translateY(1px);
  box-shadow: rgba(191,54,79,.25) 0 4px 10px;
}

.worksPager{
  margin-top: 32px;
}

.worksPager .page-numbers{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.worksPager .page-numbers li{
  margin: 0;
  padding: 0;
}

.worksPager .page-numbers a,
.worksPager .page-numbers span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(34,34,34,.16);
  border-radius: 999px;
  background: #fff;
  color: #222;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
}

.worksPager .page-numbers a:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(34,34,34,.08);
}

.worksPager .page-numbers .current{
  background: #222;
  color: #fff;
  border-color: #222;
}

.worksPager .page-numbers .dots{
  min-width: auto;
  padding: 0 4px;
  border: 0;
  background: transparent;
}

.worksMore{
  margin-top: 28px;
  text-align: center;
}

.worksMore__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 14px 22px;
  border: 1px solid rgba(34,34,34,.16);
  border-radius: 999px;
  background: #fff;
  color: #222;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(34,34,34,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.worksMore__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(34,34,34,.10);
}


.workTile__purpose{
  margin: 4px 0 10px;
  font-size: 12px;
  color: rgba(34,34,34,.5);
}

.panel--worksGuide .servicesWorks{
  margin-top: clamp(20px, 3vw, 40px);
}


.workGalleryEditor img{
  cursor: zoom-in;
}

.workGalleryEditor img:hover{
  transform: scale(1.02);
}

.worksMore{
  margin-top: 32px;
  text-align: center;
}

.site-title{
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

.site-title:hover{
  opacity: 0.8;
}

.site-footer{
  margin-top: 96px;
  padding: 48px 0 56px;
  border-top: 1px dashed rgba(34,34,34,.14);
}

.footer-nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
  margin: 0 0 28px;
}

.footer-nav a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid #222;
  border-radius: 14px;
  background: #fff;
  color: #222;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 4px 4px 0 #d6405d;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.footer-nav a:hover{
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #d6405d;
}

.footer-nav a.is-contact{
  background: #f7f3f4;
}

.site-footer__meta{
  text-align: center;
}

.site-footer__title{
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
}

.site-footer__tagline,
.site-footer__copy,
.site-footer .credit{
  margin: 8px 0 0;
  color: rgba(34,34,34,.72);
  font-size: 14px;
  line-height: 1.8;
}

.site-footer .credit a{
  color: inherit;
  text-underline-offset: 2px;
}

@media (max-width: 767px){
  .site-footer{
    margin-top: 72px;
    padding: 40px 0 48px;
  }

  .footer-nav{
    gap: 10px;
    margin-bottom: 24px;
  }

  .footer-nav a{
    min-height: 40px;
    padding: 0 14px;
    font-size: 14px;
    border-radius: 12px;
    box-shadow: 3px 3px 0 #d6405d;
  }

  .site-footer__title{
    font-size: 16px;
  }

  .site-footer__tagline,
  .site-footer__copy,
  .site-footer .credit{
    font-size: 13px;
  }
}

/* =========================================
   HERO remake 2026-04
   白パネル＋右側walker動画版
   PC/Tabletのみ動画表示、SPは非表示
========================================= */

.home .hero{
  min-height: 100svh;
  margin: 18px 18px 0;
  border: 8px solid var(--ink);
  background:
    linear-gradient(180deg, rgba(239,234,228,.72), rgba(239,234,228,.58)),
    url('img/cover.jpg') center/cover;
  position: relative;
  overflow: visible !important;
}

.home .hero-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  padding: 22px;
  align-items: start;
}

/* サイトタイトル */
.home .site-title{
  grid-column: 4 / 6;
  justify-self: start;
  margin-left: 8px;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .06em;
  position: relative;
  z-index: 5;
}

/* コマ本体 */
.home .hero-panel{
  grid-column: 5 / 11;
  position: relative;
  right: -8px;
  top: 2px;
  background: #f6f6f4;
  border: 4px solid var(--ink);
  border-radius: 28px;
  box-shadow: 12px 12px 0 rgba(191,54,79,.16);
  transform: rotate(-4.2deg);
  transform-origin: 20% 40%;
  overflow: hidden;
}

/* 右側の演出帯
   動画の矩形境界を“見せない”ための受け皿 */
.home .hero-panel::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 33%;
  height: 100%;
  background:
    linear-gradient(
      180deg,
      rgba(244,244,242,.98),
      rgba(244,244,242,.98)
    );
  z-index: 0;
  pointer-events: none;
}

/* 余計な内側線はなし */
.home .hero-panel::after{
  content: none;
}

/* 中身 */
.home .hero-panel__inner{
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) 240px;
  gap: 20px;
  align-items: end;
  padding: 30px 30px 22px;
  position: relative;
  z-index: 1;
}

/* 左コピー */
.hero-copy{
  position: relative;
  z-index: 2;
  min-width: 0;
  padding-left: 6px;
}

.home .hero-copy h1{
  margin: 0 0 14px;
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.home .hero-copy p{
  margin: 0 0 18px;
  color: rgba(34,34,34,.76);
  font-size: 1rem;
  line-height: 1.95;
  max-width: 28em;
}

.home .cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  margin-left: 0;
}

/* 右演出欄 */
.hero-actor{
  position: relative;
  z-index: 2;
  min-height: 250px;
}

/* mp4を右下に固定 */
.hero-walker-video{
  position: absolute;
  right: 6px;
  bottom: 0;
  display: block;
  width: clamp(210px, 22vw, 280px);
  height: auto;
  border: 0;
  background: transparent;
  filter: none;
}

/* ===== tablet ===== */
@media (max-width: 1100px){
  .home .hero-panel{
    grid-column: 4 / 12;
  }

  .home .hero-panel::before{
    width: 34%;
  }

  .home .hero-panel__inner{
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 16px;
    padding: 26px 24px 20px;
  }

  .hero-actor{
    min-height: 220px;
  }

  .hero-walker-video{
    right: 2px;
    bottom: 0;
    width: clamp(190px, 22vw, 235px);
  }
}

/* ===== mobile ===== */
@media (max-width: 820px){
  .home .site-title{
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    margin-left: 0 !important;
    display: inline-flex;
    width: fit-content;
    white-space: nowrap;
  }

  .home .hero-panel{
    grid-column: 1 / -1;
    right: 0;
    top: 0;
    transform: rotate(-1.8deg);
    border-radius: 22px;
    background: #f6f6f4;
  }

  .home .hero-panel::before{
    display: none;
  }

  .home .hero-panel__inner{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 18px 18px;
  }

  .hero-copy{
    padding-left: 0;
  }

  /* スマホではアニメ非表示 */
  .hero-actor{
    display: none;
  }

  .home .hero-copy h1{
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.12;
  }

  .home .hero-copy p{
    font-size: .95rem;
    line-height: 1.85;
  }

  .home .cta-row{
    gap: 10px;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-walker-video{
    animation: none !important;
  }

  .btn,
  .magazine-nav a{
    transition: none;
  }
}

.contactGuide__inner{
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 24px;
  align-items: end;
}

.contactGuide__actor{
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.contactGuide__video{
  display: block;
  width: 160px;
  height: auto;
  object-fit: contain;
  border: 0;
  background: transparent;
}

@media (max-width: 820px){
  .contactGuide__inner{
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .contactGuide__content{
    min-width: 0;
  }

  .contactGuide__item{
    min-width: 0;
  }

  .contactGuide__actor{
    display: none !important;
  }
}