/* ------広告掲載料金------ */
:root {
    --primary-green: #00972D;
    --primary-white: #FDFDFD;
    --primary-black: #000000;
}

.article {
  padding: 150px 5%;
}

/* ------広告掲載料金------ */
:root {
    --primary-green: #00972D;
    --primary-white: #FDFDFD;
    --primary-black: #000000;
}

.article {
  padding: 0 5%;
}

/* メインキャプション */
.mainCaption {
  font-size: clamp(1.8rem, 1.32rem + 1.944vw, 3rem);
  text-align: center;
  line-height: 1.2;
  margin: 150px 0 50px;
  padding: 15px;
  border: 2px solid var(--primary-green);
}

.section--price h2 {
  margin: 250px 0 50px;
}

/* テーブル全体 */
.price-table  {
  width: 100%;          /* 幅100%に変更 */
  max-width: 900px;     /* 最大幅で制御 */
  margin: 0 auto;
  overflow-x: auto;     /* 横幅が狭いときスクロール */
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

/* th, td の共通スタイル */
.price-table th,
.price-table td {
  border: 2px solid var(--primary-black);
  padding: clamp(10px, 1vw, 25px); /* パディングも可変 */
  vertical-align: middle;
  font-size: clamp(1.2rem, 0.8rem + 1vw, 3rem); /* 基本文字サイズ */
}

/* td 固有スタイル */
.price-table td {
  line-height: 1.4;
}

.price-table th.price-table__siseTitle {
  background-color: var(--primary-green);
  color: var(--primary-white);
  font-size: clamp(2rem, 1.5rem + 1vw, 3rem);
}

.price-table__pageTitle {
  font-size: clamp(2rem, 1.5rem + 1vw, 3rem);
  line-height: 1.4;
}

/* theadの色 */
.price-table thead th {
  color: var(--primary-black);
  background-color: #ffd93f;
  text-align: center;
}

/* 値の文字サイズ */
.price-table__value {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 3rem);
}

/* サイズ列 */
.price-table__sise {
  background-color: var(--primary-green);
  color: var(--primary-white);
}

/* 取り扱いなし */
.price-table td.price-table__notAvailable {
  font-size: clamp(1.2rem, 1rem + 0.8vw, 2.5rem);
}

.price__kome {
  color: var(--primary-black);
  margin-top: 20px;
  font-weight: 500;
  line-height: 1.5;
}

.overview {
  display: flex;
  gap: 70px;
  justify-content: center;
}

.overview0 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.overviewImage0 {
  width: 500px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
}

.overviewImage0kome {
  font-weight: 500;
  margin-top: 20px;
  color: var(--primary-black);
}

.overview1 {
  display: flex;
  flex-direction: column;
  width: 530px;
  justify-content: center;
}

.overview11 {
  font-size: clamp(1.8rem, 1.319rem + 1.944vw, 3rem);
  line-height: 1.5;
}

.overview111 {
  line-height: 1.7;
  margin-top: 20px;
  color: var(--primary-black);
  font-weight: 500;
}

.overviewImage1 {
  margin-top: 50px;
}

.article__priceNo {
  font-size: 5rem;
  font-weight: 900;
}

.article__price {
  font-size: 2rem;
  color: var(--primary-black);
}

.articleCampaign {
  color: red;
  font-size: clamp(1.8rem, 1.6rem + 1vw, 2.5rem);
  line-height: 1.3;
  margin-top: 70px;
}

.event__point {
  border: 2px solid #00972D;
  background-color: rgb(253, 255, 187);
  padding: 30px;
  margin-top: 100px;
  font-size: 2rem;
  text-align: center;
  line-height: 1.5;
}

.event__group1 {
  margin-top: 70px;
}

.event__group2 {
  margin-top: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.event__group22 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 100px;
}

.event__group222 {
  width: 500px;
}

.event__group222sample {
  font-size: 1.5rem;
  margin-top: 20px;
  color: red;
  border: 2px solid red;
  text-align: center;
  padding: 10px;
  line-height: 1.5;
}

.event__group1 img,
.event__group22 img {
  width: 500px;
  margin-top: 30px;
}

.event__group1 h3 {
  font-size: 2rem;
  line-height: 2.5;
}

.event__group2 h3 {
  font-size: 2rem;
}

.event__txt1 {
  font-size: clamp(1.8rem, 1.6rem + 1vw, 2.5rem);
}

.event__txt2 {
  font-size: clamp(2.5rem, 2rem + 1.5vw, 4.1rem);
  line-height: 2;
  font-weight: 900;
}

.event__price,
.job__price,
.coupon__price {
  color: red;
  font-size: 2.3rem;
  margin-top: 10px;
  font-weight: 900;
}

.job__price,
.coupon__price {
  margin-top: 30px;
}

.event__priceNo,
.job__priceNo,
.coupon__priceNo {
  font-size: 5rem;
  line-height: 0.5;
}

.event__annotation {
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.7;
  color: var(--primary-black);
  margin-top: 50px;
}

.overviewImagejob {
  width: 350px;
}




@media screen and (max-width: 769px) {
  .mainCaption {
    margin: 100px 0 50px;
  }

  .overview {
    display: block;
  }

  .overview1 {
    width: 100%;
  }

  .overview11 {
    margin-top: 50px;
  }

  .event__group1 img,
  .event__group22 img {
    width: 100%;
  }

  .event__group222 {
    width: auto;
  }

  .price-table th,
  .price-table td {
    padding: clamp(5px, 2vw, 15px);
  }

  .event__price {
    line-height: 2.5;
  }
}