/* service-new.css — ページ固有スタイル（共通は common.css） */

    .container { width: min(1000px, 100% - 4rem); margin-inline: auto; }

    .section-label-en { font-family: var(--font-en); font-size: .7rem; font-weight: 600; letter-spacing: .2em; color: var(--g500); margin-block-end: 1.5rem; display: flex; align-items: center; gap: 1rem; }
    .section-label-en::before { content: ''; display: block; width: 32px; height: 1px; background: currentColor; }
    .section-label-en--white { color: var(--g300); }

    .section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--black); line-height: 1.35; letter-spacing: -.02em; }
    .section-title--white { color: var(--white); }

    section { padding-block: 100px; }

    /* ============================
       共感セクション
    ============================ */
    #pain { background: var(--off-white); }

    .pain-head { margin-block-end: 3.5rem; }
    .pain-desc { font-size: .92rem; color: var(--g500); line-height: 1.95; font-weight: 400; margin-block-start: 1rem; max-width: 560px; }

    .pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--g100); border: 1px solid var(--g100); }

    .pain-item {
      background: var(--white);
      padding: 1.75rem 1.5rem;
      display: flex;
      flex-direction: column;
      gap: .75rem;
    }

    .pain-icon {
      width: 32px; height: 32px;
      background: var(--black);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .pain-icon svg { color: var(--white); }

    .pain-item p { font-size: .85rem; color: var(--g700); line-height: 1.75; font-weight: 400; }
    .pain-item p strong { color: var(--black); font-weight: 600; display: block; margin-block-end: .3rem; font-size: .88rem; }

    /* ============================
       作り直す前に（Before Renewal）
    ============================ */
    #before { background: var(--black); }

    .before-single { max-width: 640px; }
    .before-single .section-label-en { color: var(--g300); }
    .before-single .section-title { color: var(--white); margin-block-end: 2rem; }

    .before-lead {
      font-size: .9rem;
      color: rgba(255,255,255,.8);
      line-height: 2;
      font-weight: 400;
    }
    .before-lead strong { color: var(--white); font-weight: 600; }

    .before-checks {
      display: flex;
      flex-direction: column;
      margin-block-start: 1.5rem;
    }

    .check-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding-block: 1rem;
      border-block-end: 1px solid rgba(255,255,255,.06);
      font-size: .85rem;
      color: var(--g300);
      font-weight: 400;
    }
    .check-item:first-child { border-block-start: 1px solid rgba(255,255,255,.06); }
    .check-item::before {
      content: '';
      display: block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--g500);
      flex-shrink: 0;
    }

    /* ============================
       差別化セクション
    ============================ */
    #strength { background: var(--white); }

    .strength-head { margin-block-end: 5rem; }
    .strength-lead { font-size: 1.05rem; color: var(--g700); line-height: 1.95; font-weight: 400; margin-block-start: 1.5rem; max-width: 600px; }
    .strength-lead strong { color: var(--black); font-weight: 600; }

    .strength-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--g100); border: 1px solid var(--g100); margin-block-start: 3.5rem; }

    .strength-item {
      background: var(--white);
      padding: 2.5rem 2rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .strength-item:hover { background: var(--off-white); transition: background var(--tr); }

    .strength-item-num {
      font-family: var(--font-en);
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: .15em;
      color: var(--g300);
    }

    .strength-item h3 { font-size: 1rem; font-weight: 700; color: var(--black); line-height: 1.4; }
    .strength-item p  { font-size: .85rem; color: var(--g500); line-height: 1.85; font-weight: 400; }
    .strength-item p strong { color: var(--black); font-weight: 600; }

    /* ============================
       制作プロセス
    ============================ */
    #process { background: var(--black); }

    .process-head { margin-block-end: 1.5rem; }
    .process-note { font-size: .88rem; color: rgba(255,255,255,.8); line-height: 1.9; font-weight: 400; margin-block-start: 1rem; margin-block-end: 4rem; }

    /* プランタブ */
    .plan-tabs { display: flex; gap: 0; margin-block-end: 3rem; border: 1px solid rgba(255,255,255,.1); width: fit-content; }
    .plan-tab { padding: .65rem 1.75rem; font-size: .8rem; font-weight: 500; color: var(--g500); cursor: pointer; border: none; background: transparent; font-family: var(--font-jp); letter-spacing: .04em; transition: background var(--tr), color var(--tr); }
    .plan-tab.active { background: var(--white); color: var(--black); }

    .plan-content { display: none; }
    .plan-content.active { display: block; }

    .process-steps { display: flex; flex-direction: column; }

    .process-step {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 2.5rem;
      padding-block: 2rem;
      border-block-end: 1px solid rgba(255,255,255,.06);
      align-items: start;
    }
    .process-step:first-child { border-block-start: 1px solid rgba(255,255,255,.06); }

    .step-meta {}
    .step-num { font-family: var(--font-en); font-size: .68rem; font-weight: 600; letter-spacing: .15em; color: rgba(255,255,255,.2); margin-block-end: .5rem; }
    .step-duration { font-size: .72rem; color: rgba(255,255,255,.5); letter-spacing: .04em; display: flex; align-items: center; gap: .4rem; }
    .step-duration::before { content: ''; display: block; width: 16px; height: 1px; background: rgba(255,255,255,.4); }

    .step-body h3 { font-size: .95rem; font-weight: 600; color: var(--white); margin-block-end: .6rem; }
    .step-body p  { font-size: .82rem; color: rgba(255,255,255,.8); line-height: 1.85; font-weight: 400; }
    .step-body p strong { color: var(--g300); font-weight: 500; }

    .process-timeline {
      margin-block-start: 2.5rem;
      padding: 1.5rem 2rem;
      border: 1px solid rgba(255,255,255,.08);
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }
    .process-timeline-label { font-size: .72rem; font-family: var(--font-en); letter-spacing: .12em; color: rgba(255,255,255,.5); }
    .process-timeline-value { font-size: 1.1rem; font-weight: 600; color: var(--white); }
    .process-timeline-note  { font-size: .75rem; color: rgba(255,255,255,.5); font-weight: 400; }

    /* ============================
       FAQ
    ============================ */
    #faq { background: var(--off-white); }

    .faq-head { margin-block-end: 3.5rem; }

    .faq-list { display: flex; flex-direction: column; }

    .faq-item { border-block-end: 1px solid var(--g100); }
    .faq-item:first-child { border-block-start: 1px solid var(--g100); }

    .faq-q {
      display: flex;
      align-items: flex-start;
      gap: 1.25rem;
      padding-block: 1.5rem;
      cursor: pointer;
      list-style: none;
    }
    .faq-q::-webkit-details-marker { display: none; }

    .faq-q-mark { font-family: var(--font-en); font-size: .78rem; font-weight: 700; color: var(--black); flex-shrink: 0; padding-block-start: .1rem; width: 20px; }
    .faq-q-text { font-size: .92rem; font-weight: 600; color: var(--black); flex: 1; }
    .faq-q-icon { font-size: .75rem; color: var(--g300); flex-shrink: 0; padding-block-start: .3rem; transition: transform var(--tr); }
    details[open] .faq-q-icon { transform: rotate(45deg); }

    .faq-a {
      padding-block-end: 1.5rem;
      padding-inline-start: calc(20px + 1.25rem);
      font-size: .88rem;
      color: var(--g700);
      line-height: 1.95;
      font-weight: 400;
    }
    .faq-a strong { color: var(--black); font-weight: 600; }

    /* ============================
       CTA
    ============================ */
    #cta { background: var(--black); padding-block: 120px; }

    .cta-center { text-align: center; }
    .cta-title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; color: var(--white); line-height: 1.3; letter-spacing: -.02em; margin-block-end: 1.25rem; }
    .cta-desc  { font-size: .9rem; color: rgba(255,255,255,.8); line-height: 1.95; font-weight: 400; margin-block-end: 3rem; }

    .btn-cta { display: inline-flex; align-items: center; gap: .75rem; background: var(--white); color: var(--black); padding: 1.1rem 2.75rem; font-size: .9rem; font-weight: 600; letter-spacing: .04em; transition: background var(--tr), transform var(--tr); }
    .btn-cta:hover { background: var(--off-white); transform: translateY(-1px); }
    .btn-cta svg { transition: transform var(--tr); }
    .btn-cta:hover svg { transform: translateX(4px); }

    /* ============================
       レスポンシブ
    ============================ */
    @media (max-width: 768px) {
      .pain-grid { grid-template-columns: 1fr; }
      .before-inner { grid-template-columns: 1fr; gap: 3rem; }
      .strength-grid { grid-template-columns: 1fr; }
      .process-step { grid-template-columns: 1fr; gap: 1rem; }
      section { padding-block: 72px; }
      .plan-tabs { width: 100%; }
      .plan-tab { flex: 1; text-align: center; padding: .65rem 1rem; }
    }
    @media (max-width: 480px) {
      .plan-tabs { flex-direction: column; }
      .plan-tab { text-align: left; }
    }