/* ===========================================================
 *  mesh.css（メッシュ幕 LP 専用スタイル）
 * =========================================================== */

body {
  margin: 0;
  font-family: "Hiragino Sans", "Meiryo", sans-serif;
  color: #333;
  line-height: 1.7;
  background: #fff;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: #005bbb;
  text-decoration: none;
}

/* ============================
   Header
=============================== */
.site-header {
  background: #004a8f;
  color: #fff;
  padding: 10px 0;
}

.site-header-inner {
  width: 92%;
  max-width: 1080px;
  margin: auto;
  display: flex;
  justify-content: space-between;
}

.site-logo a {
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}

/* ============================
   FV（ファーストビュー）
=============================== */
.fv {
  background: #e9f4ff;
  padding: 40px 0;
}

.fv-inner {
  width: 92%;
  max-width: 1080px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.fv-text {
  flex: 1;
  min-width: 300px;
}

.fv-img {
  flex: 1;
  text-align: right;
}

.fv-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.fv-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
}

.fv-lead {
  font-size: 18px;
  margin-bottom: 20px;
}

.btn-primary {
  background: #e86300;
  color: #fff;
  padding: 14px 24px;
  border-radius: 6px;
  font-size: 18px;
  display: inline-block;
}

/* ============================
   Section
=============================== */
.section {
  padding: 60px 0;
}

.section-title {
  text-align: center;
  font-size: 26px;
  margin-bottom: 40px;
}

/* セクション内コンテナを統一 */
.section-inner {
  width: 92%;
  max-width: 1080px;
  margin: 0 auto;
}

/* ============================
   Merit
=============================== */
.merit-list {
  width: 100%;
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.merit-item {
  background: #f8f8f8;
  padding: 24px;
  border-radius: 8px;
}

/* ============================
   Background block
=============================== */
.bg {
  background: #f0f6ff;
}

/* ============================
   メッシュターポリン生地画像（横2つ）
=============================== */
.mesh-fabric-2col {
  width: 100%;
  max-width: 900px;
  margin: 40px auto 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: nowrap;
}

.mesh-fabric-item {
  width: 300px;
  height: 300px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
}

.mesh-fabric-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================
   画像＋価格表（#price セクション）
   他CSSに負けないよう、セレクタを強め＆!important使用
=============================== */
#price .section-inner {
  width: 92% !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
}

#price .price-block {
  width: 100% !important;
  max-width: 780px !important;   /* ★ 全体幅をかなり絞る（特徴ブロックと近い幅） */
  margin: 40px auto 0 !important;
  display: flex !important;
  gap: 24px !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

/* 左側画像を小さめに */
#price .mesh-sample img {
  width: 300px !important;        /* ★ 画像をしっかり小さく */
  height: auto !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  background: #fff !important;
}

/* 右側テーブルの横幅を抑える */
#price .price-table-wrap {
  flex: 1 1 auto !important;
  max-width: 420px !important;
}

/* テーブル本体 */
#price .price-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #fff !important;
}

#price .price-table th,
#price .price-table td {
  padding: 10px 14px !important;
  border: 1px solid #ccc !important;
  text-align: center !important;
}

#price .price-table th {
  background: #e6eef8 !important;
  font-weight: bold !important;
}

/* ============================
   Form
=============================== */
.contact-form {
  width: 92%;
  max-width: 720px;
  margin: auto;
}

.form-row {
  margin-bottom: 20px;
}

.form-row label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
}

.form-row input,
.form-row textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #bbb;
  border-radius: 6px;
  font-size: 16px;
}

.form-submit {
  text-align: center;
  margin-top: 32px;
}

.required {
  color: #e60000;
}

/* ============================
   Footer
=============================== */
.site-footer {
  padding: 30px 0;
  background: #333;
  color: #fff;
  text-align: center;
}

.site-footer-inner p {
  margin: 6px 0;
}

/* ============================
   Responsive（スマホ）
=============================== */
@media (max-width: 768px) {

  .fv-inner {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .fv-img {
    text-align: center;
  }

  .fv-title {
    font-size: 26px;
  }

  .fv-lead {
    font-size: 16px;
  }

  /* メッシュ画像：縦並び */
  .mesh-fabric-2col {
    flex-direction: column;
    align-items: center;
  }

  .mesh-fabric-item {
    width: 100%;
    max-width: 340px;
    height: auto;
  }

  .mesh-fabric-item img {
    height: auto;
    object-fit: contain;
  }

  /* 画像＋価格表：縦並びに切り替え */
  #price .price-block {
    flex-direction: column !important;
    align-items: center !important;
    max-width: 100% !important;
  }

  #price .mesh-sample img {
    width: 100% !important;
    max-width: 360px !important;
  }

  #price .price-table-wrap {
    max-width: 100% !important;
    width: 100% !important;
  }
}
/* ★ 表のセル余白を詰めて幅を縮める */
#price .price-table th,
#price .price-table td {
  padding: 6px 10px !important;
}
/* ============================
   料金ブロック 最終幅調整
=============================== */
#price .price-block {
  max-width: 960px !important;   /* ← 全体の横幅を少し広げる */
}

/* 画像の幅を少し広げる */
#price .mesh-sample img {
  width: 480px !important;       /* ← 300 → 480 に */
}

/* 表の幅も広げる */
#price .price-table-wrap {
  max-width: 520px !important;   /* ← 420 → 520 に */
}
/* ★ 料金ブロックの最終幅（特徴の枠と揃える） */
#price .price-block {
  max-width: 1000px !important;   /* ← 900〜1080の間で最適値 */
  width: 100% !important;
}

/* 画像幅を広げる */
#price .mesh-sample img {
  width: 380px !important;        /* 360 → 380でバランス最適 */
}

/* 表の横幅も広げる */
#price .price-table-wrap {
  max-width: 560px !important;    /* 520 → 560 */
}
/* ★ 画像 600px 用の最適化レイアウト */
#price .price-block {
  width: 100% !important;
  max-width: 1080px !important;    /* メリット枠と同じ幅 */
  margin: 40px auto 0 !important;
  display: flex !important;
  gap: 32px !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

/* 左側画像（600px） */
#price .mesh-sample img {
  width: 600px !important;         /* ★ 希望の 600px */
  height: auto !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
}

/* 右側表（約420px） */
#price .price-table-wrap {
  max-width: 420px !important;     /* 画像600とのバランス最適値 */
  width: 100% !important;
}

/* 表のセル余白は保持 */
#price .price-table th,
#price .price-table td {
  padding: 6px 10px !important;
}
/* ========================================================
   画像500px ＋ 表150px拡大 の最適化レイアウト
======================================================== */

#price .price-block {
  width: 100% !important;
  max-width: 1080px !important;   /* セクション幅に揃える */
  margin: 40px auto 0 !important;
  display: flex !important;
  gap: 32px !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

/* ★ 左：画像を 500px に */
#price .mesh-sample img {
  width: 500px !important;        /* ←ご希望どおり 500px */
  height: auto !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  background: #fff !important;
}

/* ★ 右：表の横幅を150px広げる → 約150px 拡大 */
#price .price-table-wrap {
  width: 100% !important;
  max-width: 570px !important;    /* ← 420px → 570px（+150px） */
}

/* ★ 表のセル余白（小さめ） */
#price .price-table th,
#price .price-table td {
  padding: 6px 10px !important;
}