/* ============================================================
   Minacle Design Office / Shared components CSS
   home / profile / service ページ間で共有されるルール
   ============================================================ */

.md-page.ag-custom-page .ag-section {
  position: relative;
  z-index: 1;
  padding-block: var(--md-section-y);
}

.md-page.ag-custom-page .ag-section-inner {
  max-width: var(--md-content-width);
  margin-inline: auto;
}

.md-page.ag-custom-page .ag-profile-section {
  padding-top: 0 !important;
}

.md-page.ag-custom-page .ag-btn,
.md-page.ag-custom-page .ag-btn-primary,
.md-page.ag-custom-page .ag-btn-outline {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.md-page.ag-custom-page .ag-btn,
.md-page.ag-custom-page .ag-btn-primary {
  border: 1px solid transparent;
  background: var(--md-color-accent) !important;
  color: var(--md-color-neutral-0) !important;
  box-shadow: 0 8px 20px rgba(111, 145, 168, 0.18);
}

.md-page.ag-custom-page .ag-btn:hover,
.md-page.ag-custom-page .ag-btn-primary:hover {
  background: var(--md-color-primary-400) !important;
  color: var(--md-color-neutral-0) !important;
}

.md-page.ag-custom-page .ag-btn-outline {
  border: 1px solid var(--md-color-accent) !important;
  color: var(--md-color-accent) !important;
  background: var(--md-color-neutral-0);
}

.md-page.ag-custom-page .ag-btn-outline:hover {
  border-color: var(--md-color-accent) !important;
  background: var(--md-color-accent) !important;
  color: var(--md-color-neutral-0) !important;
}

.md-page.ag-custom-page .ag-service-num .ag-line {
  width: 36px;
  height: 1px;
  background: var(--md-color-border) !important;
}

@media (min-width: 768px) {
  .md-page.ag-custom-page .ag-btn,
  .md-page.ag-custom-page .ag-btn-primary,
  .md-page.ag-custom-page .ag-btn-outline {
    width: auto;
  }
}

@media (max-width: 767px) {
  .md-page.ag-custom-page .ag-section {
    padding-block: 40px !important;
  }

  .md-page.ag-custom-page .ag-profile-section {
    margin-top: 0 !important;
    padding-top: 28px !important;
  }

  .md-page.ag-custom-page .ag-service-num .ag-line {
    width: 42px;
    height: 1px;
    background: rgba(111, 145, 168, 0.42) !important;
  }
}

.md-page.ag-custom-page .ag-script {
  display: inline-block;
  margin-bottom: 14px;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: var(--md-color-primary-400);
}

.md-page.ag-custom-page .ag-script::before { content: "— "; }

.md-page.ag-custom-page .ag-script::after  { content: " —"; }

.md-page.ag-custom-page .ag-script--warm {
  color: var(--md-color-warm-text) !important;
}

.md-page.ag-custom-page .ag-script--warm::before { content: "— "; color: var(--md-color-warm-text); }

.md-page.ag-custom-page .ag-script--warm::after  { content: " —"; color: var(--md-color-warm-text); }

/* ------------------------------------------------------------
   service.css / profile.css 共通の基本定義
   （STEP0-1 report対応：service.css からの追記のみ。
   service.css / profile.css 側の既存ルールは削除・変更していない）
   ------------------------------------------------------------ */

.md-page.ag-custom-page .ag-section-head {
  text-align: center;
  margin-bottom: 44px;
}

/* 1カラム小見出し（アイコン＋右伸び線） */
.md-page.ag-custom-page .ag-plan-sub-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--md-color-primary-400);
  letter-spacing: 0.06em;
}
.md-page.ag-custom-page .ag-plan-sub-heading svg {
  width: 18px; height: 18px;
  color: var(--md-color-primary-400);
  flex-shrink: 0;
}
.md-page.ag-custom-page .ag-plan-sub-heading .ag-heading-line {
  flex: 1;
  height: 4px;
  background-image: radial-gradient(circle, #c8d0d4 2px, transparent 2px);
  background-size: 10px 4px;
  background-repeat: repeat-x;
  background-position: left center;
  border: none;
}

/* 画像（水色シャドウ） */
.md-page.ag-custom-page .ag-plan-row-img-wrap {
  position: relative;
  padding: 16px 0 0 16px;
}
.md-page.ag-custom-page .ag-plan-row-img-wrap--reverse {
  padding: 16px 16px 0 0;
}
.md-page.ag-custom-page .ag-plan-row-img-wrap::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0; left: 0;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  background: var(--md-color-primary-50);
  border-radius: 16px;
}
.md-page.ag-custom-page .ag-plan-row-img-wrap--reverse::before { left: auto; right: 0; }
.md-page.ag-custom-page .ag-plan-row-img-inner {
  position: relative;
  z-index: 2;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--md-shadow-card);
}
.md-page.ag-custom-page .ag-plan-row-img-inner img { width: 100%; height: 100%; object-fit: cover; }

.md-page.ag-custom-page .ag-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
}
.md-page.ag-custom-page .ag-btn-row .ag-btn,
.md-page.ag-custom-page .ag-btn-row .ag-btn-outline {
  width: auto;
  min-width: 240px;
}

@media (max-width: 768px) {
  .md-page.ag-custom-page .ag-plan-row-img-wrap,
  .md-page.ag-custom-page .ag-plan-row-img-wrap--reverse { padding: 12px 0 0 12px; }
  .md-page.ag-custom-page .ag-btn-row {
    flex-direction: column;
    align-items: center;
  }
  .md-page.ag-custom-page .ag-btn-row .ag-btn,
  .md-page.ag-custom-page .ag-btn-row .ag-btn-outline {
    width: 100%;
    max-width: 320px;
  }
}