@charset "UTF-8";

/* ============================================================
   i-grafx.com「Web名刺」 共通スタイル
   背景色は Hero画像(hero-pc.jpg)の地色 #f9f4f0 に合わせています。
   ============================================================ */

:root {
  /* --- カラー --- */
  --c-bg:        #f9f4f0;   /* Hero画像と同じ地色（一体感） */
  --c-bg-soft:   #f1e8e0;   /* セクション区切りの淡色 */
  --c-ink:       #2a2520;   /* 本文・見出し（イラストの線に近い濃色） */
  --c-ink-soft:  #6f665b;   /* 補足テキスト */
  --c-leaf:      #5f7a4e;   /* 白川の若草グリーン（アクセント主） */
  --c-clay:      #c2764a;   /* 土のテラコッタ（アクセント従） */
  --c-line:      #e7ddd4;   /* 区切り線 */

  /* --- レイアウト --- */
  --max-w: 720px;           /* 本文セクションの幅（Heroは全幅） */
  --pad-x: 24px;

  /* --- フォント --- */
  --font-round: "Zen Maru Gothic", "Noto Sans JP", sans-serif; /* 見出し（丸み） */
  --font-body:  "Noto Sans JP", sans-serif;                    /* 本文 */
  --font-hand:  "Yomogi", "Zen Maru Gothic", sans-serif;       /* 手書き風アクセント */
  --font-en:    "DM Sans", sans-serif;                         /* 英字ロゴ */
}

/* ===== リセット ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

/* ============================================================
   オーバーレイの仕組み（再利用）
   .ov の中に「画像(.ov__img)」と「テキスト(.ov__text)」を入れると、
   テキストが画像の上に重なります。位置は各セクションで % 指定。
   画像は幅100%・高さ自動なので画面サイズに追従し、テキストも % で追従します。
   ============================================================ */
.ov { position: relative; width: 100%; }
.ov__img { width: 100%; }
.ov__img img { width: 100%; }
.ov__text { position: absolute; }   /* top/left/right/width は各セクションで指定 */

/* ============================================================
   HERO（PC版）
   ============================================================ */
.hero {
  width: 100%;
  max-width: 1920px;     /* 画像の実寸。これ以上の画面では中央寄せ */
  margin: 0 auto;
}

/* ロゴ（上部中央） */
.hero__logo {
  position: absolute;
  top: 5.5%; left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(15px, 1.7vw, 30px);
  letter-spacing: .04em;
  color: var(--c-ink);
  white-space: nowrap;
}

/* キャッチコピー（左の余白に配置） */
.hero__text {
  top: 33%;
  left: 14%;
  width: 46%;
  text-align: left;
}
.hero__eyebrow {
  font-family: var(--font-round);
  font-weight: 500;
  font-size: clamp(16px, 1.9vw, 34px);
  margin-bottom: .4em;
}
.hero__title {
  display: inline-block;       /* 文字幅に合わせる → キラリンが文字に寄る */
  font-family: var(--font-round);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 108px);
  line-height: 1.05;
  margin-bottom: .25em;
}
.hero__lead {
  font-family: var(--font-round);
  font-weight: 500;
  font-size: clamp(18px, 2.5vw, 44px);
  line-height: 1.5;
  margin-bottom: .55em;
}
.hero__sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(12px, 1.45vw, 25px);
  line-height: 1.7;
  color: var(--c-ink-soft);
}

/* ============================================================
   くるりん矢印（セクション区切り画像）
   ============================================================ */
.divider {
  max-width: 1920px;
  margin: 0 auto;
}
.divider img { width: 100%; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  margin-top: 64px;
  background: var(--c-bg-soft);
  border-top: 1px solid var(--c-line);
}
.site-footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 36px var(--pad-x);
  text-align: center;
}
.site-footer__name { font-family: var(--font-en); font-size: 15px; margin-bottom: 8px; }
.site-footer__meta { font-size: 13px; color: var(--c-ink-soft); margin-bottom: 12px; }
.site-footer__links { font-size: 13px; margin-bottom: 16px; }
.site-footer__links a { color: var(--c-leaf); text-decoration: none; border-bottom: 1px solid currentColor; }
.site-footer__copy { font-size: 12px; color: var(--c-ink-soft); }

/* ============================================================
   レスポンシブ（スマホ：~640px）
   ※ スマホ版Hero画像(hero-sp.jpg)が届いたら、ここを本調整します。
     現状はPC画像が縮小表示されます（暫定）。
   ============================================================ */
@media (max-width: 640px) {
  :root { --pad-x: 18px; }

  /* スマホ版Hero画像(hero-sp.jpg)：上半分が余白、下半分にイラスト。
     テキストは上半分に中央揃えで配置。 */
  .hero__logo {
    top: 3.5%;
    font-size: clamp(13px, 3.8vw, 18px);
  }
  .hero__text {
    top: 9%;
    left: 0; right: 0;
    width: 100%;
    padding: 0 22px;
    text-align: center;
  }
  .hero__eyebrow { font-size: clamp(14px, 4.2vw, 20px); margin-bottom: .3em; }
  .hero__title   { font-size: clamp(34px, 11vw, 62px); margin-bottom: .15em; }
  .hero__lead    { font-size: clamp(16px, 4.6vw, 24px); margin-bottom: .4em; }
  .hero__sub     { font-size: clamp(11px, 3.3vw, 15px); }
}

/* ============================================================
   HERO アニメーション
   ・ロード時：ロゴ→キャッチが順にふわっと登場（fade up）
   ・キラリン：「Web 名刺」にキラキラを控えめにループ
   ============================================================ */
@keyframes heroUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__logo,
.hero__eyebrow,
.hero__title,
.hero__lead,
.hero__sub {
  opacity: 0;
  animation: heroUp .8s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero__logo    { animation-delay: .15s; animation-name: heroUpCenter; }
.hero__eyebrow { animation-delay: .55s; }
.hero__title   { animation-delay: .75s; position: relative; }
.hero__lead    { animation-delay: 1.05s; }
.hero__sub     { animation-delay: 1.30s; }

/* ロゴは中央寄せ(translateX -50%)を保ったまま登場させる専用アニメ */
@keyframes heroUpCenter {
  from { opacity: 0; transform: translateX(-50%) translateY(18px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* キラリン（4点星を2つ・時間差で控えめに光らせる） */
@keyframes twinkle {
  0%   { opacity: 0; transform: scale(.2) rotate(-15deg); }
  12%  { opacity: 1; transform: scale(1) rotate(8deg); }
  30%  { opacity: 0; transform: scale(.5) rotate(20deg); }
  100% { opacity: 0; }
}
.sparkle {
  position: absolute;
  fill: var(--c-clay);
  pointer-events: none;
  opacity: 0;
}
.sparkle--a {
  width: clamp(16px, 1.7vw, 30px);
  top: -.2em; right: -.3em;
  animation: twinkle 4.5s ease-in-out 1.6s infinite;
}
.sparkle--b {
  width: clamp(10px, 1.1vw, 19px);
  bottom: -.05em; left: -.35em;
  animation: twinkle 4.5s ease-in-out 2.4s infinite;
}

/* 動きを減らす設定の人には、アニメを止めて静止表示 */
@media (prefers-reduced-motion: reduce) {
  .hero__logo,
  .hero__eyebrow,
  .hero__title,
  .hero__lead,
  .hero__sub { opacity: 1; animation: none; }
  .sparkle { display: none; }
}

/* ============================================================
   3. 共感 ＋ できること
   ============================================================ */
.empathy { position: relative; }
.empathy__pc {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}
.empathy__sp { display: none; }
.empathy .ov__img img { width: 100%; }

/* 心の声（右上・中央揃え） */
.empathy__voice {
  top: 18%; left: 39.4%; width: 43.8%;
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(13px, 1.6vw, 28px);
  line-height: 1.95;
}
/* そんな願いを叶えましょ（中央・大・主役） */
.empathy__wish {
  top: 45%; left: 40.6%;
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 72px);
  color: var(--c-ink);
}
/* 1文字ずつ、旗のようにはためく（delayは main.js で付与） */
.empathy__wish .wave,
.sp-wish .wave {
  display: inline-block;
  animation: wishWave 2.6s ease-in-out infinite;
}
@keyframes wishWave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(-3deg); }
}
/* 叶えましょ のキラリン */
.wish-sparkle--a {
  width: clamp(18px, 2vw, 34px);
  top: -.25em; right: -.1em;
  animation: twinkle 3.6s ease-in-out 1.0s infinite;
}
.wish-sparkle--b {
  width: clamp(12px, 1.4vw, 24px);
  bottom: -.15em; left: -.05em;
  animation: twinkle 3.6s ease-in-out 2.1s infinite;
}
/* できること（左下・中央揃え） */
.empathy__service {
  top: 64%; left: 14%; width: 50.3%;
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(12px, 1.55vw, 27px);
  line-height: 2;
}
/* こんなんできますけど（モックアップ下・手書き風） */
.empathy__cap {
  top: 91.5%; left: 75.7%; width: 13%;
  margin: 0;
  text-align: center;
  font-family: var(--font-hand);
  font-size: clamp(11px, 1.15vw, 20px);
  line-height: 1.6;
  color: var(--c-ink);
}
/* モックアップに重ねる透明リンク */
.empathy__link {
  top: 64%; left: 73.5%;
  width: 17%; height: 18.5%;
  display: block;
  border-radius: 10px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.empathy__link:hover,
.empathy__link:focus-visible {
  box-shadow: 0 0 0 3px rgba(194,118,74,.55);
  transform: scale(1.015);
  outline: none;
}

/* ============================================================
   スクロールで登場（reveal）
   画面に入ったら main.js が .is-visible を付与 → ふわっと表示
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .empathy__wish .wave,
  .sp-wish .wave,
  .recommend__label .sign-wave,
  .rec-sp-label .sign-wave,
  .flow__label .sign-wave,
  .flow-sp-label .sign-wave,
  .flow-sp-head { animation: none; }
}

/* ============================================================
   共感セクション スマホ調整（empathy-sp.jpg 到着後に本調整）
   ============================================================ */
@media (max-width: 640px) {
  /* スマホは縦長の大きい矢印を中央に（大きさはこの max-width で調整できます）*/
  .divider { max-width: 100px; margin: 0 auto; }

  /* スマホ版：PC1枚を隠し、SP2枚を表示 */
  .empathy__pc { display: none; }
  .empathy__sp { display: block; }

  .empathy__sptop,
  .empathy__spbot {
    position: relative;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
  }

  /* 上：心の声 */
  .sp-voice {
    top: 65%; left: 7%; width: 86%;
    text-align: center;
    font-family: var(--font-body);
    font-size: clamp(12px, 3.3vw, 17px);
    line-height: 1.95;
  }
  /* 上：そんな願いを叶えましょ */
  .sp-wish {
    top: 82.5%; left: 0; width: 100%;
    margin: 0;
    text-align: center;
    font-family: var(--font-round);
    font-weight: 700;
    font-size: clamp(30px, 8vw, 58px);
    color: var(--c-ink);
  }
  /* 下：できること */
  .sp-service {
    top: 8%; left: 8%; width: 84%;
    text-align: center;
    font-family: var(--font-body);
    font-size: clamp(11px, 3.1vw, 16px);
    line-height: 1.95;
  }
  /* 下：こんなんできますけど */
  .sp-cap {
    top: 80%; left: 0; width: 100%;
    margin: 0;
    text-align: center;
    font-family: var(--font-hand);
    font-size: clamp(11px, 3vw, 15px);
    line-height: 1.6;
    color: var(--c-ink);
  }
  /* 下：モックアップの透明リンク */
  .sp-link {
    top: 47%; left: 25%; width: 52%; height: 21%;
    display: block; border-radius: 10px;
    transition: box-shadow .2s ease;
  }
  .sp-link:hover,
  .sp-link:focus-visible {
    box-shadow: 0 0 0 3px rgba(194,118,74,.55);
    outline: none;
  }
}

/* スマホ版「叶えましょ」のキラリン（親が非表示のときは出ません） */
.sp-spark-a {
  width: clamp(14px, 4vw, 24px);
  top: -.3em; right: 18%;
  animation: twinkle 3.6s ease-in-out 1.0s infinite;
}
.sp-spark-b {
  width: clamp(10px, 3vw, 18px);
  bottom: -.15em; left: 20%;
  animation: twinkle 3.6s ease-in-out 2.1s infinite;
}

/* ============================================================
   4. こんな方におすすめ
   ============================================================ */
.recommend { position: relative; }
.recommend__pc {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}
.recommend .ov__img img { width: 100%; }

/* プラカードの見出し（手書き風） */
.recommend__label {
  top: 17.5%; left: 72%; width: 19.3%;
  margin: 0;
  text-align: center;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(15px, 1.9vw, 32px);
  line-height: 1.45;
  color: var(--c-ink);
}
/* おすすめ文言（中央揃え） */
.recommend__voice {
  top: 17.5%; left: 12.8%; width: 53.2%;
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(13px, 1.7vw, 30px);
  line-height: 1.85;
}
/* こんなんできますけど（手書き風） */
.recommend__cap {
  top: 92.5%; left: 33.6%; width: 16%;
  margin: 0;
  text-align: center;
  font-family: var(--font-hand);
  font-size: clamp(11px, 1.2vw, 21px);
  color: var(--c-ink);
}
/* モックアップ2つの透明リンク */
.recommend__link-eth,
.recommend__link-aisis {
  display: block;
  border-radius: 8px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.recommend__link-eth { top: 63%; left: 11.8%; width: 14%; height: 22.5%; }
.recommend__link-aisis { top: 62%; left: 47%; width: 19.6%; height: 22%; }
.recommend__link-eth:hover, .recommend__link-eth:focus-visible,
.recommend__link-aisis:hover, .recommend__link-aisis:focus-visible {
  box-shadow: 0 0 0 3px rgba(194,118,74,.55);
  transform: scale(1.015);
  outline: none;
}

/* ============================================================
   看板「こんな方におすすめ」の文字アニメ（ぴょこぴょこ）
   ============================================================ */
@keyframes signWave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.recommend__label .sign-wave,
.rec-sp-label .sign-wave,
.flow__label .sign-wave,
.flow-sp-label .sign-wave {
  display: inline-block;
  animation: signWave 2.2s ease-in-out infinite;
}

/* ============================================================
   おすすめ スマホ版（2枚）
   ============================================================ */
.recommend__sp { display: none; }

@media (max-width: 640px) {
  .recommend__pc { display: none; }
  .recommend__sp { display: block; }

  .recommend__sptop,
  .recommend__spbot {
    position: relative;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
  }
  /* 上：看板ラベル */
  .rec-sp-label {
    top: 6.5%; left: 30%; width: 40%;
    margin: 0;
    text-align: center;
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: clamp(16px, 4.5vw, 26px);
    line-height: 1.4;
    color: var(--c-ink);
  }
  /* 上：おすすめ文言 */
  .rec-sp-voice {
    top: 66.5%; left: 6%; width: 88%;
    text-align: center;
    font-family: var(--font-body);
    font-size: clamp(11px, 2.9vw, 15px);
    line-height: 1.85;
  }
  /* 下：こんなんできますけど */
  .rec-sp-cap {
    top: 48.5%; left: 29%; width: 42%;
    margin: 0;
    text-align: center;
    font-family: var(--font-hand);
    font-size: clamp(11px, 3vw, 15px);
    color: var(--c-ink);
  }
  /* 下：モックアップ2つのリンク */
  .rec-sp-link-eth,
  .rec-sp-link-ais {
    display: block; border-radius: 8px;
    transition: box-shadow .2s ease;
  }
  .rec-sp-link-eth { top: 9%; left: 16%; width: 43%; height: 29%; }
  .rec-sp-link-ais { top: 58%; left: 21%; width: 62%; height: 30%; }
  .rec-sp-link-eth:hover, .rec-sp-link-eth:focus-visible,
  .rec-sp-link-ais:hover, .rec-sp-link-ais:focus-visible {
    box-shadow: 0 0 0 3px rgba(194,118,74,.55); outline: none;
  }
}

/* ============================================================
   5. 作成手順（PC版：手順は画像焼き込み、看板の文字だけHTML）
   ============================================================ */
.flow { position: relative; }
.flow__pc {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}
.flow .ov__img img { width: 100%; }
.flow__label {
  top: 19%; left: 8.5%; width: 18.6%;
  margin: 0;
  text-align: center;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(15px, 1.9vw, 32px);
  color: var(--c-ink);
}

/* ============================================================
   5. 作成手順 スマホ版（ぐらちゃん＋吹き出し＋手順リスト）
   ============================================================ */
.flow__sp { display: none; }

@media (max-width: 640px) {
  .flow__pc { display: none; }
  .flow__sp {
    display: block;
    position: relative;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
  }
  /* 吹き出しの「作成手順」 */
  .flow-sp-label {
    top: 11.5%; left: 45%; width: 45%;
    margin: 0;
    text-align: center;
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: clamp(20px, 6vw, 34px);
    color: var(--c-ink);
  }
  /* 見出し「おきがるにいきましょ」 */
  .flow-sp-head {
    top: 30%; left: 14%; width: 58%;
    margin: 0;
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: clamp(16px, 4.6vw, 24px);
    color: var(--c-clay);
    animation: headFloat 3.2s ease-in-out infinite;
    transform-origin: left center;
  }
  /* 手順リスト（横書き12項目） */
  .flow-sp-list {
    top: 37%; left: 14%; width: 74%;
    margin: 0; padding: 0;
    list-style: none;
  }
  .flow-sp-list li {
    position: relative;
    padding-left: 1.3em;
    margin-bottom: 3.6%;
    font-family: var(--font-body);
    font-size: clamp(13px, 3.7vw, 18px);
    line-height: 1.15;
    color: var(--c-ink);
  }
  .flow-sp-list li::before {
    content: "•";
    position: absolute; left: .25em; top: 0;
    color: var(--c-clay);
  }
}

/* 「おきがるにいきましょ」のふわふわ揺れ */
@keyframes headFloat {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-4px) rotate(1.2deg); }
}

/* ============================================================
   6. 料金プラン
   ============================================================ */
.plan {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 64px) 20px;
}
.plan__title {
  text-align: center;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(26px, 5vw, 44px);
  color: var(--c-ink);
  margin: 0 0 .3em;
}
.plan__lead {
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(13px, 1.6vw, 17px);
  color: var(--c-ink-soft);
  margin: 0 0 2em;
}
.plan__cards {
  display: flex;
  gap: clamp(14px, 2vw, 24px);
  align-items: stretch;
}
.plan-card {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 18px;
  padding: clamp(20px, 2.4vw, 30px) clamp(16px, 2vw, 24px);
  box-shadow: 0 6px 22px rgba(90, 70, 50, .06);
}
/* おすすめカードを強調 */
.plan-card--feature {
  border: 2px solid var(--c-clay);
  box-shadow: 0 12px 34px rgba(194, 118, 74, .18);
}
@media (min-width: 641px) {
  .plan-card--feature { transform: translateY(-12px); }
}
.plan-card__badge {
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--c-clay);
  color: #fff;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 14px;
  padding: 4px 18px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(194, 118, 74, .3);
}
.plan-card__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--c-ink);
  margin: 0 0 .2em;
  text-align: center;
}
.plan-card__sub {
  font-family: var(--font-body);
  font-size: clamp(12px, 1.3vw, 13px);
  color: var(--c-ink-soft);
  text-align: center;
  margin: 0 0 1em;
}
.plan-card__price {
  text-align: center;
  margin: 0 0 1.1em;
  color: var(--c-clay);
  line-height: 1;
}
.plan-card__price .num {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 42px);
}
.plan-card__price .yen {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.4vw, 16px);
  margin-left: 2px;
}
.plan-card__list {
  list-style: none;
  margin: 0 0 1.6em;
  padding: 0;
  flex: 1 1 auto;
}
.plan-card__list li {
  position: relative;
  padding: .5em 0 .5em 1.6em;
  font-family: var(--font-body);
  font-size: clamp(13px, 1.4vw, 15px);
  color: var(--c-ink);
  border-bottom: 1px dashed var(--c-line);
  line-height: 1.4;
}
.plan-card__list li:last-child { border-bottom: none; }
.plan-card__list li::before {
  content: "✓";
  position: absolute; left: 0; top: .5em;
  color: var(--c-leaf);
  font-weight: 700;
}
.plan-card__cta {
  display: block;
  text-align: center;
  text-decoration: none;
  background: var(--c-clay);
  color: #fff;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 17px);
  padding: .8em 1em;
  border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.plan-card__cta:hover,
.plan-card__cta:focus-visible {
  background: #a85f37;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(194, 118, 74, .3);
  outline: none;
}
.plan-card--feature .plan-card__cta { background: var(--c-clay); }
.plan__note {
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(11px, 1.2vw, 13px);
  color: var(--c-ink-soft);
  line-height: 1.8;
  margin: 2.4em auto 0;
  max-width: 640px;
}
@media (max-width: 640px) {
  .plan__cards { flex-direction: column; gap: 28px; }
  .plan-card--feature { transform: none; }
}

/* 料金プラン：差別化・運用ボックス */
.plan__compare {
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(13px, 1.6vw, 17px);
  color: var(--c-ink);
  margin: -1.4em 0 2.2em;
}
.plan__compare b { color: var(--c-clay); font-weight: 700; }

.plan-card__list li.is-free {
  color: var(--c-clay);
  font-weight: 700;
}
.plan-card__list li.is-free::before {
  content: "★";
  color: var(--c-clay);
}

.plan__ops {
  max-width: 760px;
  margin: 2.8em auto 0;
  background: var(--c-bg-soft);
  border: 1.5px solid var(--c-line);
  border-radius: 16px;
  padding: clamp(22px, 3vw, 34px);
  text-align: center;
}
.plan__ops-title {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 25px);
  color: var(--c-clay);
  margin: 0 0 .7em;
}
.plan__ops-lead {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.6vw, 18px);
  color: var(--c-ink);
  line-height: 1.75;
  margin: 0 0 1.1em;
}
.plan__ops-lead b { color: var(--c-clay); }
.plan__ops-text {
  font-family: var(--font-body);
  font-size: clamp(12px, 1.3vw, 14px);
  color: var(--c-ink-soft);
  line-height: 1.95;
  margin: 0;
  text-align: left;
}

/* ============================================================
   7. 制作実績ギャラリー
   ============================================================ */
.works {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 64px) 20px;
}
.works__title {
  text-align: center;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(26px, 5vw, 44px);
  color: var(--c-ink);
  margin: 0 0 .3em;
}
.works__lead {
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(13px, 1.6vw, 17px);
  color: var(--c-ink-soft);
  margin: 0 0 2.2em;
}
.works__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
}
.work-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 22px rgba(90, 70, 50, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.work-card:hover,
.work-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(90, 70, 50, .14);
  outline: none;
}
.work-card__img {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.work-card__img img {
  width: 100%;
  display: block;
}
.work-card__body {
  padding: clamp(16px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.work-card__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(16px, 1.9vw, 20px);
  color: var(--c-ink);
  margin: 0 0 .5em;
}
.work-card__desc {
  font-family: var(--font-body);
  font-size: clamp(12px, 1.4vw, 14px);
  color: var(--c-ink-soft);
  line-height: 1.7;
  margin: 0 0 1.2em;
  flex: 1 1 auto;
}
.work-card__cta {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 16px);
  color: var(--c-clay);
  transition: transform .15s ease;
}
.work-card:hover .work-card__cta {
  transform: translateX(4px);
}
@media (max-width: 640px) {
  .works__grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ============================================================
   7-2. テンプレート活用サンプル
   ============================================================ */
.samples {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px clamp(24px, 5vw, 64px);
}
.samples__title {
  text-align: center;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(22px, 4vw, 36px);
  color: var(--c-ink);
  margin: 0 0 .3em;
}
.samples__lead {
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(12px, 1.5vw, 16px);
  color: var(--c-ink-soft);
  line-height: 1.7;
  margin: 0 0 2em;
}
.samples__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  max-width: 860px;
  margin: 0 auto;
}
/* button要素のリセット込み */
.sample-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  box-shadow: 0 6px 22px rgba(90, 70, 50, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sample-card:hover,
.sample-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(90, 70, 50, .14);
  outline: none;
}
.sample-card__badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  background: var(--c-ink-soft);
  color: #fff;
  font-family: var(--font-body);
  font-size: 11px;
  padding: 3px 12px;
  border-radius: 999px;
}
.sample-card__img {
  display: block;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.sample-card__img img { width: 100%; display: block; }
.sample-card__body {
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2vw, 22px);
}
.sample-card__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(15px, 1.8vw, 19px);
  color: var(--c-ink);
  margin-bottom: .5em;
}
.sample-card__desc {
  font-family: var(--font-body);
  font-size: clamp(12px, 1.4vw, 14px);
  color: var(--c-ink-soft);
  line-height: 1.7;
  margin-bottom: 1.2em;
}
.sample-card__cta {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 16px);
  color: var(--c-clay);
}

/* ===== サイト全体ポップアップ（モーダル） ===== */
.modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.modal[aria-hidden="false"] { display: block; }
.modal__overlay {
  position: absolute; inset: 0;
  background: rgba(30, 24, 18, .62);
  backdrop-filter: blur(2px);
}
.modal__panel {
  position: relative;
  max-width: 920px;
  margin: 4vh auto;
  max-height: 92vh;
  background: #fff;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
  animation: modalUp .25s ease;
}
@keyframes modalUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--c-line);
  flex: 0 0 auto;
}
.modal__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--c-ink);
}
.modal__close {
  background: none; border: none;
  font-size: 26px; line-height: 1;
  color: var(--c-ink-soft);
  cursor: pointer;
  padding: 0 4px;
  transition: color .15s ease, transform .15s ease;
}
.modal__close:hover { color: var(--c-clay); transform: scale(1.1); }
.modal__scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal__img { width: 100%; display: block; }

@media (max-width: 640px) {
  .samples__grid { grid-template-columns: 1fr; gap: 22px; }
  .modal__panel { margin: 0; max-height: 100vh; border-radius: 0; height: 100vh; }
}

/* ============================================================
   8. お問い合わせ
   ============================================================ */
.contact {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 64px) 20px clamp(40px, 6vw, 80px);
}
.contact__title {
  text-align: center;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(26px, 5vw, 44px);
  color: var(--c-ink);
  margin: 0 0 .3em;
}
.contact__lead {
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(13px, 1.6vw, 16px);
  color: var(--c-ink-soft);
  line-height: 1.7;
  margin: 0 0 2.2em;
}
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 1.3em;
}
.field { display: flex; flex-direction: column; }
.field label {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: .5em;
}
.field .req {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--c-clay);
  padding: 1px 8px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 16px; /* iOSズーム防止のため16px */
  color: var(--c-ink);
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 10px;
  padding: .7em .9em;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; line-height: 1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-clay);
  box-shadow: 0 0 0 3px rgba(194, 118, 74, .15);
}
.contact__submit {
  margin-top: .6em;
  align-self: center;
  min-width: 240px;
  background: var(--c-clay);
  color: #fff;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 19px);
  border: none;
  border-radius: 999px;
  padding: .85em 2em;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.contact__submit:hover,
.contact__submit:focus-visible {
  background: #a85f37;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(194, 118, 74, .3);
  outline: none;
}
.contact__info {
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(11px, 1.2vw, 13px);
  color: var(--c-ink-soft);
  line-height: 1.8;
  margin: 2.4em 0 0;
}