/* UNBUILT コーポレートサイト（案2 品格）
   色はロゴのグレーを基準にし、黒は使わない。見出しは明朝、本文はゴシック */

:root{
  --paper:#ffffff;
  --panel:#f6f5f4;
  --brand:#7b7979;      /* ロゴの色 */
  --ink:#565452;        /* 見出し。濃度の上限 */
  --body:#6f6d6b;       /* 本文 */
  --light:#a9a7a4;      /* 補足 */
  --line:rgba(123,121,121,.28);
  --line-soft:rgba(123,121,121,.14);
  --gothic:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN",serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --w:1200px;
  --pad:56px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{background:var(--paper);color:var(--body);font-family:var(--gothic);font-size:15.5px;line-height:2.05;letter-spacing:.03em;-webkit-font-smoothing:antialiased;text-size-adjust:100%}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ol,ul{list-style:none}
table{border-collapse:collapse;width:100%}
h1,h2,h3,h4{font-family:var(--mincho);font-weight:600;color:var(--ink);word-break:auto-phrase}
.in{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* ---------- ヘッダー ---------- */
.hd{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(6px)}
.hd .in{display:flex;align-items:center;gap:36px;height:72px}
.hd-logo img{height:15px;width:auto}
.hd-nav{display:flex;gap:28px;margin-left:auto;font-size:13px;color:var(--ink)}
.hd-nav a:hover{color:var(--brand)}
.hd-menu{display:none}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 32px;background:var(--brand);color:#fff;font-size:14px;letter-spacing:.08em;border:0;cursor:pointer;font-family:var(--gothic);transition:background .2s}
.btn:hover{background:var(--ink)}
.btn-sm{height:38px;padding:0 18px;font-size:12.5px}

/* ---------- ヒーロー ---------- */
.hero{padding:176px 0 120px}
.eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;font-size:12.5px;letter-spacing:.14em;color:var(--light);margin-bottom:40px}
.eyebrow span::before{content:"";display:inline-block;width:1px;height:11px;background:var(--line);margin:0 16px;vertical-align:-1px}
.hero h1{font-size:52px;line-height:1.6;letter-spacing:.04em;white-space:nowrap}
.lead{margin:40px 0 48px;font-size:16px;max-width:40em}
.verbs{display:grid;grid-template-columns:repeat(4,1fr);margin-top:112px;border-top:1px solid var(--line)}
.verbs li{padding:28px 28px 0 0;display:flex;flex-direction:column;gap:6px}
.verbs li + li{padding-left:28px;border-left:1px solid var(--line-soft)}
.v-no{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--light)}
.verbs b{font-family:var(--mincho);font-weight:600;font-size:22px;color:var(--ink)}
.v-desc{font-size:13.5px}

/* ---------- セクション共通 ---------- */
.sec{padding:144px 0}
.sec + .sec{border-top:1px solid var(--line-soft)}
.sec-hd{margin-bottom:72px;max-width:44em}
.sec-en{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--light);margin-bottom:18px}
.sec-hd h2{font-size:34px;line-height:1.5;letter-spacing:.06em}
.sec-lead{margin-top:20px}

/* ---------- 頼めること ---------- */
.svc-group{display:grid;grid-template-columns:200px 1fr;gap:0 64px;padding:48px 0;border-top:1px solid var(--line-soft)}
.svc-verb{font-size:20px;letter-spacing:.08em}
.svc-items{display:flex;flex-direction:column;gap:44px}
.svc-item{display:grid;grid-template-columns:56px 1fr}
.svc-no{font-family:var(--mono);font-size:11px;color:var(--light);padding-top:8px}
.svc-item h4{font-size:21px;margin-bottom:12px;letter-spacing:.04em}
.svc-item p{max-width:42em}
.out{margin-top:16px;font-size:13.5px;color:var(--light)}
.out span{display:block;font-size:11.5px;letter-spacing:.06em}
.note{margin-top:24px;padding-top:40px;border-top:1px solid var(--line-soft);font-size:14.5px}
.note b{display:block;font-family:var(--mincho);font-weight:600;font-size:17px;color:var(--ink);margin-bottom:6px}

/* ---------- 進め方 ---------- */
.steps{position:relative;margin-left:8px;padding-left:48px;border-left:1px solid var(--line)}
.steps li{position:relative;display:grid;grid-template-columns:220px 1fr;gap:4px 48px;padding:0 0 44px}
.steps li::before{content:"";position:absolute;left:-53px;top:12px;width:9px;height:9px;border-radius:50%;background:var(--paper);border:1px solid var(--brand)}
.st-no{grid-column:1;font-family:var(--mono);font-size:11px;color:var(--light)}
.st-name{grid-column:1;font-family:var(--mincho);font-weight:600;font-size:19px;color:var(--ink)}
.st-body{grid-column:2;grid-row:1 / span 2}
.st-out{grid-column:2;font-size:13px;color:var(--light)}
.period{margin-top:8px;padding:28px 32px;background:var(--panel);font-size:14.5px}
.period b{display:block;font-family:var(--mincho);font-weight:600;font-size:16px;color:var(--ink);margin-bottom:4px}
.team{margin-top:96px;max-width:52em}
.team h3{font-size:24px;margin-bottom:20px}
.team-roles{margin:24px 0 32px;font-size:14px}
.team-roles span{display:block;font-size:11.5px;color:var(--light);letter-spacing:.06em}
.principles li{padding:18px 0;border-top:1px solid var(--line-soft);font-size:14.5px}
.principles b{display:block;font-family:var(--mincho);font-weight:600;font-size:17px;color:var(--ink)}

/* ---------- 実績 ---------- */
.works{font-size:14.5px}
.works th{text-align:left;font-weight:400;font-size:12px;letter-spacing:.12em;color:var(--light);padding:0 0 16px}
.works td{padding:22px 32px 22px 0;border-top:1px solid var(--line-soft);vertical-align:top}
.works td:first-child{width:23%;font-family:var(--mincho);font-weight:600;color:var(--ink)}
.works td:nth-child(2){width:40%}
.works tr:not(.measured) td:first-child{padding-left:17px}
.works-legend{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--light)}
.works-legend .mk,.works tr.measured td:first-child::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.works tr.measured td:first-child::before{margin-right:10px;vertical-align:2px}

/* ---------- よくある質問 ---------- */
.faq{max-width:52em}
.faq > div{padding:28px 0;border-top:1px solid var(--line-soft)}
.faq dt{font-family:var(--mincho);font-weight:600;font-size:18px;color:var(--ink);margin-bottom:10px}
.faq dd{font-size:14.5px}

/* ---------- 会社概要 ---------- */
.company-wrap{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:center}
.company-logo{width:300px}
.company > div{display:grid;grid-template-columns:120px 1fr;padding:18px 0;border-top:1px solid var(--line-soft);font-size:14.5px}
.company dt{color:var(--light);font-size:13px}

/* ---------- お問い合わせへの導線 ---------- */
.contact{text-align:center;padding:160px 0;background:var(--panel)}
.contact-box h2{font-size:34px;margin:18px 0 20px;letter-spacing:.06em}
.contact-box p:not(.sec-en){margin-bottom:40px}

/* ---------- フッター ---------- */
.ft{padding:56px 0 64px;border-top:1px solid var(--line);font-size:12.5px;color:var(--light)}
.ft .in{display:grid;grid-template-columns:auto 1fr auto;gap:8px 32px;align-items:center}
.ft-logo{height:13px;width:auto;grid-row:span 2}
.ft-links a:hover{color:var(--ink)}
.ft-copy{grid-column:3;grid-row:1 / span 2}

/* ---------- 下層ページ（問い合わせ・プライバシーポリシー） ---------- */
.page-hd{padding:120px 0 64px}
.page-hd h1{font-size:40px;letter-spacing:.06em;line-height:1.5}
.page-hd p:not(.sec-en){margin-top:20px;max-width:40em}
.page-body{padding:0 0 144px}

.form{max-width:44em;border-top:1px solid var(--line-soft)}
.field{display:grid;grid-template-columns:200px 1fr;gap:8px 32px;padding:24px 0;border-bottom:1px solid var(--line-soft)}
.field > label,.field > .label{padding-top:12px;font-size:14.5px;color:var(--ink)}
.req,.opt{display:inline-block;margin-left:10px;font-size:11px;letter-spacing:.06em;padding:1px 8px;vertical-align:2px}
.req{background:var(--brand);color:#fff}
.opt{border:1px solid var(--line);color:var(--light)}
.form input[type="text"],.form input[type="email"],.form input[type="tel"],.form select,.form textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:12px 14px;border-radius:0;appearance:none}
.form textarea{min-height:200px;line-height:1.9;resize:vertical}
.form select{background-image:linear-gradient(45deg,transparent 50%,var(--brand) 50%),linear-gradient(135deg,var(--brand) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(123,121,121,.15)}
.consent{padding:32px 0 8px;font-size:14.5px}
.consent label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.consent input{margin-top:8px;width:16px;height:16px;accent-color:var(--brand)}
.consent a{text-decoration:underline;text-underline-offset:3px}
.submit{padding-top:32px}
.btn:disabled{opacity:.5;cursor:default}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:28px;padding:22px 26px;background:var(--panel);font-size:14.5px;color:var(--ink)}
.form-status.is-error{border-left:2px solid var(--brand)}

.policy{max-width:44em}
.policy > p{margin-bottom:40px}
.policy ol{counter-reset:p}
.policy li{counter-increment:p;padding:24px 0;border-top:1px solid var(--line-soft)}
.policy h2{font-size:18px;margin-bottom:8px}
.policy h2::before{content:counter(p,decimal-leading-zero);font-family:var(--mono);font-weight:400;font-size:11px;color:var(--light);margin-right:14px;vertical-align:3px}
.policy .date{margin-top:40px;font-size:13.5px;color:var(--light)}

/* ---------- タブレット ---------- */
@media (max-width:1080px){
  :root{--pad:40px}
  .hd-nav{gap:20px}
  .hero h1{font-size:44px}
  .svc-group{grid-template-columns:160px 1fr;gap:0 40px}
  .steps li{grid-template-columns:180px 1fr;gap:4px 32px}
  .company-wrap{gap:48px}
}

/* ---------- スマートフォン ---------- */
@media (max-width:820px){
  :root{--pad:22px}
  body{font-size:15px;line-height:1.95}
  html{scroll-padding-top:72px}

  .hd .in{height:60px;gap:16px}
  .hd-nav,.hd .btn-sm{display:none}
  .hd-menu{display:block;margin-left:auto;position:relative}
  .hd-menu summary{list-style:none;cursor:pointer;font-size:13px;letter-spacing:.1em;color:var(--ink);padding:8px 0}
  .hd-menu summary::-webkit-details-marker{display:none}
  .hd-menu[open] summary{color:var(--light)}
  .hd-menu nav{position:fixed;left:0;right:0;top:60px;background:var(--paper);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line);padding:8px var(--pad) 24px;display:flex;flex-direction:column}
  .hd-menu nav a{padding:14px 0;border-bottom:1px solid var(--line-soft);font-family:var(--mincho);font-weight:600;font-size:16px;color:var(--ink)}
  .hd-menu nav .btn{margin-top:20px;border:0;font-family:var(--gothic);font-weight:400;font-size:14px;color:#fff}

  .hero{padding:88px 0 72px}
  .eyebrow{margin-bottom:28px}
  .hero h1{font-size:27px;line-height:1.65;white-space:normal}
  .hero h1 br{display:none}
  .lead{margin:28px 0 36px;font-size:15px}
  .lead br{display:none}
  .verbs{grid-template-columns:1fr 1fr;margin-top:64px}
  .verbs li,.verbs li + li{padding:22px 16px 22px 0;border-left:0}
  .verbs li:nth-child(even){padding-left:16px;border-left:1px solid var(--line-soft)}
  .verbs li:nth-child(n+3){border-top:1px solid var(--line-soft)}
  .verbs b{font-size:19px}
  .v-desc{font-size:12.5px;line-height:1.7}

  .sec{padding:88px 0}
  .sec-hd{margin-bottom:44px}
  .sec-hd h2{font-size:27px}

  .svc-group{grid-template-columns:1fr;gap:20px;padding:36px 0}
  .svc-verb{font-size:17px}
  .svc-items{gap:32px}
  .svc-item{grid-template-columns:36px 1fr}
  .svc-item h4{font-size:18px}

  .steps{padding-left:28px}
  .steps li{grid-template-columns:1fr;gap:2px;padding-bottom:36px}
  .steps li::before{left:-33px}
  .st-body,.st-out{grid-column:1;grid-row:auto}
  .st-body{margin-top:6px}
  .period{padding:22px}
  .team{margin-top:64px}

  .works,.works tbody,.works tr,.works td{display:block;width:auto !important}
  .works thead{display:none}
  .works tr{padding:20px 0;border-top:1px solid var(--line-soft)}
  .works td{padding:0;border:0}
  .works tr:not(.measured) td:first-child{padding-left:17px}
  .works td:nth-child(2){margin:6px 0 4px;color:var(--ink)}
  .works td:nth-child(3){font-size:13px;color:var(--light);padding-left:17px}
  .works td:nth-child(2){padding-left:17px}

  .faq dt{font-size:16.5px}
  .company-wrap{grid-template-columns:1fr;gap:40px}
  .company-logo{width:220px}
  .company > div{grid-template-columns:1fr;gap:2px}

  .contact{padding:96px 0}
  .contact-box h2{font-size:26px}

  .ft .in{grid-template-columns:1fr;gap:10px}
  .ft-logo{grid-row:auto}
  .ft-copy{grid-column:1;grid-row:auto;margin-top:8px}

  .page-hd{padding:72px 0 40px}
  .page-hd h1{font-size:30px}
  .page-body{padding-bottom:96px}
  .field{grid-template-columns:1fr;gap:10px;padding:20px 0}
  .field > label,.field > .label{padding-top:0}
  .btn{width:100%}
  .hero .btn{width:auto}
}