/* =========================================================
   すぐ伝わるWeb　ホームページ  styles.css（2026年10月30日）
   - 色・太さ・文字組みは、チラシ v5-F21（flyer/v5-F21/styles.css）の値を引き継ぐ
   - 大きさは Web 用に px で指定。スマホ（〜767px）を基本に、768px 以上で PC 用の並びにする
   - LINEのグリーンは、LINEに関わる部分（LINE登録・LINEで友だち追加）だけに使う
   - フォントは HP で使う文字だけを抜き出したサブセット（fonts/）。
     文言を変えたら 作業ツール/HPのフォント/使い方.md の手順で作り直す
   ========================================================= */

@font-face { font-family: "ZKG"; src: url("fonts/ZenKakuGothicNew-Regular-subset.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ZKG"; src: url("fonts/ZenKakuGothicNew-Medium-subset.woff2")  format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "ZKG"; src: url("fonts/ZenKakuGothicNew-Bold-subset.woff2")    format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "ZKG"; src: url("fonts/ZenKakuGothicNew-Black-subset.woff2")   format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --orange:   #F08300;  /* メイン（帯・番号・強調） */
  --orange-d: #E2620E;  /* オレンジの文字（少し濃いめ） */
  --navy:     #1D3A6B;  /* ロゴの文字色・見出し */
  --blue:     #0075C2;  /* ロゴのブルー（アクセントだけ） */
  --sky:      #E3EEF8;  /* ネイビー・ブルーの淡い色 */
  --peach:    #FCE2C4;  /* オレンジの淡い色 */
  --cream:    #FFF8EA;  /* 地色 */
  --ink:      #3E3A39;  /* 本文（墨） */
  --ink-2:    #595757;  /* 本文の補助 */
  --line:     #D9D6CF;  /* 罫線 */
  --bgray:    #E9EEF3;  /* お悩みカードの番号の欄など */
  --white:    #FFFFFF;
  --line-green: #058749; /* LINEのグリーン（#06C755）を濃くしたもの。白文字とのコントラスト4.6:1 */

  --wrap: 1040px;        /* 本文の最大幅 */
  --gutter: 20px;        /* スマホの左右の余白 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--cream);
  font-family: "ZKG", "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  font-size: 16px; line-height: 1.8;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
  word-break: auto-phrase;
  line-break: strict;
  overflow-x: hidden;
}
h1, h2, h3 { font-weight: inherit; }
img, svg { display: block; max-width: 100%; }
ol, ul { list-style: none; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.sec { padding: 40px 0; }
.c-orange { color: var(--orange-d); }
.nowrap { white-space: nowrap; }

/* 見出し（チラシの .sec-title：Black・ネイビー） */
.sec-title { font-size: 26px; font-weight: 900; line-height: 1.35; letter-spacing: .02em; color: var(--navy); }
/* 小見出し（チラシと同じ、左にオレンジの縦線。文字は墨） */
.sub-title { font-size: 19px; font-weight: 900; line-height: 1.4; letter-spacing: .04em; color: var(--ink); }
.sub-title::before { content: ""; display: inline-block; width: 6px; height: 1em; background: var(--orange); border-radius: 4px; margin-right: 10px; vertical-align: -.12em; }
.sub-title--l { font-size: 22px; }


/* =========================================================
   0〜1. ロゴ・タグライン・メインコピー
   ========================================================= */
.hero { position: relative; padding: 28px 0 24px; }
/* 右上の淡いオレンジの円と、輪郭を表す4本の線（チラシ F9案②の配置。中心は右上の外）。
   チラシと同じく、円は下の「こんなお悩み」の後ろまで続く（文字・カードの下に敷く） */
.hero__art { position: absolute; z-index: -1; top: 0; right: 0; width: min(100%, 820px); height: auto; aspect-ratio: 110 / 100; pointer-events: none; }
.hero__art .sun { fill: var(--peach); }
.hero__art .rp  { fill: none; vector-effect: non-scaling-stroke; }
.hero__art .rp--1 { stroke: var(--orange); stroke-width: 1;   opacity: .85; }
.hero__art .rp--2 { stroke: var(--blue);   stroke-width: 1;   opacity: .6; }
.hero__art .rp--3 { stroke: var(--orange); stroke-width: 2; }
.hero__art .rp--4 { stroke: var(--blue);   stroke-width: 1.5; opacity: .75; }
.hero__inner { position: relative; }

.brand { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 18px; row-gap: 6px; }
.brand__img { height: 44px; width: auto; }
.brand__tagline { font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; color: var(--navy); padding-bottom: 4px; }

/* メインコピー（2行。1行目オレンジ／2行目は墨。1行目の「を行頭の外へ出し、2行目の「伝」を「今」の位置にそろえる） */
.headline {
  margin-top: 36px;
  font-size: clamp(28px, 8.2vw, 76px); font-weight: 900; line-height: 1.34; letter-spacing: .01em; color: var(--ink);
  white-space: nowrap;
}
.headline .hl { color: var(--orange); margin-left: -.5em; }
.headline__2 { padding-left: .5125em; }
.headline .hl, .headline__2 { display: inline-block; }


/* =========================================================
   2. こんなお悩み、ありませんか？
   ========================================================= */
.worries { padding-top: 24px; }
.wcards { display: grid; gap: 14px; margin-top: 18px; }
.wcard { display: grid; grid-template-columns: 64px 1fr; background: var(--white); border: 1.5px solid var(--orange); border-radius: 14px; overflow: hidden; }
.wcard__no { display: grid; place-items: center; background: var(--bgray); font-size: 28px; font-weight: 900; line-height: 1; color: var(--orange); letter-spacing: .02em; }
.wcard__body { padding: 14px 18px 15px; }
.wcard__title { font-size: 18px; font-weight: 900; line-height: 1.45; color: var(--navy); letter-spacing: .02em; }
.wcard__voice { margin-top: 4px; font-size: 15px; font-weight: 700; line-height: 1.7; color: var(--ink); display: flex; flex-wrap: wrap; column-gap: 1.4em; }


/* =========================================================
   3. 3つの段階 ＋ 4. すぐサイト
   ========================================================= */
.path { padding-top: 8px; }
.stages { display: flex; align-items: center; gap: 8px; }
.stg {
  flex: 1 1 0; text-align: center;
  font-size: 15px; font-weight: 900; line-height: 1.35; letter-spacing: .04em;
  border-radius: 10px; padding: 10px 6px 11px; border-bottom: 3px solid;
}
.stg--grow { flex-grow: 1.3; }
.stg--talk { background: var(--peach); color: var(--orange-d); border-color: var(--orange); }
.stg--make { background: var(--sky);   color: var(--navy);     border-color: var(--navy); }
.stg--grow { background: var(--bgray); color: var(--blue);     border-color: var(--blue); }
.stg__arrow { flex: none; width: 0; height: 0; border: 7px solid transparent; border-left: 9px solid var(--orange); border-right: 0; }

/* 「自分でも育てられる」から続く公開後の説明（上の帯の中央を指す切り欠き付き） */
.grow {
  position: relative; margin-top: 14px; display: grid; grid-template-columns: 1fr; row-gap: 10px;
  background: var(--bgray); border-radius: 12px; padding: 18px 20px 20px;
}
.grow::before {
  content: ""; position: absolute; top: -10px; right: 16%;
  border: 10px solid transparent; border-bottom: 10px solid var(--bgray); border-top: 0;
}
.grow__art { width: 104px; height: 46px; overflow: visible; }
.grow__art .g-stem   { fill: none; stroke: var(--blue); stroke-width: 1.4; stroke-linecap: round; }
.grow__art .g-leaf-o { fill: rgba(240,131,0,.14); stroke: var(--orange); stroke-width: 1.1; stroke-linejoin: round; }
.grow__art .g-leaf-b { fill: rgba(0,117,194,.12); stroke: var(--blue); stroke-width: 1.1; stroke-linejoin: round; }
.grow__art .g-bud    { fill: var(--orange); }
.grow__art .g-ground { fill: none; stroke: var(--navy); stroke-width: 1; stroke-linecap: round; opacity: .35; }
.grow__art .g-chev   { fill: none; stroke: var(--blue); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.grow__lead { font-size: 17px; font-weight: 900; line-height: 1.5; color: var(--navy); }
.grow__support { margin-top: 4px; font-size: 15px; line-height: 1.75; color: var(--ink); }

.base {
  margin-top: 18px; display: grid; grid-template-columns: 1fr; row-gap: 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 20px;
}
.base__logo { width: 120px; height: auto; mix-blend-mode: multiply; }
.base__name { font-size: 17px; font-weight: 900; line-height: 1.5; color: var(--navy); }
.base__price { display: inline-block; color: var(--orange-d); }
.base__desc { margin-top: 6px; font-size: 15px; line-height: 1.75; color: var(--ink); }
.base__note { margin-top: 6px; font-size: 14px; line-height: 1.7; font-weight: 700; color: var(--ink); }


/* =========================================================
   5・11. LINE案内（オレンジの角丸ボックス。スマホはボタン、PCはボタン＋QR）
   ========================================================= */
.sec--cta { padding: 16px 0; }
.sec--last { padding-bottom: 56px; }
.cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--orange); color: #fff; border-radius: 14px; padding: 24px 20px 26px;
}
.cta__lead { font-size: 16px; font-weight: 900; line-height: 1.5; letter-spacing: .03em; }
.cta__big { margin-top: 4px; font-size: 28px; font-weight: 900; line-height: 1.3; letter-spacing: .03em; }
.cta__offer { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 16px; font-weight: 900; line-height: 1.4; letter-spacing: .02em; }
.cta__badge { background: #fff; color: var(--orange-d); border-radius: 8px; padding: 4px 10px 5px; font-size: 17px; }
/* 「1分」と「Web現在地チェック」の間でだけ改行する（スマホ）。PCでは1行 */
.cta__main { margin-top: 4px; font-size: 24px; font-weight: 900; line-height: 1.3; letter-spacing: .01em; }
.cta__main .nowrap { display: inline-block; }
.free { display: inline-block; vertical-align: .3em; margin-right: 4px; font-size: 14px; font-weight: 900; letter-spacing: .08em; color: var(--orange-d); background: #fff; border-radius: 5px; padding: 2px 8px 3px; }
/* LINE登録（LINEのグリーン）→ 5つの質問（淡いオレンジ）→ 診断結果を確認（淡いブルーグレー） */
.cta__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 7px; margin-top: 12px; }
.flow { font-size: 14px; font-weight: 900; line-height: 1.3; border-radius: 999px; padding: 5px 12px 6px; white-space: nowrap; }
.flow--line   { background: var(--line-green); color: #fff; }
.flow--q      { background: var(--peach); color: var(--orange-d); }
.flow--result { background: var(--bgray); color: var(--navy); }
.flow__arrow { flex: none; width: 0; height: 0; border: 6px solid transparent; border-left: 8px solid #fff; border-right: 0; }
.cta__sub { margin-top: 10px; font-size: 14px; font-weight: 700; line-height: 1.6; letter-spacing: .03em; }

/* LINEで友だち追加（LINEのグリーンは濃いめの #058749。2026年10月30日 依頼者確認） */
.line-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 18px; width: 100%; max-width: 360px; min-height: 56px; padding: 12px 24px;
  background: var(--line-green); color: #fff; border-radius: 999px;
  font-size: 18px; font-weight: 900; letter-spacing: .04em; text-decoration: none;
  box-shadow: 0 3px 0 rgba(0,0,0,.18);
}
.line-btn::after { content: ""; width: 8px; height: 8px; border-top: 2.5px solid #fff; border-right: 2.5px solid #fff; transform: rotate(45deg); }
.line-btn:hover { filter: brightness(1.08); }
.line-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.qr { display: none; flex: none; width: 150px; height: 150px; background: #fff; border-radius: 10px; padding: 8px; }
.qr img { width: 100%; height: 100%; }


/* =========================================================
   6. Web制作は、最後の工程 ＋ 7. 制作工程
   ========================================================= */
.solution { padding-top: 48px; }
.lead { margin-top: 12px; font-size: 16px; font-weight: 500; line-height: 1.85; color: var(--ink); letter-spacing: .02em; }
.lead strong { font-weight: 700; }
.solution .sub-title { margin-top: 28px; }

.match { display: grid; gap: 12px; margin-top: 14px; }
.match__item {
  display: grid; grid-template-columns: 1fr 44px; column-gap: 12px; align-items: center;
  background: var(--white); border-radius: 12px; border: 1.5px solid var(--orange); padding: 14px 18px;
}
.match__item:nth-child(2) { border-color: var(--blue); }
.match__head { display: flex; align-items: center; gap: 12px; }
.match__no { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: var(--white); font-size: 19px; font-weight: 900; line-height: 1; }
.match__item:nth-child(2) .match__no { background: var(--blue); }
.match__name { font-size: 16px; font-weight: 900; line-height: 1.45; color: var(--navy); }
.match__icon { width: 44px; height: 44px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.match__icon .ln { stroke: var(--navy); }
.match__icon .ac { stroke: var(--orange); }
.match__item:nth-child(2) .match__icon .ac { stroke: var(--blue); }

/* 制作工程：スマホは縦に並べ、丸どうしを細い線でつなぐ */
.steps { margin-top: 32px; display: grid; gap: 14px; }
.step { position: relative; display: flex; align-items: center; gap: 14px; }
.step__no {
  flex: none; position: relative; z-index: 1;
  width: 42px; height: 42px; border-radius: 50%; background: var(--orange); color: var(--white);
  display: grid; place-items: center; font-size: 17px; font-weight: 900; line-height: 1;
}
.step--b .step__no { background: var(--navy); }
.step__name { font-size: 16px; font-weight: 900; line-height: 1.4; color: var(--navy); }
.step:not(:last-child)::after { content: ""; position: absolute; left: 20px; top: 42px; height: 14px; border-left: 3px solid var(--line); }
.process__note { margin-top: 18px; font-size: 14px; font-weight: 500; line-height: 1.7; color: var(--ink); }


/* =========================================================
   8. 私たちがサポートします
   ========================================================= */
.support { padding-top: 48px; }
.pros { display: grid; gap: 16px; margin-top: 16px; }
.pro { position: relative; background: #fff; border-radius: 12px; padding: 18px 20px 20px; border-top: 6px solid; }
/* カードの外周の細い線（F21：#B5B1AA）。上のオレンジ・ネイビーのラインはそのまま */
.pro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid #B5B1AA; border-top: 0;
  border-radius: 12px 12px 12px 12px / 7px 7px 12px 12px;
}
.pro--orange { border-color: var(--orange); }
.pro--blue   { border-color: var(--navy); }
.pro__head { display: grid; grid-template-columns: 88px 1fr; column-gap: 16px; align-items: center; }
/* 丸の中の位置は、チラシ（20mmの丸）と同じ比率。頭頂〜あご・目の高さ・両目の中点をそろえてある */
.pro__photo { position: relative; display: block; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: #EEF0ED; }
.pro__photo img { position: absolute; max-width: none; height: auto; }
.pro__photo--tanaka img { width: 91.5%;  left: 7.7%;   top: -4.5%; }
.pro__photo--ogura  img { width: 127.8%; left: -3.45%; top: -17.95%; }
/* 小倉さんの写真は背景が白いため、丸の内側にごく淡いグレーの線を重ねて輪郭を見やすくする（チラシと同じ） */
.pro__photo--ogura::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #E1E3DF; pointer-events: none; }
.pro__name { font-size: 22px; font-weight: 900; line-height: 1.3; letter-spacing: .08em; color: var(--navy); }
.pro__role { margin-top: 4px; font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; }
.pro--orange .pro__role { color: var(--orange-d); }
.pro--blue   .pro__role { color: var(--blue); }
.pro__title { margin-top: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 700; line-height: 1.6; }
.pro__desc { margin-top: 10px; font-size: 15.5px; font-weight: 500; line-height: 1.85; color: var(--ink); }


/* =========================================================
   9. よくあるご質問
   ========================================================= */
.qa { padding-top: 48px; }
.qa__grid { margin-top: 14px; border-top: 1px solid var(--line); }
.qa__item { padding: 16px 0 18px; border-bottom: 1px solid var(--line); }
.qa__item dt, .qa__item dd { position: relative; padding-left: 28px; }
.qa__item dt { font-size: 16px; font-weight: 900; line-height: 1.6; color: var(--navy); }
.qa__item dd { margin-top: 6px; font-size: 15.5px; font-weight: 500; line-height: 1.85; color: var(--ink); }
.qa__item dd strong { font-weight: 700; }
.qa__note { display: block; font-size: 14px; font-weight: 700; }
.qa__item dt::before, .qa__item dd::before { position: absolute; left: 0; top: -1px; font-size: 19px; font-weight: 900; line-height: 1.4; }
.qa__item dt::before { content: "Q"; color: var(--orange); }
.qa__item dd::before { content: "A"; color: var(--navy); }


/* =========================================================
   10. ブランドメッセージ
   ========================================================= */
.sec--message { padding-top: 48px; padding-bottom: 24px; }
.message { background: #fff; border: 1.5px solid var(--orange); border-radius: 14px; padding: 26px 22px 28px; }
.message__catch span { display: inline-block; }  /* 「、」のところで改行する（言葉の途中で折れないように） */
.message__catch { font-size: 22px; font-weight: 900; line-height: 1.45; letter-spacing: .03em; color: var(--navy); }
.message__sub { margin-top: 6px; font-size: 16px; font-weight: 700; line-height: 1.6; letter-spacing: .02em; color: var(--ink); }
/* 「あなたの強みと価値が伝わる」の下にだけ、細いオレンジの線（F19） */
.message__mark { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-skip-ink: none; }
.message__body { margin-top: 12px; font-size: 15px; font-weight: 500; line-height: 1.85; color: var(--ink); }
.message__body br { display: none; }  /* スマホでは自然に折り返す */


/* =========================================================
   12. フッター（全ページ共通）
   ========================================================= */
.footer { border-top: 1px solid var(--line); padding: 32px 0 36px; text-align: center; }
.footer__logo { height: 32px; width: auto; margin: 0 auto; }
.footer__names { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--ink-2); letter-spacing: .06em; }
.footer__nav { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.footer__nav a { font-size: 14px; font-weight: 700; color: var(--navy); text-decoration: none; }
.footer__nav a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }


/* =========================================================
   共通のヘッダーとメニュー（全ページ共通。2026年10月30日）
   - スマホ・タブレットは「メニュー」ボタンで開閉、1024px 以上は横に並べる
   - JavaScript が動かない環境では、メニューを常に表示する
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 248, 234, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.site-header__logo { display: block; transition: opacity .25s; }
.site-header__logo img { height: 30px; width: auto; }
/* トップページでは、ファーストビューのロゴと重ならないよう、少しスクロールしてから出す */
.page-top .site-header:not(.is-scrolled) .site-header__logo { opacity: 0; pointer-events: none; }
/* トップページの上端では、ヘッダーの地を透明にし、右上の円弧を画面の上端から見せる（チラシと同じ見え方） */
.page-top .site-header:not(.is-scrolled):not(.nav-open) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.page-top .hero__art { top: -60px; }

.menu-btn {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  background: var(--white); border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--navy);
}
.menu-btn__icon { position: relative; width: 18px; height: 12px; }
.menu-btn__icon::before, .menu-btn__icon::after, .menu-btn__icon i { content: ""; position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--navy); transition: transform .2s, opacity .2s; }
.menu-btn__icon::before { top: 0; }
.menu-btn__icon i { top: 5px; }
.menu-btn__icon::after { top: 10px; }
.nav-open .menu-btn__icon::before { transform: translateY(5px) rotate(45deg); }
.nav-open .menu-btn__icon i { opacity: 0; }
.nav-open .menu-btn__icon::after { transform: translateY(-5px) rotate(-45deg); }
.js .menu-btn { display: inline-flex; }

.gnav ul { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 0 12px; }
.gnav a { display: block; padding: 6px 0; font-size: 15px; font-weight: 700; color: var(--navy); text-decoration: none; }
.gnav a[aria-current="page"] { color: var(--orange-d); }
.gnav .gnav__cta a { color: #fff; background: var(--navy); border-radius: 999px; padding: 8px 18px; }  /* LINEのグリーンはLINEの部分だけに使うため、ネイビー */
.gnav .gnav__cta a[aria-current="page"] { color: #fff; background: var(--orange-d); }
/* JavaScript が動くときは、メニューを開閉式にする */
.js .gnav {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--cream); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(29, 58, 107, .08);
  visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility 0s .2s;
}
.js .nav-open .gnav { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s; }
.js .gnav ul { flex-direction: column; gap: 0; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 8px var(--gutter) 20px; }
.js .gnav li { border-bottom: 1px solid var(--line); }
.js .gnav li:last-child { border-bottom: 0; padding-top: 14px; }
.js .gnav a { padding: 14px 4px; font-size: 16px; }
.js .gnav .gnav__cta a { text-align: center; padding: 14px 18px; }
.site-header .wrap { position: static; }
.no-js-wrap { flex-wrap: wrap; }

@media (min-width: 1024px) {
  .js .menu-btn { display: none; }
  /* ロゴと同じ行の右側に並べる（右端は本文の右端にそろえる） */
  .js .gnav, .gnav {
    position: absolute; top: 0; bottom: 0; left: auto; right: 0; display: flex; align-items: center;
    padding-right: max(var(--gutter), calc((100% - var(--wrap)) / 2));
    visibility: visible; opacity: 1; transform: none; background: none; border: 0; box-shadow: none;
  }
  .js .gnav ul, .gnav ul { flex-direction: row; align-items: center; gap: 4px 20px; padding: 0; margin: 0; }
  .js .gnav li { border: 0; padding: 0; }
  .js .gnav li:last-child { padding-top: 0; }
  .js .gnav a, .gnav a { padding: 6px 0; font-size: 14.5px; }
  .js .gnav .gnav__cta a, .gnav .gnav__cta a { padding: 8px 18px; }
  .site-header__logo img { height: 34px; }
}


/* =========================================================
   下層ページの共通部品
   ========================================================= */
/* ページの見出し（右上にトップと同じ円弧を小さく） */
.page-head { position: relative; overflow: hidden; padding: 40px 0 28px; }
.page-head .hero__art { width: min(70%, 420px); }
.page-head__title { position: relative; font-size: 30px; font-weight: 900; line-height: 1.35; letter-spacing: .03em; color: var(--navy); }
.page-head__title::after { content: ""; display: block; width: 48px; height: 4px; margin-top: 14px; border-radius: 4px; background: var(--orange); }

/* 原稿確認中の枠（原稿が確定したら、中身に差し替える。公開前に必ずなくす） */
.tbd {
  margin-top: 18px; padding: 18px 20px; border: 2px dashed #C9C4BA; border-radius: 12px;
  background: rgba(255, 255, 255, .6); color: var(--ink-2); font-size: 14px; line-height: 1.8;
}
.tbd__label { display: inline-block; margin-bottom: 6px; padding: 2px 10px; border-radius: 999px; background: #EDE9E1; font-size: 12.5px; font-weight: 700; color: var(--ink-2); letter-spacing: .06em; }
.tbd ul { margin-top: 4px; padding-left: 1.2em; list-style: disc; }

/* 開閉式（よくあるご質問・工程の説明）。details 要素を使うので、JavaScript がなくても開閉できる */
.acc { border-top: 1px solid var(--line); margin-top: 14px; }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__q {
  position: relative; display: block; padding: 16px 44px 16px 30px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 900; line-height: 1.6; color: var(--navy);
}
.acc__q::-webkit-details-marker { display: none; }
.acc__q::before { content: "Q"; position: absolute; left: 0; top: 14px; font-size: 19px; font-weight: 900; color: var(--orange); }
.acc__q::after { /* 開閉の印（＋ → −） */
  content: ""; position: absolute; right: 10px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--navy), var(--navy)) center / 14px 2px no-repeat, linear-gradient(var(--navy), var(--navy)) center / 2px 14px no-repeat;
  transition: transform .2s;
}
.acc__item[open] > .acc__q::after { transform: rotate(90deg); background: linear-gradient(var(--navy), var(--navy)) center / 14px 2px no-repeat; }
.acc__a { position: relative; padding: 0 12px 18px 30px; font-size: 15.5px; font-weight: 500; line-height: 1.85; }
.acc__a::before { content: "A"; position: absolute; left: 0; top: -2px; font-size: 19px; font-weight: 900; color: var(--navy); }
.acc__a strong { font-weight: 700; }
.acc__q:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

/* 工程の一覧（進め方ページ。タップで説明が開く） */
.steplist { margin-top: 18px; display: grid; gap: 10px; }
.steplist__item { background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.steplist__head { display: flex; align-items: center; gap: 14px; padding: 12px 44px 12px 14px; cursor: pointer; list-style: none; position: relative; }
.steplist__head::-webkit-details-marker { display: none; }
.steplist__head::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2.5px solid var(--navy); border-bottom: 2.5px solid var(--navy); transform: rotate(45deg); transition: transform .2s;
}
.steplist__item[open] .steplist__head::after { transform: translateY(4px) rotate(-135deg); }
.steplist__body { padding: 0 18px 16px 70px; }
.steplist__body .tbd { margin-top: 0; }
.steplist .step__name { font-size: 17px; }

/* スクロールに合わせて、ふわっと表示する（JavaScript が動くときだけ。動きを減らす設定の端末では出さない） */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }


/* =========================================================
   PC（768px 以上）
   ========================================================= */
@media (min-width: 768px) {
  :root { --gutter: 40px; }
  .sec { padding: 56px 0; }
  .sec-title { font-size: 36px; }
  .sub-title { font-size: 22px; }
  .sub-title--l { font-size: 26px; }

  .hero { padding: 44px 0 40px; }
  .brand__img { height: 64px; }
  .brand__tagline { font-size: 17px; padding-bottom: 8px; }
  .headline { margin-top: 56px; }

  .worries { padding-top: 32px; }
  .wcards { gap: 16px; margin-top: 24px; }
  .wcard { grid-template-columns: 120px 1fr; }
  .wcard__no { font-size: 48px; }
  .wcard__body { padding: 20px 30px 22px; }
  .wcard__title { font-size: 24px; }
  .wcard__voice { font-size: 17px; }

  .path { padding-top: 16px; }
  .stages { gap: 12px; }
  .stg { font-size: 22px; padding: 12px 10px 14px; border-bottom-width: 4px; }
  .stg__arrow { border-width: 9px; border-left-width: 12px; }
  .grow { grid-template-columns: 136px 1fr; column-gap: 24px; align-items: center; padding: 22px 30px 24px; margin-top: 16px; }
  .grow__art { width: 136px; height: 60px; }
  .grow__lead { font-size: 20px; }
  .grow__support { font-size: 16px; }

  .base { grid-template-columns: 150px 1fr; column-gap: 30px; align-items: center; padding: 24px 30px; }
  .base__logo { width: 150px; }
  .base__name { font-size: 20px; }
  .base__price { margin-left: 14px; }
  .base__desc { font-size: 16px; }
  .base__note { font-size: 15px; text-align: right; }

  .sec--cta { padding: 24px 0; }
  .cta { padding: 30px 30px 30px 40px; }
  .cta__lead { font-size: 19px; }
  .cta__big { font-size: 44px; }
  .cta__offer { font-size: 19px; gap: 8px; }
  .cta__badge { font-size: 21px; padding: 4px 14px 6px; }
  .cta__main { font-size: 38px; }
  .free { font-size: 19px; padding: 2px 10px 4px; }
  .flow { font-size: 16px; padding: 6px 16px 7px; }
  .cta__sub { font-size: 15px; }
  .qr { display: block; width: 168px; height: 168px; }

  .solution, .support, .qa { padding-top: 72px; }
  .lead { font-size: 17px; }
  .match { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
  .match__item { padding: 16px 18px; }

  /* 制作工程：PCは横1列に並べ、矢印で流れを示す（チラシと同じ） */
  .steps { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin-top: 40px; }
  .step { flex-direction: column; gap: 10px; text-align: center; }
  .step__no { width: 52px; height: 52px; font-size: 19px; }
  .step__name { font-size: 15px; white-space: nowrap; }
  .step:not(:last-child)::after { left: calc(50% + 32px); top: 25px; width: calc(100% - 64px); height: 0; border-left: 0; border-top: 3px solid var(--line); }
  .step:not(:last-child)::before {
    content: ""; position: absolute; z-index: 1; top: 20px; left: calc(150% - 42px);
    border: 7px solid transparent; border-left: 9px solid var(--orange); border-right: 0;
  }
  .step--b:not(:last-child)::before { border-left-color: var(--navy); }
  .process__note { text-align: center; font-size: 15px; margin-top: 22px; }

  .pros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
  .pro { padding: 22px 26px 24px; }
  .pro__head { grid-template-columns: 104px 1fr; column-gap: 20px; }
  .pro__photo { width: 104px; height: 104px; }
  .pro__name { font-size: 26px; }
  .pro__role { font-size: 15px; }
  .pro__title { font-size: 15px; }
  .pro__desc { font-size: 16px; }

  .qa__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
  .qa__item { padding: 20px 28px 22px 0; }
  .qa__item:nth-child(even) { padding-left: 28px; padding-right: 0; border-left: 1px solid var(--line); }
  .qa__item dt { font-size: 17px; }
  .qa__item dd { font-size: 16px; }
  .qa__note { font-size: 15px; }

  .sec--message { padding-top: 72px; }
  .message { padding: 36px 40px 38px; text-align: center; }
  .message__catch { font-size: 30px; }
  .message__sub { font-size: 19px; margin-top: 8px; }
  .message__body { font-size: 16px; margin-top: 16px; }
  .message__body br { display: inline; }

  .page-head { padding: 64px 0 40px; }
  .page-head__title { font-size: 42px; }
  .tbd { padding: 22px 26px; font-size: 15px; }
  .acc__q { font-size: 17px; padding: 20px 52px 20px 34px; }
  .acc__q::before { top: 18px; }
  .acc__a { font-size: 16px; padding: 0 20px 22px 34px; }
  .steplist__head { padding: 14px 52px 14px 18px; }
}

@media (min-width: 1024px) {
  .step__name { font-size: 16px; }
  .wcard__no { font-size: 54px; }
}

/* 動きを減らす設定の端末 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}


/* =========================================================
   原稿案の部品（2026年10月30日）
   - 「原稿案・確認待ち」の印：原稿が確定したら、印（.draft-badge）だけを消す
   ========================================================= */
.draft-badge {
  display: inline-block; margin: 0 0 8px; padding: 1px 10px; border: 1px dashed var(--orange); border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--orange-d); letter-spacing: .06em; background: #fff;
}
.p { margin-top: 12px; font-size: 15.5px; line-height: 1.9; }
.note-strong { margin-top: 16px; padding: 14px 18px; border-left: 4px solid var(--navy); background: var(--sky); border-radius: 0 10px 10px 0; font-size: 15px; font-weight: 700; line-height: 1.8; color: var(--navy); }
.bullets { margin-top: 14px; display: grid; gap: 10px; }
.bullets li { position: relative; padding: 12px 16px 12px 40px; background: #fff; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; line-height: 1.75; }
.bullets li::before { content: ""; position: absolute; left: 16px; top: 21px; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); }
.bullets--check li::before { width: 12px; height: 7px; top: 19px; border-radius: 0; background: none; border-left: 3px solid var(--navy); border-bottom: 3px solid var(--navy); transform: rotate(-45deg); }
.bullets--note li::before { background: var(--blue); }

/* サービスのカード（3つの対応のくわしい説明） */
.svc { margin-top: 18px; display: grid; gap: 16px; }
.svc__item { background: #fff; border: 1.5px solid var(--orange); border-radius: 14px; padding: 18px 20px 20px; }
.svc__item:nth-child(2) { border-color: var(--blue); }
.svc__head { display: flex; align-items: center; gap: 12px; }
.svc__item:nth-child(2) .match__no { background: var(--blue); }
.svc__name { font-size: 19px; font-weight: 900; line-height: 1.45; color: var(--navy); }
.svc__dl { margin-top: 12px; display: grid; gap: 10px; }
.svc__dl dt { display: inline-block; padding: 1px 10px; border-radius: 6px; background: var(--bgray); font-size: 13px; font-weight: 700; color: var(--navy); }
.svc__dl dd { margin-top: 4px; font-size: 15px; line-height: 1.8; }

/* 比較表（スマホでは表だけを横にスクロールできるようにし、ページは横にはみ出さない） */
.table-scroll { margin-top: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.compare { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 14.5px; line-height: 1.7; }
.compare th, .compare td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { background: var(--bgray); color: var(--navy); font-weight: 900; }
.compare tbody th { width: 7.5em; color: var(--navy); font-weight: 700; background: #FCFBF8; }
.compare .is-ours { background: #FFF4E3; }
.compare thead .is-ours { background: var(--orange); color: #fff; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.scroll-hint { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); }

/* ご相談の流れ（番号つきの縦の流れ） */
.flowlist { margin-top: 18px; display: grid; gap: 12px; counter-reset: fl; }
.flowlist li { position: relative; padding: 14px 16px 14px 60px; background: #fff; border: 1px solid var(--line); border-radius: 12px; counter-increment: fl; }
.flowlist li::before { content: counter(fl); position: absolute; left: 14px; top: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-size: 16px; font-weight: 900; }
.flowlist li:nth-child(n+4)::before { background: var(--navy); }
.flowlist b { display: block; font-size: 16px; font-weight: 900; color: var(--navy); line-height: 1.5; }
.flowlist span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.75; }
.flowlist .is-line::before { background: var(--line-green); }
.steplist__body .p { margin-top: 0; }
.steplist__ask { margin-top: 8px; padding: 8px 12px; background: var(--bgray); border-radius: 8px; font-size: 14px; line-height: 1.7; }
.steplist__ask b { color: var(--navy); }

/* 静的・動的の切り替え（ボタンを押して見比べる） */
.tabs { margin-top: 16px; }
.tabs__list { display: flex; gap: 8px; }
.tabs__btn {
  flex: 1 1 0; min-height: 48px; padding: 8px 12px; border: 2px solid var(--navy); border-radius: 999px; background: #fff;
  font: inherit; font-size: 15px; font-weight: 900; color: var(--navy); cursor: pointer; transition: background .2s, color .2s;
}
.tabs__btn[aria-selected="true"] { background: var(--navy); color: #fff; }
.tabs__btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.tabs__panel { margin-top: 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.tabs__panel[hidden] { display: none; }
.how { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.how__box { padding: 6px 12px; border-radius: 8px; background: var(--bgray); font-size: 14px; font-weight: 700; color: var(--navy); }
.how__box--hot { background: var(--peach); color: var(--orange-d); }
.how__arrow { width: 0; height: 0; border: 6px solid transparent; border-left: 8px solid var(--orange); border-right: 0; }
.kv { display: grid; gap: 8px; }
.kv div { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; font-size: 14.5px; line-height: 1.75; }
.kv dt { font-weight: 700; color: var(--navy); }

/* 表示の速さ（このページを開くのにかかった時間） */
.speed { margin-top: 16px; display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--navy); color: #fff; border-radius: 12px; }
.speed__num { font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: .02em; white-space: nowrap; }
.speed__num small { font-size: 15px; margin-left: 2px; }
.speed__text { font-size: 14px; line-height: 1.7; }

/* 特長（トップ） */
.features { margin-top: 18px; display: grid; gap: 14px; }
.feature { background: #fff; border-radius: 12px; border-top: 5px solid var(--orange); padding: 16px 20px 18px; box-shadow: 0 1px 0 var(--line); }
.feature:nth-child(2) { border-top-color: var(--blue); }
.feature:nth-child(3) { border-top-color: var(--navy); }
.feature__title { font-size: 17px; font-weight: 900; line-height: 1.5; color: var(--navy); }
.feature__text { margin-top: 6px; font-size: 15px; line-height: 1.8; }
.more-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--orange); padding-bottom: 2px; }
.more-link::after { content: "→"; color: var(--orange-d); }

@media (min-width: 768px) {
  .svc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .p { font-size: 16px; }
  .scroll-hint { display: none; }
  .flowlist { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .flowlist li { padding: 56px 14px 16px; }
  .flowlist li::before { left: 14px; top: 14px; }
}