/* ピットワークス — モダン B2B（白 × ティール、ゴシック） */
:root {
  --teal: #00a8cc;
  --teal-deep: #0089a7;
  --teal-soft: #e3f5fa;
  --ink: #1b2a30;
  --ink-soft: #5c6b71;
  --bg: #ffffff;
  --bg-soft: #f4f8fa;
  --line: #e1ebee;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.85;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
.pw-wrap { width: min(1080px, 90%); margin-inline: auto; }

.pw-ey { color: var(--teal-deep); font-size: .74rem; font-weight: 700; letter-spacing: .28em; margin: 0 0 .5rem; text-transform: uppercase; }
.pw-h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 700; line-height: 1.4; letter-spacing: .02em; margin: 0; }
.pw-sec-head.pw-center { text-align: center; }
.pw-sec-head.pw-light .pw-h2 { color: #fff; }
.pw-sec-head.pw-light .pw-ey { color: #8fe0f0; }
.pw-accent { color: var(--teal); }

/* header */
.pw-head { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.pw-head-in { width: min(1080px, 90%); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; flex-wrap: wrap; }
.pw-logo { text-decoration: none; display: flex; flex-direction: column; line-height: 1.15; }
.pw-logo-en { font-size: 1.32rem; font-weight: 800; letter-spacing: .04em; color: var(--ink); }
.pw-dot { color: var(--teal); }
.pw-logo-ja { font-size: .62rem; letter-spacing: .3em; color: var(--ink-soft); }
.pw-nav { display: flex; gap: 1.5rem; font-size: .9rem; font-weight: 600; }
.pw-nav a { text-decoration: none; color: var(--ink-soft); padding: .2rem 0; border-bottom: 2px solid transparent; transition: .2s; }
.pw-nav a:hover { color: var(--teal-deep); border-color: var(--teal); }

/* hero */
.pw-hero {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
  overflow: hidden;
}
/* 背景イラストは中央コンテンツ列(.pw-hero-in)の右側に配置し、文言の右に来るようにする。
   白フェードは使わず、文言と重ならない幅のときだけ表示する。 */
.pw-hero-in {
  width: min(1080px, 90%);
  margin-inline: auto;
  padding: 5.5rem 0 5rem;
  position: relative;
  z-index: 2;
  background-image: url("/images/hero-bg.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 80%;
}
.pw-hero-ey { color: var(--teal-deep); font-weight: 700; letter-spacing: .2em; font-size: .82rem; margin: 0 0 1.1rem; }
.pw-hero-ttl { font-size: clamp(2.2rem, 6vw, 3.8rem); font-weight: 800; line-height: 1.32; letter-spacing: .02em; margin: 0; }
.pw-hero-lead { margin: 1.6rem 0 0; max-width: 38rem; color: var(--ink-soft); font-size: 1.02rem; }
/* テキストとイラストが重なりうる幅では背景イラストを外す */
@media (max-width: 1024px) {
  .pw-hero-in { background-image: none; }
}

/* section spacing */
.pw-about, .pw-service, .pw-flow, .pw-company { padding: 5rem 0; }

/* about */
.pw-about { background: #fff; }
.pw-about-grid { display: grid; grid-template-columns: 340px 1fr; gap: 3rem; align-items: start; }
.pw-about-body p { margin: 0 0 1.2rem; color: #36454b; }
.pw-about-body p:last-child { margin-bottom: 0; }
@media (max-width: 820px) { .pw-about-grid { grid-template-columns: 1fr; gap: 1.4rem; } }

/* service cards */
.pw-service { background: var(--bg-soft); }
.pw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.6rem; }
@media (max-width: 880px) { .pw-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pw-cards { grid-template-columns: 1fr; } }
.pw-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.8rem 1.6rem; box-shadow: 0 6px 20px rgba(20,60,72,.04); transition: transform .2s, box-shadow .2s; }
.pw-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(20,60,72,.10); }
.pw-card-no { display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .1em; color: var(--teal); background: var(--teal-soft); border-radius: 999px; padding: .15rem .7rem; }
.pw-card h3 { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: 1rem 0 .6rem; font-size: 1.2rem; font-weight: 700; }
.pw-card-en { font-size: .7rem; font-weight: 600; letter-spacing: .15em; color: var(--ink-soft); text-transform: uppercase; }
.pw-card p { margin: 0; color: var(--ink-soft); font-size: .94rem; }

/* flow (dark teal band) */
.pw-flow { background: linear-gradient(135deg, #0b3a47 0%, #12505f 100%); }
.pw-steps { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
@media (max-width: 820px) { .pw-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pw-steps { grid-template-columns: 1fr; } }
.pw-steps li { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 1.5rem 1.3rem; }
.pw-step-no { font-size: .72rem; font-weight: 800; letter-spacing: .14em; color: var(--teal); }
.pw-steps h3 { margin: .7rem 0 .5rem; font-size: 1.1rem; color: #fff; }
.pw-steps p { margin: 0; font-size: .9rem; color: #c2d6dc; }

/* company */
.pw-company { background: #fff; }
.pw-company-grid { display: grid; grid-template-columns: 340px 1fr; gap: 3rem; align-items: start; }
@media (max-width: 820px) { .pw-company-grid { grid-template-columns: 1fr; gap: 1.4rem; } }
.pw-spec { margin: 0; border-top: 2px solid var(--ink); }
.pw-spec > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 1rem .3rem; border-bottom: 1px solid var(--line); }
.pw-spec dt { margin: 0; font-size: .85rem; font-weight: 700; letter-spacing: .08em; color: var(--teal-deep); }
.pw-spec dd { margin: 0; color: #36454b; }
@media (max-width: 520px) { .pw-spec > div { grid-template-columns: 1fr; gap: .2rem; } }

/* footer */
.pw-foot { background: #122a31; color: #aebec4; padding: 3.5rem 0 0; }
.pw-foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; }
@media (max-width: 760px) { .pw-foot-in { grid-template-columns: 1fr; gap: 1.4rem; } }
.pw-foot-brand .pw-logo-en { color: #fff; }
.pw-foot-brand .pw-logo-ja { display: block; color: #7f99a1; margin-top: .2rem; }
.pw-foot-contact { font-style: normal; font-size: .92rem; line-height: 2.1; }
.pw-foot-contact a { color: #fff; text-decoration: none; }
.pw-foot-nav { display: flex; flex-direction: column; gap: .55rem; font-size: .9rem; font-weight: 600; }
.pw-foot-nav a { color: #aebec4; text-decoration: none; }
.pw-foot-nav a:hover { color: var(--teal); }
.pw-foot-copy { margin: 0; text-align: center; font-size: .74rem; letter-spacing: .1em; color: #6f878f; border-top: 1px solid #1e3a42; padding: 1.2rem 0; }