/* Services Page Styles */

.services-list {
}

/* Service Detail */
.service-detail__header {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.service-detail__icon {
  width: var(--icon-xl);
  height: var(--icon-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-green-50);
  border-radius: var(--radius-lg);
  color: var(--color-green-700);
  flex-shrink: 0;
}

.service-detail__icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.service-detail__name {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  margin-top: var(--space-2);
}

.service-detail__visual {
  margin-bottom: var(--space-8);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.service-detail__visual-img {
  width: 100%;
  height: auto;
  display: block;
}

.service-detail__desc {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-500);
  max-width: 720px;
  margin-bottom: var(--space-12);
}

/* Features */
.service-detail__features h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-6);
}

.service-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

.service-feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-green-pale);
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
}

.service-feature svg {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .service-features-grid {
    grid-template-columns: 1fr;
  }

  .service-detail__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Content area */
.service-detail__content {
  margin-bottom: var(--space-12);
}

.service-detail__content h2,
.service-detail__content h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.service-detail__content p {
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

.service-detail__content ul,
.service-detail__content ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.service-detail__content li {
  margin-bottom: var(--space-2);
  list-style: disc;
}

/* Related Cases */
.service-detail__cases h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-6);
}

/* Other Services Section */
.service-others__heading {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-8);
  text-align: center;
}

/* ============================================================
   Service Detail - WP Block Content (本番コンテンツの表示調整)
   ============================================================ */

/* 旧サイト専用要素を非表示 */
.service-detail__content .uag-hide-mob,
.service-detail__content .wp-block-spacer,
.service-detail__content .wp-block-cover {
  display: none !important;
}


/* Headings */
.service-detail__content h2.wp-block-heading {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--color-gray-900);
  line-height: var(--leading-tight);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.service-detail__content h3.wp-block-heading {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  color: var(--color-gray-900);
  margin-top: var(--space-10);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-green-200);
}

.service-detail__content h4.wp-block-heading {
  font-size: var(--text-body-lg);
  font-weight: var(--weight-bold);
  color: var(--color-gray-800);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

/* YouTube iframe */
.service-detail__content iframe {
  display: block;
  margin: 0 auto var(--space-8);
  max-width: 100%;
}

/* Columns layout */
.service-detail__content .wp-block-columns {
  display: flex;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  align-items: flex-start;
}

.service-detail__content .wp-block-column {
  flex: 1 1 0;
  min-width: 200px;
}

/* Images */
.service-detail__content .wp-block-image {
  margin-bottom: var(--space-6);
}

.service-detail__content .wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}

/* Lists */
.service-detail__content .wp-block-list {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.service-detail__content .wp-block-list li {
  list-style: disc;
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-700);
}

/* Buttons（UAGBおよびコアボタンブロック） */
.service-detail__content .wp-block-buttons,
.service-detail__content .wp-block-buttons.is-content-justification-left,
.service-detail__content .wp-block-column .wp-block-buttons,
.service-detail__content .uagb-buttons-repeater {
  display: flex !important;
  flex-wrap: wrap;
  width: 100% !important;
  justify-content: center !important;
  gap: var(--space-3);
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}

/* グループブロック内のボタン：block+text-align方式で確実にセンタリング */
.service-detail__content .wp-block-group .wp-block-buttons {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}

.service-detail__content .wp-block-group .wp-block-button {
  display: inline-block !important;
  width: auto !important;
}

.service-detail__content .wp-block-button__link,
.service-detail__content .uagb-button-wrap a {
  display: inline-flex;
  width: auto !important;
  align-items: center;
  padding: 13px 28px;
  background-color: var(--color-accent);
  color: var(--color-white) !important;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  letter-spacing: var(--letter-spacing-wide);
  text-decoration: none;
  transition: all var(--duration-normal) var(--ease-out);
  border: none;
  white-space: nowrap;
  cursor: pointer;
}

.service-detail__content .wp-block-button__link:hover,
.service-detail__content .uagb-button-wrap a:hover {
  background-color: var(--color-accent-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}

/* Tables（料金表など） */
.service-detail__content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-8);
  font-size: var(--text-body-sm);
}

.service-detail__content th,
.service-detail__content td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-gray-200);
  text-align: left;
  vertical-align: top;
}

.service-detail__content th {
  background: var(--color-green-50);
  font-weight: var(--weight-bold);
  color: var(--color-gray-800);
}

.service-detail__content tr:nth-child(even) td {
  background: var(--color-gray-50);
}

/* UAG FAQ ブロック */
.service-detail__content .wp-block-uagb-faq {
  margin-bottom: var(--space-8);
}

.service-detail__content .uagb-faq-child__outer-wrap {
  border-bottom: 1px solid var(--color-gray-200);
}

.service-detail__content .uagb-faq-child__outer-wrap:first-child {
  border-top: 1px solid var(--color-gray-200);
}

.service-detail__content .uagb-faq-questions-button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  cursor: pointer;
  user-select: none;
}

.service-detail__content .uagb-question {
  flex: 1;
  font-weight: var(--weight-bold);
  color: var(--color-gray-900);
  line-height: var(--leading-normal);
}

/* ＋アイコン（デフォルト表示）／－アイコン（アクティブ時表示） */
.service-detail__content .uagb-icon svg,
.service-detail__content .uagb-icon-active svg {
  width: 14px;
  height: 14px;
  fill: var(--color-green-600);
  flex-shrink: 0;
}

.service-detail__content .uagb-icon-active {
  display: none;
}

.service-detail__content .uagb-faq-child__outer-wrap.is-open .uagb-icon {
  display: none;
}

.service-detail__content .uagb-faq-child__outer-wrap.is-open .uagb-icon-active {
  display: inline-flex;
}

/* 回答エリア */
.service-detail__content .uagb-faq-content {
  display: none;
  padding: 0 0 var(--space-4) var(--space-7);
  color: var(--color-gray-700);
  line-height: var(--leading-relaxed);
}

.service-detail__content .uagb-faq-child__outer-wrap.is-open .uagb-faq-content {
  display: block;
}

/* UAG Tabs ブロック */
.service-detail__content .uagb-tabs__wrap {
  margin-bottom: var(--space-8);
}

.service-detail__content .uagb-tabs__tab-head-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 2px solid var(--color-green-200);
  margin-bottom: var(--space-6);
  list-style: none;
  padding: 0;
}

.service-detail__content .uagb-tabs__tab {
  list-style: none;
}

.service-detail__content .uagb-tabs__tab a,
.service-detail__content .uagb-tabs__tab button,
.service-detail__content .uagb-tabs__tab-title-wrap {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-weight: var(--weight-medium);
  font-size: var(--text-body-sm);
  color: var(--color-gray-600);
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}

.service-detail__content .uagb-tabs__tab.uagb-tabs__active a,
.service-detail__content .uagb-tabs__tab.uagb-tabs__active button,
.service-detail__content .uagb-tabs__tab.uagb-tabs__active .uagb-tabs__tab-title-wrap {
  color: var(--color-green-700);
  border-bottom-color: var(--color-green-600);
}

.service-detail__content .uagb-tabs__body-wrap {
  padding: var(--space-4) 0;
}

.service-detail__content .uagb-tabs__panel {
  display: none;
}

.service-detail__content .uagb-tabs__panel.uagb-tabs__active {
  display: block;
}

/* UAGBの既存インラインスタイル（color等）をテーマカラーで上書き */
.service-detail__content [style*="color"] {
  color: inherit;
}

/* テキストの標準スタイル */
.service-detail__content p {
  line-height: var(--leading-relaxed);
  color: var(--color-gray-700);
  margin-bottom: var(--space-4);
}

/* インラインのハイライト背景（linear-gradient）はそのまま活かす */
.service-detail__content mark,
.service-detail__content span[style*="background"] {
  background-color: transparent;
}

/* Responsive */
@media (max-width: 768px) {
  .service-detail__content .wp-block-columns {
    flex-direction: column;
    gap: var(--space-6);
  }

  .service-detail__content .wp-block-column {
    min-width: unset;
    width: 100%;
  }
}