@charset "utf-8";

.lead {
  background-color: #fbf5e5;
  padding-top: 10px;
  padding-bottom: 55px;
  margin-left: auto;
  margin-right: auto;
}

.lead p {
  line-height: 2;
  text-align: center;  
}

.lead-2 {
  background-color: #f7eacf;
  padding-top: 5px;
  padding-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
}

.lead-list {
  width: 950px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  display: grid;     /*p268 グリッド表示にする*/
  grid-template-columns: repeat(3, 1fr);   /*p268-269 列数と幅の指定、auto-fit:自動折り返し*/
  column-gap: 35px;   /*p271 列と列の余白*/
  row-gap: 35px;      /*p271 行と行の余白*/
  justify-content: center;
}

.lead-list li {
  position: relative;   /*p138 position:ある位置に要素を固定*/
}

.lead-list img {
  border-radius: 8px;
}


.item-list {
  width: 950px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  display: grid;   
  grid-template-columns: repeat(4, 1fr);  
  column-gap: 35px; 
  row-gap: 35px;      
  justify-content: center;
}

.item-list dt {
  font-weight: bold;
  text-align: center;
}

.item-list dl {
  text-align: center;
}

.item-list dd {
  font-size: 13px;
  line-height: 20px;
  margin-top: 10px;
}

.item-list li {
  position: relative;   
}

.item-list .item-label {
  position: absolute;
  top: 0;
  left: calc(100% + 18px);   /*p290 ↑右上から18pxはみ出した位置に配置*/
  font-size: 10px;
  white-space: nowrap;  /*p291 改行の扱い（自動で折り返さない）*/
  transform-origin: top left;     /*p292 左上を基準にして移動*/
  transform: rotate(90deg);       /*p293 transform:要素の移動や回転*/
}

.pc-only { display: inline; }
.sp-only { display: none; }

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #feecaa;
  padding: 20px;
  border: 1px solid #feecaa;
  border-radius: 8px;
}


@media (max-width: 800px) {

  .lead {
    padding-left: 20px;
    padding-right: 20px;
  }

  .lead p {
    text-align: left;
  }

}


/*   タブレット（1024px以下） */
@media screen and (max-width: 1024px) {
  .pc-only { display: none; }

  .item-list {
    grid-template-columns: repeat(2, 1fr); /* 4 → 2列 */
    column-gap: 20px;
    row-gap: 20px;
  }

  .lead-list {
    grid-template-columns: repeat(auto-fit, 180px);
    column-gap: 20px;
    row-gap: 20px;
  }
}

/* スマホ（768px以下） */
@media screen and (max-width: 768px) {

  .lead {
    padding-bottom: 40px;
  }

  .lead p {
    line-height: 1.8;
    font-size: 14px;
  }

  .item-list {
    grid-template-columns: 1fr; /* 1列 */
    column-gap: 0;
    row-gap: 10px;
  }

  .box {
    padding: 16px;
  }

  .item-list dt {
    font-size: 16px;
  }

  .item-list dd {
    font-size: 13px;
    line-height: 1.7;
  }
}

/*   小さめスマホ（480px以下） */
@media screen and (max-width: 480px) {

  .lead p {
    font-size: 13px;
  }

  .box {
    padding: 14px;
    border-radius: 6px;
  }
}