/* ===== service.css ===== */
/* strategy / redefine / content_creation / employer_branding / monthly-partner 共通 */

/* ===== MONTHLY-PARTNER ページ ===== */
/* .mp-page { background: var(--paper); } */

/* HERO */
.mp-hero { text-align: center; }
.mp-hero .kicker {
  font-size: 30px;
  color: #2a3440;
  letter-spacing: .3em;
}
.mp-hero__sub {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--sub);
  margin: 16px 0 0;
}
.mp-hero__title {
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 24px);
  font-weight: 400;
  letter-spacing: .16em;
  line-height: 1.9;
  color: var(--ink);
  margin: 36px 0 0;
}
.mp-hero__lead {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .12em;
  line-height: 2.4;
  color: var(--ink);
  margin: 44px auto 0;
  max-width: 480px;
}

/* 左sticky + 右コンテンツ セクション共通 */

.mp-section__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 80px;
  align-items: start;
}
.mp-section__label {
  position: sticky;
  top: 80px;
}
/* Conceptページと同じ白帯見出し */
.mp-section__heading {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: .18em;
  line-height: 1;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.mp-section__heading span {
  background: #fff;
  padding: 6px 14px;
  line-height: 1.9;
  display: block;
}

/* こんなときに: チェックリスト */
.mp-section__body { padding-bottom: 4px; }
/* チェックリスト */
.mp-check {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 18px 0;
}
.mp-check__mark {
  font-family: 'Baskervville', serif;
  font-size: 27px;
  color: var(--shu);
  flex-shrink: 0;
}
/* .mp-check p は .mp-section__body p より高い特異度で上書き */
.mp-section__body .mp-check p {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .1em;
  line-height: 1.9;
  color: var(--ink);
  margin: 0;
}

/* 本文段落（関わり方など） */
.mp-section__body p {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: .08em;
  line-height: 2.6;
  color: var(--ink);
  margin: 0 0 1.8em;
}
.mp-section__body p:last-child { margin-bottom: 0; }

/* 補足note（例：節目リスト）*/
p.mp-section__note {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .1em;
  line-height: 2.2;
  color: var(--sub);
  margin: 28px 0 0;
}

/* 小さめ見出し（インタビュー・話を聞きました等） */
.mp-section__heading--sm {
  font-size: 20px;
}
.mp-section__heading--sm span {
  line-height: 1.8;
}

/* 「」タイトル行 */
.mp-body-title {
  font-size: 18px;
  letter-spacing: .12em;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .mp-section__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 24px;
  }
  .mp-section__label { position: static; }
  .mp-hero__lead { max-width: 100%; }
  .mp-section__heading { font-size: 20px; }
}


/* ===== SERVICE 一覧ページ ===== */

/* HERO */
.sv-hero { text-align: center; }
.sv-hero .kicker {
  font-size: 30px;
  color: #2a3440;
  letter-spacing: .3em;
}
.sv-hero__sub {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .28em;
  color: var(--ink);
  /* margin: 24px 0 0; */
  font-weight: 400;
}

/* フロー図 */
.sv-flow {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 60px clamp(60px, 8vw, 100px);
}
.sv-flow picture,
.sv-flow img {
  width: 100%;
  height: auto;
  display: block;
}

/* 編集室が整えるもの */
.sv-items__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 80px;
  align-items: start;
}
.sv-items__label {
  position: sticky;
  top: 80px;
}
/* Conceptページと同じ白帯見出し */
.sv-items__label-heading {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: .18em;
  line-height: 1;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.sv-items__label-heading span {
  background: #fff;
  padding: 6px 14px;
  line-height: 1.9;
  display: block;
}
.sv-items__list {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-bottom: 20px;
}
.sv-item__heading {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: .16em;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 10px;
}
.sv-item__sub {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--sub);
  letter-spacing: .08em;
  line-height: 1.8;
  margin: 0 0 20px;
  padding-left: 20px;
}
.sv-item__box {
  padding: 24px 28px;
  background-color: #fff;
  background-image:
    linear-gradient(rgba(0,0,0,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.025) 1px, transparent 1px);
  background-size: 22px 22px;
}
.sv-item__box p {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .06em;
line-height: 1.6;
    padding: 8px 0;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.sv-item__box p::before {
  content: "✓";
  font-family: 'Baskervville', serif;
  font-size: 16px;
  color: var(--shu);
  flex-shrink: 0;
}

/* TOCセクション */
.sv-toc-section {
  background-image: linear-gradient(rgba(255,255,255,0.28), rgba(255,255,255,0.28)),
                    url(../img/common/bg01.webp);
  background-size: cover;
  background-position: center;
}
.sv-toc__intro {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .14em;
  color: var(--sub);
  margin: 0 0 28px;
}

/* TOCボックス（front-pageと同スタイル） */
.sv-toc-section .fp-toc {
  background: #fff;
  padding: 16px 36px;
  margin-bottom: 0;
}
.sv-toc-section .fp-toc .toc-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 0;
  text-decoration: none;
  color: inherit;
  transition: opacity .25s ease, color .25s ease;
}
.sv-toc-section .fp-toc .toc-row:last-child { border-bottom: none; }
.sv-toc-section .fp-toc .toc-row:hover { opacity: .6; color: #DD4827; }
.sv-toc-section .fp-toc .toc-row .no  { font-size: 11px; letter-spacing: .2em; color: var(--sub); flex-shrink: 0; transition: color .25s ease; }
.sv-toc-section .fp-toc .toc-row .t   { font-family: var(--serif); font-size: 15px; letter-spacing: .08em; flex-shrink: 0; }
.sv-toc-section .fp-toc .toc-row .dots { flex: 1; border-bottom: 1px dotted var(--sub); transform: translateY(-4px); min-width: 20px; }
.sv-toc-section .fp-toc .toc-row .tag { font-family: var(--serif); font-size: 11px; color: #555; letter-spacing: .06em; flex-shrink: 0; max-width: 46%; text-align: right; transition: color .25s ease; }
.sv-toc-section .fp-toc .toc-row:hover .no,
.sv-toc-section .fp-toc .toc-row:hover .tag { color: #DD4827; }

/* START SMALL */
.sv-start {
  text-align: center;
}
.sv-start__kicker {
  margin: 0 0 16px;
  color: var(--sub);
}
.sv-start__title {
  font-family: var(--serif);
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--ink);
  margin: 0 0 28px;
  line-height: 1.8;
}
.sv-start .body {
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 2.6;
  letter-spacing: .14em;
}
.sv-start__cta {
  margin-top: 36px;
  text-align: center;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .sv-flow { padding: 0 24px clamp(40px, 6vw, 60px); }
  .sv-items__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 24px;
  }
  .sv-items__label { position: static; }
  .sv-items__label-heading { font-size: 20px; }
  .sv-toc-section .fp-toc { padding: 16px 20px; }
  .sv-toc-section .fp-toc .toc-row { flex-wrap: wrap; }
  .sv-toc-section .fp-toc .toc-row .dots { display: none; }
  .sv-toc-section .fp-toc .toc-row .tag { max-width: 100%; text-align: left; width: 100%; padding-left: 26px; }
}


.svc-section { background: var(--paper); }
.svc-section--alt { background: var(--bg); }

/* voice-close は右寄せ */
.voice-close {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .08em;
  margin-top: 44px;
  text-align: right;
}

/* verbsコンポーネントの num(漢数字)位置 */
.verbs .verb .num {
  position: absolute;
  left: -44px;
  top: 38px;
  font-family: var(--serif);
  font-size: 12px;
  color: var(--sub);
  background: var(--bg);
  padding: 6px 0;
  z-index: 1;
}
.svc-section .verbs .verb .num { background: var(--paper); }
.svc-section--alt .verbs .verb .num { background: var(--bg); }

/* Service一覧 */
.sv-section { background: var(--paper); }
.sv-section--alt { background: var(--bg); }

/* 索引グリッド(2×2) */
.sv-index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 16px;
}
.sv-index-item {
  background: var(--paper);
  padding: 32px 28px;
}
@media (max-width: 600px) {
  .sv-index { grid-template-columns: 1fr; }
}

/* toc-rowをリンクとして使う場合 */
.toc-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 0;
  text-decoration: none;
  color: inherit;
  transition: opacity .25s ease;
}
.toc-row:last-child { border-bottom: none; }
.toc-row:hover { opacity: .65; }

/* ===== STRATEGY: PROCESSフロー ===== */
.st-process {
  background-image: linear-gradient(rgba(255,255,255,0.28), rgba(255,255,255,0.28)),
                    url(../img/common/bg01.webp);
  background-size: cover;
  background-position: center;
  text-align: center;
}
.st-process .kicker { margin-bottom: 14px; }
.st-process__title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--ink);
  margin: 0 0 28px;
}
.st-process__lead {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .14em;
  line-height: 2.2;
  color: var(--sub);
  margin: 0 0 clamp(56px, 8vw, 88px);
}

/* タイムライン */
.st-timeline {
  position: relative;
  text-align: left;
}
.st-spine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  pointer-events: none;
  overflow: hidden;
}
.st-spine__fill {
  width: 100%;
  height: 0;
  background: var(--ink);
}

/* ステップ行 */
.st-step {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  align-items: start;
  padding: 40px 0;
  opacity: 0;
  transition: opacity .55s ease;
}
.st-step.st-step--visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .st-step { opacity: 1 !important; transition: none !important; }
}
.st-step__node {
  display: flex;
  justify-content: center;
  padding-top: 5px;
}
.st-dot {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* テキスト（右側ステップ） */
.st-step--r .st-step__body {
  position: relative;
  padding-left: 28px;
}
.st-step--r .st-step__body::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 8px;
  width: 52px;
  height: 1px;
  background: var(--ink);
}

/* テキスト（左側ステップ） */
.st-step--l .st-step__body {
  position: relative;
  padding-right: 28px;
}
.st-step--l .st-step__body::after {
  content: "";
  position: absolute;
  right: -24px;
  top: 8px;
  width: 150px;
  height: 1px;
  background: var(--ink);
}

.st-verb {
  display: block;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: .18em;
  color: var(--ink);
  margin-bottom: 10px;
  margin-top: -8px;
}
.st-step__body p {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .08em;
  line-height: 2.2;
  color: var(--ink);
  margin: 0;
}

/* CC クロージング */
.cc-close {
  text-align: center;
}
.cc-close__label {
  font-family: var(--serif);
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 400;
  letter-spacing: .18em;
  line-height: 1.9;
  color: var(--ink);
  margin: 0 0 44px;
}
.cc-close__body {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .14em;
  line-height: 2.4;
  color: var(--sub);
  margin: 0 auto 52px;
}

/* 納品物ボックス */
.mp-section__body .st-outcome { margin-top: 40px; }
.st-outcome {
  background: #fff;
  margin-top: clamp(48px, 7vw, 80px);
  padding: 44px 56px;
  display: flex;
  align-items: center;
  gap: 44px;
}
.st-outcome__icon {
  flex-shrink: 0;
  width: 84px;
  color: var(--sub);
}
.st-outcome__icon svg { width: 100%; height: auto; display: block; }
.st-outcome .st-outcome__text {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: .2em;
  line-height: 2.0;
  color: var(--ink);
  margin: 0;
  text-align: left;
}
@media (max-width: 640px) {
  .st-outcome { padding: 32px 28px; gap: 28px;     flex-direction: column;}
  .st-outcome__icon { width: 60px; }    
  .st-outcome__text { font-size: 14px; }
}

/* SP: 全て左揃えに切り替え */
@media (max-width: 640px) {
  .st-step {
    grid-template-columns: 28px 1fr;
    padding: 24px 0;
  }
  /* 右ステップ: pad非表示→node col1・body col2 */
  .st-step--r .st-step__pad { display: none; }
  /* 左ステップ: pad非表示・node/bodyを再配置 */
  .st-step--l .st-step__pad { display: none; }
  .st-step--l .st-step__node { grid-column: 1; grid-row: 1; }
  .st-step--l .st-step__body { grid-column: 2; grid-row: 1; padding-right: 0; padding-left: 16px; }
  .st-step--r .st-step__body { padding-left: 16px; }
  .st-step--r .st-step__body::before,
  .st-step--l .st-step__body::after { display: none; }
  .st-spine { left: 14px; }
}

/* section--contact の区切り */
.section--contact + .section--contact {
  border-top: 1px solid var(--line);
}

/* ===== MONTHLY-PARTNER クロージング (concept-close と同構造) ===== */
.mp-close {
  /* background: var(--paper); */
  padding-top: clamp(80px, 10vw, 120px);
  padding-bottom: clamp(80px, 10vw, 140px);
}
.mp-close__quote {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: .2em;
  line-height: 2.6;
  color: var(--ink);
  text-align: center;
  margin: 0 0 clamp(60px, 8vw, 100px);
}
.mp-close__nav {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.mp-close__label {
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: .22em;
  line-height: 2.0;
  color: var(--ink);
  margin: 0;
}
.mp-close__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mp-close__links a {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .2em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  transition: gap .6s cubic-bezier(.25,.8,.25,1), opacity .3s ease;
}
.mp-close__links a:hover { gap: 44px; opacity: .55; }
.mp-close__links a:hover .c-arrow { width: 64px; }

/* 伸びる矢印 (service.css内で定義) */
.mp-close .c-arrow {
  position: relative;
  width: 28px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
  transition: width .6s cubic-bezier(.25,.8,.25,1);
}
.mp-close .c-arrow::before,
.mp-close .c-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  width: 6px;
  height: 1px;
  background: currentColor;
}
.mp-close .c-arrow::before { top: 0; transform: rotate(-38deg); transform-origin: right bottom; }
.mp-close .c-arrow::after  { bottom: 0; transform: rotate(38deg); transform-origin: right top; }

@media (max-width: 640px) {
  .mp-close__nav { grid-template-columns: 1fr; gap: 32px; }
}