/* DesignEng サイト v2 — コーポレート用（「/」だけで読む）
   - モックアップ drafts/homepage-v2/style.css の、コーポレートのページ固有の部分（6〜12）を移したもの。値は変えていない
   - 共通の部品は base.css。ここに書くのは、トップ・シミュレーション・各ページの中身だけ
   - WP: ブロックエディターのブロック（グループ・リスト・テーブル・ボタン）で組むため、セレクターを少し足してある（「WP:」）
   目次: 6 ヒーロー / 6b シミュレーターの入口 / 7 シミュレーター / 8 なぜ / 9 できること / 10 測る省エネの新着 / 11 お知らせ
         12 会社概要・お問い合わせ / 14 お知らせの一覧・詳細 / 15 クイック診断 / 16 事業内容 / 17 お問い合わせフォーム
         18 プライバシーポリシー / 19 404 */

/* ==== 6 ヒーロー（index.html）==== */
/* 会社の顔。画像は使わず文字組みで見せる。PC では高さを画面の高さから決め、1440×900 で下の入口セクション（--tint）の頭が少し見えるようにする */
.de-hero { display: flex; flex-direction: column; background: var(--paper); }
.de-hero__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding-block: 40px 48px; }
.de-hero__title { font-size: 28px; line-height: 1.4; }
.de-phrase { display: inline; }   /* スマホでは文の流れに任せて折り返す */
.de-hero__lead { margin-top: 24px; max-width: 40em; }
.de-hero__actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 32px; }
.de-hero__actions .de-link { align-self: flex-start; }
/* 飾りの目盛り: 「測る省エネ」のロゴと同じ形（長い目盛りの間に短い目盛り3本）。ヒーローの下端に置き、次のセクションの境目の線にする */
.de-hero__scale { display: block; width: 100%; height: 12px; overflow: visible; color: var(--rule-strong); }
@media (min-width: 768px) {
  .de-hero { min-height: clamp(440px, calc(100svh - 224px), 720px); }
  .de-hero__body { padding-block: 48px 56px; }
  .de-phrase { display: block; }   /* 2行に決め打ち（句の途中では折らない） */
  .de-hero__title { font-size: 40px; line-height: 1.35; }
  .de-hero__lead { font-size: 18px; }
  .de-hero__actions { flex-direction: row; align-items: center; gap: 8px 32px; }
}
@media (min-width: 1024px) { .de-hero__title { font-size: 52px; } }

/* ==== 6b シミュレーターの入口（index.html）==== */
/* ツールは埋め込まない。左: 文とボタン、右: シミュレーターの結果欄（compressor-sim.html の .result / .kpi）に寄せた静的な試算例カード */
.de-entry__grid { display: grid; gap: 32px; }
.de-entry__lead { margin-top: 16px; max-width: 40em; }
.de-entry .de-checks { margin-top: 24px; flex-direction: column; flex-wrap: nowrap; gap: 4px; }   /* 4 つは縦に並べる（.de-checks の 768px 以上の横並びを上書き） */
.de-entry__action { margin-top: 32px; }
.de-entry__action .de-btn { width: 100%; }
@media (min-width: 768px) { .de-entry__action .de-btn { width: auto; } }
@media (min-width: 1024px) {
  .de-entry__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
  .de-entry__copy { grid-column: span 7; }
  .de-example { grid-column: span 5; }
}

.de-example { background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 4px; padding-top: 20px; }
.de-example__title { margin-inline: 16px; }
.de-example__cond { margin: 12px 16px 0; padding-bottom: 16px; }
.de-example__kpis { border-top: 1px solid var(--rule); }
.de-example__kpi { display: grid; gap: 2px; padding: 12px 16px 14px; }
.de-example__kpi + .de-example__kpi { border-top: 1px solid var(--rule); }
.de-example__kpi dt { font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.de-example__kpi dd { font-size: 32px; font-weight: 700; line-height: 1.2; color: var(--blue); white-space: nowrap; }   /* 数字の大きさ・色はシミュレーターの .kpi .v と同じ */
.de-example__kpi small { font-size: 14px; font-weight: 400; color: var(--ink); margin-inline: 3px; }
.de-example__kpi small:first-child { margin-inline: 0 4px; }
.de-example__note { padding: 12px 16px; border-top: 1px solid var(--rule); }
@media (min-width: 768px) {
  .de-example__title { margin-inline: 24px; }
  .de-example__cond { margin-inline: 24px; }
  .de-example__kpi { padding-inline: 24px; }
  .de-example__note { padding-inline: 24px; }
}

/* ==== 7 シミュレーター（simulation.html） ==== */
.de-sim { padding-block: 32px 48px; background: var(--tint); }
@media (min-width: 768px) { .de-sim { padding-block: 48px 64px; } }
.de-sim__lead { margin-top: 8px; }
.de-sim__head + .de-sim__box { margin-top: 24px; }
/* ツール（最大幅 880px・白）の外側: 白地・1px 罫線の枠。スマホでは左右いっぱいに広げて入力欄の幅を確保 */
.de-sim__box { background: var(--paper); border: 1px solid var(--rule); margin-inline: calc(var(--gutter) * -1); border-inline-width: 0; }
@media (min-width: 768px) { .de-sim__box { margin-inline: 0; border-inline-width: 1px; } }
.de-sim__frame { display: block; width: 100%; border: 0; background: var(--paper); }
.de-help { margin-top: 24px; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 4px; padding: 16px 24px 8px; }
.de-help__title { font-size: 18px; line-height: 1.5; }
.de-help__sub { margin-top: 0; }
.de-help__list { margin-top: 8px; }
.de-help__list li { padding-block: 8px; border-top: 1px solid var(--rule); }
.de-help__list li:first-child { border-top: 0; }
.de-help__list a { display: inline-block; padding-block: 4px; }

/* ==== 8 なぜコンプレッサーから ==== */
.de-why__head .de-note { margin-top: 8px; }
.de-why__list { display: grid; gap: 24px; margin-top: 32px; }
.de-why__item { display: grid; gap: 8px; align-content: start; }
.de-why__item p + .de-note { margin-top: 0; }
@media (min-width: 768px) {
  .de-why__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
}
/* 事例の枠を差し込む位置: index.html の <!-- 事例の枠 --> のコメントを参照 */

/* ==== 9 DesignEng ができること ==== */
.de-can__steps { display: grid; gap: 32px; margin-top: 32px; }
.de-step {
  position: relative; display: grid; gap: 8px; align-content: start;
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 4px; padding: 24px 24px 24px;
}
.de-step--lead { background: var(--blue-soft); }
.de-step + .de-step::before {      /* 流れの矢印（装飾）。スマホは下向き、PC は右向き */
  content: ""; position: absolute; left: 24px; top: -22px; border: 8px solid transparent; border-top: 10px solid var(--ink-2); border-bottom: 0;
}
.de-step__title { font-size: 20px; line-height: 1.5; }
.de-step__more { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--rule-strong); }
.de-can__links { display: flex; flex-wrap: wrap; gap: 0 32px; margin-top: 24px; }
@media (min-width: 768px) { .de-can__steps { margin-top: 40px; } }
@media (min-width: 1024px) {
  .de-can__steps { grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)); align-items: start; }  /* 文の短いカードを無理に伸ばさない */
  .de-step + .de-step::before { left: -22px; top: 32px; border: 8px solid transparent; border-left: 10px solid var(--ink-2); border-right: 0; }
}

/* ==== 10 測る省エネ（別メディアの見せ方: 枠とロゴ風の文字組み）。ロゴ・カードは base.css ==== */
.de-media__panel { border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--paper); overflow: hidden; }
.de-media__head { display: grid; gap: 16px; padding: 24px; background: var(--blue-soft); border-bottom: 1px solid var(--rule-strong); }
.de-media__title { display: flex; flex-direction: column; gap: 4px; }
.de-media__tag { font-size: 18px; font-weight: 700; color: var(--ink); }
.de-media__body { padding: 24px; }
.de-media__label { font-size: 14px; color: var(--ink-2); margin-bottom: 16px; }
.de-cards { display: grid; gap: 16px; }
.de-media__more { margin-top: 16px; }
@media (min-width: 768px) {
  .de-media__head { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 32px; padding: 24px 32px; }
  .de-media__title { flex-direction: row; align-items: flex-end; gap: 32px; }
  .de-media__body { padding: 32px; }
  .de-media__more { margin-top: 24px; }
}
@media (min-width: 1024px) { .de-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
/* WP: 新着を読み込めなかったとき・0 件のとき（[de_column_feed] が何も出さないとき）は、「新着記事」の見出しも出さず、
   「測る省エネの記事一覧」のリンクだけにする（見出しの直後がリンクになる。原稿 content/corp/top.html は変えない） */
.de-media__label:has(+ .de-media__more) { display: none; }
.de-media__label:has(+ .de-media__more) + .de-media__more { margin-top: 0; }

/* ==== 11 お知らせ ==== */
.de-news__list { margin-top: 24px; border-top: 1px solid var(--rule-strong); background: var(--paper); }
.de-news__item { display: grid; gap: 0; padding: 12px 16px; border-bottom: 1px solid var(--rule-strong); }
.de-news__date { font-size: 14px; color: var(--ink-2); }
.de-news__title a { display: inline-block; padding-block: 4px; }
.de-news__more { margin-top: 16px; }   /* 一覧へのリンク（モックアップにはない。測る省エネの欄の「記事一覧」と同じ扱い） */
@media (min-width: 768px) {
  .de-news__list { margin-top: 32px; }
  .de-news__item { grid-template-columns: 160px minmax(0, 1fr); align-items: baseline; gap: 0 24px; padding: 8px 24px; }
}

/* ==== 12 会社情報とお問い合わせ ==== */
.de-company { background: var(--paper); }
/* WP: テーブルブロックは <figure class="wp-block-table de-company__table"><table> の形。クラスは figure に付く。
   WordPress の既定（セルの罫線・余白）を打ち消して、モックアップの罫線にする */
.de-company__table { margin: 24px 0 0; }
.de-company__table table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--rule-strong); }
.de-company__table th, .de-company__table td { padding: 12px 16px; border: 0; border-bottom: 1px solid var(--rule-strong); text-align: left; vertical-align: top; }
.de-company__table th { width: 9em; background: var(--tint); font-weight: 700; white-space: nowrap; }
@media (max-width: 767px) {
  .de-company__table th, .de-company__table td { display: block; width: auto; }
  .de-company__table th { border-bottom: 0; padding-bottom: 4px; }
  .de-company__table td { padding-top: 4px; }
}
@media (min-width: 768px) { .de-company__table { margin-top: 32px; max-width: 880px; } .de-company__table th, .de-company__table td { padding: 16px 24px; } }

.de-contact { padding-block: 32px; background: var(--blue-soft); }
.de-contact__inner { display: grid; gap: 16px; align-items: center; }
.de-contact__text { font-size: 18px; font-weight: 700; line-height: 1.6; }
.de-contact .de-btn { width: 100%; }
@media (min-width: 768px) {
  .de-contact { padding-block: 40px; }
  .de-contact__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; }
  .de-contact .de-btn { width: auto; min-width: 200px; }
}

/* ==== 13b WP: ボタンブロックに「スマホでは横幅いっぱい」を当てる（モックアップの .de-btn の幅の指定と同じ） ==== */
@media (max-width: 767px) {
  .de-hero__actions .wp-block-buttons, .de-actions .wp-block-buttons, .de-entry__action .wp-block-buttons, .de-contact .wp-block-buttons { display: block; }
  .de-hero__actions .wp-block-button__link, .de-actions .wp-block-button__link,
  .de-entry__action .wp-block-button__link, .de-contact .wp-block-button__link { display: flex; width: 100%; }
}
@media (min-width: 768px) {
  .de-contact .wp-block-button__link { min-width: 200px; }
}

/* ==== 14 お知らせの一覧・詳細（新規。トップのお知らせの部品 .de-news__* と同じ調子） ==== */
.de-listpage { padding-block: 0 48px; }
.de-listpage .de-news__list { margin-top: 0; }
.de-post { padding-block: 0 48px; }
.de-post .de-prose { max-width: 680px; }
.de-post__back { margin-top: 48px; }
@media (min-width: 768px) { .de-listpage, .de-post { padding-block: 0 64px; } }

/* ==== 15 クイック診断（新規。トップの部品 .de-step・.de-checks と同じ色・余白） ==== */
.de-shindan-know { padding-top: 8px; }
.de-points { display: grid; gap: 12px; margin-top: 24px; }
.de-points li { position: relative; padding-left: 28px; }
.de-points li::before {            /* チェックの印（装飾）。.de-checks と同じ形 */
  content: ""; position: absolute; left: 6px; top: .45em; width: 7px; height: 13px;
  border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
@media (min-width: 768px) { .de-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin-top: 32px; } }
.de-flow__steps { display: grid; gap: 32px; margin-top: 32px; }
@media (min-width: 768px) { .de-flow__steps { margin-top: 40px; } }
@media (min-width: 1024px) { .de-flow__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; } }
.de-diff .de-container > p { max-width: 40em; margin-top: 16px; }
.de-diff .de-container > .de-linkp { margin-top: 8px; }
.de-apply .de-container > p { max-width: 40em; margin-top: 16px; }
.de-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 32px; }   /* .de-hero__actions と同じ */
.de-actions .de-linkp { align-self: flex-start; }
@media (min-width: 768px) { .de-actions { flex-direction: row; align-items: center; gap: 8px 32px; } }

/* ==== 16 事業内容（新規。見出し（測る・選ぶ・据え付ける・保つ）と本文を、罫線で区切って並べる） ==== */
.de-service { padding-block: 0 48px; }
.de-service__item { display: grid; gap: 12px; padding-block: 32px; border-top: 1px solid var(--rule-strong); }
.de-service__item:last-child { border-bottom: 1px solid var(--rule-strong); }
.de-service__body { display: grid; gap: 12px; align-content: start; max-width: 40em; }
.de-service__body .de-h3 { margin-top: 12px; }
@media (min-width: 768px) {
  .de-service { padding-block: 0 64px; }
  .de-service__item { grid-template-columns: 200px minmax(0, 1fr); column-gap: 32px; padding-block: 40px; }
}
.de-company--page { padding-block: 0 48px; }
.de-company--page .de-company__table { margin-top: 0; }
@media (min-width: 768px) { .de-company--page { padding-block: 0 64px; } }

/* ==== 17 お問い合わせフォーム（Contact Form 7。CF7 の既定の CSS は読まない。入力欄は 48px 以上・罫線 --rule-strong・ラベルは上） ==== */
.de-formpage { padding-block: 0 64px; }
.de-cf7 { display: grid; gap: 24px; max-width: 640px; }
.de-cf7__row { display: grid; gap: 8px; min-width: 0; }
.de-cf7 fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.de-cf7 legend { margin-bottom: 8px; padding: 0; }
.de-cf7__row > label, .de-cf7 legend { font-weight: 700; }
.de-req, .de-opt { margin-left: 8px; font-size: 14px; font-weight: 400; white-space: nowrap; }   /* 「※」と「任意」の間で折らない */
.de-req { color: var(--ink); font-weight: 700; }
.de-opt { color: var(--ink-2); }
.de-hint { display: block; font-size: 14px; font-weight: 400; color: var(--ink-2); }
.de-cf7 input[type="text"], .de-cf7 input[type="email"], .de-cf7 input[type="tel"], .de-cf7 textarea {
  display: block; width: 100%; min-width: 0; min-height: 48px; padding: 8px 12px;
  border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--paper); color: var(--ink);
  font: inherit; line-height: 1.5;
}
.de-cf7 textarea { min-height: 160px; resize: vertical; }
/* 選択肢（ラジオ・同意）: 1 つずつ縦に並べ、押せる高さを 48px 以上にする */
.de-cf7 .wpcf7-list-item { display: block; margin: 0; }
.de-cf7 .wpcf7-list-item label { display: flex; align-items: center; gap: 12px; min-height: 48px; padding-block: 4px; font-weight: 400; cursor: pointer; }
.de-cf7 input[type="radio"], .de-cf7 input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--blue); }
.de-cf7__row--accept .wpcf7-list-item-label a { display: inline; padding: 0; }
.de-cf7__submit { margin-top: 8px; }
.de-cf7__submit input.de-btn { width: 100%; margin: 0; }
@media (min-width: 768px) { .de-cf7__submit input.de-btn { width: auto; min-width: 200px; } }
/* エラー表示（DADS: 赤だけに頼らず、「＊」で始まる文で、直し方まで書く）。入力欄は線も太くする */
.wpcf7-not-valid-tip { display: block; margin-top: 4px; color: #b42318; font-weight: 700; font-size: 16px; }
.de-cf7 .wpcf7-not-valid { border: 2px solid #b42318; }
.wpcf7-response-output { margin: 24px 0 0; padding: 16px; border: 2px solid var(--ink); border-radius: 4px; background: var(--tint); font-weight: 700; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output { border-color: #b42318; color: #b42318; background: var(--paper); }
.wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output { display: none; }
.wpcf7-spinner { display: none; }
.wpcf7 form.submitting .de-cf7__submit::after { content: "送信しています…"; margin-left: 16px; color: var(--ink-2); }
.wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); border: 0; word-wrap: normal; }
.wpcf7 .hidden-fields-container { display: none; }

/* ==== 18 プライバシーポリシー（新規。10月の文案を、.de-prose の見た目で） ==== */
.de-doc { padding-block: 0 64px; }
.de-doc .de-prose { max-width: 680px; }
.de-doc .de-prose h2 { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--rule-strong); font-size: 20px; }
.de-doc .de-prose h2 + * { margin-top: 12px; }

/* ==== 19 404（新規） ==== */
.de-notfound { padding-block: 0 64px; }
.de-notfound p { max-width: 40em; }
.de-notfound__links { margin-top: 16px; }

/* ==== 20 使い方の動画（シミュレーションのページ。詳細ブロック .de-howto の中に動画ブロック。2026-11-12） ====
   閉じた欄の見出しは文字リンクと同じ見た目（押せると分かるように）。▶ は詳細ブロックの開閉の印をそのまま使う。
   開くと動画。1440×900 の画面でページ見出しと一緒に収まるよう、幅は 800px まで。 */
.de-howto { margin-top: 8px; }
.de-howto > summary { width: fit-content; padding-block: 8px; color: var(--blue); cursor: pointer;
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.de-howto > summary:hover { text-decoration-thickness: 2px; }
.de-howto .wp-block-video { max-width: 800px; margin: 8px 0 0; }
.de-howto video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--tint); border: 1px solid var(--rule); }