/* 紹介ページ共通の見た目。アプリ本体（styles.css）のローズ配色に合わせてある。
   アプリは Vite が束ねるが、こちらは素の HTML から読むだけの 1 枚。 */
:root {
  --ink: #5A4F53; --ink2: #9C9194; --line: #DDD6D6; --line2: #EAE3E2;
  --accent: #DE9AA6; --accent2: #C98494; --paper: #F7F3F1; --card: #FFFFFF;
  --tint: #FBEFF0;
  /* いちばん濃い色。見出しと、下の帯に使う。淡い色だけだと全体がぼやける */
  --ink-deep: #453C40;
}
* { box-sizing: border-box; }
html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); line-height: 1.9;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', system-ui, sans-serif;
  /* 日本語の改行。小さい「ゃ」や句読点を行あたまに落とさない */
  line-break: strict; }
/* 見出しは行の長さをそろえる。「スケジュール／帳」のように 1 文字だけ落ちるのを防ぐ */
h1, h2, h3, .plan .name { text-wrap: balance; }
h1, h2 { color: var(--ink-deep); }
/* プランの箱はせまいので、語の途中で折れやすい。
   語のまとまりで折れるようにして、「鉛／筆」のような切れ方を避ける */
.plan li, .plan .per { word-break: auto-phrase; }
p, li, .lead, figcaption { text-wrap: pretty; }
/* ここで切ってほしくない、というまとまり */
.np { display: inline-block; }
a { color: var(--accent2); }

/* 上の帯 */
.nav { position: sticky; top: 0; z-index: 9; display: flex; align-items: center; gap: 18px;
  padding: 14px 20px; background: rgba(247, 243, 241, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line2); }
.nav .brand { font-size: 15px; letter-spacing: .14em; font-weight: 500; text-decoration: none;
  color: var(--ink); white-space: nowrap; }
.nav .sp { flex: 1; }
/* 「できるこ／と」のように途中で折れないように。入りきらなければ横に流す */
.nav a:not(.brand) { font-size: 12px; letter-spacing: .06em; text-decoration: none;
  color: var(--ink2); white-space: nowrap; }
.nav-links { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; margin-left: auto; }
.nav-links::-webkit-scrollbar { display: none; }
.nav a:not(.brand):hover { color: var(--accent2); }

main { max-width: 860px; margin: 0 auto; padding: 0 20px 90px; }
section { padding: 52px 0 0; }
h1 { font-size: 30px; font-weight: 500; letter-spacing: .05em; line-height: 1.6; margin: 0 0 14px; }
h2 { font-size: 18px; font-weight: 500; letter-spacing: .08em; margin: 0 0 16px;
  padding-left: 11px; border-left: 3px solid var(--accent); }
h3 { font-size: 15px; font-weight: 500; letter-spacing: .06em; margin: 26px 0 8px; }
p, li { font-size: 14px; }
.lead { font-size: 15px; color: var(--ink2); margin: 0 0 26px; }
.meta { color: var(--ink2); font-size: 12px; }
.small { font-size: 12px; color: var(--ink2); }

/*
 * 最初のひと画面。
 *
 * 左に言葉、右に実物。真ん中に 1 列で積むと、どうしても
 * 「用意された型に流しこんだ」見た目になる。
 * 手書きは**1 か所だけ**（写真の下のひとこと）。見出しは 1 書体でそろえる。
 * 書体を 2 つ混ぜると、声が 2 つあるように読めて落ち着かない。
 */
.hero { padding: 70px 0 18px; max-width: 680px; }
/*
 * 左に言葉、右に実物（紹介ページだけ）。
 * 料金・作家のページは 1 列のままなので、`split` を付けたところにだけ効かせる。
 */
.hero.split { max-width: none;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: 46px; align-items: center;
  /* 本文（860px）より広い場所を、ここだけに使う */
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: max(20px, calc(50vw - 600px)); padding-right: max(20px, calc(50vw - 600px)); }
.eyebrow { font-family: 'Jost', system-ui, sans-serif; font-weight: 300;
  font-size: 11px; letter-spacing: .34em; color: var(--ink2); margin: 0 0 18px; }
.hero h1 { font-size: 32px; line-height: 1.55; margin: 0 0 20px; color: var(--ink-deep); }
.hero.split h1 { font-size: 38px; }
.hero .lead { margin: 0 0 28px; }
.hero-note { margin-top: 18px; }

/* 見出しの中の 1 語にだけ、手帳のマーカー。線は字の下に敷く */
.hl { position: relative; display: inline-block; }
.hl::after { content: ''; position: absolute; left: -.06em; right: -.1em; bottom: .1em;
  height: .32em; border-radius: .2em; background: var(--accent); opacity: .34; z-index: -1;
  transform: scaleX(0) rotate(-.6deg); transform-origin: left center;
  animation: swipe .5s cubic-bezier(.32, .8, .4, 1) forwards; animation-delay: .35s; }
@keyframes swipe { to { transform: scaleX(1) rotate(-.6deg); } }

/* 実物。紙が浮いて見えるように、影は下に強く・横にうすく */
.hero-shot { margin: 0; }
.hero-shot img { width: 100%; height: auto; display: block; border-radius: 14px;
  border: 1px solid var(--line2); box-shadow: 0 2px 6px rgba(90,79,83,.05), 0 22px 48px rgba(90,79,83,.14); }
/* 手書きはここだけ。紙に走り書きを添えた感じで、少し傾ける */
.hand-note { font-family: 'Yomogi', 'Zen Kurenaido', cursive; font-size: 13px; color: var(--ink2);
  margin-top: 14px; transform: rotate(-1deg); transform-origin: left center; }
.hand-note::before { content: '↑ '; color: var(--accent); }

/* 動きが苦手な人には出さない。中身はそのまま見える */
@media (prefers-reduced-motion: reduce) {
  .hl::after { animation: none; transform: scaleX(1) rotate(-.6deg); }
}

/* 押させたい道は 1 本。もう片方は文字のリンクにする */
.btn-txt { align-self: center; font-size: 13px; color: var(--ink2); text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.btn-txt:hover { color: var(--accent2); border-color: var(--accent); }
.btn-txt::after { content: ' →'; }

.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); text-decoration: none;
  font-size: 14px; padding: 12px 26px; border-radius: 999px; transition: .14s; }
.btn:hover { border-color: var(--accent); color: var(--accent2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent2); border-color: var(--accent2); color: #fff; }

/* ならべる箱 */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line2); border-radius: 16px; padding: 20px 22px; }
.card h3 { margin-top: 0; }
.card p { margin: 0; color: var(--ink2); font-size: 13px; }

/* 料金の札 */
.plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plan { background: var(--card); border: 1px solid var(--line2); border-radius: 18px; padding: 26px 24px;
  display: flex; flex-direction: column; }
.plan.pick { border-color: var(--accent); box-shadow: 0 4px 24px rgba(222, 154, 166, .16); }
.plan .tag { align-self: flex-start; font-size: 11px; letter-spacing: .08em; padding: 3px 11px;
  border-radius: 999px; background: var(--tint); color: var(--accent2); margin-bottom: 12px; }
.plan .name { font-size: 17px; letter-spacing: .06em; margin: 0 0 4px; }
.plan .price { font-size: 32px; letter-spacing: .02em; margin: 6px 0 2px;
  font-family: 'Jost', system-ui, sans-serif; font-weight: 300; }
.plan .price small { font-size: 13px; color: var(--ink2); margin-left: 4px; }
.plan .per { font-size: 12px; color: var(--ink2); margin: 0 0 16px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 18px; }
.plan li { font-size: 13px; padding: 5px 0 5px 20px; position: relative; }
.plan li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 5px; height: 9px;
  border-right: 1.7px solid var(--accent); border-bottom: 1.7px solid var(--accent);
  transform: rotate(42deg); }
.plan li.no { color: var(--ink2); }
.plan li.no::before { border: 0; left: 3px; top: 16px; width: 9px; height: 0;
  border-top: 1.6px solid var(--line); transform: none; }

table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 13px; }
th, td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
th { background: var(--card); font-weight: 500; }
td.c, th.c { text-align: center; }

.note { background: var(--card); border: 1px dashed var(--line); border-radius: 14px;
  padding: 16px 20px; font-size: 13px; color: var(--ink2); }
.steps { counter-reset: s; list-style: none; padding: 0; }
.steps li { counter-increment: s; position: relative; padding: 0 0 18px 42px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--tint); color: var(--accent2);
  display: flex; align-items: center; justify-content: center; font-size: 12px; }

footer { max-width: 860px; margin: 0 auto; padding: 26px 20px 60px;
  border-top: 1px solid var(--line2); color: var(--ink2); font-size: 12px; }
footer a { color: var(--ink2); }

@media (max-width: 560px) {
  .hero { padding-top: 40px; padding-bottom: 0; }
  .hero h1 { font-size: 25px; }
  .shots { gap: 20px; width: calc(100vw - 32px); }
  h1 { font-size: 24px; }
  .nav { gap: 12px; padding: 12px 16px; }
  .nav .brand { font-size: 13px; letter-spacing: .1em; }
  .nav-links { gap: 14px; }
  /* 狭いところでは、同じページの中へ飛ぶぶんは省く。
     「ひらく」が端で切れてしまうほうが困る */
  .nav-links a[href^="#"] { display: none; }
  main { padding: 0 16px 70px; }
}

/*
 * 画面の写真。手帳は横長（1600x1010）なので、3 枚ならべると
 * 1 枚 270px になって字がつぶれる。**1 枚ずつ**、本文より広く出す。
 */
.shots { display: flex; flex-direction: column; gap: 28px;
  width: min(1120px, calc(100vw - 40px)); margin-left: 50%; transform: translateX(-50%); }
.shot { margin: 0; }
.shot a { display: block; }
/* 縦横の比は撮ったときのまま。height: auto を抜くと潰れる */
.shot img { width: 100%; height: auto; aspect-ratio: 1600 / 1010;
  display: block; border: 1px solid var(--line2); border-radius: 14px; background: var(--card); }
.shot figcaption { font-size: 12px; color: var(--ink2); padding: 9px 2px 0; }
.shot figcaption em { font-style: normal; color: var(--line); margin-left: 8px; }

/* 3 段のプラン。幅が足りなければ素直に折り返す */
.plans.three { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* せまい画面では、言葉のうしろに実物を置く（1 列） */
@media (max-width: 860px) {
  .hero.split { grid-template-columns: 1fr; gap: 30px; padding-top: 44px; }
  .hero.split h1 { font-size: 27px; }
  .hero-shot { order: 2; }
}
/* 横に広げたぶんが、スマホで横スクロールにならないように */
body { overflow-x: clip; }

/* 下の帯。濃い色を 1 か所に置くと、ページ全体が締まる */
.cta { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 54px max(20px, calc(50vw - 420px)); background: var(--ink-deep); color: #fff;
  text-align: center; margin-top: 76px; }
.cta h2 { color: #fff; border: 0; padding: 0; font-size: 21px; margin: 0 0 10px; }
.cta p { color: rgba(255,255,255,.72); margin: 0 0 22px; }
.cta .btn { background: #fff; border-color: #fff; color: var(--ink-deep); }
.cta .btn:hover { background: var(--tint); border-color: var(--tint); color: var(--ink-deep); }
.cta .small { color: rgba(255,255,255,.55); margin-top: 16px; display: block; }