/* ── サイト共通の版面 ─────────────────────────────────────────────────
   参考（アトリエシーユー）の骨格に寄せた構成。全ページで使う。
   ・内容の柱は1242px、左右の余白は最大69px
   ・本文は約28字で折る細い柱
   ・大きな写真を左右交互に置き、片側は画面の端まで出す
   ・節は背が高く、ひとつだけ暗い帯を挟む
   写真はすべて差し替え前提のグレー枠。枠の中に何の写真を入れるか書いてある。 */

.rc{--gut:clamp(20px,4.8vw,69px);--no:28px;--edge:calc(-1 * (var(--gut) + max(0px,(100vw - 1242px)/2)));
  max-width:1242px;margin-inline:auto;padding-inline:var(--gut)}
.rc-sec{padding-block:clamp(60px,8.4vw,126px);overflow-x:hidden}
.rc-rule{border-top:1px solid var(--rule)}

/* 節のしるし（右肩の小さな英字） */
.rc-mark{font-family:var(--lat);font-size:13px;letter-spacing:.14em;color:var(--ink-3);
  text-align:right;margin-bottom:clamp(30px,4.4vw,60px);max-width:none}

/* 見出しの塊 */
.rc-h{font-size:clamp(24px,3vw,37px);line-height:1.64;letter-spacing:.012em;font-weight:700}
.rc-sub{font-family:var(--lat);font-size:13px;letter-spacing:.16em;color:var(--ink-3);
  margin-top:20px;max-width:none}
.rc-body{font-size:16px;line-height:2.0;color:var(--ink-2);max-width:28em;
  margin-top:clamp(32px,4.6vw,66px)}
.rc-body p + p{margin-top:1.55em}
.rc-note{font-family:var(--jp-fx);font-size:14px;line-height:1.9;color:var(--blue-deep);
  margin-top:30px;max-width:28em}

/* 写真と文章の二段組み */
.rc-duo{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(30px,5.4vw,84px);align-items:center}
.rc-duo--flip > .rc-duo__fig{order:2}

/* 写真の差し替え枠 */
.ph2{position:relative;background:var(--rule);display:grid;place-items:center;overflow:hidden}
.ph2::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.4) 0 13px,transparent 13px 26px)}
.ph2 b{position:relative;z-index:1;font-family:var(--jp-fx);font-size:13px;font-weight:700;
  letter-spacing:.09em;line-height:1.85;color:#4E5964;background:#fff;
  padding:11px 19px;text-align:center;max-width:82%}
.ph2--tall{aspect-ratio:3/4}
.ph2--wide{aspect-ratio:16/10}
.ph2--band{aspect-ratio:16/6.4}
.ph2--sq{aspect-ratio:1/1}
.ph2--bleedL{margin-left:var(--edge)}
.ph2--bleedR{margin-right:var(--edge)}

/* 暗い帯 */
.rc-dark{background:var(--ink);color:#DCE4EA}
.rc-dark .rc-h{color:#fff}
.rc-dark .rc-mark,.rc-dark .rc-sub{color:#8FA3B3}
.rc-dark .rc-body{color:#C7D1D9}
.rc-dark .rc-note{color:#7FAED4}
.rc-dark .rc-rows,.rc-dark .rc-row{border-color:rgba(255,255,255,.19)}
.rc-dark .rc-row__no{color:#7FAED4}
.rc-dark .rc-row__h{color:#fff}
.rc-dark .rc-row__p{color:#C7D1D9}
.rc-dark .rc-list,.rc-dark .rc-list li{border-color:rgba(255,255,255,.19)}
.rc-dark .rc-list li{color:#fff}

/* 罫で区切る行（番号／見出し／説明） */
.rc-rows{margin-top:clamp(42px,5.8vw,84px);border-top:1px solid var(--rule)}
.rc-row{display:grid;grid-template-columns:86px minmax(0,1fr);
  gap:2px clamp(18px,3vw,46px);padding-block:clamp(28px,3.8vw,52px);
  border-bottom:1px solid var(--rule)}
.rc-row__no{font-family:var(--lat);font-size:var(--no);font-weight:400;color:var(--ink-3);
  line-height:1.1;grid-row:span 2;max-width:none}
.rc-row__h{font-size:clamp(17px,1.75vw,20px);line-height:1.62;font-weight:700}
.rc-row__p{font-size:16px;line-height:2.0;color:var(--ink-2);max-width:30em;margin-top:15px}

/* 箇条の柱 */
.rc-list{list-style:none;border-top:1px solid var(--rule)}
.rc-list li{font-family:var(--jp-fx);font-size:16px;line-height:1.8;
  padding:clamp(17px,2.1vw,25px) 0;border-bottom:1px solid var(--rule)}

/* 大きな数字（日給） */
.rc-fig{font-family:var(--lat);font-variant-numeric:tabular-nums;font-weight:700;
  font-size:clamp(42px,5.4vw,70px);line-height:1;letter-spacing:-.01em;max-width:none}
.rc-fig__u{font-family:var(--jp-fx);font-size:var(--no);font-weight:700;letter-spacing:.06em;margin-left:.22em}
.rc-fig__n{font-family:var(--jp-fx);font-size:13px;font-weight:700;letter-spacing:.1em;
  margin-left:.5em;color:#8FA3B3}
.rc-figlab{font-family:var(--jp-fx);font-size:13px;font-weight:700;letter-spacing:.14em;
  color:#8FA3B3;max-width:none}

/* 電話のかたまり */
.rc-tel{font-family:var(--lat);font-variant-numeric:tabular-nums;font-weight:700;
  font-size:clamp(34px,4.3vw,48px);line-height:1.1;color:var(--ink);
  text-decoration:none;display:inline-block;max-width:none}
.rc-dark .rc-tel{color:#fff}
.rc-cta{display:inline-flex;align-items:center;gap:14px;font-family:var(--jp-fx);
  font-size:14px;font-weight:700;letter-spacing:.06em;text-decoration:none;
  background:#fff;color:var(--ink);padding:19px 30px;margin-top:38px}
.rc-cta span{font-family:var(--lat);font-variant-numeric:tabular-nums;font-size:20px;
  color:var(--blue-deep)}

@media (max-width:860px){
  .rc-duo{grid-template-columns:1fr;gap:34px}
  .rc-duo--flip > .rc-duo__fig{order:0}
  .ph2--bleedL,.ph2--bleedR{margin-inline:calc(-1 * var(--gut))}
  .ph2--tall{aspect-ratio:4/5}
  .ph2--band{aspect-ratio:16/10}
  .rc-row{grid-template-columns:54px minmax(0,1fr)}
  .rc{--no:21px}
  .rc-fig__n{display:block;margin-left:0;margin-top:12px}
  .rc-mark{text-align:left}
  .rc-gal{grid-template-columns:1fr !important}
}

/* 写真を3枚並べる帯 */
.rc-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}


/* ── ここから全ページ共通の追加分 ────────────────────────────────── */

/* パンくず */
.rc-crumbs{font-family:var(--jp-fx);font-size:13px;letter-spacing:.06em;max-width:none;
  margin-bottom:clamp(26px,3.4vw,44px)}
.rc-crumbs a{color:var(--ink-2);text-decoration:none}
.rc-crumbs a:hover{color:var(--blue-deep)}
.rc-crumbs span{color:var(--ink-3)}
.rc-dark .rc-crumbs a{color:#C7D1D9}
.rc-dark .rc-crumbs a:hover{color:#fff}
.rc-dark .rc-crumbs span{color:#8FA3B3}

/* 見出しの上に出す日本語のキッカー */
.rc-kick{font-family:var(--jp-fx);font-size:13px;font-weight:700;letter-spacing:.14em;
  color:var(--blue-deep);max-width:none;margin-bottom:18px}
.rc-dark .rc-kick{color:#7FAED4}

/* 文章だけの柱（見出しの下に本文を2段で流すとき） */
.rc-lead{font-size:16px;line-height:2.0;color:var(--ink-2);max-width:30em;margin-top:clamp(28px,3.6vw,48px)}
.rc-lead p + p{margin-top:1.55em}
.rc-dark .rc-lead{color:#C7D1D9}

/* 二段組みを上揃えにする（本文の量が左右で違うとき） */
.rc-duo--top{align-items:start}
/* 文章どうしの二段（写真なし） */
.rc-duo--text{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}

/* 内容の柱いっぱいに広げるもの（表・工程図） */
.rc-wide{margin-top:clamp(38px,5vw,72px)}
.rc-wide .titleblock{max-width:none}

/* 釦の並び */
.rc-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,4vw,48px)}

/* 脚注・ただし書き */
.rc-fine{font-family:var(--jp-fx);font-size:14px;line-height:1.85;color:var(--ink-2);
  margin-top:20px;max-width:34em}
.rc-dark .rc-fine{color:#C7D1D9}

/* 写真を2枚並べる帯 */
.rc-gal2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
@media (max-width:860px){ .rc-gal2{grid-template-columns:1fr} .rc-duo--text{grid-template-columns:1fr} }

/* 写真の枠に実写真が入るときも、枠と同じ比率で収める */
.ph2 > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}

/* ── 事業内容ページ：図を主役にするための部品 ───────────────────── */
.rc-tint{background:var(--blue-wash)}
.rc-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(18px,2.4vw,34px);
  border-top:1px solid var(--rule-hard);margin-top:clamp(38px,5vw,72px)}
.rc-step{padding-block:clamp(28px,3.6vw,48px);padding-right:clamp(16px,2vw,28px);
  border-right:1px solid var(--rule-fine)}
.rc-step:last-child{border-right:0;padding-right:0}
.rc-step__no{font-family:var(--lat);font-size:13px;font-weight:700;letter-spacing:.14em;
  color:var(--blue);max-width:none}
.rc-step__no--end{color:var(--signal)}
.rc-step__h{font-size:clamp(17px,1.75vw,20px);line-height:1.6;font-weight:700;margin-top:12px}
.rc-step__p{font-size:14px;line-height:1.95;color:var(--ink-2);margin-top:14px}
@media (max-width:860px){
  .rc-steps{grid-template-columns:1fr}
  .rc-step{border-right:0;padding-right:0;border-bottom:1px solid var(--rule-fine)}
  .rc-step:last-child{border-bottom:0}
}

/* ── 会社概要ページ：静かな版面のための部品 ─────────────────────── */
.rc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 clamp(24px,3.4vw,52px);border-top:1px solid var(--rule-hard);margin-top:clamp(38px,5vw,72px)}
.rc-split > *{padding-block:clamp(30px,3.8vw,50px)}
.rc-split > *:first-child{border-right:1px solid var(--rule-fine);padding-right:clamp(20px,2.6vw,40px)}
@media (max-width:860px){
  .rc-split{grid-template-columns:1fr}
  .rc-split > *:first-child{border-right:0;padding-right:0;border-bottom:1px solid var(--rule-fine)}
}

/* ── 施工実績ページ：写真の格子（6枠） ────────────────────────────── */
.rc-gal6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);
  margin-top:clamp(38px,5vw,72px)}
@media (max-width:860px){ .rc-gal6{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ── お問い合わせページ：連絡手段を横に3つ並べる ─────────────────── */
.rc-tri{display:grid;grid-template-columns:1.2fr 1fr .9fr;gap:0 clamp(20px,2.8vw,42px);
  border-top:1px solid var(--rule-hard);margin-top:clamp(38px,5vw,66px)}
.rc-tri > *{padding-block:clamp(30px,3.8vw,48px);padding-right:clamp(18px,2.4vw,36px);
  border-right:1px solid var(--rule-fine)}
.rc-tri > *:last-child{border-right:0;padding-right:0}
@media (max-width:860px){
  .rc-tri{grid-template-columns:1fr}
  .rc-tri > *{border-right:0;padding-right:0;border-bottom:1px solid var(--rule-fine)}
  .rc-tri > *:last-child{border-bottom:0}
}

/* ── 採用ページ：募集条件をひと目で読ませる帯 ───────────────────── */
.rc-spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--rule-hard);margin-top:clamp(32px,4.2vw,54px)}
.rc-spec > div{padding:clamp(24px,3vw,34px) clamp(18px,2.2vw,30px) clamp(24px,3vw,34px) 0;
  border-bottom:1px solid var(--rule);border-right:1px solid var(--rule-fine)}
.rc-spec > div:nth-child(3n){border-right:0;padding-right:0}
.rc-spec__k{font-family:var(--jp-fx);font-size:13px;font-weight:700;letter-spacing:.14em;
  color:var(--blue-deep);max-width:none}
.rc-spec__v{font-size:16px;line-height:1.75;font-weight:700;margin-top:12px}
.rc-spec__n{font-size:14px;line-height:1.8;color:var(--ink-2);margin-top:8px}
@media (max-width:860px){
  .rc-spec{grid-template-columns:1fr}
  .rc-spec > div{border-right:0;padding-right:0}
}

/* ── 役割ごとの段をそろえる（台帳の指摘に合わせた最後の詰め） ───── */
/* 釦は 14 / 20 / 28 / 48 の4段に統一する */
.btn{font-size:14px}
/* 見出しh3 は工程図の19pxに寄せる */
.rc-step__h{font-size:19px}
/* 節のしるしと副題は本文と同じ灰に寄せ、似て非なる色を減らす */
.rc-mark,.rc-sub,.rc-crumbs span{color:#4E5964}

/* ページの顔になる見出しは一段大きく（h1は各ページ1つなので段は増えない） */
h1.rc-h{font-size:clamp(29px,3.9vw,50px);line-height:1.44}

/* ヘッダーのロゴ：マークの同心円が42pxでは1px前後になって潰れるため56pxにした。
   ただし狭い画面ではヘッダーが画面を占めるので、そこだけ小さく保つ
   （スマホは画素密度が高く、44pxでも輪はつぶれない）。 */
@media (max-width:860px){
  header .logo{height:44px !important}
}
/* フッターのロゴも同じ理由で56pxにする。狭い画面では従来どおり。 */
@media (max-width:860px){
  footer .logo{height:48px !important}
}

/* 写真の切り取り位置：顔はたいてい上寄りにあるので、上下を切るときは下を多めに切る。
   スマホでは縦長の枠を4:3にしていたため、縦長写真の顔が切れていた → 4:5に戻した。 */
.ph2 > img{object-position:50% 28%}

/* 募集条件：2列目・3列目の文字が左の縦罫にくっついていたので、左にも余白をとる */
.rc-spec > div:not(:nth-child(3n+1)){padding-left:clamp(18px,2.2vw,30px)}
@media (max-width:860px){ .rc-spec > div:not(:nth-child(3n+1)){padding-left:0} }

/* 採用ページのヒーロー：黒地をやめて白地に。電話ボタンは青地に白文字 */
.rc-hero-w .rc-figlab{color:var(--blue-deep)}
.rc-hero-w .rc-fig__n{color:var(--ink-2)}
.rc-hero-w .rc-cta{background:var(--blue);color:#fff}
.rc-hero-w .rc-cta span{color:#fff}
.rc-hero-w .rc-note{color:var(--ink-2)}

/* ── スマホのメニュー：「≡」ボタンにしまう（menu.js が header に has-menu を付けたときだけ） ── */
.menu-btn{display:none}
@media (max-width:860px){
  header.has-menu .menu-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;margin-left:auto;padding:0 10px;border:1px solid var(--rule);
    background:var(--sheet);border-radius:4px;cursor:pointer;order:2}
  .menu-btn span{display:block;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
  header.open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.open .menu-btn span:nth-child(2){opacity:0}
  header.open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  header.has-menu .gnav{display:none !important}
  header.has-menu.open .gnav{display:flex !important;flex-direction:column;align-items:stretch !important;
    flex-basis:100% !important;order:3;margin:6px 0 4px !important;gap:0 !important}
  header.has-menu.open .gnav nav{flex-direction:column;align-items:stretch !important;gap:0 !important;flex-wrap:nowrap !important}
  header.has-menu.open .gnav nav a{display:block;font-size:16px !important;padding:15px 2px !important;
    border-bottom:1px solid var(--rule-fine) !important;border-top:0 !important}
  header.has-menu.open .gnav nav a[aria-current="page"]{color:var(--blue-deep) !important}
  header.has-menu.open .gnav > a.num{display:block;font-size:22px !important;padding:16px 2px 6px !important}
}
@media (prefers-reduced-motion:reduce){ .menu-btn span{transition:none} }