/* Kuroa 事業紹介サイト（文字だけで見せる）。1ページ縦長。小さい画面を基準に書き、広い画面で足す
   決めごと
   - 線と枠は使わない。区切りは背景の色の差と余白でつける（フォームの入力欄だけは例外）
   - 文字の大きさは --s1〜--s5 の5段だけ
   - 色は 白・濃い色・青緑 の3つ。区画ごとに背景を1色で塗る */

:root {
  --paper: #f1f1ee;
  --surface: #e4e3df;
  --ink: #17181a;
  --ink-soft: #4d4f53;
  --teal: #0f5f63;
  --teal-deep: #0b4f52;
  --on-dark: #f1f1ee;
  --on-dark-soft: #b8babd;
  --on-teal-soft: #c6dcdc;
  /* 見本の画面を入れるスマホの枠。濃い地の上で、地より一段明るく見える色 */
  --bezel: #3a3c41;

  /* 文字の大きさ。小さい注記／本文／導入の1文／区画の見出し／社名と金額 */
  --s1: 14px;
  --s2: 16px;
  --s3: clamp(19px, 0.6vw + 15px, 24px);
  --s4: clamp(28px, 3.2vw + 10px, 56px);
  /* 社名と金額。iPhone のヒラギノは英字の幅が広いので、390px 幅でも「Kuroa」が1行に収まる大きさにする */
  --s5: clamp(80px, 26vw, 420px);

  --header-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-size: var(--s2);
  line-height: 1.85;
  overflow-wrap: anywhere;
  line-break: strict;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h2, h3, dt { word-break: auto-phrase; text-wrap: balance; }
a { color: inherit; text-underline-offset: 0.2em; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.pc-only { display: none; }

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 20;
  background: var(--ink); color: var(--on-dark); padding: 8px 14px; border-radius: 6px;
}
.skip:focus { top: 8px; }

/* ボタン。形は丸い端の1種類だけ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-size: var(--s2); font-weight: 700; line-height: 1.3; text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
/* 送信中。もう一度押せないようにして、押せたことが分かるようにする */
.btn:disabled { cursor: progress; opacity: .7; pointer-events: none; }
.btn-primary { background: var(--teal); color: var(--on-dark); }
.btn-primary:hover { background: var(--ink); }
.btn-light { background: var(--on-dark); color: var(--ink); }
.btn-light:hover { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.btn-ghost-light { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.btn-ghost-light:hover { background: var(--on-dark); color: var(--ink); }
.btn-small { min-height: 40px; padding: 0 18px; font-size: var(--s1); }

/* ヘッダー。下にある区画の色に合わせて、背景と文字の色が入れ替わる（index.html のスクリプト） */
.site-header {
  --h-bg: var(--paper); --h-fg: var(--ink);
  position: sticky; top: 0; z-index: 10;
  background: var(--h-bg); color: var(--h-fg);
  transition: background-color .3s, color .3s;
}
.site-header[data-on="surface"] { --h-bg: var(--surface); }
.site-header[data-on="ink"] { --h-bg: var(--ink); --h-fg: var(--on-dark); }
.site-header[data-on="teal"] { --h-bg: var(--teal); --h-fg: var(--on-dark); }
.site-header[data-on="ink"] .btn-primary,
.site-header[data-on="teal"] .btn-primary { background: var(--on-dark); color: var(--ink); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--header-h);
}
.logo {
  color: inherit; text-decoration: none;
  font-size: var(--s3); font-weight: 700; letter-spacing: .02em;
}
.nav { display: none; }
/* 相談するの左に寄せ、メニューは右端に置く */
.header-inner > .btn { margin-left: auto; }
.header-inner { gap: 10px; }
/* 上のバーの部品は折り返さない（拡大表示で狭くなると、Kuroa が2行になってバーからはみ出す） */
.logo, .header-inner > .btn, .menu-button { flex-shrink: 0; white-space: nowrap; }
/* とても狭い画面（拡大表示を含む）では「相談する」を隠す。お問い合わせへはメニューから行ける */
@media (max-width: 319px) { .header-inner > .btn { display: none; } }

/* 1000px 未満のメニュー（details）。開くと、上のバーのすぐ下に区画への一覧が出る */
.menu-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 14px;
  border: 2px solid currentColor; border-radius: 999px;
  font-size: var(--s1); font-weight: 700; line-height: 1; cursor: pointer;
  list-style: none; user-select: none;
}
.menu-button::-webkit-details-marker { display: none; }
.menu[open] .menu-button { background: var(--h-fg); color: var(--h-bg); border-color: var(--h-fg); }
.menu:not([open]) .menu-open, .menu[open] .menu-closed { display: none; }
/* 浮いて重なる部品なので、影で下の区画と分ける（止まっている部品には影を付けない決まりの、例外） */
.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  display: grid; padding: 8px 20px 24px;
  background: var(--h-bg); color: var(--h-fg);
  box-shadow: 0 18px 32px rgba(0, 0, 0, .22); /* 浮いているメニューなので影を付ける taste-skill-ignore */
  /* 横向きのスマホなど、高さが足りないときはパネルの中でスクロールする */
  max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain;
}
.menu-panel a {
  display: flex; align-items: center; min-height: 52px;
  font-size: var(--s3); font-weight: 700; text-decoration: none;
}
.menu-panel a:hover { text-decoration: underline; }

/* 1. 最初の画面 */
/* 1画面ぶんの高さ。上半分は白、下半分は濃い色。社名をその境目に置く */
.hero {
  position: relative; overflow: hidden;
  /* 上下を同じ高さにする（余白の違いで境目がずれないように、行で分ける） */
  display: grid; grid-template-rows: 1fr 1fr;
  min-height: max(600px, calc(100vh - var(--header-h)));
  min-height: max(600px, calc(100svh - var(--header-h)));
}
.hero-top, .hero-bottom { display: flex; }
/* 社名は境目から上下に約 0.4 文字ぶんはみ出す。その分を空けて、見出しやリード文と重ならないようにする
   （画面の縦が短いスマホでは、上下が同じ高さのまま最初の画面が伸びる） */
.hero-top { padding-top: 32px; padding-bottom: calc(var(--s5) * .45 + 24px); }
.hero-bottom {
  align-items: flex-end; padding-top: calc(var(--s5) * .45 + 24px); padding-bottom: 40px;
  background: var(--ink);
}
.hero h1 { font-weight: 700; }
.hero-title {
  display: block;
  font-size: var(--s4); line-height: 1.3; letter-spacing: -.01em;
}
/* 「沖縄のお店の」「ホームページ制作」の切れ目でだけ折り返す */
.hero-title > span { display: inline-block; }
/* 社名は境目をまたぐ。同じ文字を2つ重ね、上半分と下半分で色を変える */
.hero-brand {
  position: absolute; left: 0; right: 0; top: 50%;
  max-width: 1240px; margin: 0 auto; padding: 0 20px;
  transform: translateY(-50%);
  font-size: var(--s5); line-height: .8; letter-spacing: -.05em;
  white-space: nowrap; pointer-events: none;
}
.hero-word { display: block; color: var(--ink); clip-path: inset(-.5em -.2em 50% -.2em); }
.hero-word-under {
  position: absolute; left: 20px; top: 0;
  color: var(--on-dark); clip-path: inset(50% -.2em -.5em -.2em);
}
.hero-foot { color: var(--on-dark); }
.hero-lead { font-size: var(--s3); line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-actions .btn { flex: 1 1 140px; }

/* 区画の共通 */
/* 区画の上下の余白。区画の切れ目（上下の合計）が、区画の中のどの間隔よりも大きくなるようにする */
.section { padding: 72px 0; }
.field-ink { background: var(--ink); color: var(--on-dark); }
.field-teal { background: var(--teal); color: var(--on-dark); }
.field-surface { background: var(--surface); }
.section h2 {
  font-size: var(--s4); line-height: 1.25; letter-spacing: -.01em;
  color: var(--ink-soft); margin-bottom: 48px;
}
.field-ink h2 { color: var(--on-dark-soft); }
.field-teal h2 { color: var(--on-teal-soft); }
.section h3 { font-size: var(--s3); line-height: 1.5; }
.sub, .note { color: var(--ink-soft); }
.field-ink .sub { color: var(--on-dark-soft); }
.field-teal .sub, .field-teal .note { color: var(--on-teal-soft); }
.plain li { position: relative; padding-left: 1.2em; }
.plain li::before { content: "・"; position: absolute; left: 0; }

/* 2. 作るもの */
/* 見本だと分かるように、見出しのすぐ下に断りを置く */
.section h2:has(+ .makes-note) { margin-bottom: 20px; }
.makes-note { margin-bottom: 48px; color: var(--on-dark-soft); }
.makes { display: grid; gap: 72px; }
.makes > li { display: grid; gap: 28px; }
.makes h3 { font-size: var(--s4); line-height: 1.25; letter-spacing: -.01em; }
.makes-text { margin-top: 16px; }
.makes-text .sub { margin-top: 6px; }
/* 見本の画面。スマホの枠（ふちを塗った角丸）に入れる。枠は画面の一部なので data-ui を付けてある */
/* min-width: 0 で、とても狭い画面（拡大表示を含む）でも枠ごと縮める（240px の枠のまま横にはみ出さない） */
.sample { margin: 0; min-width: 0; }
.phone {
  width: 240px; max-width: 100%;
  padding: 7px; border-radius: 34px;
  background: var(--bezel);
}
.phone img { display: block; width: 100%; height: auto; border-radius: 27px; }
/* 説明は画面の上に置く（下に置くと、スマホで次の項目の見出しの上に来て、そちらの説明に見える） */
.sample figcaption { margin-bottom: 12px; font-size: var(--s1); color: var(--on-dark-soft); }
/* ③は2枚並び。スマホでは幅いっぱいに2枚 */
.phones { display: flex; gap: 16px; }
.sample-pair .phone { width: calc((100% - 16px) / 2); max-width: 220px; }

/* 3. 料金 */
.price-box { display: grid; gap: 56px; }
.price-amount { font-size: var(--s4); font-weight: 700; line-height: 1; }
.price-num { font-size: var(--s5); line-height: .8; letter-spacing: -.04em; margin-right: .04em; }
.price-tax { font-size: var(--s2); font-weight: 400; }
.price-reason { margin-top: 32px; font-size: var(--s3); font-weight: 700; line-height: 1.6; }
.price-main .note { margin-top: 12px; }
.price-detail h3 { margin-bottom: 12px; }
.price-detail h3:not(:first-child) { margin-top: 40px; }
/* 1行おきに少し濃くして、表のように読ませる */
.includes li { padding: 14px 16px; }
.includes li:nth-child(odd) { background: var(--teal-deep); }
.includes .sub { display: block; }

/* 4. ご依頼の流れ。1段ごとに右へずらす */
.steps { display: grid; gap: 36px; }
.steps li { padding-left: calc(var(--i, 0) * 4vw); }
.steps li:nth-child(2) { --i: 1; }
.steps li:nth-child(3) { --i: 2; }
.steps li:nth-child(4) { --i: 3; }
.steps li:nth-child(5) { --i: 4; }
.steps li:nth-child(6) { --i: 5; }
.steps h3 { font-size: var(--s4); line-height: 1.25; letter-spacing: -.01em; }
.steps p { margin-top: 6px; }
.steps a { color: var(--teal); }
.period { margin-top: 64px; font-size: var(--s4); font-weight: 700; line-height: 1.3; }
.period strong { color: var(--teal); }

/* 5. よくある質問 */
.faq { display: grid; gap: 56px; }
.faq dt { font-size: var(--s3); font-weight: 700; line-height: 1.5; }
.faq dd { margin-top: 14px; max-width: 40em; }
.faq dd p + p, .faq dd p + ul { margin-top: 10px; }

/* 6. 運営者。1行ずつの帯。1行おきに色を少し変える */
/* 項目名と値は横に並べる（項目名を値の上に置くと、見出しの上の小さなラベルに見える） */
.operator > div {
  display: grid; grid-template-columns: 4.5em 1fr; gap: 12px; align-items: baseline;
  padding: 20px 16px;
}
.operator > div:nth-child(odd) { background: var(--surface); }
.operator dt { font-size: var(--s1); font-weight: 700; color: var(--ink-soft); }
.operator dd { font-size: var(--s4); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.operator a { color: var(--teal); }

/* 7. お問い合わせ */
.contact-lead { font-size: var(--s3); line-height: 1.7; }
.contact-head { margin-bottom: 40px; }
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 700; }
.req, .opt {
  display: inline-block; margin-left: 10px; padding: 1px 8px; border-radius: 4px;
  font-size: var(--s1); font-weight: 700; line-height: 1.5; vertical-align: 1px;
}
/* 白い文字が読めるように、白との差を 4.5:1 以上にする（#d9482b は 4.28:1 で足りなかった） */
.req { background: #c94025; color: #fff; }
.opt { background: #4a4c50; color: var(--on-dark); }
.field input, .field textarea {
  width: 100%; padding: 14px;
  background: var(--paper); color: var(--ink);
  border: 2px solid transparent; border-radius: 8px;
  font: inherit; font-size: var(--s2); line-height: 1.6;
}
.field textarea { resize: vertical; min-height: 160px; }
/* 暗い地の上では、フォーカスの枠を明るい青緑にする。上のバーも、下の区画に合わせて暗くなる（青緑のバーでは、ふつうの枠が見えない） */
.field-ink :focus-visible, .field-teal :focus-visible, .hero-foot :focus-visible, .site-footer :focus-visible,
.site-header[data-on="ink"] :focus-visible, .site-header[data-on="teal"] :focus-visible { outline-color: #7fd0d4; }
.form-note { color: var(--on-dark-soft); font-size: var(--s1); }
.form .btn { width: 100%; }
/* 人には見せない欄。display:none だと読み飛ばす自動送信があるので、画面の外に出す */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* 線ではない（人に見せない欄を画面の外に出す） taste-skill-ignore */

/* フッター。お問い合わせと同じ色のまま、社名を幅いっぱいに */
.site-footer {
  background: var(--ink); color: var(--on-dark-soft);
  padding: 24px 0 40px; font-size: var(--s1); overflow: hidden;
}
.footer-logo {
  color: var(--on-dark); font-size: var(--s5); font-weight: 700;
  line-height: .8; letter-spacing: -.045em; white-space: nowrap;
}
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; margin-top: 32px; }

/* 送信結果のページ（contact.php が出す） */
.result { padding: 72px 0 96px; }
.result h1 { font-size: var(--s4); line-height: 1.4; margin-bottom: 24px; }
.result p + p { margin-top: 10px; }
.result ul { margin: 16px 0; }
.result .btn { margin-top: 32px; }
.wrap-narrow { max-width: 744px; }

/* 現れる動き。スクリプトが .reveal を付けたものだけ。付かなければ最初から見えている */
.reveal { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.reveal:not(.is-in) { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header, .btn { transition: none; }
  .reveal:not(.is-in) { opacity: 1; transform: none; }
}

/* 印刷では、まだスクロールしていない区画の中身も出す（透明のまま紙に出て、白いページになる） */
@media print {
  .reveal { transition: none; }
  .reveal:not(.is-in) { opacity: 1; transform: none; }
  .menu { display: none; } /* 紙ではメニューを開けない */
}

/* タブレット以上 */
@media (min-width: 700px) {
  .wrap { padding: 0 32px; }
  .pc-only { display: inline; }
  .hero-brand { padding: 0 32px; }
  .hero-word-under { left: 32px; }
  .hero-top { padding-top: 48px; }
  .hero-bottom { padding-bottom: 56px; }
  .hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
  .hero-actions { flex-wrap: nowrap; margin-top: 0; }
  .hero-actions .btn { flex: 0 0 auto; min-width: 150px; }
  .section { padding: 96px 0; }
  .section h2 { margin-bottom: 64px; }

  /* 12列の格子。見出しと説明を左右に分ける */
  .makes > li, .price-box, .faq-layout, .contact-layout {
    display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px;
  }
  /* 作るもの：見出しと説明を左に、見本の画面を右に。画面の縦の真ん中に、説明をそろえる */
  .makes-note { margin-bottom: 64px; }
  .makes { gap: 96px; }
  .makes > li { align-items: center; }
  .makes-body { grid-column: 1 / 8; }
  .makes-text { margin-top: 20px; }
  .sample { grid-column: 9 / 13; justify-self: end; }
  /* ③は2枚並びなので、見本の列を広く取る（文と見本の列が重なると、見本が次の行に落ちる） */
  .makes-pair .makes-body { grid-column: 1 / 7; }
  .sample-pair { grid-column: 7 / 13; justify-self: stretch; }
  .sample-pair figcaption, .sample-pair .phones { max-width: 456px; margin-left: auto; }

  .price-main { grid-column: 1 / 8; }
  .price-detail { grid-column: 8 / 13; padding-top: 24px; }

  .steps { gap: 40px; }
  .steps li { padding-left: calc(var(--i, 0) * 7%); }
  .period { padding-left: 35%; }

  .faq-layout { align-items: start; }
  .faq-layout h2 { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + 32px); }
  .faq { grid-column: 5 / 13; gap: 64px; }

  .operator > div { grid-template-columns: 8em 1fr; gap: 24px; padding: 28px 24px; }

  .contact-head { grid-column: 1 / 6; margin-bottom: 0; }
  .form { grid-column: 7 / 13; }
  .form .btn { width: auto; min-width: 240px; justify-self: start; }

  .site-footer { padding-top: 40px; }
}

/* PC */
@media (min-width: 1000px) {
  :root { --header-h: 68px; }
  .nav { display: flex; gap: 28px; margin-left: auto; }
  .header-inner { gap: 16px; }
  .header-inner > .btn { margin-left: 0; }
  .menu { display: none; }
  .nav a { color: inherit; text-decoration: none; font-weight: 700; }
  .nav a:hover { text-decoration: underline; }
  .section { padding: 112px 0; }
  .phone { width: 300px; }
  /* 見本の右端は、ページの右端にそろえる */
  .sample { grid-column: 8 / 13; }
  .makes-pair .makes-body { grid-column: 1 / 6; }
  .sample-pair { grid-column: 6 / 13; }
  .sample-pair .phone { max-width: 300px; }
  .sample-pair figcaption, .sample-pair .phones { max-width: 616px; }
}