@charset "UTF-8";
/* ============================================================
   CaseLink LP  css/style.css
   カンプ: 素材/ver6/design/caselink_デザインテイスト.png（1122px幅）
   Step 0 実測にもとづくデザイントークン（ver6手順書 Step 2）
   ============================================================ */

:root {
  /* colors（Step 0 実測値） */
  --color-primary: #EC7B06;        /* CTAボタン */
  --color-primary-strong: #F27716; /* 「20%」等のオレンジ文字 */
  --color-primary-dark: #D96F00;   /* hover */
  --color-secondary: #678E59;      /* 緑ピル・緑矢印 */
  --color-heading: #271B18;
  --color-text: #393837;
  --color-sub: #6F6B66;
  --color-bg: #FDFBF8;             /* ページ背景 */
  --color-bg-section: #FBF9F4;     /* 下部セクションの大きなカード */
  --color-bg-orange: #FDF5EB;      /* オレンジ薄パネル */
  --color-bg-green: #F0F5EA;       /* 緑薄パネル */
  --color-bg-band: #FBF3E2;        /* 報酬バナー */
  --color-line: #E7E1D8;
  --color-line-soft: #EFE7DA;

  /* typography */
  --font-base: "Zen Maru Gothic", "Hiragino Maru Gothic ProN",
               "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;
  --fs-base: 15px;

  /* layout */
  --content-width: 1040px;

  /* spacing scale（8pxグリッド） */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 96px;
}

/* ===== base ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary-dark); }
p { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--color-heading); font-weight: 700; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* 文節単位の折り返し（スマホで語中改行させない） */
.nb { display: inline-block; }

.section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 24px;
  line-height: 1.5;
  text-align: center;
}

/* 装飾（手順書どおりCSS/SVGで実装） */
.deco-leaf { width: 15px; height: 19px; fill: #9EB98A; flex: none; }
.deco-leaf--r { transform: scaleX(-1); }
.deco-slash {
  display: inline-block;
  width: 9px; height: 18px;
  vertical-align: -3px;
  margin: 0 6px;
  fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linecap: round;
}
.deco-slash--r { transform: scaleX(-1); }
.deco-slash--lg { width: 11px; height: 22px; }

/* ===== buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  border-radius: 999px;
  padding: 14px 32px;
  transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
.btn__arrow {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.btn--sm { padding: 8px 20px; font-size: 14px; border-radius: 8px; }
.btn--lg { padding: 11px 20px; font-size: 16.5px; width: 100%; }
.btn--ghost {
  background: #fff;
  color: var(--color-text);
  border: 1px solid #DDD6CC;
  font-weight: 500;
  font-size: 13.5px;
  border-radius: 8px;
  padding: 10px 14px;
  white-space: nowrap;
}
.btn--ghost:hover { background: #FAF7F2; border-color: #C9C1B6; transform: none; }

/* ===== header ===== */
.site-header { padding: 7px 0; }
.site-header__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
}
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.site-header__logo img { width: 193px; height: 38px; }
.site-header__tagline { font-size: 13px; color: var(--color-sub); }
.site-header__cta { margin-left: auto; text-align: center; }
.site-header__cta-note { font-size: 11px; color: var(--color-sub); margin-top: 4px; }

/* ===== hero ===== */
.hero { padding: 8px 0 0; margin-top:30px;}
.hero__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 28px;
  align-items: start;
}
.hero__heading { margin: 0 0 30px; }
.hero__heading img { width: 357px; max-width: 100%; }
.hero__lead { font-size: 15px; line-height: 1.8; margin-bottom: 10px; }

.pain-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
  max-width: 330px;
}
.pain-list__item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  padding: 5px 12px;
}
.pain-list__icon { width: 40px; height: 40px; flex: none; }
.pain-list__text { font-size: 13px; line-height: 1.65; }

.hero__catch {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: var(--space-xs);
  white-space: nowrap;
}
.hero__catch .deco-slash { margin: 0 3px; }
.hero__note { font-size: 13.5px; line-height: 1.85; }

/* 3者フロー */
.flow__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-heading);
  text-align: center;
}
.flow__wave {
  display: block;
  width: 500px;
  max-width: 100%;
  height: auto;  /* レターボックス防止 */
  margin: -2px auto 12px;
  fill: none; stroke-linecap: round;
}
.flow__wave .band { stroke: #F9E7C1; stroke-width: 10; }
.flow__wave .line { stroke: #CE9750; stroke-width: 2.6; }
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: end; }  /* 円の下端で揃える（左の画像だけ縦長のため） */
.flow__step { text-align: center; }
.flow__img { margin: 0 auto 6px; }  /* サイズはHTML属性で指定（2x素材のため） */
.flow__pill {
  display: inline-block;
  position: relative;
  margin-top: -16px;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  margin-bottom: 6px;
}
.flow__pill--green  { background: #DCE9D3; color: #3E5B32; }
.flow__pill--yellow { background: #FBE3B8; color: #8A5D14; }
.flow__pill--orange { background: #F8DCCB; color: #B45A20; }
.flow__desc { font-size: 12.5px; line-height: 1.7; }
.flow__step { min-width: 0; }
.flow__arrow { display: flex; align-items: center; align-self: end; padding: 0 2px; margin-bottom: 146px; }  /* 円の中心高さに合わせる */
.flow__arrow svg {
  width: 24px; height: 24px;
  fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.flow__arrow--green svg { stroke: var(--color-secondary); }
.flow__arrow--orange svg { stroke: var(--color-primary); }
.flow__return {
  margin-top: 4px;
  text-align: center;
}
.flow__return-arrow {
  display: block;
  width: 100%;
  height: auto;  /* viewBox比で自動。固定するとレターボックスで中身が縮む */
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.flow__return-arrow .curve { stroke-dasharray: 5 6; }
.flow__return-text {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* hero bottom: CTA + 報酬条件 */
.hero-bottom {
  max-width: var(--content-width);
  margin: 20px auto 0;
  padding: 0 20px 0px;
}
.hero-bottom__cta { margin-top: 50px; text-align: center; }
.hero-bottom__cta .btn--lg { width: auto; min-width: 340px; }
.hero-bottom__note { font-size: 12px; color: var(--color-sub); text-align: center; margin-top: 6px; }
.hero-bottom__note--ext { font-size: 11.5px; margin-top: 3px; }

.reward-panel {
  background: var(--color-bg-orange);
  border: 1px solid #F2E0C8;
  border-radius: 14px;
  padding: 16px 34px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 28px;
  align-items: center;
  margin-top: 30px;
}
.reward-panel__main { display: flex; align-items: center; gap: 14px; }
.reward-panel__gift { width: 58px; flex: none; }
.reward-panel__cap { font-size: 13px; font-weight: 500; color: var(--color-sub); }
.reward-panel__amt {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.4;
}
.reward-panel__amt em {
  font-style: normal;
  font-size: 38px;
  color: var(--color-primary-strong);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 2px;
  vertical-align: -3px;
}
.reward-panel__amt em span { font-size: 24px; }
.reward-panel__checks {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 7px;
  justify-self: start;
  margin-left: 30px;
}
.reward-panel__checks li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  line-height: 1.6;
  white-space: nowrap;
}
.reward-panel__checks svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: var(--color-secondary); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ===== explain（下部の大きなクリームのカード） ===== */
.explain {
  max-width: var(--content-width);
  margin: var(--space-sm) auto var(--space-md);
  padding: 22px 20px 36px;
}
.explain > .worry { margin-top: 20px; }

/* ===== worry ===== */
.worry__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 18px;
}
.worry__item { display: flex; align-items: center; gap: 6px; justify-content: center; }
.worry__img { flex: none; }
.worry__bubble {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--color-line);
  border-radius: 22px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
  max-width: 225px;
}
.worry__bubble::before,
.worry__bubble::after {
  content: "";
  position: absolute;
  left: -19px; top: 50%; margin-top: -9px;
  border: 9px solid transparent;
}
.worry__bubble::before { border-right-color: var(--color-line); }
.worry__bubble::after  { left: -16px; border-right-color: #fff; }

/* ===== tasks ===== */
.explain > .tasks { margin-top: 52px; }
.tasks__num {
  font-style: normal;
  color: var(--color-primary-strong);
  font-weight: 700;
}
.tasks__num-digit {
  font-size: 34px;
  line-height: 1;
}
.tasks__panels {
  display: grid;
  grid-template-columns: 39fr auto 61fr;
  align-items: stretch;
  margin-top: 42px;
}
.task-panel { border-radius: 12px; padding: 24px 14px 14px; position: relative; }
.task-panel--you { background: var(--color-bg-green); border: 1px solid #D8E5CC; }
.task-panel--cl  { background: var(--color-bg-orange); border: 1px solid #F2E0C8; }
.task-panel__pill {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  padding: 5px 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.task-panel--you .task-panel__pill { background: var(--color-secondary); }
.task-panel--cl  .task-panel__pill { background: var(--color-primary); }
.task-panel__body--you {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.task-panel__body--cl {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 6px;
}
.you-step { text-align: center; position: relative; }
.you-step__no {
  position: absolute;
  left: 2px; top: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}
.you-step__img { margin: 0 auto 8px; }
.you-step__title { font-size: 16px; margin-bottom: 3px; }
.you-step__desc { font-size: 13px; line-height: 1.7; }
.you-step__arrow svg,
.cl-step__arrow svg {
  width: 28px; height: 12px;
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.you-step__arrow svg { stroke: var(--color-secondary); stroke-dasharray: 3 4; }
.cl-step__arrow { align-self: center; }
.cl-step__arrow svg { stroke: #A9834C; }
.tasks__handoff {
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.tasks__handoff svg { width: 40px; height: 40px; fill: var(--color-secondary); }
.cl-step { text-align: center; }
.cl-step__title { font-size: 14px; margin-bottom: 6px; }
.cl-step__img { margin: 0 auto 6px; }  /* 原寸表示（64px統一キャンバス・拡大ボケ防止） */
.cl-step__desc { font-size: 12px; line-height: 1.7; }

/* ===== reward band ===== */
.reward-band {
  margin-top: 32px;
  background: var(--color-bg-band);
  border: 1.5px dashed #F2D9B6;
  border-radius: 999px;
  padding: 12px 36px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.reward-band__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-heading);
}
.reward-band__sub { font-size: 13px; font-weight: 700; line-height: 1.6; }
.reward-band__pct { font-size: 15px; font-weight: 700; color: var(--color-heading); }
.reward-band__pct em {
  font-style: normal;
  font-size: 44px;
  color: var(--color-primary-strong);
  line-height: 1;
  letter-spacing: -0.02em;
}
.reward-band__pct em span { font-size: 24px; }
.reward-band__cond {
  font-size: 12px;
  color: var(--color-sub);
  text-align: center;
  margin-top: 10px;
}

/* ===== about（CaseLinkについて） ===== */
.explain > .about { margin-top: 72px; }
.about .about-card { margin-top: 20px; }
.about-card {
  background: #fff;
  border: 1.5px solid #ADCEB6;
  border-radius: 14px;
  padding: 22px 28px;
  display: grid;
  grid-template-columns: 58fr 42fr;
  gap: 24px;
  align-items: center;
}
.about-card__left {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 20px;
  border-right: 1px solid #D5D7D8;
}
.about-card__img { flex: none; }
.about-card__text { font-size: 14px; line-height: 1.9; }
.about-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #ADCEB6;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: #3E5B32;
  text-decoration: none;
}
.about-card__link:hover { background: #F3F7EF; }
.about-card__link svg {
  width: 14px; height: 14px;
  fill: none; stroke: #678E59; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.about-card__lead {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 12px;
}
.about-card__checks {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.about-card__checks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 500;
}
.about-card__check {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.about-card__check circle { stroke: #A6C9A6; stroke-width: 1.4; }
.about-card__check .ring2 { stroke: #C8DEC8; stroke-width: 1; }
.about-card__check .mark { stroke: #5FA05F; stroke-width: 2.6; }
.about-card__note { font-size: 13px; color: var(--color-sub); }

/* ===== trust ===== */
.explain > .trust { margin-top: 72px; }
.trust__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 30px;
}
.trust__item { display: flex; gap: 12px; align-items: flex-start; }
.trust__img { width: 76px; flex: none; }
.trust__title { font-size: 16px; margin-bottom: 6px; }
.trust__desc { font-size: 12.5px; line-height: 1.75; color: var(--color-text); }

/* ===== faq ===== */
.explain > .faq { margin-top: 72px; }
.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
  margin-top: 18px;
}
.faq__item { padding: 7px 2px; }
.faq__q {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q span { flex: none; }
.faq__leader { flex: 1; border-bottom: 1.5px dotted #C9C2B8; margin-bottom: 4px; }
.faq__q::after {
  content: "＋";
  flex: none;
  color: #9A938B;
  font-size: 16px;
}
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--color-sub);
  margin-top: 10px;
}

/* ===== final cta（カンプ外） ===== */
.final-cta {
  max-width: calc(var(--content-width) + 40px);
  margin: 0 auto var(--space-md);
  background: var(--color-bg-green);
  border: 1px solid #D8E5CC;
  border-radius: 16px;
  padding: 26px 36px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
.final-cta__copy {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.7;
}
.final-cta__copy em { font-style: normal; color: var(--color-primary-dark); }
.final-cta__note { font-size: 12px; color: var(--color-sub); text-align: center; margin-top: 6px; }
.final-cta__note--ext { font-size: 11.5px; margin-top: 3px; }

/* ===== footer ===== */
.site-footer { border-top: 1px solid var(--color-line-soft); padding: var(--space-sm) 0 var(--space-md); }
.site-footer__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 20px;
  font-size: 13px;
  color: var(--color-sub);
}
.site-footer__nav a { color: var(--color-sub); margin-right: 18px; display: inline-block; }
.site-footer__copy { margin-top: 8px; }

/* ===== sticky cta（SPのみ） ===== */
.sticky-cta { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* ============================================================
   レスポンシブ（768px・手順書 Step 5）
   ============================================================ */
@media (max-width: 768px) {
  body { padding-bottom: 76px; } /* sticky-cta分 */

  .site-header__cta { display: none; }
  .site-header__logo img { width: 150px; height: auto; }

  .hero__inner { grid-template-columns: 1fr; gap: var(--space-md); padding: 0 20px; }
  .hero__catch {
    white-space: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .hero__catch-text { text-align: center; }
  .hero__catch .deco-slash { flex: none; }
  .flow__img { max-width: 100%; }
  .flow__return-arrow { display: none; }
  .flow__return-text { padding-top: 10px; border-top: 2px dashed var(--color-primary); }
  .reward-panel__amt { white-space: normal; }
  .reward-panel__checks { flex-direction: column; align-items: stretch; gap: 8px; margin-left: 0; }
  .reward-panel__checks li { white-space: normal; padding: 0; border-left: 0; }
  .hero__heading img { width: min(100%, 380px); }
  .section-heading { font-size: 19px; }

  /* 3者フロー: 縦積み・矢印は下向き */
  .flow { grid-template-columns: 1fr; }
  .flow__arrow { justify-content: center; padding: 10px 0; margin-bottom: 0; align-self: center; }
  .flow__arrow svg { transform: rotate(90deg); }

  .hero-bottom__cta .btn--lg { width: 100%; min-width: 0; }
  .btn--lg { width: 100%; }
  .reward-panel { grid-template-columns: 1fr; gap: var(--space-sm); padding: 18px; }
  .reward-panel__checks li { white-space: normal; }

  .explain { margin: 0 0 var(--space-md); padding: var(--space-md) 20px; }

  .worry__list { grid-template-columns: 1fr; }
  .worry__item { justify-content: flex-start; }

  .tasks__panels { grid-template-columns: 1fr; }
  .tasks__handoff { justify-content: center; padding: 10px 0; }
  .tasks__handoff svg { transform: rotate(90deg); }
  .task-panel__body--you { grid-template-columns: 1fr; }
  .you-step__arrow { text-align: center; }
  .you-step__arrow svg { transform: rotate(90deg); }
  .task-panel__body--cl { grid-template-columns: 1fr 1fr; }
  .cl-step__arrow { display: none; }

  .reward-band { flex-direction: column; border-radius: 16px; gap: 8px; text-align: center; padding: 20px; }
  .reward-band__sub br { display: none; }  /* スマホでは「開発費用の税抜入金額の」を1行に */

  .about-card { grid-template-columns: 1fr; gap: 18px; padding: 20px 16px; }
  .about-card__left {
    flex-direction: column;
    text-align: center;
    padding-right: 0;
    border-right: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid #D5D7D8;
  }
  .about-card__link { margin-top: 14px; }

  .trust__list { grid-template-columns: 1fr; }
  .faq__grid { grid-template-columns: 1fr; }

  .final-cta { grid-template-columns: 1fr; text-align: center; margin: 0 12px var(--space-md); padding: 24px 20px; }
  .final-cta__img { margin: 0 auto; }

  .sticky-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--color-line);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .sticky-cta .btn { display: flex; width: 100%; }
}