/* マーケティング支援ページ。共通のヘッダー・フッター以外はページ内に限定する。 */
.page-marketing .phrase { display: inline-block; }
.page-marketing main { background: radial-gradient(ellipse at 96% 3%, #15b0c70d, transparent 35%); }
.marketing-hero { padding-top: 160px; padding-bottom: 72px; }
.marketing-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 42px; font-size: 11px; color: var(--text-mute); }
.marketing-breadcrumb a { text-decoration: none; }
.marketing-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 56px; }
.marketing-eyebrow { color: var(--accent-ink); font-size: 11px; line-height: 1.9; letter-spacing: .12em; }
.marketing-hero h1 { margin-top: 20px; font-size: clamp(24px, 3.2vw, 42px); line-height: 1.7; letter-spacing: .04em; }
.marketing-hero__lead { max-width: 540px; margin-top: 26px; font-size: 15px; line-height: 2.1; color: var(--text-soft); }
.marketing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.marketing-actions .btn-primary, .marketing-actions .btn-outline { min-height: 48px; }
.marketing-actions .btn-outline { margin-top: 0; }
.marketing-more { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--accent-ink); text-decoration: none; font-size: 12px; }
.marketing-map { margin: 0; padding: 28px 30px; border: 1px solid var(--line); border-radius: 3px 32px 3px 32px; background: #15b0c706; }
.marketing-map__intro { text-align: center; color: var(--text-mute); font-size: 11px; letter-spacing: .1em; }
.marketing-map ol { margin: 24px 0 0; padding: 0; list-style: none; }
.marketing-map li { position: relative; }
.marketing-map li + li { margin-top: 14px; }
.marketing-map li:not(:last-child)::after { content: ''; position: absolute; left: 17px; bottom: -14px; height: 14px; border-left: 1px solid #087f9140; }
.marketing-map a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; color: var(--text); text-decoration: none; }
.marketing-map__number { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #087f9145; border-radius: 50%; color: var(--accent-ink); font-size: 11px; transition: background .25s; }
.marketing-map__name { display: block; font-size: 15px; }
.marketing-map__role { display: block; margin-top: 3px; color: var(--text-soft); font-size: 11px; line-height: 1.8; }
.marketing-map__arrow { color: var(--accent-ink); font-size: 15px; transition: transform .25s; }
.marketing-map a:hover .marketing-map__number, .marketing-map a:focus-visible .marketing-map__number { background: #15b0c71b; }
.marketing-map a:hover .marketing-map__arrow, .marketing-map a:focus-visible .marketing-map__arrow { transform: translateX(4px); }
.marketing-map figcaption { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.9; color: var(--text-mute); }
.marketing-section { padding-top: 88px; scroll-margin-top: 110px; }
.marketing-section__inner { max-width: 920px; margin: auto; }
.marketing-section h2 { margin-top: 16px; font-size: clamp(24px, 3vw, 32px); line-height: 1.7; letter-spacing: .05em; }
.marketing-section__lead { max-width: 760px; margin-top: 22px; color: var(--text-soft); font-size: 15px; line-height: 2.1; }
.marketing-worries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 32px 0 0; padding: 0; list-style: none; }
.marketing-worries li { padding-top: 20px; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.9; }
.marketing-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
.marketing-card { padding: 30px; border: 1px solid var(--line); border-top: 2px solid #087f9180; background: #ffffffb3; scroll-margin-top: 115px; }
.marketing-card__icon { display: block; width: 30px; height: 30px; color: var(--accent-ink); }
.marketing-card h3 { margin-top: 18px; font-size: 21px; line-height: 1.6; }
.marketing-card p { margin-top: 16px; font-size: 14px; line-height: 2; color: var(--text-soft); }
.marketing-card ul { display: grid; gap: 5px; margin: 18px 0 0; padding-left: 1.3em; font-size: 12px; line-height: 1.9; color: var(--text-mute); }
.marketing-card .marketing-more { margin-top: 16px; }
.marketing-approach { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; margin-top: 32px; padding: 30px; border-left: 2px solid var(--brand); background: #15b0c708; }
.marketing-approach h3 { font-size: 20px; line-height: 1.7; }
.marketing-approach p { margin-top: 14px; color: var(--text-soft); font-size: 14px; line-height: 2; }
.marketing-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 34px 0 0; padding: 0; list-style: none; }
.marketing-steps li { padding-top: 20px; border-top: 1px solid var(--line); }
.marketing-steps__number { color: var(--accent-ink); font-size: 11px; }
.marketing-steps h3 { margin-top: 12px; font-size: 18px; line-height: 1.7; }
.marketing-steps p { margin-top: 12px; font-size: 13px; line-height: 2; color: var(--text-soft); }
.marketing-quote { margin-top: 34px; padding: 30px; border: 1px solid var(--line); border-radius: 3px 24px 3px 24px; }
.marketing-quote h3 { font-size: 21px; line-height: 1.7; }
.marketing-quote p { margin-top: 14px; color: var(--text-soft); font-size: 14px; line-height: 2; }
.marketing-quote strong { color: var(--accent-ink); font-weight: 700; }
.marketing-faq { margin-top: 28px; }
.marketing-faq details { border-top: 1px solid var(--line); }
.marketing-faq details:last-child { border-bottom: 1px solid var(--line); }
.marketing-faq summary { padding: 22px 16px 22px 0; font-size: 15px; line-height: 1.8; cursor: pointer; }
.marketing-faq details p { padding: 0 18px 24px 0; color: var(--text-soft); font-size: 14px; line-height: 2; }
.marketing-contact { margin-top: 80px; padding: 42px; border: 1px solid #087f9140; border-radius: 3px 32px 3px 32px; background: radial-gradient(ellipse at 100% 20%, #15b0c70e, transparent 75%); }
.marketing-contact h2 { font-size: clamp(20px, 6vw, 32px); }
.marketing-contact p:not([class]) { margin-top: 20px; color: var(--text-soft); font-size: 14px; line-height: 2; }
.marketing-contact__note { margin-top: 18px; color: var(--text-mute); font-size: 12px; line-height: 1.9; }
.marketing-return { max-width: 1016px; padding-bottom: 76px; }
.page-marketing a:focus-visible, .page-marketing summary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 5px; }
@media (max-width: 919px) {
  .marketing-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .marketing-map { width: 100%; max-width: 600px; justify-self: center; }
  .marketing-worries, .marketing-services, .marketing-approach, .marketing-steps { grid-template-columns: minmax(0, 1fr); }
  .marketing-worries { gap: 20px; }
  .marketing-steps { gap: 24px; }
}
@media (max-width: 600px) {
  .marketing-hero { padding-top: 120px; padding-bottom: 40px; }
  .marketing-breadcrumb { margin-bottom: 32px; }
  .marketing-hero h1 { font-size: clamp(24px, 6.5vw, 36px); }
  .marketing-hero__lead, .marketing-section__lead { font-size: 14px; }
  .marketing-actions { align-items: stretch; }
  .marketing-actions .btn-primary, .marketing-actions .btn-outline { width: 100%; justify-content: center; padding-left: 14px; padding-right: 14px; font-size: 13px; }
  .marketing-map { padding: 24px 20px; }
  .marketing-map a { gap: 10px; }
  .marketing-map__name { font-size: 14px; }
  .marketing-section { padding-top: 60px; }
  .marketing-card, .marketing-approach, .marketing-quote { padding: 25px 22px; }
  .marketing-contact { margin-top: 60px; padding: 30px 22px; }
}
@media (prefers-reduced-motion: reduce), print {
  .marketing-map__number, .marketing-map__arrow { transition: none; }
  .marketing-map a:hover .marketing-map__arrow, .marketing-map a:focus-visible .marketing-map__arrow { transform: none; }
}