/*
 * サービスページ専用スタイル
 * 文字の大きさ・太さ・行間・色は Typography トークンが持つ。ここでは余白・配置のみ。
 */

/*
 * ページタイトル
 */
.service-head {
  padding: 96px 0 72px;
  border-bottom: 1px solid var(--color-rule);
}

.service-head__kicker {
  margin-bottom: 22px;
}

.service-head__lead {
  margin-top: 32px;
}

/*
 * 各サービス共通
 */
.service-section {
  padding: 76px 0;
  border-bottom: 1px solid var(--color-rule);
}

.service-section:last-child {
  border-bottom: 0;
}

.service-section__kicker {
  margin-bottom: 20px;
  font-feature-settings: "tnum";
}

.service-section__title {
  margin-bottom: 16px;
}

/*
 * 01 講座 / 03 山田食堂
 * PC: 文章と写真の2カラム（並び順はDOM順）
 * SP: 見出し → 写真 → 本文 の縦積み
 */
.service-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px 72px;
  align-items: center;
}

.service-split__photo {
  padding: 10px;
}

.service-split__photo img {
  height: 400px;
}

.service-split__body {
  margin-bottom: 30px;
  text-align: justify;
}

/* 講座の特徴リスト（先頭の — は装飾なのでCSSで描く） */
.service-points {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 26px 0 0;
  list-style: none;
  border-top: 1px solid var(--color-rule);
}

.service-points__item {
  display: flex;
  gap: 16px;
}

.service-points__item::before {
  content: "—";
  flex-shrink: 0;
  color: var(--color-gold);
}

/*
 * 02 法人向け
 */
.service-business__title {
  margin-bottom: 46px;
}

.service-business {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--color-rule);
}

.service-business__item {
  padding: 40px;
  min-width: 0;
}

.service-business__item:first-child {
  padding-left: 0;
}

.service-business__item:last-child {
  padding-right: 0;
}

.service-business__item + .service-business__item {
  border-left: 1px solid var(--color-rule);
}

.service-business__photo {
  margin-bottom: 28px;
}

.service-business__photo img {
  height: auto;
  aspect-ratio: 608 / 332;
}

.service-business__name {
  margin-bottom: 14px;
}

/*
 * 03 山田食堂
 */
.service-community__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}

/* ラベルは見出しの中に並べるので、行内に収まる大きさにする */
.service-community__label {
  display: inline-flex;
  min-width: 0;
  padding: 4px 11px;
}

.service-community__title + .service-split__body {
  margin-bottom: 24px;
}

.service-community__note {
  text-align: justify;
}

/*
 * SP
 */
@media (max-width: 767px) {
  .service-head {
    padding: 44px 0 32px;
  }

  .service-head__kicker {
    margin-bottom: 14px;
  }

  .service-head__lead {
    margin-top: 24px;
  }

  .service-section {
    padding: 36px 0;
  }

  .service-section__kicker {
    margin-bottom: 16px;
  }

  .service-section__title {
    margin-bottom: 20px;
  }

  /* 文章ブロックをほどいて、見出し → 写真 → 本文 の順に並べ替える */
  .service-split {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .service-split__text {
    display: contents;
  }

  .service-split__text > * {
    order: 2;
  }

  .service-split__text > .service-section__kicker,
  .service-split__text > .service-section__title {
    order: 0;
  }

  .service-split__photo {
    order: 1;
    margin-bottom: 22px;
    padding: 8px;
  }

  .service-split__photo img {
    height: 200px;
  }

  .service-split__body {
    margin-bottom: 24px;
    text-align: left;
  }

  .service-points {
    gap: 12px;
    padding-top: 22px;
  }

  .service-points__item {
    gap: 12px;
  }

  .service-business__title {
    margin-bottom: 28px;
  }

  .service-business {
    grid-template-columns: 1fr;
    gap: 28px;
    border-top: 0;
  }

  .service-business__item {
    padding: 0;
  }

  .service-business__item + .service-business__item {
    padding-top: 28px;
    border-top: 1px solid var(--color-rule);
    border-left: 0;
  }

  .service-business__photo {
    margin-bottom: 18px;
  }

  .service-business__name {
    margin-bottom: 10px;
  }

  .service-community__title {
    gap: 12px;
  }

  .service-community__label {
    padding: 3px 9px;
  }

  .service-community__title + .service-split__body {
    margin-bottom: 20px;
  }

  .service-community__note {
    text-align: left;
  }
}