/* ===== 20_site.css ===== */
/* ============================================================
   20_site.css ─ 受領デザイン本体（A）
   受領 tsuchiyama-kamotsu-unyu.html の head 内 style 要素の中身をそのまま搬出。
   （このファイルに style / script のタグ文字列を書かないこと。CueZillaの追加CSS欄は
     コメント内であってもそこから後ろが丸ごと落ちる。末尾のガードが機械的に止める。）
   多ページ化に必要な最小差分だけ decompose.mjs が機械置換している:
     ・.page{display:none} → display:block（SPAの1枚表示をやめる）
     ・<button>→<a> 置換に伴うセレクタ追記（.gnav__sub / .card / .faq-nav / .footer-col）
     ・[data-reveal]の初期非表示を html.js-anim ゲートへ（JS不動でも本文が消えない）
   ============================================================ */

/* ============================================================
   土山貨物運輸 有限会社 — サイトリプレース 一次生成
   ※全ページを1つのindexに集約（後日 個別HTML＋CSS へ分割前提）
   ※クラス設計は分割しやすいよう機能単位で命名
   ============================================================ */

:root{
  /* Brand — ロゴ・看板由来のゴールド（現行HP踏襲・暗くなりすぎない） */
  --gold:        #b58a34;
  --gold-deep:   #8a6a24;
  --gold-soft:   #d8bd82;
  --gold-pale:   #f2e9d5;
  /* Ink / neutrals — グレーを混ぜてメリハリ */
  --ink:         #23211c;
  --ink-soft:    #4c4840;
  --muted:       #7d786d;
  --line:        #e7e3d9;
  --paper:       #ffffff;
  --paper-warm:  #faf7f0;
  --gray-bg:     #f1efe9;
  --charcoal:    #262a2c;
  --charcoal-2:  #31363a;
  /* type */
  --f-jp:   "Noto Sans JP", system-ui, sans-serif;
  --f-min:  "Shippori Mincho", "Noto Serif JP", serif;
  --f-en:   "Anton", "Noto Sans JP", sans-serif;
  --f-display: "Anton", sans-serif;
  --header-h: 84px;
  --slant: clamp(160px,22vw,400px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-jp);font-weight:400;font-size:16px;line-height:1.95;
  letter-spacing:.02em;overflow-x:hidden;
  font-feature-settings:"palt";
}
img{max-width:100%;display:block;}
a{color:var(--gold-deep);text-decoration:none;transition:color .3s;}
a:hover{color:var(--gold);}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.4;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}

/* 改行制御（共通ルール§3） */
span.line-chunk{display:inline-block;overflow-wrap:anywhere;word-break:normal;}

/* ---------- Layout ---------- */
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,48px);}
.container--wide{max-width:1440px;}
.container--narrow{max-width:860px;}
.bleed{width:100%;}

/* ---------- Section English label（巨大・淡い） ---------- */
.eyebrow{font-family:var(--f-en);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);font-size:clamp(13px,1.05vw,15px);display:inline-flex;align-items:center;gap:.7em;}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--gold);display:inline-block;}
.sec-label{font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  letter-spacing:0;line-height:.8;color:var(--gold-pale);
  font-size:clamp(78px,15.5vw,240px);pointer-events:none;user-select:none;}
.sec-label--ink{color:rgba(255,255,255,.09);}

/* ---------- Headings ---------- */
.h-jp{font-family:var(--f-jp);font-weight:900;color:var(--ink);
  font-size:clamp(29px,3.9vw,54px);line-height:1.4;letter-spacing:.005em;}
.h-jp--lg{font-size:clamp(34px,5.2vw,72px);line-height:1.3;}
.h-min{font-family:var(--f-min);font-weight:700;letter-spacing:.03em;line-height:1.5;}
.h-jp--light{color:var(--paper);}
.lead{font-size:clamp(15px,1.15vw,18px);line-height:2.1;color:var(--ink-soft);}
.body-txt{font-size:16px;line-height:2.05;color:var(--ink-soft);}
.body-txt + .body-txt{margin-top:1.1em;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.8em;
  min-height:60px;padding:0 36px;font-family:var(--f-jp);font-weight:800;font-size:15.5px;
  letter-spacing:.06em;border-radius:0;border:1.5px solid transparent;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),background .35s,color .35s,border-color .35s,box-shadow .35s;
  position:relative;overflow:hidden;}
.btn__ar{transition:transform .4s;font-family:var(--f-en);}
.btn:hover .btn__ar{transform:translateX(6px);}
.btn--gold{background:var(--gold);color:#fff;border-color:var(--gold);}
.btn--gold:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff;transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(138,106,36,.7);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:#fff;transform:translateY(-3px);}
.btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);}
.btn--ghost-light:hover{background:#fff;color:var(--ink);transform:translateY(-3px);}
.btn--lg{min-height:66px;padding:0 44px;font-size:16.5px;}
.btn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:currentColor;opacity:.9;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.2,.7,.3,1);pointer-events:none;}
.btn:hover::after{transform:scaleX(1);transform-origin:left;}
.textlink{display:inline-flex;align-items:center;gap:.6em;font-weight:700;color:var(--gold-deep);
  font-size:15px;letter-spacing:.04em;position:relative;}
.textlink::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .4s;}
.textlink:hover::after{transform:scaleX(1);transform-origin:left;}
.textlink .ar{font-family:var(--f-en);transition:transform .4s;}
.textlink:hover .ar{transform:translateX(5px);}

/* ボタン感を強めたリンク（矢印・流れる線は維持） */
.btnlink{display:inline-flex;align-items:center;gap:.75em;font-weight:800;color:#fff;
  font-size:16px;letter-spacing:.05em;position:relative;padding:19px 40px;
  border:none;background:var(--gold);overflow:hidden;
  transition:background .35s,transform .35s,box-shadow .35s;}
.btnlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:rgba(255,255,255,.92);
  transform:scaleX(0);transform-origin:right;transition:transform .45s;}
.btnlink:hover{background:var(--gold-deep);transform:translateY(-3px);box-shadow:0 16px 34px -14px rgba(138,106,36,.75);}
.btnlink:hover::after{transform:scaleX(1);transform-origin:left;}
.btnlink .ar{font-family:var(--f-en);font-size:18px;transition:transform .4s;}
.btnlink:hover .ar{transform:translateX(6px);}

/* ---------- Photo placeholder（点線を残さない・魅せる枠） ---------- */
.ph{position:relative;overflow:hidden;background:
    radial-gradient(120% 120% at 30% 20%, #efeae0 0%, #e4ddce 45%, #d7cdb6 100%);
  display:flex;align-items:center;justify-content:center;}
.ph__cap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;
  color:#8a7d5f;text-align:center;padding:20px;}
.ph__cap svg{width:38px;height:38px;opacity:.55;}
.ph__cap span{font-size:12.5px;letter-spacing:.14em;font-weight:500;line-height:1.7;max-width:26ch;}
.ph__tag{position:absolute;top:16px;left:16px;z-index:3;font-family:var(--f-en);
  letter-spacing:.16em;font-size:10.5px;text-transform:uppercase;color:#fff;
  background:rgba(35,33,28,.62);padding:5px 11px;backdrop-filter:blur(3px);}
.ph--dark{background:linear-gradient(160deg,#2b3033,#20242a);}
.ph--dark .ph__cap{color:#9aa4ad;}
.ph--dark .ph__tag{background:rgba(255,255,255,.16);}
.ph--video{background:linear-gradient(160deg,#5b6167,#454b51);}
.ph--video .ph__cap{color:#eef1f4;}

/* ---------- Header ---------- */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:200;height:var(--header-h);
  display:flex;align-items:center;transition:background .4s,box-shadow .4s,height .4s;}
.site-header--solid{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line);}
.site-header__in{width:100%;max-width:1440px;margin:0 auto;padding:0 clamp(18px,4vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;gap:13px;z-index:2;background:none;border:none;cursor:pointer;padding:0;}
.brand__logo{height:clamp(40px,4vw,52px);width:auto;display:block;transition:filter .4s,opacity .3s;}
.brand:hover .brand__logo{opacity:.72;}
.site-header--trans .brand__logo{filter:brightness(0) invert(1);}
.footer-brand .brand__logo{filter:brightness(0) invert(1);height:clamp(46px,4.6vw,60px);}
.brand__mark{width:46px;height:46px;border:none;border-radius:0;
  display:flex;align-items:center;justify-content:center;font-family:var(--f-min);font-weight:800;
  color:#fff;font-size:22px;flex:none;background:var(--gold);}
.brand__txt{line-height:1.25;}
.brand__ja{font-family:var(--f-min);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:.06em;}
.brand__en{font-family:var(--f-en);font-size:10px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;}
.site-header--trans .brand__ja{color:#fff;}
.site-header--trans .brand__en{color:rgba(255,255,255,.7);}
.site-header--trans .brand__mark{border:1.5px solid rgba(255,255,255,.85);color:#fff;background:rgba(255,255,255,.10);}

.gnav{display:flex;align-items:center;gap:2px;}
.gnav__item{position:relative;}
.gnav__link{display:flex;align-items:center;gap:6px;padding:12px 15px;font-weight:700;font-size:14.5px;
  color:var(--ink);letter-spacing:.04em;background:none;border:none;transition:color .3s;white-space:nowrap;position:relative;}
.gnav__link::after{content:"";position:absolute;left:15px;right:15px;bottom:6px;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:center;transition:transform .32s cubic-bezier(.2,.7,.3,1);opacity:.85;}
.gnav__link:hover::after{transform:scaleX(1);}
.gnav__link:hover{color:var(--gold);}
.gnav__link.is-current{color:var(--gold-deep);}
.gnav__link .caret{font-size:9px;transition:transform .3s;opacity:.7;}
.gnav__item:hover .caret{transform:rotate(180deg);}
.site-header--trans .gnav__link{color:rgba(255,255,255,.92);}
.site-header--trans .gnav__link:hover{color:#fff;}
.gnav__sub{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;min-width:210px;padding:10px;box-shadow:0 24px 50px -20px rgba(35,33,28,.32);
  border-top:2px solid var(--gold);opacity:0;visibility:hidden;transition:.32s;pointer-events:none;}
.gnav__item:hover .gnav__sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.gnav__sub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:12px;}
.gnav__sub button,.gnav__sub a{display:flex;flex-direction:column;width:100%;text-align:left;padding:11px 14px;background:none;border:none;
  color:var(--ink);transition:background .25s,color .25s;}
.gnav__sub button:hover,.gnav__sub a:hover{background:var(--paper-warm);color:var(--gold-deep);}
.gnav__sub .s-ja{font-weight:700;font-size:14px;}
.gnav__sub .s-en{font-family:var(--f-en);font-size:9.5px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;}

.header-side{display:flex;align-items:center;gap:18px;}
.header-tel{text-align:right;line-height:1.15;}
.header-tel__num{font-family:var(--f-en);font-size:21px;letter-spacing:.03em;color:var(--ink);font-weight:400;display:flex;align-items:center;gap:6px;}
.header-tel__num svg{width:15px;height:15px;}
.header-tel__sub{font-size:10.5px;color:var(--muted);letter-spacing:.08em;}
.site-header--trans .header-tel__num{color:#fff;}
.site-header--trans .header-tel__sub{color:rgba(255,255,255,.7);}
.header-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 24px;
  background:var(--gold);color:#fff;font-weight:700;font-size:13.5px;letter-spacing:.08em;border:none;
  transition:background .3s,transform .3s;border-radius:2px;}
.header-cta{border-radius:0;}
.header-cta:hover{background:var(--gold-deep);color:#fff;transform:translateY(-2px);}
.header-cta__en{font-family:var(--f-en);letter-spacing:.1em;font-size:13px;}

.navtoggle{display:none;flex-direction:column;gap:6px;width:44px;height:44px;align-items:center;justify-content:center;
  background:none;border:none;z-index:210;}
.navtoggle span{width:26px;height:2px;background:var(--ink);transition:.35s;}
.site-header--trans .navtoggle span{background:#fff;}
body.nav-open .navtoggle span:nth-child(1){transform:translateY(8px) rotate(45deg);background:var(--ink);}
body.nav-open .navtoggle span:nth-child(2){opacity:0;}
body.nav-open .navtoggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg);background:var(--ink);}

/* ---------- Mobile drawer ---------- */
.drawer{position:fixed;inset:0;z-index:190;background:var(--paper-warm);
  transform:translateX(100%);transition:transform .5s cubic-bezier(.7,0,.2,1);
  padding:calc(var(--header-h) + 20px) 0 40px;overflow-y:auto;display:flex;flex-direction:column;}
body.nav-open .drawer{transform:translateX(0);}
.drawer__list{padding:0 30px;}
.drawer__row{border-bottom:1px solid var(--line);}
.drawer__link{display:flex;align-items:baseline;gap:14px;width:100%;text-align:left;background:none;border:none;
  padding:20px 4px;color:var(--ink);font-weight:800;font-size:20px;font-family:var(--f-jp);}
.drawer__link .d-en{font-family:var(--f-en);font-size:11px;letter-spacing:.18em;color:var(--gold-deep);text-transform:uppercase;}
.drawer__sublink{display:block;width:100%;text-align:left;background:none;border:none;padding:12px 4px 12px 26px;
  color:var(--ink-soft);font-size:15px;font-weight:500;}
.drawer__sublink::before{ color:var(--gold);margin-right:10px;content: "—";}
.drawer__foot{margin-top:auto;padding:30px;display:flex;flex-direction:column;gap:14px;}
/* スマホ・タブレット縦：ドロワーを1画面に収める（スクロール不要） */
@media(max-width:1080px){
  .drawer{padding:calc(var(--header-h) + 10px) 0 14px;justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .drawer__list{padding:0 24px;flex:1 1 auto;min-height:0;}
  .drawer__foot{flex:0 0 auto;}
  .drawer__row{padding-bottom:6px;}
  .drawer__link{padding:11px 4px;font-size:18px;}
  .drawer__link .d-en{font-size:10px;}
  .drawer__sublink{display:inline-block;width:auto;padding:6px 12px 6px 0;font-size:13.5px;}
  .drawer__sublink::before{margin-right:6px;}
  .drawer__foot{padding:14px 24px;gap:10px;}
  .drawer__foot .btn{min-height:52px;padding:0 26px;font-size:15px;}
}
@media(max-width:860px) and (max-height:680px){
  .drawer__link{padding:8px 4px;font-size:16px;}
  .drawer__sublink{padding:5px 10px 5px 0;font-size:12.5px;}
  .drawer__row{padding-bottom:3px;}
  .drawer__foot .btn{min-height:46px;}
}

/* ---------- Page switching ---------- */
.page{display:block;}
.page.is-active{display:block;animation:pageIn .7s cubic-bezier(.2,.7,.3,1);}
@keyframes pageIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ---------- Reveal on scroll ---------- */
html.js-anim [data-reveal]{opacity:0;transform:translateY(38px);transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1);}
/* KEEP: 「隠す」側 html.js-anim [data-reveal]（詳細度0,2,1）に勝たせるため、出す側にも html.js-anim を付ける。外すと is-in が付いても本文が opacity:0 のまま表示されない（2026-08-24 修正） */
html.js-anim [data-reveal].is-in{opacity:1;transform:none;}
[data-reveal="img"]{transform:translateY(50px) scale(1.03);}
html.js-anim [data-reveal="img"].is-in{transform:none;}
[data-reveal-d="1"]{transition-delay:.12s;}
[data-reveal-d="2"]{transition-delay:.24s;}
[data-reveal-d="3"]{transition-delay:.36s;}
[data-reveal-d="4"]{transition-delay:.48s;}

/* ---------- Lower page hero ---------- */
.subhero{position:relative;min-height:clamp(360px,52vh,560px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--charcoal);}
.subhero__media{position:absolute;inset:0;}
.subhero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(26,24,20,.72),rgba(26,24,20,.28) 55%,rgba(26,24,20,.5));}
.subhero__in{position:relative;z-index:2;padding-bottom:clamp(40px,6vw,72px);padding-top:calc(var(--header-h) + 40px);}
.subhero .eyebrow{color:var(--gold-soft);}
.subhero .eyebrow::before{background:var(--gold-soft);}
.subhero__en{position:absolute;right:clamp(12px,3vw,40px);top:50%;font-family:var(--f-display);
  font-size:clamp(72px,13vw,190px);color:rgba(255,255,255,.10);line-height:.78;letter-spacing:0;z-index:1;}
.subhero__title{font-family:var(--f-jp);font-weight:900;color:#fff;font-size:clamp(30px,4.8vw,60px);
  line-height:1.32;letter-spacing:.01em;margin-top:14px;}
.crumb{position:relative;z-index:2;font-size:12px;color:var(--muted);letter-spacing:.06em;padding:16px 0;}
.crumb a{color:var(--muted);}.crumb a:hover{color:var(--gold-deep);}
.crumb span{color:var(--gold-deep);}

/* ---------- Top hero (英字ロックアップ＋動画ブロック＋箱テキスト) ---------- */
.hero__wordmark{font-family:var(--f-display);font-size:calc((100vw - 45px) / 12.2);line-height:.82;white-space:nowrap;
  color:#f4efe4;letter-spacing:.004em;position:relative;z-index:3;margin-top:clamp(-34px,-1.8vw,-16px);margin-bottom:clamp(-16px,-2.2vw,-46px);
  padding-left:calc(100vw - 100%);will-change:transform;}
.hero__wordmark .we{display:block;font-family:var(--f-en);font-size:clamp(11px,.95vw,14px);
  letter-spacing:.2em;color:var(--gold-soft);margin-bottom:16px;}
.hero__video{position:relative;z-index:1;width:100%;height:clamp(520px,76vh,880px);
  border-radius:24px 24px 0 0;overflow:hidden;background:var(--charcoal-2);}
.hero__video-media{position:absolute;inset:0;z-index:0;will-change:transform,filter;}
.hero__card{position:absolute;right:0;bottom:clamp(16px,2.4vw,40px);z-index:5;
  max-width:min(400px,76%);background:rgba(22,20,16,.78);backdrop-filter:blur(9px);
  padding:clamp(20px,2.1vw,30px);text-align:right;will-change:transform;}
.hero__card-eye{font-family:var(--f-en);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:14px;}
.hero__card-title{font-family:var(--f-jp);font-weight:900;color:#fff;font-size:clamp(21px,1.9vw,30px);
  line-height:1.5;letter-spacing:.01em;margin:0;}
.hero__card-lead{color:rgba(255,255,255,.82);font-size:clamp(14px,1vw,15.5px);line-height:1.9;margin-top:14px;}
.hero__scroll{position:absolute;left:clamp(20px,4vw,48px);bottom:30px;z-index:4;display:flex;align-items:center;
  gap:12px;color:rgba(255,255,255,.7);font-family:var(--f-en);letter-spacing:.2em;font-size:11px;}
@media(max-width:860px){
  .hero__wordmark{margin-bottom:-4px;}
  .hero__video{height:clamp(460px,74vh,600px);}
  .hero__card{left:14px;right:14px;bottom:14px;max-width:none;background:rgba(22,20,16,.9);}
  .hero__scroll{display:none;}
}

/* ---------- Section rhythm ---------- */
.sec{position:relative;padding:clamp(72px,10vw,140px) 0;}
.sec--tight{padding:clamp(52px,7vw,96px) 0;}
.sec--warm{background:var(--paper-warm);}
.sec--gray{background:var(--gray-bg);}
.sec--ink{background:var(--charcoal);color:#fff;}
.sec--ink .lead{color:rgba(255,255,255,.75);}
.sec--ink .h-jp{color:#fff;}

/* ---------- 地続きの装置：箸休め全幅写真＋斜め食い込み＋またがせ英字 ---------- */
.breather{position:relative;overflow:visible;height:clamp(400px,54vw,760px);
  margin-top:calc(-1 * var(--slant));z-index:2;}
.breather__bg{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;
  clip-path:polygon(0 var(--slant),100% 0,100% calc(100% - var(--slant)),0 100%);
  will-change:transform;overflow:hidden;background:var(--charcoal);contain:paint;transform:translateZ(0);}
.breather__bg > .ph{position:absolute;inset:0;}
.breather__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,15,.28),rgba(20,18,15,.5));}
/* 箸休め帯の中を右→左にゆっくり流れるカルーセル */
.breather-marquee{position:absolute;top:0;bottom:0;left:0;display:flex;animation:breatherScroll 55s linear infinite;will-change:transform;transform:translateZ(0);backface-visibility:hidden;}
.breather-slide{position:relative;flex:none;width:clamp(280px,26vw,460px);height:100%;}
.breather-slide + .breather-slide{box-shadow:-1px 0 0 rgba(255,255,255,.14);}
.breather-slide:nth-child(odd){background:linear-gradient(160deg,#565c62,#454b51)!important;}
.breather-slide:nth-child(even){background:linear-gradient(160deg,#484e54,#383e44)!important;}
@keyframes breatherScroll{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
@media(prefers-reduced-motion:reduce){.breather-marquee{animation:none;}}
.biz-word{position:absolute;left:clamp(12px,3vw,52px);bottom:0.5em;z-index:3;
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;line-height:.8;
  font-size:clamp(60px,10.5vw,168px);color:var(--gold-soft);letter-spacing:.01em;
  white-space:nowrap;pointer-events:none;will-change:transform;}

/* イントロ見出しを左上へ（写真の斜めカットで空いた三角に重ねる） */
.intro-head{position:relative;z-index:2;max-width:min(560px,54%);}
.intro-split{margin-top:clamp(-96px,-7.5vw,-44px);}
/* イントロテキストの背景四角（斜め写真が掛かっても読める） */
.intro-panel{position:relative;background:var(--paper-warm);
  padding:clamp(28px,3.2vw,52px);}
/* スマホ・タブレット縦：イントロを1カラムで縦積み（余白の暴発を解消） */
@media(max-width:860px){
  .intro-split{grid-template-columns:1fr !important;margin-top:24px !important;gap:10px;align-items:stretch !important;}
  .intro-split > *{min-width:0;}
  .intro-split .aspect-w{min-height:0 !important;}
  .intro-head{max-width:none;}
  .intro-float{position:absolute !important;right:20px !important;bottom:0 !important;left:auto !important;top:auto !important;width:44% !important;margin:0 !important;z-index:2;}
  .intro-panel{padding:clamp(20px,5vw,30px);}
  /* グリッド項目の min-content 由来の横はみ出しを全面的に防止 */
  .g > *, .split > *, .split--rev > *, .more-split > *, .reason-body > *{min-width:0;}
  .split, .split--rev{grid-template-columns:1fr !important;}
  .ph[class*="aspect-"]{min-height:0 !important;}
  .blog-layout{grid-template-columns:1fr !important;}
}
/* 業務セクションの生成り背景（斜めクリップで上はみ出しを防ぐ） */
.biz-bg{position:absolute;inset:0;z-index:0;background:var(--paper-warm);
  clip-path:polygon(0 var(--slant),100% 0,100% 100%,0 100%);}
/* 業務：写真にタイトル（左上）とチップ（右下の斜めの隙間）を重ねる */
.biz-stage{position:relative;}
.biz-head{position:absolute;top:0;left:0;z-index:2;max-width:min(560px,52%);}
.biz-chips{position:absolute;right:0;bottom:0;z-index:2;max-width:min(620px,56%);justify-content:flex-end;}
.biz-chips .chip{border-color:var(--line);background:#fff;}
@media(max-width:860px){
  .biz-head,.biz-chips{position:static;max-width:none;justify-content:flex-start;}
  .biz-head{margin-bottom:20px;}
  .biz-chips{margin-top:22px;}
}
/* 斜めの白帯の背景あしらい（斜めカットと平行） */
.slant-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;will-change:transform;}
.slant-band{position:absolute;inset:0;background:var(--paper);
  clip-path:polygon(
    0 24%,
    100% calc(24% + var(--slant)),
    100% calc(64% + var(--slant)),
    0 64%
  );}
.slant-band--up{clip-path:polygon(
    0 calc(44% + var(--slant)),
    100% 44%,
    100% 84%,
    0 calc(84% + var(--slant))
  );}
/* REASON上部のwarm三角（斜めは右下がり） */
.reason-wedge{position:absolute;top:0;left:0;right:0;height:var(--slant);
  background:var(--paper-warm);z-index:0;pointer-events:none;
  clip-path:polygon(0 0,100% 0,100% 100%);}
/* REASON下部のwarm塗り（右上がりの上辺→下端に到達してダークに密着） */
.reason-fill{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--paper-warm);
  clip-path:polygon(0 calc(44% + var(--slant)),100% 44%,100% 100%,0 100%);}
/* REASON：左=番号リスト／右=縦長右上がり平行四辺形2枚（段違い・かぶせ） */
.reason-body{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,64px);align-items:center;}
.reason-photos{position:relative;}
.reason-photos .ph{width:64%;}
.reason-photos .ph:nth-child(2){margin-left:auto;margin-top:-28%;}
@media(max-width:860px){
  .reason-body{grid-template-columns:1fr;}
  .reason-photos{display:flex;gap:14px;}
  .reason-photos .ph{width:50%;}
  .reason-photos .ph:nth-child(2){margin:0;align-self:flex-end;}
}
/* 背景の2色切り替え（右下がり・1本）：ABOUTは下が白 / BLOGは下がwarm */
.split-white{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--paper);
  clip-path:polygon(0 48%,100% calc(48% + var(--slant)),100% 100%,0 100%);}
.split-warm{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--paper-warm);
  clip-path:polygon(0 50%,100% calc(50% + var(--slant)),100% 100%,0 100%);}

/* もっと知る：左=注目カード＋右=3行（押せる・影なし） */
.more-split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(18px,2.2vw,36px);align-items:stretch;}
.feature-card{display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid var(--line);
  overflow:hidden;cursor:pointer;padding:0;transition:border-color .4s,transform .4s;}
.feature-card:hover{border-color:var(--gold);transform:translateY(-4px);}
.feature-card__media{position:relative;overflow:hidden;aspect-ratio:16/9;}
.feature-card__media .ph{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.7,.3,1);}
.feature-card:hover .feature-card__media .ph{transform:scale(1.05);}
.feature-card__idx{font-family:var(--f-en);font-size:14px;letter-spacing:.12em;color:var(--gold-deep);}
.feature-card__body{padding:clamp(24px,2.4vw,38px);display:flex;flex-direction:column;gap:12px;flex:1;}
.feature-card__t{font-family:var(--f-jp);font-weight:900;font-size:clamp(23px,2.5vw,34px);color:var(--ink);letter-spacing:.01em;line-height:1.3;}
.feature-card__x{font-size:15px;line-height:1.95;color:var(--ink-soft);}
.feature-card__cta{margin-top:auto;display:inline-flex;align-items:center;gap:.6em;font-weight:800;color:var(--gold-deep);font-size:15px;}
.feature-card__cta .ar{font-family:var(--f-en);transition:transform .4s;}
.feature-card:hover .feature-card__cta .ar{transform:translateX(7px);}
.more-list{display:flex;flex-direction:column;}
.more-row{flex:1;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;
  background:#fff;border:1px solid var(--line);border-bottom:none;cursor:pointer;position:relative;
  padding:clamp(15px,1.7vw,24px) clamp(24px,2.2vw,34px);transition:background .35s;overflow:hidden;}
.more-row:last-child{border-bottom:1px solid var(--line);}
.more-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);
  transform:scaleY(0);transform-origin:bottom;transition:transform .4s;}
.more-row:hover{background:var(--paper-warm);}
.more-row:hover::before{transform:scaleY(1);transform-origin:top;}
.more-row__t{font-family:var(--f-jp);font-weight:800;font-size:clamp(18px,1.6vw,22px);color:var(--ink);margin-bottom:5px;letter-spacing:.01em;}
.more-row__x{font-size:13.5px;line-height:1.75;color:var(--ink-soft);}
.more-row .ar{font-family:var(--f-en);font-size:19px;color:var(--gold);flex:none;transition:transform .4s,background .35s;position:relative;z-index:1;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(18,16,13,.14);}
.more-row:hover .ar{transform:translateX(7px);background:var(--gold);color:#fff;}
.more-row__bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;transition:opacity .4s;
  background:
    linear-gradient(90deg,#fff 5%,rgba(255,255,255,.62) 42%,rgba(255,255,255,.1) 100%),
    radial-gradient(130% 150% at 92% 22%,#d3c8b0,#ece6d9);}
.more-row:hover .more-row__bg{opacity:.82;}
.more-row__main{position:relative;z-index:1;}
@media(max-width:860px){.more-split{grid-template-columns:1fr;}}

/* 採用「もっと知る」：写真主体の大判タイル */
.more-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,24px);}
.more-tile{position:relative;overflow:hidden;text-align:left;padding:0;border:none;cursor:pointer;width:100%;min-width:0;
  background:var(--charcoal);aspect-ratio:16/10;transition:transform .45s cubic-bezier(.2,.7,.3,1);}
.more-tile:hover{transform:translateY(-5px);}
.more-tile__media{position:absolute;inset:0;z-index:0;transition:transform .9s cubic-bezier(.2,.7,.3,1);}
.more-tile:hover .more-tile__media{transform:scale(1.06);}
.more-tile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(14,12,9,.9),rgba(14,12,9,.42) 46%,rgba(14,12,9,.06) 82%);}
.more-tile__body{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  gap:10px;padding:clamp(24px,2.4vw,38px);}
.more-tile__en{font-family:var(--f-en);font-size:12px;letter-spacing:.22em;color:var(--gold-soft);text-transform:uppercase;}
.more-tile__t{font-family:var(--f-jp);font-weight:900;font-size:clamp(24px,2.4vw,34px);color:#fff;line-height:1.25;letter-spacing:.01em;}
.more-tile__x{font-size:14.5px;line-height:1.85;color:rgba(255,255,255,.8);padding-right:clamp(64px,7vw,84px);}
.more-tile .ar{position:absolute;right:clamp(20px,2vw,30px);bottom:clamp(24px,2.4vw,38px);z-index:3;
  font-family:var(--f-en);font-size:19px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);transition:transform .4s,background .35s,color .35s;}
.more-tile:hover .ar{background:var(--gold);border-color:transparent;color:#14120f;transform:translateX(6px);}
@media(max-width:860px){.more-tiles{grid-template-columns:1fr;}.more-tile{min-height:230px;aspect-ratio:16/11;}}

/* ---------- Cards / grids ---------- */
.g{display:grid;gap:clamp(16px,2vw,28px);}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
.card{background:#fff;border:1px solid var(--line);transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s,border-color .5s;}
button.card:hover,a.card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(35,33,28,.28);border-color:var(--gold-soft);}
button.card,a.card{cursor:pointer;}
.card__pad{padding:clamp(22px,2.4vw,34px);}
.card__ic{width:clamp(46px,4.4vw,54px);height:clamp(46px,4.4vw,54px);display:flex;align-items:center;justify-content:center;\n  border-radius:50%;background:var(--paper-warm);color:var(--gold-deep);margin-bottom:18px;}\n.card__ic svg{width:52%;height:52%;}
.card__t{font-family:var(--f-jp);font-weight:800;font-size:19px;color:var(--ink);margin-bottom:10px;letter-spacing:.01em;}
.card__x{font-size:14.5px;line-height:1.9;color:var(--ink-soft);}

/* number-marked strength list */
.strength{display:grid;gap:0;}
.strength__row{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px);align-items:center;
  padding:clamp(24px,3vw,40px) 0;border-top:1px solid var(--line);}
.strength__row:last-child{border-bottom:1px solid var(--line);}
.strength__no{font-family:var(--f-display);font-size:clamp(48px,6vw,92px);color:var(--gold-soft);line-height:.9;}
.strength__t{font-family:var(--f-jp);font-weight:800;font-size:clamp(19px,2vw,27px);color:var(--ink);margin-bottom:6px;letter-spacing:.01em;}
.strength__x{font-size:15px;color:var(--ink-soft);line-height:1.9;}

/* ---------- News band ---------- */
.newsband{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.newsband__in{display:flex;align-items:stretch;max-width:1440px;margin:0 auto;}
.newsband__label{flex:none;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 clamp(20px,3vw,48px);
  background:var(--gold);color:#fff;}
.newsband__label .en{font-family:var(--f-en);letter-spacing:.2em;font-size:20px;line-height:1;}
.newsband__label .ja{font-size:11px;letter-spacing:.14em;opacity:.85;}
.newsrow{display:flex;align-items:center;gap:24px;padding:20px clamp(20px,3vw,48px);min-height:74px;flex:1;}
.newsrow__date{font-family:var(--f-en);font-size:15px;color:var(--gold-deep);letter-spacing:.04em;flex:none;}
.newsrow__cat{flex:none;font-size:11px;letter-spacing:.1em;color:var(--muted);border:1px solid var(--line);padding:3px 12px;}
.newsrow__t{font-size:15px;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .3s;}
.newsrow:hover .newsrow__t{color:var(--gold-deep);}

/* ---------- Carousel（①再現：矢印＋ドット） ---------- */
.carousel{position:relative;}
.carousel__viewport{overflow:hidden;}
.carousel__track{display:flex;transition:transform .7s cubic-bezier(.5,0,.15,1);}
.carousel__slide{flex:0 0 100%;box-sizing:border-box;}
.carousel__ctrl{display:flex;align-items:center;gap:20px;margin-top:34px;}
.carousel__arrow{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--ink);transition:.35s;font-family:var(--f-en);font-size:18px;}
.carousel__arrow:hover{background:var(--gold);border-color:var(--gold);color:#fff;transform:scale(1.06);}
.carousel__arrow:disabled{opacity:.3;cursor:default;transform:none;background:#fff;color:var(--ink);border-color:var(--line);}
.carousel__dots{display:flex;gap:10px;margin-left:6px;}
.carousel__dot{width:9px;height:9px;border-radius:50%;background:var(--line);border:none;padding:0;transition:.35s;}
.carousel__dot.is-on{background:var(--gold);width:30px;border-radius:5px;}

/* quote card (carousel content) */
.quote{background:#fff;border:1px solid var(--line);padding:clamp(26px,3vw,40px);height:100%;}
.quote__mark{font-family:var(--f-en);font-size:56px;color:var(--gold-soft);line-height:.6;}
.quote__t{font-family:var(--f-min);font-weight:700;font-size:clamp(18px,1.7vw,22px);color:var(--ink);margin:8px 0 14px;line-height:1.6;}
.quote__x{font-size:14.5px;color:var(--ink-soft);line-height:1.95;}
.quote__by{display:flex;align-items:center;gap:14px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);}
.quote__av{width:52px;height:52px;border-radius:50%;flex:none;}
.quote__meta .n{font-weight:700;font-size:14px;color:var(--ink);}
.quote__meta .r{font-size:12px;color:var(--muted);letter-spacing:.04em;}

/* ---------- Table ---------- */
.spec{width:100%;border-collapse:collapse;font-size:15px;}
.spec th,.spec td{text-align:left;vertical-align:top;padding:18px 20px;border-bottom:1px solid var(--line);line-height:1.85;}
.spec th{width:30%;font-weight:700;color:var(--ink);background:var(--paper-warm);font-size:14.5px;letter-spacing:.04em;}
.spec td{color:var(--ink-soft);}

/* ---------- Steps / flow ---------- */
.steps{counter-reset:st;display:grid;gap:0;}
.steps__row{counter-increment:st;position:relative;padding:clamp(20px,2.4vw,30px) 0 clamp(20px,2.4vw,30px) clamp(64px,7vw,92px);
  border-top:1px solid var(--line);}
.steps__row:last-child{border-bottom:1px solid var(--line);}
.steps__row::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:clamp(18px,2.2vw,28px);
  font-family:var(--f-en);font-size:clamp(26px,3vw,40px);color:var(--gold-soft);}
.steps__t{font-family:var(--f-jp);font-weight:800;font-size:18px;color:var(--ink);margin-bottom:4px;letter-spacing:.01em;}
.steps__x{font-size:14.5px;color:var(--ink-soft);}

/* ---------- FAQ ---------- */
.faq-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.faq-nav button,.faq-nav a{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;padding:11px 18px 11px 20px;font-weight:700;font-size:13.5px;
  color:var(--ink-soft);transition:background .3s,color .3s,border-color .3s,box-shadow .3s,transform .3s;letter-spacing:.03em;cursor:pointer;border-radius:999px;}
.faq-nav button .faq-nav__ar,.faq-nav a .faq-nav__ar{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:var(--paper-warm);color:var(--gold-deep);font-family:var(--f-en);font-size:12px;line-height:1;transition:background .3s,color .3s,transform .3s;flex:none;}
.faq-nav button:hover,.faq-nav a:hover{border-color:var(--gold);color:var(--gold-deep);background:#fff;transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(138,106,36,.6);}
.faq-nav button:hover .faq-nav__ar,.faq-nav a:hover .faq-nav__ar{background:var(--gold);color:#fff;transform:translateY(2px);}
.faq-nav button.is-current,.faq-nav a.is-current{border-color:var(--gold);color:#fff;background:var(--gold-deep);}
.faq-nav button.is-current .faq-nav__ar,.faq-nav a.is-current .faq-nav__ar{background:rgba(255,255,255,.24);color:#fff;}
.qa{border-bottom:1px solid var(--line);}
.qa__q{display:flex;gap:16px;align-items:flex-start;width:100%;text-align:left;background:none;border:none;
  padding:24px 0;color:var(--ink);font-weight:800;font-size:clamp(16px,1.5vw,19px);font-family:var(--f-jp);letter-spacing:.01em;}
.qa__q .qmark{font-family:var(--f-en);color:var(--gold);font-size:22px;flex:none;line-height:1.3;}
.qa__q .qtoggle{margin-left:auto;flex:none;width:26px;height:26px;position:relative;transition:transform .4s;}
.qa__q .qtoggle::before,.qa__q .qtoggle::after{content:"";position:absolute;background:var(--gold);top:50%;left:50%;transition:.4s;}
.qa__q .qtoggle::before{width:14px;height:2px;transform:translate(-50%,-50%);}
.qa__q .qtoggle::after{width:2px;height:14px;transform:translate(-50%,-50%);}
.qa.is-open .qtoggle::after{transform:translate(-50%,-50%) scaleY(0);}
.qa__a{max-height:0;overflow:hidden;transition:max-height .5s ease;}
.qa__a-in{padding:0 0 26px 38px;color:var(--ink-soft);font-size:15px;line-height:2;}

/* ---------- Tag/chip lists ---------- */
.chips{display:flex;flex-wrap:wrap;gap:12px;}
.chip{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;background:#fff;border:1px solid var(--line);
  font-weight:700;font-size:14.5px;color:var(--ink);letter-spacing:.03em;}
/* chip hover removed — non-interactive */
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;}

/* ---------- Form (枠のみ) ---------- */
.formwrap{max-width:760px;margin:0 auto;padding:0 clamp(20px,5vw,48px);}
.field{margin-bottom:26px;}
.field__label{display:flex;align-items:center;gap:12px;font-weight:700;font-size:15px;color:var(--ink);margin-bottom:10px;}
.field__req{font-size:10.5px;background:var(--gold);color:#fff;padding:3px 9px;letter-spacing:.08em;}
.field__any{font-size:10.5px;background:var(--gray-bg);color:var(--muted);padding:3px 9px;letter-spacing:.08em;}
.field input,.field textarea,.field select{width:100%;padding:15px 16px;border:1px solid var(--line);background:#fff;
  font-family:inherit;font-size:15px;color:var(--ink);transition:border-color .3s,box-shadow .3s;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(181,138,52,.14);}
.field__note{font-size:12.5px;color:var(--muted);margin-top:7px;}
.field--half{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.checkline{display:flex;flex-wrap:wrap;gap:12px 22px;}
.checkline label{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--ink-soft);white-space:nowrap;}

/* ---------- Footer ---------- */
.site-footer{background:var(--charcoal);color:rgba(255,255,255,.7);position:relative;overflow:hidden;}
.footer-cta{position:relative;background:var(--charcoal-2);}
.footer-cta__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:0;width:100%;}
.footer-cta__col{padding:clamp(48px,6vw,88px) clamp(28px,5vw,72px);}
.footer-cta__col .btnrow .btn{flex:1 1 0;min-width:0;}
.footer-cta__col--tel{border-right:1px solid rgba(255,255,255,.1);}
.footer-cta__en{font-family:var(--f-en);font-size:13px;letter-spacing:.24em;color:var(--gold-soft);text-transform:uppercase;}
.footer-cta__t{font-family:var(--f-jp);font-weight:900;color:#fff;font-size:clamp(22px,2.4vw,32px);margin:8px 0 20px;line-height:1.4;letter-spacing:.01em;}
.footer-cta__num{font-family:var(--f-en);font-size:clamp(30px,4vw,46px);color:#fff;display:flex;align-items:center;gap:12px;letter-spacing:.02em;}
.footer-cta__num svg{width:26px;height:26px;}
.footer-cta__hours{font-size:13px;color:rgba(255,255,255,.6);letter-spacing:.05em;margin-top:6px;}
.footer-main{max-width:1440px;margin:0 auto;padding:clamp(48px,6vw,80px) clamp(28px,5vw,72px) 30px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(32px,4vw,64px);}
.footer-brand .brand__ja{color:#fff;}.footer-brand .brand__en{color:rgba(255,255,255,.6);}
.footer-brand .brand__mark{border-color:var(--gold-soft);color:var(--gold-soft);background:rgba(255,255,255,.05);}
.footer-addr{font-size:13.5px;line-height:2;margin-top:22px;color:rgba(255,255,255,.68);}
.footer-col h4,.footer-col .footer-col__h{font-family:var(--f-en);font-size:12px;letter-spacing:.2em;color:var(--gold-soft);text-transform:uppercase;margin-bottom:18px;}
.footer-col ul li{margin-bottom:12px;}
.footer-col ul li button,.footer-col ul li a{background:none;border:none;color:rgba(255,255,255,.72);font-size:14px;font-family:inherit;
  padding:0;text-align:left;letter-spacing:.03em;transition:color .3s;}
.footer-col ul li button:hover,.footer-col ul li a:hover{color:var(--gold-soft);}
.footer-bar{border-top:1px solid rgba(255,255,255,.1);}
.footer-bar__in{max-width:1440px;margin:0 auto;padding:22px clamp(28px,5vw,72px);display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.5);letter-spacing:.05em;}

/* ---------- Utilities ---------- */
.mt-s{margin-top:14px;}.mt-m{margin-top:26px;}.mt-l{margin-top:44px;}
.btnrow{display:flex;flex-wrap:wrap;gap:16px;}
.aspect-w{aspect-ratio:16/10;}.aspect-sq{aspect-ratio:1/1;}.aspect-p{aspect-ratio:3/4;}.aspect-t{aspect-ratio:4/3;}
/* 平行四辺形クリップ（縦は垂直・上下を斜めカットと同角度で傾ける） */
.para{clip-path:polygon(0 var(--pO,30%),100% 0,100% calc(100% - var(--pO,30%)),0 100%);}
.txt-center{text-align:center;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;}
.split--media{grid-template-columns:minmax(0,480px) 1fr;}
.split--media.split--rev{grid-template-columns:1fr minmax(0,480px);}
.split > *, .split--rev > *{min-width:0;}
.split > .ph, .split--rev > .ph{width:100%;}
.split--rev > *:first-child{order:2;}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .gnav,.header-tel{display:none;}
  .header-cta{display:none;}
  .navtoggle{display:flex;}
}
@media(max-width:860px){
  :root{--header-h:70px;}
  .g-4{grid-template-columns:repeat(2,1fr);}
  .g-3{grid-template-columns:repeat(2,1fr);}
  .footer-main{grid-template-columns:1fr;}
  .footer-cta__grid{grid-template-columns:1fr;}
  .footer-cta__col--tel{border-right:none;border-bottom:1px solid rgba(255,255,255,.1);}
  .split{grid-template-columns:1fr;gap:32px;}
  .flow-head{position:static !important;top:auto !important;}
  .split--rev > *:first-child{order:0;}
  .strength__row{grid-template-columns:1fr;gap:8px;}
  .field--half{grid-template-columns:1fr;}
  .newsband__in{flex-direction:column;}
  .newsband__label{flex-direction:row;align-items:baseline;gap:12px;justify-content:flex-start;padding:15px clamp(20px,5vw,28px);}
  .newsrow{flex-wrap:wrap;gap:10px 18px;min-height:0;padding:15px clamp(20px,5vw,28px);}
  .newsrow__t{white-space:normal;}
}
@media(max-width:560px){
  .g-2{grid-template-columns:1fr;}
  .g-4{grid-template-columns:1fr;}
  .g-3{grid-template-columns:1fr;}
  .btnrow{flex-direction:column;align-items:stretch;}
  .btnrow .btn{width:100%;}
  .income-step{grid-template-columns:1fr !important;gap:14px !important;align-items:stretch !important;}
  .income-step > div{padding:0 !important;}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  [data-reveal]{opacity:1 !important;transform:none !important;}
}
/* ---------- Loading overlay (TOP内・初回描画から全画面) ---------- */
#loader{position:fixed;inset:0;width:100%;height:100%;z-index:10000;
  background:var(--charcoal);display:flex;align-items:center;justify-content:center;
  will-change:opacity,transform,filter,clip-path;}
#loader.is-done{display:none !important;}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:26px;}
.loader__mark{width:clamp(78px,9vw,120px);height:auto;display:block;animation:loaderPulse 1.9s ease-in-out infinite;}
.loader__bar{width:132px;height:2px;background:rgba(255,255,255,.14);overflow:hidden;position:relative;}
.loader__bar::after{content:"";position:absolute;left:-42%;top:0;height:100%;width:42%;background:var(--gold-soft);animation:loaderBar 1.25s cubic-bezier(.6,0,.3,1) infinite;}
.loader__txt{font-family:var(--f-en);letter-spacing:.28em;font-size:11px;color:rgba(255,255,255,.5);}
@keyframes loaderPulse{0%,100%{opacity:.72;transform:scale(1);}50%{opacity:1;transform:scale(1.05);}}
@keyframes loaderBar{0%{left:-42%;}100%{left:100%;}}
/* 終了演出（data-exitで切替：fade / fadeblur / scale / slide / wipe） */
#loader.is-exiting{pointer-events:none;}
#loader[data-exit="fade"].is-exiting{opacity:0;transition:opacity .7s ease;}
#loader[data-exit="fadeblur"].is-exiting{opacity:0;filter:blur(14px);transition:opacity .8s ease,filter .8s ease;}
#loader[data-exit="scale"].is-exiting{opacity:0;transform:scale(1.09);transition:opacity .7s ease,transform .8s cubic-bezier(.7,0,.2,1);}
#loader[data-exit="slide"].is-exiting{transform:translateY(-100%);transition:transform .85s cubic-bezier(.7,0,.2,1);}
#loader[data-exit="wipe"].is-exiting{clip-path:inset(0 0 100% 0);transition:clip-path .9s cubic-bezier(.7,0,.2,1);}
/* FVイントロ：ローディング中は隠し、終了トリガーでJSが順に表示 */
.fv-in{transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1);}
html.is-loading .fv-in{opacity:0;transform:translateY(26px);}
/* メイン英字：TSUCHIYAMA / TRANSPORT を語ごとに左→右スライド＋ブラーで時間差登場 */
.wm-word{display:inline-block;}
.wm-word.fv-in{transition:opacity 1.2s cubic-bezier(.2,.7,.3,1),transform 1.35s cubic-bezier(.16,.84,.32,1),filter 1.2s ease;}
html.is-loading .wm-word.fv-in{opacity:0;transform:translateX(-9vw);filter:blur(18px);}
@media(prefers-reduced-motion:reduce){
  #loader .loader__mark{animation:none;}
  #loader .loader__bar::after{animation:none;left:0;width:100%;}
  html.is-loading .fv-in{opacity:1;transform:none;}
  html.is-loading .wm-word.fv-in{opacity:1;transform:none;filter:none;}
}


/* ===== 25_skin.css ===== */
/* ============================================================
   ★★★ このファイルは【全案件共通の資産】です。案件では編集しないでください ★★★
   ------------------------------------------------------------
   （Claude Code / Claude Design / 手作業、いずれの経路でも同じです）

   ■ 案件ごとの調整は、必ず `override.css` に書いてください。
     読み込み/結合順が  … → style.css → cuezilla-skin.css → 【override.css】  なので、
     override.css に書いた指定は本ファイルに打ち消されません。**案件の上書きが効く唯一の場所です。**
     （例: カード面を白にしたい → override.css に `:root{ --dyn-surface:#fff; }`）

   ■ なぜ編集してはいけないか
     本ファイルを案件で書き換えた瞬間、その案件の skin は共通資産から切り離されます。
     以後、共通側で直した修正（カード高さの不揃い／サイドバーの可読性／
     フォーム送信ボタンの崩れ 等）が **その案件には二度と届きません**。
     実際に S01189 で本ファイルの §0 が案件調整で書き換えられ、共通修正が届かなくなりました。
     「毎案件おなじ崩れを直している」の原因はこれです。

   ■ 共通で直すべき崩れを見つけたら
     案件で握り込まず、正本 `skin/cuezilla-skin.css` へ還流してください（全案件に効きます）。
     還流し忘れると、次の同期でその修正は消えます。

   詳細は R-30（70_運用ルール/運用ルール集.md）。
   ============================================================ */

/* ============================================================
   CueZilla 動的パーツ スキンキット v1.0
   ------------------------------------------------------------
   目的: ブログ/施工実績(blog-ex)/お問い合わせ/パンくず/ページヘッダー等の
         CueZilla 既定パーツを、サイトのトンマナ（ダーク/ライト・ブランド色・
         フォント・角丸）に "自動で寄せる" 汎用CSS。案件ごとの調整を最小化する。

   思想:
     (1) 色は CueZilla テーマ変数(--main-color 等)から自動連動
         → サイトのテーマ設定がそのまま skin にも効く（色は一元管理）
     (2) フォント/角丸/グリッド幅はトークンで指定（テーマ変数に無いため）
     (3) partsNNN は採番が可変だが接尾辞は共通(_post_wrap 等)
         → 属性セレクタ [class*="_xxx"] で番号非依存に当てる（単一属性セレクタまで。積んで詳細度を稼がない）

   ★適用範囲と安全契約（重要・memory: cuezilla-css-safety-contract）:
     ・本skinは「CueZilla既定の動的パーツ」だけを寄せる。サイトのフリーコーディング設計には当てない
       （生成サイトCSSは変数非依存＋具体値＋自作接頭辞クラスで組む＝構造的に非衝突・skinと干渉しない）。
     ・[class*=…]を積んで詳細度を同点/超過させる手法は禁止（脆い・過剰マッチ・アーマーレース）。
       単一の番号非依存セレクタ＋!important1個で当てる（theme_defaultは非importantなので確定勝ち）。
     ・!important可は「レイヤーで越えられない相手」＝theme_default／body内インライン／BSユーティリティ／
       .partsNNN_blog_<ID>(0,3,0) のみ。後者(0,3,0)+!importantには詳細度で負けるため、
       負けた時だけ §14 の手順で実採番(0,3,1)を【案件CSS】に足して勝つ（汎用skinには番号を書かない）。
     ・変数の注意：実機は body内コンポの style 要素の :root が7色(--main-color等)を撒きうる（490件中16件）。
       →§0の--dyn-*はその頁で乗っ取られ得る。動的パーツの色合わせには許容だが、サイト設計の主機構にしない。

   使い方:
     1. §0 のトークンを案件に合わせて調整（ダーク/ライトはプリセットをコピー）
     2. CueZilla テーマカラー(--main-color 等)をブランド値に設定
     3. 本ファイルをサイト全体CSS(AddCssInfo)へ貼る（サイト固有のフリーコーディングCSSの後ろ）
   ============================================================ */


/* ============================================================
   §0  トークン ─ ここだけ案件ごとに調整
   ============================================================ */
:root{
  /* --- 色: CueZilla テーマ変数から自動取得（無い場合のフォールバック付き） ---
     ※これらは【動的パーツの色合わせ用】。生成サイトCSSはこの変数に依存せず具体値で書く（安全契約）。
       実機では body内コンポの style 要素の :root が --main-color 等を頁単位で上書きしうる＝--dyn-*も追従する。 */
  --dyn-bg:        var(--background-color, #ffffff);   /* ページ/セクション背景 */
  --dyn-surface:   var(--temporary-color, #f4f4f2);    /* カード/パネル/入力欄の面 */
  --dyn-text:      var(--text-color, #222222);         /* 本文 */
  --dyn-heading:   var(--text-color, #111111);         /* 見出し */
  --dyn-muted:     var(--sub-color, #8a8a8a);          /* 補助/日付 */
  --dyn-border:    var(--sub-color, #dddddd);          /* 罫線/枠 */
  --dyn-accent:    var(--main-color, #1e3a5f);         /* アクセント（ボタン/チップ/見出しバー） */
  --dyn-accent-2:  var(--link-color, var(--main-color, #1e3a5f)); /* リンク/ホバー */
  --dyn-on-accent: #ffffff;                             /* アクセント面の上の文字 */

  /* --- フォント（site.css の :root に定義があればそれを使用） --- */
  --dyn-font-display: var(--font-display, "Noto Serif JP","Yu Mincho",serif);
  --dyn-font-body:    var(--font-body, "Noto Sans JP","Yu Gothic",sans-serif);
  --dyn-font-numeric: var(--font-numeric, "EB Garamond","Noto Serif JP",serif);

  /* --- 角丸（チップ/ボタン/カード）。角なしにするなら 0 --- */
  --dyn-radius: 6px;
  /* --- 一覧カードの最小幅 / 段組ギャップ --- */
  --dyn-card-min: 300px;
  --dyn-gap: 32px;
}

/* === テーマ プリセット（使う方を §0 の後にコピペして上書き） =========
   【ダーク】
   :root{
     --dyn-bg:#0A0A0A; --dyn-surface:#111110; --dyn-text:#F4F1EC; --dyn-heading:#FAF7F1;
     --dyn-muted:#8C857A; --dyn-border:#3A352D; --dyn-accent:#8E3A22; --dyn-accent-2:#B0533A;
     --dyn-on-accent:#FAF7F1; --dyn-radius:0;
   }
   【ライト】
   :root{
     --dyn-bg:#ffffff; --dyn-surface:#f7f7f5; --dyn-text:#222222; --dyn-heading:#111111;
     --dyn-muted:#8a8a8a; --dyn-border:#e3e3e3; --dyn-accent:#1e3a5f; --dyn-accent-2:#1e3a5f;
     --dyn-on-accent:#ffffff; --dyn-radius:6px;
   }
   ※ CueZilla テーマ変数(--main-color 等)を設定する場合は §0 が自動連動するのでプリセット不要。
   ============================================================ */


/* ============================================================
   §1  パンくず（CueZilla parts###_breadcrumb / p-breadcrumb）
   実markup: div.parts###_breadcrumb.p-breadcrumb.c-breadcrumb
             > ul.p-breadcrumb__inner(BreadcrumbList) > li.p-breadcrumb__item(ListItem)
   CueZilla共通CSSにパンくず装飾は無い → skin側で横並び・区切り・配色を付与
   ============================================================ */
[class*="_breadcrumb"], .p-breadcrumb{ background:var(--dyn-bg) !important; }
.p-breadcrumb__inner{
  list-style:none; margin:0 auto; padding:14px 24px;
  max-width:1200px; display:flex; flex-wrap:wrap; align-items:center;
}
.p-breadcrumb__item{
  display:inline-flex; align-items:center;
  color:var(--dyn-muted) !important; font-family:var(--dyn-font-body);
  font-size:.78rem; letter-spacing:.04em;
}
.p-breadcrumb__item a{ color:var(--dyn-muted) !important; text-decoration:none; }
.p-breadcrumb__item a:hover{ color:var(--dyn-accent-2) !important; text-decoration:underline; }
.p-breadcrumb__item:last-child{ color:var(--dyn-text) !important; }   /* 現在地 */
/* 区切り（2件目以降の前に "›"） */
.p-breadcrumb__item + .p-breadcrumb__item::before{
  content:"\203A"; margin:0 .6em; color:var(--dyn-border) !important; font-size:.95em;
}
.p-breadcrumb meta{ display:none; }   /* schema.org の <meta itemprop="position"> は非表示 */


/* ============================================================
   §2  ページヘッダー（[class*="_article_header"]）画像上のタイトル
   ============================================================ */
[class*="_article_header"] .ja, [class*="_article_header"] h1, [class*="_article_header"] h2{
  color:var(--dyn-heading) !important; font-family:var(--dyn-font-display) !important;
  text-shadow:0 2px 14px rgba(0,0,0,.5) !important;
}
[class*="_article_header"] .en{ color:var(--dyn-muted) !important; font-family:var(--dyn-font-numeric) !important; letter-spacing:.1em; text-shadow:0 1px 10px rgba(0,0,0,.5) !important; }


/* ============================================================
   §3  ページネーション（2系統。テーマCSSの持ち方が違うので扱いを分ける＝崩れ防止）
   ・.pagination_*（enjoyworks系）            … テーマが素 → 体裁＋色を一式付与
   ・[class*="_pagenation"]（parts222/225/228系）… テーマが体裁を持つ（flex/padding/border/白黒ハードコード）
        → レイアウト・サイズはテーマに任せ、ハードコードの白黒(#000/#fff)だけブランド色へ置換（最小限）。
          a/.current 以外（余白用の素の <span>）には触らない＝二重ボックス化を防ぐ。
          --dyn-accent は §0 で var(--main-color) にバインド済み＝サイトのCMS色に自動一致（案件側の手当て不要）。
   ============================================================ */
/* (A) pagination_* 系：テーマ装飾が無いので一式付与 */
.pagination_num, .pagination_prev, .pagination_next{
  font-family:var(--dyn-font-numeric); color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius);
  min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
}
.pagination_num.current{ background:var(--dyn-accent) !important; border-color:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; }
.pagination_num:hover, .pagination_prev:hover, .pagination_next:hover{ border-color:var(--dyn-accent-2) !important; color:var(--dyn-accent-2) !important; }

/* (B) _pagenation 系：色だけ寄せる（ジオメトリはテーマのまま＝箱を再定義しない） */
[class*="_pagenation"] a{ border-color:var(--dyn-accent) !important; color:var(--dyn-text) !important; }
[class*="_pagenation"] span.current, [class*="_pagenation"] .current, [class*="_pagenation"] .active{
  background:var(--dyn-accent) !important; border-color:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important;
}
[class*="_pagenation"] a:hover{ border-color:var(--dyn-accent-2) !important; color:var(--dyn-accent-2) !important; }
.pe-none{ opacity:.3; pointer-events:none; }


/* ============================================================
   §4  ブログ / 施工実績(blog-ex) 一覧（番号非依存）
   ============================================================ */
/* 一覧セクションの地 */
[class*="_post_list"], [class*="_post_wrap"]{ } /* 下で個別指定 */
/* カード並び（最小幅を確保して細くなりすぎない） */
[class*="_post_list"]{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(var(--dyn-card-min), 1fr)) !important; gap:var(--dyn-gap) !important; }
/* カード */
[class*="_post_wrap"]{
  /* カード等寸化：中身を縦に積み、内側の <a>/本文枠を flex で伸長させて高さを揃える（S01189還流） */
  display:flex !important; flex-direction:column;
  margin:0 !important;   /* theme_default の margin-bottom(55px等)残存で最終行カードだけ高さ不揃いになるのを打ち消す */
  width:auto !important; max-width:none !important; text-decoration:none;
  background:var(--dyn-surface) !important; border:1px solid var(--dyn-border) !important;
  border-radius:var(--dyn-radius); overflow:hidden;
  transition:transform .3s ease, border-color .3s ease;
}
[class*="_post_wrap"]:hover{ transform:translateY(-4px); border-color:var(--dyn-accent-2) !important; }
[class*="_post_wrap"] > a{ display:flex; flex-direction:column; flex:1 1 auto; color:inherit; }  /* カード全体ラップ<a>を縦伸長（内容を上下に満たす） */
/* サムネ等寸化：グリッド列の幅から高さを算出（幅制約下＝§6.5の aspect-ratio×height 併用の罠には該当しない） */
[class*="_post_img"]{ width:100%; display:block; border-radius:0; aspect-ratio:16/10; overflow:hidden; }
[class*="_post_img"] img{ width:100%; height:100%; object-fit:cover; display:block; }
/* カード内のテキストに左右余白 */
[class*="_post_status"]{ border:none !important; background:transparent !important; margin:14px 16px 0 !important; padding:0 !important; display:flex !important; flex-wrap:wrap; justify-content:flex-start !important; gap:10px; align-items:center; }
[class*="_post_status"]:has([class*="_title-excerpt"]){ display:block !important; }   /* parts228系「日付｜タイトル」の横並びを解除（:has非対応環境ではflex-wrapで折返し） */
[class*="_post_title-excerpt"]{ padding:10px 16px 16px !important; flex:1 1 auto; }   /* 本文枠を伸長＝カード等寸化の要 */
[class*="_post_status"]:has([class*="_title-excerpt"]) [class*="_title-excerpt"]{ padding:10px 0 16px !important; }   /* 施工実績は左端揃え */
[class*="_post_title"]{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; font-weight:700 !important; line-height:1.5; }
[class*="_post_excerpt"]{ color:var(--dyn-muted) !important; }
[class*="_post_date"]{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; }
/* カテゴリ/ステータスは1チップに。
   テーマは既に _post_category に border:1px solid var(--main-color) を持つ＝枠を“足す”と2重になるので
   同一要素に !important で単一の枠を確定（色は --dyn-accent=var(--main-color) で一致）。幅は % 制約を解除し content 幅に。 */
[class*="_post_category"]:not([class*="_sidebar"]), [class*="_post_status"] > span:last-child{
  /* :not(_sidebar) ＝ この§4チップ装飾が §5 の _sidebar_post_category_count へ漏れ二重適用されるのを防ぐ（S01189還流） */
  width:auto; max-width:none !important;
  background:var(--dyn-bg) !important; border:1px solid var(--dyn-accent) !important;
  border-radius:var(--dyn-radius); padding:2px 8px; color:var(--dyn-accent) !important;
}
.parts-blog-ex-tag_wrap{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 14px; }
.parts-blog-ex_tag{ font-size:.72rem; color:var(--dyn-muted) !important; background:var(--dyn-surface) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:2px 8px; }

/* --- 一覧パーツ固有の崩れ2点（実共有CSS=theme parts222/225/228 を突き合わせて確定）---
   (a) 自動セクション見出し（「ブログ」「施工実績」等）の撤去：
       テーマは `.parts222_section h2 / .parts228_section h2` に
       color:var(--main-color)/font-size:35px/text-align:center を付与し、
       一覧上部に大見出しを自動描画する。自前の下層ヘッダー(hero)と二重化＝崩れ。
       → 一覧パーツ(_post_list を含む _section)直下の素の h2 だけ隠す。
         残したいサイトは案件CSSで個別に復帰。`:has()` 非対応保険に f_meiryo 版も併記。 */
[class*="_section"]:has([class*="_post_list"]) > h2,
[class*="_section"] > h2.f_meiryo{ display:none !important; }
/* (b) flex前提の余白スペーサー ::after の無効化：
       テーマは `.parts228_post_list::after{content:"";width:32.465%}` で flex の最終行詰めをする。
       §4 で _post_list を grid 化すると、この ::after が「空のゴースト列」になり最終行が片寄る。
       → grid では不要なので除去（content:none で擬似要素自体を消す）。 */
[class*="_post_list"]::after{ content:none !important; display:none !important; }


/* ============================================================
   §5  サイドバー / 最近の投稿 / カテゴリ記事数
   ============================================================ */
[class*="_sidebar"], .recent_posts_wrap{ color:var(--dyn-text); }
/* サイドバー見出し（「最近の投稿」「カテゴリ」）の可読性を確保。
   theme_default は `.partsNNN_sidebar h3{ background-color:var(--main-color); color:#fff }` と
   色を直当てするが、§12 の見出しリセットが**背景だけ**を transparent にするため、
   ライト基調の案件では「白地に白文字」で消える（ダーク案件では地に映えるため露見しない）。
   背景は戻さず（skinのフラット化方針を維持）、文字色だけトークンへ寄せて両基調で可読にする。
   あわせて左右パディングも解除する：`padding:15px 20px` は**帯があった前提**の内側余白のため、
   帯を透明化したまま残すと「見出しだけ20px字下げ」になり、直下の日付／タイトルと文頭がズレる。
   （詳細ページ側の .recent_post_title には下で同じ手当てをしており、一覧側だけ取り残されていた） */
[class*="_sidebar"] h3{ color:var(--dyn-heading) !important; padding-left:0 !important; padding-right:0 !important; }
[class*="_sidebar_post_title"], .recent_post_title{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
/* 「最近の投稿」見出し（詳細ページ側）の帯を外して一覧側と体裁を揃える。
   theme_default は `.recent_posts_wrap .recent_post_title{ background-color:var(--main-color); color:#fff }` で帯を敷くが、
   §12 の見出しリセットは (a) 包み(parts166_single_article / parts-blog-ex-single-wrap)が `_section` を含まない
   (b) 要素が <div>（h2/h3でない）── の2点で**届かず**、帯だけが生き残る。
   一方すぐ上の §5 が文字色を --dyn-heading（＝ライトでは濃色）へ寄せるため「濃い帯に濃い文字」となり、
   案件ごとに帯との視認性を見て文字色を手当てする必要があった。帯を外せば一覧（§12で帯が外れる）と揃い、手当ても不要になる。
   ※帯を活かしたい案件は案件側で `background:var(--dyn-accent); color:var(--dyn-on-accent)` を再指定する。 */
.recent_post_title{ background:transparent !important; padding-left:0 !important; }
[class*="_sidebar_date"], .recent_post_date{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; }
/* 記事li の区切り罫線：theme_default が #666 をハードコードしており地に合わず過剰に見える → トークンへ */
[class*="_sidebar"] ul li, .recent_posts_wrap ul li{ border-bottom-color:var(--dyn-border) !important; }
/* カテゴリ右の記事数を視認できるチップに */
[class*="_sidebar_post_category_count"]{ background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:0 8px !important; }
/* カテゴリ一覧 li：theme_default 由来の左右縦罫線(1px solid #666)を除去（下罫線は区切りとして意図的に残す）。S01189還流 */
[class*="category_post_count"] li{ border-left:0 !important; border-right:0 !important; }
/* カテゴリ名と件数チップが重ならないよう両端寄せ。
   あわせて左右パディングを解除：theme_default は `.category_post_count ul li a{ padding:15px 20px }` と
   **帯／箱があった前提**の字下げを持つため、帯を外した状態では
   カテゴリ名だけが 20px 右にずれ、見出し(h3)や「最近の投稿」リストと頭が揃わない。
   上下15pxはタップ領域として残す。 */
[class*="category_post_count"] li a{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding-left:0 !important; padding-right:0 !important; }


/* ============================================================
   §6  詳細ページ（本文 / 署名 / SNS / 詳細内スライダー）
   ============================================================ */
.parts-blog-ex_text{ font-family:var(--dyn-font-body); color:var(--dyn-text) !important; line-height:1.9; }
.parts-blog-ex_text h2, .parts-blog-ex_text h3{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
.signature_wrap{ font-family:var(--dyn-font-display); color:var(--dyn-muted) !important; border-top:1px solid var(--dyn-border); padding-top:16px; }
.slick-prev, .slick-next{ color:var(--dyn-accent-2) !important; }
/* ※詳細本文の親ラッパーが固定class薄め。崩れる場合は実ページで本文コンテナを確認し追補 */


/* ============================================================
   §7  お問い合わせフォーム
   ============================================================ */
.contact_section, [class*="_section_form"], [class*="_section_content"], [class*="_content_wrap"], [class*="_content"]{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; }
[class*="_form_wrap"]{ max-width:720px; margin:0 auto; }
[class*="_form_wrap"] label, [class*="_form_wrap"] dt, [class*="_form_wrap"] .ja, [class*="_form_wrap"] .en{ color:var(--dyn-text) !important; }
/* 入力欄を十分な大きさに（チェック/ラジオは除外） */
[class*="_form_wrap"] dd input:not([type="checkbox"]):not([type="radio"]),
[class*="_form_wrap"] dd select{ width:100% !important; max-width:none !important; padding:14px 16px !important; font-size:16px !important; min-height:54px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); }
[class*="_form_wrap"] textarea, .form_textarea textarea{ width:100% !important; padding:14px 16px !important; font-size:16px !important; min-height:220px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); }
/* チェックボックス/ラジオはサイズ統一 */
[class*="_form_wrap"] input[type="checkbox"], [class*="_form_wrap"] input[type="radio"]{ width:18px !important; height:18px !important; min-height:0 !important; padding:0 !important; margin:0 8px 0 0 !important; vertical-align:-3px; accent-color:var(--dyn-accent); flex:none !important; }
/* 必須バッジ: 文字を中央・折り返さない・角丸はトークン */
.required{ display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important; white-space:nowrap !important; padding:6px 12px !important; border-radius:var(--dyn-radius) !important; background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; }
.error{ color:var(--dyn-accent-2) !important; }
/* 「お問い合わせ内容」を囲む大きな箱(枠線)を撤去 */
.form_textarea, .form_text_dt{ border:none !important; background:transparent !important; }
/* 送信ボタン。★セレクタに包み(.contact_submit 自体)を含めないこと：
   包みは複数ボタンを載せるレイアウト用のdivで、ここを accent で塗ると
   (a) 完了ページ=藍の包みに藍のボタンが乗って同化し、ボタンが消えて見える
   (b) 確認ページ=すぐ下でアウトライン化する「戻る」が藍地に濃色文字となり判読不能（実測 1.01:1）
   になる。当てる先はボタン実体だけでよい（dynamic-form.md §1 の意図も「送信 .contact_submit input = accent地」）。 */
.contact_submit button, .contact_submit input{ background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; border:none !important; border-radius:var(--dyn-radius) !important; }
/* 確認ページの「戻る」は副ボタン（送信＝アクセント／戻る＝アウトライン）＝誤導線防止 */
.contact_submit input[name="back"]{ background:transparent !important; color:var(--dyn-text) !important; border:1px solid var(--dyn-border) !important; }
/* 送信前 disabled（reCAPTCHA未完了）の見え方 */
.contact_submit input[disabled]{ opacity:.5; cursor:not-allowed; }

/* --- フォーム実コードで頻出するが §7本体に無かった部品（parts213等の実装を突き合わせ）--- */
/* ファイル添付の自作UI：受領のインライン style が #eee 地・#999 文字・明るいグラデで固定し、
   ダーク地で白い箱・低コントラストになる。トークンで地・枠・文字を寄せる（label_file_upload に限定）。 */
.label_file_upload{ display:block; width:100%; padding:12px 14px; cursor:pointer;
  background:var(--dyn-surface) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius); }
.label_file_upload button{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius) !important; pointer-events:none; }
.label_file_upload span, #file-chosen, [id$="filechosen"]{ color:var(--dyn-muted) !important; }
.des{ color:var(--dyn-muted) !important; }
/* 注意書き（文字数制限・ファイル名規則等の補助）：色未指定/未定義var(--red)で可読性がばらつくため muted で固定（AA確保色） */
.attention{ color:var(--dyn-muted) !important; }
/* 郵便番号は narrow に保つ：上の入力欄ルール `[class*="_form_wrap"] dd input:not([checkbox]):not([radio])`
   は (0,3,2)+!important で .zip も全幅化し〒[郵便番号][住所]を壊す。これに勝つよう :not() を重ねて
   詳細度を (0,4,2) に上げて .zip だけ幅を戻す（parts219等 form_address系・番号非依存）。 */
[class*="_form_wrap"] dd input.zip:not([type="checkbox"]):not([type="radio"]){ width:9em !important; max-width:9em !important; display:inline-block; margin-right:8px; }
/* プライバシー同意 */
.privacypolicy{ background:var(--dyn-surface) !important; border:1px solid var(--dyn-border); border-radius:var(--dyn-radius); padding:16px; color:var(--dyn-muted) !important; }
.privacypolicy-link{ color:var(--dyn-accent-2) !important; }
/* 電話/メール等の content バー（角丸はトークン） */
[class*="_content"] [class*="btn"], [class*="_content"] a[class*="round"]{ border-radius:var(--dyn-radius) !important; }


/* ============================================================
   §7b  お問い合わせフォーム ─ wpcf7 / .formBox 系（第2系統）
   ------------------------------------------------------------
   【重要】フォームには構造が2系統ある（dynamic-harvest.js の「フォーム系統」で判定）：
     ・§7  = parts_form/dl 系（[class*="_form_wrap"] / dt / dd / .required / .contact_submit）
     ・§7b = wpcf7/.formBox 系（.formWrap > .formBox > dt>label>span.req + dd>input,
              送信=input.wpcf7-submit。SEIKEN/協力会社フォーム等 Contact Form 7 由来）
   §7 の `[class*="_form_wrap"]` は §7b 構造に当たらないため、当該系統では本セクションが要る。
   いずれも番号非依存のセマンティッククラスで記述。
   ============================================================ */
.formWrapbg, .formWrap, .form, [class*="formSec"]{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; }
.formWrap{ max-width:720px; margin:0 auto; }
.formBox{ margin-bottom:20px; }
.formBox dt, .formBox label{ color:var(--dyn-text) !important; }
.formBox dd input:not([type="checkbox"]):not([type="radio"]),
.formBox dd select,
.formWrap input[type="text"], .formWrap input[type="email"], .formWrap input[type="tel"]{
  width:100% !important; max-width:none !important; padding:14px 16px !important; font-size:16px !important;
  min-height:54px !important; background:var(--dyn-surface) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius);
}
.formBox dd textarea, .formWrap textarea{
  width:100% !important; padding:14px 16px !important; font-size:16px !important; min-height:220px !important;
  background:var(--dyn-surface) !important; color:var(--dyn-text) !important;
  border:1px solid var(--dyn-border) !important; border-radius:var(--dyn-radius);
}
.formWrap input[type="checkbox"], .formWrap input[type="radio"]{
  width:18px !important; height:18px !important; min-height:0 !important; padding:0 !important; margin:0 8px 0 0 !important;
  vertical-align:-3px; accent-color:var(--dyn-accent); flex:none !important;
}
/* 必須バッジ（wpcf7系は .req） */
.req, .formBox .req{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important;
  white-space:nowrap !important; padding:6px 12px !important; border-radius:var(--dyn-radius) !important;
  background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important;
}
.wpcf7-not-valid-tip, .wpcf7-response-output{ color:var(--dyn-accent-2) !important; }
/* 送信（Contact Form 7） */
input.wpcf7-submit, .formWrap button[type="submit"]{
  background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important;
  border:none !important; border-radius:var(--dyn-radius) !important;
  min-height:54px !important; padding:14px 28px !important; font-size:16px !important; cursor:pointer;
}
/* プライバシー同意（両系統共通の .privacypolicy* は §7 で適用済） */


/* ============================================================
   §14  自動CSSに負けた時の手順（R-27）※汎用アーマーは持たない＝安全契約
   ------------------------------------------------------------
   CueZilla は body内コンポの style 要素でパーツ単位に `.partsNNN_blog_<ID> .card .card-body{…!important}`
   等の高詳細度(0,3,0)+!important を吐く。§1〜§9 の単一属性セレクタ(0,1,0〜0,2,0)+!important は
   同プロパティで【負ける】（症状：当てているのに反映されない＝崩れの常連）。

   → 【禁止】[class*=…]を積んで(0,3,0)に並べる汎用アーマー（脆い・過剰マッチ・アーマーレース）。
        ＝以前ここにあった `[class*="parts"][class*="_blog"] .card` 等は本契約により撤去した。
        （theme_default 非importantへの色寄せは §8 の単一 `[class*="_blog"] .card`(0,2,0)+!important で足りる）
   → 【正】負けたパーツだけ、harvestで実採番を取り【案件CSS】末尾に (0,3,1) を1個足して確実に勝つ：
        section.parts131415_blog_xxxx .card .card-body{ … !important }   ← 実採番。構造変化に不感
     ※ skin は全案件共通なので案件固有の番号は書かない（負けた時だけ案件側で対処）。
     ※ 採番取得＝verify/dynamic-harvest.js。当て方＝50_CSS・動的ページ/動的ページCSS_実セレクタ参考.md §14。 */
/* 見出しのテーマ装飾(角丸/中央寄せ/背景/罫線)残りをパーツ内でリセット（R-21）。
   theme_default は非importantなので、単一 [class*="_section"] + !important で確定勝ち（[class*]を積まない）。 */
[class*="_section"] h2, [class*="_section"] h3{
  border-radius:0 !important; background:transparent !important; border:none !important; text-align:inherit !important;
}


/* ============================================================
   §8  トップ用 お知らせ/ブログ teaser（notice-news / blog teaser）
   ============================================================ */
.parts040506_notice-news{ background:var(--dyn-bg) !important; color:var(--dyn-text) !important; }
.parts040506_notice-news *{ color:var(--dyn-text) !important; }
.parts040506_notice-news .title, .parts040506_notice-news .title a{ color:var(--dyn-heading) !important; }
.parts040506_notice-news [class*="date"], .parts040506_notice-news .f_yugothic{ font-family:var(--dyn-font-numeric) !important; color:var(--dyn-muted) !important; }
.parts040506_notice-news .more{ white-space:nowrap !important; color:var(--dyn-accent-2) !important; }
.parts040506_notice-news a{ color:var(--dyn-accent-2) !important; }
/* サムネ型ブログ teaser */
[class*="_blog_title_wrap"]{ font-family:var(--dyn-font-display) !important; color:var(--dyn-heading) !important; }
[class*="_blog_thumbnail"]{ border-radius:var(--dyn-radius); }
/* teaser内が Bootstrap .card（既定で白）の場合のダーク/トーン化 */
[class*="_blog"] .card{ background:var(--dyn-surface) !important; border-color:var(--dyn-border) !important; border-radius:var(--dyn-radius) !important; }
[class*="_blog"] .card-title, [class*="_blog"] .card-text{ color:var(--dyn-text) !important; }
[class*="_blog"] .card-title{ font-family:var(--dyn-font-display) !important; }


/* ============================================================
   §9  Bootstrap汎用クラスの地ならし（パーツ内に限定）
       text-dark / bg-light 等がパーツ内でトーンを乱すのを抑える
   ============================================================ */
[class*="parts"] .text-dark{ color:var(--dyn-text) !important; }
[class*="parts"] .bg-light{ background:var(--dyn-surface) !important; }
.card-header.bg-light{ background:var(--dyn-accent) !important; color:var(--dyn-on-accent) !important; }


/* ============================================================
   §10  プライバシーポリシー（templates/privacy-policy.html のフリーコーディング設置版）
   ※CueZilla既定パーツ(item_title/item_description)へ転記する場合は §5 等で別途適用される
   ============================================================ */
.privacy{ max-width:880px; margin:0 auto; padding:64px 24px; color:var(--dyn-text); font-family:var(--dyn-font-body); line-height:1.9; }
.privacy__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,4vw,2.6rem); }
.privacy__subtitle{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:1.2rem; margin-top:8px; }
.privacy__lead{ color:var(--dyn-muted); margin:24px 0 40px; }
.privacy-item{ margin-bottom:32px; }
.privacy-item__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); border-left:3px solid var(--dyn-accent); padding-left:12px; margin-bottom:12px; }
.privacy-item__body{ color:var(--dyn-text); }
/* 原文の (1)(2)… 表記を維持（auto ol の "1." ではなく括弧付き番号で表示） */
.privacy-item__list{ list-style:none; counter-reset:pp; margin:8px 0; padding:0; }
.privacy-item__list li{ counter-increment:pp; padding-left:2.2em; text-indent:-2.2em; margin:4px 0; color:var(--dyn-text); }
.privacy-item__list li::before{ content:"(" counter(pp) ") "; }


/* ============================================================
   §11  下層ヘッダーパーツ（templates/subpage-header.html）
   サイトヘッダーとパンくずの間。フリーコーディングで別パーツ化
   ============================================================ */
/* padding-top に固定ヘッダー高さ(--fixed-header-h)を加算＝固定ヘッダーへのめり込み防止。
   固定ヘッダーが無いサイトは既定0で無影響。固定ヘッダー採用サイトは案件CSSで :root{ --fixed-header-h:88px } 等を設定（R-18）。 */
.subpage-header{ position:relative; padding:calc(72px + var(--fixed-header-h, 0px)) 24px 72px; background:var(--dyn-surface); text-align:center; overflow:hidden; }
.subpage-header__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45; z-index:0; }
.subpage-header__inner{ position:relative; z-index:1; }
.subpage-header__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,5vw,3rem); line-height:1.3; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.subpage-header__en{ font-family:var(--dyn-font-numeric); color:var(--dyn-muted); letter-spacing:.12em; margin-top:8px; }


/* ============================================================
   §12  システム定型ページ：送信完了(thanks) / 404
   templates/thanks.html, templates/404.html 用。トークンスキン準拠
   ============================================================ */
.thanks, .notfound{ max-width:760px; margin:0 auto; padding:calc(80px + var(--fixed-header-h, 0px)) 24px 96px; text-align:center; }
/* CueZilla 既定404（section.not-found）はレイアウトを変えず、固定ヘッダー分の上余白だけ確保（R-18） */
.not-found{ padding-top: calc(var(--fixed-header-h, 0px) + 24px); }
.thanks__title, .notfound__title{ font-family:var(--dyn-font-display); color:var(--dyn-heading); font-size:clamp(1.8rem,5vw,2.6rem); line-height:1.3; margin-bottom:28px; }
.thanks__lead, .notfound__lead{ color:var(--dyn-text); line-height:2; margin-bottom:40px; }
.thanks__action, .notfound__action{ margin-top:8px; }


/* ============================================================
   §13  Bootstrap(テーマ)既定の恒久打ち消し（R-20）
   ------------------------------------------------------------
   CueZillaテーマが読み込む Bootstrap の "素のタグ/汎用クラス" が
   フリーHTMLに当たって崩す症状を、案件ごとの手当て無しで地ならしする。
   ここは確認済みの実害2件（test0605）に限定して打ち消す。
   ※「色/余白/タイポ」を意図して変える装飾は接頭辞クラス(.xw- 等)で
     付け直す＝下記より高詳細度になり、本セクションに勝つ（壊さない）。
   ============================================================ */
/* (a) <mark> / .mark の黄ハイライト背景：ロゴや見出しが黄色い箱になる症状 → 無効化。
       意図的なマーカー装飾は専用クラスで（Bootstrap名 .mark を流用しない＝R-20）。 */
mark, .mark{
  background-color:transparent !important; color:inherit !important;
  padding:0 !important; border-radius:0 !important;
}
/* (b) a:hover が Bootstrap青(#0a58ca)になる症状 → 既定は「ホバーで色を変えない」。
       !important は付けない＝個別のホバー装飾(接頭辞クラスや site.css の指定)が
       そのまま勝ち、未指定リンクだけが青化を免れる（フォールバック）。 */
a:hover{ color:inherit; }

/* (c) 電話番号リンク(tel:)の最低タップ確保（R-24／§5.5-3）。
       本文中インラインでも折り返さない。CTA/ボタン用途は接頭辞クラスで44px確保。 */
a[href^="tel:"]{ white-space:nowrap; }


/* ===== 29_override.css ===== */
/* ============================================================
   29_override.css ─ 案件追補（C）
   O01889 土山貨物運輸有限会社
   結合順は  20_site.css（受領デザイン） → 25_skin.css（共通スキン） → 本ファイル。
   ここは「案件の上書きが効く唯一の場所」（R-30）。skin は絶対に編集しない。

   目次
     §1 CueZilla 自動パンくずの非表示（全ページ・標準ルール）
     §2 <button> → <a> 置換にともなう表示の補正
     §3 ローディングオーバーレイの安全弁（JSが動かない時は出さない）
     §4 ページ内アンカーの停止位置（固定ヘッダー分）
     §5 トップ「新着情報」パーツ（design-parts-52 系）を受領の NEWS帯 意匠へ
     §6 トップ「ブログ抜粋」パーツ（parts131415_blog 系）
     §7 ブログ／コラム一覧・詳細の受け皿
     §8 CueZilla 実機の土台対策
   ============================================================ */


/* ============================================================
   §1 CueZilla 自動パンくずの非表示（全ページ）
   ------------------------------------------------------------
   本サイトは受領デザインの .crumb を各ページ／下層ヘッダーパーツ内に持っている。
   CueZilla が自動出力するパンくずを併置すると二重になるため、全ページで消す（案件共通の標準ルール）。
   ============================================================ */
[class*="_breadcrumb"],
.p-breadcrumb {
  display: none !important;
}


/* ============================================================
   §2 <button> → <a> 置換にともなう表示の補正
   ------------------------------------------------------------
   受領はSPAで、遷移が全部 <button data-nav> だった。多ページ化で <a href> に置き換えたため、
   「button 既定の display」と「a 既定の色」がずれる箇所だけを戻す。
   （クラス側で display / color を持っている .btn / .more-row / .feature-card 等は対象外）
   ============================================================ */
a.card,
a.more-tile {
  display: block;
}
/* ボタン類。<button> は flex アイテムでも中身の幅より縮まないが、<a> は縮んで文字が折り返す
   （実測: ヘッダーの「応募する」が「応募す／る」、フッターCTAの「お問い合わせ」が2行になった）。
   折り返し禁止にすると最小幅＝文字幅になり、受領の見た目に戻る。 */
a.btn,
a.btnlink,
a.header-cta {
  white-space: nowrap;
}
a.header-cta {
  flex: none;
}
a.card,
a.more-tile,
a.more-row,
a.feature-card,
a.brand {
  color: var(--ink);
  text-decoration: none;
}
a.more-tile,
a.more-row,
a.feature-card {
  color: inherit;
}

/* 素の電話番号を tel: リンクにした箇所（R-24）。表示は元のテキストのまま見せる */
.footer-addr a {
  color: inherit;
  text-decoration: none;
}
.footer-addr a:hover {
  color: var(--gold-soft);
}
.spec td a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
}
.spec td a[href^="tel:"]:hover {
  color: var(--gold-deep);
}


/* ============================================================
   §3 ローディングオーバーレイの安全弁
   ------------------------------------------------------------
   #loader は全画面の不透明オーバーレイ。消すのはJSの仕事なので、JSが読み込まれない状況
   （BODY内トラッキング欄への貼り忘れ・JSエラー）では画面が覆われたままになる。
   → 既定では出さず、site.js が html に .js-anim を付けた時だけ表示する。
   ============================================================ */
#loader {
  display: none;
}
html.js-anim #loader {
  display: flex;
}


/* ============================================================
   §4 ページ内アンカーの停止位置（固定ヘッダー分だけ下げる）
   ============================================================ */
#faq-work,
#faq-style,
#faq-pay,
#faq-license,
#faq-place,
#faq-apply {
  scroll-margin-top: calc(var(--header-h) + 24px);
}


/* ============================================================
   §4-2 アクセシビリティの補い（受領デザインに無かった分だけ）
   ------------------------------------------------------------
   ・キーボード操作のフォーカスリング：受領CSSに一切無く、outline:none だけがあった。
     マウス操作では見えない :focus-visible で当てるので、見た目は変わらない。
   ・スマホのタップ領域：フッターのサイトマップが 44px 未満だったため、狭幅でだけ高さを確保する
     （PC幅の余白は受領のまま）。
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.site-header--trans a:focus-visible,
.subhero a:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible {
  outline-color: var(--gold-soft);
}

@media (max-width: 860px) {
  .footer-col ul li {
    margin-bottom: 0;
  }
  .footer-col ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* パンくずの「トップ」等が 32×17px しかなく指で押しにくい（実測7ページ）。
     行の見た目は変えずに、上下の当たり判定だけ広げる。 */
  .crumb a {
    display: inline-block;
    padding: 14px 2px;
    margin: -14px 0;
  }
}


/* ============================================================
   §5 トップ「新着情報」パーツ（design-parts-52 系）を受領の NEWS帯 意匠へ
   ------------------------------------------------------------
   受領トップの .newsband（白帯・上下罫線・左に NEWS/新着情報 のラベル列）は CMS表示のため
   CueZilla のお知らせパーツに置き換えた（R-8）。パーツ側DOMに同じトーンを当てる。
   ★実DOMは投入後に verify/dynamic-harvest.js の harvestEW() で確定させ、必要なら本節を詰める
     （採番と内部クラスはサイトごとに違うため。→ 00★申し送り★.md「投入後にやること」）。
   ============================================================ */
[class*="design-parts-52"] {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
[class*="design-parts-52"] a {
  color: var(--ink);
}
[class*="design-parts-52"] a:hover {
  color: var(--gold-deep);
}
[class*="design-parts-52"] [class*="_date"] {
  font-family: var(--f-en);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--gold-deep);
}
[class*="design-parts-52"] [class*="_category"] {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 2px 10px;
}


/* ============================================================
   §6 トップ「ブログ抜粋」パーツ（parts131415_blog 系）
   ------------------------------------------------------------
   見出し（BLOG／ブログ／記事一覧へ）は直前のフリーHTML（05b 末尾）が担当するので、
   パーツ側の簡易見出しは消す。カードは受領の .card と同じトーンに寄せる。
   ============================================================ */
[class*="parts131415_blog"] [class*="_title_wrap"] {
  display: none !important;
}
[class*="parts131415_blog"] {
  background: transparent;
  padding-top: 0;
}
[class*="parts131415_blog"] [class*="_post_wrap"] {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
}
[class*="parts131415_blog"] [class*="_post_title"] {
  font-family: var(--f-jp);
  font-weight: 800;
  color: var(--ink);
}
[class*="parts131415_blog"] [class*="_post_date"] {
  font-family: var(--f-en);
  color: var(--gold-deep);
}


/* ============================================================
   §7 ブログ／コラム一覧・詳細の受け皿
   ------------------------------------------------------------
   一覧/詳細の骨格は 25_skin.css（共通スキン §4〜§6）が担当。ここでは本サイトの
   書体・罫線色・角なしのトーンだけを合わせる。
   ============================================================ */
:root {
  /* skin §0 のトークンを本サイトの値に寄せる（skin本体は編集しない） */
  --dyn-bg: #ffffff;
  --dyn-surface: #ffffff;
  --dyn-text: #4c4840;
  --dyn-heading: #23211c;
  --dyn-muted: #7d786d;
  --dyn-border: #e7e3d9;
  --dyn-accent: #b58a34;
  --dyn-accent-2: #8a6a24;
  --dyn-on-accent: #ffffff;
  --dyn-radius: 0px;
  --dyn-font-display: "Noto Sans JP", system-ui, sans-serif;
  --dyn-font-body: "Noto Sans JP", system-ui, sans-serif;
  --dyn-font-numeric: "Anton", "Noto Sans JP", sans-serif;
}


/* ============================================================
   §8 CueZilla 実機の土台対策
   ------------------------------------------------------------
   theme_default が body{overflow-x:hidden} を撒くと、固定/追従ヘッダーが
   スクロールコンテナに巻き込まれて追従しなくなる事故がある。
   はみ出しの抑止は残したまま clip に寄せる（clip はスクロールコンテナを作らない）。
   ※ hidden を先に書いているのは clip 非対応ブラウザ向けのフォールバック。
   ============================================================ */
body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* FV */
.hero__wordmark{font-family:var(--f-display);font-size:calc((100vw - 45px) / 9.13);line-height:.82;white-space:nowrap;
  color:#f4efe4;letter-spacing:.004em;position:relative;z-index:3;margin-bottom:clamp(-16px,-2.2vw,-46px);
  padding-left:calc(100vw - 100%);will-change:transform;}
.hero__wordmark .we{display:block;font-family:var(--f-en);font-size:clamp(11px,.95vw,14px);
  letter-spacing:.2em;color:var(--gold-soft);margin-bottom:16px;}
.hero__video{position:relative;z-index:1;width:100%;height:clamp(460px,66vh,760px);
  border-radius:24px 24px 0 0;overflow:hidden;background:var(--charcoal-2);}
.hero__video-media{position:absolute;inset:0;z-index:0;will-change:transform,filter;}
.hero__card{position:absolute;right:0;bottom:clamp(16px,2.4vw,40px);z-index:5;
  max-width:min(460px,80%);background:rgba(22,20,16,.82);backdrop-filter:blur(9px);
  padding:clamp(24px,2.6vw,38px);text-align:right;will-change:transform;}
.hero__card-title{font-family:var(--f-jp);font-weight:900;color:#fff;font-size:clamp(21px,1.9vw,30px);
  line-height:1.5;letter-spacing:.01em;margin:0;}
.hero__card-lead{color:rgba(255,255,255,.82);font-size:clamp(14px,1vw,15.5px);line-height:1.9;margin-top:14px;}
.hero__scroll{position:absolute;left:clamp(20px,4vw,48px);bottom:30px;z-index:4;display:flex;align-items:center;
  gap:12px;color:rgba(255,255,255,.7);font-family:var(--f-en);letter-spacing:.2em;font-size:11px;}
span.line-chunk{display:inline-block;overflow-wrap:anywhere;word-break:normal;}
@media(max-width:860px){
  .hero__wordmark{margin-bottom:-4px;}
  .hero__video{height:clamp(460px,74vh,600px);}
  .hero__card{left:14px;right:14px;bottom:14px;max-width:none;background:rgba(22,20,16,.9);}
  .hero__scroll{display:none;}
}

/* FVイントロ・アニメーション */
.fv-in{transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1);}
html.is-loading .fv-in{opacity:0;transform:translateY(26px);}
.wm-word{display:inline-block;}
.wm-word.fv-in{transition:opacity 1.2s cubic-bezier(.2,.7,.3,1),transform 1.35s cubic-bezier(.16,.84,.32,1),filter 1.2s ease;}
html.is-loading .wm-word.fv-in{opacity:0;transform:translateX(-9vw);filter:blur(18px);}
@media(prefers-reduced-motion:reduce){
  html.is-loading .fv-in{opacity:1;transform:none;}
  html.is-loading .wm-word.fv-in{opacity:1;transform:none;filter:none;}
}

.parts219_section_form dd,.parts213_section_form dd{
        margin-left: 0!important;
}
.parts219_section_form dl,.parts213_section_form dl{
        display: block!important;
}
.design-parts-52_MUW8S514xf .container .content ul li .parts-52-textarea .date{
        color: var(--gold-deep)!important;
    font-weight: bold!important;
}
.parts131415_blog_zc1HoCuMXw.bg-color{
        padding-top: 1px!important;
}
.design-parts-52_MUW8S514xf .container .content h4.banner-area{
    font-size: 15px!important;
}
@media screen and (max-width: 991px){
	.p-not-sticy-ta{
	        position: revert!important;
	}
}
/*html:not(.js-anim) #heroMedia{ visibility:hidden; }*/
.footer-brand .brand__logo{
    filter: none!important;
}
.brand__logo{height:clamp(40px,4vw,52px);width:auto;display:block;transition:opacity .3s;}
.brand:hover .brand__logo{opacity:.72;}

/* ヘッダー・フッターは常に金文字ロゴ（濃色背景でもマークの金が映える） */
.brand__logo--base{display:none;}
.brand__logo--ondark{display:none;}
.brand__logo--gold{display:block;}

/* フッターは少し大きめ */
/*.footer-brand .brand__logo{height:clamp(46px,4.6vw,60px);}*/
.site-header.site-header--trans .img-low{
        display: none!important;
}
.site-header.site-header--solid .img-top{
     display: none!important;
}

/*.hero__loader{position:absolute;inset:0;z-index:4;display:grid;place-items:center;
background:var(--charcoal-2) center/cover no-repeat url(assets/photo-hero.jpeg);
transition:opacity .6s ease;}
.hero__loader::before{content:"";width:44px;height:44px;border-radius:50%;
border:2px solid rgba(255,255,255,.18);border-top-color:var(--gold);
animation:spin .9s linear infinite;}
.hero__video.is-ready .hero__loader{opacity:0;pointer-events:none;}
@keyframes spin{to{transform:rotate(360deg)}}*/