/* =================================================================
   創墨社 CueZilla 用 CSS — 結合済み (site.combined.css)
   結合順序: A. style2.css → B. impact.css → C. add-css (6ファイル)
   Google Fonts @import は先頭に1回のみ記載（重複排除済み）
   生成日: 2026-06-11
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700;900&family=Noto+Sans+JP:wght@400;500;700&family=Roboto+Mono:wght@400;500&display=swap');

/* =================================================================
   A. style2.css — デザインシステム本体
   ================================================================= */

/* =========================================================
   創墨社 RECRUIT — Design System v2
   Reference language: タカクウ (tku-eng.com)
   - diagonal clip-path section cuts
   - white shadow cards overlapping large photos
   - full-bleed photo hero + centered catch
   - red (#c8102e) accent, white cards, black/red bands
   - 3-col rounded cards w/ red pill labels + shine
   - bordered VIEW MORE button w/ diagonal arrow
   - section rhythm: light / cream / dark / red / photo
   ========================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --red:#c8102e;
  --red-deep:#a00d22;
  --red-bright:#e3132f;
  --ink:#16110f;
  --ink-soft:#403a37;
  --ink-dim:#5e564e;
  --paper:#ffffff;
  --cream:#f4f1ec;
  --cream-2:#ebe6df;
  --black:#0c0a09;
  --black-2:#15110f;
  --black-3:#211c19;
  --line:#e4ded5;
  --line-dark:#2e2723;

  --serif:'Noto Serif JP',serif;
  --sans:'Noto Sans JP',system-ui,sans-serif;
  --mono:'Roboto Mono','SFMono-Regular',monospace;

  --maxw:1200px;
  --gut:clamp(1.25rem,4vw,3.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-expo:cubic-bezier(.19,1,.22,1);
  --shadow:0 18px 50px -20px rgba(0,0,0,.4);
  --shadow-card:0 14px 34px -18px rgba(0,0,0,.28);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--paper);color:var(--ink);
  line-height:1.9;font-size:16px;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:#fff}

/* 改行制御：意味の塊（文節）境界でのみ折り返す。見出し・短文に付与 */
span.line-chunk{display:inline-block;overflow-wrap:anywhere;word-break:normal}

/* accessibility: visible keyboard focus (WCAG 2.4.7) */
:focus-visible{outline:3px solid #1a6dff;outline-offset:2px;border-radius:2px}
.sec--dark :focus-visible,.sec--red :focus-visible,.site-header :focus-visible,.hero :focus-visible,.page-hero :focus-visible,.site-footer :focus-visible,.skew-band :focus-visible,.cta :focus-visible{outline-color:#fff}
/* screen-reader-only (visually hidden but accessible) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;inset:0 0 auto;z-index:200;height:84px;
  display:flex;align-items:center;
  background:rgba(255,255,255,.0);transition:background .35s,box-shadow .35s,height .35s;
}
.site-header.scrolled{background:rgba(255,255,255,.97);box-shadow:0 1px 0 var(--line),0 10px 30px -22px rgba(0,0,0,.5);height:70px}
.nav{max-width:var(--maxw);margin:0 auto;width:100%;padding:0 var(--gut);display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.8rem;margin-right:auto}
.brand > span{display:inline-flex;flex-direction:column;align-items:center;text-align:center}
.brand-mark{width:34px;height:34px;position:relative;flex-shrink:0;border:2px solid var(--red)}
.brand-mark::before,.brand-mark::after{content:'';position:absolute;background:var(--red)}
.brand-mark::before{left:50%;top:5px;bottom:5px;width:2px;transform:translateX(-50%)}
.brand-mark::after{top:50%;left:5px;right:5px;height:2px;transform:translateY(-50%)}
.brand-name{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:.14em;color:#fff;line-height:1;transition:color .35s;text-indent:.07em}
.brand-sub{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.3em;margin-top:4px;color:rgba(255,255,255,.8);transition:color .35s;text-indent:.15em}
.site-header.scrolled .brand-name{color:var(--ink)}
.site-header.scrolled .brand-sub{color:var(--ink-dim)}

.nav-links{display:flex;align-items:center;gap:0}
.nav-links a{position:relative;font-size:12.5px;font-weight:700;color:#fff;padding:.5rem .58rem;letter-spacing:.02em;white-space:nowrap;transition:color .25s}
.nav-links a::after{content:'';position:absolute;left:.58rem;right:.58rem;bottom:.1rem;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.site-header.scrolled .nav-links a{color:var(--ink)}
.nav-links a[aria-current="page"]{color:#fff}
.site-header.scrolled .nav-links a[aria-current="page"]{color:var(--red)}

.nav-cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--red);color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.04em;padding:.8rem 1.3rem;border-radius:999px;flex-shrink:0;white-space:nowrap;transition:background .25s,transform .25s;margin-left:.4rem}
.nav-cta:hover{background:var(--red-bright);color:#212529;transform:translateY(-2px)}
.nav-cta .arr{font-family:var(--mono)}

.nav-toggle{display:none;width:44px;height:44px;position:relative;background:none;border:0;cursor:pointer;flex-shrink:0;margin-right:-8px}
.nav-toggle span{position:absolute;left:11px;right:11px;height:2.5px;background:#fff;transition:.25s}
.site-header.scrolled .nav-toggle span{background:var(--ink)}
.nav-toggle span:nth-child(1){top:16px}.nav-toggle span:nth-child(2){top:22px}.nav-toggle span:nth-child(3){top:28px}
body.menu-open .nav-toggle span{background:#fff}
body.menu-open .nav-toggle span:nth-child(1){top:22px;transform:rotate(45deg)}
body.menu-open .nav-toggle span:nth-child(2){opacity:0}
body.menu-open .nav-toggle span:nth-child(3){top:22px;transform:rotate(-45deg)}

@media(max-width:1200px){
  .nav-links,.nav>.nav-cta{display:none}
  .nav-toggle{display:block}
  .mobile-menu{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);z-index:190;background:var(--black);transform:translateX(100%);transition:transform .4s var(--ease);display:flex;flex-direction:column;padding:6.5rem var(--gut) 2rem;overflow-y:auto}
  body.menu-open{overflow:hidden}
  body.menu-open .mobile-menu{transform:translateX(0)}
  body.menu-open::after{content:'';position:fixed;inset:0;z-index:180;background:rgba(0,0,0,.5)}
  .mobile-menu a{font-family:var(--serif);font-size:20px;color:#fff;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.12);display:flex;align-items:baseline;gap:1rem}
  .mobile-menu a .mm-num{font-family:var(--mono);font-size:11px;color:var(--red);letter-spacing:.1em}
  .mobile-menu .nav-cta{margin-top:1.6rem;justify-content:center;font-size:15px;padding:1rem}
}
@media(min-width:1201px){.mobile-menu{display:none}}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{display:inline-flex;align-items:center;gap:.8rem;font-family:var(--sans);font-weight:700;font-size:14.5px;letter-spacing:.04em;cursor:pointer;border:0;transition:.25s var(--ease)}
.btn .arr{font-family:var(--mono);transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn-pill{background:var(--red);color:#fff;padding:1.1rem 2.4rem;border-radius:999px;box-shadow:0 12px 26px -12px rgba(200,16,46,.7)}
.btn-pill:hover{background:var(--red-bright);color:#212529;transform:translateY(-2px)}
/* ghost (outline) pill — same shape/size family as solid pill */
.btn-pill-ghost{background:rgba(255,255,255,.08);color:#fff;box-shadow:none;border:1.5px solid #fff;backdrop-filter:blur(2px)}
.btn-pill-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
/* bordered VIEW MORE w/ diagonal arrow */
.btn-view{position:relative;background:transparent;color:var(--ink);border:1.5px solid currentColor;padding:1rem 3.4rem 1rem 1.6rem;letter-spacing:.12em;font-size:13px}
.btn-view::after{content:'';position:absolute;right:1.4rem;top:50%;width:9px;height:9px;border:2px solid currentColor;border-left:0;border-bottom:0;transform:translateY(-50%) rotate(45deg);transition:right .25s var(--ease)}
.btn-view:hover{background:var(--red);color:#fff;border-color:var(--red)}
.btn-view:hover::after{right:1.1rem}
.btn-view.on-dark,.btn-view.on-red{color:#fff}
.btn-view.on-red:hover{background:#fff;color:var(--red);border-color:#fff}
/* CTAセクションのボタンをヒーローと同じ「角型＋照準ブラケット」に統一 */
.cta .btn{position:relative;border-radius:2px;width:min(16rem,80vw);justify-content:center}
.cta .btn-pill{border-radius:2px;box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.cta .btn-view{border-radius:2px;padding:1.1rem 1.9rem;font-size:14px;letter-spacing:.06em;
  color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08)}
.cta .btn-view:hover{background:#fff;color:var(--red);border-color:#fff}
.cta .btn::before{content:'';position:absolute;width:11px;height:11px;border:2px solid currentColor;
  border-right:0;border-bottom:0;top:5px;left:5px;opacity:.85;transition:top .3s var(--ease),left .3s var(--ease)}
.cta .btn-pill::after,.cta .btn-view::after{content:'';position:absolute;width:11px;height:11px;
  border:2px solid currentColor;border-left:0;border-top:0;bottom:5px;right:5px;left:auto;top:auto;
  transform:none;opacity:.85;transition:bottom .3s var(--ease),right .3s var(--ease)}
.cta .btn:hover::before{top:2px;left:2px}
.cta .btn-pill:hover::after,.cta .btn-view:hover::after{bottom:2px;right:2px}

.btn-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

/* =========================================================
   SECTIONS / LAYOUT
   ========================================================= */
main{position:relative}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.wrap-narrow{max-width:920px;margin:0 auto;padding:0 var(--gut)}
.sec{position:relative;padding-block:clamp(4.5rem,9vw,8.5rem)}
.sec--cream{background:var(--cream)}
/* 採用エントリーフォームの見出し帯：高さを抑え、テキストを上下中央に */
#entry-form{padding-block:clamp(2.25rem,5vw,3.5rem)}
#entry-form .sec-head{margin-bottom:0}
/* スマホ表示：説明文は左揃え（見出しは中央のまま） */
@media(max-width:560px){#entry-form .sec-cap{text-align:left}}
.sec--dark{background:var(--black);color:#fff}
.sec--red{background:var(--red);color:#fff}

/* section heading (centered, EN label + JP title) */
.sec-head{text-align:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head.left{text-align:left}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.28em;color:var(--red-deep);font-weight:500;display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.1rem}
.eyebrow::before,.eyebrow::after{content:'';width:26px;height:1.5px;background:var(--red)}
.sec-head.left .eyebrow::after{display:none}
.sec--dark .eyebrow,.sec--red .eyebrow{color:#fff}
.sec--dark .eyebrow::before,.sec--dark .eyebrow::after,.sec--red .eyebrow::before,.sec--red .eyebrow::after{background:rgba(255,255,255,.5)}
.sec-title{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.4;letter-spacing:.02em}
.sec-title .r{color:var(--red)}
.sec--dark .sec-title .r,.sec--red .sec-title .r{color:#ff2d49}
.sec-cap{margin-top:1.1rem;font-size:1rem;color:var(--ink-soft);line-height:2;text-wrap:pretty}
.sec--dark .sec-cap,.sec--red .sec-cap{color:rgba(255,255,255,.85)}

.body{color:var(--ink-soft);line-height:2.1;margin-bottom:1.2rem;text-wrap:pretty}
.body strong{color:var(--ink);font-weight:700}
.body em{font-style:normal;color:var(--red);font-weight:700}
.sec--dark .body{color:rgba(255,255,255,.8)}.sec--dark .body strong{color:#fff}
/* ブログ導入文：タブレット・PC時は +4px（スマホは据え置き） */
@media(min-width:561px){.blog-intro{font-size:20px}}

/* =========================================================
   DIAGONAL PHOTO BAND (parts76-style skew w/ bg image)
   ========================================================= */
.skew-band{position:relative;color:#fff;padding-block:clamp(6rem,12vw,11rem);overflow:hidden;isolation:isolate;margin-top:calc(-4.5vw - 1px)}
.skew-band::before{content:'';position:absolute;inset:-2px 0;z-index:-2;clip-path:polygon(0 4.5vw,100% 0,100% calc(100% - 4.5vw),0 100%);background:var(--black-2)}
.skew-band .skew-bg{position:absolute;inset:-2px 0;z-index:-1;clip-path:polygon(0 4.5vw,100% 0,100% calc(100% - 4.5vw),0 100%)}
.skew-band .skew-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,8,7,.92),rgba(10,8,7,.55) 60%,rgba(200,16,46,.25))}

/* =========================================================
   FEATURE (white shadow card overlapping a large photo)
   ========================================================= */
.feature{position:relative;display:grid;grid-template-columns:1fr;gap:1.5rem}
.feature-card{background:var(--paper);box-shadow:var(--shadow);padding:clamp(1.8rem,4vw,3.2rem);position:relative;z-index:2}
.feature-card .eyebrow{margin-bottom:.9rem}
.feature-ttl{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.5;margin-bottom:1.4rem;color:var(--ink)}
.feature-ttl .r{color:var(--red)}
.feature-photo{position:relative;z-index:1;aspect-ratio:16/11;box-shadow:var(--shadow);overflow:hidden}
/* 実写真をプレースホルダー枠に流し込む（縦横比を保ってトリミング） */
.feature-photo>img{display:block;width:100%;height:100%;object-fit:cover}
.card-thumb>img,.msg-aside .photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(min-width:861px){
  .feature{grid-template-columns:repeat(12,1fr);align-items:center;gap:0}
  .feature .feature-card{grid-row:1;grid-column:1/7;margin-right:-8%}
  .feature .feature-photo{grid-row:1;grid-column:6/13;aspect-ratio:16/10}
  .feature.flip .feature-card{grid-column:7/13;margin-right:0;margin-left:-8%}
  .feature.flip .feature-photo{grid-column:1/8}
  .feature.flip .feature-card{justify-self:end}
  /* 創墨社についての2名写真：PC時は人物側へ寄せて少し拡大し、空いた左の余白を抑える */
  .feature.flip .feature-photo>img{transform:scale(1.2);transform-origin:70% 40%}
}

/* =========================================================
   PHOTO PLACEHOLDER (6/18 shoot)
   ========================================================= */
.photo{position:relative;overflow:hidden;background:var(--cream-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85rem;text-align:center;background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.03) 0 13px,transparent 13px 26px)}
.photo.dark{background:var(--black-3);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 13px,transparent 13px 26px)}
.photo::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(200,16,46,.12),transparent 55%)}
.photo .ph-k{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--ink-dim);position:relative}
.photo.dark .ph-k{color:rgba(255,255,255,.45)}
.photo .ph-note{font-size:12.5px;color:var(--ink-soft);position:relative;max-width:80%;line-height:1.7}
.photo.dark .ph-note{color:rgba(255,255,255,.7)}
.photo .ph-tag{position:relative;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:#fff;background:var(--red);padding:.4rem .85rem;display:inline-flex;align-items:center;gap:.5rem;border-radius:999px}
.photo .ph-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* =========================================================
   HERO (full-bleed photo + centered catch)
   ========================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;isolation:isolate;padding-bottom:clamp(56px,8vh,92px)}
.hero-bg{position:absolute;inset:0;z-index:-2;background:var(--black-2);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 16px,transparent 16px 32px)}
.hero-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 90% at 70% 20%,rgba(200,16,46,.3),transparent 55%)}
.hero-ov{position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(8,6,6,.6),rgba(8,6,6,.35) 45%,rgba(8,6,6,.78))}
.hero-inner{position:relative;padding:clamp(3.5rem,7vh,5.5rem) var(--gut) clamp(2rem,4vh,3rem);max-width:1000px}
.hero-label{font-family:var(--mono);font-size:13px;letter-spacing:.34em;color:#fff;display:inline-flex;align-items:center;gap:.9rem;margin-bottom:1.3rem}
.hero-label::before,.hero-label::after{content:'';width:32px;height:1.5px;background:var(--red)}
.hero-catch{font-family:var(--serif);font-weight:700;font-size:clamp(2.7rem,9vw,6.2rem);line-height:1.16;letter-spacing:.02em;text-shadow:0 4px 30px rgba(0,0,0,.4)}
.hero-catch .r{color:#ff2d49}
/* 行末の句読点が生む余白を詰め、視覚的な中心に揃える */
.hero-catch .pp{display:inline-block;margin-right:-.45em}
.hero-sub{margin:1.4rem auto 2.1rem;font-size:clamp(1rem,2vw,1.2rem);line-height:1.9;max-width:42ch;color:rgba(255,255,255,.92);text-wrap:pretty}
.hero .btn-row{justify-content:center;gap:1.2rem}
/* hero CTAs: 測量機器のような角ブラケット付きボタン（同サイズ） */
.hero .btn{position:relative;font-size:14px;line-height:1.5;letter-spacing:.06em;width:min(15rem,80vw);justify-content:center}
.hero .btn-pill{padding:1.1rem 1.7rem;border-radius:2px;box-shadow:none;border:1.5px solid transparent}
.hero .btn-pill-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4)}
.hero .btn::before,.hero .btn::after{content:'';position:absolute;width:11px;height:11px;
  border:2px solid currentColor;opacity:.85;transition:inset .3s var(--ease),top .3s var(--ease),left .3s var(--ease),right .3s var(--ease),bottom .3s var(--ease)}
.hero .btn::before{top:5px;left:5px;border-right:0;border-bottom:0}
.hero .btn::after{bottom:5px;right:5px;border-left:0;border-top:0}
.hero .btn:hover::before{top:2px;left:2px}
.hero .btn:hover::after{bottom:2px;right:2px}
.hero .btn-pill-ghost::before,.hero .btn-pill-ghost::after{border-color:#ff2d49}
.hero .btn-pill-ghost:hover{background:rgba(255,255,255,.8);color:var(--ink)}
.hero-tag{position:absolute;bottom:1.5rem;right:var(--gut);z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#fff;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.25);padding:.5rem .9rem;border-radius:999px;display:inline-flex;align-items:center;gap:.5rem}
.hero-tag::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 2.2s infinite}
.hero-scroll{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.85);display:flex;flex-direction:column;align-items:center;gap:.45rem}
.hero-scroll::after{content:'';width:1px;height:26px;background:linear-gradient(#fff,transparent)}
@media(max-width:640px){.hero-tag{display:none}}
/* very short viewports only: drop the cue rather than crowd the CTAs */
@media(max-height:620px){.hero-scroll{display:none}}

/* =========================================================
   PAGE HERO (inner pages) — diagonal photo band
   ========================================================= */
.page-hero{position:relative;color:#fff;padding:11rem var(--gut) clamp(4rem,8vw,6.5rem);overflow:hidden;isolation:isolate;text-align:center}
.page-hero-bg{position:absolute;inset:0;z-index:-2;background:var(--black-2);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 15px,transparent 15px 30px)}
.page-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,6,6,.7),rgba(8,6,6,.55)),radial-gradient(100% 80% at 80% 10%,rgba(200,16,46,.28),transparent 55%)}
.page-hero-inner{position:relative;max-width:900px;margin:0 auto}
.page-crumb-bar{padding:.55rem 0;border-bottom:1px solid rgba(0,0,0,.08)}
.page-crumb-bar .crumb{margin-bottom:0;color:rgba(60,55,55,.65)}
.page-crumb-bar .crumb a{color:rgba(60,55,55,.65)}
.page-crumb-bar .crumb .sep{color:rgba(0,0,0,.25)}
.page-crumb-bar .crumb .cur{color:#c8102e}
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.82);margin-bottom:1.4rem}
.crumb a{display:inline-block;padding:.3rem .1rem}
.crumb .sep{margin:0 .4rem;color:rgba(255,255,255,.5)}
.crumb .cur{color:#ff2d49}
.page-hero .eyebrow{color:#fff;justify-content:center}
.page-hero .eyebrow::before,.page-hero .eyebrow::after{background:rgba(255,255,255,.55)}
.page-hero-title{font-family:var(--serif);font-weight:700;font-size:clamp(2.1rem,6vw,3.8rem);line-height:1.32;letter-spacing:.02em}
.page-hero-title .r{color:#ff2d49}
.page-hero-lead{margin:1.6rem auto 0;font-size:clamp(.95rem,1.6vw,1.08rem);line-height:2.05;max-width:60ch;color:rgba(255,255,255,.88);text-wrap:pretty}

/* =========================================================
   INFO BAR — メインビジュアル直下の採用データ帯
   ヒーロー（暗色）と一体に見える“台座”として配置。
   ========================================================= */
.infobar{background:var(--ink);color:#fff;position:relative;z-index:3;
  border-top:2px solid var(--red);box-shadow:0 18px 36px -28px rgba(0,0,0,.7)}
.infobar .wrap{display:flex;align-items:stretch;gap:0}
.infobar-label{font-family:var(--mono);font-weight:500;letter-spacing:.24em;font-size:12px;line-height:1.45;
  display:flex;flex-direction:column;justify-content:center;padding:0 clamp(1.2rem,2.2vw,2rem);flex-shrink:0;
  color:var(--red);border-right:1px solid rgba(255,255,255,.14)}
.infobar-items{display:flex;align-items:stretch;gap:0;flex:1}
.infobar-items .it{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  padding:1.15rem .6rem;border-right:1px solid rgba(255,255,255,.1)}
.infobar-items .it:last-child{border-right:0}
.infobar-items .it .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:rgba(255,255,255,.6);order:-1}
.infobar-items .it .v{font-family:var(--serif);font-weight:700;font-size:clamp(1.25rem,2vw,1.55rem);color:#fff;
  line-height:1;white-space:nowrap}
.infobar-items .it .v .u{font-size:.5em;font-weight:500;color:rgba(255,255,255,.72);margin-left:.18em}
@media(max-width:760px){
  .infobar .wrap{flex-direction:column;padding:0}
  .infobar-label{flex-direction:row;justify-content:center;gap:.4em;padding:.85rem;
    border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .infobar-label br{display:none}
  .infobar-items{display:grid;grid-template-columns:repeat(3,1fr)}
  .infobar-items .it{padding:1rem .5rem;
    border-right:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
  .infobar-items .it:nth-child(3n){border-right:0}
  .infobar-items .it:nth-last-child(-n+3){border-bottom:0}
  .infobar-items .it:last-child{border-right:0}
}
@media(max-width:420px){
  .infobar-items{grid-template-columns:repeat(2,1fr)}
  .infobar-items .it:nth-child(2n-1){border-right:1px solid rgba(255,255,255,.1)}
  .infobar-items .it:nth-child(2n){border-right:0}
  .infobar-items .it{border-bottom:1px solid rgba(255,255,255,.1)}
  .infobar-items .it:nth-last-child(-n+2){border-bottom:0}
}
/* スマホ表示：INFO BAR のテキストを全て +2px */
@media(max-width:560px){
  .infobar-label{font-size:14px}
  .infobar-items .it .k{font-size:12.5px}
  .infobar-items .it .v{font-size:calc(clamp(1.25rem,2vw,1.55rem) + 2px)}
}

/* =========================================================
   CARDS GRID (parts21/37-style)
   ========================================================= */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(1rem,2.4vw,1.8rem)}
.card{background:var(--paper);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card);display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s}
.sec--cream .card{background:var(--paper)}
/* 静的な情報カード：リンクではないため hover の浮き上がりは付けない */
.card-thumb{position:relative;aspect-ratio:3/2;overflow:hidden}
.card-thumb .photo{position:absolute;inset:0}
.card-thumb::before{content:'';position:absolute;top:0;left:-75%;z-index:3;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35));transform:skewX(-22deg);transition:none}
@keyframes shine{100%{left:130%}}
.card-body{padding:1.5rem 1.4rem 1.7rem;display:flex;flex-direction:column;gap:.9rem;align-items:flex-start;flex:1}
.card-no{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-dim)}
.card-ttl{font-family:var(--serif);font-weight:700;font-size:1.2rem;line-height:1.5;color:var(--ink)}
.card-txt{font-size:.92rem;color:var(--ink-soft);line-height:1.85}
.card-pill{margin-top:auto;background:var(--red);color:#fff;font-weight:700;font-size:.9rem;padding:.55rem 1.3rem;border-radius:999px;align-self:stretch;text-align:center}
.card-view{margin-top:auto;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--red-deep);display:inline-flex;align-items:center;gap:.5rem;font-weight:700}
.card-view .arr{transition:transform .25s var(--ease)}

/* =========================================================
   STATS BAND (big red numbers on dark)
   ========================================================= */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(1.5rem,4vw,3rem)}
.stat{text-align:center;position:relative;padding:1rem .5rem}
.stat:not(:last-child)::after{content:'';position:absolute;right:calc(-1 * clamp(.75rem,2vw,1.5rem));top:20%;bottom:20%;width:1px;background:rgba(255,255,255,.14)}
.stat-k{font-family:var(--mono);font-size:16px;letter-spacing:.14em;color:rgba(255,255,255,.72);margin-bottom:.9rem}
.stat-v{font-family:var(--serif);font-weight:700;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.1;color:#fff;white-space:nowrap;display:flex;align-items:baseline;justify-content:center;gap:.04em;min-height:1.3em}
.stat-v .r{color:#ff2d49;font-size:.56em;font-weight:700}
.stat-u{font-size:11.5px;color:rgba(255,255,255,.6);margin-top:.7rem;letter-spacing:.03em}
@media(max-width:560px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:last-child{grid-column:1/-1}
  .stat:not(:last-child)::after{display:none}
}
/* タブレット：上段3・下段2（下段は中央寄せ） */
@media(min-width:561px) and (max-width:900px){
  .stats{grid-template-columns:repeat(6,1fr);row-gap:clamp(2rem,5vw,3rem)}
  .stat{grid-column:span 2}
  .stat:nth-child(4){grid-column:2/span 2}
  .stat:nth-child(5){grid-column:4/span 2}
  .stat:nth-child(3)::after{display:none}
}

/* =========================================================
   FIT LIST (numbered cards w/ red pill)
   ========================================================= */
.fitlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.fititem{background:var(--paper);border-radius:14px;box-shadow:var(--shadow-card);padding:1.8rem 1.6rem;display:flex;flex-direction:column;gap:1rem;border-top:4px solid var(--red);transition:transform .3s var(--ease)}
.fititem .no{font-family:var(--mono);font-size:1.5rem;font-weight:500;color:var(--red);line-height:1}
.fititem .tx{font-weight:700;font-size:1.02rem;line-height:1.6;color:var(--ink)}

/* ---- WHO FITS (向いています) — 墨線でつなぐ縦ステップ ----
   全項目を等幅の行に整列。左の赤い墨線（点線）が各基準点をつなぎ、
   リビールで上から「墨が打たれる」ように線が伸びる。クロスヘアは廃止。 */
.fitsteps{--rail:64px;position:relative;list-style:none;max-width:760px;margin:0 auto;padding:0;text-align:left}
/* 墨線（基準線）：左レール中央を縦に貫く点線 */
.fitsteps::before{content:'';position:absolute;left:calc(var(--rail) / 2);top:42px;bottom:42px;width:2px;
  background:repeating-linear-gradient(to bottom,var(--red) 0 6px,transparent 6px 12px);
  transform:scaleY(0);transform-origin:top}
.js-anim .fitsteps.in::before{transform:scaleY(1);transition:transform 1.2s var(--ease-expo) .14s}

.fitstep{position:relative;display:grid;grid-template-columns:var(--rail) 1fr;align-items:center;
  column-gap:1.4rem;padding:1.15rem 0}
/* 基準点ノード：番号入りの円（クロスヘアなし）。背景色で墨線をマスク */
.fitstep-no{grid-column:1;justify-self:center;position:relative;z-index:1;
  width:var(--rail);aspect-ratio:1;border-radius:50%;background:var(--cream);
  border:1.6px solid var(--red);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--red);
  font-feature-settings:"tnum";line-height:1;
  transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.fitstep-tx{font-weight:700;font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.7;color:var(--ink);text-wrap:pretty}
@media(max-width:560px){
  .fitsteps{--rail:50px}
  .fitsteps::before{top:34px;bottom:34px}
  .fitstep-no{font-size:1.05rem}
  .fitstep{column-gap:1.05rem;padding:.95rem 0}
}

/* ---- EXPLORE (詳しく見る : clearly clickable navigation cards) ---- */
/* ---- EXPLORE (dark technical index : 照準ロックオン) ---- */
.explore-sec{position:relative;isolation:isolate;overflow:hidden}
.explore-sec::before{content:'';position:absolute;inset:0;z-index:-1;
  background:url(https://cdn.cuezilla-cms.com/enjoyworks-test19.site/images/1411/bldg-corner.webp) center 20%/cover no-repeat;
  filter:grayscale(1) brightness(.42);opacity:.26}
.explore-sec::after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(95% 80% at 84% -12%,rgba(200,16,46,.2),transparent 60%),linear-gradient(180deg,rgba(12,10,9,.5),rgba(12,10,9,.1) 40%,rgba(12,10,9,.55))}
.explore-sec .sec-title .r{color:#ff2d49;text-decoration:none}
.explore-sec .sec-head .eyebrow{display:flex;justify-content:center}

.explore{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;max-width:1120px;margin:0 auto}
.exnode{position:relative;display:flex;flex-direction:column;gap:.95rem;text-align:left;padding:1.7rem 1.5rem 1.45rem;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.14);min-height:236px;overflow:hidden;transition:border-color .3s var(--ease),background .3s,transform .35s var(--ease)}
.exnode:hover,.exnode:focus-visible{border-color:var(--red);background:rgba(200,16,46,.07);transform:translateY(-6px)}
.exnode-top{display:flex;align-items:baseline;gap:.8rem}
.exnode-no{font-family:var(--mono);font-weight:500;font-size:1.95rem;line-height:1;color:#ff2d49;letter-spacing:.01em}
.exnode-k{font-family:var(--mono);font-size:16px;letter-spacing:.2em;color:rgba(255,255,255,.55)}
.exnode-t{font-family:var(--serif);font-weight:700;font-size:1.22rem;color:#fff;line-height:1.55}
.exnode-go{margin-top:auto;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.1em;color:#ff2d49;display:inline-flex;gap:.5rem;align-items:center;border-top:1px solid rgba(255,255,255,.13);padding-top:1rem;width:100%}
.exnode-go .arr{transition:transform .25s var(--ease)}
.exnode:hover .exnode-go .arr,.exnode:focus-visible .exnode-go .arr{transform:translateX(5px)}
/* targeting register brackets reveal on hover */
.exnode .reg-marks{inset:9px;opacity:0;transform:scale(1.05);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.exnode .reg-marks::before,.exnode .reg-marks::after{width:18px;height:18px;border-color:#ff2d49}
.exnode:hover .reg-marks,.exnode:focus-visible .reg-marks{opacity:1;transform:scale(1)}
@media(max-width:860px){.explore{grid-template-columns:repeat(2,1fr);gap:1rem}}
@media(max-width:480px){.explore{grid-template-columns:1fr;max-width:440px}.exnode{min-height:0}}


/* =========================================================
   TABLE
   ========================================================= */
.table{width:100%;border-collapse:collapse;background:var(--paper);box-shadow:var(--shadow-card);border-radius:12px;overflow:hidden}
.table th,.table td{padding:1.1rem 1.5rem;text-align:left;font-size:.97rem;line-height:1.8;border-bottom:1px solid var(--line);vertical-align:top}
.table tr:last-child th,.table tr:last-child td{border-bottom:0}
.table th{background:var(--cream);font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.05em;color:var(--ink-soft);width:230px}
.table td{color:var(--ink)}
.table .hl{color:var(--red);font-family:var(--serif);font-weight:700;font-size:1.15rem}
@media(max-width:600px){
  .table,.table tbody,.table tr,.table th,.table td{display:block;width:auto}
  .table th{width:auto;border-bottom:0;padding-bottom:.3rem}
  .table td{padding-top:.3rem}
  .table tr{border-bottom:1px solid var(--line)}.table tr:last-child{border-bottom:0}
}

/* =========================================================
   FLOW / TIMELINE
   ========================================================= */
.flow{display:grid;gap:0}
.flow-item{display:flex;gap:1.6rem;position:relative;padding-bottom:2.4rem}
.flow-item:last-child{padding-bottom:0}
.flow-item:not(:last-child)::after{content:'';position:absolute;left:25px;top:54px;bottom:6px;width:2px;background:var(--line)}
.flow-num{width:52px;height:52px;border-radius:50%;flex-shrink:0;background:var(--red);color:#fff;font-family:var(--mono);font-size:15px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.flow-body{padding-top:.5rem}
.flow-t{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--ink);margin-bottom:.4rem}
.flow-d{font-size:.95rem;color:var(--ink-soft);line-height:1.9}

/* =========================================================
   CAREER
   ========================================================= */
/* 昇格の道のり：墨線（基準線）でつなぐ縦ステップ。
   .fitsteps と同じ語彙＝点線の赤い墨線が上から打たれ、各基準点（serif番号）をつなぐ。
   レベル表記は朱印スタンプを廃し、静かな明朝の通し番号（01→05）で段階を示す。 */
.cpath{--rail:62px;position:relative;list-style:none;max-width:720px;margin:0 auto;padding:0;text-align:left}
/* 墨線：左レール中央を縦に貫く点線。リビールで上から伸びる */
.cpath::before{content:'';position:absolute;left:calc(var(--rail) / 2);top:46px;bottom:33px;width:2px;
  background:repeating-linear-gradient(to bottom,var(--red) 0 6px,transparent 6px 12px);
  transform:scaleY(0);transform-origin:top}
.js-anim .cpath.in::before{transform:scaleY(1);transition:transform 1.3s var(--ease-expo) .14s}

.cstep{position:relative;display:grid;grid-template-columns:var(--rail) 1fr;align-items:center;
  column-gap:1.6rem;padding:1.05rem 0}
/* 基準点ノード＝段階（レベル）。明朝の通し番号。背景色で墨線をマスク */
.cstep-no{grid-column:1;justify-self:center;position:relative;z-index:1;
  width:var(--rail);aspect-ratio:1;border-radius:50%;background:var(--cream);
  border:1.6px solid var(--red);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--red);
  font-feature-settings:"tnum";line-height:1;
  transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.cstep-body{min-width:0}
.cstep-when{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.05em;color:var(--red);margin-bottom:.4rem}
.cstep-desc{font-size:1.04rem;color:var(--ink-soft);line-height:1.8;text-wrap:pretty;margin:0}
.cstep-desc b{color:var(--ink);font-weight:700}
/* 到達点（現場リーダー）：節点を朱で塗り、道のりの主役に */
.cstep.is-peak .cstep-no{background:var(--red);color:#fff;border-color:var(--red);
  box-shadow:0 10px 24px -10px rgba(200,16,46,.6)}
.cstep.is-peak .cstep-when{font-weight:700}
.cstep.is-peak .cstep-desc{color:var(--ink)}
/* 終点：墨線が行き着く基準点＋締めの一文（明朝で静かに） */
.cstep--end{align-items:center}
.cstep-tip{grid-column:1;justify-self:center;position:relative;z-index:1;
  width:18px;height:18px;border-radius:50%;background:var(--cream);border:2px solid var(--red)}
.cstep-tip::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--red)}
.cstep-end-tx{grid-column:2;margin:0;font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:clamp(1.06rem,1.7vw,1.24rem);line-height:1.85;text-wrap:pretty}
.cstep-end-tx b{color:var(--red);font-weight:700}
@media(max-width:560px){
  .cpath{--rail:50px}
  .cpath::before{top:38px;bottom:38px}
  .cstep-no{font-size:1.05rem}
  .cstep{column-gap:1.1rem;padding:.9rem 0}
}

/* =========================================================
   BADGES / TAGS
   ========================================================= */
.tags{display:flex;flex-wrap:wrap;gap:.6rem}
.badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--red);color:#fff;font-size:12.5px;font-weight:700;padding:.5rem 1.1rem;border-radius:999px;letter-spacing:.03em}

/* =========================================================
   GROWTH ROADMAP（一人前までの道のり）— 横並びの成長ステップ
   ========================================================= */
.roadmap{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.6rem}
.roadmap--4{grid-template-columns:repeat(4,1fr)}
.roadmap--4::before{left:12.5%;right:12.5%}
.roadmap::before{content:'';position:absolute;left:16.66%;right:16.66%;top:34px;height:2px;z-index:0;
  background:repeating-linear-gradient(to right,var(--red) 0 7px,transparent 7px 14px);
  transform:scaleX(0);transform-origin:left}
.js-anim .roadmap.in::before{transform:scaleX(1);transition:transform 1.1s var(--ease-expo) .25s}
.rm-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.rm-no{width:68px;height:68px;border-radius:50%;background:var(--paper);border:2px solid var(--red);
  color:var(--red);font-family:var(--mono);font-weight:500;font-size:1.5rem;line-height:1;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease),background .3s,color .3s}
.rm-step--goal .rm-no{background:var(--red);color:#fff;box-shadow:0 12px 28px -10px rgba(200,16,46,.6)}
.rm-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem}
.rm-period{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--red-deep);font-weight:700}
.rm-title{font-family:var(--serif);font-weight:700;font-size:1.32rem;color:var(--ink);line-height:1.4;min-height:1.85em;display:flex;align-items:center}
.rm-step--goal .rm-title{color:var(--red)}
.rm-desc{font-size:.92rem;color:var(--ink-soft);line-height:1.85;text-wrap:pretty}
.sec--dark .rm-no{background:var(--black-3);border-color:var(--red)}
.sec--dark .rm-period{color:var(--red)}
.sec--dark .rm-title{color:#fff}
.sec--dark .rm-step--goal .rm-title{color:#ff2d49}
.sec--dark .rm-desc{color:rgba(255,255,255,.75)}
.rm-flag{display:inline-block;margin-top:.15rem;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  color:#fff;background:var(--red);padding:.28rem .65rem;border-radius:3px}
@media(max-width:680px){
  .roadmap{grid-template-columns:1fr;gap:0}
  .roadmap::before{left:33px;right:auto;top:10px;bottom:10px;width:2px;height:auto;
    background:repeating-linear-gradient(to bottom,var(--red) 0 7px,transparent 7px 14px);
    transform:scaleY(0);transform-origin:top}
  .js-anim .roadmap.in::before{transform:scaleY(1)}
  .rm-step{flex-direction:row;align-items:flex-start;gap:1.3rem;padding-bottom:2.2rem}
  .rm-step:last-child{padding-bottom:0}
  .rm-no{width:66px;height:66px;font-size:1.4rem}
  .rm-body{align-items:flex-start;text-align:left;padding-top:.4rem}
  .rm-title{min-height:0}
}

/* =========================================================
   QUALIFICATIONS（資格カード）— 読みやすい資格カード＋全面サポート訴求
   ========================================================= */
.quals{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:.5rem}
.qual{position:relative;display:flex;flex-direction:column;gap:.9rem;min-height:250px;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.5rem 1.6rem;
  box-shadow:var(--shadow-card);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.qual::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;background:var(--red)}
.qual-head{display:flex;align-items:center;gap:.55rem;margin-top:.4rem}
.qual-mark{width:12px;height:12px;background:var(--red);transform:rotate(45deg);flex-shrink:0}
.qual-kind{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--red-deep);font-weight:500}
.qual-name{font-family:var(--serif);font-weight:700;font-size:1.32rem;line-height:1.5;color:var(--ink)}
.qual-desc{font-size:.95rem;color:var(--ink-soft);line-height:1.9;text-wrap:pretty}
.qual-foot{margin-top:auto;align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  color:var(--red-deep);background:rgba(200,16,46,.08);border-radius:999px;padding:.42rem .9rem;
  display:inline-flex;align-items:center;gap:.4rem}
.qual-foot::before{content:'＋';font-weight:700;font-size:13px}
@media(max-width:680px){.quals{grid-template-columns:1fr}.qual{min-height:0}}
.qual-support{margin-top:1.4rem;display:flex;align-items:center;gap:1.3rem;
  background:var(--ink);color:#fff;border-radius:14px;padding:1.5rem 1.9rem;flex-wrap:wrap}
.qual-support .qs-label{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:#ff2d49;flex-shrink:0}
.qual-support p{font-size:1.05rem;line-height:1.8;color:rgba(255,255,255,.9);margin:0}
.qual-support strong{color:#fff}

/* =========================================================
   PAY（給与）— ヒーロー数字＋年収例カード
   ========================================================= */
.pay{display:grid;gap:1.2rem;margin-top:1.6rem}
.pay-hero{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(1.4rem,4vw,3rem);
  background:var(--ink);color:#fff;border-radius:18px;padding:clamp(1.9rem,4.5vw,3rem);overflow:hidden}
.pay-hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 120% at 88% 12%,rgba(200,16,46,.32),transparent 60%)}
.pay-hero .ph-main{position:relative;z-index:1}
.pay-hero .ph-label{font-family:var(--mono);font-size:13px;letter-spacing:.24em;color:#ff2d49;display:block;margin-bottom:.7rem}
.pay-hero .ph-num{font-family:var(--serif);font-weight:700;font-size:clamp(2.8rem,8vw,4.6rem);line-height:.95;letter-spacing:.01em}
.pay-hero .ph-num small{font-size:.42em;font-weight:500;letter-spacing:.04em;margin-left:.15em}
.pay-hero .ph-side{position:relative;z-index:1;border-left:1px solid rgba(255,255,255,.16);padding-left:clamp(1.4rem,4vw,3rem)}
.pay-hero .ph-side-k{font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:rgba(255,255,255,.55);display:block;margin-bottom:.5rem}
.pay-hero .ph-side-v{font-size:1.02rem;line-height:1.8;color:rgba(255,255,255,.92)}
.pay-hero .ph-side-v strong{color:#fff;font-weight:700}
@media(max-width:600px){.pay-hero{grid-template-columns:1fr}.pay-hero .ph-side{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding-left:0;padding-top:1.3rem;width:100%}}
.pay-ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.pay-ex{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:1.7rem 1.7rem 1.6rem;box-shadow:var(--shadow-card);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.pay-ex::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--red)}
.pay-ex .pe-k{font-family:var(--mono);font-size:13px;letter-spacing:.16em;color:var(--red-deep);font-weight:500;display:block;margin-bottom:.55rem}
.pay-ex .pe-v{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,5vw,2.7rem);line-height:1;color:var(--ink)}
.pay-ex .pe-v small{font-size:.4em;font-weight:500;color:var(--ink-soft);margin-left:.1em}
.pay-ex .pe-note{margin-top:.7rem;font-size:.88rem;color:var(--ink-soft);line-height:1.7}
@media(max-width:540px){.pay-ex-grid{grid-template-columns:1fr}}

/* =========================================================
   ENV CARDS（働き方の特徴）— ルールド・スペックシート型
   箱・影・角丸・ダイヤ型ビュレットを廃し、罫線と大きな輪郭数字で構成。
   サイトで多用される角丸シャドウカードと明確に差別化する。
   ========================================================= */
.envcards{display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1.5px solid var(--ink);margin-top:2.2rem}
.envcard{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:1.5rem;row-gap:.55rem;
  align-content:start;padding:2.1rem 1.7rem 2.2rem;border-bottom:1px solid var(--line);
  transition:background .3s var(--ease)}
.envcard:nth-child(odd){border-right:1px solid var(--line)}
.envcard:hover{background:rgba(200,16,46,.04)}
.envcard::before{content:attr(data-no);grid-column:1;grid-row:1 / span 3;align-self:start;
  font-family:var(--mono);font-weight:500;font-size:3.2rem;line-height:.82;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(200,16,46,.5);text-stroke:1.5px rgba(200,16,46,.5)}
.envcard .ec-k{grid-column:2;display:flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--red-deep);font-weight:500}
.envcard .ec-k::before{content:'';width:18px;height:1.5px;background:var(--red);flex-shrink:0}
.envcard .ec-v{grid-column:2;font-family:var(--serif);font-weight:700;
  font-size:clamp(1.4rem,3.2vw,1.8rem);line-height:1.4;color:var(--ink)}
.envcard .ec-v .r{color:var(--red)}
.envcard .ec-d{grid-column:2;font-size:.95rem;color:var(--ink-soft);line-height:1.9;text-wrap:pretty;margin-top:.2rem}
@media(max-width:600px){
  .envcards{grid-template-columns:1fr}
  .envcard:nth-child(odd){border-right:0}
}

/* =========================================================
   JOB CARDS（募集職種）
   ========================================================= */
.jobcards{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin-top:.5rem}
.jobcard{position:relative;display:flex;flex-direction:column;gap:1rem;
  background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:2rem 1.9rem;
  box-shadow:var(--shadow-card);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.jobcard::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;background:var(--red)}
.jobcard .jc-type{align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.16em;font-weight:700;
  color:#fff;background:var(--red);border-radius:999px;padding:.45rem 1.1rem}
.jobcard .jc-name{font-family:var(--serif);font-weight:700;font-size:1.5rem;line-height:1.5;color:var(--ink)}
.jobcard .jc-meta{margin-top:auto;display:grid;grid-template-columns:auto 1fr;gap:.55rem 1rem;align-items:baseline}
.jobcard .jc-row{display:contents}
.jobcard .jc-row .jr-k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--red-deep);white-space:nowrap}
.jobcard .jc-row .jr-v{font-size:.95rem;color:var(--ink-soft);line-height:1.7}
.jobcard .jc-row .jr-v strong{color:var(--ink);font-weight:700}
@media(max-width:600px){.jobcards{grid-template-columns:1fr}}

/* =========================================================
   REQ GRID（応募要件）— 「不問＝歓迎」を伝えるカード
   ========================================================= */
.reqlede{text-align:center;margin-top:-.6rem;margin-bottom:1.9rem;font-family:var(--serif);font-weight:700;
  font-size:clamp(1.2rem,3vw,1.6rem);line-height:1.7;color:var(--ink)}
.reqlede .r{color:var(--red)}
.reqgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.reqcard{display:flex;align-items:center;gap:1.1rem;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:1.4rem 1.6rem;box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease),border-color .3s}
.reqcard .rq-check{width:42px;height:42px;flex-shrink:0;border-radius:50%;background:rgba(200,16,46,.09);
  display:flex;align-items:center;justify-content:center;position:relative}
.reqcard .rq-check::after{content:'';width:14px;height:8px;border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);
  transform:rotate(-45deg) translate(1px,-2px)}
.reqcard .rq-body{display:flex;flex-direction:column;gap:.15rem}
.reqcard .rq-k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-dim)}
.reqcard .rq-v{font-family:var(--serif);font-weight:700;font-size:1.18rem;color:var(--ink)}
.reqcard .rq-v .r{color:var(--red)}
@media(max-width:540px){.reqgrid{grid-template-columns:1fr}}

/* =========================================================
   MESSAGE
   ========================================================= */
.msg-layout{display:grid;grid-template-columns:1fr;gap:1.6rem}
.msg-meta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-dim);border-left:2px solid var(--red);padding-left:1rem;margin-top:1.2rem;line-height:1.8}
@media(min-width:861px){.msg-layout{grid-template-columns:.8fr 1.2fr;gap:2.6rem;align-items:start}.msg-aside{position:sticky;top:100px}}
.msg{background:var(--paper);box-shadow:var(--shadow);padding:clamp(2rem,5vw,3.5rem);position:relative}
.msg .quote{font-family:var(--serif);font-weight:700;font-size:clamp(1.3rem,3vw,2rem);line-height:1.7;color:var(--ink);margin-bottom:1.8rem;position:relative}
.msg .quote .r{color:var(--red)}
.msg p{font-size:1rem;color:var(--ink-soft);line-height:2.15;margin-bottom:1.4rem;text-wrap:pretty}
.msg .sign{display:flex;align-items:baseline;justify-content:flex-end;gap:1rem;border-top:1px solid var(--line);padding-top:1.5rem;margin-top:.5rem}
.msg .sign .role{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-dim)}
.msg .sign .nm{font-family:var(--serif);font-size:1.4rem;font-weight:700;color:var(--ink);letter-spacing:.08em}

/* =========================================================
   FAQ (circled Q/A)
   ========================================================= */
.faq{display:grid;gap:1rem}
.faq-item{background:var(--paper);box-shadow:var(--shadow-card);border-radius:12px;overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:1rem;padding:1.5rem 1.7rem;font-family:var(--sans);font-weight:700;font-size:1.03rem;color:var(--ink);line-height:1.5}
.faq-q .qc{width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--serif);font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.05rem}
.faq-q .pm{margin-left:auto;width:16px;height:16px;position:relative;flex-shrink:0}
.faq-q .pm::before,.faq-q .pm::after{content:'';position:absolute;background:var(--red);transition:.3s var(--ease)}
.faq-q .pm::before{left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%)}
.faq-q .pm::after{top:50%;left:0;right:0;height:2px;transform:translateY(-50%)}
.faq-item.open .faq-q .pm::before{transform:translateX(-50%) scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a .inner{display:flex;gap:1rem;padding:0 1.7rem 1.6rem;color:var(--ink-soft);font-size:.97rem;line-height:1.95}
.faq-a .ac{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--serif);font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.05rem}

/* =========================================================
   ENTRY FORM
   ========================================================= */
.entry-box{background:var(--paper);box-shadow:var(--shadow);border-top:5px solid var(--red);padding:clamp(2rem,5vw,3.5rem);text-align:center;position:relative;overflow:hidden}
.entry-box::before,.entry-box::after{content:'';position:absolute;width:18px;height:18px;border:2px solid var(--red);opacity:.9}
.entry-box::before{top:14px;left:14px;border-right:0;border-bottom:0}
.entry-box::after{bottom:14px;right:14px;border-left:0;border-top:0}
.eb-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--red-deep);font-weight:500;display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.eb-kicker::before{content:'';width:24px;height:1.5px;background:var(--red)}
.entry-box .eb-t{font-family:var(--serif);font-weight:700;font-size:clamp(1.4rem,3vw,2rem);margin-bottom:.7rem;color:var(--ink)}
.entry-box .eb-p{color:var(--ink-soft);margin-bottom:1.8rem}
.entry-tel{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,5vw,3rem);color:var(--ink);line-height:1.1;letter-spacing:.03em}
.entry-tel a:hover{color:var(--red)}
.entry-tel .ic{color:var(--red);font-size:.7em;margin-right:.3em}
.entry-note{font-family:var(--mono);font-size:12px;color:var(--ink-dim);margin:.7rem 0 2rem;letter-spacing:.05em}
.form-grid{display:grid;gap:1.3rem;text-align:left;margin-top:.5rem}
.field label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:.55rem;letter-spacing:.03em}
.field label .req{color:var(--red);font-family:var(--mono);font-size:10px;margin-left:.5rem}
.field input,.field textarea,.field select{width:100%;background:var(--cream);border:1.5px solid var(--line);border-radius:8px;color:var(--ink);padding:.85rem 1rem;font-family:var(--sans);font-size:15px;transition:border-color .2s,background .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--red);background:#fff}
.field textarea{resize:vertical;min-height:120px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}
.form-note{font-size:12.5px;color:var(--ink-dim);font-family:var(--mono);letter-spacing:.03em;display:flex;gap:.5rem;line-height:1.7}
.form-note::before{content:'※';color:var(--red)}

/* =========================================================
   CTA BAND (red, diagonal)
   ========================================================= */
.cta{position:relative;color:#fff;text-align:center;padding-block:clamp(4.5rem,9vw,7.5rem);overflow:hidden;isolation:isolate;margin-top:calc(-3.5vw - 1px)}
.cta::before{content:'';position:absolute;inset:-2px 0;z-index:-1;clip-path:polygon(0 3.5vw,100% 0,100% 100%,0 100%);
  background:linear-gradient(100deg,rgba(190,10,42,.93),rgba(166,8,36,.9) 55%,rgba(128,6,30,.92)),url(https://cdn.cuezilla-cms.com/enjoyworks-test19.site/images/1411/works-helmet.webp) center 32%/cover no-repeat}
.cta::after{content:'';position:absolute;inset:0;z-index:-1;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 28px);pointer-events:none;clip-path:polygon(0 3.5vw,100% 0,100% 100%,0 100%)}
.cta .ck{font-family:var(--mono);font-size:13px;letter-spacing:.3em;margin-bottom:1.1rem;color:#fff}
.cta .ct{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,4.5vw,3rem);line-height:1.4;margin-bottom:2.2rem}
.cta .btn-row{justify-content:center}
.cta .btn-pill{background:#fff;color:var(--red);box-shadow:0 12px 26px -12px rgba(0,0,0,.5)}
.cta .btn-pill:hover{background:var(--black);color:#fff}

/* =========================================================
   MAP
   ========================================================= */
.map-frame{border-radius:12px;overflow:hidden;box-shadow:var(--shadow-card)}
.map-frame iframe{display:block;width:100%;height:380px;border:0}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--black);color:#fff}
.foot-top{display:grid;grid-template-columns:1.7fr 1fr 1.1fr;gap:3rem;padding:clamp(3rem,6vw,4.5rem) var(--gut)}
@media(max-width:820px){.foot-top{grid-template-columns:1fr;gap:2.4rem}}
.foot-brand .brand-name{color:#fff}.foot-brand .brand-sub{color:rgba(255,255,255,.78)}
.foot-brand p{color:rgba(255,255,255,.78);font-size:14px;line-height:1.9;margin-top:1.2rem;max-width:30em}
.foot-col h2{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.7);margin-bottom:1.2rem;font-weight:500}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:.1rem}
.foot-col a{font-size:14px;color:rgba(255,255,255,.82);transition:color .2s;display:inline-flex;gap:.6rem;align-items:center;min-height:44px}
.foot-col a:hover{color:#fff}
.foot-col a .fn{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.62)}
.foot-info{font-size:14px;color:rgba(255,255,255,.82);line-height:2}
.foot-info .ft-tel{font-family:var(--serif);font-weight:700;font-size:1.6rem;color:#fff;margin-bottom:.3rem;letter-spacing:.03em}
.foot-info .ft-tel a{font-size:inherit;font-family:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit;}
.foot-bot{border-top:1px solid rgba(255,255,255,.12);padding:1.5rem var(--gut);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot-bot span{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.62);letter-spacing:.06em}

/* =========================================================
   REVEAL / MOTION ENGINE v3 (mobile-first / safe)
   - refined easings (expo / quint) for a livelier feel
   - .reveal      : fade + rise block reveal
   - .ml          : masked line reveal (text wipes up from behind a clip)
   - .stagger     : children rise in sequence (--i index set by JS)
   final state is ALWAYS visible without JS / with reduced motion
   ========================================================= */
:root{
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-quint:cubic-bezier(.23,1,.32,1);
}

/* block reveal */
.reveal{transition:opacity .9s var(--ease-quint),transform .9s var(--ease-quint)}
.js-anim .reveal{opacity:0;transform:translateY(38px)}
.js-anim .reveal.in,.reveal.in{opacity:1;transform:none}

/* 文字フォーカス送り — トップのキャッチ／下層ページの大見出し共通。
   JSが対象を1文字=.ch（--ci:出現順）に分割し .cf を付与、.in で発火。 */
@media (prefers-reduced-motion: no-preference){
  .cf .ch{display:inline-block;opacity:0;filter:blur(16px);
    transform:translateY(.14em) scale(1.12);will-change:filter,transform,opacity}
  .cf.in .ch{animation:chFocus 1.15s var(--ease-quint) calc(var(--ci) * .10s) both}
}
@keyframes chFocus{
  0%  {opacity:0;filter:blur(16px);transform:translateY(.14em) scale(1.12)}
  55% {opacity:1}
  100%{opacity:1;filter:blur(0);transform:none}
}

/* ページヒーロー本文：見出し（文字フォーカス送り）の後に、パンくず→リード文を出す。
   hidden 初期状態を .js-anim でスタイルシートに持たせるため初回描画から非表示。
   遅延は site.js が --crumb-delay / --lead-delay（見出し文字数依存）で渡す。 */
@media (prefers-reduced-motion: no-preference){
  .js-anim .page-hero .crumb{opacity:0;animation:heroBodyRise .8s var(--ease-quint) var(--crumb-delay,.15s) both}
  .js-anim .page-hero-lead{opacity:0;animation:heroBodyRise .95s var(--ease-quint) var(--lead-delay,1.7s) both}
}
@keyframes heroBodyRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* masked line reveal — each line lives inside a clip; inner slides up */
.ml .ml-line{display:block;overflow:hidden}
.ml .ml-in{display:block;transform-origin:left bottom}
.js-anim .ml .ml-in{
  transform:translate3d(0,108%,0);
  transition:transform 1.05s var(--ease-expo);
  transition-delay:var(--d,0s);will-change:transform;
}
.js-anim .ml.in .ml-in{transform:translate3d(0,0,0)}

/* staggered group children */
.js-anim .stagger > *{
  opacity:0;transform:translateY(34px);
  transition:opacity .8s var(--ease-quint),transform .8s var(--ease-quint);
  transition-delay:calc(var(--i,0) * .09s);
}
.js-anim .stagger.in > *{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js-anim .reveal,.reveal{opacity:1;transform:none}
  .js-anim .ml .ml-in{transform:none}
  .js-anim .stagger > *{opacity:1;transform:none}
  .card:hover,.fititem:hover,.parts222_post_wrap:hover,.parts228_post_wrap:hover,.btn-pill:hover,.nav-cta:hover,.fitnode:hover,.exnode:hover,.exnode:focus-visible{transform:none}
  .card-thumb::before{display:none}
}

.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}.mb-2{margin-bottom:2rem}

/* =========================================================
   CMS DYNAMIC — BLOG (Cuezilla parts222 系)
   ※ 動的HTMLはCMSが parts222_* で出力。下記は見た目調整CSS（add.css相当）。
   ========================================================= */
.parts222_section{padding-block:clamp(3.5rem,7vw,6rem);background:var(--cream)}
.parts222_wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3.5rem)}
@media(min-width:921px){.parts222_wrap{grid-template-columns:1fr 300px;align-items:start}}
.parts222_post_list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.4vw,1.8rem);padding:0;margin:0}
@media(max-width:560px){.parts222_post_list{grid-template-columns:1fr}}
.parts222_post_wrap{background:var(--paper);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card);transition:transform .3s var(--ease),box-shadow .3s}
.parts222_post_wrap:hover{transform:translateY(-6px);box-shadow:0 24px 44px -22px rgba(0,0,0,.4)}
.parts222_post_wrap>a{display:flex;flex-direction:column;height:100%}
.parts222_post_img{aspect-ratio:3/2;overflow:hidden;position:relative}
.parts222_post_img img{width:100%;height:100%;object-fit:cover}
.parts222_post_status{display:flex;align-items:center;gap:.8rem;padding:1.2rem 1.3rem 0}
.parts222_post_date{font-family:var(--mono);font-size:12px;color:var(--ink-dim);letter-spacing:.04em}
.parts222_post_category{background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:.25rem .7rem;border-radius:999px}
.parts222_post_title-excerpt{padding:.7rem 1.3rem 1.5rem}
.parts222_post_title{font-family:var(--serif);font-weight:700;font-size:1.1rem;line-height:1.6;color:var(--ink)}
.parts222_post_excerpt{font-size:.9rem;color:var(--ink-soft);line-height:1.8;margin-top:.6rem}
.parts222_pagenation{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:2.6rem;flex-wrap:wrap}
.parts222_pagenation a,.parts222_pagenation .page-item{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;font-family:var(--mono);font-size:14px;color:var(--ink-soft);background:var(--paper);transition:.2s;padding:0 .6rem}
.parts222_pagenation a:hover{border-color:var(--red);color:var(--red)}
.parts222_pagenation .pagination_num.current{background:var(--red);color:#fff;border-color:var(--red)}
.parts222_sidebar{display:flex;flex-direction:column;gap:2rem}
/* 見出し＝帯状バー（左に細いアクセント） */
.parts222_sidebar_wrap h3{font-family:var(--sans);font-size:13px;letter-spacing:.1em;font-weight:700;color:#fff;background:var(--red);margin:0 0 .35rem;padding:.7rem .95rem;display:flex;align-items:center;gap:.55rem}
.parts222_sidebar_wrap h3::before{content:"";flex:0 0 auto;width:4px;height:.95em;background:rgba(255,255,255,.65)}
.parts222_sidebar_wrap ul{list-style:none;margin:0;padding:0}
.parts222_sidebar_wrap li{border-bottom:1px solid var(--line)}
.parts222_sidebar_wrap li a{display:flex;flex-direction:column;gap:.25rem;padding:.85rem .2rem;text-decoration:none;color:var(--ink)}
.parts222_sidebar_date{font-family:var(--mono);font-size:11px;color:var(--ink-dim)}
.parts222_sidebar_post_title{font-size:.92rem;color:var(--ink);line-height:1.6;font-weight:500;transition:color .2s}
.parts222_sidebar_wrap li a:hover .parts222_sidebar_post_title{color:var(--red)}
/* カテゴリ：1行・両端揃え（wrap に category_post_count） */
.parts222_sidebar_wrap.category_post_count li a{flex-direction:row;justify-content:space-between;align-items:center;transition:color .2s}
.parts222_sidebar_wrap.category_post_count li a:hover{color:var(--red)}
.parts222_sidebar_post_category{font-size:.92rem;color:inherit}
/* 件数＝小さな枠付きカウント */
.parts222_sidebar_post_category_count{flex:0 0 auto;font-family:var(--mono);font-size:11px;color:var(--ink-dim);border:1px solid var(--line);border-radius:4px;padding:.12rem .5rem;min-width:34px;text-align:center;line-height:1.55}

/* =========================================================
   CMS DYNAMIC — 施工実績 (Cuezilla parts228 系 / slug:/blog-ex/instance)
   ※ 動的HTMLはCMSが parts228_* / parts-blog-ex_* で出力。下記は見た目調整CSS（add.css相当）。
      一覧グリッド：PC3列 / タブレット2列 / スマホ1列。下はすぐフッター。
   ========================================================= */
.parts228_section{padding-top:0;padding-bottom:clamp(3.5rem,7vw,6rem);background:var(--cream)}
.parts228_wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.parts228_main{width:100%}
.parts228_post_list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.6vw,1.9rem);padding:0;margin:0}
@media(max-width:920px){.parts228_post_list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.parts228_post_list{grid-template-columns:1fr}}
.parts228_post_wrap{background:var(--paper);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card);transition:transform .3s var(--ease),box-shadow .3s}
.parts228_post_wrap:hover{transform:translateY(-6px);box-shadow:0 24px 44px -22px rgba(0,0,0,.4)}
.parts228_post_wrap>a{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.parts228_post_img{aspect-ratio:3/2;overflow:hidden;position:relative}
.parts228_post_img img{width:100%;height:100%;object-fit:cover}
.parts228_post_status{display:flex;align-items:center;gap:.8rem;padding:1.2rem 1.3rem 0;flex-wrap:wrap}
.parts228_post_date{font-family:var(--mono);font-size:12px;color:var(--ink-dim);letter-spacing:.04em}
.parts-blog-ex-tag_wrap{display:flex;flex-wrap:wrap;gap:.4rem;padding:.85rem 1.3rem 0}
.parts-blog-ex_tag{background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:.25rem .7rem;border-radius:999px;line-height:1.6;text-decoration:none}
a.parts-blog-ex_tag:hover{background:var(--red-deep)}
.parts228_post_title-excerpt{padding:.7rem 1.3rem 1.5rem}
.parts228_post_title{font-family:var(--serif);font-weight:700;font-size:1.1rem;line-height:1.6;color:var(--ink)}
.parts228_post_excerpt{font-size:.9rem;color:var(--ink-soft);line-height:1.8;margin-top:.6rem}
.parts228_pagenation{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:2.8rem;flex-wrap:wrap}
.parts228_pagenation a,.parts228_pagenation .page-item{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;font-family:var(--mono);font-size:14px;color:var(--ink);text-decoration:none;background:var(--paper);transition:border-color .2s,color .2s;padding:0 .7rem}
.parts228_pagenation a:hover{border-color:var(--red);color:var(--red)}
.parts228_pagenation .pagination_num.current{background:var(--red);color:#fff;border-color:var(--red)}

/* =========================================================
   CMS DYNAMIC — CONTACT FORM (Cuezilla parts210 / parts213 / parts216)
   ========================================================= */
.parts210_section_content{padding:clamp(3rem,6vw,5rem) 0 0;background:var(--paper)}
.parts210_content_wrap{max-width:920px;margin:0 auto;padding:0 var(--gut)}
.parts210_content{font-size:1rem;line-height:2.05;color:var(--ink-soft);text-align:center;text-wrap:pretty}
.parts213_section_form{background:var(--paper);padding:clamp(2.5rem,6vw,5rem) 0}
.parts213_form_wrap{max-width:920px;margin:0 auto;padding:0 var(--gut)}
.parts213_form_wrap form{background:transparent;border:0;padding:0;box-shadow:none}
.parts213_form_wrap dl{display:grid;grid-template-columns:200px 1fr;gap:1.1rem 1.6rem;align-items:start;padding:1.1rem 0}
.parts213_form_wrap dl:first-child{padding-top:0}
.parts213_form_wrap dt{font-weight:700;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:.6rem;padding-top:.7rem}
.parts213_form_wrap dt.form_text_dt{align-items:flex-start}
.parts213_form_wrap dt.form_text_dt>span:not(.required){flex:1 1 auto}
.parts213_form_wrap dt .required{background:var(--red);color:#fff;font-size:10px;font-family:var(--mono);padding:.2rem .55rem;border-radius:4px;letter-spacing:.05em;white-space:nowrap;flex:0 0 auto;margin-left:auto}
.parts213_form_wrap dd{margin:0}
.parts213_form_wrap input,.parts213_form_wrap textarea{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:.85rem 1rem;font-family:var(--sans);font-size:15px;color:var(--ink);transition:border-color .2s}
.parts213_form_wrap input:focus,.parts213_form_wrap textarea:focus{outline:none;border-color:var(--red)}
.parts213_form_wrap textarea{min-height:140px;resize:vertical}
.parts213_form_wrap .attention{display:block;font-size:12px;color:var(--red);font-family:var(--mono);margin-top:.4rem;line-height:1.7;font-weight:400}
.parts213_form_wrap .error{display:block;color:var(--red);font-size:12.5px;margin-top:.4rem}
.parts213_form_wrap .form_checkbox label{display:inline-flex;align-items:center;gap:.5rem;margin-right:1rem;font-size:15px;color:var(--ink);min-height:44px;padding:.3rem 0}
.parts213_form_wrap .form_checkbox input{width:auto;min-width:20px;min-height:20px}
.parts213_form_wrap .contact_submit{text-align:center;border-bottom:0;display:block;padding-top:1.8rem}
.parts213_form_wrap .contact_submit button,.parts213_form_wrap .contact_submit input[type=submit]{width:auto;display:inline-flex;align-items:center;gap:.6rem;background:var(--red);color:#fff;font-weight:700;font-size:15px;border:0;border-radius:999px;padding:1.1rem 3rem;cursor:pointer;transition:.25s}
.parts213_form_wrap .contact_submit button:hover{background:var(--red-bright);transform:translateY(-2px)}
@media(max-width:640px){
  .parts213_form_wrap dl{grid-template-columns:1fr;gap:.5rem;padding:1rem 0}
  .parts213_form_wrap dt{padding-top:0}
  .parts213_form_wrap dt .required{margin-left:.6rem}
}

/* =========================================================
   CMS DYNAMIC — RECRUIT APPLICATION FORM (Cuezilla parts219 系)
   採用応募フォーム（添付欄あり）。フラット表示。
   ========================================================= */
.parts219_section_form{background:var(--paper);padding:clamp(2.5rem,6vw,5rem) 0}
.parts219_form_wrap{max-width:920px;margin:0 auto;padding:0 var(--gut)}
.parts219_form_wrap form{background:transparent;border:0;padding:0;box-shadow:none}
.parts219_form_wrap dl{display:grid;grid-template-columns:230px 1fr;gap:1.1rem 1.6rem;align-items:start;padding:1.1rem 0}
.parts219_form_wrap dl:first-of-type{padding-top:0}
.parts219_form_wrap dt{font-weight:700;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:.6rem;padding-top:.7rem;flex-wrap:wrap}
.parts219_form_wrap dt.form_text_dt{align-items:flex-start}
.parts219_form_wrap dt .required{background:var(--red);color:#fff;font-size:10px;font-family:var(--mono);padding:.2rem .55rem;border-radius:4px;letter-spacing:.05em;white-space:nowrap;flex:0 0 auto;margin-left:auto}
.parts219_form_wrap dt .attention{flex-basis:100%;font-weight:400;font-size:12px;color:var(--red);font-family:var(--mono);line-height:1.7;margin-top:.3rem}
.parts219_form_wrap dd{margin:0}
.parts219_form_wrap input[type=text],.parts219_form_wrap input[type=email],.parts219_form_wrap input[type=tel],.parts219_form_wrap textarea{width:100%;background:var(--cream);border:1.5px solid var(--line);border-radius:8px;padding:.85rem 1rem;font-family:var(--sans);font-size:15px;color:var(--ink);transition:border-color .2s,background .2s}
.parts219_form_wrap input:focus,.parts219_form_wrap textarea:focus{outline:none;border-color:var(--red);background:#fff}
.parts219_form_wrap textarea{min-height:200px;resize:vertical}
.parts219_form_wrap input[type=file]{font-family:var(--sans);font-size:14px;color:var(--ink-soft)}
.parts219_form_wrap .error{display:block;color:var(--red);font-size:12.5px;margin-top:.4rem}
.parts219_form_wrap dl.form_address dd{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.parts219_form_wrap dl.form_address input.zip{flex:0 0 auto;width:auto;max-width:240px}
.parts219_form_wrap dl.form_address input[name=address]{flex:1 1 100%}
.parts219_form_wrap dl.form_address .error{flex:1 1 100%}
.parts219_form_wrap .contact_submit{text-align:center;display:block;padding-top:2rem}
.parts219_form_wrap .contact_submit button,.parts219_form_wrap .contact_submit input[type=submit]{display:inline-flex;align-items:center;gap:.6rem;background:var(--red);color:#fff;font-weight:700;font-size:15px;border:0;border-radius:999px;padding:1.15rem 3.4rem;cursor:pointer;transition:.25s}
.parts219_form_wrap .contact_submit button:hover{background:var(--red-bright);transform:translateY(-2px)}
@media(max-width:640px){
  .parts219_form_wrap dl{grid-template-columns:1fr;gap:.5rem;padding:1.1rem 0}
  .parts219_form_wrap dt{padding-top:0}
  .parts219_form_wrap dt .required{margin-left:.6rem}
}

/* =========================================================
   新着情報（Cuezilla design-parts-52 系・横帯型）
   ※ 別途 add-css/news_design-parts-52.add.css がCMS貼り付け用。
      ここはプレビュー描画用に同等スタイルをベイクしたもの。
   ========================================================= */
[class*="design-parts-52"]{
  background:#fff !important;border-bottom:1px solid var(--line) !important;
  width:100%;height:auto;font-family:var(--sans);
}
[class*="design-parts-52"] .container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);height:auto}
[class*="design-parts-52"] .content{display:flex;flex-direction:column;align-items:stretch;height:auto;gap:0}
[class*="design-parts-52"] .banner-area{
  background:var(--red) !important;color:#fff !important;font-family:var(--mono);font-weight:500;
  letter-spacing:.22em;font-size:16px;display:flex;align-items:center;justify-content:center;
  padding:.85rem 1.6rem;margin:0 calc(-1 * var(--gut));flex-shrink:0;height:auto;
}
[class*="design-parts-52"] ul{list-style:none;margin:0;padding:0;flex:1}
[class*="design-parts-52"] ul li{padding:0;margin:0;border-bottom:1px solid var(--line)}
[class*="design-parts-52"] ul li:last-child{border-bottom:0}
[class*="design-parts-52"] ul li a{display:block;padding:0;color:var(--ink);text-decoration:none}
[class*="design-parts-52"] .parts-52-textarea{display:flex;flex-direction:column;gap:.15rem;padding:.9rem 0;transition:background .2s var(--ease)}
[class*="design-parts-52"] ul li a:hover .parts-52-textarea{background:#faf7f2}
[class*="design-parts-52"] .parts-52-textarea .date{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--red);flex-shrink:0}
[class*="design-parts-52"] .parts-52-textarea .d-inline-block{font-size:.95rem;font-weight:500;line-height:1.7;color:var(--ink);transition:color .2s}
[class*="design-parts-52"] ul li a:hover .d-inline-block{color:var(--red)}
@media(min-width:992px){
  [class*="design-parts-52"] .content{flex-direction:row;align-items:stretch}
  [class*="design-parts-52"] .banner-area{padding:0 1.9rem;min-width:128px;margin:0}
  [class*="design-parts-52"] ul{display:flex;flex-direction:column;justify-content:center}
  [class*="design-parts-52"] ul li{flex:1;display:flex;align-items:center}
  [class*="design-parts-52"] ul li a{width:100%}
  [class*="design-parts-52"] .parts-52-textarea{flex-direction:row;align-items:center;gap:1.4rem;min-height:60px;padding:0 var(--gut)}
  [class*="design-parts-52"] .parts-52-textarea .d-inline-block{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* =========================================================
   BLOG（Cuezilla parts131415_blog 系・3列カードグリッド）
   ※ 別途 add-css/blog_parts131415.add.css がCMS貼り付け用。
      ここはプレビュー描画用に同等スタイルをベイクしたもの。
   ========================================================= */
section[class*="parts131415_blog"]{
  background:var(--cream) !important;background-image:none !important;
  padding-block:clamp(3.5rem,8vw,7rem);width:100%;font-family:var(--sans);
}
[class*="parts131415_blog"] .container-lg{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
[class*="parts131415_blog"] .parts131415_blog_title_wrap{text-align:center;margin-bottom:clamp(2rem,4vw,3rem)}
[class*="parts131415_blog"] .parts131415_blog_title_wrap h2{
  font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:.12em;
  color:var(--ink) !important;line-height:1.3;margin:0;display:inline-block;position:relative;padding-bottom:.6rem;
}
[class*="parts131415_blog"] .parts131415_blog_title_wrap h2::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:46px;height:3px;background:var(--red)}
[class*="parts131415_blog"] .parts131415_blog_title_wrap p{font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--ink-dim);margin:.9rem 0 0}
[class*="parts131415_blog"] .row{display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,2.5vw,1.8rem);margin:0;padding:0;list-style:none}
@media(min-width:576px){[class*="parts131415_blog"] .row{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){[class*="parts131415_blog"] .row{grid-template-columns:repeat(3,1fr)}}
[class*="parts131415_blog"] .col{min-width:0}
[class*="parts131415_blog"] .card{
  background:#fff !important;border:0 !important;border-radius:0 !important;height:100%;
  box-shadow:var(--shadow-card);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s;
}
[class*="parts131415_blog"] .card:hover{transform:translateY(-6px);box-shadow:0 24px 46px -22px rgba(0,0,0,.42)}
[class*="parts131415_blog"] .card-body{display:flex;flex-direction:column;padding:0;height:100%}
[class*="parts131415_blog"] .card-title{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red-deep);text-align:center;margin:0;padding:1.3rem 1.3rem .9rem;
}
[class*="parts131415_blog"] .card-body > a{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
[class*="parts131415_blog"] .card-text{
  box-sizing:content-box;font-family:var(--serif);font-weight:700;font-size:1.02rem;line-height:1.55;
  color:var(--ink);text-align:center;margin:0;padding:0 1.3rem 1.2rem;height:55px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:color .2s;
}
[class*="parts131415_blog"] .card-body > a:hover .card-text{color:var(--red)}
[class*="parts131415_blog"] .parts131415_blog_thumbnail{
  margin-top:auto;width:100%;height:205px;position:relative;overflow:hidden;background:var(--cream-2);
  background-image:repeating-linear-gradient(135deg,rgba(22,17,15,.05) 0 10px,transparent 10px 20px);
}
@media(min-width:576px){[class*="parts131415_blog"] .parts131415_blog_thumbnail{height:215px}}
@media(min-width:992px){[class*="parts131415_blog"] .parts131415_blog_thumbnail{height:240px}}
[class*="parts131415_blog"] .parts131415_blog_thumbnail::after{
  content:'PHOTO';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--ink-dim);
}
[class*="parts131415_blog"] .parts131415_blog_thumbnail img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}
[class*="parts131415_blog"] .parts131415_blog_thumbnail img:not([src]),
[class*="parts131415_blog"] .parts131415_blog_thumbnail img[src=""]{opacity:0}
@media(prefers-reduced-motion:reduce){
  [class*="parts131415_blog"] .card,[class*="parts131415_blog"] .card:hover{transition:none;transform:none}
}

/* __PC_FONT_BUMP__ start (PC表示時 font-size<=13px を +2px) */
@media(min-width:901px){
  .brand-sub{font-size:12px}
  .nav-links a{font-size:14.5px}
  .nav-cta{font-size:14.5px}
  .btn-view{font-size:15px}
  .eyebrow{font-size:15px}
  .photo .ph-k{font-size:13px}
  .photo .ph-note{font-size:14.5px}
  .photo .ph-tag{font-size:12.5px}
  .hero-label{font-size:15px}
  .hero-tag{font-size:13px}
  .hero-scroll{font-size:13px}
  .crumb{font-size:14px}
  .infobar-label{font-size:14px}
  .infobar-items .it .k{font-size:12.5px}
  .card-no{font-size:13px}
  .card-view{font-size:14px}
  .stat-k{font-size:16px}
  .stat-u{font-size:13.5px}
  .exnode-k{font-size:16px}
  .exnode-go{font-size:14px}
  .table th{font-size:14.5px}
  .cstep-when{font-size:14.5px}
  .badge{font-size:14.5px}
  .rm-period{font-size:14px}
  .rm-flag{font-size:12px}
  .qual-kind{font-size:12.5px}
  .qual-foot{font-size:13px}
  .qual-foot::before{font-size:15px}
  .qual-support .qs-label{font-size:13px}
  .pay-hero .ph-label{font-size:15px}
  .pay-hero .ph-side-k{font-size:15px}
  .pay-ex .pe-k{font-size:15px}
  .envcard .ec-k{font-size:12.5px}
  .jobcard .jc-type{font-size:13px}
  .jobcard .jc-row .jr-k{font-size:13px}
  .reqcard .rq-k{font-size:13px}
  .msg-meta{font-size:14px}
  .msg .sign .role{font-size:13px}
  .entry-note{font-size:14px}
  .field label{font-size:15px}
  .field label .req{font-size:12px}
  .form-note{font-size:14.5px}
  .cta .ck{font-size:15px}
  .foot-col h2{font-size:13px}
  .foot-col a .fn{font-size:13px}
  .foot-bot span{font-size:13px}
  .parts222_post_date{font-size:14px}
  .parts222_post_category{font-size:13px}
  .parts222_sidebar_wrap h3{font-size:15px}
  .parts222_sidebar_date{font-size:13px}
  .parts222_sidebar_post_category_count{font-size:13px}
  .parts228_post_date{font-size:14px}
  .parts-blog-ex_tag{font-size:13px}
  .parts213_form_wrap dt .required{font-size:12px}
  .parts213_form_wrap .attention{font-size:14px}
  .parts213_form_wrap .error{font-size:14.5px}
  .parts219_form_wrap dt .required{font-size:12px}
  .parts219_form_wrap dt .attention{font-size:14px}
  .parts219_form_wrap .error{font-size:14.5px}
  [class*="design-parts-52"] .banner-area{font-size:18px}
  [class*="design-parts-52"] .parts-52-textarea .date{font-size:14px}
  [class*="parts131415_blog"] .parts131415_blog_title_wrap p{font-size:14px}
  [class*="parts131415_blog"] .card-title{font-size:13px}
  [class*="parts131415_blog"] .parts131415_blog_thumbnail::after{font-size:13px}
}
/* __PC_FONT_BUMP__ end */


/* =================================================================
   B. impact.css — TOPページ専用演出レイヤー
   ================================================================= */

/* =========================================================
   IMPACT LAYER — TOPページ専用の演出（基準線／クロスヘア／座標）
   読み込みは index.html のみ。すべて prefers-reduced-motion で
   最終状態にフォールバックする。
   ========================================================= */

/* ---- スクロール進捗ライン（精度＝赤い基準線） ---- */
.scan-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:300;background:var(--red);transform:scaleX(0);transform-origin:left;will-change:transform}

/* =========================================================
   HERO — 基準線レーザー＋クロスヘア＋座標＋大判ウォーターマーク
   ========================================================= */
.hero-inner{z-index:2}
.hero-tag,.hero-scroll{z-index:4}

/* ---- FV背景：実写真＋ケンバーンズ ----
   背景レイヤーに写真を敷き、ゆっくりズーム＆パン（ケンバーンズ）。
   明るい写真でも白文字が読めるよう、オーバーレイを強めに。赤いグローは呼吸する。 */
.hero-bg{background:#0c0a09 url(https://cdn.cuezilla-cms.com/enjoyworks-test19.site/images/1411/hero-fv.webp) center/cover no-repeat}
.hero-ov{background:
  radial-gradient(125% 100% at 50% 44%, rgba(8,6,6,.42), rgba(8,6,6,.8) 78%),
  linear-gradient(to bottom, rgba(8,6,6,.72), rgba(8,6,6,.58) 45%, rgba(8,6,6,.9))}
@media (prefers-reduced-motion: no-preference){
  .hero-bg{animation:heroKen 30s cubic-bezier(.45,.05,.55,.95) infinite alternate;will-change:transform}
  .hero-bg::after{animation:heroGlow 13s ease-in-out infinite alternate}
}
@keyframes heroKen{
  0%{transform:scale(1.04) translate3d(0,0,0)}
  100%{transform:scale(1.14) translate3d(-1.8%,-1.4%,0)}
}
@keyframes heroGlow{
  0%{opacity:.45;transform:translate3d(0,0,0) scale(1)}
  100%{opacity:.82;transform:translate3d(3%,2%,0) scale(1.06)}
}

/* 背景の巨大ウォーターマーク（墨出） */
.hero-watermark{position:absolute;z-index:0;top:50%;left:var(--hx,50%);transform:translate(-50%,-50%);
  font-family:var(--serif);font-weight:900;font-size:min(48vw,42rem);line-height:.78;letter-spacing:0;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.06);
  pointer-events:none;user-select:none;white-space:nowrap}

/* 基準線レイヤー */
.hero-guides{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-guides .guide{position:absolute;background:rgba(255,72,96,.92);
  box-shadow:0 0 4px rgba(255,45,73,.9),0 0 11px 1px rgba(255,45,73,.5),0 0 22px 2px rgba(255,45,73,.24)}
.hero-guides .guide::after{content:'';position:absolute;inset:0;background:inherit;filter:blur(3px);opacity:.7;pointer-events:none}
.hero-guides .guide-h{left:0;right:0;top:var(--cy,30%);height:1px;transform:scaleX(0);transform-origin:left;animation:gH 1.1s var(--ease-expo) .35s both}
.hero-guides .guide-v{top:0;bottom:84px;left:var(--cx,50%);width:1px;transform:scaleY(0);transform-origin:top;animation:gV 1.1s var(--ease-expo) 1.0s both}
@keyframes gH{from{transform:scaleX(0);opacity:.25}to{transform:scaleX(1);opacity:1}}
@keyframes gV{from{transform:scaleY(0);opacity:.25}to{transform:scaleY(1);opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .hero-guides .guide::after{animation:laserShimmer 3.2s ease-in-out 2.2s infinite}
}
@keyframes laserShimmer{0%,100%{opacity:.45}50%{opacity:.95}}
/* カーソル追従中は位置をなめらかに */
.hero.reticle-live .guide,.hero.reticle-live .hero-cross{transition:top .07s linear,left .07s linear}
.hero.reticle-live .hero-cross{transition:top .07s linear,left .07s linear,transform .07s linear}

/* 交点のクロスヘア（墨を出す点）— 縦横の線が交わってから目盛り→円の順に描かれる */
.hero-cross{position:absolute;top:var(--cy,30%);left:var(--cx,50%);width:26px;height:26px;
  transform:translate(-50%,-50%) scale(0);border:0;
  animation:crossPop .55s var(--ease-back,var(--ease)) 1.95s both;pointer-events:none}
.hero-cross::before,.hero-cross::after{content:'';position:absolute;background:rgba(255,90,110,.98);box-shadow:0 0 4px rgba(255,45,73,.95),0 0 10px 1px rgba(255,45,73,.55)}
.hero-cross::before{left:-11px;right:-11px;top:50%;height:1px;transform:translateY(-50%) scaleX(0);transform-origin:center;animation:tickH .5s var(--ease) 1.6s both}
.hero-cross::after{top:-11px;bottom:-11px;left:50%;width:1px;transform:translateX(-50%) scaleY(0);transform-origin:center;animation:tickV .5s var(--ease) 1.75s both}
@keyframes crossPop{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}
@keyframes tickH{to{transform:translateY(-50%) scaleX(1)}}
@keyframes tickV{to{transform:translateX(-50%) scaleY(1)}}

/* 座標ラベル（堺市の現場をイメージした技術的ディテール） */
.hero-coord{position:absolute;z-index:1;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  color:rgba(255,255,255,.55);pointer-events:none;display:flex;align-items:center;gap:.5rem;
  opacity:0;animation:coordIn .8s var(--ease) 1.9s forwards}
.hero-coord::before{content:'';width:14px;height:1px;background:rgba(255,45,73,.8)}
.hero-coord.tl{top:calc(var(--hy,30%) + 16px);left:var(--gut)}
.hero-coord.br{bottom:5.5rem;right:var(--gut)}
@keyframes coordIn{to{opacity:1}}

/* キャッチコピーの段階的エントランス — 1文字ずつ「ブラー→ピントが合う」演出。
   .hero-catch は impact.js で 1文字=.ch（--ci:出現順）に分割される。
   ブロックの平行移動・フェードは無効化し、モーションは各文字が担う。 */
.hero-inner .hero-label{transition-delay:.14s}
.hero-inner .hero-sub{transition-delay:1.5s}
.hero-inner .btn-row{transition-delay:1.72s}

.js-anim .hero-inner .hero-catch.reveal,
.js-anim .hero-inner .hero-catch.reveal.in{transform:none;opacity:1}

@media (prefers-reduced-motion: no-preference){
  .hero-catch.cf .ch{
    display:inline-block;
    opacity:0;
    filter:blur(16px);
    transform:translateY(.14em) scale(1.12);
    will-change:filter,transform,opacity;
  }
  .hero-catch.cf.in .ch{
    animation:chFocus 1.15s var(--ease-quint) calc(var(--ci) * .10s) both;
  }
}
@keyframes chFocus{
  0%  {opacity:0; filter:blur(16px); transform:translateY(.14em) scale(1.12)}
  55% {opacity:1}
  100%{opacity:1; filter:blur(0);    transform:none}
}

/* 実績見出し：ラックフォーカス（光学的なピント送り）。
   不透明度は親ブロック（.works-hero-inner.reveal）に任せ、ここでは blur+scale のみ。
   親の .in は確実に発火し、万一フィルタ遷移が固まっても「ぼけて見える」だけで
   消えない（＝安全な劣化）。終端は静的ルールで blur(0)。 */
.works-catch{transition:transform 2.4s var(--ease-expo),filter 2.4s var(--ease-quint)}
.js-anim .works-hero-inner.reveal .works-catch{filter:blur(18px);transform:translateY(.16em) scale(1.04)}
.js-anim .works-hero-inner.reveal.in .works-catch{filter:blur(0);transform:none}

/* スクロール表示を呼吸させる */
@media (prefers-reduced-motion: no-preference){
  .hero-scroll::after{animation:scrollPulse 1.8s var(--ease) infinite}
}
@keyframes scrollPulse{0%,100%{opacity:.35;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
.hero-scroll::after{transform-origin:top}

@media(max-width:640px){
  .hero-watermark{font-size:62vw}
}
/* タブレット以下では座標ラベルがキャッチに被るため非表示（装飾） */
@media(max-width:1024px){
  .hero-coord{display:none}
}

/* =========================================================
   セクション見出し — 下線ドロー＋オーバーサイズ感
   ========================================================= */
.sec-head .sec-title{display:block;position:relative;padding-bottom:.7rem}
.sec-head .sec-title::after{content:'';position:absolute;left:50%;bottom:0;width:72px;height:3px;
  background:var(--red);transform:translateX(-50%) scaleX(0);transform-origin:center;
  transition:transform .8s var(--ease) .15s}
.sec-head.in .sec-title::after{transform:translateX(-50%) scaleX(1)}
.sec--dark .sec-head .sec-title::after{background:#ff2d49}

/* eyebrow を少しだけ強く */
.eyebrow{font-weight:700}

/* =========================================================
   実績 — メインビジュアル級の特別レイアウト（index専用）
   ヒーローの映像言語（写真＋強オーバーレイ＋呼吸する赤グロー＋座標＋照準）を
   このセクションだけに展開。斜めクリップの帯シェルは踏襲し、中身を主役級に。
   ========================================================= */
.works-hero{position:relative;isolation:isolate;color:#fff;overflow:hidden;
  display:flex;align-items:center;min-height:min(86vh,820px);
  padding-block:clamp(5.5rem,12vw,9.5rem);margin-top:calc(-4.5vw - 1px);
  clip-path:polygon(0 4.5vw,100% 0,100% calc(100% - 4.5vw),0 100%)}
/* 背景：大型ビルのファサード（モノクロ）。斜めのラインがサイトの斜めクリップと呼応 */
.works-hero-bg{position:absolute;inset:-2px 0;z-index:-2;
  background:var(--black-2) url(https://cdn.cuezilla-cms.com/enjoyworks-test19.site/images/1411/works-facade.webp) center/cover no-repeat}
.works-hero-bg::after{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 100% at 80% 16%,rgba(200,16,46,.36),transparent 56%)}
.works-hero-ov{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(102deg,rgba(8,6,6,.94),rgba(8,6,6,.5) 60%,rgba(200,16,46,.16))}
@media (prefers-reduced-motion: no-preference){
  .works-hero-bg::after{animation:heroGlow 13s ease-in-out infinite alternate}
}

.works-hero-inner{position:relative;z-index:2;width:100%}
.works-kick{display:inline-flex;align-items:center;gap:.85rem;font-family:var(--mono);font-weight:700;
  font-size:12.5px;letter-spacing:.26em;color:#fff;margin-bottom:1.5rem}
.works-kick::before{content:'';width:32px;height:1.5px;background:#ff2d49}
.works-catch{font-family:var(--serif);font-weight:700;line-height:1.16;letter-spacing:.02em;
  font-size:clamp(2.5rem,6.4vw,5.1rem);text-shadow:0 4px 34px rgba(0,0,0,.5)}
.works-catch .line-chunk{display:block}
.works-catch .r{color:#ff2d49}
.works-lead{margin:1.7rem 0 0;font-size:clamp(1rem,1.7vw,1.18rem);line-height:2;max-width:46ch;
  color:rgba(255,255,255,.9);text-wrap:pretty}
.works-lead strong{color:#fff;font-weight:700}

/* 実績ジャンル：見出し級の太いタイポを赤い菱形セパレータで一列に */
.works-cats{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem;
  margin:2.4rem 0 0;padding:1.8rem 0 0;border-top:1px solid rgba(255,255,255,.16)}
.works-cats li{font-family:var(--serif);font-weight:700;font-size:clamp(1.15rem,2.3vw,1.75rem);
  color:#fff;line-height:1.2;display:flex;align-items:center;gap:1.5rem;white-space:nowrap}
.works-cats li:not(:last-child)::after{content:'';width:7px;height:7px;background:#ff2d49;
  transform:rotate(45deg);flex-shrink:0}

/* CTA：ヒーローと同じ角ブラケット付きボタン */
.works-cta{margin-top:2.5rem;position:relative;display:inline-flex;align-items:center;gap:.7rem;
  white-space:nowrap;font-weight:700;font-size:14px;letter-spacing:.06em;color:#fff;
  border:1.5px solid rgba(255,255,255,.42);padding:1.05rem 2rem;border-radius:2px;
  transition:background .25s var(--ease),color .25s var(--ease)}
.works-cta::before,.works-cta::after{content:'';position:absolute;width:11px;height:11px;
  border:2px solid #ff2d49;opacity:.9;transition:top .3s var(--ease),left .3s var(--ease),right .3s var(--ease),bottom .3s var(--ease)}
.works-cta::before{top:5px;left:5px;border-right:0;border-bottom:0}
.works-cta::after{bottom:5px;right:5px;border-left:0;border-top:0}
.works-cta:hover{background:rgba(255,255,255,.8);color:var(--ink)}
.works-cta:hover::before{top:2px;left:2px}
.works-cta:hover::after{bottom:2px;right:2px}
.works-cta .arr{transition:transform .25s var(--ease)}
.works-cta:hover .arr{transform:translateX(5px)}

/* 技術的ディテール（座標・照準ブラケット・撮影タグ） */
.works-coord{position:absolute;z-index:2;top:calc(4.5vw + 2.2rem);left:var(--gut);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.55);
  display:flex;align-items:center;gap:.5rem}
.works-coord::before{content:'';width:14px;height:1px;background:rgba(255,45,73,.85)}
.works-reg{position:absolute;z-index:2;top:calc(4.5vw + 1.4rem);right:var(--gut);
  inset:auto var(--gut) auto auto;width:118px;height:118px;opacity:.9}
.works-reg::before,.works-reg::after{width:26px;height:26px;border-color:#ff2d49}
.works-tag{position:absolute;z-index:2;bottom:calc(4.5vw + 1.4rem);right:var(--gut);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:#fff;
  background:rgba(0,0,0,.42);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.25);
  padding:.5rem .9rem;border-radius:999px;display:inline-flex;align-items:center;gap:.5rem}
.works-tag::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 2.2s infinite}

@media(max-width:860px){
  .works-coord,.works-reg{display:none}
  .works-hero{min-height:0}
}
@media(max-width:560px){
  .works-tag{display:none}
  .works-cats{grid-template-columns:1fr;margin-top:1.6rem}
  .works-cta{flex-wrap:wrap;gap:.5rem .9rem}
}

/* =========================================================
   こんな人に向いています — 適性ステータスHUD（ゲームのステータス画面風）
   測定機器のHUDとして表現：暗いターミナル風パネルに適性をステータス行で開示。
   「腕力＝不問」だけグレーアウトし“この職に腕力は要らない”を粋に伝える。
   ========================================================= */
/* 枠なし：クリーム地に項目を直接置く素直なリスト。
   箱・斜め・スキャンライン等のHUD装飾は外し、罫線と余白で構成する。 */
.apt-skew{max-width:880px;margin:0 auto}
.aptitude{position:relative}
.apt-inner{padding:0}
.apt-scan{display:none}

/* 小さなモノスペースの見出し（旧ヘッダーの名残を上品に残す） */
.apt-head{display:flex;align-items:center;gap:.7rem;padding-bottom:1.05rem;margin-bottom:.2rem;
  border-bottom:1px solid var(--line);font-family:var(--mono)}
.apt-head .dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 2.2s infinite}
.apt-head .t{font-size:12px;font-weight:500;letter-spacing:.24em;color:var(--ink)}
.apt-head .sub{margin-left:auto;font-size:10.5px;letter-spacing:.16em;color:var(--ink-dim);white-space:nowrap}

/* 適性行（5行＋不問1行） */
.apt-list{display:flex;flex-direction:column}
.apt-row{display:grid;grid-template-columns:auto 1fr minmax(140px,200px);align-items:center;gap:1.3rem;
  padding:1.4rem .2rem;border-bottom:1px solid var(--line);transition:background .2s var(--ease)}
.apt-row:last-child{border-bottom:0}
.apt-row:hover{background:rgba(22,17,15,.025)}
.apt-idx{font-family:var(--mono);font-size:1.4rem;font-weight:500;letter-spacing:.02em;
  color:rgba(22,17,15,.26);font-variant-numeric:tabular-nums;align-self:start;line-height:1.1}
.apt-main{min-width:0}
.apt-name{font-family:var(--serif);font-weight:700;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.2;color:var(--ink);
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.apt-name .en{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;color:var(--red)}
.apt-flag{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.14em;white-space:nowrap;
  color:var(--ink-dim);border:1px solid rgba(22,17,15,.25);padding:.16rem .45rem}
.apt-desc{font-size:.9rem;color:var(--ink-soft);line-height:1.7;margin-top:.4rem}
/* セグメントゲージ（軽い斜めの動きだけ残す） */
.apt-gauge{display:flex;gap:3px;justify-self:end;width:100%;max-width:200px}
.apt-gauge i{flex:1;height:12px;background:rgba(22,17,15,.08);transform:skewX(-11deg);border:1px solid rgba(22,17,15,.05)}
.apt-gauge i.on{background:var(--red);border-color:transparent}
/* 腕力＝不問：行全体をトーンダウン */
.apt-row.off .apt-name{color:var(--ink-dim)}
.apt-row.off .apt-name .en{color:rgba(22,17,15,.3)}
.apt-row.off .apt-desc{color:var(--ink-dim)}

/* PRESS START プロンプト */
.apt-start{margin-top:1.6rem;display:flex;align-items:center;gap:1rem;
  width:100%;padding:1.15rem 1.4rem;background:rgba(200,16,46,.06);
  border:1px solid var(--red);text-decoration:none;
  transition:background .25s var(--ease)}
.apt-start:hover{background:rgba(200,16,46,.12)}
.apt-start-cur{color:var(--red);font-size:1rem;line-height:1}
.apt-start-t{font-family:var(--mono);font-weight:500;font-size:1.05rem;letter-spacing:.22em;color:var(--ink);white-space:nowrap}
.apt-start-sub{margin-left:auto;font-family:var(--serif);font-weight:700;font-size:1rem;color:var(--ink);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .apt-start-cur{animation:aptBlink 1s steps(1) infinite}
  .apt-start:hover .apt-start-cur{animation:none;transform:translateX(3px);transition:transform .2s var(--ease)}
}
@keyframes aptBlink{0%,50%{opacity:1}51%,100%{opacity:0}}

@media (prefers-reduced-motion:no-preference){
  .js-anim .apt-gauge i.on{transform:skewX(-11deg) scaleX(0);transform-origin:left}
  .js-anim .aptitude.in .apt-gauge i.on{transform:skewX(-11deg) scaleX(1);transition:transform .5s var(--ease)}
  .js-anim .aptitude.in .apt-row:nth-child(1) .apt-gauge i.on{transition-delay:.05s}
  .js-anim .aptitude.in .apt-row:nth-child(2) .apt-gauge i.on{transition-delay:.15s}
  .js-anim .aptitude.in .apt-row:nth-child(3) .apt-gauge i.on{transition-delay:.25s}
  .js-anim .aptitude.in .apt-row:nth-child(4) .apt-gauge i.on{transition-delay:.35s}
}
@media(max-width:620px){
  .apt-row{grid-template-columns:auto 1fr;gap:.35rem .9rem}
  .apt-gauge{grid-column:2;justify-self:start;margin-top:.55rem;max-width:220px}
  .apt-start{flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}
  .apt-start-sub{margin-left:0;flex-basis:100%;font-size:.9rem;text-align:center}
}

/* =========================================================
   写真プレースホルダー — レジストレーション（照準）ブラケット
   ========================================================= */
.reg-marks{position:absolute;inset:14px;pointer-events:none;z-index:3}
.reg-marks::before,.reg-marks::after{content:'';position:absolute;width:24px;height:24px;border:2px solid var(--red)}
.reg-marks::before{top:0;left:0;border-right:0;border-bottom:0}
.reg-marks::after{bottom:0;right:0;border-left:0;border-top:0}
.photo.dark .reg-marks::before,.photo.dark .reg-marks::after{border-color:#ff2d49}

/* =========================================================
   数字で見る — カウントアップ
   ========================================================= */
.stat{position:relative}
.stat-v .num-count{font-variant-numeric:tabular-nums}

/* 数字セクション背景：図面と道具（モノクロ・ごく淡く。数字の可読性が最優先） */
.sec--stats{position:relative;isolation:isolate;overflow:hidden}
.sec--stats::before{content:'';position:absolute;inset:0;z-index:-1;
  background:url(https://cdn.cuezilla-cms.com/enjoyworks-test19.site/images/1411/plans-tools.webp) center/cover no-repeat;
  filter:grayscale(1) brightness(.55) contrast(1.05);opacity:.22}
.sec--stats::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,10,9,.55),rgba(12,10,9,.18) 45%,rgba(12,10,9,.6))}

/* =========================================================
   こんな人に向いています — 設計図テクスチャの背景
   セクション専用。中央を弱めのウォッシュで抜き、ふちに青図の質感を残す。
   ========================================================= */
/* クリーム地に、建築スケッチ（線画）を淡く敷く。
   墨線＝図面の世界観を足しつつ、暗いHUDパネルの主役は崩さない。 */
.sec--blueprint{position:relative;background:var(--cream);padding-block:clamp(4rem,8vw,7rem);overflow:hidden}
.sec--blueprint::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(https://cdn.cuezilla-cms.com/enjoyworks-test19.site/images/1411/sketch-house.webp) center 30%/cover no-repeat;
  mix-blend-mode:multiply;opacity:.16;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 55%,transparent 96%)}
.sec--blueprint .wrap{position:relative;z-index:1}
/* ノードは半透明白でテクスチャに馴染ませつつ墨線をマスク */
.sec--blueprint .fitstep-no{background:rgba(252,253,255,.94);box-shadow:0 2px 10px -4px rgba(40,60,90,.25)}

/* =========================================================
   方向性のあるリビール（演出ありの時のみ。最終状態は常に表示）
   ========================================================= */
@media (prefers-reduced-motion: no-preference){
  .js-anim .feature.reveal{opacity:0;transform:translateY(40px)}
  .js-anim .feature.reveal.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
}

/* =========================================================
   墨出しモーション — スクロールに連動して左端の基準線が
   少しずつ下に伸びるだけの、静かで邪魔にならない演出。
   写真の照準ロックオン（ブラケット）だけは控えめに残す。
   prefers-reduced-motion では一切動かさない（JS側で生成しない）。
   ========================================================= */
@media (prefers-reduced-motion: no-preference){
  /* 写真の照準ロックオン（レジスターブラケットが効いて締まる） */
  .feature .reg-marks{opacity:0;transform:scale(1.14);
    transition:opacity .5s var(--ease) .35s,transform .55s cubic-bezier(.16,1,.3,1) .35s}
  .js-anim .feature.in .reg-marks{opacity:1;transform:scale(1)}
}

/* 墨出し基準線（プラムライン）：スクロール量に応じて高さが伸びる縦線 */
.datum-line{position:fixed;top:0;left:clamp(12px,2.2vw,30px);width:1.5px;height:0;z-index:55;
  pointer-events:none;background:linear-gradient(rgba(200,16,46,.55),rgba(200,16,46,.12));
  transition:height .12s linear}
.datum-line::after{content:'';position:absolute;left:50%;bottom:0;width:7px;height:7px;border-radius:50%;
  background:var(--red);transform:translate(-50%,50%);box-shadow:0 0 10px 1px rgba(200,16,46,.5)}
@media(max-width:680px){.datum-line{display:none}}

/* ============ LOADING（墨出し）============ */
@keyframes loaderExit{0%,85%{transform:translateY(0);pointer-events:auto}100%{transform:translateY(-101%);pointer-events:none}}
.loader{position:fixed;inset:0;z-index:1000;background:var(--black-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.9rem;overflow:hidden;
  animation:loaderExit 3.5s var(--ease-expo) forwards;
  transition:transform .75s var(--ease-expo)}
.loader::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.15;
  background:#000 url(https://cdn.cuezilla-cms.com/enjoyworks-test19.site/images/1411/texture-concrete.webp) center/cover no-repeat}
.loader--done{transform:translateY(-101%)}
.loader-line{position:absolute;background:rgba(255,45,73,.55)}
.loader-line--h{left:0;right:0;top:50%;height:1px;transform:scaleX(0);transform-origin:left;animation:gH 1s var(--ease-expo) .1s forwards}
.loader-line--v{top:0;bottom:0;left:50%;width:1px;transform:scaleY(0);transform-origin:top;animation:gV 1s var(--ease-expo) .35s forwards}
.loader-point{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background:var(--red);
  transform:translate(-50%,-50%) scale(0);box-shadow:0 0 14px 2px rgba(200,16,46,.7);animation:crossPop .5s var(--ease) .95s both}
.loader-core{position:relative;z-index:1;text-align:center;opacity:0;animation:fadeUp .8s var(--ease) .55s both}
.loader-name{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(2.2rem,7vw,3.6rem);letter-spacing:.2em;color:#fff;text-indent:.2em}
.loader-name-sub{display:block;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.42em;color:rgba(255,255,255,.65);margin-top:.85rem;text-indent:.42em}
.loader-bar{position:relative;z-index:1;width:min(240px,62vw);height:2px;background:rgba(255,255,255,.14);overflow:hidden;opacity:0;animation:fadeUp .6s var(--ease) .8s both}
.loader-bar-fill{display:block;height:100%;width:0;background:var(--red);box-shadow:0 0 12px rgba(200,16,46,.8);transition:width .14s linear}
.loader-meta{position:relative;z-index:1;font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:rgba(255,255,255,.6);display:flex;gap:.9rem;opacity:0;animation:fadeUp .6s var(--ease) .9s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.loader{display:none}}

/* __PC_FONT_BUMP__ start (PC表示時 font-size<=13px を +2px) */
@media(min-width:901px){
  .hero-coord{font-size:13px}
  .works-kick{font-size:14.5px}
  .works-coord{font-size:13px}
  .works-tag{font-size:12.5px}
  .apt-head .t{font-size:14px}
  .apt-head .sub{font-size:12.5px}
  .apt-name .en{font-size:12px}
  .apt-flag{font-size:11px}
  .loader-name-sub{font-size:13px}
  .loader-meta{font-size:13px}
}
/* __PC_FONT_BUMP__ end */


/* =================================================================
   C. add-css — CMSパーツ別調整CSS（6ファイル結合・@import展開済み）
   ================================================================= */

/* ===== add-css: news_design-parts-52.add.css ===== */
/* === add.css 貼り付け ここから === */
/* 創墨社 — 新着情報（Cuezilla design-parts-52 系・横帯型）見た目調整CSS
   ・動的HTMLは作り直さない。CMSが出力する design-parts-52 / banner-area / parts-52-textarea を狙う。
   ・固有IDサフィックス（_Tl4Rlune7M 等）に依存しないよう [class*="design-parts-52"] で当てる。
   ・直値で焼き込まれた色（NEWSラベルの赤 #bf172e、背景 #dddddd）を当サイトの配色へ上書き。
   ・自己完結（フォント・色・変数はこのブロック内で定義）。theme/直値に勝つよう !important。
   ・モバイルファースト：base＝縦積み → min-width で横1行帯化。 */


[class*="design-parts-52"]{
  --n-red:#c8102e;
  --n-ink:#16110f;
  --n-ink-dim:#5e564e;
  --n-paper:#ffffff;
  --n-line:#e4ded5;
  --n-sans:'Noto Sans JP',system-ui,sans-serif;
  --n-mono:'Roboto Mono','SFMono-Regular',monospace;
  --n-maxw:1200px;
  --n-gut:clamp(1.25rem,4vw,3.5rem);
  --n-ease:cubic-bezier(.22,.61,.36,1);
  background:var(--n-paper) !important;          /* 元 .bg-color の #dddddd を上書き */
  border-bottom:1px solid var(--n-line) !important;
  font-family:var(--n-sans) !important;
  width:100% !important;
  height:auto !important;
}
[class*="design-parts-52"].bg-color{background:var(--n-paper) !important;}

[class*="design-parts-52"] .container{
  max-width:var(--n-maxw) !important;
  margin:0 auto !important;
  padding:0 var(--n-gut) !important;
  height:auto !important;
}
[class*="design-parts-52"] .content{
  display:flex !important;
  flex-direction:column !important;   /* mobile: ラベル → 一覧の縦積み */
  align-items:stretch !important;
  height:auto !important;
  gap:0 !important;
}

/* NEWS ラベル（元サイトの赤 #bf172e を当サイトの赤へ） */
[class*="design-parts-52"] .banner-area{
  background:var(--n-red) !important;
  color:#fff !important;
  font-family:var(--n-mono) !important;
  font-weight:500 !important;
  letter-spacing:.22em !important;
  font-size:13px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:.85rem 1.6rem !important;
  margin:0 calc(-1 * var(--n-gut)) !important;   /* 縦積み時：.container の余白を打ち消し、上の全幅帯と揃えてフルブリード */
  flex-shrink:0 !important;
  height:auto !important;
}

[class*="design-parts-52"] ul{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  flex:1 !important;
}
[class*="design-parts-52"] ul li{
  padding:0 !important;
  margin:0 !important;
  border-bottom:1px solid var(--n-line) !important;
}
[class*="design-parts-52"] ul li:last-child{border-bottom:0 !important;}
[class*="design-parts-52"] ul li a{
  display:block !important;
  padding:0 !important;
  color:var(--n-ink) !important;
  text-decoration:none !important;
}
[class*="design-parts-52"] .parts-52-textarea{
  display:flex !important;
  flex-direction:column !important;   /* mobile: 日付の下にタイトル */
  gap:.15rem !important;
  padding:.9rem 0 !important;          /* 縦積み時：横paddingは .container の --n-gut に任せ、二重インデントを防ぐ */
  transition:background .2s var(--n-ease) !important;
}
[class*="design-parts-52"] ul li a:hover .parts-52-textarea{background:#faf7f2 !important;}
[class*="design-parts-52"] .parts-52-textarea .date{
  font-family:var(--n-mono) !important;
  font-size:12px !important;
  letter-spacing:.04em !important;
  color:var(--n-red) !important;
  flex-shrink:0 !important;
}
[class*="design-parts-52"] .parts-52-textarea .d-inline-block{
  font-size:.95rem !important;
  font-weight:500 !important;
  line-height:1.7 !important;
  color:var(--n-ink) !important;
  transition:color .2s !important;
}
[class*="design-parts-52"] ul li a:hover .d-inline-block{color:var(--n-red) !important;}

/* PC（≥992px）：横1行の細い帯（左にNEWSラベル、その右に 日付 → タイトル の横並び）。
   タブレット・SP（≤991px）は上の base 規定どおり縦積みに折り返す。 */
@media(min-width:992px){
  [class*="design-parts-52"] .content{flex-direction:row !important;align-items:stretch !important;}
  [class*="design-parts-52"] .banner-area{padding:0 1.9rem !important;min-width:128px !important;margin:0 !important;}
  [class*="design-parts-52"] ul{display:flex !important;flex-direction:column !important;justify-content:center !important;}
  [class*="design-parts-52"] ul li{flex:1 !important;display:flex !important;align-items:center !important;}
  [class*="design-parts-52"] ul li a{width:100% !important;}
  [class*="design-parts-52"] .parts-52-textarea{
    flex-direction:row !important;
    align-items:center !important;
    gap:1.4rem !important;
    min-height:60px !important;          /* 実パーツの1行帯高さ */
    padding:0 var(--n-gut) !important;   /* 横帯時のみ：NEWSラベル右の余白として復活 */
  }
  [class*="design-parts-52"] .parts-52-textarea .d-inline-block{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}
/* === add.css 貼り付け ここまで === */


/* ===== add-css: blog_parts131415.add.css ===== */
/* === add.css 貼り付け ここから === */
/* 創墨社 — BLOG（Cuezilla parts131415_blog 系・3列カードグリッド）見た目調整CSS
   ・動的HTMLは作り直さない。CMSが出力する parts131415_blog_* / card 系を狙う。
   ・固有IDサフィックス（_VIxwTdhjn5 等）に依存しないよう [class*="parts131415_blog"] で当てる。
   ・直値で焼き込まれた色（見出し h2 の #ffffff、bg-img の元背景画像URL）を当サイトの配色へ上書き。
   ・自己完結（フォント・色・変数はこのブロック内で定義）。theme/直値に勝つよう !important。
   ・Bootstrapグリッド前提を再現（row-cols-lg-3=PC3列／row-cols-sm-2=タブ2列／row-cols-1=SP1列）。 */


[class*="parts131415_blog"]{
  --b-red:#c8102e;
  --b-red-deep:#a00d22;
  --b-ink:#16110f;
  --b-ink-soft:#403a37;
  --b-ink-dim:#5e564e;
  --b-paper:#ffffff;
  --b-cream:#f4f1ec;
  --b-cream-2:#ebe6df;
  --b-line:#e4ded5;
  --b-serif:'Noto Serif JP',serif;
  --b-sans:'Noto Sans JP',system-ui,sans-serif;
  --b-mono:'Roboto Mono','SFMono-Regular',monospace;
  --b-maxw:1200px;
  --b-gut:clamp(1.25rem,4vw,3.5rem);
  --b-ease:cubic-bezier(.22,.61,.36,1);
  --b-shadow:0 14px 34px -18px rgba(0,0,0,.28);
}
/* セクション本体のみ（内側の _thumbnail / _title_wrap には当てない） */
section[class*="parts131415_blog"]{
  background:var(--b-cream) !important;          /* 元 bg-img の背景画像を上書き */
  background-image:none !important;
  padding-block:clamp(3.5rem,8vw,7rem) !important;
  font-family:var(--b-sans) !important;
  width:100% !important;
}

[class*="parts131415_blog"] .container-lg{
  max-width:var(--b-maxw) !important;
  margin:0 auto !important;
  padding:0 var(--b-gut) !important;
}

/* 見出し（元サイトの白 #ffffff を当サイトのトンマナへ） */
[class*="parts131415_blog"] .parts131415_blog_title_wrap{
  text-align:center !important;
  margin-bottom:clamp(2rem,4vw,3rem) !important;
}
[class*="parts131415_blog"] .parts131415_blog_title_wrap h2{
  font-family:var(--b-serif) !important;
  font-weight:700 !important;
  font-size:clamp(1.9rem,4vw,2.8rem) !important;
  letter-spacing:.12em !important;
  color:var(--b-ink) !important;
  line-height:1.3 !important;
  margin:0 !important;
  display:inline-block !important;
  position:relative !important;
  padding-bottom:.6rem !important;
}
[class*="parts131415_blog"] .parts131415_blog_title_wrap h2::after{
  content:'' !important;position:absolute !important;left:50% !important;bottom:0 !important;
  transform:translateX(-50%) !important;width:46px !important;height:3px !important;background:var(--b-red) !important;
}
[class*="parts131415_blog"] .parts131415_blog_title_wrap p{
  font-family:var(--b-mono) !important;font-size:12px !important;letter-spacing:.24em !important;
  color:var(--b-ink-dim) !important;margin:.9rem 0 0 !important;
}

/* グリッド（Bootstrap row-cols-* を再現：件数非依存） */
[class*="parts131415_blog"] .row{
  display:grid !important;
  grid-template-columns:1fr !important;      /* SP 1列 */
  gap:clamp(1.2rem,2.5vw,1.8rem) !important;
  margin:0 !important;padding:0 !important;list-style:none !important;
}
@media(min-width:576px){
  [class*="parts131415_blog"] .row{grid-template-columns:repeat(2,1fr) !important;}  /* タブ 2列 */
}
@media(min-width:992px){
  [class*="parts131415_blog"] .row{grid-template-columns:repeat(3,1fr) !important;}  /* PC 3列 */
}
[class*="parts131415_blog"] .col{max-width:none !important;width:100% !important;min-width:0 !important;}

/* カード（border-0 rounded-0 を尊重＝枠なし・角丸なしのシャープ） */
[class*="parts131415_blog"] .card{
  background:var(--b-paper) !important;
  border:0 !important;border-radius:0 !important;
  height:100% !important;
  box-shadow:var(--b-shadow) !important;
  overflow:hidden !important;
  transition:transform .3s var(--b-ease),box-shadow .3s !important;
}
[class*="parts131415_blog"] .card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 24px 46px -22px rgba(0,0,0,.42) !important;
}
[class*="parts131415_blog"] .card-body{
  display:flex !important;flex-direction:column !important;
  padding:0 !important;height:100% !important;
}

/* カテゴリ（h5.card-title・カード最上部） */
[class*="parts131415_blog"] .card-title{
  font-family:var(--b-mono) !important;
  font-size:11px !important;font-weight:500 !important;letter-spacing:.18em !important;
  text-transform:uppercase !important;
  color:var(--b-red-deep) !important;
  text-align:center !important;
  margin:0 !important;padding:1.3rem 1.3rem .9rem !important;
}

/* リンク（タイトル＋サムネイルを内包） */
[class*="parts131415_blog"] .card-body > a{
  display:flex !important;flex-direction:column !important;
  flex:1 !important;text-decoration:none !important;color:inherit !important;
}

/* 記事タイトル（高さ55pxで省略＝2行クランプ） */
[class*="parts131415_blog"] .card-text{
  box-sizing:content-box !important;
  font-family:var(--b-serif) !important;
  font-weight:700 !important;font-size:1.02rem !important;line-height:1.55 !important;
  color:var(--b-ink) !important;
  text-align:center !important;
  margin:0 !important;padding:0 1.3rem 1.2rem !important;
  height:55px !important;overflow:hidden !important;
  display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;
  transition:color .2s !important;
}
[class*="parts131415_blog"] .card-body > a:hover .card-text{color:var(--b-red) !important;}

/* サムネイル（最下部・PC240px / タブ215 / SP205） */
[class*="parts131415_blog"] .parts131415_blog_thumbnail{
  margin-top:auto !important;
  width:100% !important;height:205px !important;
  position:relative !important;overflow:hidden !important;
  background:var(--b-cream-2) !important;
  background-image:repeating-linear-gradient(135deg,rgba(22,17,15,.05) 0 10px,transparent 10px 20px) !important;
}
@media(min-width:576px){[class*="parts131415_blog"] .parts131415_blog_thumbnail{height:215px !important;}}
@media(min-width:992px){[class*="parts131415_blog"] .parts131415_blog_thumbnail{height:240px !important;}}
[class*="parts131415_blog"] .parts131415_blog_thumbnail::after{
  content:'PHOTO' !important;position:absolute !important;inset:0 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  font-family:var(--b-mono) !important;font-size:11px !important;letter-spacing:.3em !important;
  color:var(--b-ink-dim) !important;
}
[class*="parts131415_blog"] .parts131415_blog_thumbnail img{
  width:100% !important;height:100% !important;object-fit:cover !important;
  display:block !important;position:relative !important;z-index:1 !important;
}
/* プレビューのダミー（src未指定）は枠だけ見せる。CMSの実画像は通常表示 */
[class*="parts131415_blog"] .parts131415_blog_thumbnail img:not([src]),
[class*="parts131415_blog"] .parts131415_blog_thumbnail img[src=""]{opacity:0 !important;}

@media(prefers-reduced-motion:reduce){
  [class*="parts131415_blog"] .card,
  [class*="parts131415_blog"] .card:hover{transition:none !important;transform:none !important;}
}
/* === add.css 貼り付け ここまで === */


/* ===== add-css: blog_parts222.add.css ===== */
/* === add.css 貼り付け ここから === */
/* 創墨社 — ブログ一覧＋サイドバー（Cuezilla parts222 系）見た目調整CSS
   ・動的HTMLは作り直さない。CMSが出力する parts222_* / pagination_* / category_post_count を狙う。
   ・自己完結（フォント・色・変数はこのブロック内で定義）。theme に勝つよう必要箇所に !important。
   ・モバイルファースト：base＝1カラム → min-width で多カラム化。 */


:root{
  --sb-red:#c8102e;
  --sb-red-deep:#a00d22;
  --sb-ink:#16110f;
  --sb-ink-soft:#403a37;
  --sb-ink-dim:#5e564e;
  --sb-paper:#ffffff;
  --sb-cream:#f4f1ec;
  --sb-cream-2:#ebe6df;
  --sb-line:#e4ded5;
  --sb-serif:'Noto Serif JP',serif;
  --sb-sans:'Noto Sans JP',system-ui,sans-serif;
  --sb-mono:'Roboto Mono','SFMono-Regular',monospace;
  --sb-maxw:1200px;
  --sb-gut:clamp(1.25rem,4vw,3.5rem);
  --sb-ease:cubic-bezier(.22,.61,.36,1);
  --sb-shadow-card:0 14px 34px -18px rgba(0,0,0,.28);
}

/* ---- セクション全体 ---- */
.parts222_section{
  padding-top:clamp(1.5rem,3vw,2.5rem) !important;
  padding-bottom:clamp(3.5rem,7vw,6rem) !important;
  background:var(--sb-cream) !important;
}
.parts222_wrap{
  max-width:var(--sb-maxw) !important;
  margin:0 auto !important;
  padding:0 var(--sb-gut) !important;
  display:grid !important;
  grid-template-columns:1fr !important;       /* mobile: 1カラム */
  gap:clamp(2rem,5vw,3.5rem) !important;
}
@media(min-width:921px){
  .parts222_wrap{grid-template-columns:1fr 300px !important;align-items:start !important;}
}

/* ---- 記事一覧グリッド（件数非依存） ---- */
.parts222_post_list{
  list-style:none !important;
  display:grid !important;
  grid-template-columns:1fr !important;        /* mobile: 1カラム */
  gap:clamp(1rem,2.4vw,1.8rem) !important;
  padding:0 !important;
  margin:0 !important;
}
@media(min-width:561px){
  .parts222_post_list{grid-template-columns:repeat(2,1fr) !important;}
}

/* ---- 記事カード（繰り返し1単位） ---- */
.parts222_post_wrap{
  max-width:none !important;
  width:100% !important;
  height:100% !important;
  background:var(--sb-paper) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:var(--sb-shadow-card) !important;
  transition:transform .3s var(--sb-ease),box-shadow .3s !important;
}
.parts222_post_wrap:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 24px 44px -22px rgba(0,0,0,.4) !important;
}
.parts222_post_wrap > a{display:flex !important;flex-direction:column !important;height:100% !important;color:inherit !important;text-decoration:none !important;}

.parts222_post_img{aspect-ratio:3/2 !important;overflow:hidden !important;position:relative !important;background:var(--sb-cream-2);}
.parts222_post_img img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;}

.parts222_post_status{display:flex !important;align-items:center !important;gap:.8rem !important;padding:1.2rem 1.3rem 0 !important;flex-wrap:wrap;}
.parts222_post_date{font-family:var(--sb-mono) !important;font-size:12px !important;color:var(--sb-ink-dim) !important;letter-spacing:.04em !important;}
.parts222_post_category{
  background:var(--sb-red) !important;color:#fff !important;
  font-size:11px !important;font-weight:700 !important;
  padding:.25rem .7rem !important;border-radius:999px !important;line-height:1.6;
}

.parts222_post_title-excerpt{padding:.7rem 1.3rem 1.5rem !important;flex:1 !important;}
.parts222_post_title{font-family:var(--sb-serif) !important;font-weight:700 !important;font-size:1.1rem !important;line-height:1.6 !important;color:var(--sb-ink) !important;}
.parts222_post_excerpt{font-size:.9rem !important;color:var(--sb-ink-soft) !important;line-height:1.8 !important;margin-top:.6rem !important;}

/* ---- ページネーション ---- */
.parts222_pagenation{display:flex !important;justify-content:center !important;align-items:center !important;gap:.5rem !important;margin-top:2.6rem !important;flex-wrap:wrap !important;}
.parts222_pagenation a,
.parts222_pagenation .page-item{
  min-width:44px !important;height:44px !important;        /* タップ対象 44px 確保 */
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  border:1px solid var(--sb-line) !important;border-radius:8px !important;
  font-family:var(--sb-mono) !important;font-size:14px !important;color:var(--sb-ink) !important;
  text-decoration:none !important;background:var(--sb-paper) !important;transition:border-color .2s,color .2s !important;
}
.parts222_pagenation a:hover{border-color:var(--sb-red) !important;color:var(--sb-red) !important;}
.parts222_section>h2{display:none !important;}
.parts231_breadcrumb{display:none !important;}
.parts222_pagenation .pagination_num.current{background:var(--sb-red) !important;color:#fff !important;border-color:var(--sb-red) !important;}

/* ---- サイドバー（.parts222_sidebar ＞ .parts222_sidebar_wrap） ---- */
.parts222_sidebar{display:flex !important;flex-direction:column !important;gap:2rem !important;max-width:none !important;width:100% !important;min-width:0 !important;}
.parts222_sidebar_wrap h3{
  font-family:var(--sb-sans) !important;font-size:13px !important;letter-spacing:.1em !important;font-weight:700 !important;color:#fff !important;
  margin:0 0 .35rem !important;padding:.7rem .95rem !important;
  display:flex !important;align-items:center !important;gap:.55rem !important;
  background:var(--sb-red,#c8102e) !important;
  border-left:none !important;
}
.parts222_sidebar_wrap ul{list-style:none !important;margin:0 !important;padding:0 !important;}
.parts222_sidebar_wrap li{border-bottom:1px solid rgba(0,0,0,.1) !important;}
/* 最近の投稿（1件ごとの専用クラスは作らず li / li a に当てる） */
.parts222_sidebar_wrap li a{display:flex !important;flex-direction:column !important;gap:.25rem !important;padding:.85rem .2rem !important;text-decoration:none !important;color:inherit !important;}
.parts222_sidebar_date{font-family:var(--sb-mono) !important;font-size:11px !important;opacity:.62 !important;}
.parts222_sidebar_post_title{font-size:.92rem !important;color:inherit !important;line-height:1.6 !important;font-weight:500 !important;transition:opacity .2s !important;}
.parts222_sidebar_wrap li a:hover .parts222_sidebar_post_title{opacity:.6 !important;}
/* カテゴリ（wrap に category_post_count）：1行・両端揃え */
.parts222_sidebar_wrap.category_post_count li a{flex-direction:row !important;justify-content:space-between !important;align-items:center !important;gap:.6rem !important;transition:opacity .2s !important;}
.parts222_sidebar_wrap.category_post_count li a:hover{opacity:.6 !important;}
.parts222_sidebar_post_category{font-size:.92rem !important;color:inherit !important;}
/* 件数＝小さな枠付きカウント（枠も currentColor 由来） */
.parts222_sidebar_post_category_count{
  flex:0 0 auto !important;font-family:var(--sb-mono) !important;font-size:11px !important;opacity:.7 !important;
  border:1px solid color-mix(in srgb, currentColor 28%, transparent) !important;border-radius:4px !important;
  padding:.12rem .5rem !important;min-width:34px !important;text-align:center !important;line-height:1.55 !important;
}

/* 動きへの配慮（WCAG）：reduce-motion ではホバーの移動を止める */
@media(prefers-reduced-motion:reduce){
  .parts222_post_wrap,.parts222_post_wrap:hover{transition:none !important;transform:none !important;}
}
/* === add.css 貼り付け ここまで === */


/* ===== add-css: instance_parts228.add.css ===== */
/* === add.css 貼り付け ここから === */
/* 創墨社 — 施工実績 一覧～ページネーション（Cuezilla parts228 系）見た目調整CSS
   ・スラッグ固定：/blog-ex/instance
   ・動的HTMLは作り直さない。CMSが出力する parts228_* / parts-blog-ex_* / pagination_* を狙う。
   ・自己完結（フォント・色・変数はこのブロック内で定義）。theme に勝つよう必要箇所に !important。
   ・モバイルファースト：base＝1カラム → min-width で多カラム化。 */


:root{
  --sb-red:#c8102e;
  --sb-red-deep:#a00d22;
  --sb-ink:#16110f;
  --sb-ink-soft:#403a37;
  --sb-ink-dim:#5e564e;
  --sb-paper:#ffffff;
  --sb-cream:#f4f1ec;
  --sb-cream-2:#ebe6df;
  --sb-line:#e4ded5;
  --sb-serif:'Noto Serif JP',serif;
  --sb-sans:'Noto Sans JP',system-ui,sans-serif;
  --sb-mono:'Roboto Mono','SFMono-Regular',monospace;
  --sb-maxw:1200px;
  --sb-gut:clamp(1.25rem,4vw,3.5rem);
  --sb-ease:cubic-bezier(.22,.61,.36,1);
  --sb-shadow-card:0 14px 34px -18px rgba(0,0,0,.28);
}

/* ---- セクション全体 ---- */
.parts228_section{
  padding-top:clamp(1.5rem,3vw,2.5rem) !important;
  padding-bottom:clamp(3.5rem,7vw,6rem) !important;
  background:var(--sb-cream) !important;
}
.parts228_wrap{
  max-width:var(--sb-maxw) !important;
  margin:0 auto !important;
  padding:0 var(--sb-gut) !important;
}
.parts228_main{width:100% !important;}

/* ---- 一覧グリッド（件数非依存｜PC3列 / タブレット2列 / スマホ1列） ---- */
.parts228_post_list{
  list-style:none !important;
  display:grid !important;
  grid-template-columns:1fr !important;          /* mobile: 1列 */
  gap:clamp(1.1rem,2.6vw,1.9rem) !important;
  padding:0 !important;
  margin:0 !important;
}
@media(min-width:561px){
  .parts228_post_list{grid-template-columns:repeat(2,1fr) !important;}   /* tablet: 2列 */
}
@media(min-width:921px){
  .parts228_post_list{grid-template-columns:repeat(3,1fr) !important;}   /* PC: 3列 */
}

/* ---- 実績カード（繰り返し1単位） ---- */
.parts228_post_wrap{
  max-width:none !important;
  width:100% !important;
  height:100% !important;
  background:var(--sb-paper) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:var(--sb-shadow-card) !important;
  transition:transform .3s var(--sb-ease),box-shadow .3s !important;
}
.parts228_post_wrap:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 24px 44px -22px rgba(0,0,0,.4) !important;
}
.parts228_post_wrap > a{display:flex !important;flex-direction:column !important;height:100% !important;color:inherit !important;text-decoration:none !important;}

.parts228_post_img{aspect-ratio:3/2 !important;overflow:hidden !important;position:relative !important;background:var(--sb-cream-2);}
.parts228_post_img img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;}

/* 日付（.parts228_post_status 内） */
.parts228_post_status{display:flex !important;align-items:center !important;gap:.8rem !important;padding:1.2rem 1.3rem 0 !important;flex-wrap:wrap;}
.parts228_post_date{font-family:var(--sb-mono) !important;font-size:12px !important;color:var(--sb-ink-dim) !important;letter-spacing:.04em !important;}

/* タグ（.parts-blog-ex-tag_wrap ＞ .parts-blog-ex_tag｜複数可） */
.parts-blog-ex-tag_wrap{display:flex !important;flex-wrap:wrap !important;gap:.4rem !important;padding:.85rem 1.3rem 0 !important;}
.parts-blog-ex_tag{
  background:var(--sb-red) !important;color:#fff !important;
  font-size:11px !important;font-weight:700 !important;
  padding:.25rem .7rem !important;border-radius:999px !important;line-height:1.6 !important;
  text-decoration:none !important;
}
a.parts-blog-ex_tag:hover{background:var(--sb-red-deep) !important;}

/* タイトル・抜粋 */
.parts228_post_title-excerpt{padding:.7rem 1.3rem 1.5rem !important;position:static !important;flex:1 !important;}
.parts228_post_title{font-family:var(--sb-serif) !important;font-weight:700 !important;font-size:1.1rem !important;line-height:1.6 !important;color:var(--sb-ink) !important;}
.parts228_post_excerpt{font-size:.9rem !important;color:var(--sb-ink-soft) !important;line-height:1.8 !important;margin-top:.6rem !important;}
/* テーマのposition:absolute上書き（テキスト要素が枠外に飛び出すのを防止） */
.parts228_post_status{position:static !important;}
.parts-blog-ex-tag_wrap{position:static !important;}
/* 画像リンクが parts228_post_img 内にある実構造に対応 */
.parts228_post_img > a{display:block !important;width:100% !important;height:100% !important;}

/* ---- ページネーション ---- */
.parts228_pagenation{display:flex !important;justify-content:center !important;align-items:center !important;gap:.5rem !important;margin-top:2.8rem !important;flex-wrap:wrap !important;}
.parts228_pagenation a,
.parts228_pagenation .page-item{
  min-width:44px !important;height:44px !important;        /* タップ対象 44px 確保 */
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  border:1px solid var(--sb-line) !important;border-radius:8px !important;
  font-family:var(--sb-mono) !important;font-size:14px !important;color:var(--sb-ink) !important;
  text-decoration:none !important;background:var(--sb-paper) !important;transition:border-color .2s,color .2s !important;
  padding:0 .7rem !important;
}
.parts228_pagenation a:hover{border-color:var(--sb-red) !important;color:var(--sb-red) !important;}
.parts228_pagenation .pagination_num.current{background:var(--sb-red) !important;color:#fff !important;border-color:var(--sb-red) !important;}

/* 動きへの配慮（WCAG）：reduce-motion ではホバーの移動を止める */
@media(prefers-reduced-motion:reduce){
  .parts228_post_wrap,.parts228_post_wrap:hover{transition:none !important;transform:none !important;}
}
/* === add.css 貼り付け ここまで === */


/* ===== add-css: inquiry_parts213.add.css ===== */
/* === add.css 貼り付け ここから === */
/* 創墨社 — お問い合わせフォーム（Cuezilla parts210 / parts213 系）見た目調整CSS
   ・動的HTML（form・hidden・reCAPTCHA・確認/完了画面）は CMS 生成。作り直さない。
   ・CMSが出力する .contact_section / parts210_* / parts213_* / dl・dt・dd・required・error 等を狙う。
   ・装飾枠を足さない「入力欄だけのフラット」指針。自己完結＋必要箇所に !important。
   ・モバイルファースト：base＝1カラム（ラベル上・入力下）→ min-width で2カラム化。 */


:root{
  --sb-red:#c8102e;
  --sb-red-bright:#e3132f;
  --sb-ink:#16110f;
  --sb-ink-soft:#403a37;
  --sb-ink-dim:#5e564e;
  --sb-paper:#ffffff;
  --sb-cream:#f4f1ec;
  --sb-line:#e4ded5;
  --sb-serif:'Noto Serif JP',serif;
  --sb-sans:'Noto Sans JP',system-ui,sans-serif;
  --sb-mono:'Roboto Mono','SFMono-Regular',monospace;
  --sb-gut:clamp(1.25rem,4vw,3.5rem);
}

/* ---- 導入文（parts210系・フォーム上の静的パーツ） ---- */
.parts210_section_content{padding:clamp(3rem,6vw,5rem) 0 0 !important;background:var(--sb-paper) !important;}
.parts210_content_wrap{max-width:920px !important;margin:0 auto !important;padding:0 var(--sb-gut) !important;}
.parts210_content{font-family:var(--sb-sans) !important;font-size:1rem !important;line-height:2.05 !important;color:var(--sb-ink-soft) !important;text-align:center !important;text-wrap:pretty;}

/* ---- フォーム外枠（CMSは section.contact_section で括る。装飾は上書きで当てる） ---- */
.contact_section{background:var(--sb-paper) !important;}

/* ---- フォーム本体（parts213系・装飾枠なしのフラット） ---- */
.parts213_section_form{background:var(--sb-paper) !important;padding:clamp(2.5rem,6vw,5rem) 0 !important;}
.parts213_form_wrap{max-width:920px !important;margin:0 auto !important;padding:0 var(--sb-gut) !important;}
.parts213_form_wrap form{background:transparent !important;border:0 !important;padding:0 !important;box-shadow:none !important;}

/* 行：mobile＝ラベル上・入力下／PC＝2カラム。行ごとの薄い罫線のみ */
.parts213_form_wrap dl{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:.5rem !important;
  align-items:start !important;
  padding:1.1rem 0 !important;
  margin:0 !important;
}
@media(min-width:641px){
  .parts213_form_wrap dl{grid-template-columns:200px 1fr !important;gap:1.1rem 1.6rem !important;}
}
.parts213_form_wrap dl:first-of-type{padding-top:0 !important;}

.parts213_form_wrap dt{
  font-family:var(--sb-sans) !important;font-weight:700 !important;font-size:14px !important;color:var(--sb-ink) !important;
  display:flex !important;align-items:center !important;gap:.6rem !important;padding-top:0 !important;
}
@media(min-width:641px){.parts213_form_wrap dt{padding-top:.7rem !important;}}
.parts213_form_wrap dt.form_text_dt{align-items:flex-start !important;flex-wrap:wrap !important;}
.parts213_form_wrap dt.form_text_dt>span:not(.required){flex:1 1 auto !important;}

.parts213_form_wrap dt .required{
  background:var(--sb-red) !important;color:#fff !important;font-size:10px !important;font-family:var(--sb-mono) !important;
  padding:.2rem .55rem !important;border-radius:4px !important;letter-spacing:.05em !important;white-space:nowrap !important;flex:0 0 auto !important;
}
.parts213_form_wrap dd{margin:0 !important;}

.parts213_form_wrap input,
.parts213_form_wrap textarea{
  width:100% !important;background:#fff !important;border:1.5px solid var(--sb-line) !important;border-radius:8px !important;
  padding:.85rem 1rem !important;font-family:var(--sb-sans) !important;font-size:16px !important;color:var(--sb-ink) !important;  /* iOSズーム抑止のため16px */
  transition:border-color .2s !important;
}
.parts213_form_wrap input:focus,
.parts213_form_wrap textarea:focus{outline:none !important;border-color:var(--sb-red) !important;}
.parts213_form_wrap textarea{min-height:140px !important;resize:vertical !important;}

.parts213_form_wrap .attention{display:block !important;font-size:12px !important;color:var(--sb-red) !important;font-family:var(--sb-mono) !important;font-weight:400 !important;margin-top:.4rem !important;line-height:1.7 !important;}
.parts213_form_wrap .error{display:block !important;color:var(--sb-red) !important;font-size:12.5px !important;margin-top:.4rem !important;}

/* チェックボックス：タップ対象 44px 確保 */
.parts213_form_wrap .form_checkbox label{display:inline-flex !important;align-items:center !important;gap:.5rem !important;margin-right:1rem !important;font-size:15px !important;color:var(--sb-ink) !important;min-height:44px !important;padding:.3rem 0 !important;}
.parts213_form_wrap .form_checkbox input{width:auto !important;min-width:20px !important;min-height:20px !important;}

/* 送信ボタン：控えめだがトーンに沿った塗り。タップ対象も確保 */
.parts213_form_wrap .contact_submit{text-align:center !important;border-bottom:0 !important;display:block !important;padding-top:1.8rem !important;}
.parts213_form_wrap .contact_submit button,
.parts213_form_wrap .contact_submit input[type=submit]{
  width:auto !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:.6rem !important;
  background:var(--sb-red) !important;color:#fff !important;font-family:var(--sb-sans) !important;font-weight:700 !important;font-size:15px !important;
  border:0 !important;border-radius:999px !important;padding:1.1rem 3rem !important;min-height:44px !important;cursor:pointer !important;transition:.25s !important;
}
.parts213_form_wrap .contact_submit button:hover,
.parts213_form_wrap .contact_submit input[type=submit]:hover{background:var(--sb-red-bright) !important;transform:translateY(-2px) !important;}

@media(prefers-reduced-motion:reduce){
  .parts213_form_wrap .contact_submit button:hover{transform:none !important;}
}
/* === add.css 貼り付け ここまで === */


/* ===== add-css: recruit_parts219.add.css ===== */
/* === add.css 貼り付け ここから === */
/* 創墨社 — 採用エントリー応募フォーム（Cuezilla parts219 系・添付欄あり）見た目調整CSS
   ・動的HTML（form・hidden・reCAPTCHA・確認/完了画面・ファイル名チェックJS）は CMS 生成。作り直さない。
   ・CMSが出力する .contact_section / parts219_* / dl(.form_address/.attach/.attach2/.form_textarea)
     ・dt(.form_text_dt)・required・attention・error・zip 等を狙う。
   ・装飾枠を足さない「入力欄だけのフラット」指針。自己完結＋必要箇所に !important。
   ・モバイルファースト：base＝1カラム（ラベル上・入力下）→ min-width で2カラム化。 */


:root{
  --sb-red:#c8102e;
  --sb-red-bright:#e3132f;
  --sb-ink:#16110f;
  --sb-ink-soft:#403a37;
  --sb-paper:#ffffff;
  --sb-cream:#f4f1ec;
  --sb-line:#e4ded5;
  --sb-serif:'Noto Serif JP',serif;
  --sb-sans:'Noto Sans JP',system-ui,sans-serif;
  --sb-mono:'Roboto Mono','SFMono-Regular',monospace;
  --sb-gut:clamp(1.25rem,4vw,3.5rem);
}

/* ---- フォーム外枠（CMSは section.contact_section で括る。装飾は上書きで当てる） ---- */
.contact_section{background:var(--sb-paper) !important;}

/* ---- フォーム本体（parts219系・装飾枠なしのフラット） ---- */
.parts219_section_form{background:var(--sb-paper) !important;padding:clamp(2.5rem,6vw,5rem) 0 !important;}
.parts219_form_wrap{max-width:920px !important;margin:0 auto !important;padding:0 var(--sb-gut) !important;}
.parts219_form_wrap form{background:transparent !important;border:0 !important;padding:0 !important;box-shadow:none !important;}

/* 行：mobile＝ラベル上・入力下／PC＝2カラム。行区切りの罫線は引かない（入力欄ボックス＋余白で区切る） */
.parts219_form_wrap dl{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:.5rem !important;
  align-items:start !important;
  padding:1.1rem 0 !important;
  margin:0 !important;
}
@media(min-width:641px){
  .parts219_form_wrap dl{grid-template-columns:230px 1fr !important;gap:1.1rem 1.6rem !important;padding:1.4rem 0 !important;}
}
.parts219_form_wrap dl:first-of-type{padding-top:0 !important;}

.parts219_form_wrap dt{
  font-family:var(--sb-sans) !important;font-weight:700 !important;font-size:14px !important;color:var(--sb-ink) !important;
  display:flex !important;align-items:center !important;gap:.6rem !important;flex-wrap:wrap !important;padding-top:0 !important;
}
@media(min-width:641px){.parts219_form_wrap dt{padding-top:.7rem !important;}}
.parts219_form_wrap dt.form_text_dt{align-items:flex-start !important;}

.parts219_form_wrap dt .required{
  background:var(--sb-red) !important;color:#fff !important;font-size:10px !important;font-family:var(--sb-mono) !important;
  padding:.2rem .55rem !important;border-radius:4px !important;letter-spacing:.05em !important;white-space:nowrap !important;flex:0 0 auto !important;
}
/* ラベル内の注意書き（添付欄のファイル名注意・文字数注意など） */
.parts219_form_wrap dt .attention{flex-basis:100% !important;font-weight:400 !important;font-size:12px !important;color:var(--sb-red) !important;font-family:var(--sb-mono) !important;line-height:1.7 !important;margin-top:.3rem !important;}
.parts219_form_wrap dd{margin:0 !important;}

/* テキスト系入力 */
.parts219_form_wrap input[type=text],
.parts219_form_wrap input[type=email],
.parts219_form_wrap input[type=tel],
.parts219_form_wrap textarea{
  width:100% !important;background:var(--sb-cream) !important;border:1.5px solid var(--sb-line) !important;border-radius:8px !important;
  padding:.85rem 1rem !important;font-family:var(--sb-sans) !important;font-size:16px !important;color:var(--sb-ink) !important;  /* iOSズーム抑止のため16px */
  transition:border-color .2s,background .2s !important;
}
.parts219_form_wrap input:focus,
.parts219_form_wrap textarea:focus{outline:none !important;border-color:var(--sb-red) !important;background:#fff !important;}
.parts219_form_wrap textarea{min-height:200px !important;resize:vertical !important;}

/* 添付欄（履歴書 attach / 職務経歴書 attach2 のファイル入力） */
.parts219_form_wrap input[type=file]{font-family:var(--sb-sans) !important;font-size:14px !important;color:var(--sb-ink-soft, #403a37) !important;max-width:100% !important;}

.parts219_form_wrap .error{display:block !important;color:var(--sb-red) !important;font-size:12.5px !important;margin-top:.4rem !important;}

/* 住所行：dd 内に 〒（テキスト）＋ input.zip ＋ input[name=address] */
.parts219_form_wrap dl.form_address dd{display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:.5rem !important;}
.parts219_form_wrap dl.form_address input.zip{flex:0 0 auto !important;width:auto !important;max-width:240px !important;}
.parts219_form_wrap dl.form_address input[name=address]{flex:1 1 100% !important;}
.parts219_form_wrap dl.form_address .error{flex:1 1 100% !important;}

/* 送信ボタン：控えめだがトーンに沿った塗り。タップ対象も確保 */
.parts219_form_wrap .contact_submit{text-align:center !important;display:block !important;padding-top:2rem !important;}
.parts219_form_wrap .contact_submit button,
.parts219_form_wrap .contact_submit input[type=submit]{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:.6rem !important;
  background:var(--sb-red) !important;color:#fff !important;font-family:var(--sb-sans) !important;font-weight:700 !important;font-size:15px !important;
  border:0 !important;border-radius:999px !important;padding:1.15rem 3.4rem !important;min-height:44px !important;cursor:pointer !important;transition:.25s !important;
}
.parts219_form_wrap .contact_submit button:hover,
.parts219_form_wrap .contact_submit input[type=submit]:hover{background:var(--sb-red-bright) !important;transform:translateY(-2px) !important;}

@media(prefers-reduced-motion:reduce){
  .parts219_form_wrap .contact_submit button:hover{transform:none !important;}
}
/* === add.css 貼り付け ここまで === */


/* =================================================================
   D. 0624 修正版 追加 — 新規ページ固有グリッド（base/skin/parts add-css は不変）
   ================================================================= */

/* --- TOP：墨出しの現場から Worksギャラリー（.siteworks） --- */
/* 墨出しの現場から — Works ギャラリー（6枚） */
  .siteworks{--gap:clamp(.5rem,1.4vw,1rem)}
  .siteworks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:clamp(1.6rem,3.5vw,2.6rem)}
  .siteworks-grid figure{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--black-3,#1a1a1a)}
  .siteworks-grid img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1);will-change:transform}
  .siteworks-grid figure::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none}
  .siteworks-grid figure .wk-no{position:absolute;left:12px;bottom:10px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:#fff;opacity:.85;text-shadow:0 1px 6px rgba(0,0,0,.6)}
  .siteworks-grid figure::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.42),transparent 42%);opacity:0;transition:opacity .5s ease}
  @media(hover:hover){
    .siteworks-grid figure:hover img{transform:scale(1.06)}
    .siteworks-grid figure:hover::before{opacity:1}
  }
  @media(max-width:760px){.siteworks-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:460px){.siteworks-grid{grid-template-columns:1fr}}

/* --- 仕事紹介(/service)：2×2写真カード（.workgrid / .wcard） --- */
/* 墨出しの仕事：写真付き2×2カード */
  .workgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.4vw,1.6rem);margin-top:clamp(1.8rem,4vw,2.6rem)}
  .wcard{display:flex;flex-direction:column;background:var(--cream,#f4efe7);border:1px solid var(--line,rgba(0,0,0,.1))}
  .wcard-fig{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--black-3,#1a1a1a)}
  .wcard-fig img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
  .wcard-no{position:absolute;left:12px;top:10px;z-index:2;font-family:var(--mono);font-weight:500;font-size:2.2rem;line-height:1;color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.92);text-stroke:1.4px rgba(255,255,255,.92);text-shadow:0 2px 10px rgba(0,0,0,.4)}
  @media(hover:hover){.wcard:hover .wcard-fig img{transform:scale(1.05)}}
  .wcard-body{padding:clamp(1.2rem,2.6vw,1.7rem)}
  .wcard-ttl{font-family:var(--serif);font-weight:700;font-size:clamp(1.25rem,2.4vw,1.55rem);line-height:1.4;color:var(--ink)}
  .wcard-ttl .r{color:var(--red)}
  .wcard-d{margin-top:.7rem;font-size:.94rem;color:var(--ink-soft);line-height:1.9;text-wrap:pretty}
  @media(max-width:680px){.workgrid{grid-template-columns:1fr}}

/* --- 創墨社で働く(/work)：現場ギャラリー4枚（.joinworks） --- */
/* 現場ギャラリー帯（4枚） */
  .joinworks{--gap:clamp(.5rem,1.4vw,1rem)}
  .joinworks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
  .joinworks-grid figure{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--black-3,#1a1a1a)}
  .joinworks-grid img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
  .joinworks-grid figure::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none}
  .joinworks-grid figure .wk-no{position:absolute;left:12px;bottom:10px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:#fff;opacity:.85;text-shadow:0 1px 6px rgba(0,0,0,.6)}
  @media(hover:hover){.joinworks-grid figure:hover img{transform:scale(1.06)}}
  @media(max-width:760px){.joinworks-grid{grid-template-columns:repeat(2,1fr)}}
  /* ギャラリー〜給与セクション間の余白を詰める */
  .joinworks{padding-bottom:0}

/* --- 創墨社を知る(/about)：強み3列 / 企業理念 / ビジョン（.strength-grid /.scard /.phil-layout /.vis-layout） --- */
/* 創墨社が選ばれる理由：画像付きカード（3列） */
  .strength-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.8rem);margin-top:clamp(1.8rem,4vw,2.8rem);border-top:1.5px solid var(--ink);padding-top:clamp(1.8rem,4vw,2.8rem)}
  .scard{display:flex;flex-direction:column}
  .scard-fig{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--black-3,#1a1a1a)}
  .scard-fig img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
  .scard-fig::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);pointer-events:none}
  .scard-no{position:absolute;left:12px;top:10px;z-index:2;font-family:var(--mono);font-weight:500;font-size:2.4rem;line-height:1;color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.92);text-stroke:1.4px rgba(255,255,255,.92);text-shadow:0 2px 10px rgba(0,0,0,.4)}
  @media(hover:hover){.scard:hover .scard-fig img{transform:scale(1.06)}}
  .scard-k{display:flex;align-items:center;gap:.6rem;margin-top:1.1rem;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--red-deep);font-weight:500}
  .scard-k::before{content:'';width:18px;height:1.5px;background:var(--red);flex-shrink:0}
  .scard-v{margin-top:.55rem;font-family:var(--serif);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.6rem);line-height:1.4;color:var(--ink)}
  .scard-v .r{color:var(--red)}
  .scard-d{margin-top:.7rem;font-size:.95rem;color:var(--ink-soft);line-height:1.9;text-wrap:pretty}
  @media(max-width:760px){.strength-grid{grid-template-columns:1fr;gap:2rem}}
  /* 企業理念：画像＋本文の2カラム（ダーク帯） */
  .phil-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:center;margin-top:clamp(1.8rem,4vw,2.6rem)}
  .phil-fig{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--black-3,#1a1a1a)}
  .phil-fig img{display:block;width:100%;height:100%;object-fit:cover}
  .phil-fig::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);pointer-events:none}
  .phil-body{color:rgba(255,255,255,.8)}
  .phil-body p{font-size:.97rem;line-height:1.95;margin:0 0 1rem;text-wrap:pretty}
  .phil-body p:last-child{margin-bottom:0}
  @media(max-width:760px){.phil-layout{grid-template-columns:1fr}}
  /* ビジョン：本文＋画像の2カラム（クリーム帯・画像右） */
  .vis-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(1.6rem,4vw,3rem);align-items:center;margin-top:clamp(1.8rem,4vw,2.6rem)}
  .vis-fig{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--black-3,#1a1a1a)}
  .vis-fig img{display:block;width:100%;height:100%;object-fit:cover}
  .vis-fig::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);pointer-events:none}
  .vis-body p{font-size:.97rem;line-height:1.95;margin:0 0 1rem;color:var(--ink-soft);text-wrap:pretty}
  .vis-body p:last-child{margin-bottom:0}
  .vis-body strong{color:var(--ink);font-weight:700}
  @media(max-width:760px){.vis-layout{grid-template-columns:1fr}.vis-fig{order:-1}}

/* --- 会社概要：OUR PRINCIPLE ギャラリー帯（.pworks-grid） --- */
/* OUR PRINCIPLE ギャラリー帯（4枚） */
  .pworks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,1.4vw,1rem);margin-top:clamp(1.6rem,3.5vw,2.4rem)}
  .pworks-grid figure{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--black-3,#1a1a1a)}
  .pworks-grid img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
  .pworks-grid figure::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);pointer-events:none}
  @media(hover:hover){.pworks-grid figure:hover img{transform:scale(1.06)}}
  @media(max-width:760px){.pworks-grid{grid-template-columns:repeat(2,1fr)}}