@charset "UTF-8";
/* ============================================================
   effect.html リニューアル用 追加CSS
   - 真空包装機を選ぶ際の5つの重要ポイント (#effect-points)
   - 真空包装機 TOSPACKは、ここが違う！      (#effect-reasons)
   ※既存CSSには手を加えず、本ファイルで上書き・追加します
   ============================================================ */

/* reset.css のクリアフィックス疑似要素が flex 子要素になるのを無効化 */
#effect-points .ep-cards::before,
#effect-points .ep-cards::after,
#effect-points .ep-cards li::before,
#effect-points .ep-cards li::after,
#effect-reasons .er-ok::before,
#effect-reasons .er-ok::after,
#effect-reasons .er-ok > li::before,
#effect-reasons .er-ok > li::after,
#effect-reasons .er-imgs::before,
#effect-reasons .er-imgs::after,
#effect-reasons .er-flex::before,
#effect-reasons .er-flex::after,
#effect-reasons .er-knowledge-body::before,
#effect-reasons .er-knowledge-body::after {
  display: none;
}

/* ============================================================
   1. 5つの重要ポイント  #effect-points
   ============================================================ */
#effect-points {
  background: #fff;
  padding: 40px 0 50px;
}

#effect-points .ep-inner {
  width: 760px;
  margin: 0 auto;
}

#effect-points h2 {
  margin-bottom: 24px;
  color: #004EA2;
  font-size: 30px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}

#effect-points .ep-lead {
  margin-bottom: 32px;
  color: #505564;
  font-size: 18px;
  line-height: 1.6;
}

#effect-points .ep-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#effect-points .ep-cards li {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 144px;
  height: 144px;
  border-radius: 20px;
  background: #DEF2F7;
  text-align: center;
}

#effect-points .ep-cards li strong {
  color: #004EA2;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3;
}

#effect-points .ep-cards li span {
  margin-top: 8px;
  color: #505564;
  font-size: 14px;
  line-height: 1.4;
}

/* ============================================================
   2. ここが違う！  #effect-reasons
   ============================================================ */
#effect-reasons {
  background: #fff;
  padding: 20px 0 40px;
}

#effect-reasons .er-inner {
  width: 760px;
  margin: 0 auto;
}

#effect-reasons > .er-inner > h2 {
  margin-bottom: 24px;
  color: #004EA2;
  font-size: 30px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}

/* --- 各ポイントボックス --- */
#effect-reasons .er-box {
  margin-bottom: 30px;
  border-radius: 10px;
  background: #DEF2F7;
}

#effect-reasons .er-box:last-child {
  margin-bottom: 0;
}

/* --- 見出し（POINTバッジ + タイトル） --- */
#effect-reasons .er-head {
  padding: 20px 16px;
  border-radius: 10px 10px 0 0;
  background: #56B8D1;
  text-align: center;
}

#effect-reasons .er-badge {
  display: inline-block;
  padding: 6px 22px;
  border-radius: 100px;
  background: #004EA2;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1;
}

#effect-reasons .er-title {
  display: block;
  margin-top: 12px;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  line-height: 1.2;
}

/* --- 本文エリア共通 --- */
#effect-reasons .er-body {
  padding: 26px 30px 30px;
}

#effect-reasons .er-text {
  color: #505564;
  font-size: 18px;
  line-height: 1.4;
}

#effect-reasons .er-text--center {
  text-align: center;
}

#effect-reasons .er-lead {
  margin-bottom: 26px;
  color: #004EA2;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
}

#effect-reasons .er-emph {
  margin-top: 26px;
  color: #004EA2;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
}

/* ====== POINT1 真空度の基礎知識ボックス ====== */
#effect-reasons .er-knowledge {
  overflow: hidden;
  margin-top: 26px;
  border-radius: 10px;
  background: #fff;
}

#effect-reasons .er-knowledge-head {
  padding: 16px 16px 12px;
  background: #004EA2;
  text-align: center;
}

#effect-reasons .er-knowledge-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 8px 14px;
  border-radius: 100px;
  background: #fff;
  color: #004EA2;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}

#effect-reasons .er-knowledge-ttl {
  display: block;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
}

#effect-reasons .er-knowledge-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 26px;
  padding: 26px 20px 20px;
}

#effect-reasons .er-table {
  margin: 0;
}

#effect-reasons .er-table img {
  width: 100%;
  height: auto;
}

#effect-reasons .er-knowledge-txt p {
  color: #505564;
  font-size: 18px;
  line-height: 1.4;
}

#effect-reasons .er-knowledge-txt p + p {
  margin-top: 12px;
}

#effect-reasons .er-knowledge-txt ul {
  margin: 12px 0;
  padding-left: 1.6em;
  list-style: disc;
}

#effect-reasons .er-knowledge-txt ul li {
  color: #505564;
  font-size: 18px;
  line-height: 1.4;
  list-style: disc;
}

/* ====== POINT2 OKカード ====== */
#effect-reasons .er-ok {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  margin-top: 40px;
}

#effect-reasons .er-ok > li {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  min-width: 0;
  gap: 10px;
  height: 120px;
  padding: 11px 12px;
  border: 2px solid #00A3F7;
  border-radius: 10px;
  background: #fff;
}

#effect-reasons .er-ok-mark {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #00A3F7;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

#effect-reasons .er-ok-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  gap: 6px;
}

#effect-reasons .er-ok-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  padding: 2px 6px;
  border-radius: 4px;
  background: #D8EBF5;
  color: #1A273E;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
}

#effect-reasons .er-ok-note {
  font-size: 9px;
}

#effect-reasons .er-ok-price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #004693;
}

#effect-reasons .er-ok-price .num {
  font-size: 46px;
  font-weight: bold;
  line-height: 0.9;
  font-family: "DIN Alternate";
}

#effect-reasons .er-ok-price .u {
  font-size: 18px;
  font-weight: bold;
}

#effect-reasons .er-ok-price .slash {
  margin: 0 1px;
  font-size: 24px;
}

#effect-reasons .er-notes {
  margin-top: 14px;
}

#effect-reasons .er-note {
  padding-left: 1em;
  color: #1A273E;
  font-size: 12px;
  line-height: 1.6;
  text-indent: -1em;
}

/* ====== POINT3 画像2枚並び ====== */
#effect-reasons .er-imgs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}

#effect-reasons .er-imgs li {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  min-width: 0;
}

#effect-reasons .er-imgs li img {
  width: 100%;
  height: auto;
}

/* ====== POINT4 テキスト＋画像 ====== */
#effect-reasons .er-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 20px;
}

#effect-reasons .er-flex .er-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

#effect-reasons .er-flex .er-pic {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 340px;
}

#effect-reasons .er-flex .er-pic img {
  width: 100%;
  height: auto;
}

/* ============================================================
   SP (max-width: 780px)
   ============================================================ */
@media screen and (max-width: 780px) {

  /* === 5つの重要ポイント === */
  #effect-points {
    padding: 30px 20px;
  }
  #effect-points .ep-inner {
    width: 100%;
  }
  #effect-points h2 {
    margin-bottom: 14px;
    font-size: 20px;
    line-height: 1.4;
  }
  #effect-points .ep-lead {
    margin-bottom: 24px;
    font-size: 14px;
  }
  #effect-points .ep-cards {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 14px;
  }
  #effect-points .ep-cards li {
    width: calc(50% - 7px);
    max-width: 144px;
    height: auto;
    min-height: 130px;
    padding: 10px;
  }
  #effect-points .ep-cards li strong {
    font-size: 16px;
  }
  #effect-points .ep-cards li span {
    font-size: 13px;
  }

  /* === ここが違う！ === */
  #effect-reasons {
    padding: 0 20px 30px;
  }
  #effect-reasons .er-inner {
    width: 100%;
  }
  #effect-reasons > .er-inner > h2 {
    margin-bottom: 14px;
    font-size: 20px;
    line-height: 1.4;
  }
  #effect-reasons .er-box {
    margin-bottom: 20px;
  }
  #effect-reasons .er-head {
    padding: 14px 12px;
  }
  #effect-reasons .er-badge {
    padding: 5px 18px;
    font-size: 11px;
  }
  #effect-reasons .er-title {
    margin-top: 10px;
    font-size: 18px;
  }
  #effect-reasons .er-body {
    padding: 20px;
  }
  #effect-reasons .er-text,
  #effect-reasons .er-knowledge-txt p,
  #effect-reasons .er-knowledge-txt ul li {
    font-size: 14px;
  }
  #effect-reasons .er-lead {
    margin-bottom: 20px;
    font-size: 15px;
  }
  #effect-reasons .er-emph {
    margin-top: 20px;
    font-size: 15px;
  }

  /* POINT1 基礎知識ボックス */
  #effect-reasons .er-knowledge {
    margin-top: 20px;
  }
  #effect-reasons .er-knowledge-tag {
    font-size: 14px;
  }
  #effect-reasons .er-knowledge-ttl {
    font-size: 18px;
  }
  #effect-reasons .er-knowledge-body {
    gap: 20px;
    padding: 20px 14px;
  }

  /* POINT2 OKカード（縦並び） */
  #effect-reasons .er-ok {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 10px;
    margin-top: 24px;
  }
  #effect-reasons .er-ok > li {
    width: 100%;
    height: 80px;
    padding: 11px 16px;
    
        max-width: 248px;
        margin: 0 auto;
  }
  #effect-reasons .er-ok-price .num {
    font-size: 40px;
  }

  /* POINT3 画像（縦並び） */
  #effect-reasons .er-imgs {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
    margin-top: 20px;
  }
  #effect-reasons .er-imgs li img {
    display: block;
    margin: 0 auto;
    max-width: 320px;
  }

  /* POINT4 テキスト＋画像（縦並び） */
  #effect-reasons .er-flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
  }
  #effect-reasons .er-flex .er-pic {
    width: 100%;
    text-align: center;
  }
  #effect-reasons .er-flex .er-pic img {
    max-width: 320px;
  }
}