/* ==========================================================================
   service.css — サービス一覧ページ固有スタイル
   株式会社Session Webサイト
   ========================================================================== */

/* ==========================================================================
   ページヒーロー（サービスページ固有）
   ========================================================================== */

/* ヒーロー背景画像・全画面表示 */
.service-hero {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)),
    url('../images/service-hero-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--header-height-sp) 0 0; /* ヘッダー分オフセットしてテキストを視覚的中央に */
}

@media (min-width: 1024px) {
  .service-hero {
    padding-top: var(--header-height);
  }
}

/* eyebrow「Service」*/
.service-hero-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ==========================================================================
   サービスコンセプト（「場」の哲学）
   ========================================================================== */
.service-concept-section {
  padding: 64px 0;
  background-color: var(--color-bg);
  border-bottom: 1px solid rgba(192, 80, 45, 0.1);
}

.service-concept-text {
  font-family: var(--font-accent);
  font-size: var(--fs-base);
  line-height: 2.2;
  color: var(--color-text-light);
  text-align: left; /* SP: 左揃え（中央揃え＋<br>改行で行が短くなる問題を回避） */
  max-width: 820px;
  margin: 0 auto;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   サービスブロック（交互レイアウト）
   SP: テキスト上・ビジュアル下
   PC: ワークショップ＝左テキスト右ビジュアル / コーチング＝左ビジュアル右テキスト
   ========================================================================== */

/* セクション背景色（交互） */
.service-block--workshop {
  background-color: var(--color-bg);
}

.service-block--coaching {
  background-color: var(--color-bg-dark);
}

/* Flexコンテナ（SP: 縦積み） */
.service-block-inner {
  display: flex;
  flex-direction: column;
}

/* テキスト側 */
.service-block-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
}

/* テキスト内容（中央寄せ・max-width制御） */
.service-body-content {
  width: 100%;
  max-width: 460px;
}

/* eyebrow（Workshop / Coaching） */
.service-block-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ブロック見出し h2 */
.service-block-title {
  font-family: var(--font-accent);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin-bottom: 16px;
}

/* コンセプトタグライン（オレンジ・下ボーダーで区切り） */
.service-block-concept {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-primary);
  letter-spacing: 0.06em;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(192, 80, 45, 0.2);
  margin-bottom: 24px;
}

/* サービスリスト（ゴールドドット付き） */
.service-block-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 36px;
}

.service-block-list li {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  padding-left: 18px;
  position: relative;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.service-block-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
  flex-shrink: 0;
}

/* サービスブロック テキスト段落 */
.service-block-text {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  line-height: 2.1;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}

/* サービスブロック 項目段落（bold見出し + 説明文） */
.service-block-item {
  font-size: var(--fs-sm);
  color: var(--color-text-light);
  line-height: 1.9;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

.service-block-item:last-of-type {
  margin-bottom: 32px;
}

.service-block-item strong {
  display: block;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 2px;
}

/* ==========================================================================
   サービスブロック ボタン（角丸・塗り）
   --warm: ワークショップ（オレンジ背景）
   --cool: コーチング（ネイビー背景）
   ========================================================================== */
.service-block-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 40px;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  font-weight: 500;
  text-align: center;
  transition: opacity var(--transition-base), transform var(--transition-base);
  margin-top: 8px;
}

.service-block-btn:hover {
  opacity: 0.82;
  transform: translateY(-1px);
}

/* ワークショップ：オレンジ背景 */
.service-block-btn--warm {
  background-color: var(--color-primary);
  color: #ffffff;
}

/* コーチング：ネイビー背景 */
.service-block-btn--cool {
  background-color: var(--color-secondary);
  color: #ffffff;
}

/* ==========================================================================
   サービスブロック フェードインアニメーション（IntersectionObserver 連動）
   ========================================================================== */
.service-block.fade-init {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.service-block.fade-init.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ビジュアル側（SP: 最低高さを確保） */
.service-block-visual {
  width: 100%;
  min-height: 260px;
  flex-shrink: 0;
}

/* ワークショップ用画像 */
.service-block-visual--warm {
  background-color: #ffffff;
  background-image: url('../images/service-workshop.jpg');
  background-size: cover;
  background-position: center;
}

/* コーチング用画像 */
.service-block-visual--cool {
  background-color: #ffffff;
  background-image: url('../images/service-coaching.jpg');
  background-size: cover;
  background-position: center;
}

/* ==========================================================================
   メディアクエリ（モバイルファースト）
   ========================================================================== */

/* Tablet: 768px以上 */
@media (min-width: 768px) {
  .service-concept-section {
    padding: 80px 0;
  }

  .service-concept-text {
    font-size: var(--fs-md);
    text-align: center; /* タブレット以上：中央揃えに戻す */
  }

  .service-block-title {
    font-size: var(--fs-3xl);
  }

  .service-block-visual {
    min-height: 360px;
  }
}

/* PC: 1024px以上 */
@media (min-width: 1024px) {
  .service-concept-section {
    padding: 96px 0;
  }

  /* PC: 横並び（左右50:50）*/
  .service-block-inner {
    flex-direction: row;
    min-height: 520px;
  }

  /* コーチング：テキストをDOMで先に書き、CSSで右側へ（row-reverse） */
  .service-block-inner--reverse {
    flex-direction: row-reverse;
  }

  /* テキスト側・ビジュアル側を50:50に */
  .service-block-body,
  .service-block-visual {
    flex: 1 1 50%;
    width: 50%;
    min-height: inherit;
  }

  .service-block-body {
    padding: 80px 60px;
    justify-content: flex-end; /* ワークショップ（左側）は右寄せ＝コンテンツ中心 */
  }

  /* コーチング（row-reverse）のテキストパネルは左寄せ */
  .service-block-inner--reverse .service-block-body {
    justify-content: flex-start;
  }
}