/* =============================================================
   業種モード (inc/industry-mode.php)
   <html data-mode="..."> のときだけ style.css のトークンを上書きする。
   レイアウトは共通。変えるのは 色 / 書体 / 少しのあしらい。
   書体はモードごとに --ff-en(欧文・数字・ラベル)と --ff-jp(和文・本文)を丸ごと差し替え、
   作品タイトル・パンくず・本文まで同じ書体系で統一する。
   corp / it はオリジナルと同じ Inter + Noto Sans JP。ent は欧文のみ差し替え(和文ゴシックと相性が良いため)。
   ============================================================= */

/* ---------- 共通フック ---------- */
:root{
  --ff-head: var(--ff-en);   /* 見出し書体 */
  --head-w: 700;             /* ヒーロー見出しの太さ */
  --sec-w: 800;              /* セクション見出しの太さ */
  --on-accent: #fff;         /* アクセント色の上に載る文字色 */
  --surface-2: var(--line-2);
}
html[data-mode] .hero__title{ font-family:var(--ff-head); font-weight:var(--head-w); }
html[data-mode] .sec-title,
html[data-mode] .lead-title{ font-family:var(--ff-head); font-weight:var(--sec-w); }

/* ---------- アパレル・美容・ライフスタイル ---------- */
html[data-mode="app"]{
  --bg:#F3F1EC; --ink:#1F1D1A; --ink-2:#4E4A43; --ink-3:#7E786C;
  --line:#DDD8CD; --line-2:#E9E5DC; --surface-2:#EAE6DC;
  --accent:#6B6749; --accent-d:#55523A; --placeholder:#2A2824;
  --ff-en:"Cormorant Garamond","Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --ff-jp:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --ff-head:"Cormorant Garamond","Shippori Mincho",var(--ff-jp);
  --head-w:500; --sec-w:500;
}
html[data-mode="app"] .sec-title,
html[data-mode="app"] .lead-title{ font-style:italic; letter-spacing:.02em; }
/* Cormorant の数字は初期設定が「オールドスタイル数字」(7や9が下に、6や8が上にはみ出す)。
   実績の数・日付などが揃って見えるよう、高さの揃った「ライニング数字」に切り替える */
html[data-mode="app"]{ font-variant-numeric:lining-nums; }
html[data-mode="app"] .hero__title{ font-family:"Shippori Mincho",var(--ff-jp); letter-spacing:.02em; }

/* ---------- メーカー・建設・金融・医療 : 書体はオリジナルと同じ(色と太さだけ) ---------- */
html[data-mode="corp"]{
  --bg:#F4F6F9; --ink:#14213D; --ink-2:#3C4A66; --ink-3:#65728A;
  --line:#D5DCE6; --line-2:#E6EBF2; --surface-2:#E8EDF5;
  --accent:#1F4E9C; --accent-d:#173D7D; --placeholder:#14213D;
  --ff-head:var(--ff-jp);
}

/* ---------- 小売・飲食・サービス ---------- */
html[data-mode="food"]{
  --bg:#FFFCF8; --ink:#2E2A28; --ink-2:#55504C; --ink-3:#86807A;
  --line:#EDE5DC; --line-2:#F5EFE8; --surface-2:#F8F0E8;
  --accent:#3F7A4A; --accent-d:#2F5E38; --placeholder:#2E2A28;
  --ff-en:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --ff-jp:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --ff-head:"Zen Old Mincho",var(--ff-jp);
  --head-w:500; --sec-w:500;
}
html[data-mode="food"] .sec-title,
html[data-mode="food"] .lead-title{ letter-spacing:.12em; }
/* フェア販促の4色を、ロゴ下の線とコピーライトの線にだけ使う */
html[data-mode="food"] .brand__role{
  border-bottom-color:transparent;
  border-image:linear-gradient(90deg,#7FC8E8 0 25%,#F08C8C 25% 50%,#F5D33F 50% 75%,#8FD4B9 75% 100%) 1;
}
html[data-mode="food"] .copyright{
  border-left-color:transparent;
  border-image:linear-gradient(180deg,#7FC8E8 0 25%,#F08C8C 25% 50%,#F5D33F 50% 75%,#8FD4B9 75% 100%) 1;
}

/* ---------- IT・Web・ゲーム : 書体はオリジナルと同じ Inter ---------- */
html[data-mode="it"]{
  --bg:#F5F7FA; --ink:#101828; --ink-2:#3A4456; --ink-3:#667085;
  --line:#DCE3EE; --line-2:#E9EEF5; --surface-2:#E9EEF6;
  --accent:#1E5EFF; --accent-d:#0B3BB8; --placeholder:#101828;
}
html[data-mode="it"] .hero__title{ letter-spacing:-.01em; }

/* ---------- ナイトレジャー ---------- */
html[data-mode="night"]{
  --bg:#0A0A0C; --ink:#F3EBDD; --ink-2:#CFC6B6; --ink-3:#958D7E;
  --line:#2A2A30; --line-2:#1C1C21; --surface-2:#16161A;
  --accent:#D4AF37; --accent-d:#E6C659; --placeholder:#1C1C21;
  --on-accent:#0A0A0C;
  --ff-en:"Cinzel","Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --ff-jp:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --ff-head:"Cinzel","Shippori Mincho",var(--ff-jp);
  --head-w:600; --sec-w:600;
  color-scheme:dark;
}
html[data-mode="night"] .hero__title{
  font-family:"Shippori Mincho",var(--ff-jp);
  background:linear-gradient(180deg,#F6E7B0 0%,#D4AF37 48%,#9C7A1E 56%,#F1D97A 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html[data-mode="night"] .sec-title,
html[data-mode="night"] .lead-title{ letter-spacing:.14em; }

/* ---------- 広告・メディア・エンタメ ---------- */
html[data-mode="ent"]{
  --bg:#0C0A14; --ink:#F1EDFF; --ink-2:#C9C2E4; --ink-3:#948CB4;
  --line:#2B2547; --line-2:#1C1830; --surface-2:#17132A;
  --accent:#FFAE1A; --accent-d:#FFC65A; --placeholder:#1C1830;   /* アクセント : 赤みのある黄色(山吹〜アンバー)*/
  --on-accent:#0C0A14;
  --ff-en:"Big Shoulders Display","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --ff-head:"Big Shoulders Display",var(--ff-jp);
  --head-w:800; --sec-w:800;
  color-scheme:dark;
}
html[data-mode="ent"] .sec-title,
html[data-mode="ent"] .lead-title{ letter-spacing:.02em; font-size:clamp(28px,3.4vw,40px); }

/* 字面が小さい欧文書体(Cormorant / Big Shoulders)は、小さなラベルだけ少し大きく */
html[data-mode="app"] .sw-dim,
html[data-mode="ent"] .sw-dim{ font-size:13px; }
html[data-mode="app"] .sw-info .k,
html[data-mode="ent"] .sw-info .k{ font-size:11.5px; }

/* ---------- サイドバー(ロゴ文字・ナビ・縦タグライン・コピーライト) ----------
   見出しと同じ書体に揃える。IT はオリジナルと同じ Inter のまま。
   ※ 管理画面でロゴ「画像」を設定している場合、ロゴは画像のままで書体は変わらない */
html[data-mode] .brand__name,
html[data-mode] .brand__role,
html[data-mode] .gnav__item,
html[data-mode] .tagline,
html[data-mode] .copyright{ font-family:var(--ff-side, var(--ff-head)); }

/* アパレル : Cormorant(欧文セリフ)。字面が小さいので少し大きく */
html[data-mode="app"]{ --ff-side:"Cormorant Garamond",var(--ff-jp); }
html[data-mode="app"] .site-sidebar .brand__name{ font-weight:600; font-size:34px; letter-spacing:.06em; }
html[data-mode="app"] .site-sidebar .brand__role{ font-weight:600; font-size:13px; letter-spacing:.04em; }
html[data-mode="app"] .gnav__item{ font-weight:600; font-size:17.5px; letter-spacing:.1em; }
html[data-mode="app"] .tagline{ font-size:12px; font-style:italic; }

/* メーカー : Noto Sans JP の太さ違いだけ */
html[data-mode="corp"] .site-sidebar .brand__name{ font-weight:900; letter-spacing:.02em; }
html[data-mode="corp"] .gnav__item{ font-weight:700; letter-spacing:.08em; }

/* 小売・飲食 : Zen Old Mincho */
html[data-mode="food"]{ --ff-side:"Zen Old Mincho",var(--ff-jp); }
html[data-mode="food"] .site-sidebar .brand__name{ font-weight:700; letter-spacing:.06em; }
html[data-mode="food"] .site-sidebar .brand__role{ font-weight:500; }
html[data-mode="food"] .gnav__item{ font-weight:500; letter-spacing:.1em; }

/* ナイト : Cinzel(碑文調の大文字)。横に広いので字間は詰め気味に */
html[data-mode="night"]{ --ff-side:"Cinzel",var(--ff-jp); }
html[data-mode="night"] .site-sidebar .brand__name{ font-weight:700; font-size:29px; letter-spacing:.04em; }
html[data-mode="night"] .site-sidebar .brand__role{ font-weight:600; font-size:11px; }
html[data-mode="night"] .gnav__item{ font-weight:600; font-size:15px; letter-spacing:.12em; }

/* エンタメ : Big Shoulders(縦長コンデンス)。細身なので大きめに */
html[data-mode="ent"]{ --ff-side:var(--ff-jp); }   /* サイドバーも見出しと同じ極太ゴシック */
html[data-mode="ent"] .site-sidebar .brand__name{ font-weight:900; font-size:36px; letter-spacing:.02em; }
html[data-mode="ent"] .site-sidebar .brand__role{ font-weight:700; font-size:13px; letter-spacing:.06em; }
html[data-mode="ent"] .gnav__item{ font-weight:900; font-size:15px; letter-spacing:.08em; }
html[data-mode="ent"] .tagline{ font-size:13px; }

/* ---------- 色の組み合わせの補正 ----------
   style.css には「ink地に白文字」「accent地に白文字」があり、
   暗い地のモードや明るいアクセントで読めなくなるのでトークンに置き換える。 */
html[data-mode] .btn:hover,
html[data-mode] .btn--fill:hover,
html[data-mode] .filter.is-active{ color:var(--bg); }
html[data-mode] .filter{ background:var(--bg); }
html[data-mode] .filter.is-active{ background:var(--ink); border-color:var(--ink); }   /* 選択中は塗り(上の行で消えないように) */
html[data-mode] .work-card__badge,
html[data-mode] .sw-badge,
html[data-mode] .abt-dl:hover,
html[data-mode] .btn--fill,
html[data-mode] .work-process .wp-block-table th{ color:var(--on-accent); }
/* 実績の RESULT 枠 : 黒地 → 各モードの淡い面に(アクセント文字が読めるように) */
html[data-mode] .sw-result{ background:var(--surface-2); color:var(--ink); border:1px solid var(--line); }
html[data-mode] .sw-result__item small{ color:var(--ink-3); }
/* 暗い地ではカードの浮き影が見えないので枠線で代用 */
html[data-mode="night"] .work-mini:hover,
html[data-mode="night"] .blog-card:hover,
html[data-mode="night"] .work-card:hover,
html[data-mode="ent"] .work-mini:hover,
html[data-mode="ent"] .blog-card:hover,
html[data-mode="ent"] .work-card:hover{ box-shadow:0 0 0 1px var(--accent); }

/* =============================================================
   カード・ボタンの形 : レイアウト(寸法・並び)は共通のまま、
   角丸 / 枠線 / 影 / ホバーの動きだけをモードごとに変える。
   --r-card : カード類の角丸   --r-thumb : カード内画像の角丸
   --r-btn  : ボタン・フィルタの角丸   --r-badge : バッジの角丸
   ============================================================= */
html[data-mode] .work-card, html[data-mode] .blog-card, html[data-mode] .work-mini,
html[data-mode] .pd-card, html[data-mode] .abt-stat, html[data-mode] .abt-value,
html[data-mode] .pd-feat, html[data-mode] .pd-spec, html[data-mode] .pd-price,
html[data-mode] .sw-info, html[data-mode] .sw-result, html[data-mode] .sw-hero,
html[data-mode] .pd-faq .q{ border-radius:var(--r-card,12px); }
html[data-mode] .work-card .thumb, html[data-mode] .work-card .placeholder,
html[data-mode] .blog-card .thumb, html[data-mode] .blog-card .placeholder,
html[data-mode] .work-mini .thumb, html[data-mode] .work-mini .placeholder,
html[data-mode] .work-mini__thumb{ border-radius:var(--r-thumb,8px); }
html[data-mode] .btn, html[data-mode] .filter, html[data-mode] .tag{ border-radius:var(--r-btn,0); }
html[data-mode] .work-card__badge, html[data-mode] .sw-badge{ border-radius:var(--r-badge,4px); }

/* アパレル : アーチ窓のカード(コスメ・ライフスタイルブランドで定番の、やわらかく上品な形)
   ・画像の上側をアーチ型に切り抜く / 枠線は無し
   ・文字は中央揃え、分野はイタリックの小さな欧文
   ・ホバー : 画像がゆっくり寄る + アーチに沿った細い線がふわっと現れる + タイトル下に線が中央から伸びる */
html[data-mode="app"]{ --r-card:0; --r-thumb:0; --r-btn:999px; --r-badge:999px; --arch:50% 50% 0 0 / 38% 38% 0 0; }
html[data-mode="app"] .work-card, html[data-mode="app"] .blog-card, html[data-mode="app"] .work-mini{
  border-color:transparent; box-shadow:none; transform:none;
  background:transparent;          /* 塗りは無し。アーチ窓だけを見せる */
  padding:14px 10px 12px;
  text-align:center;
}
/* アーチ窓 */
html[data-mode="app"] .work-mini .placeholder, html[data-mode="app"] .work-mini .thumb,
html[data-mode="app"] .work-card .placeholder, html[data-mode="app"] .work-card .thumb,
html[data-mode="app"] .blog-card .placeholder, html[data-mode="app"] .blog-card .thumb{
  border-radius:var(--arch);
  outline:1px solid transparent; outline-offset:9px;    /* ホバーで現れる細いアーチ線 */
  transition:outline-color .5s ease, outline-offset .6s cubic-bezier(.22,.61,.36,1);
}
html[data-mode="app"] .placeholder::before,
html[data-mode="app"] .placeholder span,
html[data-mode="app"] .thumb img{ transition:transform 1.2s cubic-bezier(.22,.61,.36,1); }
/* ホバー */
html[data-mode="app"] .work-card:hover, html[data-mode="app"] .blog-card:hover, html[data-mode="app"] .work-mini:hover{
  border-color:transparent; box-shadow:none; transform:none;
}
html[data-mode="app"] .work-mini:hover .placeholder, html[data-mode="app"] .work-mini:hover .thumb,
html[data-mode="app"] .work-card:hover .placeholder, html[data-mode="app"] .work-card:hover .thumb,
html[data-mode="app"] .blog-card:hover .placeholder, html[data-mode="app"] .blog-card:hover .thumb{
  outline-color:var(--accent); outline-offset:5px;
}
html[data-mode="app"] a:hover .placeholder::before,
html[data-mode="app"] a:hover .placeholder span,
html[data-mode="app"] a:hover .thumb img{ transform:scale(1.05); }

/* 文字 */
html[data-mode="app"] .work-mini__title, html[data-mode="app"] .work-card__title, html[data-mode="app"] .blog-card__title{
  font-weight:600; letter-spacing:.06em; margin-top:16px;
}
html[data-mode="app"] .work-card__title{ margin-top:4px; }
html[data-mode="app"] .work-mini__cat, html[data-mode="app"] .work-card__cat, html[data-mode="app"] .blog-card__chapter{
  font-family:"Cormorant Garamond",var(--ff-jp); font-style:italic; font-weight:500;
  font-size:14px; letter-spacing:.06em; color:var(--ink-3);
}
html[data-mode="app"] .work-card__cat{ margin-top:18px; }
/* タイトル下の線 : 中央から左右に伸びる */
html[data-mode="app"] .work-mini__title, html[data-mode="app"] .work-card__title, html[data-mode="app"] .blog-card__title{
  display:inline-block; align-self:center; max-width:100%; padding-bottom:3px;
  background:linear-gradient(currentColor,currentColor) no-repeat 50% 100% / 0 1px;
  transition:background-size .5s cubic-bezier(.22,.61,.36,1), color .3s ease;
}
html[data-mode="app"] .work-mini:hover .work-mini__title,
html[data-mode="app"] .work-card:hover .work-card__title,
html[data-mode="app"] .blog-card:hover .blog-card__title{ color:var(--ink); background-size:100% 1px; }

/* 「在学中制作」などのバッジ : アーチの下端に重ねる小さなピル */
html[data-mode="app"] .work-card__badge{
  top:auto; bottom:-11px; left:50%; transform:translateX(-50%);
  background:var(--bg); color:var(--accent); border:1px solid var(--accent);
  font-family:var(--ff-jp); font-weight:500; letter-spacing:.08em; white-space:nowrap;
  padding:2px 12px;
}
html[data-mode="app"] .btn{ letter-spacing:.14em; font-weight:500; }
/* TOP の WORKS / BLOG : 掲載数を減らしてカードを大きく(広い画面4件 / 1200px以下3件)。
   タイトルは1行にまとめる(入り切らない分は「…」。カード用の改行マーカー | も無視) */
html[data-mode="app"] .works-strip,
html[data-mode="app"] .blog-strip{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
html[data-mode="app"] .works-strip > :nth-child(n+5),
html[data-mode="app"] .blog-strip > :nth-child(n+5){ display:none; }
@media (max-width:1200px){
  html[data-mode="app"] .works-strip,
  html[data-mode="app"] .blog-strip{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  html[data-mode="app"] .works-strip > :nth-child(n+4),
  html[data-mode="app"] .blog-strip > :nth-child(n+4){ display:none; }
}
@media (max-width:600px){
  html[data-mode="app"] .works-strip,
  html[data-mode="app"] .blog-strip{ grid-template-columns:1fr; }
}
html[data-mode="app"] .works-strip .work-mini__title,
html[data-mode="app"] .blog-strip .blog-card__title{
  font-size:14.5px; letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html[data-mode="app"] .works-strip .work-mini__title br,
html[data-mode="app"] .blog-strip .blog-card__title br{ display:none; }

/* メーカー : 角はすべて直角・影なし。動かさず枠の色だけで反応 */
html[data-mode="corp"]{ --r-card:0; --r-thumb:0; --r-btn:0; --r-badge:0; }   /* 角はすべて直角 */
html[data-mode="corp"] .hero__visual .placeholder, html[data-mode="corp"] .hero__visual .thumb,
html[data-mode="corp"] .sw-hero img, html[data-mode="corp"] .sw-hero .placeholder,
html[data-mode="corp"] .work-process img, html[data-mode="corp"] .work-process .wp-block-table,
html[data-mode="corp"] .zoom-frame, html[data-mode="corp"] .skill-grid .placeholder, html[data-mode="corp"] .skill-grid .thumb,
html[data-mode="corp"] .pd-hero__shot .placeholder, html[data-mode="corp"] .pd-hero__shot .thumb, html[data-mode="corp"] .pd-video,
html[data-mode="corp"] .pd-feat__ic, html[data-mode="corp"] .pd-price .links a,
html[data-mode="corp"] .abt-bar, html[data-mode="corp"] .abt-bar__fill, html[data-mode="corp"] .pill{ border-radius:0; }
html[data-mode="corp"] .work-card, html[data-mode="corp"] .blog-card, html[data-mode="corp"] .work-mini{
  border-width:1px; padding:11px;
}
html[data-mode="corp"] .work-card:hover, html[data-mode="corp"] .blog-card:hover, html[data-mode="corp"] .work-mini:hover{
  transform:none; box-shadow:inset 0 0 0 1px var(--accent);
}
/* ===== ボタン(メーカー) =====
   淡い面 + 左端にアクセント色の太い縦線。ホバーで縦線が右へ広がって面全体を塗り、文字が白になる。
   斜めの線はすべて 45°(= 横にずれる量をボタンの高さ --h と同じにする)。 */
html[data-mode="corp"] .btn, html[data-mode="corp"] .filter, html[data-mode="corp"] .tag{
  border:0;
  background:linear-gradient(var(--accent), var(--accent)) no-repeat left center / 4px 100%, var(--surface-2);
  color:var(--ink);
  display:inline-flex; align-items:center;
  height:var(--h); padding-top:0; padding-bottom:0;
  transition:background-size .35s cubic-bezier(.22,.61,.36,1), color .25s ease;
}
/* 単独のボタン : 右端が 45° に切れて右下が尖り、その先に細くなる斜線3本
   (斜線の幅 9 → 6 → 3px、間隔 6 → 4 → 2px。1つの多角形で本体と斜線を切り抜き、斜線どうしは上辺でつなぐ) */
html[data-mode="corp"] .btn{
  --h:54px;
  clip-path:polygon(0 0, calc(100% - 30px - var(--h)) 0, calc(100% - 24px - var(--h)) 0, calc(100% - 15px - var(--h)) 0, calc(100% - 15px) 100%, calc(100% - 24px) 100%, calc(100% - 24px - var(--h)) 0, calc(100% - 11px - var(--h)) 0, calc(100% - 5px - var(--h)) 0, calc(100% - 5px) 100%, calc(100% - 11px) 100%, calc(100% - 11px - var(--h)) 0, calc(100% - 3px - var(--h)) 0, calc(100% - var(--h)) 0, 100% 100%, calc(100% - 3px) 100%, calc(100% - 3px - var(--h)) 0, calc(100% - 30px - var(--h)) 0, calc(100% - 30px) 100%, 0 100%);
  justify-content:flex-start; padding-left:26px; padding-right:calc(var(--h) + 44px);
}
html[data-mode="corp"] .btn .arw{ margin-left:auto; }   /* 矢印は右端へ */
html[data-mode="corp"] .btn:hover{ background-size:100% 100%, auto; color:#fff; }
/* 塗りのボタン : 面がアクセント色、縦線は濃い色 */
html[data-mode="corp"] .btn--fill{
  background:linear-gradient(var(--accent-d), var(--accent-d)) no-repeat left center / 4px 100%, var(--accent);
  color:#fff;
}
html[data-mode="corp"] .btn--fill:hover{ background-size:100% 100%, auto; color:#fff; }

/* ボタンの並び(ジャンルの絞り込み・タグ) : 45° の平行四辺形を並べる。
   左端のボタンは左辺だけ直角、右端のボタンは右辺だけ直角(並び全体で1つの帯に見える) */
html[data-mode="corp"] .filters{ gap:8px 0; }
/* 隣どうしを斜めの辺ぶん重ねて、すき間を斜めに一定(約 6px)にする */
html[data-mode="corp"] .filter + .filter{ margin-left:calc(6px - var(--h)); }
html[data-mode="corp"] .tag + .tag{ margin-left:calc(2px - var(--h)); }
html[data-mode="corp"] .filter{ --h:34px; }
html[data-mode="corp"] .tag{ --h:28px; font-size:12px; }
/* 背景は3層 : ①ホバーで広がる塗り ②左辺の色(選択中だけ) ③淡い面 */
html[data-mode="corp"] .filter, html[data-mode="corp"] .tag{
  --edge:linear-gradient(transparent, transparent);          /* ふだんは左辺に色なし */
  background:
    linear-gradient(var(--accent), var(--accent)) no-repeat left center / 0 100%,
    var(--edge) no-repeat left top / var(--h) var(--h),
    var(--surface-2);
  padding-left:calc(var(--h) * .5 + 14px); padding-right:calc(var(--h) * .5 + 14px);
  clip-path:polygon(0 0, calc(100% - var(--h)) 0, 100% 100%, var(--h) 100%);   /* 両側が斜め(平行四辺形) */
}
html[data-mode="corp"] .filter:first-child, html[data-mode="corp"] .tag:first-child{
  padding-left:16px;
  clip-path:polygon(0 0, calc(100% - var(--h)) 0, 100% 100%, 0 100%);           /* 左辺だけ直角 */
}
html[data-mode="corp"] .filter:last-child, html[data-mode="corp"] .tag:last-child{
  padding-right:18px;
  clip-path:polygon(0 0, 100% 0, 100% 100%, var(--h) 100%);                      /* 右辺だけ直角 */
}
html[data-mode="corp"] .filter:only-child, html[data-mode="corp"] .tag:only-child{ clip-path:none; }

/* 選択中(アクティブ) : 左辺にアクセント色の線。斜めの辺なら 45° の斜めの線、直角の辺なら縦線 */
html[data-mode="corp"] .filters .filter.is-active,
html[data-mode="corp"] .tag.is-active, html[data-mode="corp"] .tag[aria-current]{
  --edge:linear-gradient(45deg, transparent 50%, var(--accent) 50%, var(--accent) calc(50% + 3px), transparent calc(50% + 3px));
  background:
    linear-gradient(var(--accent), var(--accent)) no-repeat left center / 0 100%,
    var(--edge) no-repeat left top / var(--h) var(--h),
    var(--surface-2);                                        /* 全体共通の「選択中=濃い塗り」を打ち消す */
  border:0; color:var(--ink);
}
html[data-mode="corp"] .filters .filter.is-active:first-child,
html[data-mode="corp"] .tag.is-active:first-child, html[data-mode="corp"] .tag[aria-current]:first-child{
  --edge:linear-gradient(90deg, var(--accent) 0 4px, transparent 4px);
}
/* ホバー : 左から塗りが広がって文字が白に */
html[data-mode="corp"] .filter:hover, html[data-mode="corp"] .tag:hover,
html[data-mode="corp"] .filters .filter.is-active:hover{
  background-size:100% 100%, var(--h) var(--h), auto;
  color:#fff;
}
/* カードそのものを正方形(1:1)に。画像は残りの高さいっぱいに表示(はみ出る分はトリミング)、
   文字は下にまとめて各1行(入り切らない分は「…」) */
html[data-mode="corp"] .work-mini, html[data-mode="corp"] .blog-card, html[data-mode="corp"] .work-card{
  aspect-ratio:1 / 1; height:auto; display:flex; flex-direction:column; overflow:hidden;
}
html[data-mode="corp"] .work-mini > .placeholder, html[data-mode="corp"] .work-mini > .thumb,
html[data-mode="corp"] .blog-card > .placeholder, html[data-mode="corp"] .blog-card > .thumb,
html[data-mode="corp"] .work-card__thumb{ flex:1 1 0; min-height:0; aspect-ratio:auto; }
html[data-mode="corp"] .work-card__thumb > .placeholder,
html[data-mode="corp"] .work-card__thumb > .thumb{ height:100%; aspect-ratio:auto; }
html[data-mode="corp"] .work-mini__title, html[data-mode="corp"] .blog-card__title,
html[data-mode="corp"] .work-card__title, html[data-mode="corp"] .work-card__desc,
html[data-mode="corp"] .blog-card__chapter{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:none; }
html[data-mode="corp"] .work-mini__title br, html[data-mode="corp"] .blog-card__title br,
html[data-mode="corp"] .work-card__title br{ display:none; }
html[data-mode="corp"] .work-mini__cat{ margin-top:0; padding-top:2px; }
html[data-mode="corp"] .blog-card__chapter{ margin-top:10px; }
html[data-mode="corp"] .blog-card__title{ margin:2px 0 8px; }   /* 文字まわりを詰めて画像を広く */
html[data-mode="corp"] .work-mini__title, html[data-mode="corp"] .work-card__cat{ margin-top:10px; }
/* TOP の WORKS / BLOG は件数を減らして大きく(広い画面4件 / 1200px以下3件 / スマホ1列) */
html[data-mode="corp"] .works-strip,
html[data-mode="corp"] .blog-strip{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
html[data-mode="corp"] .works-strip > :nth-child(n+5),
html[data-mode="corp"] .blog-strip > :nth-child(n+5){ display:none; }
@media (max-width:1200px){
  html[data-mode="corp"] .works-strip,
  html[data-mode="corp"] .blog-strip{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  html[data-mode="corp"] .works-strip > :nth-child(n+4),
  html[data-mode="corp"] .blog-strip > :nth-child(n+4){ display:none; }
}
@media (max-width:600px){
  html[data-mode="corp"] .works-strip,
  html[data-mode="corp"] .blog-strip{ grid-template-columns:1fr; }
}

/* 小売・飲食 : 角丸大きめ・ボタンは丸。やわらかく少し浮く */
html[data-mode="food"]{ --r-card:18px; --r-thumb:12px; --r-btn:999px; --r-badge:999px; }
html[data-mode="food"] .work-card:hover, html[data-mode="food"] .blog-card:hover, html[data-mode="food"] .work-mini:hover{
  transform:translateY(-4px); box-shadow:0 14px 30px rgba(63,122,74,.13);
}
html[data-mode="food"] .btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* IT : 角丸中くらい + ぼかした影。ホバーで少し沈み、影に青がにじむ */
html[data-mode="it"]{ --r-card:16px; --r-thumb:10px; --r-btn:999px; --r-badge:999px; }
/* IT のカード・ボタンの見た目は、ファイル末尾の「グラスモーフィズム」で指定 */

/* ナイト : ボタン・カードの形は、ファイル末尾の「金の額縁のボタン・メダル型のカード」で指定 */
html[data-mode="night"] .work-card, html[data-mode="night"] .blog-card, html[data-mode="night"] .work-mini{
  border-width:1px; padding:11px;
}
html[data-mode="night"] .work-card:hover, html[data-mode="night"] .blog-card:hover, html[data-mode="night"] .work-mini:hover{
  transform:none; border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(212,175,55,.35), 0 0 28px rgba(212,175,55,.16);
}

/* エンタメ : ボタン・カードの形は、ファイル末尾の「クレヨンのスクラッチアート」で指定 */
html[data-mode="ent"]{ --r-card:0; --r-thumb:0; --r-btn:0; --r-badge:0; }

/* =============================================================
   動的背景 (assets/js/mode-bg.js) : 全ページの背面に固定。濃さは --mbg-opacity
   ============================================================= */
.mode-bgfx{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:-1; pointer-events:none;
  opacity:var(--mbg-opacity,.6);
}
/* 背景は最初の1枚が描けたら(.is-on)ゆっくり浮かび上がる。
   同じモードでページを移動したとき(ローディング画面なし)に、模様が急にパッと出ないように。
   opacity は各モードの濃さに使っているので、フェードは filter:opacity で掛け合わせる */
.mode-bgfx, .bgfx-canvas{ filter:opacity(0); transition:filter 1.4s ease; }
.mode-bgfx.is-on, .bgfx-canvas.is-on{ filter:none; }
@media (prefers-reduced-motion:reduce){ .mode-bgfx, .bgfx-canvas{ transition-duration:.4s; } }
html[data-mode="app"]{ --mbg-opacity:1; }
html[data-mode="corp"]{ --mbg-opacity:0.5; }
html[data-mode="food"]{ --mbg-opacity:0.85; }
html[data-mode="it"]{ --mbg-opacity:0.4; }
html[data-mode="night"]{ --mbg-opacity:0.3; --night-edge:0.75; }
/* ナイト : 背景は本文のある中央を暗く(--mbg-opacity)、左右の両端だけ明るく(--night-edge)。
   キャンバスの濃さを両端の明るさにしておき、中央だけマスクで薄くする(サイドバーの幅ぶんは除いて計算)*/
html[data-mode="night"] .mode-bgfx{
  --c:calc(var(--mbg-opacity) / var(--night-edge));
  opacity:var(--night-edge);
  -webkit-mask-image:linear-gradient(90deg, #000 var(--sidebar-w, 0px), rgba(0,0,0,var(--c)) calc(var(--sidebar-w, 0px) + (100% - var(--sidebar-w, 0px)) * .22), rgba(0,0,0,var(--c)) calc(100% - (100% - var(--sidebar-w, 0px)) * .22), #000 100%);
          mask-image:linear-gradient(90deg, #000 var(--sidebar-w, 0px), rgba(0,0,0,var(--c)) calc(var(--sidebar-w, 0px) + (100% - var(--sidebar-w, 0px)) * .22), rgba(0,0,0,var(--c)) calc(100% - (100% - var(--sidebar-w, 0px)) * .22), #000 100%);
}
html[data-mode="ent"]{ --mbg-opacity:0.35; }

/* =============================================================
   切替ボタン : サイドバー右下の隅。アイコンのみ・控えめ
   固定(?mode=)中は PHP 側で出力しない
   ============================================================= */
.mode-switch{
  position:absolute;
  right:20px;
  bottom:44px;
  width:28px; height:28px;
  display:grid; place-items:center;
  padding:0;
  border:0; border-radius:50%;
  background:transparent;
  color:var(--ink-3);
  font-size:15px; line-height:1;
  opacity:.55;
  transition:opacity .2s ease, color .2s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
.mode-switch:hover{ opacity:1; color:var(--accent); transform:rotate(180deg); }
.mode-switch:focus-visible{ opacity:1; outline:2px solid var(--accent); outline-offset:2px; }

/* =============================================================
   モーダル : どのモードでも同じ中立な見た目(自分用の道具なので)
   ============================================================= */
body.mode-modal-open{ overflow:hidden; }
.mode-modal{
  position:fixed; inset:0; z-index:10000;
  display:grid; place-items:center;
  padding:20px;
  background:rgba(14,14,18,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .2s ease;
  color-scheme:light;
}
.mode-modal[hidden]{ display:none; }
.mode-modal.is-open{ opacity:1; }
.mode-modal__panel{
  position:relative;
  width:100%; max-width:720px;
  max-height:calc(100vh - 40px); overflow-y:auto;
  padding:28px;
  border-radius:16px;
  background:#FCFCFB; color:#16181D;
  font-family:"Noto Sans JP",sans-serif;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  transform:translateY(8px); transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
.mode-modal.is-open .mode-modal__panel{ transform:none; }
.mode-modal__close{
  position:absolute; top:16px; right:16px;
  width:34px; height:34px; display:grid; place-items:center;
  border:0; border-radius:50%; background:transparent; color:#5B6473; font-size:16px;
}
.mode-modal__close:hover{ background:#EEF0F3; color:#16181D; }
.mode-modal__title{ font-size:21px; font-weight:700; margin:0 0 4px; }
.mode-modal__desc{ font-size:13px; color:#5B6473; margin:0 0 18px; }
.mode-modal__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }

.mode-pick{
  position:relative;
  display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; align-items:center;
  padding:12px 14px;
  border:1px solid #E1E5EC; border-radius:12px;
  background:#fff; color:inherit; text-align:left; font:inherit;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mode-pick:hover{ border-color:var(--mc); transform:translateY(-2px); box-shadow:0 6px 16px rgba(20,24,32,.07); }
.mode-pick:focus-visible{ outline:2px solid var(--mc); outline-offset:2px; }
.mode-pick[aria-pressed="true"]{ border-color:var(--mc); box-shadow:inset 0 0 0 1px var(--mc); }
.mode-pick--wide{ grid-column:1 / -1; }
.mode-pick__ico{
  width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center;
  font-size:18px; color:var(--mc);
  background:color-mix(in srgb, var(--mc) 11%, #fff);
  border:1px solid color-mix(in srgb, var(--mc) 24%, #fff);
}
.mode-pick__txt{ min-width:0; }
.mode-pick__txt b{ display:block; font-size:14px; font-weight:700; line-height:1.4; }
.mode-pick__txt small{ display:block; font-size:11.5px; color:#5B6473; line-height:1.5; margin-top:2px; }
.mode-pick__now{
  position:absolute; top:8px; right:10px;
  font-size:10px; font-weight:700; letter-spacing:.06em;
  color:var(--mc);
}

@media (max-width:600px){
  .mode-modal__panel{ padding:22px 18px; }
  .mode-modal__grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .mode-switch, .mode-modal, .mode-modal__panel, .mode-pick{ transition:none; }
  .mode-switch:hover{ transform:none; }
}

/* ============================================================
   小売・飲食 : ヒーロー = 写真を暗く全面に敷き、手前に縦書きのコピー
   ・写真はカスタマイザー「小売・飲食モードのHERO背景写真」(未設定なら木陰の深緑グラデーション)
   ・木漏れ日 : 葉の影(komorebi-leaves.svg)がゆっくり揺れ、光の粒がふっと明滅
   ・下端は和紙をちぎったような不揃いの縁
   ============================================================ */
.hero__bg{ display:none; }
html[data-mode="food"] .hero{
  position:relative; isolation:isolate; overflow:hidden;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"title" "." "body";   /* コピーは左上、リード・本文・ボタンは左下 */
  align-items:start; row-gap:32px;
  min-height:clamp(540px, 88vh, 900px);
  max-width:none;
  margin:0 calc(var(--pad-x) * -1);
  padding:clamp(64px,9vw,120px) clamp(28px,6vw,110px) clamp(72px,8vw,110px);
  color:rgb(var(--hero-ink-rgb));
  /* 下端 : 和紙をちぎった縁 */
  -webkit-mask:linear-gradient(#000,#000) top / 100% calc(100% - 38px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0L0.0 16.2L7.8 15.3L16.0 16.1L20.5 12.7L30.4 11.0L36.0 14.5L43.3 16.9L50.6 17.8L55.7 18.8L65.8 18.9L74.9 20.1L79.4 22.0L87.5 20.6L91.7 23.1L99.1 24.7L109.2 26.2L119.7 25.4L129.3 25.0L139.8 27.7L144.5 25.1L150.0 28.4L157.1 29.3L163.2 29.3L169.9 28.3L178.0 28.9L188.3 30.0L198.8 30.0L209.7 30.0L214.9 30.0L225.6 30.0L233.6 30.0L239.1 30.0L247.1 28.5L251.6 30.0L262.5 27.1L272.1 26.5L277.1 25.1L286.5 27.7L290.8 28.5L295.1 30.0L301.5 30.0L312.3 30.0L323.3 28.7L327.9 29.4L332.1 27.2L338.9 28.0L344.0 24.8L354.1 23.5L364.8 26.3L371.5 26.0L379.1 27.0L387.3 27.4L395.6 30.0L403.2 29.5L412.2 27.7L418.3 30.0L426.0 30.0L430.0 29.4L438.1 26.0L446.4 27.0L450.8 27.9L458.1 29.1L464.6 30.0L473.7 26.7L478.1 27.9L488.9 26.1L496.1 26.8L502.3 25.8L508.5 24.9L516.7 23.5L523.3 25.4L527.5 25.9L536.7 24.6L542.2 26.7L547.9 24.5L554.9 25.9L559.6 24.7L566.0 27.0L573.0 29.5L578.2 28.3L586.8 30.0L593.9 28.1L598.8 28.3L604.1 30.0L614.0 27.8L619.9 29.9L628.4 30.0L634.9 27.4L640.9 29.5L646.8 28.4L653.7 27.8L660.6 30.0L665.7 26.5L676.3 29.2L687.2 28.7L697.8 30.0L703.4 30.0L713.2 30.0L720.9 28.5L727.3 26.6L731.7 27.2L737.8 29.4L742.1 30.0L750.9 30.0L761.2 30.0L769.2 26.6L778.5 24.3L784.6 25.4L792.2 24.8L802.8 25.6L809.2 23.9L819.2 23.7L828.7 22.7L834.1 22.9L843.8 20.6L853.3 23.6L863.0 25.8L867.0 26.7L877.1 23.6L883.0 22.0L890.7 21.4L898.0 23.4L902.0 20.3L906.9 17.6L911.4 21.0L921.3 18.1L928.9 16.8L935.1 15.7L943.6 16.3L950.1 14.2L956.4 11.5L964.3 13.0L971.0 10.1L976.2 9.2L984.4 11.2L991.1 13.3L999.5 12.8L1006.1 12.8L1015.0 12.2L1023.8 12.0L1029.6 12.2L1038.4 9.2L1045.4 8.7L1055.6 11.8L1062.2 14.5L1071.7 12.9L1079.0 10.2L1088.7 11.4L1098.9 13.4L1107.5 15.1L1115.5 12.3L1123.6 8.8L1128.6 10.7L1132.9 7.9L1137.6 10.5L1142.9 7.2L1152.8 4.6L1162.7 5.8L1172.5 8.9L1180.6 11.0L1184.8 12.9L1192.4 14.4L1197.2 16.1L1200.0 16.2L1200 0Z' fill='%23000'/%3E%3C/svg%3E") bottom / 100% 40px no-repeat;
          mask:linear-gradient(#000,#000) top / 100% calc(100% - 38px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0L0.0 16.2L7.8 15.3L16.0 16.1L20.5 12.7L30.4 11.0L36.0 14.5L43.3 16.9L50.6 17.8L55.7 18.8L65.8 18.9L74.9 20.1L79.4 22.0L87.5 20.6L91.7 23.1L99.1 24.7L109.2 26.2L119.7 25.4L129.3 25.0L139.8 27.7L144.5 25.1L150.0 28.4L157.1 29.3L163.2 29.3L169.9 28.3L178.0 28.9L188.3 30.0L198.8 30.0L209.7 30.0L214.9 30.0L225.6 30.0L233.6 30.0L239.1 30.0L247.1 28.5L251.6 30.0L262.5 27.1L272.1 26.5L277.1 25.1L286.5 27.7L290.8 28.5L295.1 30.0L301.5 30.0L312.3 30.0L323.3 28.7L327.9 29.4L332.1 27.2L338.9 28.0L344.0 24.8L354.1 23.5L364.8 26.3L371.5 26.0L379.1 27.0L387.3 27.4L395.6 30.0L403.2 29.5L412.2 27.7L418.3 30.0L426.0 30.0L430.0 29.4L438.1 26.0L446.4 27.0L450.8 27.9L458.1 29.1L464.6 30.0L473.7 26.7L478.1 27.9L488.9 26.1L496.1 26.8L502.3 25.8L508.5 24.9L516.7 23.5L523.3 25.4L527.5 25.9L536.7 24.6L542.2 26.7L547.9 24.5L554.9 25.9L559.6 24.7L566.0 27.0L573.0 29.5L578.2 28.3L586.8 30.0L593.9 28.1L598.8 28.3L604.1 30.0L614.0 27.8L619.9 29.9L628.4 30.0L634.9 27.4L640.9 29.5L646.8 28.4L653.7 27.8L660.6 30.0L665.7 26.5L676.3 29.2L687.2 28.7L697.8 30.0L703.4 30.0L713.2 30.0L720.9 28.5L727.3 26.6L731.7 27.2L737.8 29.4L742.1 30.0L750.9 30.0L761.2 30.0L769.2 26.6L778.5 24.3L784.6 25.4L792.2 24.8L802.8 25.6L809.2 23.9L819.2 23.7L828.7 22.7L834.1 22.9L843.8 20.6L853.3 23.6L863.0 25.8L867.0 26.7L877.1 23.6L883.0 22.0L890.7 21.4L898.0 23.4L902.0 20.3L906.9 17.6L911.4 21.0L921.3 18.1L928.9 16.8L935.1 15.7L943.6 16.3L950.1 14.2L956.4 11.5L964.3 13.0L971.0 10.1L976.2 9.2L984.4 11.2L991.1 13.3L999.5 12.8L1006.1 12.8L1015.0 12.2L1023.8 12.0L1029.6 12.2L1038.4 9.2L1045.4 8.7L1055.6 11.8L1062.2 14.5L1071.7 12.9L1079.0 10.2L1088.7 11.4L1098.9 13.4L1107.5 15.1L1115.5 12.3L1123.6 8.8L1128.6 10.7L1132.9 7.9L1137.6 10.5L1142.9 7.2L1152.8 4.6L1162.7 5.8L1172.5 8.9L1180.6 11.0L1184.8 12.9L1192.4 14.4L1197.2 16.1L1200.0 16.2L1200 0Z' fill='%23000'/%3E%3C/svg%3E") bottom / 100% 40px no-repeat;
}
html[data-mode="food"] .hero__visual{ display:none; }
html[data-mode="food"] .hero__bg{
  display:block; position:absolute; inset:0; z-index:-1; overflow:hidden;
  background:#fff;   /* 写真がないときはシンプルな白 */
}
/* 写真なし : 白地に墨色の文字。木漏れ日・影・下端の沈めは出さない */
html[data-mode="food"] .hero:not(:has(.hero__bg img)){
  --hero-ink-rgb:34,30,26; --hero-text-shadow:0; --hero-btn-fill:0;
}
html[data-mode="food"] .hero:not(:has(.hero__bg img)) .hero__shade,
html[data-mode="food"] .hero:not(:has(.hero__bg img)) .hero__bg::after{ display:none; }
html[data-mode="food"] .hero:not(:has(.hero__bg img)) .btn{ -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
html[data-mode="food"] .hero:not(:has(.hero__bg img)) .btn:hover{ background:rgb(var(--hero-ink-rgb)); color:#fff; border-color:rgb(var(--hero-ink-rgb)); }
html[data-mode="food"] .hero__bg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(var(--hero-img-brightness)) saturate(.9) contrast(1.05);
  opacity:0; transition:opacity var(--hero-fade) ease;   /* スライドショー : クロスフェード */
  transform:scale(1.06);
  animation:food-hero-zoom 28s ease-in-out infinite alternate;
}
html[data-mode="food"] .hero__bg img.is-active,
html[data-mode="food"] .hero__bg img:only-of-type{ opacity:1; }
/* 文字が読めるように、左下と右側を少し沈める */
html[data-mode="food"] .hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(8,10,8,var(--hero-img-shade)) 0%, rgba(8,10,8,0) 45%);
}
/* 葉の影(木陰) */
html[data-mode="food"] .hero__shade{
  position:absolute; inset:-6%;
  background:url(../img/komorebi-leaves.svg) center / cover no-repeat;
  opacity:.5; filter:blur(5px); mix-blend-mode:multiply;
  transform-origin:90% 0;
  animation:food-leaf-sway 11s ease-in-out infinite alternate;
}
/* 木漏れ日の光の粒 */
html[data-mode="food"] .hero__shade::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(38px 26px at 62% 38%, rgba(255,236,190,.55), rgba(255,236,190,0) 70%),
    radial-gradient(26px 20px at 48% 58%, rgba(255,236,190,.45), rgba(255,236,190,0) 70%),
    radial-gradient(52px 34px at 72% 64%, rgba(255,236,190,.35), rgba(255,236,190,0) 70%),
    radial-gradient(22px 16px at 30% 30%, rgba(255,236,190,.4), rgba(255,236,190,0) 70%),
    radial-gradient(34px 24px at 84% 44%, rgba(255,236,190,.4), rgba(255,236,190,0) 70%);
  mix-blend-mode:screen; filter:blur(2px);
  animation:food-dapple 7s ease-in-out infinite alternate;
}
@keyframes food-hero-zoom{ from{ transform:scale(1.06); } to{ transform:scale(1.12) translate(-1%, -1%); } }
@keyframes food-leaf-sway{
  0%  { transform:rotate(0deg) translate(0,0); }
  50% { transform:rotate(.6deg) translate(-8px,4px); }
  100%{ transform:rotate(-.4deg) translate(6px,-3px); }
}
@keyframes food-dapple{
  0%  { opacity:.35; transform:translate(0,0); }
  40% { opacity:.9;  transform:translate(-6px,3px); }
  100%{ opacity:.55; transform:translate(5px,-2px); }
}
/* 読みやすさ : 範囲(エリア)ではなく、文字やボタンそれぞれにぼかした影を付ける
   --hero-text-shadow(文字の影の濃さ) / --hero-text-blur(影のぼかし幅)
   --hero-btn-blur(ボタンの後ろの写真をぼかす強さ) / --hero-btn-fill(ボタンの白の濃さ) で調整 */
html[data-mode="food"]{ --hero-fade:1.6s; --hero-img-brightness:.85; --hero-img-shade:.25; --hero-ink-rgb:255,255,255; --hero-ink-inv-rgb:20,20,20; --hero-text-shadow:.35; --hero-text-blur:14px; --hero-text-shadow-rgb:255,255,255; --hero-btn-blur:10px; --hero-btn-fill:.12; }
/* 文字ごとに白いぼかしの光(影)を付ける。色は --hero-text-shadow-rgb(R,G,B) */
html[data-mode="food"] .hero__title,
html[data-mode="food"] .hero__lead,
html[data-mode="food"] .hero__text,
html[data-mode="food"] .hero .btn:not(:hover){
  text-shadow:
    0 0 var(--hero-text-blur) rgba(var(--hero-text-shadow-rgb),var(--hero-text-shadow)),
    0 0 calc(var(--hero-text-blur) * .4) rgba(var(--hero-text-shadow-rgb),var(--hero-text-shadow)),
    0 1px 3px rgba(var(--hero-text-shadow-rgb),var(--hero-text-shadow)),
    0 0 1px rgba(var(--hero-text-shadow-rgb),var(--hero-text-shadow));   /* 文字の縁を締める細い影 */
}
html[data-mode="food"] .hero .btn{
  -webkit-backdrop-filter:blur(var(--hero-btn-blur)); backdrop-filter:blur(var(--hero-btn-blur));
  box-shadow:0 0 var(--hero-text-blur) rgba(var(--hero-text-shadow-rgb),calc(var(--hero-text-shadow) * .6));
}
/* 横組みのキャッチコピー(左上) */
html[data-mode="food"] .hero__title{
  grid-area:title; align-self:start; justify-self:start;
  writing-mode:horizontal-tb;
  font-family:"Zen Old Mincho",var(--ff-jp);
  font-size:clamp(32px, 4.4vw, 68px) !important;
  font-weight:500; line-height:1.45; letter-spacing:.12em;
  color:rgb(var(--hero-ink-rgb)); overflow:visible;
}
html[data-mode="food"] .hero__line{ display:block; white-space:nowrap; }
html[data-mode="food"] .hero__line + .hero__line{ padding-left:1em; }   /* 2行目を少し右へずらして段差をつける */
html[data-mode="food"] .hero__title .dot{ color:inherit; }
/* リード・本文・ボタン(左下) */
html[data-mode="food"] .hero__body{ grid-area:body; align-self:end; max-width:34em; }
html[data-mode="food"] .hero__lead{ color:rgb(var(--hero-ink-rgb)); letter-spacing:.14em; font-weight:500; }
html[data-mode="food"] .hero__text{ color:rgba(var(--hero-ink-rgb),.88); line-height:2; }
html[data-mode="food"] .hero .btn{ background:rgba(var(--hero-text-shadow-rgb),var(--hero-btn-fill)); color:rgb(var(--hero-ink-rgb)); border-color:rgba(var(--hero-ink-rgb),.75); }
/* 写真の明るさに合わせて文字色・光の色が切り替わるとき(スライドショー等)は、ゆっくり変える */
html[data-mode="food"] .hero__title, html[data-mode="food"] .hero__lead, html[data-mode="food"] .hero__text, html[data-mode="food"] .hero .btn{
  transition:color var(--hero-fade) ease, text-shadow var(--hero-fade) ease, background-color var(--hero-fade) ease, border-color var(--hero-fade) ease, box-shadow var(--hero-fade) ease;
}
html[data-mode="food"] .hero .btn:hover{ background:#fff; color:var(--ink); border-color:#fff; }
/* 上部に固定バーが出る幅(860px以下) : ヒーローを画面上端(バーの裏)までくっつけ、左右も画面の端まで広げる */
@media (max-width:860px){
  html[data-mode="food"] .hero{
    margin:calc((var(--mobile-bar-h) + 22px) * -1) -20px 0;
    padding-top:calc(var(--mobile-bar-h) + 56px);
  }
}
@media (max-width:600px){
  html[data-mode="food"] .hero{
    grid-template-columns:1fr;
    grid-template-areas:"title" "." "body"; grid-template-rows:auto 1fr auto;
    min-height:86svh; row-gap:32px;
    /* 画面上端(固定バーの裏)までくっつける */
    margin:calc((var(--mobile-bar-h) + 22px) * -1) -20px 0;
    padding:calc(var(--mobile-bar-h) + 40px) 20px 72px;
  }
  html[data-mode="food"] .hero__title{ justify-self:start; align-self:start; font-size:clamp(26px, 7.4vw, 36px) !important; }
  html[data-mode="food"] .hero__line{ white-space:normal; }
}
@media (prefers-reduced-motion:reduce){
  html[data-mode="food"] .hero__bg img,
  html[data-mode="food"] .hero__shade,
  html[data-mode="food"] .hero__shade::after{ animation:none; }
}


/* ============================================================
   業種モード共通 : ローディング画面(背景の準備ができるまで)
   ・画面はページと同じ背景色で覆うだけ。ロゴと線は 0.25 秒後から出す
     → 速い端末ではロゴが出る前に消える(チラつかない)/ 遅い端末ではロゴが出て「読み込み中」と分かる
   ・html に mbg-ready が付いたら(mode-bg.js)ふわっと消える
   ・JS が動かない等の万一に備え、8 秒たったら CSS だけでも自動で消える
   ・アニメーションは transform / opacity のみ(準備中に処理が重くても止まりにくい)
   ・色と書体は各モードの配色(--bg / --ink / --accent / --ff-en)を使う。ナイトだけ金の特別版
   ============================================================ */
.mode-loader{
  display:flex; position:fixed; inset:0; z-index:9999;
  align-items:center; justify-content:center;
  background:var(--bg);
  transition:opacity .6s ease, visibility .6s;
  animation:mode-loader-failsafe .6s ease 8s forwards;
}
html.mbg-ready .mode-loader{ opacity:0; visibility:hidden; pointer-events:none; }
/* 同じモードのままサイト内を移動したとき : ローディング画面は出さない */
html.mbg-skip .mode-loader{ display:none !important; }
.mode-loader__in{ display:flex; flex-direction:column; align-items:center; gap:18px; opacity:0; animation:mode-loader-in .5s ease .25s forwards; }
.mode-loader__logo{
  font-family:var(--ff-en, inherit); font-weight:700; font-size:clamp(20px, 2.6vw, 30px);
  letter-spacing:.42em; padding-left:.42em; color:var(--ink);
  animation:mode-loader-glow 2.4s ease-in-out infinite;
}
/* ナイト : 黒に金のグラデーション文字 */
html[data-mode="night"] .mode-loader{ background:radial-gradient(120% 90% at 50% 40%, #1A1208 0%, #0A0A0C 70%); }
@keyframes mode-loader-in{ to{ opacity:1; } }
@keyframes mode-loader-glow{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }
@keyframes mode-loader-failsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
@media (prefers-reduced-motion:reduce){
  .mode-loader__logo{ animation:none; }
}

/* ============================================================
   ナイト : 金の額縁のボタン・メダル型のカード
   ・金の縁 = 上から光を受けた金属の面取り(明→金→暗→金→明 のグラデーション)を太めの縁に
   ・中は黒のつやのある面。上側にうっすら光沢
   ・ボタン / フィルタ / タグ = 丸い端のピル型。選択中・塗りボタン = シャンパンゴールドの面
   ・作品カード = 丸いメダル。画像を丸く収め、下側にタイトル。ホバーで縁が光る
   ・BLOG カード = 文字が多いので円にはせず、角丸の金の額縁
   ============================================================ */
html[data-mode="night"]{
  --gold-bevel:linear-gradient(180deg,#FFF3C4 0%,#E2B94A 22%,#8A6212 48%,#D9AE45 70%,#FFE7A0 88%,#A87B1E 100%);
  --gold-face:linear-gradient(180deg,#FBE7A6 0%,#E9C45E 38%,#C99A2E 62%,#EBC869 100%);
  --night-face:radial-gradient(120% 70% at 50% 0%, rgba(255,226,150,.16), rgba(255,226,150,0) 60%), linear-gradient(180deg,#2A2218 0%,#0F0C09 58%,#1B150E 100%);
  --r-btn:999px; --r-badge:999px;
}
/* ---- ボタン ---- */
html[data-mode="night"] .btn{
  border:3px solid transparent; border-radius:999px;
  background:var(--night-face) padding-box, var(--gold-bevel) border-box;
  color:#F3D98B; letter-spacing:.14em;
  box-shadow:0 6px 18px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,236,180,.28), inset 0 -6px 14px rgba(0,0,0,.55);
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}
html[data-mode="night"] .btn:hover{
  background:var(--night-face) padding-box, var(--gold-bevel) border-box;
  color:#FFF0C2;
  box-shadow:0 6px 18px rgba(0,0,0,.55), 0 0 22px rgba(226,185,74,.35), inset 0 0 0 1px rgba(255,236,180,.45), inset 0 -6px 14px rgba(0,0,0,.45);
}
/* 塗りのボタン : シャンパンゴールドの面 */
html[data-mode="night"] .btn--fill,
html[data-mode="night"] .btn--fill:hover{
  background:var(--gold-face) padding-box, var(--gold-bevel) border-box;
  color:#2A1D06; text-shadow:0 1px 0 rgba(255,245,210,.5);
}
html[data-mode="night"] .btn--fill:hover{ filter:brightness(1.08); }
/* ---- フィルタ・タグ(小さなピル) ---- */
html[data-mode="night"] .filter,
html[data-mode="night"] .tag{
  border:2px solid transparent; border-radius:999px;
  background:var(--night-face) padding-box, var(--gold-bevel) border-box;
  color:#E9CF85;
  box-shadow:0 3px 10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,236,180,.22);
}
html[data-mode="night"] .filter:hover:not(.is-active),
html[data-mode="night"] .tag:hover{ color:#FFF0C2; box-shadow:0 3px 10px rgba(0,0,0,.5), 0 0 14px rgba(226,185,74,.3), inset 0 0 0 1px rgba(255,236,180,.35); }
html[data-mode="night"] .filter.is-active,
html[data-mode="night"] .tags .tag[aria-current="page"]{
  background:var(--gold-face) padding-box, var(--gold-bevel) border-box;
  color:#2A1D06; border-color:transparent;
}
/* ---- 作品カード : メダル型 ---- */
html[data-mode="night"] .work-card,
html[data-mode="night"] .works-strip .work-mini,
html[data-mode="night"] .work-mini{
  position:relative; display:block; aspect-ratio:1/1; height:auto;
  padding:0; border:5px solid transparent; border-radius:50%; overflow:hidden; isolation:isolate;
  background:linear-gradient(#0F0C09,#0F0C09) padding-box, var(--gold-bevel) border-box;
  box-shadow:0 12px 26px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.6);
  transition:box-shadow .3s ease, filter .3s ease;
}
/* 画像は丸い枠いっぱいに */
html[data-mode="night"] .work-card__thumb,
html[data-mode="night"] .work-card .placeholder, html[data-mode="night"] .work-card .thumb,
html[data-mode="night"] .work-mini .placeholder, html[data-mode="night"] .work-mini .thumb{
  position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; border-radius:50%; margin:0;
}
html[data-mode="night"] .work-card__thumb .placeholder, html[data-mode="night"] .work-card__thumb .thumb{ position:absolute; inset:0; }
/* 内側の縁の影 + 下側を暗くして文字を読みやすく(画像の上に重ねる) */
html[data-mode="night"] .work-card::after,
html[data-mode="night"] .work-mini::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:1;
  background:linear-gradient(to top, rgba(8,6,4,.92) 0%, rgba(8,6,4,.6) 30%, rgba(8,6,4,0) 56%);
  box-shadow:inset 0 0 0 1px rgba(255,236,180,.5), inset 0 8px 18px rgba(0,0,0,.6);
}
/* 文字(カテゴリ・タイトル)は円の下側に中央寄せ */
html[data-mode="night"] .work-card__cat, html[data-mode="night"] .work-card__title,
html[data-mode="night"] .work-mini__title, html[data-mode="night"] .work-mini__cat{
  position:relative; z-index:2; text-align:center; margin-left:auto; margin-right:auto; max-width:74%;
}
html[data-mode="night"] .work-card__cat{ margin-top:0; }
html[data-mode="night"] .work-card > p:first-of-type,
html[data-mode="night"] .work-mini > p:first-of-type{ margin-top:auto; }
html[data-mode="night"] .work-card, html[data-mode="night"] .work-mini,
html[data-mode="night"] .works-strip .work-mini{ display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:14%; }
html[data-mode="night"] .work-card__title{ color:#FFF0C2; font-size:15px; margin:2px auto 0; }
html[data-mode="night"] .work-card__cat{ color:#E2B94A; font-size:11px; letter-spacing:.12em; }
html[data-mode="night"] .work-card__desc, html[data-mode="night"] .work-card__meta{ display:none; }   /* メダルには入りきらないので省略 */
html[data-mode="night"] .work-mini__title{ color:#FFF0C2; font-size:12px; margin:0 auto; }
html[data-mode="night"] .work-mini__cat{ color:#E2B94A; font-size:10px; letter-spacing:.12em; padding-top:2px; margin-top:0; }
/* バッジは円の上側の中央に */
html[data-mode="night"] .work-card__badge{
  position:absolute; top:9%; left:50%; transform:translateX(-50%); z-index:2; white-space:nowrap;
  background:var(--gold-face); color:#2A1D06; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.5);
}
/* ホバー : 縁が光り、少し明るく */
html[data-mode="night"] .work-card:hover, html[data-mode="night"] .work-mini:hover{
  transform:none; border-color:transparent;
  box-shadow:0 12px 26px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.6), 0 0 26px rgba(226,185,74,.45);
  filter:brightness(1.06);
}
html[data-mode="night"] .work-card:hover .work-card__title,
html[data-mode="night"] .work-mini:hover .work-mini__title{ color:#FFF6DA; }
/* ---- BLOG カード : 角丸の金の額縁 ---- */
html[data-mode="night"] .blog-card{
  border:4px solid transparent; border-radius:18px; padding:12px;
  background:var(--night-face) padding-box, var(--gold-bevel) border-box;
  box-shadow:0 10px 22px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,236,180,.25);
}
html[data-mode="night"] .blog-card .placeholder, html[data-mode="night"] .blog-card .thumb{ border-radius:10px; }
html[data-mode="night"] .blog-card:hover{
  transform:none; border-color:transparent;
  box-shadow:0 10px 22px rgba(0,0,0,.55), 0 0 22px rgba(226,185,74,.35), inset 0 0 0 1px rgba(255,236,180,.4);
}


/* ============================================================
   IT : グラスモーフィズム(すりガラス)のボタン・カード
   ・半透明の面 + 後ろ(回路の背景)をぼかす + 細い白の縁
   ・縁の上側に短い光の筋(ガラスのふちに光が当たった表現)
   ・ボタン = 青〜紫のガラス(白文字)/ フィルタ・タグ・カード = 白っぽいガラス
   ・ホバー : 少し明るく、光の筋が強くなり、ふわっと浮く
   ・ぼかし非対応ブラウザでも読めるよう、面の不透明度は高めに
   ============================================================ */
html[data-mode="it"]{
  --glass-blue:linear-gradient(135deg, rgba(64,150,255,.82) 0%, rgba(92,120,255,.8) 55%, rgba(150,104,255,.78) 100%);
  --glass-light:linear-gradient(135deg, rgba(255,255,255,.72) 0%, rgba(236,242,255,.55) 60%, rgba(236,232,255,.5) 100%);
  --glass-edge:rgba(255,255,255,.75);
  --glass-shadow:0 8px 28px rgba(40,70,170,.14), 0 1px 2px rgba(40,70,170,.08);
}
html[data-mode="it"] .btn,
html[data-mode="it"] .filter,
html[data-mode="it"] .tag,
html[data-mode="it"] .work-card,
html[data-mode="it"] .blog-card,
html[data-mode="it"] .work-mini{
  position:relative;
  border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
}
/* ふちの光の筋(上 : 中央寄り / 下 : 右寄り) */
html[data-mode="it"] .btn::before, html[data-mode="it"] .btn::after,
html[data-mode="it"] .work-card::before, html[data-mode="it"] .blog-card::before, html[data-mode="it"] .work-mini::before{
  content:""; position:absolute; height:1px; pointer-events:none; z-index:1;
  background:linear-gradient(90deg, rgba(255,255,255,0), #fff, rgba(255,255,255,0));
  transition:opacity .2s ease;
}
html[data-mode="it"] .btn::before,
html[data-mode="it"] .work-card::before, html[data-mode="it"] .blog-card::before, html[data-mode="it"] .work-mini::before{ top:-1px; left:22%; right:22%; opacity:.9; }
html[data-mode="it"] .btn::after{ bottom:-1px; left:58%; right:12%; opacity:.7; }
/* ---- ボタン : 青〜紫のガラス ---- */
html[data-mode="it"] .btn{
  background:var(--glass-blue); color:#fff; border-radius:999px;
  text-shadow:0 1px 2px rgba(20,40,120,.25);
}
html[data-mode="it"] .btn:hover{
  background:var(--glass-blue); color:#fff; transform:translateY(-2px); filter:brightness(1.08);
  box-shadow:0 12px 30px rgba(70,90,230,.28), 0 0 0 1px rgba(255,255,255,.5), inset 0 1px 0 rgba(255,255,255,.8);
}
html[data-mode="it"] .btn--fill, html[data-mode="it"] .btn--fill:hover{
  background:linear-gradient(135deg, rgba(30,94,255,.92) 0%, rgba(110,80,255,.9) 100%); color:#fff;
}
/* ---- フィルタ・タグ : 白いガラス。選択中は青いガラス ---- */
html[data-mode="it"] .filter,
html[data-mode="it"] .tag{ background:var(--glass-light); color:var(--ink-2); border-radius:999px; }
html[data-mode="it"] .filter:hover:not(.is-active),
html[data-mode="it"] .tag:hover{ color:var(--accent); border-color:#fff; box-shadow:0 8px 22px rgba(40,70,170,.18), inset 0 1px 0 #fff; }
html[data-mode="it"] .filter.is-active,
html[data-mode="it"] .tags .tag[aria-current="page"]{ background:var(--glass-blue); color:#fff; border-color:var(--glass-edge); }
/* ---- カード : 白いガラス ---- */
html[data-mode="it"] .work-card,
html[data-mode="it"] .blog-card,
html[data-mode="it"] .work-mini{ background:var(--glass-light); border-radius:18px; padding:12px; }
html[data-mode="it"] .work-card .placeholder, html[data-mode="it"] .work-card .thumb,
html[data-mode="it"] .blog-card .placeholder, html[data-mode="it"] .blog-card .thumb,
html[data-mode="it"] .work-mini .placeholder, html[data-mode="it"] .work-mini .thumb{ border-radius:12px; }
html[data-mode="it"] .work-card:hover,
html[data-mode="it"] .blog-card:hover,
html[data-mode="it"] .work-mini:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.85) 0%, rgba(232,240,255,.7) 100%);
  border-color:#fff; transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(40,70,170,.2), 0 0 0 1px rgba(30,94,255,.18), inset 0 1px 0 #fff;
}
html[data-mode="it"] .work-card__badge{ background:var(--glass-blue); color:#fff; border:1px solid var(--glass-edge); border-radius:999px; }
html[data-mode="it"] .blog-card__foot{ border-top-color:rgba(30,94,255,.14); }

/* ---- ナイト : メダルの輪郭を光らせる + ホバーで浮き上がる ----
   ・金の縁の上を、細い光がゆっくり一周する(カードごとに時間をずらす)
   ・ふだんから縁のまわりに淡い金の光。内側のふちにも明るい線
   ・ホバー : 少し上へ浮き(位置)、ひとまわり大きく(スケール)、光が強く・速く回る */
@property --medal-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
html[data-mode="night"] .work-card,
html[data-mode="night"] .work-mini,
html[data-mode="night"] .works-strip .work-mini{
  background:
    linear-gradient(#0F0C09,#0F0C09) padding-box,
    conic-gradient(from var(--medal-a), rgba(255,250,225,0) 0deg, rgba(255,250,225,0) 245deg, rgba(255,253,238,.95) 300deg, rgba(255,250,225,0) 345deg) border-box,
    var(--gold-bevel) border-box;
  box-shadow:0 12px 26px rgba(0,0,0,.6), 0 0 0 1px rgba(255,220,140,.35), 0 0 18px rgba(226,185,74,.32);
  animation:medal-shine 7s linear infinite;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, filter .4s ease;
  will-change:transform;
}
html[data-mode="night"] .work-card:nth-child(3n+2), html[data-mode="night"] .work-mini:nth-child(3n+2){ animation-delay:-2.3s; }
html[data-mode="night"] .work-card:nth-child(3n+3), html[data-mode="night"] .work-mini:nth-child(3n+3){ animation-delay:-4.7s; }
html[data-mode="night"] .work-card::after,
html[data-mode="night"] .work-mini::after{
  box-shadow:inset 0 0 0 1px rgba(255,236,180,.75), inset 0 0 14px rgba(255,210,120,.22), inset 0 8px 18px rgba(0,0,0,.55);
}
html[data-mode="night"] .work-card:hover,
html[data-mode="night"] .work-mini:hover,
html[data-mode="night"] .works-strip .work-mini:hover{
  transform:translateY(-8px) scale(1.05);
  box-shadow:0 22px 40px rgba(0,0,0,.7), 0 0 0 1px rgba(255,230,160,.6), 0 0 36px rgba(236,196,90,.6);
  filter:brightness(1.08);
  animation-duration:2.4s;
}
@keyframes medal-shine{ to{ --medal-a:360deg; } }
/* BLOG カード(角丸の額縁)もホバーで浮く */
html[data-mode="night"] .blog-card{ transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; }
html[data-mode="night"] .blog-card:hover{ transform:translateY(-6px) scale(1.02); }
@media (prefers-reduced-motion:reduce){
  html[data-mode="night"] .work-card, html[data-mode="night"] .work-mini{ animation:none; }
  html[data-mode="night"] .work-card:hover, html[data-mode="night"] .work-mini:hover, html[data-mode="night"] .blog-card:hover{ transform:none; }
}


/* ============================================================
   広告・エンタメ : クレヨンのスクラッチアート(背景のコンセプトに合わせた部品)
   ・色は白いチョーク(変数名は --scratch-rainbow のまま)
   ・黒いクレヨンの板に、白いチョークで擦ったような縁取り
   ・縁は筆で引いたような筋入り(細かい斜めの削り跡)
   ・形は手で切ったように、角がほんの少しずつ不ぞろい
   ・ホバー : 左から虹色が削り出されて面全体が虹色になり、文字は黒に
   ============================================================ */
html[data-mode="ent"]{
  /* 白いチョーク : ほんのり黄みのある白のムラ + 粉っぽい粒(黒板に擦れて色が抜けた点)*/
  --scratch-rainbow:
    radial-gradient(circle at 20% 40%, rgba(11,10,15,.35) 0 .6px, transparent 1px) 0 0 / 7px 5px,
    radial-gradient(circle at 70% 60%, rgba(11,10,15,.28) 0 .5px, transparent 1px) 0 0 / 5px 6px,
    linear-gradient(100deg,#EDEAE2 0%,#FFFFFF 30%,#E4E0D8 55%,#F7F5EF 80%,#E9E6DE 100%);
  /* 塗りの面(文字を載せる所): 粒や筋は入れず、ほぼ無地のチョークの白。ふちだけ少しかすれる */
  --chalk-fill:linear-gradient(100deg,#F1EEE7 0%,#FBFAF6 35%,#EFECE5 70%,#F8F6F1 100%);
  --chalk-fray:repeating-linear-gradient(90deg, rgba(11,10,15,.55) 0 1px, rgba(11,10,15,0) 1px 3px, rgba(11,10,15,.3) 3px 4px, rgba(11,10,15,0) 4px 9px);
  --scratch-streak:repeating-linear-gradient(112deg, rgba(11,10,15,.42) 0 1px, rgba(11,10,15,0) 1px 3px, rgba(11,10,15,.2) 3px 4px, rgba(11,10,15,0) 4px 7px);
  --scratch-cut:polygon(1.2% 3%, 38% 0, 71% 2.5%, 99% 0.5%, 100% 46%, 98.6% 97%, 62% 100%, 24% 97.5%, 0.4% 100%, 0 52%);
}
/* ---- ボタン・フィルタ・タグ ---- */
html[data-mode="ent"] .btn,
html[data-mode="ent"] .filter,
html[data-mode="ent"] .tag{
  /* 形はランダムな多角形(--poly は mode-bg.js がボタンごとに作る。無いときは下の既定の形)*/
  position:relative; isolation:isolate; border:0 !important;
  background:var(--chalk-fill) !important;                      /* 縁 = 多角形の外周に見える白いチョーク */
  color:#F4F0FF; clip-path:var(--poly, polygon(0 14%, 8% 0, 58% 5%, 96% 0, 100% 40%, 97% 100%, 44% 93%, 3% 100%)); border-radius:0;
  transition:color .25s ease .05s, transform .2s ease;
}
html[data-mode="ent"] .btn::before, html[data-mode="ent"] .filter::before, html[data-mode="ent"] .tag::before,
html[data-mode="ent"] .btn::after,  html[data-mode="ent"] .filter::after,  html[data-mode="ent"] .tag::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
}
/* 黒いクレヨンの板 + 虹色に削れた縁(縁には削り跡の筋)*/
/* 中の黒い板 : 同じ多角形を少し内側に(= 外周に白いチョークの縁が残る)*/
html[data-mode="ent"] .btn::before, html[data-mode="ent"] .filter::before, html[data-mode="ent"] .tag::before{
  inset:3px; background:#0B0A0F; clip-path:var(--poly, polygon(0 14%, 8% 0, 58% 5%, 96% 0, 100% 40%, 97% 100%, 44% 93%, 3% 100%));
}
html[data-mode="ent"] .filter::before, html[data-mode="ent"] .tag::before{ inset:2px; }
/* ホバー時に左から削り出される虹色の面 */
html[data-mode="ent"] .btn::after, html[data-mode="ent"] .filter::after, html[data-mode="ent"] .tag::after{
  /* 面は無地のチョーク。上下のふちだけ、チョークがかすれたギザギザ(文字のある中央はきれいなまま)*/
  background:
    var(--chalk-fray) top / 100% 3px no-repeat,
    var(--chalk-fray) bottom / 100% 3px no-repeat,
    var(--chalk-fill);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .38s cubic-bezier(.7,0,.2,1);
}
html[data-mode="ent"] .btn:hover, html[data-mode="ent"] .filter:hover:not(.is-active), html[data-mode="ent"] .tag:hover{
  color:#0B0A0F; transform:rotate(-1.5deg) scale(1.03);
}
html[data-mode="ent"] .btn:hover::after, html[data-mode="ent"] .filter:hover::after, html[data-mode="ent"] .tag:hover::after{ transform:scaleX(1); }
/* 選択中・塗りのボタン : 最初から虹色の面 */
html[data-mode="ent"] .filter.is-active, html[data-mode="ent"] .tags .tag[aria-current="page"], html[data-mode="ent"] .btn--fill{ color:#0B0A0F; }
/* 文字の太さ・字間は、ふだんもホバー中も同じにする。
   (ホバーで太さが変わるとボタンの幅が変わり、隣のボタンが押されて動いてしまうため)
   ホバーの変化は色と transform(傾き・拡大)だけ = 周りのレイアウトには一切影響しない */
html[data-mode="ent"] .btn, html[data-mode="ent"] .filter, html[data-mode="ent"] .tag,
html[data-mode="ent"] .btn:hover, html[data-mode="ent"] .filter:hover, html[data-mode="ent"] .tag:hover,
html[data-mode="ent"] .btn--fill, html[data-mode="ent"] .filter.is-active, html[data-mode="ent"] .tags .tag[aria-current="page"]{
  font-weight:800; letter-spacing:.06em; text-shadow:none;
}
html[data-mode="ent"] .filter.is-active::after, html[data-mode="ent"] .tags .tag[aria-current="page"]::after, html[data-mode="ent"] .btn--fill::after{ transform:scaleX(1); }
html[data-mode="ent"] .btn .arw{ transition:transform .25s ease; }
/* ---- カード : 黒い板に虹色の削り枠。ホバーで枠が太く削れ、少し傾いて浮く ---- */
html[data-mode="ent"] .work-card, html[data-mode="ent"] .blog-card, html[data-mode="ent"] .work-mini, html[data-mode="ent"] .pd-card{
  position:relative; border:5px solid transparent !important; border-radius:0;   /* 白い削り枠の太さ */
  background:
    linear-gradient(#0E0C14,#0E0C14) padding-box,
    var(--scratch-streak) border-box,
    linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)) border-box;
  clip-path:var(--scratch-cut); box-shadow:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease;
}
html[data-mode="ent"] .work-card:hover, html[data-mode="ent"] .blog-card:hover, html[data-mode="ent"] .work-mini:hover, html[data-mode="ent"] .pd-card:hover{
  background:
    linear-gradient(#0E0C14,#0E0C14) padding-box,
    var(--scratch-streak) border-box,
    var(--scratch-rainbow) border-box;
  transform:translateY(-5px) rotate(-.6deg); box-shadow:none;
}
html[data-mode="ent"] .work-card__badge{ background:var(--chalk-fill); color:#0B0A0F; font-weight:800; clip-path:var(--scratch-cut); }
html[data-mode="ent"] .work-card:hover .work-card__title, html[data-mode="ent"] .work-mini:hover .work-mini__title{
  background:var(--scratch-rainbow); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---- ローディング画面 : 黒いクレヨンの紙に、ロゴが虹色に削り出され、下に筆の線が引かれる ---- */
html[data-mode="ent"] .mode-loader{
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.05), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.05), transparent),
    #0B0A0F;
}
html[data-mode="ent"] .mode-loader__logo{
  clip-path:inset(0 100% 0 0);                                    /* ロゴが左から削り出される */
  animation:ent-logo-scratch 1s cubic-bezier(.6,0,.3,1) .25s forwards;
}
@keyframes ent-logo-scratch{ to{ clip-path:inset(0 0 0 0); } }
@media (prefers-reduced-motion:reduce){
  html[data-mode="ent"] .mode-loader__logo{ animation:none; clip-path:none; }
}


/* =============================================================
   画面右上の切替ボタン(いまのモード名入り)。どのモードでも同じ中立な見た目
   スマホ(上部バーが出る幅)では右下に置く
   ============================================================= */
.mode-fab{
  position:fixed; top:16px; right:16px; z-index:9000;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px 9px 12px;
  border:1px solid rgba(0,0,0,.12); border-radius:999px;
  background:rgba(255,255,255,.92); color:#16181D;
  font:600 12.5px/1 "Noto Sans JP", sans-serif; letter-spacing:.02em;
  box-shadow:0 6px 18px rgba(0,0,0,.14);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  cursor:pointer; clip-path:none; transform:none;
}
.mode-fab i{ font-size:14px; transition:transform .4s ease; }
.mode-fab:hover i{ transform:rotate(180deg); }
.mode-fab:focus-visible{ outline:2px solid #1E5EFF; outline-offset:2px; }
.mode-fab::before, .mode-fab::after{ content:none !important; }
@media (max-width:860px){
  .mode-fab{ top:auto; bottom:16px; right:16px; }
}
@media (prefers-reduced-motion:reduce){ .mode-fab i{ transition:none; } }

/* タイムラインの縦線を白に */
html[data-mode="night"] .abt-timeline::before{ background:rgba(255,255,255,.85); }


/* =============================================================
   ロゴ(サイドバー・スマホのバー・ローディング画面 共通)
   明るい背景 = ポジ(濃い文字)/ 暗い背景(ナイト・エンタメ)= ネガ(白い文字)
   ============================================================= */
.brand__logo{ display:block; width:215px; max-width:100%; height:auto; }
.brand__logo--neg{ display:none; }
html[data-mode="night"] .brand__logo--pos, html[data-mode="ent"] .brand__logo--pos{ display:none; }
html[data-mode="night"] .brand__logo--neg, html[data-mode="ent"] .brand__logo--neg{ display:block; }
.brand{ line-height:0; }
@media (max-width:860px){ .mobile-bar .brand__logo{ width:auto; height:34px; } }
.mode-loader__logo{ letter-spacing:0; padding-left:0; line-height:0; }
.mode-loader__logo .brand__logo{ width:clamp(180px, 22vw, 260px); }

/* =============================================================
   ローディングバー : モードごとのモチーフ
   ・進行は 1 回だけ（.15s 待って .85s で右端に到着 = 約 1.0 秒）。
     ローダーは最短 1.2 秒表示なので、消える時には必ず右端に着いている。
   ・到着後にまだ読み込み中なら、右端で静かな待機アニメ（idle）を続ける。
   ・各擬似要素の「アニメ無しの状態」= 完成形（到着済み）。
   ============================================================= */
.mode-loader__bar{ position:relative; display:block; width:150px; height:12px; --ld:.85s; --ldd:.15s; --lend:1s; }
.mode-loader__bar::before, .mode-loader__bar::after{ content:""; position:absolute; pointer-events:none; }
/* 読み込み完了（フェードアウト中）は必ず完成形で見せる */
html.mbg-ready .mode-loader__bar::before, html.mbg-ready .mode-loader__bar::after{ animation:none !important; }
@keyframes ldr-breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

/* --- オリジナル : ドットが 1 つずつ増えていく ------------------ */
html:not([data-mode]) .mode-loader__bar::before,
html:not([data-mode]) .mode-loader__bar::after{
  left:0; top:3px; height:6px; width:100%;
  background:radial-gradient(circle at 3px 3px, var(--c, var(--accent)) 2.6px, transparent 3.2px) 0 0/15.5px 6px repeat-x;
}
html:not([data-mode]) .mode-loader__bar::before{ --c:color-mix(in srgb, var(--accent) 16%, transparent); }
html:not([data-mode]) .mode-loader__bar::after{ animation:ldr-dots var(--ld) steps(10, end) var(--ldd) both, ldr-breathe 1.6s ease-in-out var(--lend) infinite; }
@keyframes ldr-dots{ from{ width:0; } to{ width:100%; } }

/* --- アパレル : 水彩がにじんで広がる ------------------------- */
html[data-mode="app"] .mode-loader__bar{ width:170px; }
html[data-mode="app"] .mode-loader__bar::after{
  inset:0; border-radius:50%; transform-origin:left center;
  background:linear-gradient(90deg, #ffa3ad, #62d9f2, #d6ee70, #f7a0ee, #ffa3ad) 0 0/200% 100%;
  filter:blur(2.2px);
  animation:ldr-wash var(--ld) cubic-bezier(.4,0,.2,1) var(--ldd) both, ldr-flow 3s linear var(--lend) infinite;
}
@keyframes ldr-wash{ from{ transform:scaleX(.05) scaleY(.4); opacity:0; } 30%{ opacity:1; } to{ transform:none; opacity:1; } }
@keyframes ldr-flow{ to{ background-position:-200% 0; } }

/* --- メーカー : 点線が伸びる（背景のアイソメ点線と同じ刻み）--- */
html[data-mode="corp"] .mode-loader__bar::before,
html[data-mode="corp"] .mode-loader__bar::after{
  left:0; top:5.5px; height:1.5px; width:100%;
  background:repeating-linear-gradient(90deg, var(--c, var(--accent)) 0 6px, transparent 6px 10px);
}
html[data-mode="corp"] .mode-loader__bar::before{ --c:color-mix(in srgb, var(--accent) 18%, transparent); }
html[data-mode="corp"] .mode-loader__bar::after{ animation:ldr-reveal var(--ld) cubic-bezier(.5,0,.2,1) var(--ldd) both, ldr-breathe 1.6s ease-in-out var(--lend) infinite; }
@keyframes ldr-reveal{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }

/* --- 小売・飲食 : 墨の一筆 → 朱の落款 ------------------------ */
html[data-mode="food"] .mode-loader__bar{ width:160px; height:14px; }
html[data-mode="food"] .mode-loader__bar::after{
  left:0; right:14px; top:4px; height:6px;
  border-radius:1px 60% 40% 1px / 1px 100% 100% 1px;
  background:
    repeating-linear-gradient(0deg, transparent 0 1px, color-mix(in srgb, var(--bg) 55%, transparent) 1px 1.6px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 55%, transparent), var(--ink) 25%, var(--ink) 80%, color-mix(in srgb, var(--ink) 40%, transparent));
  -webkit-mask:linear-gradient(90deg, #000 85%, transparent);
          mask:linear-gradient(90deg, #000 85%, transparent);
  animation:ldr-reveal .7s cubic-bezier(.6,0,.25,1) var(--ldd) both;
}
html[data-mode="food"] .mode-loader__bar::before{
  right:0; top:2px; width:10px; height:10px; border-radius:1.5px; transform:rotate(3deg);
  background:#C0433A; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--bg) 30%, transparent);   /* 落款は朱のまま */
  animation:ldr-seal .22s ease-out .8s both;
}
@keyframes ldr-seal{ 0%{ transform:scale(1.8) rotate(-8deg); opacity:0; } 70%{ transform:scale(.92) rotate(3deg); opacity:1; } 100%{ transform:rotate(3deg); opacity:1; } }

/* --- IT : 始点ノード → 終点ノードへパケットが流れる ---------- */
html[data-mode="it"] .mode-loader__bar{
  width:160px;
  background:
    radial-gradient(circle at 6px 6px, var(--accent) 2.8px, color-mix(in srgb, var(--accent) 25%, transparent) 3.4px, transparent 4px) 0 0/12px 12px no-repeat,
    radial-gradient(circle at 6px 6px, color-mix(in srgb, var(--accent) 45%, transparent) 2.8px, transparent 3.4px) 100% 0/12px 12px no-repeat,
    linear-gradient(color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 22%, transparent)) 6px 50%/148px 1px no-repeat;
}
html[data-mode="it"] .mode-loader__bar::before{               /* 通過したワイヤーが光る */
  left:6px; right:6px; top:5.5px; height:1.5px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), var(--accent));
  box-shadow:0 0 6px color-mix(in srgb, var(--accent) 60%, transparent);
  animation:ldr-reveal var(--ld) cubic-bezier(.55,0,.35,1) var(--ldd) both;
}
html[data-mode="it"] .mode-loader__bar::after{                /* パケット（到着後は終点ノードとして点灯） */
  top:2px; left:2px; width:8px; height:8px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 1.5px var(--accent), 0 0 10px 3px color-mix(in srgb, var(--accent) 70%, transparent);
  transform:translateX(148px);
  animation:ldr-packet var(--ld) cubic-bezier(.55,0,.35,1) var(--ldd) both, ldr-ping 1.2s ease-in-out var(--lend) infinite;
}
@keyframes ldr-packet{ from{ transform:translateX(0); } to{ transform:translateX(148px); } }
@keyframes ldr-ping{ 0%,100%{ box-shadow:0 0 0 1.5px var(--accent), 0 0 10px 3px color-mix(in srgb, var(--accent) 70%, transparent); } 50%{ box-shadow:0 0 0 1.5px var(--accent), 0 0 16px 6px color-mix(in srgb, var(--accent) 45%, transparent); } }

/* --- ナイト : 金の線が伸び、先端の星がキラッと走る ------------ */
html[data-mode="night"] .mode-loader__bar{
  width:180px; height:16px;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.28) 10%, rgba(212,175,55,.28) 90%, transparent) 0 50%/100% 1px no-repeat;
}
html[data-mode="night"] .mode-loader__bar::after{             /* 金の線 */
  left:0; right:0; top:7px; height:2px;
  background:linear-gradient(90deg, rgba(212,175,55,0), #B8912E 12%, #F6D77A 70%, #FFF6D6);
  filter:drop-shadow(0 0 3px rgba(255,210,110,.8));
  animation:ldr-reveal var(--ld) cubic-bezier(.7,0,.3,1) var(--ldd) both;
}
html[data-mode="night"] .mode-loader__bar::before{            /* 先端を走る星 */
  top:0; left:-8px; width:16px; height:16px;
  background:#FFF6D6;
  clip-path:polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  filter:drop-shadow(0 0 4px #FFD978) drop-shadow(0 0 8px rgba(255,217,120,.7));
  transform:translateX(180px) scale(.7);
  animation:ldr-star var(--ld) cubic-bezier(.7,0,.3,1) var(--ldd) both, ldr-twinkle 1.4s ease-in-out var(--lend) infinite;
}
@keyframes ldr-star{
  0%  { transform:translateX(0)     scale(.4)  rotate(0);      opacity:0; }
  15% { opacity:1; }
  85% { transform:translateX(165px) scale(1)   rotate(160deg); }
  93% { transform:translateX(180px) scale(1.6) rotate(180deg); }
  100%{ transform:translateX(180px) scale(.7)  rotate(180deg); opacity:1; }
}
@keyframes ldr-twinkle{ 0%,100%{ transform:translateX(180px) scale(.7) rotate(180deg); opacity:1; } 50%{ transform:translateX(180px) scale(1) rotate(225deg); opacity:.6; } }

/* --- 広告・エンタメ : 虹色の削り跡が残る --------------------- */
html[data-mode="ent"] .mode-loader__bar{ width:200px; height:12px; }
html[data-mode="ent"] .mode-loader__bar::after{
  left:0; top:2px; height:8px; width:100%;
  background:linear-gradient(90deg, #FF4D6D, #FF9F1C, #FFE14D, #4DFF88, #39D5FF, #6B7CFF, #C45CFF) 0 0/200px 100% no-repeat;
  clip-path:polygon(0 35%, 3% 5%, 100% 20%, 99% 90%, 2% 75%);
  -webkit-mask:repeating-linear-gradient(0deg, #000 0 1.4px, rgba(0,0,0,.5) 1.4px 2.2px);
          mask:repeating-linear-gradient(0deg, #000 0 1.4px, rgba(0,0,0,.5) 1.4px 2.2px);
  animation:ldr-dots var(--ld) cubic-bezier(.6,0,.3,1) var(--ldd) both;
}
html[data-mode="ent"] .mode-loader__bar::before{
  top:3px; left:-3px; width:6px; height:6px; border-radius:50%;
  background:#fff; box-shadow:0 0 6px 2px rgba(255,255,255,.6);
  opacity:0; animation:ldr-tip calc(var(--ld) + .25s) cubic-bezier(.6,0,.3,1) var(--ldd) both;
}
@keyframes ldr-tip{ 0%{ transform:translateX(0); opacity:1; } 77%{ transform:translateX(200px); opacity:1; } 100%{ transform:translateX(200px); opacity:0; } }

@media (prefers-reduced-motion:reduce){
  .mode-loader__bar::before, .mode-loader__bar::after{ animation:none !important; }
}

/* =============================================================
   ヒーロー画像 : 下端をふわっと透明に（オリジナルの見え方に合わせる）
   --hero-fade-from : 透明になり始める位置（上から何%）。小売・飲食は全面写真なので対象外
   ============================================================= */
html[data-mode]{ --hero-fade-from:55%; }
html[data-mode] .hero__visual .thumb,
html[data-mode] .hero__visual .placeholder{
  -webkit-mask-image:linear-gradient(to bottom, #000 var(--hero-fade-from), transparent 100%);
          mask-image:linear-gradient(to bottom, #000 var(--hero-fade-from), transparent 100%);
}

/* 広告・エンタメ : ヒーローのキャッチと WORKS などの見出しは、極太のゴシック(Noto Sans JP 900)で
   和文・欧文・数字をそろえる（Big Shoulders Display の細長い数字が、かなと並ぶと浮いてしまうため）。
   サイドバー・ナビは Big Shoulders Display のまま */
html[data-mode="ent"]{ --ff-head:var(--ff-jp); --head-w:900; --sec-w:900; }
html[data-mode="ent"] .hero__title{ letter-spacing:.01em; }