/* myshop NOW — トップページ（LP）のスタイル。
 *
 * デザインの骨格は common の ob/design-md（Stripe 分析）を参考にした構造:
 *   白キャンバス × 濃紺インク × 単一アクセントの CTA ピル × ヒーロー上部のグラデーションメッシュ。
 * 配色・文言は myshop NOW 独自（ブランド色コード・フォント・コピーは流用しない）。
 */

:root {
  /* 面 */
  --canvas: #ffffff;
  --canvas-soft: #f5f9fc;
  --hairline: #e3e9f0;
  --hairline-input: #a9c0d8;
  /* 文字（濃紺インク。真っ黒は使わない） */
  --ink: #0f2540;
  --ink-2: #33475f;
  --mute: #5f7189;
  /* アクセント（CTA・リンク。白文字とのコントラスト 4.5:1 以上を確保） */
  --accent: #0369a1;
  --accent-press: #075985;
  --accent-soft: #e0f2fe;
  --accent-ink: #0c4a6e;
  /* 影（青みの控えめな影） */
  --shadow-1: 0 1px 3px rgba(3, 42, 82, 0.10);
  --shadow-2: 0 8px 24px rgba(3, 42, 82, 0.10), 0 2px 6px rgba(3, 42, 82, 0.05);
  /* 角丸 */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 9999px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-ink); }

/* スクリーンリーダー専用（視覚的に隠す） */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* スキップリンク: 通常は隠し、フォーカス時だけ表示 */
.skip-link {
  position: absolute;
  left: 8px; top: -48px;
  padding: 8px 14px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: top .15s ease;
  z-index: 100;
}
.skip-link:focus { top: 8px; }

/* フォーカスの可視化 */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---- レイアウト ---- */

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}
.container--narrow { max-width: 760px; }

.section {
  padding: 72px 0;
  /* アンカージャンプ時に sticky ヘッダーで見出しが欠けないようにする */
  scroll-margin-top: 72px;
}
.section--soft { background: var(--canvas-soft); }

.section__title {
  margin: 0 0 16px;
  font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.section__lead {
  margin: 0 0 16px;
  font-size: clamp(1rem, 2.6vw, 1.15rem);
  color: var(--ink-2);
}
.section__body { margin: 16px 0 0; color: var(--ink-2); }
.section__body--center { text-align: center; }

/* ---- ヘッダー ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
}

.brand {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.brand__now { color: var(--accent); }
.brand__link { color: inherit; text-decoration: none; }

/* ---- 下層ページ（法務・お問い合わせ） ---- */
.legal h2 {
  margin: 32px 0 8px;
  font-size: 1.15rem;
  font-weight: 700;
}
.legal p, .legal li { color: var(--ink-2); }
.legal ul { padding-left: 1.4em; }
.legal__updated { margin-top: 32px; font-size: .85rem; color: var(--mute); }
.legal__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
  font-size: .95rem;
}
.legal__table th, .legal__table td {
  border: 1px solid var(--hairline);
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}
.legal__table th {
  background: var(--canvas-soft);
  white-space: nowrap;
  font-weight: 600;
  width: 11em;
}
.legal__table td { color: var(--ink-2); }
.legal__small { font-size: .82rem; color: var(--mute); }
@media (max-width: 600px) {
  .legal__table th, .legal__table td { display: block; width: auto; border-top: 0; }
  .legal__table tr:first-child th { border-top: 1px solid var(--hairline); }
  .legal__table th { white-space: normal; }
}

/* ---- ボタン（ピル・1バンドに塗りは1つ） ---- */

.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover, .btn--primary:focus-visible { background: var(--accent-press); }
.btn--ghost {
  background: transparent;
  color: var(--accent-ink);
  border-color: var(--hairline-input);
}
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--accent); color: var(--accent-press); }
.btn--sm { padding: 8px 16px; font-size: .9rem; }
.btn--lg { padding: 14px 32px; font-size: 1.05rem; }
/* 送信中（二重送信防止）。disabled はフォーカスを失わせるため aria-disabled で表す */
.btn[aria-disabled="true"] { opacity: .65; cursor: progress; }

/* ---- ヒーロー ---- */

.hero {
  position: relative;
  overflow: hidden;
  /* グラデーションメッシュ: 淡い空色・薄紫・桃・薄黄の有機的な重なり */
  background:
    radial-gradient(42% 55% at 12% 18%, rgba(186, 230, 253, 0.9), transparent 70%),
    radial-gradient(38% 52% at 78% 12%, rgba(199, 210, 254, 0.75), transparent 70%),
    radial-gradient(30% 42% at 92% 55%, rgba(251, 207, 232, 0.6), transparent 70%),
    radial-gradient(36% 50% at 38% 78%, rgba(253, 230, 138, 0.4), transparent 72%),
    linear-gradient(180deg, #f2f8fd 0%, #ffffff 92%);
}
.hero__inner {
  padding-top: 72px;
  padding-bottom: 64px;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 20px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--hairline);
  color: var(--accent-ink);
  font-size: .85rem;
  font-weight: 600;
}

.hero__title {
  margin: 0 0 20px;
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.hero__lead {
  margin: 0 auto 28px;
  max-width: 640px;
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  color: var(--ink-2);
}

/* ファーストビューの価格明示（無料サンプル→本番20万円） */
.hero__price {
  display: inline-block;
  margin: 0 auto 28px;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--hairline-input);
  color: var(--accent-ink);
  font-size: clamp(.92rem, 2.6vw, 1.05rem);
  font-weight: 600;
}
.hero__price strong {
  font-size: 1.25em;
  font-feature-settings: "tnum";
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 36px;
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero__stats li {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--ink-2);
}
.hero__stats strong {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}
.hero__stats .num { font-feature-settings: "tnum"; }

.hero__fineprint {
  margin: 12px 0 0;
  font-size: .78rem;
  color: var(--mute);
}

/* ---- チップ（とは） ---- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.chips li {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: .95rem;
}

/* ---- お悩みリスト ---- */

.pain-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  max-width: 640px;
}
.pain-list li {
  padding: 14px 18px 14px 44px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  position: relative;
}
.pain-list li::before {
  content: "";
  position: absolute;
  left: 16px; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--accent-soft);
  border: 3px solid var(--accent);
}

/* ---- 特徴カード ---- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-1);
}
.card__title {
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.card p { margin: 0; color: var(--ink-2); font-size: .95rem; }

/* ---- 制作例 ---- */

.works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.work {
  margin: 0;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.work img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid var(--hairline);
}
/* 横長画像（OGカード等）は切り抜かず横全体を見せる */
.work img.work__img--contain {
  object-fit: contain;
  background: #10151f;
}
.work figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
}
.work figcaption strong { font-size: 1rem; }
.work figcaption span { font-size: .82rem; color: var(--mute); }

/* ---- 制作の流れ ---- */

.flow {
  counter-reset: step;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.flow li {
  counter-increment: step;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 20px 14px 16px;
  text-align: center;
  position: relative;
}
.flow li::before {
  content: counter(step);
  display: block;
  width: 34px; height: 34px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  line-height: 34px;
  font-feature-settings: "tnum";
}
.flow li strong { font-size: .95rem; font-weight: 600; }
.flow__sub {
  display: block;
  margin-top: 4px;
  font-size: .78rem;
  color: var(--accent-ink);
  font-weight: 600;
}

/* ---- 料金 ---- */

.price-tax {
  font-size: .65em;
  font-weight: 600;
  color: var(--mute);
  margin-left: 6px;
}
.price-note-launch { font-size: .85rem; color: var(--mute); }

.price-group__title {
  margin: 48px 0 8px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.price-group__lead { margin: 0 0 8px; color: var(--ink-2); }

.plans {
  display: grid;
  gap: 20px;
  margin-top: 20px;
  align-items: stretch;
}
.plans--build { grid-template-columns: repeat(2, 1fr); }
.plans--support { grid-template-columns: repeat(3, 1fr); }

.plan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 28px;
}
.plan__badge {
  margin: 0;
  align-self: flex-start;
  padding: 4px 14px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: .8rem;
  font-weight: 700;
}
.plan__name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.plan__audience {
  margin: 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--accent-ink);
}
.plan__price {
  margin: 4px 0 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-feature-settings: "tnum";
}
.plan__price-num {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.plan__price--big .plan__price-num { font-size: 2.9rem; }
.plan__price-unit { font-size: 1rem; font-weight: 600; }
.plan__price-tax {
  font-size: .75rem;
  color: var(--mute);
  margin-left: 4px;
}
.plan__features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: .92rem;
  color: var(--ink-2);
}
.plan__features li {
  padding-left: 22px;
  position: relative;
}
.plan__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.plan__foot {
  margin: 0;
  font-size: .85rem;
  color: var(--ink-2);
}
.plan__notes {
  margin: 0;
  padding: 0 0 0 1.2em;
  font-size: .78rem;
  color: var(--mute);
  display: grid;
  gap: 2px;
}
.plan__cta { margin-top: auto; }

/* おすすめ（パートナープラン）: 濃紺の反転カード */
.plan--featured {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-2);
}
.plan--featured .plan__badge { background: #fff; color: var(--ink); }
.plan--featured .plan__audience { color: #bae6fd; }
.plan--featured .plan__features,
.plan--featured .plan__foot { color: #dbe7f3; }
.plan--featured .plan__features li::before { color: #7dd3fc; }
.plan--featured .plan__notes { color: #9fb4ca; }
.plan--featured .plan__price-tax { color: #9fb4ca; }
.btn--on-dark {
  background: #fff;
  color: var(--ink);
}
.btn--on-dark:hover, .btn--on-dark:focus-visible { background: var(--accent-soft); color: var(--accent-ink); }

.price-domain-note {
  margin: 16px 0 0;
  padding: 16px 18px;
  background: var(--accent-soft);
  border-radius: var(--r-md);
  color: var(--accent-ink);
  font-size: .92rem;
}
.price-domain-note__lead { margin: 0 0 10px; }
.free-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.free-list li {
  background: var(--canvas);
  border: 1px solid var(--hairline-input);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: .88rem;
  color: var(--ink-2);
}
.free-list strong { color: var(--accent-press); }
.free-now {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}
.free-list__note {
  margin: 10px 0 0;
  font-size: .8rem;
  color: var(--accent-ink);
}

.price-faq { margin-top: 48px; }

/* ---- FAQ ---- */

.faq {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--canvas);
  margin-top: 12px;
  padding: 0;
}
.faq summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 600;
  border-radius: var(--r-md);
}
.faq summary:hover { color: var(--accent-press); }
.faq[open] summary { border-bottom: 1px solid var(--hairline); }
.faq p { margin: 0; padding: 14px 20px 18px; color: var(--ink-2); }

/* ---- 最後に ---- */

.section--closing { text-align: center; }
.closing__copy {
  margin: 0;
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  line-height: 2;
}

/* ---- ウェイティングリスト ---- */

.section--waitlist {
  background:
    radial-gradient(48% 42% at 88% 8%, rgba(186, 230, 253, 0.5), transparent 70%),
    radial-gradient(40% 38% at 8% 92%, rgba(199, 210, 254, 0.35), transparent 70%),
    var(--canvas-soft);
}

/* 「電話番号不要・営業電話なし」の安心表示（フォーム直前） */
.no-phone-note {
  margin: 20px 0 0;
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid var(--hairline-input);
  color: var(--accent-ink);
  font-size: .92rem;
  font-weight: 600;
}

.wform {
  margin-top: 32px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: clamp(20px, 4vw, 40px);
  display: grid;
  gap: 28px;
}

.wform__group { display: grid; gap: 8px; }
.wform__fieldset { border: 0; margin: 0; padding: 0; }
.wform__fieldset legend { padding: 0; margin-bottom: 8px; }

.wform__label {
  font-weight: 700;
  font-size: 1rem;
}
.wform__label--big { font-size: 1.15rem; }

.req, .opt {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 600;
  vertical-align: middle;
}
.req { background: var(--accent); color: #fff; }
.opt { background: var(--canvas-soft); color: var(--mute); border: 1px solid var(--hairline); }

.wform__hint {
  margin: 0;
  font-size: .85rem;
  color: var(--mute);
}

.wform__input {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem; /* iOS の自動ズームを避けるため 16px 未満にしない */
  font-family: inherit;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline-input);
  border-radius: var(--r-sm);
}
.wform__input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}

.wform__textarea { resize: vertical; min-height: 90px; }

/* select: OS ダークテーマでも白地に濃色文字を明示（option の視認性対策） */
.wform__select,
.wform__select option {
  background: var(--canvas);
  color: var(--ink);
}

/* 「どんなことで困っていますか？」は一番大きな主役の入力欄 */
.wform__group--main {
  background: var(--accent-soft);
  border: 1px solid var(--hairline-input);
  border-radius: var(--r-lg);
  padding: 20px;
}
/* 淡い水色地の上ではヒント文の色を濃くしてコントラスト 4.5:1 以上を保つ */
.wform__group--main .wform__hint { color: var(--ink-2); }
.wform__textarea--big { min-height: 200px; }

.wform__urls { display: grid; gap: 6px; }
.wform__urls .wform__input { margin-bottom: 8px; }
.wform__sublabel { font-size: .9rem; font-weight: 600; color: var(--ink-2); }

.wform__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--hairline-input);
  border-radius: var(--r-pill);
  cursor: pointer;
  background: var(--canvas);
  font-size: .95rem;
}
.choice:hover { border-color: var(--accent); }
.choice input { accent-color: var(--accent); margin: 0; }
.choice:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.choice:has(input:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.choice--checkbox { border-radius: var(--r-md); }

.wform__submit { text-align: center; display: grid; gap: 12px; justify-items: center; }
.wform__submit .btn { min-width: 280px; }
.wform__note {
  margin: 0;
  min-height: 1.5em;
  font-weight: 600;
  color: var(--accent-ink);
}
.wform__privacy {
  margin: 0;
  font-size: .78rem;
  color: var(--mute);
}

/* ---- フッター ---- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 40px 0 48px;
  text-align: center;
}
.brand--footer { font-size: 1rem; margin-bottom: 6px; }
.site-footer__copy {
  margin: 0;
  font-size: .82rem;
  color: var(--mute);
}
.site-footer__by {
  margin: 6px 0 0;
  font-size: .82rem;
  color: var(--mute);
}
.site-footer__by a { color: var(--accent-ink); }
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 0 0 10px;
  font-size: .85rem;
}
.site-footer__links a { color: var(--ink-2); }

/* ---- レスポンシブ ---- */

@media (max-width: 900px) {
  .cards, .works { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .plans--support { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .section { padding: 52px 0; }
  .hero__inner { padding-top: 48px; padding-bottom: 48px; }
  .cards, .works { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr 1fr; }
  .hero__ctas .btn { width: 100%; white-space: normal; }
  .wform__submit .btn { width: 100%; min-width: 0; white-space: normal; }
  /* ヘッダーはブランド名とCTAを1行に収める */
  .site-header .btn--sm { padding: 8px 12px; font-size: .8rem; }
  .brand { font-size: 1.05rem; }
  .plans--build { grid-template-columns: 1fr; }
  .plan__cta { white-space: normal; }
}