body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  background: #f5faff;
}

.site-header {
  padding: 10px 20px;
}

.logo img {
  height: 30px;
}

.main-title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  text-align: center;
  color: #0078c8;
  margin: 0 0 80px;
  font-size: 28px;
  font-weight: 400;
  background: radial-gradient(circle at 90% 20%, #ffffff 0%, #b0dcf8 100%);
}

.form-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 35px 30px 35px;
  background: #BCF0FF;
}

.form-container {
  background: #ffffff;
  padding: 20px 40px 0 40px;
  border-radius: 0 0 12px 12px;
  position: relative;
  z-index: 1;
  display: block;
  box-shadow: 0 4px 8px 0px rgba(98, 162, 205, 0.4);
}

.form-box {
  background: #ffffff;
  padding: 20px 30px;
  border-radius: 8px;
}

.form-box:first-child {
  flex: 0 0 70%;
}

.form-box:last-child {
  flex: 0 0 30%;
}

.form-title {
  font-size: 18px;
  color: #0078c8;
  margin: 30px 0;
  border-bottom: 2px solid #62a2cd;
  padding-bottom: 20px;
  text-align: center;
}

dl {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 30px;
  padding-bottom: 12px;
}

.dl-block:last-of-type {
  border-bottom: none;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.row-pair {
  display: grid;
  grid-template-columns: 120px 120px auto;
  column-gap: 70px;   
  row-gap: 30px;
  align-items: center;
  margin-bottom: 16px;
}

.row-pair .radio-line {
  margin-left: -40px;
  justify-self: start;
}

.row-pair-wide {
  grid-template-columns: 200px 120px auto; /* ← 1列目だけ広げる */
}

.double-row-section {
  position: relative;
}

.double-row-section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 20px;
  left: 320px;
  width: 1px;
  background-color: #ccc;
}

.row-pair-right {
  display: grid;
  grid-template-columns: 120px 1fr;
  /* column-gap: 50px;    */
  row-gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}


dt {
  font-weight: normal;
  white-space: nowrap;
}

dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

input[type="number"] {
  height: 30px;
  width: 80px;
  padding: 4px;
  text-align: right;
}

.unit {
  font-size: 14px;
}

.text-underline {
  display: inline-block;
  width: 60px;
  min-height: 1.5em;
  line-height: 1.5em;
  border-bottom: 1px solid #333;
  padding: 0 4px;
  text-align: center;
  font-family: inherit;
  vertical-align: middle;
}

.text-underline:focus {
  outline: none;
}

.radio-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.radio-line {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.buttons {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.btn-outline,
.btn-primary {
  font-weight: bold;
  font-size: 14px;
  border-radius: 8px;
  padding: 10px 30px;
  cursor: pointer;
}

.btn-outline {
  height: 60px;
  width: 180px;
  background: #fff;
  border: 2px solid #0078c8;
  color: #0078c8;
}

.btn-primary {
  height: 60px;
  width: 180px;
  background: #0078c8;
  border: none;
  color: white;
}

.link-small {
  margin: 15px 0;
  font-size: 0.85em;
  text-align: center;
}

.link-small a {
  color: #0078c8;
  text-decoration: underline;
}

#conditions-text.hidden {
  display: none;
}

.condition-box {
  background: #fff8e1;
  border: 1px solid #f5c16c;
  border-radius: 6px;
  padding: 50px;
  font-size: 14px;
  line-height: 1.5;
  /* white-space: pre-wrap; */
}

.condition-box__box {
  margin-top: 30px;
}

.condition-box__box:first-child {
  margin-top: 0;
}

.condition-box__maintitle {
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 10px;
}

.condition-box__title {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 10px;
}

.condition-box__detail {
  padding: 0 1.5em;
}

#dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;
}

/*計算条件ダイアログ*/
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #BCF0FF;
  max-width: 90%;
  max-height: 80%;
  overflow-y: auto;
  z-index: 100;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.dialog-content {
  position: relative;
}

.dialog-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.5em;
  background: none;
  border: none;
  cursor: pointer;
}

.hidden {
  display: none !important;
}

/* オプション */

.u-mt15 {
  margin-top: 15px;
}

.u-bold {
  font-weight: bold;
}

.u-textSmall {
  font-size: .9em;
}

/* ▼ タブ切り替え用 ▼ */
.tab-nav {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  border-bottom: none;
  position: relative;
  z-index: 2;
}

.tab-button {
  height: 75px;
  width: 400px;
  background: #e0e0e0;
  border: none;
  border-bottom: none;
  padding: 14px 28px;
  font-size: 20px;
  color: #0078c8;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease;
  border-radius: 8px 8px 0 0;
  /* box-shadow: 0 0 8px rgba(98, 162, 205, 0.8); */
}

.tab-button.active {
  background: #ffffff;
  color: #0078c8;
  position: relative;
  box-shadow: 0 -4px 8px -2px rgba(98, 162, 205, 0.4);
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 22%;
  width: 55%;
  height: 2px;
  background-color: #62a2cd;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* 流量・揚程のフォームを中央寄せに */
#tab-manual .form-box {
  display: flex;
  justify-content: center;
}

#tab-manual form {
  margin: 0 auto;
  max-width: 500px;
}

/* ▲ タブ切り替え用ここまで ▲ */

/* 検索条件エリアと同じ幅に揃える */
#results {
  max-width: 800px;
  margin: 40px auto;
}

/* 件数タイトル */
/* 検索結果タイトル */
.result-heading h2 {
  font-size: 1.1em;
  color: #0072CE;
  margin: 50px 0 10px 0;
}

/* 製品カード全体 */
/* 検索結果カード全体 */
.product-box {
  margin-bottom: 40px;
  background: #fff;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */
  overflow: hidden;
}

/* ヘッダー（製品名表示） */
/* 製品カードのヘッダー部分（タイトル） */
.product-header {
  background-color: #0072CE;
  color: #fff;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 製品カードのヘッダー部分（タイトル） */
.product-header .header-left h3 {
  margin: 0;
  font-size: 1.3em;
}

/* 製品カードのヘッダー部分（タイトル） */
.product-header .header-left span {
  display: block;
  font-size: 0.9em;
  color: #d0e7ff;
  margin-top: 5px;
}

/* 製品カードのヘッダー部分（タイトル） */
.product-header .header-right {
  font-size: 26px;
  font-weight: bold;
  white-space: nowrap;
}

/* ボディ部 */
/* 製品カードのメイン部分（画像とテーブル） */
.product-body {
  display: flex;
  gap: 30px;
  padding-top: 40px;
  flex-wrap: nowrap;
  /* ← wrap から nowrap に変更して横並びを強制 */
  align-items: flex-start;
  /* 上揃えで見た目を揃える */
}

/* 左：画像 */
/* 左側の製品画像エリア */
.product-image img {
  max-width: 360px;
  max-height: 360px;
}
.product-info{
  width: 100%;
  height: auto;
}

/* 右：情報（テーブル全体） */
/* 製品スペック用テーブル */
.product-table {
  width: 100%;
  font-size: 0.9em;
  border-collapse: collapse;
}

/* テーブルの交互背景色 */
/* 製品スペック用テーブル */
.product-table tr:nth-child(even) {
  background-color: #f5f5f5;
}

/* 製品スペック用テーブル */
.product-table tr:nth-child(odd) {
  background-color: #ffffff;
}

/* テーブルセルスタイル */
/* 製品スペック用テーブル */
.product-table th {
  width: 40%;
  text-align: left;
  font-weight: normal;
  padding: 12px 20px;
  vertical-align: middle;
  white-space: nowrap;
}

/* 製品スペック用テーブル */
.product-table td {
  width: 60%;
  text-align: left;
  padding: 12px 20px 12px 20px;
}

/* アイコン付き強調行（吐出し量・全揚程） */
/* 製品スペック用テーブル */
.product-table .emphasis th {
  font-size: 16px;
  color: #000000;
  font-weight: bold;
}

/* 製品スペック用テーブル */
.product-table .emphasis td {
  font-size: 20px;
  color: #0072CE;
  font-weight: bold;
}

/* アイコンのサイズと余白調整 */
/* 製品スペック用テーブル */
.product-table th img.icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  margin-right: 6px;
}

/* 製品紹介ページボタン*/
/* テーブル下部のボタンと補足メッセージ部分 */
.product-footer {
  padding: 0;
  text-align: left;
  margin-left: 30px;
}

.link-label {
  color: #0072CE;
  font-weight: bold;
  font-size: 0.95em;
}

/* 製品紹介ボタン（検索結果の下部に表示） */
.btn-product-link {
  display: inline-block;
  padding: 5px 20px;
  background: #0072CE;
  border: 2px solid #0072CE;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  margin-bottom: 10px;
}

/* ボタン下に表示される補足メッセージ用 */
.note-text {
  font-size: 0.9em;
  color: #333;
  margin-bottom: 50px;
}

/* ボタン下に表示される補足メッセージ用 */
.note-text .red {
  color: red;
}

/* 該当製品無しの場合 */
/* 検索結果カード全体 */
.product-box.no-match .product-body {
  padding: 20px 10px;
}

/* NG時のメッセージと画像を横並びにし、余白・右寄せを調整 */
.product-box.no-match .product-body.no-match-flex {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 20px;
}

.product-box.no-match img {
  width: auto;
  height: 140px;
  max-height: 150px;
}


/* 検索結果カード全体 */
.product-box.no-match .no-match-message {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.pdf-preview-button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cad-btn,
.pdf-preview-btn {
  width: 160px;
  height: 50px;
  padding: 6px 12px;
  font-size: 16px;
  background-color: #0072CE;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;             
  line-height: 1.3;               
  white-space: normal;            
  display: flex;
  flex-direction: column;        
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.pdf-preview-btn span.pdf-download-subtext {
  font-size: 0.85em;
}

/* CADボタン左寄せ */
.left-side {
  flex: 1;
}

/* PDFボタン右寄せ */
.right-side {
  flex: 1;
  text-align: right;
}

/*PDFダウンロードボタン*/
.download-btn {
  height: 60px;
  width: 180px;
  background: #0078c8;
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
}

/* 印刷時に別ページとして切り出す */
.calculation-page {
  max-width: 800px;
  page-break-before: always;
  padding: 20px;
  background: #fff;
  margin: 30px auto;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  color: #333;
}

.calculation-page h2 {
  text-align: center;
  margin-bottom: 24px;
  border-bottom: 2px solid #0072CE;
  padding-bottom: 8px;
}

.calculation-page h3 {
  font-size: 1.1em;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  border-left: 4px solid #0072CE;
  padding-left: 8px;
  color: #0072CE;
}

.calculation-page dl dt {
  font-weight: bold;
  margin-top: 6px;
}

.calculation-page dl dd {
  margin: 0 0 10px 16px;
  white-space: nowrap;
}

.flex-section {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.flex-block {
  flex: 1 1 45%;
  min-width: 300px;
  background-color: #f4faff;
  padding: 1.2rem;
  border: 1px solid #c6d9ee;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.flex-block h3 {
  font-size: 1em;
  margin-top: 0;
  color: #0056A6;
}

.calculation-page .flex-block dl {
  border: none !important;
}

.summary-heading {
  font-size: 1.3em !important;
  margin-top: 1.5em;
  border-top: 2px dashed #ccc;
  padding-top: 1em;
  text-align: center;
  color: #333;
  border-left: none !important;
  padding-left: 0;
}

.summary-box {
  margin-top: 1em;
  padding: 1.2em;
  border: 2px solid #0072CE;
  border-radius: 8px;
  background-color: #eaf4ff;
  font-size: 1.1em;
  font-weight: bold;
  color: #003F7D;
  text-align: center;
}

.summary-row {
  display: flex;
  gap: 3rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* メール送信用リンクボタン */
.btn-mail-link {
  display: inline-block;
  padding: 5px 20px;
  background: #0072CE;
  border: 2px solid #0072CE;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: .3s;
  text-align: center;
}

/* --------------------------------------------------
  仮レスポンシブ対応：画面幅768px以下ならフォームを縦並びに切り替え
-------------------------------------------------- */
@media (max-width: 768px) {

  /* ─── 行ペアを縦並びに ─── */
  .form-box dl .row-pair,
  .form-box dl .row-pair-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* ─── ラジオ行の余白リセット ─── */
  .form-box dl .row-pair .radio-line,
  .form-box dl .row-pair-right .radio-line {
    margin-left: 0 !important;
    justify-self: start;
  }

  /* ─── ダブルローセクションの縦線は非表示 ─── */
  .form-box dl.double-row-section::before {
    display: none !important;
  }

  /* ─── ラベル＋入力をフル幅 ─── */
  .form-box dl .row-pair dt,
  .form-box dl .row-pair dd,
  .form-box dl .row-pair-right dt,
  .form-box dl .row-pair-right dd {
    display: block;
    width: 100%;
  }

  /* ─── ラジオ／グループは折り返し可 ─── */
  .form-box dl .radio-line,
  .form-box dl .radio-group {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  /* ─── 下線テキスト幅微調整 ─── */
  .text-underline {
    width: 80px;
  }
    /* ─── ここから検索結果カードのレスポンシブ調整 ─── */
    .product-body {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    .product-image,
    .product-info {
      flex: 1 1 100%;
    }
    .product-image img {
        margin: 0 auto;
    }
    .product-table {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
    }
    .product-table th,
    .product-table td {
      white-space: normal;
      word-wrap: break-word;
      padding: 8px 10px;
    }
    .product-table th .icon {
      display: inline-block;
      vertical-align: middle;
      margin-right: 6px;
    }
    .pdf-preview-button-container {
      text-align: center;
      margin-top: 1rem;
    }
    /* ─── ここまで検索結果カード ─── */
}