/* =========================================================
   index.css  (Top page only)
   ========================================================= */

/* ===== Section base ===== */
section{
  padding:72px 0;
  background: var(--bg);
}
/* 自動交互：main直下のsectionを対象（Hero含めて交互） */
main > section:nth-of-type(even){
  background: var(--alt);
}
/* きつめ */
.section--tight{
  padding:56px 0;
}

/* ===== Hero ===== */
.hero{
  padding:56px 0;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:22px;
  align-items:stretch;
}
.hero__content{
  padding:0;
}
.hero__title{
  font-size: clamp(28px, 3.1vw, 48px);
  letter-spacing:.01em;
  margin:10px 0;
}
.hero__lead{
  color:var(--muted);
  font-weight:700;
  margin-bottom:12px;
}
.hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.hero__note{
  font-size:12px;
  color:var(--muted);
  margin:10px 0 0;
}
.hero__image{
  min-height:360px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.08)),
    url("../images/hero-work.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter: grayscale(1) contrast(1.05) brightness(.95);
  box-shadow: 0 12px 26px rgba(2,6,23,.08);
}

/* ===== Hero quick summary ===== */
.quick{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.quick__item{
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  background:#ffffff;
  padding:12px;
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}
.quick__item b{
  display:block;
  margin-bottom:4px;
}
.quick__item p{
  margin:0;
  font-size:13px;
  color:var(--muted);
}

/* ===== Grid / cards ===== */
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
}
.card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 10px 26px rgba(2,6,23,.08);
}
.card h3{
  font-size:16px;
  margin-bottom:10px;
}
.span-4{ grid-column: span 4; }
.span-6{ grid-column: span 6; }
.span-12{ grid-column: span 12; }

/* ===== Section header ===== */
.sec-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.sec-head h2{
  font-size: clamp(22px, 2.2vw, 34px);
  margin:6px 0 0;
}
.sec-head p{
  margin:0;
  color:var(--muted);
  max-width:70ch;
}

/* ===== Meta / pill ===== */
.meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0;
}
.pill{
  font-size:12px;
  color:var(--muted);
  border:1px solid rgba(15,23,42,.14);
  background: rgba(2,6,23,.03);
  border-radius:999px;
  padding:5px 10px;
  font-weight:850;
}

/* ===== Standard panel (case) ===== */
.case{
  display:flex;
  gap:14px;
  align-items:stretch;
  overflow:hidden;
  padding:0;
}
.case__img{
  width:38%;
  min-height:190px;
  background-size:cover;
  background-position:center;
  border-right:1px solid var(--line);
}
.case__body{
  padding:18px;
  width:62%;
}

/* ===== Harness table ===== */
table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
}
th, td{
  padding:12px;
  border-bottom:1px solid rgba(15,23,42,.08);
  text-align:left;
  font-size:14px;
  vertical-align:top;
}
th{
  background: rgba(2,6,23,.03);
  font-weight:900;
}
tr:last-child td{
  border-bottom:none;
}

/* ===== Flow ===== */
.steps{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:12px;
}
.step{
  padding:16px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background:#ffffff;
  min-height:120px;
  box-shadow: 0 8px 18px rgba(2,6,23,.06);
}
.step__num{
  width:32px;
  height:32px;
  border-radius:11px;
  background: rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.18);
  display:grid;
  place-items:center;
  font-weight:900;
  margin-bottom:10px;
  color:#1d4ed8;
}
.step h3{
  font-size:14px;
  margin:0 0 6px;
}
.step p{
  font-size:13px;
  color:var(--muted);
  margin:0;
}

/* FLOW 内の画像 */
.step__img{
  width: 96px;
  height: 96px;
  object-fit: contain;
  padding: 12px;
  background: rgba(2,6,23,.03);
  border-radius: 14px;
  margin: 8px auto 10px;
}

/* FLOW：リストを<p>と同じ見た目に */
.step__list{
  margin: 0;
  padding-left: 0;
}

.step__list li{
  list-style: none;
  position: relative;
  padding-left: 1.1em;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.step__list li::before{
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

/* ===== Form ===== */
form{
  display:grid;
  gap:10px;
}
label{
  font-size:13px;
  color:var(--muted);
  font-weight:900;
}
input, textarea, select{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.14);
  background:#ffffff;
  color:var(--text);
  padding:12px;
  font-size:14px;
  outline:none;
}
input:focus,
textarea:focus,
select:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
textarea{
  min-height:110px;
  resize:vertical;
}
.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

/* =========================================================
   Responsive (index only)
   ========================================================= */
@media (max-width: 900px){
  .sec-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .sec-head p{ max-width:none; }

  .quick{ grid-template-columns:1fr; }

  #services .grid{ grid-template-columns:1fr; }
  #services .span-4,
  #services .span-6{ grid-column: span 12; }

  .steps{ grid-template-columns:1fr; }

  #contact .grid{ grid-template-columns:1fr; }
  #contact .span-6{ grid-column: span 12; }

  /* =========================================================
     Hero：狭幅時に「lead → image → muted」の順にする
     ========================================================= */

  /* 1) 親を grid にして並び順を “エリア” で指定 */
  .hero__grid{
    display:grid;
    grid-template-columns: 1fr;
    gap:14px;
    grid-template-areas:
      "eyebrow"
      "title"
      "lead"
      "image"
      "desc"
      "cta"
      "note";
  }

  /* 2) hero__content を “展開”して子要素を hero__grid 直下として扱う */
  .hero__content{
    display: contents;
  }

  /* 3) 各要素にエリア割り当て */
  .hero__grid .eyebrow{ grid-area: eyebrow; }
  .hero__grid .hero__title{ grid-area: title; }
  .hero__grid .hero__lead{ grid-area: lead; }

  /* 「メールで完結〜」の段落（p.muted）を desc に */
  .hero__grid p.muted{ grid-area: desc; }

  .hero__grid .hero__cta{ grid-area: cta; }
  .hero__grid .hero__note{ grid-area: note; }

  .hero__grid .hero__image{
    grid-area: image;
    min-height: 260px;
    margin: 6px 0;
  }
}


@media (max-width: 700px){
  .two-col{
    grid-template-columns:1fr;
  }
}

@media (max-width: 820px){
  .case{
    flex-direction:column;
  }
  .case__img{
    width:100%;
    min-height:220px;
    border-right:none;
    border-bottom:1px solid var(--line);
  }
  .case__body{
    width:100%;
  }
}

/* ===== HARNESS：狭幅は縦並び（カード風） ===== */
@media (max-width: 820px){
  /* テーブルの見出しは非表示（縦表示に不要） */
  #harness table thead{
    display:none;
  }

  /* テーブル要素をブロック化して縦積みに */
  #harness table,
  #harness tbody,
  #harness tr,
  #harness td{
    display:block;
    width:100%;
  }

  /* 1行（tr）をカード風に */
  #harness tr{
    border:1px solid rgba(15,23,42,.12);
    border-radius: 14px;
    background:#fff;
    padding:12px;
    margin: 0 0 12px;
    box-shadow: 0 10px 22px rgba(2,6,23,.06);
  }

  /* セル間の罫線を消す（縦積み用） */
  #harness td{
    border:0;
    padding: 8px 0;
  }

  /* 各項目にラベルを付けてわかりやすく */
  #harness td:nth-child(1)::before{
    content:"タイプ";
    display:block;
    font-size:12px;
    color: var(--muted);
    font-weight:900;
    letter-spacing:.04em;
    margin-bottom:4px;
  }
  #harness td:nth-child(2)::before{
    content:"仕様例";
    display:block;
    font-size:12px;
    color: var(--muted);
    font-weight:900;
    letter-spacing:.04em;
    margin-bottom:4px;
  }
  #harness td:nth-child(3)::before{
    content:"参考価格";
    display:block;
    font-size:12px;
    color: var(--muted);
    font-weight:900;
    letter-spacing:.04em;
    margin-bottom:4px;
  }

  /* 参考価格は強調（任意） */
  #harness td:nth-child(3){
    font-weight:900;
  }
}

@media (max-width: 600px){
  .hero{
    padding-top:10px;
  }
}