/* ================================================================
   個別営業提案書 量産用雛形 — 専用スタイル
   A010-wp テーマの style.css トークンを踏襲（本体ファイルは変更しない）
   ================================================================ */
:root {
  --bg:        #f8f8f8;
  --bg-2:      #f0f0f0;
  --paper:     #ffffff;
  --ink:       #1a1a1a;
  --ink-2:     #2a2826;
  --g-90:      #2a2826;
  --g-70:      #5a564f;
  --g-50:      #8a847a;
  --g-30:      #c0baa8;
  --g-15:      #d8d3c2;
  --g-08:      #e6e1d4;
  --rule:      #1a1a1a18;
  --rule-2:    #1a1a1a0d;

  --sans-en:   "Oswald", "Helvetica Neue", Arial, sans-serif;
  --sans-jp:   "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", sans-serif;
  --mono:      "JetBrains Mono", ui-monospace, Menlo, monospace;

  --w-stage:   840px;

  /* 連絡先CTA専用のブランドカラー（メール＝iOS Mailアイコン風の青、LINE＝公式グリーン） */
  --mail-blue-light: #63c3ff;
  --mail-blue-dark:  #0a5fff;
  --mail-blue-hover: #0847cc;
  --line-green:       #06c755;
  --line-green-hover: #05a648;
}

*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; padding: 0; font-size: 16px; overflow-x: clip; }
body {
  margin: 0 auto; padding: 0; max-width: 1200px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans-jp);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; margin: 0; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

.en   { font-family: var(--sans-en); font-weight: 500; letter-spacing: 0.02em; }
.mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0.04em; }
.jp   { font-family: var(--sans-jp); }
.upper { text-transform: uppercase; letter-spacing: 0.18em; }

.stage {
  max-width: var(--w-stage);
  margin: 0 auto;
  padding: 0 clamp(1.375rem, 2vw, 3rem);
}
@media (max-width: 720px) {
  .stage { padding: 0 1.375rem; }
}

.section-head { margin-bottom: clamp(1.1rem, 3vw, 1.5rem); }
.section-head__label { color: var(--g-50); font-size: 0.78rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.9em 1.6em;
  font-size: 0.95rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  min-height: 44px;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn--solid { background: var(--ink); color: var(--bg); }
.btn--solid:hover { background: var(--g-70); }
.btn:not(.btn--solid):hover { background: var(--ink); color: var(--bg); }

.chip {
  flex-shrink: 0;
  padding: 0.65em 1.3em;
  font-size: 0.85rem;
  font-family: var(--sans-jp);
  border: 1px solid var(--g-30);
  border-radius: 999px;
  color: var(--g-70);
  background: var(--paper);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  min-height: 44px;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ================================================================
   1. ヘッダー
   ================================================================ */
.doc-header { border-bottom: 1px solid var(--rule); background: var(--paper); }
.doc-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem 1.5rem;
  padding-top: 0.9rem; padding-bottom: 0.9rem;
}
.doc-header__brand { font-size: 0.9rem; letter-spacing: 0.1em; }
.doc-header__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.doc-header__meta-row { display: flex; gap: 1.25rem; font-size: 0.72rem; color: var(--g-50); }
.doc-header__issuer { font-size: 0.74rem; color: var(--ink-2); text-align: right; }

/* スマホでは右寄せのメタ情報が窮屈になるため、左寄せの1カラムにする。 */
@media (max-width: 640px) {
  .doc-header__inner { flex-direction: column; align-items: flex-start; }
  .doc-header__meta { align-items: flex-start; }
  .doc-header__meta-row { flex-wrap: wrap; }
  .doc-header__issuer { text-align: left; }
}

/* ================================================================
   2. 表紙
   ================================================================ */
.cover { padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.375rem, 2vw, 3rem) clamp(2rem, 5vw, 3rem); }
.cover__label { display: block; color: var(--g-50); font-size: 0.78rem; margin-bottom: 0.9rem; }
.cover__industry { font-size: 0.76rem; color: var(--g-50); margin-bottom: 0.6rem; }
.cover__h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.01em;
}
.cover__h1-sep { display: inline-block; margin: 0 0.35em; color: var(--g-30); font-weight: 400; }
.cover__summary {
  color: var(--g-70);
  font-size: clamp(0.9rem, 1.5vw, 0.98rem);
  line-height: 1.9;
  max-width: 34em;
}

/* ================================================================
   3. 今回拝見した点
   ================================================================ */
.observed { padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.375rem, 2vw, 3rem) 0; }
.observed__card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink);
  border-radius: 4px;
  padding: 1.1rem 1.4rem;
}
.observed__text { font-size: 0.92rem; line-height: 1.9; color: var(--ink-2); }

/* observedFact → hypothesis のつなぎ */
.bridge {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: clamp(1.25rem, 3.5vw, 1.75rem) clamp(1.375rem, 2vw, 3rem);
  text-align: center;
}
.bridge__arrow { color: var(--g-30); font-size: 1.15rem; line-height: 1; }
.bridge__text { color: var(--g-70); font-size: 0.86rem; line-height: 1.8; max-width: 32em; }

/* ================================================================
   4. ご提案したい改善
   ================================================================ */
.proposal { padding: 0 clamp(1.375rem, 2vw, 3rem) clamp(0.5rem, 2vw, 1rem); }
.proposal__title {
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  font-weight: 700;
  line-height: 1.6;
  margin: 0.4rem 0 0;
}
.proposal__items {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (min-width: 721px) {
  .proposal__items { grid-template-columns: repeat(3, 1fr); }
}
.proposal-item {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* スマホでは縦積みではなく横スクロールにして、
   3枚見せるための縦の長さを1枚ぶんに抑える。 */
@media (max-width: 720px) {
  .proposal__items {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }
  .proposal__items::-webkit-scrollbar { display: none; }
  .proposal-item {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}
.proposal-item__num { display: block; font-size: 0.72rem; color: var(--g-30); }
.proposal-item__title { font-size: 0.98rem; font-weight: 600; line-height: 1.6; margin: 0; }
.proposal-item__purpose { font-size: 0.82rem; color: var(--g-70); line-height: 1.8; }

/* ================================================================
   5. 改善イメージ（汎用ワイヤーフレーム）
   ================================================================ */
.mockup { padding: clamp(2rem, 5vw, 3rem) clamp(1.375rem, 2vw, 3rem); border-top: 1px solid var(--rule); }
.mockup__note { color: var(--g-50); font-size: 0.8rem; margin-bottom: 1.5rem; }

/* PC／モバイルのイメージ切替（条件分岐ボタン）。
   横スクロールではなく、選んだ方だけを1つ表示する。 */
.mockup__toggle {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.mockup__frames {
  display: flex;
  justify-content: center;
}
.mockup__frame { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.mockup__frame[hidden] { display: none; }
.mockup__frame-label { font-size: 0.68rem; color: var(--g-50); }

.mockup__screen {
  width: 280px;
  height: 180px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mockup__bar { flex: 0 0 8px; width: 32%; background: var(--g-30); border-radius: 2px; }
.mockup__hero { flex: 0 0 36px; background: var(--g-15); border-radius: 4px; }
.mockup__grid { flex: 1; display: flex; gap: 0.4rem; }
.mockup__card { flex: 1; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; }
.mockup__cta { flex: 0 0 14px; width: 42%; margin: 0 auto; background: var(--ink); border-radius: 999px; }

.mockup__screen--sp {
  width: 130px;
  height: 240px;
  border: 2px solid var(--g-30);
  border-radius: 16px;
  padding: 0.6rem 0.5rem;
}
.mockup__screen--sp .mockup__hero { flex: 0 0 56px; }
.mockup__screen--sp .mockup__card { flex: 1; }
.mockup__cta--sticky { width: 82%; margin-top: auto; }

/* ================================================================
   進め方のご案内
   ================================================================ */
.process { padding: clamp(2rem, 5vw, 3rem) clamp(1.375rem, 2vw, 3rem); border-top: 1px solid var(--rule); }
.process__note { color: var(--g-50); font-size: 0.8rem; margin-bottom: 1.75rem; line-height: 1.8; }
.process__timeline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 1.25rem 0.5rem;
}
.process__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 152px;
}
.process__num { font-size: 0.68rem; color: var(--g-30); }
.process__label {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.6em 0.4em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  width: 100%;
  text-align: center;
}
.process__desc {
  font-size: 0.74rem;
  color: var(--g-70);
  line-height: 1.7;
  text-align: center;
}
.process__arrow { color: var(--g-30); font-size: 1rem; flex: 0 0 auto; margin-top: 1.9rem; }

/* スマホでは6ステップを縦に積むと画面がかなり長くなるため、
   横スクロールの帯にして、1〜2ステップぶんの高さに抑える。 */
@media (max-width: 640px) {
  .process__timeline {
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.75rem;
    padding: 0 0.25rem 0.5rem;
  }
  .process__timeline::-webkit-scrollbar { display: none; }
  .process__step {
    flex: 0 0 168px;
    width: auto;
    scroll-snap-align: start;
  }
  .process__arrow {
    flex: 0 0 auto;
    margin-top: 1.9rem;
    transform: none;
  }
}

/* ================================================================
   6. 次の一歩
   ================================================================ */
.next {
  padding: clamp(2.25rem, 6vw, 3.5rem) clamp(1.375rem, 2vw, 3rem) clamp(2.75rem, 7vw, 4rem);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.next__text {
  font-size: 0.92rem;
  color: var(--g-70);
  line-height: 1.9;
  max-width: 30em;
  margin: 0 auto;
}

/* CTAはメール・LINE公式アカウントの2択のみ。他の導線は置かない。 */
.next__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  margin-top: 2rem;
}

.next__email-btn {
  min-width: 260px;
  border-color: transparent;
  background: linear-gradient(180deg, var(--mail-blue-light) 0%, var(--mail-blue-dark) 100%);
  color: #fff;
}
.next__email-btn:hover { background: var(--mail-blue-hover); }

.next__line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.next__line-qr { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.next__qr-box {
  width: 112px; height: 112px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.next__qr-placeholder { color: var(--g-30); font-size: 0.72rem; }
.next__qr-label { font-size: 0.7rem; color: var(--g-50); }

.next__line-btn {
  min-width: 260px;
  border-color: transparent;
  background: var(--line-green);
  color: #fff;
}
.btn.next__line-btn:hover { background: var(--line-green-hover); color: #fff; }

.next__note {
  margin-top: 1.75rem;
  font-size: 0.78rem;
  color: var(--g-50);
}
.next__note .mono { color: var(--ink); }

/* モバイルではQRより大きなLINEボタンを優先する。
   DOM順（QR→ボタン）を反転させ、ボタンを先に・大きく見せる。 */
@media (max-width: 640px) {
  .next__line { flex-direction: column-reverse; gap: 1.25rem; }
  .next__qr-box { width: 72px; height: 72px; }
  .next__email-btn,
  .next__line-btn {
    width: 100%;
    max-width: 320px;
    padding: 1.05em 1.6em;
    font-size: 1rem;
  }
}

/* ================================================================
   署名（送信元＝A010側の情報）
   ================================================================ */
.doc-signature {
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.375rem, 2vw, 3rem) clamp(2.5rem, 6vw, 3.5rem);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.doc-signature p { margin: 0; }
.doc-signature__company { font-size: 0.85rem; font-weight: 600; }
.doc-signature__address,
.doc-signature__name {
  font-size: 0.76rem;
  color: var(--g-50);
  margin-top: 0.3rem;
}
.doc-signature__url {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.76rem;
  color: var(--g-70);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.doc-signature__url:hover { color: var(--ink); }

/* ================================================================
   右側追従のメール／LINEボタン
   ================================================================ */
.float-cta {
  position: fixed;
  right: clamp(0.75rem, 3vw, 1.5rem);
  bottom: clamp(0.75rem, 3vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 30;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.float-cta.is-hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.float-cta__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}
.float-cta__btn:hover { background: var(--g-70); }
.float-cta__icon { font-size: 1.05rem; line-height: 1; }
.float-cta__label { font-size: 0.56rem; letter-spacing: 0.02em; }

.float-cta__btn--email {
  background: linear-gradient(180deg, var(--mail-blue-light) 0%, var(--mail-blue-dark) 100%);
}
.float-cta__btn--email:hover { background: var(--mail-blue-hover); }

.float-cta__btn--line { background: var(--line-green); }
.float-cta__btn--line:hover { background: var(--line-green-hover); }

@media (max-width: 480px) {
  .float-cta__btn { width: 52px; height: 52px; }
  .float-cta__icon { font-size: 0.95rem; }
  .float-cta__label { font-size: 0.52rem; }
}