@charset "UTF-8";

/* =========================================================
   CKS
   1. 変数 / リセット
   2. 共通パーツ
   3. ヘッダー / メニュー
   4. トップ
   5. サービス
   6. モデル（明るい面）
   7. 会社概要 / お問い合わせ
   8. フッター
   9. 動き
   ========================================================= */


/* 1. 変数 ------------------------------------------------ */

:root{
  --bk:#000;
  --bk2:#08080A;
  --bk3:#101015;
  --wh:#fff;
  --gr:#8E9199;
  --gr2:#55575F;
  --line:rgba(255,255,255,.10);
  --line-w:rgba(255,255,255,.06);

  /* ロゴから拾ったラベンダー */
  --brand:#A68BC1;
  --brand-deep:#8A6BB0;
  --brand-dim:rgba(166,139,193,.22);

  /* モデルページ（白） */
  --pearl:#F4F3F7;
  --pearl2:#EAE8EF;
  --ink:#0E0E13;
  --ink-gr:#6B6D78;
  --ink-gr2:#9A9CA6;
  --ink-line:rgba(14,14,19,.12);
  --rose:#FF3D85;
  --coral:#FF7A45;

  --en:"Outfit",-apple-system,sans-serif;
  --jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --mn:"Roboto Mono",ui-monospace,monospace;

  --gut:clamp(22px,6vw,110px);
  --maxw:1500px;
  --ease:cubic-bezier(.2,.8,.2,1);
}


/* リセット（必要な分だけ） */

*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd,table{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
table{border-collapse:collapse}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--bk);
  color:var(--wh);
  font-family:var(--jp);
  font-weight:300;
  font-size:15px;
  line-height:2;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* フォント読み込み中のガタつきを減らす */
.wf-loading .en{opacity:.999}

::selection{background:var(--brand);color:#fff}

:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* キーボード操作時だけ出る本文スキップ */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--wh);color:var(--bk);padding:12px 20px;
  font-family:var(--mn);font-size:12px;
}
.skip:focus{left:0}

.sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}


/* 2. 共通パーツ ------------------------------------------ */

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

.mn{
  font-family:var(--mn);font-weight:300;font-size:10.5px;
  letter-spacing:.28em;text-transform:uppercase;
}
.en{font-family:var(--en);font-weight:200;letter-spacing:-.02em;line-height:.94}

.kicker{color:var(--brand)}

/* 画像枠。画像が未登録でも成立するよう下地を敷いてある */
.fig{position:relative;overflow:hidden;background:var(--bk3);isolation:isolate}
.fig > img{
  width:100%;height:100%;object-fit:cover;
  /* --focus は投稿ごとに指定できる（頭が切れるときは小さい値に） */
  object-position:center var(--focus,50%);
  transition:transform 1.1s var(--ease);
}
.fig-empty::before{
  content:"";position:absolute;inset:-8% -2%;
  background:
    radial-gradient(58% 70% at 28% 22%,rgba(166,139,193,.20),transparent 62%),
    linear-gradient(160deg,#1A1A21 0%,#0C0C11 52%,#141419 100%);
}
.zoom:hover > img{transform:scale(1.06)}

/* ボタン。下から色が上がってくる */
.btn{
  display:inline-flex;align-items:center;gap:16px;
  font-family:var(--mn);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;
  padding:16px 32px;position:relative;overflow:hidden;
  transition:border-color .4s;
}
.btn > span{position:relative;z-index:2}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--brand);
  transform:translateY(101%);transition:transform .45s var(--ease);
}
.btn:hover{border-color:var(--brand)}
.btn:hover::before{transform:none}

.sec{padding-block:clamp(90px,13vh,170px);border-top:1px solid var(--line-w)}

.sec-head{
  display:flex;align-items:baseline;gap:26px;flex-wrap:wrap;
  margin-bottom:clamp(40px,6vh,72px);
}
.sec-head .mn{color:var(--gr2)}
.sec-head h2{font-size:clamp(32px,5.4vw,72px);line-height:.95}

.two-col{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,6vw,90px);align-items:end;
}
@media (max-width:960px){
  .two-col{grid-template-columns:1fr;gap:44px}
}


/* 3. ヘッダー -------------------------------------------- */

.hd{
  position:fixed;inset:0 0 auto;z-index:70;height:82px;
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gut);
  border-bottom:1px solid transparent;
  transition:height .4s,background .4s,border-color .4s;
}
.hd.is-stuck{
  height:64px;background:rgba(0,0,0,.62);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line-w);
}
.hd-logo{display:flex;align-items:center;line-height:0}
.hd-logo svg,.hd-logo img{height:26px;width:auto;color:var(--wh);transition:height .4s,color .4s}
.hd.is-stuck .hd-logo svg,.hd.is-stuck .hd-logo img{height:22px}
.hd-logo:hover svg{color:var(--brand)}

.gnav ul{display:flex;gap:clamp(18px,2.6vw,44px);align-items:center}
.gnav a{
  font-family:var(--mn);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gr);position:relative;padding-block:6px;transition:color .3s;
}
.gnav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--brand);transition:width .4s var(--ease);
}
.gnav a:hover,
.gnav .current-menu-item > a{color:var(--wh)}
.gnav a:hover::after,
.gnav .current-menu-item > a::after{width:100%}

.burger{
  display:none;position:relative;z-index:80;
  /* 指で押しやすいよう、線の見た目より広い範囲を対象にする */
  width:48px;height:48px;margin-right:-12px;
  -webkit-tap-highlight-color:transparent;
}
.burger i{
  position:absolute;left:11px;right:11px;height:1px;
  background:var(--wh);transition:.4s;
}
.burger i:first-child{top:19px}
.burger i:last-child{bottom:19px}
.nav-open .burger i:first-child{top:23px;transform:rotate(45deg)}
.nav-open .burger i:last-child{bottom:24px;transform:rotate(-45deg)}

@media (max-width:860px){

  /* ヘッダーの中身は常に最前面に置く。
     こうしないと、開いたメニューにロゴとボタンが隠れてしまう。 */
  .hd-logo,
  .burger{position:relative;z-index:3}

  .gnav{
    position:fixed;inset:0;z-index:2;
    background:#000;
    display:flex;align-items:flex-start;
    padding:calc(64px + 8vh) var(--gut) 40px;
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;
    transition:opacity .35s,visibility .35s;
  }
  .nav-open .gnav{opacity:1;visibility:visible}

  .gnav ul{
    flex-direction:column;align-items:stretch;
    gap:0;width:100%;
  }
  .gnav li{border-bottom:1px solid var(--line)}
  .gnav li:first-child{border-top:1px solid var(--line)}

  .gnav a{
    /* 指で押しやすいよう、行全体を対象にする */
    display:block;width:100%;
    font-family:var(--en);font-weight:200;
    font-size:clamp(28px,8vw,44px);
    letter-spacing:0;text-transform:none;
    line-height:1.2;padding:22px 0;
    color:rgba(255,255,255,.72);
  }
  .gnav a::after{display:none}
  .gnav a:active{color:var(--brand)}
  .gnav .current-menu-item > a{color:var(--wh)}

  body.is-light .gnav{background:var(--pearl)}
  body.is-light .gnav li{border-color:var(--ink-line)}
  body.is-light .gnav a{color:var(--ink-gr)}
  body.is-light .gnav a:active{color:var(--brand-deep)}

  .burger{display:block}

  /* メニューを開いている間はヘッダーの背景を消す */
  .nav-open .hd,
  .nav-open .hd.is-stuck{background:transparent;border-bottom-color:transparent;backdrop-filter:none}
}

/* 4. トップ ---------------------------------------------- */

.hero{
  min-height:100svh;position:relative;
  display:flex;align-items:flex-end;overflow:hidden;
}
.hero .fig,
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .fig-empty::before{
  background:
    radial-gradient(46% 58% at 62% 34%,rgba(166,139,193,.24),transparent 64%),
    linear-gradient(175deg,#101016 0%,#000 58%);
  animation:drift 24s ease-in-out infinite alternate;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,#000 2%,rgba(0,0,0,.45) 42%,rgba(0,0,0,.2) 100%);
}
.hero-body{position:relative;z-index:3;width:100%;padding-bottom:clamp(60px,10vh,120px)}
.hero-body .kicker{margin-bottom:34px}
.hero h1{font-size:clamp(60px,15vw,190px);letter-spacing:.02em;line-height:.9}
.hero-copy{
  font-family:var(--en);font-weight:200;
  font-size:clamp(22px,3.4vw,44px);line-height:1.34;
  margin-top:clamp(22px,3vh,40px);
}
.hero-copy b{font-weight:200;color:var(--gr2);display:block}
.hero .btn{margin-top:clamp(34px,5vh,56px)}

.hero-scroll{
  position:absolute;right:var(--gut);bottom:38px;z-index:3;
  display:flex;align-items:center;gap:14px;color:var(--gr2);
}
.hero-scroll i{display:block;width:64px;height:1px;background:var(--gr2);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--wh);animation:sweep 2.6s var(--ease) infinite}
@media (max-width:860px){.hero-scroll{display:none}}

/* 3本柱の見出し */
.pillar{padding-block:clamp(110px,17vh,220px)}
.pillar + .pillar{border-top:1px solid var(--line-w)}
.pillar h2{font-size:clamp(52px,11vw,152px);line-height:.9;letter-spacing:-.015em}
.pillar h2 .dot{color:var(--brand)}
.pillar .lead{color:var(--gr);max-width:30em;margin-top:clamp(26px,4vh,46px)}

/* 見出しに色を差すのはCreativity/Promotionだけ。
   background-clip:text は要素の箱の中にしか背景を塗らないので、
   g や y の下が箱からはみ出すと消える。下に余白を足して逃がす。 */
.grad{
  background:linear-gradient(100deg,var(--brand) 0%,var(--rose) 40%,var(--coral) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.16em;
}

.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:clamp(40px,6vh,64px)}
@media (max-width:620px){.cards{grid-template-columns:1fr}}

.card{
  border:1px solid var(--line);border-radius:3px;
  padding:clamp(26px,3vw,38px);
  background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.014));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  position:relative;overflow:hidden;
  transition:border-color .5s,transform .6s var(--ease);
}
.card::after{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(to right,transparent,var(--brand),transparent);
  transform:translateX(-100%);transition:transform .8s var(--ease);
}
.card:hover{border-color:rgba(255,255,255,.24);transform:translateY(-5px)}
.card:hover::after{transform:translateX(100%)}
.card h3{
  font-family:var(--en);font-weight:300;
  /* 長い英単語（System Development）が入るよう小さめに。
     anywhere だと単語の途中で切れるので使わない。 */
  font-size:clamp(17px,1.55vw,21px);
  line-height:1.35;margin-block:14px 12px;letter-spacing:0;
  overflow-wrap:normal;word-break:normal;hyphens:none;
}
.card p{color:var(--gr);font-size:13px;line-height:1.95}
.card .mn{color:var(--gr2)}

/* 全面ビジュアル */
.bleed{position:relative;height:clamp(440px,86vh,880px);overflow:hidden;display:flex;align-items:center}
.bleed .fig{position:absolute;inset:0}
.bleed .fig-empty::before{
  background:
    radial-gradient(52% 62% at 26% 26%,rgba(166,139,193,.34),transparent 64%),
    radial-gradient(50% 60% at 78% 70%,rgba(255,61,133,.22),transparent 62%),
    linear-gradient(160deg,#17131C 0%,#0A0A0E 60%,#140F19 100%);
}
.bleed::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(to right,rgba(0,0,0,.86),rgba(0,0,0,.35) 46%,rgba(0,0,0,.7));
}
.bleed-body{position:relative;z-index:3;width:100%}
.bleed h2{font-size:clamp(50px,10vw,140px);line-height:.9}

/* ビジュアル脇に置く語の列 */
.words{margin-top:clamp(28px,4vh,48px);display:flex;flex-direction:column;gap:2px}
.words li{
  font-family:var(--en);font-weight:200;font-size:clamp(19px,2.7vw,34px);
  line-height:1.5;color:rgba(255,255,255,.5);width:fit-content;
  transition:color .4s,letter-spacing .5s;
}
.words li:hover{color:var(--wh);letter-spacing:.02em}

/* 事業一覧 */
.blist{border-top:1px solid var(--line)}
.blist a{
  display:grid;grid-template-columns:78px 1fr 1.2fr 40px;
  gap:clamp(14px,3vw,44px);align-items:center;
  padding-block:clamp(26px,3.4vw,42px);
  border-bottom:1px solid var(--line);
  position:relative;transition:padding-left .55s var(--ease);
}
.blist a:hover{padding-left:20px;background:rgba(255,255,255,.03)}
.blist .idx{font-family:var(--mn);font-size:10px;letter-spacing:.2em;color:var(--gr2)}
.blist h3{font-family:var(--en);font-weight:300;font-size:clamp(20px,2.6vw,32px);letter-spacing:0}
.blist h3 small{
  display:block;font-family:var(--jp);font-weight:300;font-size:12.5px;
  color:var(--gr);margin-top:8px;letter-spacing:.04em;
}
.blist p{color:var(--gr);font-size:13px}
.blist .arw{justify-self:end;color:var(--gr2);transition:transform .5s,color .5s}
.blist a:hover .arw{transform:translateX(8px);color:var(--brand)}
@media (max-width:820px){
  .blist a{grid-template-columns:56px 1fr;gap:8px 16px}
  .blist p{grid-column:1/-1;color:var(--gr2)}
  .blist .arw{display:none}
}


/* 5. サービス -------------------------------------------- */

.page-hero{padding-block:clamp(150px,22vh,240px) clamp(50px,8vh,90px)}
.page-hero h1{font-size:clamp(56px,13vw,168px);line-height:.9}
.page-hero .lead{color:var(--gr);max-width:32em;margin-top:28px}
.page-hero .kicker{margin-bottom:26px}

.svc{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,80px);align-items:center;
  padding-block:clamp(60px,9vh,120px);
  border-top:1px solid var(--line-w);
}
.svc-noimg{grid-template-columns:1fr;padding-block:clamp(46px,6.5vh,86px)}
.svc:nth-of-type(even) .svc-fig{order:2}
@media (max-width:900px){
  .svc{grid-template-columns:1fr;gap:32px}
  .svc:nth-of-type(even) .svc-fig{order:0}
}
.svc-fig{aspect-ratio:4/3}
.svc h2{font-family:var(--en);font-weight:300;font-size:clamp(26px,3.4vw,44px);line-height:1.1}
.svc h2 small{
  display:block;font-family:var(--jp);font-weight:400;font-size:13px;
  color:var(--gr);margin-top:14px;letter-spacing:.06em;
}
.svc p{color:var(--gr);margin-top:24px;font-size:13.5px;max-width:34em}

/* 押せそうに見えないよう、枠をやめてタグの体裁にする */
.chips{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:32px}
.chips li{
  font-family:var(--mn);font-weight:400;font-size:13px;letter-spacing:.06em;
  color:rgba(255,255,255,.78);cursor:default;
  display:inline-flex;align-items:baseline;gap:.3em;
  transition:color .35s;
}
.chips li::before{
  content:"#";
  color:var(--brand);font-size:1.1em;font-weight:300;
}
.chips li:hover{color:var(--wh)}
body.is-light .chips li{color:var(--ink-gr)}
body.is-light .chips li::before{color:var(--brand-deep)}
body.is-light .chips li:hover{color:var(--ink)}

/* 実績カルーセル */
.rail{
  display:flex;gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:20px;margin-top:44px;
  scrollbar-width:thin;scrollbar-color:var(--gr2) transparent;
}
.rail::-webkit-scrollbar{height:2px}
.rail::-webkit-scrollbar-thumb{background:var(--gr2)}
.rail li{flex:0 0 clamp(260px,32vw,400px);scroll-snap-align:start}
.rail .fig{aspect-ratio:3/4}
.rail h3{font-family:var(--en);font-weight:300;font-size:16px;margin-top:16px}
.rail .meta{color:var(--gr2);font-family:var(--mn);font-size:10px;letter-spacing:.16em}


/* 6. モデル（明るい面） ---------------------------------- */

body.is-light{background:var(--pearl);color:var(--ink)}
body.is-light .hd.is-stuck{background:rgba(244,243,247,.75);border-bottom-color:var(--ink-line)}
body.is-light .hd-logo svg{color:var(--ink)}
body.is-light .hd-logo:hover svg{color:var(--brand-deep)}
body.is-light .gnav a{color:var(--ink-gr)}
body.is-light .gnav a:hover,
body.is-light .gnav .current-menu-item > a{color:var(--ink)}
body.is-light .burger i{background:var(--ink)}
body.is-light .fig{background:var(--pearl2)}
body.is-light .fig-empty::before{background:linear-gradient(150deg,#E6E3EE,#F2F0F5 55%,#E9E6F0)}
body.is-light .btn{border-color:rgba(14,14,19,.24)}
body.is-light .btn::before{background:var(--brand-deep)}
body.is-light .btn:hover{border-color:var(--brand-deep);color:#fff}
body.is-light .sec{border-top-color:var(--ink-line)}
body.is-light .sec-head .mn{color:var(--ink-gr2)}
body.is-light .lead{color:var(--ink-gr)}
@media (max-width:860px){
  body.is-light .gnav{background:rgba(244,243,247,.97)}
}

.m-hero{padding-block:clamp(140px,20vh,220px) clamp(26px,4vh,44px)}
.m-hero h1{
  font-size:clamp(66px,17vw,230px);line-height:.84;letter-spacing:.005em;
  background:linear-gradient(100deg,var(--brand) 0%,var(--rose) 40%,var(--coral) 72%,var(--brand) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.12em;
  background-size:220% 100%;
  animation:hue 16s ease-in-out infinite alternate;
}
.m-hero .lead{max-width:30em;margin-top:26px;color:var(--gr)}
.m-hero .kicker{color:var(--brand);margin-bottom:26px}
body.is-light .m-hero .lead{color:var(--ink-gr)}
body.is-light .m-hero .kicker{color:var(--rose)}


/* 高さをずらした写真の帯 */
.strip{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(8px,1vw,16px);padding-inline:var(--gut);
}
.strip .fig{aspect-ratio:3/4;border-radius:2px}
.strip li:nth-child(1){margin-top:34px}
.strip li:nth-child(3){margin-top:52px}
.strip li:nth-child(5){margin-top:22px}
/* トップの帯は .wrap の内側にあるので左右の余白を持たせない */
.strip-flush{padding-inline:0;margin-top:clamp(40px,6vh,72px)}

/* スマホでは5人全員を横に流す。指で送れるようにする。 */
@media (max-width:820px){
  .strip{
    display:flex;
    gap:10px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gut);
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* 3枚目が少し覗くので、まだ続くことが分かる */
    padding-block:0 4px;
  }
  .strip::-webkit-scrollbar{display:none}

  /* 互い違いの配置は解除する。
     .strip li:nth-child(1) と同じ強さで打ち消す必要がある。 */
  .strip > li:nth-child(n){
    flex:0 0 44%;
    scroll-snap-align:start;
    margin-top:0;
    display:block;
  }

  /* 画面端まで届かせる。左右の余白は内側の padding で作る */
  .strip-flush{
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);
  }
}

@media (max-width:480px){
  .strip > li{flex:0 0 58%}
}

/* 流れる語 */
.marquee{
  margin-top:clamp(48px,7vh,90px);padding-block:22px;overflow:hidden;
  border-block:1px solid var(--line);
  display:flex;white-space:nowrap;
}
.marquee ul{display:flex;gap:44px;padding-right:44px;flex:none;animation:slide 30s linear infinite}
.marquee li{
  font-family:var(--en);font-weight:200;font-size:clamp(24px,3.4vw,44px);
  letter-spacing:-.01em;display:flex;align-items:center;gap:44px;
}
.marquee li::after{content:"✦";font-size:.42em;color:var(--rose)}

.m-filter{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding-block:clamp(34px,5vh,58px)}
.chip{
  font-family:var(--mn);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gr);padding:10px 20px;
  border:1px solid var(--line);border-radius:999px;transition:.35s;
}
.chip:hover{color:var(--wh);border-color:rgba(255,255,255,.32)}
.chip[aria-pressed="true"]{background:var(--wh);color:var(--bk);border-color:var(--wh)}
.m-count{margin-left:auto;font-family:var(--mn);font-size:10px;letter-spacing:.16em;color:var(--gr2)}

body.is-light .chip{color:var(--ink-gr);border-color:var(--ink-line)}
body.is-light .chip:hover{color:var(--ink);border-color:rgba(14,14,19,.32)}
body.is-light .chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

.m-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2vw,30px) clamp(12px,1.6vw,24px);
}
@media (max-width:1100px){.m-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.m-grid{grid-template-columns:repeat(2,1fr)}}
/* 互い違いに落として一覧に動きを出す */
@media (min-width:761px){.m-grid > li:nth-child(even){margin-top:44px}}
.m-grid > li[hidden]{display:none}

.m-card{display:flex;flex-direction:column;--focus:25%}
.m-card .fig{aspect-ratio:3/4;border-radius:2px;width:100%}
.m-card .fig{background:var(--bk3)}
/* 写真がまだのカード。黒に沈まないよう、その人の色をうっすら敷く */
.m-card .fig-empty::before{
  background:
    radial-gradient(120% 90% at 30% 12%,color-mix(in srgb,var(--accent,#A68BC1) 26%,transparent),transparent 68%),
    linear-gradient(155deg,#1D1A24,#0D0D12);
}
.m-card .fig-empty::after{
  content:"";position:absolute;inset:0;
  border:1px solid color-mix(in srgb,var(--accent,#A68BC1) 24%,transparent);
}
body.is-light .m-card .fig{background:var(--pearl2)}
body.is-light .m-card .fig-empty::before{background:var(--tone,linear-gradient(155deg,#E6E3EE,#F2F0F5))}
.m-card .ini{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;padding:12px;
  font-family:var(--jp);font-weight:300;font-size:clamp(15px,1.5vw,19px);
  letter-spacing:.14em;text-align:center;
  color:rgba(255,255,255,.5);transition:color .5s;
}
.m-card:hover .ini{color:rgba(255,255,255,.85)}
body.is-light .m-card .ini{color:rgba(255,255,255,.9)}
body.is-light .m-card:hover .ini{color:#fff}
.m-card-body{padding-top:18px}
.m-card h2{font-family:var(--jp);font-weight:500;font-size:17px;letter-spacing:.08em}
.m-card h2 span{color:var(--gr2);font-size:12px;font-weight:300;margin-left:6px}
body.is-light .m-card h2 span{color:var(--ink-gr2)}
.m-card .role{font-family:var(--mn);font-size:9.5px;letter-spacing:.2em;color:var(--brand);margin-top:9px}
body.is-light .m-card .role{color:var(--accent,var(--rose))}
.m-card .meta{display:flex;gap:16px;margin-top:12px;font-family:var(--mn);font-size:10px;color:var(--gr2);letter-spacing:.08em}

/* モデル詳細 */
body.single-model.is-light{background:#fff;color:var(--ink)}
.m-single{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);padding-top:clamp(120px,18vh,190px)}
@media (max-width:900px){.m-single{grid-template-columns:1fr;gap:36px}}
.m-single-fig{position:sticky;top:100px;align-self:start;--focus:25%}
.m-single-fig .fig{aspect-ratio:4/5}
@media (max-width:900px){.m-single-fig{position:static}}
.m-single h1{
  font-family:var(--en);font-weight:200;font-size:clamp(40px,6vw,84px);line-height:1;
  background:linear-gradient(100deg,var(--brand-deep),var(--rose));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.14em;
}
.m-single .jp{color:var(--ink-gr);letter-spacing:.14em;margin-top:12px;font-size:14px}

.dl{margin-top:40px;font-size:14px}
.dl > div{display:grid;grid-template-columns:110px 1fr;gap:20px;padding-block:15px;border-bottom:1px solid var(--line)}
.dl dt{font-family:var(--mn);font-size:9.5px;letter-spacing:.18em;color:var(--gr2);padding-top:6px}
.dl dd{color:rgba(255,255,255,.88)}
.dl a{border-bottom:1px solid var(--line)}
.dl a:hover{color:var(--brand);border-bottom-color:currentColor}

body.is-light .dl > div{border-bottom-color:var(--ink-line)}
body.is-light .dl dt{color:var(--ink-gr2)}
body.is-light .dl dd{color:var(--ink)}
body.is-light .dl a{border-bottom-color:var(--ink-line)}
body.is-light .dl a:hover{color:var(--brand-deep)}
@media (max-width:520px){
  .dl > div{grid-template-columns:1fr;gap:2px}
  .dl dt{padding-top:0}
}

/* ギャラリー。段組みだと縦に流れて順番が入れ替わるのでグリッドを使う */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:44px}
.gal .fig{border-radius:2px;aspect-ratio:3/4}
.gal{--focus:35%}
@media (min-width:1200px){
  .gal{grid-template-columns:repeat(3,1fr)}
}

body.single-model.is-light .btn{border-color:rgba(14,14,19,.24)}
body.single-model.is-light .btn::before{background:var(--brand-deep)}
body.single-model.is-light .btn:hover{border-color:var(--brand-deep);color:#fff}

/* 登録の流れ */
.steps{border-top:1px solid var(--line)}
.steps > div{display:grid;grid-template-columns:70px 1fr;gap:20px;padding-block:20px;border-bottom:1px solid var(--line)}
.steps .mn{color:var(--brand)}
.steps strong{display:block;font-weight:500;font-size:14.5px}
.steps p{color:var(--gr);font-size:13px}

body.is-light .steps,
body.is-light .steps > div{border-color:var(--ink-line)}
body.is-light .steps .mn{color:var(--rose)}
body.is-light .steps p{color:var(--ink-gr)}
@media (max-width:520px){.steps > div{grid-template-columns:1fr;gap:4px}}


/* 7. 会社概要 / お問い合わせ ------------------------------ */

.mission{padding-block:clamp(120px,20vh,260px)}
.mission h2{font-size:clamp(30px,5.2vw,74px);line-height:1.24;max-width:16em}
.mission h2 em{font-style:normal;color:var(--gr2)}

.profile{width:100%;font-size:14px}
.profile th,.profile td{text-align:left;padding-block:22px;border-bottom:1px solid var(--line-w);vertical-align:top}
.profile th{
  width:220px;font-family:var(--mn);font-size:10px;letter-spacing:.2em;
  color:var(--gr2);font-weight:400;padding-top:25px;
}
.profile td{color:rgba(255,255,255,.86)}
@media (max-width:640px){
  .profile th,.profile td{display:block;width:100%}
  .profile th{border:none;padding-block:22px 2px}
}

.msg{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,80px)}
@media (max-width:900px){.msg{grid-template-columns:1fr}}
.msg .fig{aspect-ratio:3/4}
.msg p{color:var(--gr);font-size:14px}
.msg p + p{margin-top:1.6em}
.msg .sign{margin-top:36px;font-family:var(--mn);font-size:10.5px;letter-spacing:.18em;color:var(--gr2)}

.hist{border-top:1px solid var(--line)}
.hist > div{display:grid;grid-template-columns:150px 1fr;gap:24px;padding-block:22px;border-bottom:1px solid var(--line-w)}
.hist dt{font-family:var(--mn);font-size:11px;letter-spacing:.16em;color:var(--brand)}
.hist dd{color:rgba(255,255,255,.8);font-size:13.5px}
@media (max-width:640px){.hist > div{grid-template-columns:1fr;gap:4px}}

.map{aspect-ratio:21/8;background:var(--bk3)}
.map iframe{width:100%;height:100%;border:0;display:block}

/* フォーム */
.form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);max-width:900px}
.form .full{grid-column:1/-1}
@media (max-width:760px){.form{grid-template-columns:1fr}}
.fld label{display:block;font-family:var(--mn);font-size:9.5px;letter-spacing:.2em;color:var(--gr2);margin-bottom:14px}
.fld label .req{color:var(--brand);margin-left:6px}
.fld input,.fld textarea,.fld select{
  width:100%;background:transparent;border:none;
  border-bottom:1px solid var(--line);
  font-family:var(--jp);font-weight:300;font-size:15px;
  padding-block:12px;transition:border-color .4s;
}
.fld textarea{resize:vertical;min-height:140px;line-height:1.9}
.fld :is(input,textarea,select):focus{outline:none;border-bottom-color:var(--brand)}
.fld ::placeholder{color:#33353C}
.fld select option{background:var(--bk2)}

/* Contact Form 7 を入れた場合の受け皿 */
.wpcf7 form .wpcf7-response-output{
  border:1px solid var(--line);padding:16px 20px;margin:24px 0 0;font-size:13px;
}
.wpcf7-not-valid-tip{color:var(--rose);font-size:12px;margin-top:8px}


/* 8. フッター -------------------------------------------- */

.ft{background:var(--bk);color:var(--wh);border-top:1px solid var(--line-w);padding-block:clamp(60px,8vh,100px) 50px;margin-top:clamp(80px,12vh,160px)}
.ft-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
@media (max-width:820px){.ft-in{grid-template-columns:1fr;gap:44px}}
.ft-logo{line-height:0}
.ft-logo svg,.ft-logo img{height:74px;width:auto;color:var(--wh)}
@media (max-width:640px){.ft-logo svg,.ft-logo img{height:58px}}
.ft-tag{color:var(--gr2);margin-top:18px;font-size:12.5px}
.ft h2{font-family:var(--mn);font-size:9.5px;letter-spacing:.2em;color:var(--gr2);margin-bottom:20px;font-weight:400}
.ft nav ul{display:flex;flex-direction:column;gap:12px}
.ft nav a{color:var(--gr);font-size:13px;transition:color .3s}
.ft nav a:hover{color:var(--wh)}
.ft-copy{margin-top:64px;font-family:var(--mn);font-size:9.5px;letter-spacing:.18em;color:#33353C}


/* 汎用の本文（固定ページのエディタ出力） */
.entry > * + *{margin-top:1.4em}
.entry h2{font-size:clamp(20px,2.6vw,30px);font-weight:500;margin-top:2.2em;line-height:1.5}
.entry h3{font-size:17px;font-weight:500;margin-top:2em}
.entry p{color:var(--gr)}
.entry a{color:var(--brand);border-bottom:1px solid currentColor}
.entry ul{list-style:disc;padding-left:1.4em;color:var(--gr)}
.entry ol{list-style:decimal;padding-left:1.4em;color:var(--gr)}
.entry table{width:100%;font-size:14px}
.entry :is(th,td){padding-block:16px;border-bottom:1px solid var(--line-w);text-align:left;vertical-align:top}
.entry th{color:var(--gr2);font-weight:400;width:200px}
body.is-light .entry p,
body.is-light .entry ul,
body.is-light .entry ol{color:var(--ink-gr)}

/* ページ送り */
.pager{display:flex;gap:10px;justify-content:center;margin-top:60px;font-family:var(--mn);font-size:11px;letter-spacing:.14em}
.pager .page-numbers{padding:10px 16px;border:1px solid var(--line);border-radius:999px}
.pager .current{background:var(--wh);color:var(--bk)}


/* 9. 動き ------------------------------------------------ */

@keyframes drift{
  from{transform:scale(1.04)}
  to{transform:scale(1.12) translate3d(-2%,-2%,0)}
}
@keyframes sweep{
  0%{transform:translateX(-100%)}
  60%,100%{transform:translateX(100%)}
}
@keyframes hue{
  from{background-position:0% 50%}
  to{background-position:100% 50%}
}
@keyframes slide{
  to{transform:translateX(-100%)}
}

/* スクロールで出す。JSがなくても中身は読める */
.rv{opacity:0;transform:translateY(30px)}
.rv.is-in{opacity:1;transform:none;transition:opacity 1s ease,transform 1s var(--ease)}
.rv-r{opacity:0;transform:translateX(50px)}
.rv-r.is-in{opacity:1;transform:none;transition:opacity .9s ease,transform .9s var(--ease)}
.no-js .rv,.no-js .rv-r{opacity:1;transform:none}
.d1{transition-delay:.09s}
.d2{transition-delay:.18s}
.d3{transition-delay:.27s}
.d4{transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .rv,.rv-r{opacity:1;transform:none}
}

/* 印刷は本文だけ */
@media print{
  .hd,.ft,.hero-scroll,.marquee,.btn{display:none}
  body{background:#fff;color:#000}
}

/* パンくず・フォームのお知らせ（後から足した分） -------------- */

.crumbs{color:var(--gr2);margin-bottom:24px;font-size:9.5px}
.crumbs a{transition:color .3s}
.crumbs a:hover{color:var(--wh)}
.crumbs [aria-current]{color:var(--gr)}
body.is-light .crumbs{color:var(--ink-gr2)}
body.is-light .crumbs a:hover{color:var(--ink)}
body.is-light .crumbs [aria-current]{color:var(--ink-gr)}

.form-notice{
  padding:16px 22px;margin-bottom:36px;font-size:13.5px;
  border:1px solid var(--line);border-left-width:2px;
}
.form-notice.is-ok{border-left-color:var(--brand)}
.form-notice.is-ng{border-left-color:var(--rose)}

/* 一覧の空欄カードに敷く文字 */
.m-card .fig-empty{background:var(--pearl2)}

/* 実績カード：リンクのものだけ反応させる ------------------- */

.rail li > a{display:block}
.rail li > a:hover h3{color:var(--brand)}
.rail h3{transition:color .3s}

/* SNSリンク（複数） --------------------------------------- */

.sns{display:flex;flex-wrap:wrap;gap:8px}
.sns a{
  display:inline-block;font-family:var(--mn);font-size:10.5px;letter-spacing:.12em;
  padding:7px 14px;border:1px solid var(--line);border-radius:999px;
  transition:.35s;
}
.sns a:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-dim)}
body.is-light .sns a{border-color:var(--ink-line)}
body.is-light .sns a:hover{border-color:var(--brand-deep);color:var(--brand-deep)}


/* ギャラリーの拡大表示 ------------------------------------ */

.gal-item{
  display:block;width:100%;padding:0;cursor:zoom-in;
  position:relative;
}
.gal-item::after{
  content:"";position:absolute;inset:0;
  background:rgba(0,0,0,.28);opacity:0;transition:opacity .35s;
}
.gal-item:hover::after{opacity:1}

.lb{
  position:fixed;inset:0;z-index:120;
  background:rgba(6,6,9,.94);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  animation:lbIn .3s ease;
}
.lb[hidden]{display:none}
@keyframes lbIn{from{opacity:0}to{opacity:1}}

.lb-stage{
  max-width:min(92vw,1100px);max-height:86svh;
  display:flex;align-items:center;justify-content:center;
}
.lb-stage img{
  max-width:100%;max-height:86svh;width:auto;height:auto;
  object-fit:contain;
  animation:lbImg .35s var(--ease);
}
@keyframes lbImg{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

.lb button{
  position:absolute;z-index:2;color:#fff;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.2);border-radius:50%;
  background:rgba(0,0,0,.35);
  transition:background .3s,border-color .3s;
}
.lb button:hover{background:var(--brand);border-color:var(--brand)}
.lb-close{top:22px;right:22px;width:46px;height:46px;font-size:24px;line-height:1}
.lb-prev,.lb-next{top:50%;translate:0 -50%;width:52px;height:52px;font-size:30px;line-height:1}
.lb-prev{left:22px}
.lb-next{right:22px}
.lb-count{
  position:absolute;bottom:24px;left:50%;translate:-50% 0;
  color:rgba(255,255,255,.6);
}
@media (max-width:640px){
  .lb-prev,.lb-next{width:42px;height:42px;font-size:24px}
  .lb-prev{left:10px}
  .lb-next{right:10px}
  .lb-close{top:14px;right:14px;width:40px;height:40px}
}


/* スマホのヒーロー ----------------------------------------
   縦長の画面に横位置の写真を全画面で敷くと、左右が切られて
   極端に拡大される。写真は写真として見せ、文字はその下に置く。 */

@media (max-width:768px){
  .hero{
    display:block;
    min-height:0;height:auto;
    padding-top:64px;
  }
  .hero .fig,
  .hero .hero-fig,
  .hero video{
    position:relative;inset:auto;
    width:100%;height:auto;
    aspect-ratio:4/3;
  }
  .hero .hero-fig img,
  .hero video{height:100%;object-fit:cover}

  /* 写真の下端だけを黒に溶かす */
  .hero::after{display:none}
  .hero .fig::after{
    content:"";position:absolute;inset:auto 0 0 0;height:40%;
    z-index:2;pointer-events:none;
    background:linear-gradient(to top,#000,transparent);
  }

  .hero-body{
    position:relative;
    /* padding の一括指定にすると .wrap の左右余白を消してしまう */
    padding-block:26px clamp(48px,9vh,80px);
  }
  .hero h1{font-size:clamp(56px,19vw,96px)}
  .hero-copy{font-size:clamp(19px,5.6vw,28px);margin-top:14px}
  .hero .kicker{margin-bottom:18px}
  .hero .btn{margin-top:28px}
  .hero-scroll{display:none}
}

@media (max-width:768px) and (orientation:landscape){
  .hero .fig,
  .hero .hero-fig,
  .hero video{aspect-ratio:16/9}
}

/* ペットモデル -------------------------------------------- */

.pets{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(12px,1.6vw,22px);margin-top:clamp(40px,6vh,72px);
}
@media (max-width:900px){.pets{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.pets{grid-template-columns:repeat(2,1fr)}}

.pet .fig{aspect-ratio:1;border-radius:2px}
.pet .fig-empty::before{
  background:
    radial-gradient(120% 90% at 30% 12%,rgba(166,139,193,.22),transparent 68%),
    linear-gradient(155deg,#1D1A24,#0D0D12);
}
.pet h3{font-family:var(--jp);font-weight:500;font-size:16px;letter-spacing:.06em;margin-top:14px}
.pet .breed{font-family:var(--mn);font-size:9.5px;letter-spacing:.18em;color:var(--brand);margin-top:8px}
.pet .spec{font-size:12px;color:var(--gr);margin-top:8px;line-height:1.8}
.pet .note{font-size:12.5px;color:var(--gr);margin-top:10px}

/* picture を使ったヒーローも同じ形で扱う */
.hero .hero-fig{position:absolute;inset:0}
.hero .hero-fig picture,
.hero .hero-fig img{width:100%;height:100%;display:block}
.hero .hero-fig img{object-fit:cover}
@media (max-width:768px){
  .hero .hero-fig{position:relative;inset:auto;aspect-ratio:4/5}
}


/* スマホの余白を詰める --------------------------------------
   セクションごとの上下余白が積み重なると、
   写真のない箇所がただの空白に見えてしまう。 */

@media (max-width:768px){
  .sec{padding-block:clamp(56px,9vh,80px)}
  .pillar{padding-block:clamp(64px,10vh,96px)}
  .svc{padding-block:clamp(40px,7vh,64px)}
  .page-hero{padding-block:clamp(112px,16vh,150px) clamp(32px,5vh,50px)}
  .mission{padding-block:clamp(72px,12vh,120px)}
  .two-col{gap:32px}
  .sec-head{margin-bottom:32px}
  .bleed{height:clamp(320px,52vh,460px)}
  .m-hero{padding-block:clamp(104px,15vh,140px) 24px}
  .contact{padding-block:clamp(56px,9vh,90px)}
}


/* フッター ------------------------------------------------ */

@media (max-width:820px){
  .ft{margin-top:clamp(56px,9vh,90px);padding-block:clamp(48px,7vh,72px) 40px}
  .ft-in{gap:34px}
  /* 縦一列だと間延びするので2列に折り返す */
  .ft nav ul{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:14px 20px;
  }
  .ft h2{margin-bottom:14px}
  .ft-copy{margin-top:40px}
}

/* 自動送信よけの項目。人には見せない。
   読み上げソフトにも読ませないよう、フォーム側で aria-hidden を付けている。 */
.hp{
  position:absolute !important;
  left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;
}

/* 横スクロールの送りボタン --------------------------------
   はみ出しているときだけ出す（.is-scrollable がJSで付く）。 */

.scroller{position:relative}

.scroller-btn{
  position:absolute;top:50%;translate:0 -50%;z-index:4;
  width:44px;height:44px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  font-size:24px;line-height:1;color:#fff;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .3s,border-color .3s,opacity .3s;
  -webkit-tap-highlight-color:transparent;
}
.scroller.is-scrollable .scroller-btn{display:flex}
.scroller-btn.is-prev{left:2px}
.scroller-btn.is-next{right:2px}
.scroller-btn:hover{background:var(--brand);border-color:var(--brand)}
.scroller-btn:disabled{opacity:.18;pointer-events:none}

body.is-light .scroller-btn{
  color:var(--ink);
  border-color:rgba(14,14,19,.18);
  background:rgba(255,255,255,.72);
}
body.is-light .scroller-btn:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}

/* 画面端まで広がる帯は、ボタンも端に合わせる */
@media (max-width:820px){
  .scroller.is-flush .scroller-btn.is-prev{left:calc(var(--gut) * -1 + 6px)}
  .scroller.is-flush .scroller-btn.is-next{right:calc(var(--gut) * -1 + 6px)}
}

/* フッター下段：著作権表示とプライバシーポリシー */
.ft-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline}
.ft-bottom .ft-copy{margin-top:64px}
.ft-bottom a{transition:color .3s}
.ft-bottom a:hover{color:var(--gr)}
@media (max-width:820px){
  .ft-bottom .ft-copy{margin-top:40px}
  .ft-bottom{gap:8px}
}

/* =========================================================
   トップの再構成にともなう追加
   ========================================================= */

/* 写真を置かないヒーロー。設計図のような線を静かに引く */
.hero-plain{background:#000}
.hero-draw{position:absolute;inset:0;overflow:hidden}
.hero-draw::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(58% 62% at 76% 34%,rgba(166,139,193,.16),transparent 66%);
}
.hero-draw svg{width:100%;height:100%;display:block}
.hero-draw .hd-grid line{stroke:rgba(255,255,255,.055);stroke-width:1}
.hero-draw .hd-line{fill:none;stroke:rgba(166,139,193,.42);stroke-width:1}
.hero-draw .hd-line circle{fill:none;stroke:rgba(166,139,193,.62)}
.hero-draw .hd-tick line{stroke:rgba(255,255,255,.22);stroke-width:1}

.hero-draw .hd-line path,
.hero-draw .hd-line line{
  stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:draw 2.6s cubic-bezier(.7,0,.2,1) .5s forwards;
}
.hero-draw .hd-line path:nth-child(2){animation-delay:.9s}
.hero-draw .hd-line line{animation-delay:1.3s}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .hero-draw .hd-line path,
  .hero-draw .hd-line line{stroke-dashoffset:0;animation:none}
}
@media (max-width:768px){
  .hero-plain{min-height:auto;padding-top:64px}
  .hero-plain .hero-draw{position:relative;height:44vh;min-height:240px}
}

.hero-sub{
  color:var(--gr);font-size:13px;letter-spacing:.04em;
  margin-top:18px;max-width:32em;
}

/* 会社の説明 */
.statement{border-top:0}
.jp-head{
  font-family:var(--jp);font-weight:500;
  font-size:clamp(22px,3.2vw,40px);line-height:1.6;letter-spacing:.01em;
}

/* 関連事業の入口 */
.group{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)}
@media (max-width:760px){.group{grid-template-columns:1fr;gap:32px}}
.group .fig{aspect-ratio:4/3;border-radius:2px;--focus:35%}
.group h3{font-family:var(--en);font-weight:300;font-size:clamp(19px,2vw,25px);margin-top:20px;letter-spacing:0}
.group-ja{font-size:12.5px;color:var(--gr);margin-top:8px}
.group-lead{font-size:13px;color:var(--gr2);margin-top:12px}
.group-arw{display:inline-block;margin-top:16px;color:var(--brand);transition:letter-spacing .35s}
.group li a:hover .group-arw{letter-spacing:.34em}

/* 見出しの改行位置を整える（1文字だけ残るのを防ぐ） */
.jp-head{max-width:14em;text-wrap:balance}
.statement .lead + .lead{margin-top:1.6em}

/* よくある質問 -------------------------------------------- */

.faq{border-top:1px solid var(--line)}
.faq > div{
  display:grid;grid-template-columns:1fr 1.5fr;
  gap:clamp(16px,3vw,44px);
  padding-block:clamp(22px,3vw,32px);
  border-bottom:1px solid var(--line);
}
@media (max-width:760px){.faq > div{grid-template-columns:1fr;gap:10px}}
.faq dt{
  font-family:var(--jp);font-weight:500;font-size:15px;line-height:1.7;
  position:relative;padding-left:1.5em;
}
.faq dt::before{
  content:"Q";position:absolute;left:0;top:0;
  font-family:var(--mn);font-size:11px;letter-spacing:.1em;color:var(--brand);
}
.faq dd{color:var(--gr);font-size:14px;padding-left:1.5em;position:relative}
.faq dd::before{
  content:"A";position:absolute;left:0;top:0;
  font-family:var(--mn);font-size:11px;letter-spacing:.1em;color:var(--gr2);
}
body.is-light .faq,
body.is-light .faq > div{border-color:var(--ink-line)}
body.is-light .faq dd{color:var(--ink-gr)}


/* 料金プラン ---------------------------------------------- */

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:860px){.plans{grid-template-columns:1fr}}
.plan{
  border:1px solid var(--line);border-radius:3px;
  padding:clamp(26px,3vw,36px);
  background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  transition:border-color .5s;
}
.plan:hover{border-color:rgba(255,255,255,.24)}
.plan h3{font-family:var(--jp);font-weight:500;font-size:16px;letter-spacing:.04em}
.plan-price{
  font-family:var(--en);font-weight:200;font-size:clamp(26px,3vw,36px);
  line-height:1.2;margin-top:14px;color:var(--brand);
}
.plan-items{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.plan-items li{
  color:var(--gr);font-size:13px;line-height:1.9;
  padding-left:1.2em;position:relative;
}
.plan-items li::before{content:"—";position:absolute;left:0;color:var(--gr2)}
.plan-note{color:var(--gr2);font-size:12.5px;margin-top:24px;line-height:1.9}
body.is-light .plan{border-color:var(--ink-line);background:rgba(255,255,255,.5)}
body.is-light .plan-price{color:var(--brand-deep)}
body.is-light .plan-items{border-top-color:var(--ink-line)}
body.is-light .plan-items li{color:var(--ink-gr)}
body.is-light .plan-note{color:var(--ink-gr2)}


/* トップの帯：リンクが画像を包む */
.strip li > a{display:block;line-height:0}

/* 当日の体制（オプション） ---------------------------------- */

.opts{margin-top:clamp(28px,4vh,44px);border-top:1px solid var(--line)}
.opts > div{
  display:grid;grid-template-columns:180px 1fr;gap:clamp(14px,3vw,40px);
  padding-block:clamp(16px,2.4vw,24px);
  border-bottom:1px solid var(--line);
}
@media (max-width:640px){.opts > div{grid-template-columns:1fr;gap:8px}}
.opts dt{font-family:var(--jp);font-weight:500;font-size:15px}
.opts dd{color:var(--gr);font-size:13.5px}
.opt-tag{
  display:inline-block;margin-left:12px;padding:3px 12px;
  font-family:var(--mn);font-size:10px;letter-spacing:.1em;
  color:var(--brand);border:1px solid var(--brand);border-radius:999px;
  white-space:nowrap;
}
.opt-tag.is-free{color:var(--wh);border-color:var(--line)}
body.is-light .opts,
body.is-light .opts > div{border-color:var(--ink-line)}
body.is-light .opts dd{color:var(--ink-gr)}
body.is-light .opt-tag{color:var(--brand-deep);border-color:var(--brand-deep)}
body.is-light .opt-tag.is-free{color:var(--ink);border-color:var(--ink-line)}
@media (max-width:640px){.opt-tag{margin-left:0;margin-top:8px}}

/* フッターの列が増えたときの調整 */
.ft-in{grid-template-columns:1.4fr repeat(auto-fit,minmax(120px,1fr))}
@media (max-width:820px){.ft-in{grid-template-columns:1fr}}

/* =========================================================
   送信完了・実績ページ
   ========================================================= */

.thanks{
  min-height:72svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(120px,18vh,180px) clamp(60px,10vh,110px);
}
.thanks h1{font-size:clamp(44px,9vw,110px);line-height:.95;margin-top:8px}
.thanks-body{margin-top:clamp(30px,5vh,48px);max-width:36em}
.thanks-note{color:var(--gr2);font-size:13px;margin-top:20px}
.thanks-btn{margin-top:clamp(36px,6vh,56px)}

/* 実績の詳細。見出しが大きくなりすぎないようにする */
.work-single{
  max-width:820px;
  padding-block:clamp(120px,18vh,190px) clamp(70px,11vh,140px);
}
.work-title{
  font-family:var(--jp);font-weight:500;
  font-size:clamp(21px,2.8vw,32px);
  line-height:1.55;letter-spacing:.01em;margin-top:6px;
}
.work-meta{
  font-family:var(--mn);font-size:11px;letter-spacing:.12em;
  color:var(--gr2);margin-top:14px;
}
.work-fig{margin-top:clamp(28px,5vh,44px)}
.work-fig .fig{border-radius:2px}
.work-body{margin-top:clamp(28px,5vh,44px)}
.work-back{margin-top:clamp(40px,7vh,64px)}

/* 実績カテゴリーの一覧 */
.works-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2.4vw,32px) clamp(12px,1.6vw,24px);
}
@media (max-width:1000px){.works-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.works-grid{grid-template-columns:repeat(2,1fr)}}
.works-grid .fig{aspect-ratio:3/4;border-radius:2px}
.works-grid h2{
  font-family:var(--jp);font-weight:500;font-size:14.5px;
  line-height:1.6;margin-top:14px;
}
.works-grid .meta{
  font-family:var(--mn);font-size:10px;letter-spacing:.1em;
  color:var(--gr2);margin-top:8px;
}
.works-grid a:hover h2{color:var(--brand)}
.works-grid h2{transition:color .3s}

/* カルーセルの下に置く「すべて見る」 */
.rail-more{margin-top:6px}
.rail-more a{
  font-family:var(--mn);font-size:11px;letter-spacing:.14em;
  color:var(--brand);
}
.rail-more a span{display:inline-block;transition:transform .3s}
.rail-more a:hover span{transform:translateX(5px)}
body.is-light .rail-more a{color:var(--brand-deep)}

.works-grid h3{
  font-family:var(--jp);font-weight:500;font-size:14.5px;
  line-height:1.6;margin-top:14px;transition:color .3s;
}
.works-grid a:hover h3{color:var(--brand)}

/* =========================================================
   文章中心の固定ページ（プライバシーポリシーなど）
   ========================================================= */

.doc{
  max-width:820px;
  padding-block:clamp(118px,17vh,180px) clamp(70px,11vh,140px);
}
.doc-title{
  font-family:var(--jp);font-weight:500;
  font-size:clamp(23px,3.2vw,34px);
  line-height:1.5;letter-spacing:.01em;margin-top:6px;
}
.doc-body{margin-top:clamp(32px,5vh,52px)}
.doc-updated{color:var(--gr2);margin-top:clamp(44px,7vh,72px);padding-top:20px;border-top:1px solid var(--line-w)}

/* 本文の体裁。長い規約でも読めるようにする */
.doc-body{font-size:14.5px;line-height:2.05}
.doc-body h2{
  font-family:var(--jp);font-weight:500;
  font-size:clamp(16px,2vw,19px);line-height:1.7;
  margin-top:2.6em;padding-top:1.2em;
  border-top:1px solid var(--line-w);
}
.doc-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc-body h3{font-size:15px;font-weight:500;margin-top:2em}
.doc-body p{color:var(--gr);margin-top:1.1em}
.doc-body ul,
.doc-body ol{color:var(--gr);margin-top:1.1em;padding-left:1.5em}
.doc-body ul{list-style:disc}
.doc-body ol{list-style:decimal}
.doc-body li{margin-top:.35em}
.doc-body li::marker{color:var(--gr2)}
.doc-body a{color:var(--brand);border-bottom:1px solid currentColor;word-break:break-all}
.doc-body strong{color:var(--wh);font-weight:500}
.doc-body table{width:100%;font-size:13.5px;margin-top:1.4em}
.doc-body :is(th,td){padding:14px 0;border-bottom:1px solid var(--line-w);text-align:left;vertical-align:top}
.doc-body th{color:var(--gr2);font-weight:400;width:34%}

body.is-light .doc-body p,
body.is-light .doc-body ul,
body.is-light .doc-body ol{color:var(--ink-gr)}
body.is-light .doc-body strong{color:var(--ink)}

/* ペットのカードをリンクにしたぶんの調整 */
.pet a{display:block}
.pet a:hover h3{color:var(--brand)}
.pet h3{transition:color .3s}
body.is-light .pet a:hover h3{color:var(--brand-deep)}

/* =========================================================
   CKS CAST AGENCY への誘導
   ========================================================= */

/* トップ：扱っている領域の列記 */
.ag-list{border-top:1px solid var(--line)}
.ag-list li{
  font-family:var(--jp);font-weight:500;font-size:15px;
  padding-block:16px;border-bottom:1px solid var(--line);
  padding-left:18px;position:relative;
}
.ag-list li::before{
  content:"";position:absolute;left:0;top:26px;
  width:8px;height:1px;background:var(--brand);
}
.ag-note{color:var(--gr2);font-size:12.5px;line-height:1.9;margin-top:22px}
@media (max-width:820px){.ag-list{margin-top:34px}}

/* 別サイトへ飛ぶことを示す矢印 */
.ext-icon{display:inline-block;margin-left:.45em;vertical-align:.02em;opacity:.75}

/* キャストページ：姉妹サイトへの案内 */
.m-notice{
  margin-top:clamp(28px,4vw,44px);
  padding:clamp(20px,2.6vw,28px) clamp(22px,3vw,32px);
  border:1px solid var(--line);border-radius:3px;
  background:linear-gradient(120deg,rgba(166,139,193,.07),transparent 72%);
  max-width:700px;
}
.m-notice p{color:var(--gr);font-size:13.5px;line-height:1.95}
.m-notice-act{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:20px;
}
.m-notice-sub{color:var(--gr2);font-size:11.5px;letter-spacing:.04em}

/* カード下の「姉妹サイトで見る」 */
.m-ext{
  margin-top:10px;
  font-family:var(--mn);font-size:10.5px;letter-spacing:.1em;
  color:var(--gr2);transition:color .3s;
}
.m-card.is-ext:hover .m-ext{color:var(--brand)}