@charset "UTF-8";

/* =========================================
   Service (サービス詳細エリア)
   ========================================= */
.service {
  --color-service-num: #9095f5;
  --color-service-title: #05093d;
  --color-accordion-grad-start: #84b4fb;
  --color-accordion-grad-end: #9885f3;
  
  padding: 12rem 0;
}

.service__inner {
  padding: 0 2rem;
}

.service__header-title {
  margin-bottom: 6rem; /* PC: タイトル下の余白 */
}

.service__list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* --- カードレイアウト --- */
.service__item {
  display: flex;
  align-items: stretch;
  gap: 2rem;
}

.service__image {
  width: 34%;
  align-self: flex-start; /* 修正: 右側が伸びても画像エリアは上部に固定され、引き伸ばされないようにする */
}
.service__image img {
  width: 100%;
  height: auto; /* 修正: 100%からautoに変更 */
  aspect-ratio: 3 / 2; /* 修正: 画像のアスペクト比を固定し、レイアウトを安定させる */
  object-fit: cover;
  border-radius: 0;
}

.service__content {
  width: 66%;
  background-color: var(--color-bg-gray);
  padding: 5rem 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0;
}

/* --- 見出しエリア --- */
.service__head {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.service__num {
  color: var(--color-service-num);
  font-size: 2.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.service__num::after {
  content: "";
  display: block;
  width: 1px;
  height: 1.2em;
  background-color: #ccc;
}

.service__title {
  color: var(--color-service-title);
  font-size: 2.6rem;
  font-weight: 700;
}

/* --- アコーディオン・テキスト --- */
.service__text {
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--color-text-main);
  margin-bottom: 2rem;
}

.service__hidden-content {
  height: 0;
  overflow: hidden;
  transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.service__text-inner {
  padding-bottom: 2.4rem;
}

/* --- 専用アコーディオンボタン --- */
.service__accordion-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.4rem;
  background: linear-gradient(to right, var(--color-accordion-grad-start), var(--color-accordion-grad-end));
  color: var(--color-white);
  font-weight: 700;
  font-size: 1.4rem;
  border: none;
  cursor: pointer;
  padding: 0.6rem 2.4rem;
  transition: opacity 0.3s ease;
}

.service__accordion-btn:hover {
  opacity: 0.8;
}

/* =========================================
   Responsive Settings
   ========================================= */
/* タブレット表示 (1024px以下) */
@media (max-width: 1024px) {
  .service {
    padding: 6rem 0; 
  }
  .service__header-title {
    margin-bottom: 4rem; 
  }
  .service__item {
    flex-direction: column; 
    gap: 0; 
  }
  .service__image,
  .service__content {
    width: 100%; 
  }
  .service__image {
    align-self: auto; /* SP/タブレット時は1カラムなのでリセット */
  }
  .service__content {
    padding: 4rem 3rem;
  }
  .service__title,
  .service__num {
    font-size: 2.0rem; 
  }
}

/* スマホ表示 (767px以下) */
@media (max-width: 767px) {
  .service__header-title {
    margin-bottom: 3rem; 
  }
  .service__list {
    gap: 2.4rem; 
  }
  .service__content {
    padding: 3rem 2rem;
  }
  .service__head {
    margin-bottom: 1.6rem;
  }
  .service__title,
  .service__num {
    font-size: 1.8rem;
  }
}