@charset "utf-8";
/* ==========================================================================
   Chiaan Yao PORTFOLIO — 案件詳細ページ 共通スタイル
   Figma: OiQR66y9YoBAVXT759bTCG / page "LP" (2292:179)
   数値は docs/design_handoff_lp/case_detail_structure_proposal_2026-08-27.md が正
   ========================================================================== */

/* --- 1. トークン ---------------------------------------------------------- */
:root{
  --primary:      #0e78c4;
  --ink:          #000000;   /* 見出し・本文の最も濃い色 */
  --ink-nav:      #0b0b0b;   /* ナビのロゴ・リンク */
  --gray-3:       #333333;   /* 本文 */
  --gray-6:       #666666;   /* ラベル・補足 */
  --gray-9:       #999999;   /* パンくず・PREV/NEXT ラベル */
  --gray-bd:      #bdbdbd;
  --tag:          #a3cce9;

  --fig-bg:       #fafafa;   /* 図版の台 */
  --roles-bg:     #edf1f5;   /* 担当範囲ブロックの地色 */
  --line-image:   #dddddd;   /* 図版内の画像の枠線 */
  --line-box:     #e5e5e5;   /* 図解の箱の枠線 */
  --line-arrow:   #cccccc;   /* 矢印 */
  --line-rule:    #333333;   /* SP フッターの区切り線（黒背景の上） */

  --nav-h-pc:     60px;
  --nav-h-sp:     56px;

  --font-en: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* --- 2. リセット ---------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--font-jp);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,dl,dd{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }

/* 固定ヘッダーの下にアンカー先が潜り込まないように */
[id]{ scroll-margin-top:72px; }
@media (max-width:767px){ [id]{ scroll-margin-top:64px; } }

/* --- 3. レイアウトの器 ---------------------------------------------------- */
/* PC: 左右 64 / コンテンツ最大 1312   SP: 左右 20 / コンテンツ 350 */
.l-inner{
  width:100%;
  max-width:calc(1312px + 64px * 2);
  margin-inline:auto;
  padding-inline:64px;
}
@media (max-width:1100px){ .l-inner{ padding-inline:40px; } }
@media (max-width:767px){  .l-inner{ padding-inline:20px; } }

/* --- 4. グローバルナビ ---------------------------------------------------- */
.g-nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h-pc);
  display:flex; align-items:center;
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
          backdrop-filter:saturate(180%) blur(12px);
}
.g-nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; }
.g-nav__logo{ display:flex; align-items:flex-end; gap:8px; color:var(--ink-nav); }
.g-nav__logo b{ font-family:var(--font-en); font-weight:700; font-size:16px; line-height:26px; letter-spacing:.32px; }
.g-nav__logo span{ font-family:var(--font-en); font-weight:400; font-size:10px; line-height:24px; letter-spacing:.8px; opacity:.55; }
.g-nav__list{ display:flex; align-items:center; gap:32px; }
.g-nav__list a{ display:flex; align-items:center; gap:8px; color:var(--ink-nav); }
.g-nav__list a i{ font-family:var(--font-en); font-style:normal; font-weight:400; font-size:9px; line-height:24px; letter-spacing:.9px; opacity:.42; }
.g-nav__list a span{ font-family:var(--font-en); font-weight:500; font-size:13px; line-height:24px; letter-spacing:.52px; }
.g-nav__list a:hover span{ color:var(--primary); }
.g-nav__burger{ display:none; width:24px; height:24px; color:var(--ink-nav); }

@media (max-width:767px){
  .g-nav{ height:var(--nav-h-sp); }
  .g-nav__list{ display:none; }
  .g-nav__burger{ display:block; }
}

/* SP メニュー（オーバーレイ） */
.sp-menu{
  position:fixed; inset:0; z-index:200;
  background:#000; color:#fff;
  display:flex; flex-direction:column;
  padding:20px;
  opacity:0; visibility:hidden; transition:opacity .16s ease-out, visibility .16s ease-out;
}
.sp-menu[data-open="true"]{ opacity:1; visibility:visible; }
.sp-menu__close{ align-self:flex-end; width:24px; height:24px; color:#fff; }
.sp-menu__list{ margin-top:24px; }
.sp-menu__list a{ display:flex; align-items:center; justify-content:center; gap:8px; padding:16px 0; }
.sp-menu__list li + li{ border-top:1px solid var(--line-rule); }
.sp-menu__list a i{ font-family:var(--font-en); font-style:normal; font-size:9px; line-height:24px; letter-spacing:.9px; color:rgba(255,255,255,.55); }
.sp-menu__list a span{ font-family:var(--font-en); font-weight:500; font-size:13px; line-height:24px; letter-spacing:.52px; }

/* --- 5. ページヘッダー（案件のタイトルまわり） ----------------------------- */
.p-header{ padding-top:calc(var(--nav-h-pc) + 72px); padding-bottom:96px; }
.p-header__inner{ display:flex; flex-direction:column; gap:48px; }

.p-header__crumb{
  font-family:var(--font-jp); font-weight:500;
  font-size:12px; line-height:24px; letter-spacing:2.16px; color:var(--gray-9);
}
/* パンくずの Works だけトップへ戻れる。ふだんは地の文に紛れさせ、
   ホバーしたときだけ色を差して押せると示す。
   transition は基本の指定に置く。ホバー側に書くと、離れるときに戻らない */
.p-header__crumb-link{ color:inherit; text-decoration:none; transition:color .3s ease; }
.p-header__title-group{ display:flex; flex-direction:column; gap:14px; }
.p-header__eyebrow{ font-family:var(--font-en); font-weight:700; font-size:18px; line-height:18px; color:var(--primary); }
.p-header__title{ font-family:var(--font-en); font-weight:700; font-size:44px; line-height:44px; letter-spacing:-.88px; color:var(--ink); }
.p-header__platform{ font-size:14px; line-height:24px; color:var(--gray-6); }

.p-header__kv{ width:100%; aspect-ratio:1312 / 560; background:var(--fig-bg); overflow:hidden; }
.p-header__kv img{ width:100%; height:100%; object-fit:cover; }

.p-header__info{ display:flex; gap:64px; align-items:flex-start; }
.p-header__summary{ flex:1 1 800px; min-width:0; display:flex; flex-direction:column; gap:28px; }
.p-header__lead{ font-size:14px; line-height:26px; letter-spacing:.14px; color:var(--gray-3); }

.c-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.c-tags li{ background:var(--tag); color:#fff; border-radius:4px; padding:7px 12px; font-size:13px; line-height:13px; }

.p-header__meta{ flex:0 0 448px; display:flex; flex-direction:column; gap:20px; }
.p-header__meta div{ display:flex; flex-direction:column; gap:4px; }
.p-header__meta dt{ font-family:var(--font-en); font-size:12px; line-height:24px; color:var(--gray-6); }
.p-header__meta dd{ font-size:14px; line-height:24px; color:var(--ink); }

@media (max-width:1100px){
  .p-header__info{ gap:40px; }
  .p-header__meta{ flex-basis:360px; }
}
@media (max-width:767px){
  .p-header{ padding-top:calc(var(--nav-h-sp) + 24px); padding-bottom:40px; }
  .p-header__inner{ gap:24px; }
  .p-header__crumb{ font-size:10px; line-height:20px; letter-spacing:1.6px; }
  .p-header__title-group{ gap:8px; }
  .p-header__eyebrow{ font-size:14px; }
  .p-header__title{ font-size:32px; line-height:38px; letter-spacing:-.64px; }
  .p-header__platform{ font-size:12px; line-height:20px; }
  .p-header__kv{ aspect-ratio:350 / 240; }
  /* 縦積みでは align-items が「幅」に効く。flex-start のままだと
     メタ情報が文字幅までしか広がらず、border-top が途中で切れる */
  .p-header__info{ flex-direction:column; gap:24px; align-items:stretch; }
  /* 縦積みでは flex-basis が「高さ」になるので、PC 用の 800px を解除する */
  .p-header__summary{ flex:none; gap:16px; }
  .p-header__lead{ font-size:14px; line-height:26px; letter-spacing:.14px; }
  .c-tags li{ padding:6px 10px; font-size:12px; line-height:12px; }
  .p-header__meta{
    flex:none; gap:12px;
    padding-top:24px; border-top:1px solid var(--line-box);
  }
  .p-header__meta div{ flex-direction:row; gap:16px; }
  .p-header__meta dt{ flex:0 0 64px; font-size:11px; line-height:22px; }
  .p-header__meta dd{ flex:1 1 auto; font-size:14px; line-height:22px; }
}

/* --- 6. 本文セクション ---------------------------------------------------- */
.p-section{ padding-bottom:104px; }
.p-section:last-of-type{ padding-top:104px; }
.p-section__inner{ display:flex; flex-direction:column; gap:48px; }

.p-section__head{ display:flex; flex-direction:column; gap:0; }
.p-section__eyebrow{
  font-family:var(--font-en); font-weight:500;
  font-size:12px; line-height:24px; letter-spacing:2.16px; color:var(--primary);
}
.p-section__head-body{ display:flex; flex-direction:column; gap:16px; }
.p-section__title{ font-weight:700; font-size:24px; line-height:36px; color:var(--ink); }
.p-section__lead{ font-size:14px; line-height:26px; letter-spacing:.14px; color:var(--gray-3); }

@media (max-width:767px){
  .p-section{ padding-bottom:40px; }
  .p-section:last-of-type{ padding-top:0; }
  .p-section__inner{ gap:32px; }
  .p-section__eyebrow{ font-size:10px; line-height:20px; letter-spacing:1.8px; }
  .p-section__head-body{ gap:12px; }
  .p-section__title{ font-size:20px; line-height:32px; }
  .p-section__lead{ font-size:14px; line-height:26px; letter-spacing:.14px; }
}

/* サブ見出し（1セクション内で話題を分けるとき） */
.p-sub-group{ display:flex; flex-direction:column; gap:24px; }
.p-sub{ display:flex; flex-direction:column; gap:16px; }
.p-sub__title{ font-weight:700; font-size:16px; line-height:28px; color:var(--primary); }
.p-sub__lead{ font-size:14px; line-height:26px; letter-spacing:.14px; color:var(--gray-3); }
@media (max-width:767px){
  .p-sub-group{ gap:16px; }
  .p-sub{ gap:12px; }
  .p-sub__title{ font-size:16px; line-height:26px; }
}

/* 箇条書き */
.c-list{ display:flex; flex-direction:column; gap:4px; }
.c-list li{
  position:relative; padding-left:17px;
  font-size:14px; line-height:26px; letter-spacing:.14px; color:var(--gray-3);
}
.c-list li::before{
  content:""; position:absolute; left:0; top:11px;
  width:5px; height:5px; border-radius:50%; background:var(--primary);
}

/* 2カラム（左に文章、右に図版 など） */
.c-cols{ display:flex; gap:32px; align-items:flex-start; }
.c-cols__col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:16px; }
@media (max-width:767px){
  .c-cols{ flex-direction:column; gap:32px; }
  .c-cols__col{ flex-grow:0 !important; gap:12px; }
}

/* 用語の定義リスト（04 の Atomic Design 5階層 など） */
.c-deflist{ display:flex; flex-direction:column; gap:12px; }
.c-deflist__row{ display:flex; gap:24px; align-items:baseline; }
.c-deflist dt{ flex:0 0 300px; font-weight:700; font-size:14px; line-height:26px; color:var(--gray-3); }
.c-deflist dd{ flex:1 1 auto; margin:0; font-size:14px; line-height:26px; color:var(--gray-6); }
@media (max-width:767px){
  .c-deflist{ gap:16px; }
  .c-deflist__row{ flex-direction:column; gap:2px; }
  .c-deflist dt{ flex:none; font-size:14px; line-height:26px; }
  .c-deflist dd{ font-size:14px; line-height:26px; }
}

/* ラベル付きのカード並び（「刷新前／刷新後」「施策01・02・03」など） */
.c-cards{ display:flex; gap:32px; align-items:flex-start; }
.c-cards > *{ flex:1 1 0; min-width:0; }
.c-card{ display:flex; flex-direction:column; gap:14px; }
.c-card--fig-first{ gap:20px; }
.c-card__label{ display:flex; flex-direction:column; gap:2px; }
.c-card__label b{ font-weight:500; font-size:14px; line-height:24px; color:var(--ink); }
.c-card__label span{ font-size:12px; line-height:24px; color:var(--gray-6); }
.c-card__title{ font-weight:700; font-size:16px; line-height:28px; color:var(--primary); }
.c-card__body{ font-size:14px; line-height:26px; letter-spacing:.14px; color:var(--gray-3); }
.c-card__text{ display:flex; flex-direction:column; gap:8px; }

@media (max-width:767px){
  .c-cards{ flex-direction:column; gap:16px; }
  .c-card{ gap:10px; }
  .c-card--fig-first{ gap:16px; }
  .c-card__title{ font-size:16px; line-height:26px; }
  .c-card__label b{ font-size:13px; line-height:22px; }
  .c-card__label span{ font-size:11px; line-height:20px; }
}

/* --- 7. 図版 -------------------------------------------------------------- */
/* 第1階層：図版どうしの間隔は 32 固定（SP は 16） */
.c-figs{ display:flex; gap:32px; align-items:flex-start; }
.c-figs > *{ flex:1 1 0; min-width:0; }
.c-figs--col{ flex-direction:column; }

/* 台（fig）：地色 #FAFAFA / 角丸 0 / 枠線なし / 余白 PC32・SP16 */
.c-fig{ display:flex; flex-direction:column; gap:12px; }
.c-fig__frame{
  background:var(--fig-bg);
  padding:32px;
  display:flex; align-items:center; justify-content:center;
}
/* 第2階層：枠の中で画像を並べる間隔は 16 固定 */
.c-fig__frame--row{ display:flex; flex-direction:row; gap:16px; align-items:flex-start; }
.c-fig__frame--col{ flex-direction:column; gap:16px; }
.c-fig__frame > img,
.c-fig__frame--row > img{ width:100%; }

/* Figma の図版枠をそのまま書き出した画像。地色と余白は画像側に入っているので、
   ここでは枠も余白も足さない。 */
.c-fig__media{ display:block; min-width:0; }
.c-fig__media img{ display:block; width:100%; height:auto; }

/* 図版内の画像の枠線は #DDDDDD で固定 */
.c-fig img.is-bordered{ border:1px solid var(--line-image); }

.c-fig__caption{
  font-size:12px; line-height:22px; letter-spacing:.48px; color:var(--gray-6);
}

@media (max-width:767px){
  /* 縦積みでは主軸が縦になるので、幅は親いっぱいに伸ばす（fit-content にしない） */
  .c-figs{ flex-direction:column; gap:16px; align-items:stretch; }
  .c-figs > *{ flex:0 0 auto; }
  .c-fig{ gap:8px; }
  .c-fig__frame{ padding:16px; }
  .c-fig__caption{ font-size:11px; line-height:20px; letter-spacing:.44px; }
}

/* 横長すぎる図版は SP で横スクロールさせる */
.c-fig__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* SP では縮めず実寸（--figw）のまま横に流す。PC は通常どおり幅いっぱい */
.c-fig__media.c-fig__scroll img{ width:var(--figw); max-width:none; }
@media (min-width:768px){
  .c-fig__media.c-fig__scroll img{ width:100%; max-width:100%; }
}

/* 画像がまだ入っていない枠 */
.c-fig__frame.is-placeholder{
  border:1px dashed var(--line-arrow);
  color:var(--gray-9);
  font-family:var(--font-en); font-size:12px; letter-spacing:.9px;
  min-height:200px;
}

/* --- 8. 担当範囲（footer-roles） ------------------------------------------ */
.p-roles{ padding:64px 0; }
.p-roles__box{ background:var(--roles-bg); padding:48px; display:flex; flex-direction:column; gap:24px; }
.p-roles__title{ font-weight:700; font-size:16px; line-height:28px; color:var(--ink); text-align:center; }
.p-roles__list{ display:flex; gap:40px; align-items:stretch; }
.p-roles__item{ flex:1 1 0; background:#fff; padding:32px; display:flex; flex-direction:column; gap:16px; }
.p-roles__item h3{ font-weight:700; font-size:16px; line-height:24px; color:var(--primary); }
.p-roles__item p{ font-size:14px; line-height:24px; letter-spacing:.13px; color:var(--gray-3); }

@media (max-width:767px){
  .p-roles{ padding:0; background:var(--roles-bg); }
  .p-roles .l-inner{ padding-block:40px; }
  .p-roles__box{ padding:0; background:none; gap:20px; }
  .p-roles__title{ font-size:16px; line-height:26px; }
  .p-roles__list{ flex-direction:column; gap:20px; }
  .p-roles__item{ padding:20px; gap:4px; }
  .p-roles__item h3{ font-size:16px; line-height:22px; }
  .p-roles__item p{ font-size:14px; line-height:22px; letter-spacing:.12px; }
}

/* --- 8-2. サービスサイトへの導線（footer-lp-cta） ------------------------- */
/* 情報欄のリンク行 */
.p-header__meta a{ color:var(--primary); text-decoration:none; }

/* 「担当範囲」の下、前後の案件の手前に出る締めの導線 */
.p-lpcta{ padding:0 0 64px; }
.p-lpcta__inner{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.p-lpcta__lead{ font-size:14px; line-height:24px; color:var(--gray-6); }
.p-lpcta__link{ text-decoration:none; }

@media (max-width:767px){
  /* SP は担当範囲が色ベタの帯なので、白地に戻ってから上下に余白を取る */
  .p-lpcta{ padding:40px 0; }
}

/* --- 9. 前後の案件（footer-prevnext） ------------------------------------- */
.p-prevnext{ background:#fff; padding:40px 0; }
.p-prevnext__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
/* 400px を基準にしつつ、画面が狭いときは縮む（縮まないと 768〜1087px で横に溢れる） */
.p-prevnext__item{ display:flex; align-items:center; gap:8px; flex:0 1 400px; min-width:0; }
.p-prevnext__item--next{ justify-content:flex-end; }
.p-prevnext__item.is-disabled{ opacity:.35; pointer-events:none; }
/* 最初の案件の PREV／最後の案件の NEXT。中身は出さず場所だけ確保する */
.p-prevnext__item.is-empty{ visibility:hidden; }
.p-prevnext__arrow{
  flex:none; width:40px; height:40px; border-radius:20px;
  display:flex; align-items:center; justify-content:center; color:var(--primary);
  /* パンくずと同じ速さ。ホバー側でなく基本の指定に置くと、離れるときも戻る */
  transition:background-color .3s ease;
}
.p-prevnext__item a:hover .p-prevnext__arrow{ background:rgba(0,0,0,.06); }
.p-prevnext__item > a,
.p-prevnext__item > span{ display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; }
.p-prevnext__item--next > a,
.p-prevnext__item--next > span{ flex-direction:row; justify-content:flex-end; }
.p-prevnext__text{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
.p-prevnext__item--next .p-prevnext__text{ align-items:flex-end; text-align:right; }
.p-prevnext__label{
  font-family:var(--font-en); font-weight:500;
  font-size:10px; line-height:20px; letter-spacing:1.6px; color:var(--gray-9);
}
.p-prevnext__value{
  display:flex; align-items:center; gap:6px;
  font-weight:500; font-size:14px; line-height:24px; color:var(--ink);
}
.p-prevnext__value .c-lock{ flex:none; width:13px; height:13px; color:var(--gray-9); }
.p-prevnext__index{ display:flex; flex-direction:column; gap:2px; flex:0 0 200px; }
.p-prevnext__index .p-prevnext__label{ font-family:var(--font-en); }

@media (max-width:767px){
  .p-prevnext{ padding:16px 0; }
  .p-prevnext__inner{ gap:12px; }
  .p-prevnext__item{ flex:1 1 0; }
  .p-prevnext__item > a{ gap:4px; }
  .p-prevnext__arrow{ width:40px; height:40px; }
  .p-prevnext__label{ display:none; }
  .p-prevnext__value{ font-weight:400; font-size:14px; line-height:24px; color:var(--gray-3); }
  .p-prevnext__index{ flex:0 0 auto; }
  .p-prevnext__index .p-prevnext__value{ justify-content:center; }
  /* SP は案件名を出さず「前へ／次へ」だけ */
  .p-prevnext__name{ display:none; }
}
@media (min-width:768px){
  .p-prevnext__short{ display:none; }
}

/* --- 10. フッター（footer-copyright） ------------------------------------- */
.g-footer{ background:#000; color:#fff; padding:47px 0; }
.g-footer__inner{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.g-footer__list{ display:flex; gap:32px; }
.g-footer__list a{ display:flex; align-items:center; gap:8px; }
.g-footer__list a i{ font-family:var(--font-en); font-style:normal; font-size:9px; line-height:24px; letter-spacing:.9px; color:rgba(255,255,255,.55); }
.g-footer__list a span{ font-family:var(--font-en); font-weight:500; font-size:13px; line-height:24px; letter-spacing:.52px; }
.g-footer__copyright{
  font-family:var(--font-en); font-size:12px; line-height:24px; letter-spacing:.96px;
  color:rgba(255,255,255,.6);
}
@media (max-width:767px){
  .g-footer{ padding:40px 0; }
  .g-footer__inner{ gap:24px; }
  /* nav が中央寄せで縮むと罫線もタップ領域も幅いっぱいにならない */
  .g-footer__inner > nav{ width:100%; }
  .g-footer__list{ flex-direction:column; gap:0; width:100%; }
  .g-footer__list li + li{ border-top:1px solid var(--line-rule); }
  .g-footer__list a{ justify-content:center; width:100%; padding:16px 0; }
}

/* --- 11. 印刷 ------------------------------------------------------------- */
@media print{
  .g-nav,.sp-menu,.p-prevnext{ display:none; }
  .p-header{ padding-top:24px; }
}

/* ==========================================================================
   トップページ（index）
   Figma: V1_PC_1440 (2410:173) / V1_SP_390 (2596:1706)
   ========================================================================== */

.p-top{
  --nav-h-pc:84px;
  --nav-h-sp:76px;
  --bg-alt:#f7f8f9;   /* Works・Contact の地色 */
  --accent-red:#e82e31;
}
.p-top [id]{ scroll-margin-top:96px; }
@media (max-width:767px){ .p-top [id]{ scroll-margin-top:84px; } }

/* --- ナビ：ヒーローの上では白抜き、スクロールすると白帯に変わる -------------- */
.p-top .g-nav{ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
.p-top .g-nav__logo,
.p-top .g-nav__list a span,
.p-top .g-nav__burger{ color:#fff; }
.p-top .g-nav__logo span{ color:rgba(255,255,255,.65); opacity:1; }
.p-top .g-nav__list a i{ color:rgba(255,255,255,.55); opacity:1; }
.p-top .g-nav.is-solid{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
          backdrop-filter:saturate(180%) blur(12px);
}
.p-top .g-nav.is-solid .g-nav__logo,
.p-top .g-nav.is-solid .g-nav__list a span,
.p-top .g-nav.is-solid .g-nav__burger{ color:var(--ink-nav); }
.p-top .g-nav.is-solid .g-nav__logo span{ color:var(--ink-nav); opacity:.55; }
.p-top .g-nav.is-solid .g-nav__list a i{ color:var(--ink-nav); opacity:.42; }
.p-top .g-nav.is-solid .g-nav__list a:hover span{ color:var(--primary); }

/* --- 1. ヒーロー ---------------------------------------------------------- */
.t-hero{ position:relative; height:900px; overflow:hidden; background:#000; color:#fff; }
.t-hero__photo{ position:absolute; inset:0; }
.t-hero__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.t-hero__wash{ position:absolute; inset:0; background:rgba(146,109,109,.24); }
/* 背景の大きな "portfolio"。画面幅に合わせて伸び縮みする */
.t-hero__ghost{
  position:absolute; left:-.6vw; bottom:-2vw;
  font-family:var(--font-en); font-weight:700;
  font-size:min(25vw,360px); line-height:.85; letter-spacing:-.04em;
  color:rgba(255,255,255,.28); white-space:nowrap; pointer-events:none;
}
.t-hero__inner{
  position:relative; height:100%;
  display:flex; flex-direction:column;
  padding-top:calc(var(--nav-h-pc) + 56px); padding-bottom:56px;
}
.t-hero__date{
  align-self:flex-end;
  font-family:var(--font-en); font-size:11px; line-height:24px; letter-spacing:1.32px;
  color:rgba(255,255,255,.7);
}
.t-hero__title{
  margin-top:14px;
  font-family:var(--font-en); font-weight:700;
  font-size:min(9vw,130px); line-height:1.05; letter-spacing:-.02em;
}
.t-hero__title span{ color:var(--accent-red); }
.t-hero__foot{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.t-hero__roles{
  font-family:var(--font-en); font-size:16px; line-height:28px; letter-spacing:.32px;
  color:rgba(255,255,255,.92);
}
.t-hero__scroll{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.t-hero__scroll span{
  font-family:var(--font-en); font-weight:500;
  font-size:11px; line-height:24px; letter-spacing:1.98px; color:rgba(255,255,255,.7);
}
.t-hero__scroll i{ width:1px; height:24px; background:rgba(255,255,255,.4); }

@media (max-width:767px){
  .t-hero{ height:680px; }
  .t-hero__photo img{ object-position:65% 25%; }
  .t-hero__ghost{ left:-.8vw; bottom:-1.8vw; font-size:28.2vw; }
  .t-hero__inner{ padding-top:calc(var(--nav-h-sp) + 8px); padding-bottom:44px; }
  .t-hero__date{ font-size:9px; }
  .t-hero__title{ margin-top:56px; font-size:min(22.6vw,88px); line-height:1; letter-spacing:-.03em; }
  .t-hero__roles{ font-size:16px; line-height:24px; }
}

/* --- 2. セクションの骨格 -------------------------------------------------- */
/* PC: 左に番号ラベル（264px）、右に見出しと本文。SP は縦積み */
.t-sec{ padding:120px 0; background:#fff; }
.t-sec--works,
.t-sec--contact{ background:var(--bg-alt); }
.t-sec__inner{ display:grid; grid-template-columns:264px 1fr; }
.t-sec__head{ grid-column:1 / -1; display:flex; align-items:center; }
.t-sec__eyebrow{
  flex:0 0 264px;
  font-family:var(--font-jp); font-weight:500;
  font-size:12px; line-height:24px; letter-spacing:2.16px; color:var(--primary);
}
.t-sec__eyebrow i{ font-style:normal; }
.t-sec__eyebrow i::after{ content:" / "; }
.t-sec__title{
  font-family:var(--font-en); font-weight:700;
  font-size:64px; line-height:64px; letter-spacing:-1.28px; color:var(--ink);
}
.t-sec__sub{
  grid-column:2; margin-top:16px;
  font-size:16px; line-height:16px; letter-spacing:.64px; color:var(--gray-6);
}
.t-sec__body{ grid-column:2; margin-top:80px; }
.t-sec__wide{ grid-column:1 / -1; margin-top:120px; }

@media (max-width:1100px){
  .t-sec__inner{ grid-template-columns:200px 1fr; }
  .t-sec__eyebrow{ flex-basis:200px; }
  .t-sec__title{ font-size:52px; line-height:56px; }
}
@media (max-width:767px){
  .t-sec{ padding:40px 0; }
  .t-sec__inner{ display:block; }
  .t-sec__head{ display:block; }
  .t-sec__eyebrow{ font-size:12px; line-height:24px; letter-spacing:2.16px; }
  .t-sec__title{ margin-top:10px; font-size:48px; line-height:44px; letter-spacing:0; }
  .t-sec__sub{ margin-top:10px; font-size:11px; line-height:24px; }
  .t-sec__body{ margin-top:40px; }
  .t-sec__wide{ margin-top:40px; }
}

/* --- 3. About ------------------------------------------------------------ */
.t-about{ display:flex; gap:64px; align-items:flex-start; }
.t-about__left{ flex:1 1 492px; min-width:0; }
.t-about__lead{
  font-weight:500; font-size:24px; line-height:40.8px; letter-spacing:.48px; color:var(--ink);
}
.t-about__body{ margin-top:32px; font-size:14px; line-height:26px; letter-spacing:.28px; color:var(--gray-3); }
.t-about__chips{ margin-top:32px; display:flex; flex-wrap:wrap; gap:8px; }
.t-about__chips li{
  border:1px solid var(--gray-3); padding:7px 14px;
  font-family:var(--font-en); font-size:14px; line-height:14px; color:var(--ink);
}
.t-about__facts{ flex:1 1 492px; min-width:0; }
.t-about__fact{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:20px 0 16px; border-bottom:1px solid var(--line-box);
}
.t-about__fact dt{ font-family:var(--font-en); font-weight:700; font-size:18px; line-height:24px; letter-spacing:.18px; color:var(--ink); }
.t-about__fact dd{ margin:0; font-size:12px; line-height:24px; color:var(--gray-6); text-align:right; }

@media (max-width:767px){
  .t-about{ flex-direction:column; gap:40px; }
  .t-about__left,
  .t-about__facts{ flex:none; width:100%; }
  .t-about__lead{ font-size:20px; line-height:34px; }
  .t-about__body{ margin-top:24px; }
  .t-about__chips{ margin-top:24px; }
  .t-about__chips li{ font-size:13px; line-height:13px; padding:7px 12px; }
}

/* --- 4. Works ------------------------------------------------------------ */
.t-works__intro{ max-width:640px; font-size:16px; line-height:28.8px; letter-spacing:.32px; color:var(--gray-6); }
.t-works__groups{ display:flex; flex-direction:column; gap:120px; }
.t-group > * + *{ margin-top:48px; }

.t-group__head{ display:flex; flex-direction:column; align-items:center; gap:24px; }
.t-group__name{ display:flex; align-items:center; gap:12px; }
.t-group__name b{ font-weight:700; font-size:20px; line-height:30px; letter-spacing:1.3px; color:var(--ink); }
.t-group__name span{
  font-family:var(--font-en); font-size:14px; line-height:24px; letter-spacing:1.65px; color:var(--gray-9);
}
.t-group__line{ width:72px; height:1px; background:var(--primary); }

@media (max-width:767px){
  .t-works__intro{ font-size:14px; line-height:24px; }
  .t-works__groups{ gap:72px; }
  .t-group > * + *{ margin-top:32px; }
  .t-group__head{ gap:24px; }
  .t-group__name{ flex-direction:column; gap:2px; }
  .t-group__line{ width:48px; }
}

/* 個人開発のヒーローカード（画像の上に文字を重ねる） */
.t-pj{ position:relative; display:block; background:#000; color:#fff; aspect-ratio:1312 / 720; overflow:hidden; }
.t-pj__visual{ position:absolute; inset:0 0 0 20.58%; }
.t-pj__visual img,
.t-pj__visual picture{ width:100%; height:100%; }
.t-pj__visual img{ object-fit:cover; }
.t-pj__over{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,0) 70%); }
.t-pj__body{ position:absolute; left:44px; top:19.4%; width:min(521px,46%); }
.t-pj__eyebrow{ font-size:14px; line-height:25px; }
.t-pj__eyebrow span{ display:block; font-size:11px; line-height:13px; color:var(--gray-bd); margin-top:4px; }
.t-pj__desc{ margin-top:56px; font-size:14px; line-height:160%; }
.t-pj__title{
  margin-top:16px;
  font-family:var(--font-en); font-weight:700;
  font-size:clamp(56px,9.15cqi,120px); line-height:1.06; letter-spacing:-.022em;
}
.t-pj__body .c-cta{ margin-top:56px; }
.t-pj__sp{ display:none; }

/* コンテナ幅を基準に見出しを伸縮させる（対応していないブラウザは clamp の最小値） */
@supports (container-type:inline-size){
  .t-pj{ container-type:inline-size; }
}

@media (max-width:767px){
  .t-pj{ aspect-ratio:auto; }
  .t-pj__visual{ position:static; aspect-ratio:350 / 280; }
  .t-pj__over,
  .t-pj__body{ display:none; }
  .t-pj__sp{ display:block; padding:16px 20px; }
  .t-pj__sp-title{ font-weight:700; font-size:20px; line-height:1.15; }
  .t-pj__sp-meta{ margin-top:8px; font-size:10px; line-height:1.2; color:var(--gray-bd); }
  .t-pj__sp-roles{ margin-top:8px; font-size:12px; line-height:1.2; }
  .t-pj__sp .c-cta{ display:block; width:fit-content; margin:8px 0 0 auto; }
}

/* 自社プロダクトのカード */
.t-prod{ display:flex; flex-direction:column; background:#000; color:#fff; height:100%; }
.t-prod__visual{ aspect-ratio:644 / 280; }
.t-prod__visual img{ width:100%; height:100%; object-fit:cover; }
.t-prod__body{ flex:1; padding:24px; display:flex; align-items:flex-end; gap:24px; }
.t-prod__text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px; }
.t-prod__span{ font-family:var(--font-en); font-weight:700; font-size:12px; line-height:1.2; letter-spacing:.8px; color:rgba(255,255,255,.7); }
.t-prod__title{ font-weight:700; font-size:26px; line-height:1.2; }
.t-prod__platform{ font-family:var(--font-en); font-size:13px; line-height:1.2; letter-spacing:.3px; color:var(--gray-bd); }
.t-prod__roles{ font-size:14px; line-height:1.2; }
.t-prod__roles--sp{ display:none; }
.t-prod__body .c-cta{ flex:none; }

@media (max-width:767px){
  .t-prod__visual{ aspect-ratio:350 / 280; }
  .t-prod__body{ flex-direction:column; align-items:stretch; gap:8px; padding:16px 20px; }
  .t-prod__title{ font-size:20px; }
  .t-prod__platform{ font-size:10px; }
  .t-prod__roles{ font-size:12px; }
  .t-prod__roles--pc{ display:none; }
  .t-prod__roles--sp{ display:block; }
  .t-prod__body .c-cta{ align-self:flex-end; }
}

/* 「See project →」の共通スタイル */
.c-cta{
  display:inline-flex; align-items:center; gap:14px; padding-bottom:4px;
  border-bottom:1px solid var(--primary);
  font-family:var(--font-en); font-size:14px; line-height:24px; letter-spacing:.56px;
  color:var(--primary); white-space:nowrap;
}
.c-cta i{ font-style:normal; transition:transform .28s ease; }

/* --- 5. 受託案件のカード -------------------------------------------------- */
.c-arc{ display:flex; flex-direction:column; background:#fff; height:100%; color:inherit; }
.c-arc__head{
  flex:none; height:132px; padding:24px 20px;
  display:flex; align-items:stretch; justify-content:space-between; gap:8px;
  /* 年度ごとの色は下の [data-year] で入れる */
  background:linear-gradient(90deg,rgba(200,220,251,.4),rgba(175,233,253,.4));
}
.c-arc__year b{
  display:block;
  font-family:var(--font-en); font-weight:200;
  font-size:64px; line-height:1; letter-spacing:-.8px;
  color:var(--primary);
}
.c-arc__span{
  display:block; margin-top:2px;
  font-family:var(--font-en); font-size:12px; line-height:1.5; letter-spacing:.5px; color:var(--gray-6);
}
.c-arc__kind{
  flex:none; width:40px; padding:3px 8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.c-arc__icon{ width:14px; height:14px; color:var(--gray-6); }
.c-arc__kind span{
  font-family:var(--font-en); font-weight:500; font-size:10px; line-height:1.2; letter-spacing:1.2px; color:var(--gray-9);
}
.c-arc__body{ flex:1; padding:20px; display:flex; flex-direction:column; gap:16px; }
.c-arc__text{ display:flex; flex-direction:column; gap:12px; }
.c-arc__title{ font-weight:700; font-size:20px; line-height:1.5; color:#111; }
.c-arc__meta{ display:flex; align-items:center; gap:10px; font-size:14px; line-height:1.2; color:var(--gray-6); }
.c-arc__nda{
  flex:none; border-radius:4px; padding:4px 8px; background:#f2f0ec;
  font-family:var(--font-en); font-weight:700; font-size:10px; line-height:1.2; letter-spacing:1px; color:#8a8a8a;
}
.c-arc__roles{ font-size:14px; line-height:1.2; color:var(--gray-6); }
.c-arc__foot{ margin-top:auto; display:flex; justify-content:flex-end; min-height:28px; }

/* 年度カラー（正は Figma の「年度カラー」一覧 3507:10368。帯は不透明度40%） */
.c-arc[data-year="2025"] .c-arc__head{ background:linear-gradient(90deg,rgba(200,220,251,.4),rgba(175,233,253,.4)); }
.c-arc[data-year="2025"] .c-arc__year b{ color:#0e78c4; }
.c-arc[data-year="2024"] .c-arc__head{ background:linear-gradient(90deg,rgba(166,246,193,.4),rgba(217,235,174,.4)); }
.c-arc[data-year="2024"] .c-arc__year b{ color:#518675; }
.c-arc[data-year="2020"] .c-arc__head{ background:linear-gradient(90deg,rgba(255,169,170,.4),rgba(255,205,174,.4)); }
.c-arc[data-year="2020"] .c-arc__year b{ color:#c95062; }
.c-arc[data-year="2019"] .c-arc__head{ background:linear-gradient(90deg,rgba(174,175,255,.4),rgba(234,201,255,.4)); }
.c-arc[data-year="2019"] .c-arc__year b{ color:#7b64d6; }
.c-arc[data-year="2018"] .c-arc__head{ background:linear-gradient(90deg,rgba(239,196,180,.4),rgba(255,207,129,.4)); }
.c-arc[data-year="2018"] .c-arc__year b{ color:#a4713f; }

/* --- 6. スライダー -------------------------------------------------------- */
.c-slider{ display:flex; flex-direction:column; align-items:center; gap:24px; }
.c-slider__track{
  display:flex; gap:24px; width:100%;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
}
.c-slider__track::-webkit-scrollbar{ display:none; }
.c-slider__track > *{ scroll-snap-align:start; }
.c-slider--arc .c-slider__track > *{ flex:0 0 calc((100% - 48px) / 3); }
.c-slider--prod .c-slider__track > *{ flex:0 0 calc((100% - 24px) / 2); }

.c-slider__ctrl{ display:flex; align-items:center; gap:24px; }
/* display:flex は hidden 属性より強いので、隠す指定を明示する */
.c-slider__ctrl[hidden]{ display:none; }
.c-slider__arrow{
  width:40px; height:40px; border-radius:20px;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
}
.c-slider__arrow:hover{ background:rgba(0,0,0,.06); }
.c-slider__arrow[disabled]{ opacity:.25; cursor:default; }
.c-slider__count{ display:flex; align-items:center; gap:6px; font-family:var(--font-en); font-size:13px; line-height:20px; letter-spacing:1.3px; }
.c-slider__count b{ font-weight:500; color:var(--ink); }
.c-slider__count span{ color:var(--gray-9); }

@media (max-width:1100px){
  .c-slider--arc .c-slider__track > *{ flex:0 0 calc((100% - 24px) / 2); }
}
@media (max-width:767px){
  .c-slider{ gap:24px; }
  .c-slider__track{ gap:16px; }
  .c-slider--arc .c-slider__track > *,
  .c-slider--prod .c-slider__track > *{ flex:0 0 100%; }
}

/* --- 7. Career ------------------------------------------------------------ */
.t-career__row{
  display:flex; align-items:flex-start; gap:0;
  padding:24px 0; border-bottom:1px solid var(--line-box);
}
.t-career__row--head{
  padding:0 0 33px; border-bottom:1px solid var(--ink);
  font-family:var(--font-en); font-weight:500;
  font-size:12px; line-height:24px; letter-spacing:2.4px; color:var(--gray-6);
}
.t-career__row--head .t-career__date,
.t-career__row--head .t-career__company{ font:inherit; color:inherit; }
.t-career__date{
  flex:0 0 185px;
  font-family:var(--font-en); font-size:14px; line-height:24px; letter-spacing:.56px; color:var(--gray-6);
}
.t-career__company{ flex:1 1 auto; min-width:0; font-weight:500; font-size:18px; line-height:24px; color:var(--ink); }
.t-career__role{
  flex:0 0 320px; text-align:right;
  font-family:var(--font-en); font-size:13px; line-height:24px; letter-spacing:.26px; color:var(--gray-6);
}

@media (max-width:900px){
  .t-career__date{ flex-basis:160px; }
  .t-career__role{ flex:0 0 240px; }
}
@media (max-width:767px){
  .t-career{ border-top:1px solid var(--ink); }
  .t-career__row{ flex-direction:column; align-items:stretch; gap:4px; padding:16px 0 14px; }
  .t-career__row--head{ display:none; }
  .t-career__date{ flex:none; font-size:14px; }
  .t-career__company{ flex:none; font-size:16px; line-height:26px; }
  .t-career__role{ flex:none; text-align:left; font-size:13px; }
}

/* --- 8. Contact ----------------------------------------------------------- */
.t-contact__lead{ max-width:640px; font-size:16px; line-height:28.8px; letter-spacing:.64px; color:var(--gray-6); }
.t-contact__lead a{ color:var(--primary); text-decoration:underline; }
@media (max-width:767px){
  .t-contact__lead{ font-size:14px; line-height:24px; }
}


/* --- 9. ホバー（マウスが使える環境だけ） --------------------------------- */
/* 触るとどこが押せるのかが分かるように、カードは少し浮かせて画像をゆっくり寄せる。
   指で操作する端末では効かせない（タップ後に効果が残ってしまうため）。 */
@media (hover:hover) and (pointer:fine){

  /* 「See project →」：矢印だけ右に出る */
  a:hover .c-cta i{ transform:translateX(4px); }

  /* 個人開発・自社プロダクトのカード：画像をゆっくり寄せる */
  .t-pj__visual,
  .t-prod__visual{ overflow:hidden; }
  .t-pj__visual img,
  .t-prod__visual img{ transition:transform .5s ease; }
  .t-pj:hover .t-pj__visual img,
  .t-prod:hover .t-prod__visual img{ transform:scale(1.03); }

  /* 個人開発は文字を画像に重ねているので、寄せるぶん少しだけ暗くして読みやすさを保つ */
  .t-pj__over::after{
    content:""; position:absolute; inset:0;
    background:#000; opacity:0; transition:opacity .4s ease;
  }
  .t-pj:hover .t-pj__over::after{ opacity:.12; }

  /* 受託案件カード：詳細ページがあるものだけ浮かせる（枠なしなので影で見せる） */
  a.c-arc{ transition:transform .25s ease, box-shadow .25s ease; }
  a.c-arc:hover{ transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,.10); }

  /* ナビ：ヒーローの上（白抜き）では下線、白帯に変わったあとは色で見せる */
  .g-nav__list a span{ transition:color .2s ease; }
  .p-top .g-nav:not(.is-solid) .g-nav__list a span{
    border-bottom:1px solid transparent; transition:border-color .2s ease;
  }
  .p-top .g-nav:not(.is-solid) .g-nav__list a:hover span{ border-bottom-color:rgba(255,255,255,.8); }

  /* フッターのリンク */
  .g-footer__list a{ transition:opacity .2s ease; }
  .g-footer__list a:hover{ opacity:.65; }

  /* Contact の本文リンク */
  .p-header__meta a,
  .p-lpcta__link{ transition:opacity .2s ease; }
  .p-header__meta a:hover,
  .p-lpcta__link:hover{ opacity:.7; }
  .p-header__crumb-link:hover{ color:var(--primary); }
  .t-contact__lead a{ transition:opacity .2s ease; }
  .t-contact__lead a:hover{ opacity:.7; }

  /* スライダーの矢印 */
  .c-slider__arrow{ transition:background-color .2s ease; }
  .c-slider__arrow[disabled]:hover{ background:none; }
}

/* 動きを控えたい設定の人には動かさない */
@media (prefers-reduced-motion:reduce){
  .c-cta i,
  .t-pj__visual img,
  .t-prod__visual img,
  a.c-arc{ transition:none; }
  a:hover .c-cta i,
  .t-pj:hover .t-pj__visual img,
  .t-prod:hover .t-prod__visual img,
  a.c-arc:hover{ transform:none; }
}