/* 親要素 */
.experience_list {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* 左・中央・右 */
  align-items: center;
  list-style: none;
  padding: 0;
  text-align: center;
  margin-top: 100px;
}

/* liと、中身をバラしたいdivだけを透明にする */
.experience_item,
.experience_environment,
.experience_features,
.experience_value {
  display: contents;
}

/* --- 配置の指定 --- */

/* 1行目: タイトル (divごと配置) */
.experience_item:nth-child(1) .experience_title { grid-column: 1; grid-row: 1; }
.experience_item:nth-child(2) .experience_title { grid-column: 3; grid-row: 1; }

/* 2行目: 画像 (divごと配置) */
.experience_item:nth-child(1) .experience_image { grid-column: 1; grid-row: 2; }
.experience_item:nth-child(2) .experience_image { grid-column: 3; grid-row: 2; }

/* 3行目: 体験環境 (中のpとspanを別々の列へ) */
.experience_item:nth-child(1) .experience_environment p { grid-column: 1; grid-row: 3; }
.experience_item:nth-child(1) .experience_environment .category_tag { grid-column: 2; grid-row: 3; }
.experience_item:nth-child(2) .experience_environment p { grid-column: 3; grid-row: 3; }
.experience_item:nth-child(2) .experience_environment .category_tag { display: none; }

/* 4行目: 特長 (中のpとspanを別々の列へ) */
.experience_item:nth-child(1) .experience_features p { grid-column: 1; grid-row: 4; }
.experience_item:nth-child(1) .experience_features .category_tag { grid-column: 2; grid-row: 4; }
.experience_item:nth-child(2) .experience_features p { grid-column: 3; grid-row: 4; }
.experience_item:nth-child(2) .experience_features .category_tag { display: none; }

/* 5行目: 共通価値のタグ (1〜3列をぶち抜き) */
.experience_item:nth-child(1) .experience_value .category_tag {
  grid-column: 1 / 4;
  grid-row: 5;
  justify-self: center;
}
.experience_item:nth-child(2) .experience_value .category_tag { display: none; }

/* 6行目: 共通価値のテキスト (1〜3列をぶち抜き) */
.experience_item:nth-child(1) .experience_value p {
  grid-column: 1 / 4;
  grid-row: 6;
}
.experience_item:nth-child(2) .experience_value p { display: none; }

/* --- 見栄えの調整（適宜変更してください） --- */
.category_tag {
  background-color: var(--lightBlue);
  font-family: var(--bold);
  font-weight: bold;
  font-size: 1.8rem;
  color: var(--darkBlue);
  padding: 8px 24px;
  border-radius: 30px;
  white-space: nowrap;
  margin: 0;
}

.experience_value .category_tag {
  width: 100%;
}

.experience_image img {
  width: 80%;
  height: auto;
}

.experience_title h4 {
    font-family: var(--bold);
    font-weight: bold;
    font-size: 2.4rem;
    padding: 16px 0;
    background-color: var(--lightBlue);
    border-radius: 60px;
    margin-bottom: 8px;
}
.experience_title h4 span {
    color: var(--darkBlue);
}

.experience_image p {
    padding: 16px 0 32px;
    font-size: 1.8rem;
    font-family: var(--medium);
    font-weight: medium;
}
.experience_image p span {
    color: var(--darkBlue);
}

.experience_environment,
.experience_features p {
    padding: 32px 0;
}

.experience_value p {
    font-size: 2.0rem;
    font-family: var(--medium);
    font-weight: medium;
    padding: 16px 0;
}

.importantNotes {
    display: block;
    font-size: 1.4rem;
    text-align: center;
    margin-top: 16px;
}

@media (max-width: 767px) {
  /* 1. グリッドの仕組み自体を無効化する */
  .experience_list {
    display: block !important; /* flexよりblockの方が確実にグリッドの影響を消せます */
    margin-top: 56px;
    gap: 64px;
  }

  /* 2. PC版で透明化したdivを「実体のある箱」に戻す */
  .experience_item,
  .experience_environment,
  .experience_features,
  .experience_value,
  .experience_title, /* ここ重要：これらがcontentsだとwidthが効きません */
  .experience_image {
    display: block !important;
    width: 100% !important;

  }

  /* 4. グリッドの位置情報を完全に上書き */
  .experience_item *,
  .experience_item .experience_title,
  .experience_item .experience_value p {
    grid-column: 1 / -1 !important; /* 強制的に全幅指定 */
    grid-row: auto !important;
    float: none !important; /* 万が一の回り込み解除 */
  }

  /* 5. タイトルの個別設定 */
  .experience_title {
    background-color: transparent; /* 背景色などあれば */
    text-align: center;
  }

  .experience_title h4 {
    display: block !important;
    width: 100% !important;
    font-size: 2.0rem;
    padding: 16px 0;
    margin: 0;
    box-sizing: border-box; /* パディングを含めて100%に */
  }

  /* 6. タグの中央揃え調整 */
  .category_tag {
    display: table !important; 
    margin: 0 auto 12px !important;
    padding: 4px 24px;
    font-size: 1.6rem;
  }

  .experience_item:nth-child(1) .experience_environment .category_tag,
  .experience_item:nth-child(2) .experience_environment .category_tag,
  .experience_item:nth-child(1) .experience_features .category_tag,
  .experience_item:nth-child(2) .experience_features .category_tag,
  .experience_item:nth-child(1) .experience_value .category_tag,
  .experience_item:nth-child(2) .experience_value .category_tag {
    display: inline-block;
    width: auto;
  }


  .experience_title{
    display: block;
    width: 100%;
  }

  .experience_title h4 {
    font-size: 2.0rem;
    padding: 8px 0;
    width: 100%;
  }

  .experience_title p {
    text-align: center;
    margin-top: 8px;
  }

  .experience_image p {
    padding: 8px 0 32px;
    font-size: 1.6rem;
    font-family: var(--bold);
    font-weight: bold;
    text-align: center;
  }

  .experience_environment {
    padding: 0;
    font-size: 1.6rem;
  }

  .experience_item:nth-child(2) .experience_value p {
    display: inline-block;
  }

  .experience_item:nth-child(1) .experience_environment p,
  .experience_item:nth-child(2) .experience_environment p,
  .experience_item:nth-child(1) .experience_features p,
  .experience_item:nth-child(2) .experience_features p,
  .experience_item:nth-child(1) .experience_value p,
  .experience_item:nth-child(2) .experience_value p {
    padding: 0;
    text-align: center;
    font-size: 1.2rem;
    font-family: var(--regular);
    font-weight: regular;
    margin-bottom: 24px;
  }
  
  .experience_item:nth-child(2) {
    margin-top: 80px !important; /* ここの数値でお好みの広さに調整してください */
  }

  .importantNotes {
    font-size: 1.2rem;
    text-align: left;
  }

}