body{
font-family: sans-serif;
margin:0;
line-height:1.6;
background:#ffffff;
color:#333;
}


/* --- 共通・PC設定 --- */
.container {
  max-width: 1000px;
  margin: auto;
  padding: 30px 20px;
}

.hero {
  background: #F9F2E6;
  color: #373737;
  text-align: center;
  height: 800px; /* PCでは高さをしっかり確保 */
  display: flex;
  flex-direction: column;  /* 中身（画像・文字・ボタン）を縦に並べる */
  align-items: center;     /* 左右中央寄せ */
  justify-content: center; /* 上下中央寄せ */
  padding: 20px;
}

/* 画像のレスポンシブ設定 */
.hero h1 {
  margin: 0;
}
.hero h1 img {
  max-width: 100%;
  height: auto;
}

.heading-21 {
    display: inline-block; /* 文字の幅に合わせるための重要設定 */
    position: relative;
    padding: .5em .7em .4em;
    border-bottom: 3px solid #ff4d4d;
    color: #333333;
    margin-bottom: 20px;   /* 下の要素との間隔（お好みで） */
}

.heading-21::before,
.heading-21::after {
    position: absolute;
    /* 文字の幅に対して中央に配置したい場合は left: 50%; を使う */
    left: 20px; 
    bottom: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.heading-21::before {
    background-color: #ff4d4d;
}

.heading-21::after {
    bottom: -11px;
    background-color: #fff;
}


/* サブタイトル */
.subtitle {
  font-size: 14px;
  margin: 20px 0 40px;
  line-height: 1.6;
}

/* ボタン（基本） */
.cta-button {
  display: inline-block;
  background: #ff4d4d;
  color: white !important;
  padding: 18px 40px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: .3s;
}

.cta-button:hover {
  background: #ff0000;
  transform: scale(1.05); /* 少し大きくしてクリック感を出す */
}

/* --- レスポンシブ対応 (スマホ用：768px以下) --- */
@media (max-width: 768px) {
  /* PCとスマホの画像切り替え */
  .pc { display: none !important; }
  .sp { display: block !important; margin: 0 auto; }

  .container {
    padding: 20px 15px;
  }

  .hero {
    height: auto;       /* スマホでは高さ固定を解除 */
    min-height: 400px;  /* 最低限の高さは維持 */
    padding: 60px 20px;
  }

  .subtitle {
    font-size: 13px;
    margin: 15px 0 25px;
    padding: 0 10px;
    text-align: center; /* 中央寄せを維持 */
  }

  .cta-button {
    width: 100%;        /* スマホではボタンを横いっぱいに広げる */
    box-sizing: border-box;
    font-size: 16px;
    padding: 15px 20px;
  }

  /* 改行用クラス */
  .sp-only {
    display: block;
  }
}

.problem-list {
  margin: 30px 0;
  padding-left: 20px;
}

.problem-list li {
  margin-bottom: 10px;
}

.problem-text {
  font-weight: bold;
}

.solution {
  background: white;
  text-align: center;
}

.features {
  display: flex;
  gap: 30px;
  margin-top: 40px;
  flex-wrap: wrap;
  justify-content: center;
}

.feature {
  display: block;          /* リンク全体を箱にする */
  text-decoration: none;   /* 下線を消す */
  background: #f5f5f5;
  padding: 30px;
  border-radius: 8px;
  flex: 1;
  min-width: 250px;
  transition: transform 0.3s, box-shadow 0.3s; /* 動きを滑らかに */
}

/* ホバー時の演出（ボタンらしく） */
.feature:hover {
  transform: translateY(-5px);    /* 少し上に浮く */
  box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 影をつける */
  background: #eeeeee;            /* 少し色を変える */
}

/* --- レスポンシブ対応 (スマホ用) --- */
@media (max-width: 768px) {
  .features {
    gap: 15px; /* 隙間を少し狭く */
  }

  .feature {
    flex: none;
    width: 100%;    /* 1つずつ縦に並べる */
    min-width: 0;   /* 横幅いっぱいにする */
    padding: 20px;  /* スマホでは余白を少し詰める */
  }
}

.benefit {
  background: #ffffff;
  text-align: center;
}

.benefit-list {
  margin: 30px auto;
  max-width: 400px; /* ←末尾の 'a' を削除しました */
  text-align: left;
}

.offer {
  background: #F9F2E6;
  color: #373737;
  text-align: center;
}

.price {
  text-decoration: line-through;
  color: #aaa;
}

.free {
  font-size: 24px;
  margin: 20px 0;
}

footer {
  text-align: center;
  padding: 30px;
  font-size: 14px;
  background: #f5f5f5;
}

/* --- ここからレスポンシブ対応 (スマホ・タブレット用) --- */
@media (max-width: 768px) {
  .hero {
    height: auto; /* スマホでは高さを固定せず中身に合わせる */
    padding: 60px 20px;
  }

  .features {
    gap: 20px; /* 隙間を少し狭くする */
  }

  .feature {
    flex: none;
    width: 100%; /* 1つずつ縦に並べる */
    min-width: 0;
    padding: 20px;
  }

  .cta-button.big {
    width: 100%; /* ボタンを横いっぱいに広げて押しやすくする */
    box-sizing: border-box;
    font-size: 20px;
    padding: 15px 20px;
  }

  h1 {
    font-size: 1.5rem; /* 見出しを少し小さくして改行崩れを防ぐ */
  }
}

/* PCでは改行を表示しない */
.sp-only {
    display: none;
}


@media screen and (max-width: 768px) {
    /* スマホの時だけ改行を有効にする */
    .sp-only {
        display: inline;
    }

    /* 前の回答の文字サイズ調整も合わせて適用 */
    p[style*="text-align: center"] strong {
        font-size: 22px;
        line-height: 1.5; /* 改行した時に行間が詰まりすぎないように調整 */
    }
}

/* テーブル全体の基本スタイル */
.cp_table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* 列の幅を固定して安定させる */
    margin: 20px 0;
}

.cp_table th, 
.cp_table td {
    border: 1px solid #ccc;
    padding: 15px;
    text-align: center;
    vertical-align: middle;
    background: #fff;
}

.cp_table th {
    background-color: #f9f2e6; /* 見出しに色を付けるときれいです */
    font-weight: bold;
}

/* 画像のレスポンシブ設定 */
.cp_table img {
    max-width: 100%;  /* 親要素からはみ出さない */
    height: auto;     /* 縦横比を維持 */
    display: inline-block;
}

/* --- レスポンシブ対応 (スマホ用) --- */
@media screen and (max-width: 640px) {
    .cp_table, 
    .cp_table thead, 
    .cp_table tbody, 
    .cp_table tr, 
    .cp_table th, 
    .cp_table td {
        display: block; /* 全要素をブロック化して縦に並べる */
        width: 100%;
    }

    .cp_table thead {
        display: none; /* スマホで見出しを隠す（またはデザインに合わせて調整） */
    }

    .cp_table td {
        box-sizing: border-box;
        border-bottom: none;
    }

    .cp_table tr {
        border-bottom: 2px solid #ccc; /* 行の区切りを強調 */
        margin-bottom: 10px;
    }

    /* 商品名の前にラベルを付けたい場合（任意） */
    .cp_table td:before {
        content: "商品名 / 引受会社";
        display: block;
        font-size: 12px;
        color: #888;
        margin-bottom: 10px;
    }
}

/* 画像リンクの基本設定 */
.hover-img {
    display: inline-block;
    transition: all 0.3s ease;
    line-height: 0;
    cursor: pointer; /* マウスを指の形にする */
}

/* Bパターン：記号を外して有効化 */
.hover-img:hover {
    transform: scale(1.05) !important; /* 少し大きくする */
    filter: brightness(1.1) !important; /* 少し明るくする */
    position: relative;
    z-index: 10;
}