/* 鞍馬興業株式会社 | site design system */
:root {
  --ink: #1f2a33; --ink-2: #2f3d47; --earth: #5a7a8c; --earth-dark: #3f5b6b;
  --paper: #f3f4f0; --white: #fff; --sand: #dee2db; --mist: #ebede8;
  --text: #333d3f; --muted: #66716f; --line: rgba(31,42,51,.14);
  --grey-600: var(--muted); --charcoal: var(--ink); --rust: var(--earth); --rust-deep: var(--earth-dark);
  --max-w: 1180px; --pad: clamp(20px,5vw,64px); --accent: var(--earth);
  --accent-deep: var(--earth-dark); --shadow: 0 18px 42px rgba(17,25,29,.10);
}
body.theme-recruit { --accent:#3f5b6b; --accent-deep:#2c4250; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--text); font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; font-size:15px; line-height:1.9; -webkit-font-smoothing:antialiased; }
body::selection { background:var(--earth); color:#fff; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(100%,var(--max-w)); margin:0 auto; padding-right:var(--pad); padding-left:var(--pad); }
.formwork-rule { height:5px; background:repeating-linear-gradient(90deg,var(--earth) 0 10px,transparent 10px 17px,var(--ink) 17px 19px,transparent 19px 39px); }
.formwork-rule.light { opacity:.75; filter:grayscale(1) brightness(4); }

/* Header */
.site-header { position:sticky; top:0; z-index:50; background:rgba(247,245,239,.95); border-bottom:1px solid rgba(32,48,44,.09); backdrop-filter:blur(12px); }
.header-inner { width:min(100%,var(--max-w)); min-height:84px; margin:0 auto; padding:12px var(--pad); display:flex; align-items:center; justify-content:space-between; gap:30px; }
.logo { display:inline-flex; align-items:center; gap:11px; color:var(--ink); font-size:1rem; font-weight:800; letter-spacing:.08em; line-height:1.25; white-space:nowrap; }
.logo span { color:var(--earth); }
.logo img { width:45px; height:45px; object-fit:contain; border-radius:50%; mix-blend-mode:multiply; }
.nav { display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.nav a { position:relative; padding:8px 0; color:var(--ink); font-size:.8rem; font-weight:700; letter-spacing:.05em; white-space:nowrap; }
.nav a:not(.nav-recruit)::after { content:""; position:absolute; right:0; bottom:3px; left:0; height:2px; background:var(--earth); transform:scaleX(0); transform-origin:right; transition:transform .25s ease; }
.nav a:hover::after,.nav a[aria-current="page"]::after { transform:scaleX(1); transform-origin:left; }
.nav .nav-recruit { padding:9px 17px; background:var(--ink); color:#fff; transition:background .2s ease,transform .2s ease; }
.nav .nav-recruit:hover,.nav .nav-recruit[aria-current="page"] { background:var(--earth); transform:translateY(-1px); }
.nav-toggle { display:none; }

/* Buttons */
.btn,.submit-btn { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:52px; padding:12px 24px; border:1px solid transparent; background:var(--earth); color:#fff; font:inherit; font-size:.86rem; font-weight:800; letter-spacing:.06em; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }
.btn::after { content:"→"; font-size:1.1em; transition:transform .2s ease; }
.btn:hover,.submit-btn:hover { background:var(--earth-dark); box-shadow:0 9px 22px rgba(116,47,26,.22); transform:translateY(-2px); }
.btn:hover::after { transform:translateX(4px); }
.btn-outline { background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-outline:hover { color:#fff; background:var(--ink); box-shadow:none; }

/* Top page */
.hero { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr); min-height:min(690px,calc(100vh - 89px)); background:var(--paper); }
.hero-text { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; padding:clamp(78px,10vw,144px) clamp(20px,7vw,120px); padding-right:clamp(20px,5vw,72px); overflow:hidden; }
.hero-text::before { content:"KURAMA KOGYO"; position:absolute; top:38px; left:40px; color:rgba(32,48,44,.045); font-size:clamp(3.5rem,8vw,8rem); font-weight:900; letter-spacing:-.08em; line-height:1; white-space:nowrap; pointer-events:none; }
.hero-eyebrow,.kicker { position:relative; display:flex; align-items:center; gap:10px; margin-bottom:17px; color:var(--earth-dark); font-size:.72rem; font-weight:900; letter-spacing:.14em; line-height:1.4; }
.hero-eyebrow::before,.kicker::before { content:""; width:30px; height:2px; background:currentColor; }
.hero-text h1 { position:relative; max-width:9em; margin:0 0 25px; color:var(--ink); font-size:clamp(2.4rem,4.8vw,4.6rem); font-weight:900; letter-spacing:-.075em; line-height:1.26; }
.hero-text p { position:relative; max-width:39em; margin:0; color:var(--muted); font-size:.95rem; }
.hero-text p::after { content:""; display:block; width:72px; height:1px; margin-top:29px; background:var(--ink); }
.hero-media { position:relative; isolation:isolate; overflow:hidden; min-height:440px; background:var(--ink); }
.hero-media::before { content:""; position:absolute; z-index:-1; width:min(65vw,720px); aspect-ratio:1; top:6%; right:-26%; border:1px solid rgba(255,255,255,.32); border-radius:50%; box-shadow:0 0 0 55px rgba(255,255,255,.045),0 0 0 112px rgba(255,255,255,.035); }
.hero-media::after { content:"FOUNDATION  /  CIVIL  /  EXTERIOR"; position:absolute; right:32px; bottom:38px; color:rgba(255,255,255,.48); font-size:.65rem; font-weight:700; letter-spacing:.13em; writing-mode:vertical-rl; }
.hero-slideshow { position:absolute; inset:0; }
.hero-slideshow .slide { position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease; }
.hero-slideshow .slide.is-active { opacity:1; }
.hero-slideshow .slide img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hero-slideshow .slide-placeholder { background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 58px),var(--ink); }
.placeholder-block { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-start; padding:clamp(28px,5vw,70px); background:linear-gradient(135deg,transparent 0 57%,rgba(255,255,255,.08) 57% 57.3%,transparent 57.3%),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 58px); color:transparent; font-size:0; }
.placeholder-block::before { content:"確かな施工を、\A 足元から。"; white-space:pre; color:#fff; font-size:clamp(1.8rem,3.2vw,3.25rem); font-weight:900; letter-spacing:-.05em; line-height:1.35; }
.placeholder-block::after { content:"TOYAMA  ·  TAKAOKA"; position:absolute; left:clamp(28px,5vw,70px); bottom:clamp(22px,3vw,40px); color:var(--earth); font-size:.68rem; font-weight:900; letter-spacing:.14em; }
.placeholder-block .tag { display:none; }
.map-placeholder { position:relative; display:flex; min-height:300px; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--line); background:linear-gradient(135deg,#e2e5df 25%,#f3f4f0 25% 50%,#e2e5df 50% 75%,#f3f4f0 75%); background-size:34px 34px; color:var(--ink); font-size:.92rem; font-weight:800; text-align:center; }
.map-placeholder::before { content:"ACCESS"; position:absolute; top:50%; left:50%; color:rgba(32,48,44,.07); font-size:clamp(4rem,12vw,9rem); font-weight:900; letter-spacing:-.08em; transform:translate(-50%,-50%); }
.map-placeholder .tag { position:absolute; bottom:20px; padding:3px 10px; border:1px solid var(--ink); color:var(--ink); font-size:.7rem; letter-spacing:.08em; }
.map-embed { overflow:hidden; border:1px solid var(--line); background:var(--mist); box-shadow:0 10px 25px rgba(17,29,27,.05); }
.map-embed iframe { display:block; width:100%; min-height:400px; border:0; }
.map-address { margin:14px 0 0; color:var(--muted); font-size:.84rem; }

/* Recruit band */
.recruit-banner { position:relative; overflow:hidden; background:var(--earth); color:#fff; }
.recruit-banner::after { content:"RECRUIT"; position:absolute; top:50%; right:-8px; color:rgba(255,255,255,.1); font-size:clamp(5rem,13vw,12rem); font-weight:900; letter-spacing:-.08em; line-height:1; transform:translateY(-50%); }
.recruit-banner-inner { position:relative; z-index:1; width:min(100%,var(--max-w)); margin:0 auto; padding:clamp(43px,6vw,70px) var(--pad); display:grid; grid-template-columns:1.2fr .95fr auto; align-items:center; gap:36px; }
.recruit-banner .kicker { color:#fff; opacity:.76; }
.recruit-banner h2 { margin:0; font-size:clamp(1.45rem,2.7vw,2.3rem); font-weight:900; letter-spacing:-.05em; line-height:1.45; }
.recruit-banner p { margin:0; font-size:.88rem; line-height:1.8; }
.recruit-banner .btn { background:#fff; color:var(--earth-dark); }
.recruit-banner .btn:hover { color:#fff; background:var(--ink); }

/* Sections */
section { padding:clamp(70px,9vw,130px) 0; }
.section-alt { background:var(--mist); }
.section-head { max-width:44em; margin-bottom:clamp(30px,4vw,52px); }
.section-head h2 { margin:0 0 14px; color:var(--ink); font-size:clamp(1.8rem,3.2vw,2.8rem); font-weight:900; letter-spacing:-.055em; line-height:1.35; }
.section-head p { margin:0; color:var(--muted); font-size:.94rem; }
.grid { display:grid; gap:21px; }
.grid-3 { grid-template-columns:repeat(3,1fr); counter-reset:card; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.card { position:relative; min-height:278px; padding:35px 30px 30px; border:1px solid var(--line); background:#fff; overflow:hidden; transition:transform .25s ease,box-shadow .25s ease; }
.card::before { content:"0" counter(card); counter-increment:card; position:absolute; top:-14px; right:14px; color:rgba(32,48,44,.055); font-size:6rem; font-weight:900; line-height:1; }
.card::after { content:""; position:absolute; top:0; left:0; width:44px; height:4px; background:var(--earth); }
.card:hover { box-shadow:var(--shadow); transform:translateY(-5px); }
.card h3 { position:relative; margin:0 0 18px; color:var(--ink); font-size:1.18rem; font-weight:900; letter-spacing:.02em; }
.card h3::before { display:block; margin-bottom:18px; color:var(--earth); font-size:.68rem; letter-spacing:.1em; content:"OUR SERVICE"; }
.card p { position:relative; margin:0; color:var(--muted); font-size:.88rem; }

/* Tables */
.info-table,.job-table { width:100%; border-collapse:collapse; background:#fff; border-top:2px solid var(--ink); box-shadow:0 5px 20px rgba(17,29,27,.035); }
.info-table th,.info-table td,.job-table th,.job-table td { padding:18px 25px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.info-table th,.job-table th { width:190px; color:var(--ink); background:#fbfaf7; font-size:.82rem; font-weight:800; letter-spacing:.05em; }
.info-table td,.job-table td { color:var(--text); font-size:.91rem; }

/* Page headers and works */
.page-head { position:relative; overflow:hidden; padding:clamp(60px,8vw,108px) 0 clamp(48px,6vw,76px); background:var(--ink); color:#fff; }
.page-head::after { content:""; position:absolute; width:min(48vw,610px); aspect-ratio:1; right:8%; bottom:-74%; border:1px solid rgba(255,255,255,.28); border-radius:50%; box-shadow:0 0 0 44px rgba(255,255,255,.04),0 0 0 88px rgba(255,255,255,.025); }
.page-head .wrap { position:relative; z-index:1; }
.page-head .kicker { color:#9dbccb; }
.page-head h1 { margin:0; font-size:clamp(2.1rem,4vw,3.6rem); font-weight:900; letter-spacing:-.06em; line-height:1.2; }
.works-item { display:grid; grid-template-columns:31% 1fr; align-items:center; margin-bottom:22px; border:1px solid var(--line); border-left:4px solid var(--earth); background:#fff; transition:box-shadow .25s ease,transform .25s ease; }
.works-item:hover { box-shadow:var(--shadow); transform:translateY(-3px); }
.works-item .thumb { position:relative; display:flex; aspect-ratio:4/3; min-height:210px; align-items:center; justify-content:center; overflow:hidden; background:var(--ink-2); color:rgba(255,255,255,.78); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-align:center; }
.works-item .thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
/* 縦（ポートレート）写真を使う場合：.works-item に is-portrait クラスを追加すると、
   サムネイル列が縦長の比率になり、縦写真が大きく切れずに収まります。 */
.works-item.is-portrait { grid-template-columns:28% 1fr; }
.works-item.is-portrait .thumb { aspect-ratio:3/4; min-height:200px; }
.works-item .thumb::before { content:""; position:absolute; width:180px; height:180px; border:1px solid rgba(255,255,255,.28); border-radius:50%; transform:translate(20%,-18%); }
.works-item .thumb > * { position:relative; z-index:1; }
.works-item .thumb .tag { display:inline-block; margin-top:8px; padding:2px 8px; border:1px solid rgba(255,255,255,.6) !important; color:rgba(255,255,255,.75) !important; font-size:.65rem; letter-spacing:.12em; }
.works-item .body { padding:31px 34px; align-self:center; }
.works-item h3 { margin:0 0 11px; color:var(--ink); font-size:1.22rem; font-weight:900; }
.works-item .meta { margin-bottom:9px; color:var(--earth-dark); font-size:.76rem; font-weight:800; letter-spacing:.06em; }
.works-item p { margin:0; color:var(--muted); font-size:.89rem; }
.dummy-note { display:inline-flex; margin-bottom:25px; padding:6px 12px; background:#dde6ea; color:#2c4a58; font-size:.75rem; font-weight:700; line-height:1.6; }

/* Forms and call-to-action */
form { max-width:700px; }
.field { margin-bottom:22px; }
.field label { display:block; margin-bottom:7px; color:var(--ink); font-size:.86rem; font-weight:800; }
.field .req { margin-left:7px; color:var(--earth); font-size:.72rem; }
.field input,.field textarea,.field select { width:100%; padding:14px 15px; border:1px solid #c9c8c1; border-radius:0; background:#fff; color:var(--ink); font:inherit; font-size:.94rem; transition:border-color .2s ease,box-shadow .2s ease; }
.field textarea { min-height:155px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--earth); outline:0; box-shadow:0 0 0 3px rgba(185,94,59,.14); }
.submit-btn { border:0; }
.cta-block { position:relative; overflow:hidden; padding:clamp(46px,6vw,70px) var(--pad); background:var(--ink); color:#fff; text-align:center; }
.cta-block::before { content:""; position:absolute; inset:0; opacity:.16; background:repeating-linear-gradient(90deg,transparent 0 58px,#fff 58px 59px); }
.cta-block h3 { position:relative; margin:0 0 20px; font-size:clamp(1.1rem,2vw,1.5rem); font-weight:800; }
.cta-block .btn { position:relative; background:#fff; color:var(--ink); }
.cta-block .btn:hover { color:#fff; background:var(--earth); }

/* Recruit */
.recruit-hero { position:relative; overflow:hidden; padding:clamp(85px,10vw,145px) 0; background:linear-gradient(120deg,var(--ink) 0%,#2c4250 100%); color:#fff; }
.recruit-hero::after { content:"WORK WITH US"; position:absolute; right:-12px; bottom:-30px; color:rgba(255,255,255,.055); font-size:clamp(3.5rem,10vw,9rem); font-weight:900; letter-spacing:-.08em; white-space:nowrap; }
.recruit-hero .wrap { position:relative; z-index:1; }
.recruit-hero .kicker { color:#a9c8d4; }
.recruit-hero h1 { max-width:9em; margin:0 0 22px; font-size:clamp(2.25rem,4.5vw,4rem); font-weight:900; letter-spacing:-.065em; line-height:1.28; }
.recruit-hero p { max-width:44em; margin:0; color:rgba(255,255,255,.78); font-size:.94rem; }
.recruit-hero .recruit-hero-action { margin-top:29px; }
.recruit-hero .recruit-hero-action .btn { background:var(--earth); color:#fff; }
.point-list { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.point-list .point { position:relative; padding:27px 20px; border-top:4px solid var(--earth); background:#fff; }
.point-list .num { margin-bottom:13px; color:var(--earth-dark); font-size:.68rem; font-weight:900; letter-spacing:.1em; }
.point-list h3 { color:var(--ink); }
.workday-section { background:#fff; }
.workday-timeline { max-width:840px; margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.workday-timeline li { display:grid; grid-template-columns:155px 1fr; gap:25px; padding:18px 0; border-bottom:1px solid var(--line); }
.workday-timeline time { color:var(--earth-dark); font-size:.83rem; font-weight:900; letter-spacing:.03em; }
.workday-timeline strong { display:block; color:var(--ink); font-size:.94rem; }
.workday-timeline span { display:block; margin-top:2px; color:var(--muted); font-size:.83rem; }
.message-placeholder-box { display:flex; min-height:210px; flex-direction:column; align-items:center; justify-content:center; border:1px dashed rgba(32,48,44,.32); background:#fff; color:var(--ink); text-align:center; }
.message-placeholder-box span { font-size:1rem; font-weight:900; letter-spacing:.04em; }
.message-placeholder-box p { margin:7px 0 0; color:var(--muted); font-size:.82rem; }
.representative-message { max-width:800px; padding:clamp(28px,5vw,58px); border-top:4px solid var(--earth); background:#fff; box-shadow:0 10px 26px rgba(17,29,27,.05); }
.representative-message p { margin:0 0 1.5em; color:var(--text); font-size:.94rem; }
.representative-message p:first-child { color:var(--ink); font-size:1rem; font-weight:900; }
.representative-message .representative-signature { margin:2.2em 0 0; color:var(--ink); font-size:.87rem; line-height:1.9; }
.representative-message .representative-signature strong { font-size:1.02rem; letter-spacing:.05em; }
.mobile-recruit-cta { display:none; }

/* Footer */
.site-footer { padding:65px 0 24px; background:#121a20; color:#fff; }
.footer-grid { display:grid; grid-template-columns:1.45fr .7fr .85fr; gap:44px; margin:41px 0; }
.footer-logo { width:43px; height:43px; margin-bottom:17px; object-fit:contain; border-radius:50%; filter:invert(1); }
.footer-grid h4 { margin:0 0 14px; color:#fff; font-size:.92rem; font-weight:800; letter-spacing:.04em; }
.footer-grid p,.footer-grid a { color:rgba(255,255,255,.64); font-size:.83rem; line-height:1.9; }
.footer-grid p { margin:0; }
.footer-grid ul { margin:0; padding:0; list-style:none; }
.footer-grid li { margin-bottom:8px; }
.footer-grid a:hover { color:#fff; }
.footer-bottom { display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; padding-top:20px; border-top:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.42); font-size:.7rem; }

@media (max-width:920px) {
  .header-inner { min-height:72px; gap:14px; } .nav { gap:13px; } .nav a { font-size:.73rem; }
  .hero { grid-template-columns:1fr .76fr; } .hero-text { padding-left:var(--pad); }
  .recruit-banner-inner { grid-template-columns:1.15fr 1fr; } .recruit-banner-inner .btn { grid-column:1 / -1; justify-self:start; }
  .grid-3,.point-list { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px) {
  .header-inner { position:relative; } .logo { font-size:.87rem; letter-spacing:.04em; } .logo img { width:38px; height:38px; }
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; font-size:0; }
  .nav-toggle::before { content:""; width:18px; height:12px; border-top:2px solid currentColor; border-bottom:2px solid currentColor; } .nav-toggle::after { content:""; position:absolute; width:18px; height:2px; background:currentColor; }
  .nav { display:none; position:absolute; top:100%; right:0; left:0; padding:11px var(--pad) 18px; flex-direction:column; align-items:stretch; gap:0; border-bottom:1px solid var(--line); background:rgba(247,245,239,.98); box-shadow:0 15px 25px rgba(17,29,27,.08); }
  .nav.open { display:flex; } .nav a { padding:11px 0; border-bottom:1px solid var(--line); font-size:.84rem; } .nav .nav-recruit { margin-top:14px; border:0; text-align:center; }
  .hero { grid-template-columns:1fr; min-height:auto; } .hero-text { min-height:465px; padding-top:88px; padding-bottom:75px; } .hero-text h1 { font-size:clamp(2.25rem,11vw,3.5rem); } .hero-media { min-height:315px; }
  .recruit-banner-inner { grid-template-columns:1fr; gap:21px; } .recruit-banner-inner .btn { grid-column:auto; }
  .grid-3,.grid-2,.point-list { grid-template-columns:1fr; } .card { min-height:0; }
  .works-item { grid-template-columns:1fr; } .works-item.is-portrait { grid-template-columns:1fr; } .works-item .thumb, .works-item.is-portrait .thumb { aspect-ratio:auto; min-height:220px; } .works-item .body { padding:25px 22px; }
  .info-table,.info-table tbody,.info-table tr,.info-table th,.info-table td,.job-table,.job-table tbody,.job-table tr,.job-table th,.job-table td { display:block; width:100%; }
  .info-table th,.job-table th { padding-bottom:5px; border-bottom:0; } .info-table td,.job-table td { padding-top:5px; }
  .footer-grid { grid-template-columns:1fr; gap:30px; }
  body.theme-recruit { padding-bottom:70px; }
  .workday-timeline li { grid-template-columns:108px 1fr; gap:14px; padding:15px 0; }
  .workday-timeline time { font-size:.76rem; }
  .mobile-recruit-cta { position:fixed; right:0; bottom:0; left:0; z-index:70; display:grid; grid-template-columns:1fr 1.2fr; min-height:64px; box-shadow:0 -7px 20px rgba(16,27,25,.16); }
  .mobile-recruit-cta a { display:flex; align-items:center; justify-content:center; color:#fff; font-size:.79rem; font-weight:900; letter-spacing:.04em; }
  .mobile-recruit-call { background:var(--ink); }
  .mobile-recruit-form { background:var(--earth); }
}