@charset "UTF-8";

/* =====================================
   Service Page (service.css)
   - page-service.php 対応
===================================== */

.page-service .page-kv,
.page-service .service-lead,
.page-service .service-section,
.page-service .service-bottom-visual{
  width: 100%;
}

.page-service .page-intro__content {
  width: 65%;
}

.page-service .page-intro__image {
  width: 35%;
}

@media (max-width: 768px) {
  .page-service .page-intro__content {
    width: 100%;
  }
  .page-service .page-intro__image {
    width: 75%;
    margin: 54px auto 0;
  }
}

/* -------------------------------------
   Service section 共通
------------------------------------- */
.page-service .service-section{
  padding: 0 0 96px;
}

.page-service .service-section:last-child{
  padding: 0;
}

/* 上段：Service 0x + 青ライン */
.page-service .service-section__top{
  margin: 0 160px 35px;
  border-bottom: 1px solid rgba(36, 53, 144, 1.0);
  padding-bottom: 8px;
}

.page-service .service-section__no{
  margin: 0;
  font-size: 24px;
  font-family: "EB Garamond";
  color: #243590;
  font-weight: normal;
}

/* 中段：左タイトル群 / 右リード（縦線） */
.page-service .service-section__intro{
  margin: 0 160px 50px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 80px;
  align-items: start;
}

.page-service .service-section__title{
  margin: 0 0 12px;
  font-size: 30px;
  line-height: 1.5;
  font-weight: normal;
}

.page-service .service-section__catch{
  margin: 0;
  color: #707070;
  font-size: 14px;
  /* line-height: 2.29; */
  font-family: "Noto Sans JP";
}

.page-service .service-section__lead{
  border-left: 1px solid #D7DBE0;
  padding-left: 40px;
  line-height: 2;
  font-family: "Noto Sans JP";
}

.page-service .service-section__lead p{
  margin: 0;
}

/* 下段：左画像 / 右コンテンツ（stores__content の比率感） */
.page-service .service-section__body{
  margin: 0 160px;
  display: grid;
  grid-template-columns: 0.46fr 0.54fr;
  gap: 0 80px;
  align-items: start;
}

.page-service .service-section__media{
  margin: 0;
  border-radius:24px;
  overflow:hidden;
}

.page-service .service-section__img{
  width: 100%;
  height:100%;
  object-fit:cover;
}

/* SP */
@media (max-width: 767px){
  .page-service .service-section{
    padding: 0 0 82px;
  }

  .page-service .service-section__top{
    margin: 0 20px 30px;
    padding-bottom: 12px;
  }

  .page-service .service-section__no{
    font-size: 20px;
  }

  .page-service .service-section__intro{
    margin: 0 20px 38px;
    grid-template-columns: 1fr;
    gap: 18px 0;
  }

  .page-service .service-section__title{
    font-size: 28px;
    line-height: 1.35;
    margin-bottom: 10px;
  }

  .page-service .service-section__catch{
    font-size: 14px;
    line-height: 1.8;
  }

  .page-service .service-section__lead{
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #D7DBE0;
    padding-top: 14px;
    font-size: 14px;
    line-height: 1.8;
  }

  .page-service .service-section__body{
    margin: 0 20px;
    grid-template-columns: 1fr;
    gap: 22px 0;
    display: flex;
    flex-direction: column;
  }

  .page-service .service-section__media{

  border-radius:16px;

}
}
@media (max-width: 768px) {

  .page-service .service-section__intro{
    gap: 24px;
  }

  .page-service .service-section__title{
    font-size: 20px;
    margin-bottom: 10px;
  }

  .page-service .service-section__catch{
    font-size: 12px;
  }

  .page-service .service-section__lead{
    color: #707070;
    border-top: none;
    padding-top: 0;
  }

  .page-service .service-section__body{
    gap: 32px;
  }

}

/* -------------------------------------
   Wellness cards（Service01/02/03）
   右側を 2列グリッド
------------------------------------- */
.page-service .wellness-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 32px;
  font-family: "Noto Sans JP";
}

.page-service .wellness-card__label{
  margin: 0 0 14px;
  padding: 8px 12px;
  border-radius: 4px;
}

.page-service .wellness-card__list{
  margin: 0;
  padding-left: 1.1em;
  line-height: 1.8;
  font-size: 14px;
  color: #707070;
}

.page-service .wellness-card__list li{
  margin: 0;
}

/* ラベル色 */
.page-service .wellness-card--purple  .wellness-card__label{ background:#E8E7F5; color:#7069C6; }
.page-service .wellness-card--blue    .wellness-card__label{ background:#DEF1F4; color:#30AABA; }
.page-service .wellness-card--gray    .wellness-card__label{ background:#E1E9F5; color:#5686CB; }
.page-service .wellness-card--green   .wellness-card__label{ background:#E7F2EE; color:#4AC495; }
.page-service .wellness-card--y-green .wellness-card__label{ background:#E2F2D0; color:#81C136; }
.page-service .wellness-card--orange  .wellness-card__label{ background:#FAEBE2; color:#D87F48; }
.page-service .wellness-card--yellow  .wellness-card__label{ background:#F7F1DC; color:#C9AE56; }

@media (max-width: 767px){

  .service-section__content{
    width: 100%;
  }

  .page-service .wellness-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .page-service .wellness-card__label{
    margin-bottom: 10px;
    padding: 8px 12px;
  }

  .page-service .wellness-card__list{
    font-size: 14px;
    line-height: 1.8;
  }

  /* 並び順変更：身体的 → 精神的 → 社会的 → 環境的 */
  .page-service .wellness-card--purple { order: 1; }
  .page-service .wellness-card--gray { order: 2; }
  .page-service .wellness-card--blue { order: 3; }
  .page-service .wellness-card--green { order: 4; }

  /* Service 03の並び順：商品開発 → 健康サポートプログラム → 情報発信 */
  .page-service .wellness-card--y-green { order: 1; }
  .page-service .wellness-card--yellow { order: 2; }
  .page-service .wellness-card--orange { order: 3; }
}

/* -------------------------------------
   Service04：右側が「リスト + 対象の方カード」の2カラム
------------------------------------- */
.page-service .consult-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 80px;
  align-items: start;
  font-family: "Noto Sans JP";
}

.page-service .service-list{
  margin: 0;
  padding-left: 1.1em;
  font-size: 14px;
  line-height: 1.8;
  color: #707070;
}

.page-service .service-list li{
  margin: 5px 0;
}

/* 対象の方カード */
.page-service .target-card{
  background: #EEF3F6;
  border-radius: 10px;
  padding: 16px 27px;
}

.page-service .target-card__title{
  margin: 0 0 8px;
  color: #243590;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.5;
}

.page-service .target-card__list{
  margin: 0;
  padding-left: 1.1em;
  line-height: 1.8;
  font-size: 14px;
  color: #707070;
}

@media (max-width: 767px){
  .page-service .consult-grid{
    grid-template-columns: 1fr;
    gap: 14px 0;
  }

  .page-service .target-card{
    padding: 21px 27px;
  }

  .page-service .target-card__title{
    font-size: 16px;
  }

  .page-service .service-list li{
    margin: 0;
  }

  .page-service .target-card__list li{
    margin: 0;
  }

}

/* -------------------------------------
   Bottom visual
------------------------------------- */
.page-service .service-bottom-visual{
  margin: 0 0 120px;
}

.page-service .service-bottom-visual .l-inner{
  padding: 0;
}

.page-service .service-bottom-visual img{
  width: 100%;
  height: auto;
  display: block;
}