@charset "utf-8";
/*
 * tsukuribito.org 本番用（2026-10-24。試作 v3 の site_v3.css をそのまま移したもの。整理は公開後）
 * 読み込み: 全ページで /assets/site.css?v=YYYYMMDD。中身を変えたら ?v= の日付を上げる
 * 方針: 現サイト（common.css・top.css）の色・部品を踏襲し、写真のスライドの代わりに
 *       「業務名 ⋯ 約束」を点線でつなぐ文字だけのヒーローにする
 * 色: 現サイトの「カラールール」（黒・黄・水色）＋ 白・灰の枠線だけ。新しい色は足さない
 */

/* ---------- 1. トークン -------------------------------------- */
:root {
  --yellow: #FFB900;   /* 帯・枠・ボタン・見出しの飾り・点線 */
  --cyan:   #0099CC;   /* お問い合わせボタン（白文字 3.27。文字を大きい太字にして大文字の基準 3.0 を満たす） */
  --black:  #000000;   /* 文字・コピーライトの帯 */
  --white:  #FFFFFF;   /* 地 */
  --gray:   #999999;   /* 「つくりびととは？」の太枠（現サイト #aboutus div） */
  --gray-l: #CCCCCC;   /* あいさつの枠（現サイト） */

  /* 「見やすい・わかりやすい」を約束する会社なので、読みやすさを設計した UD 書体を先頭に置く */
  --font: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Noto Sans JP", "Noto Sans CJK JP", Meiryo, sans-serif;

  --wrap: 1040px;
  --gutter: 20px;
  --radius: 5px;       /* 現サイトのボタン・カードと同じ */
  --tap: 44px;
}

/* ---------- 2. リセット -------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--black);
  font-family: var(--font); font-size: 16px; line-height: 1.8;
  overflow-wrap: anywhere; line-break: strict;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--black); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--black); outline-offset: 2px; }
.site-footer__bar :focus-visible { outline-color: var(--white); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link {
  position: absolute; left: 8px; top: 8px; z-index: 10;
  padding: .5rem 1rem; background: var(--white); border: 2px solid var(--black);
  font-weight: 700; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.bullets > li { position: relative; padding-left: 1.1em; }
.bullets > li::before { content: "・"; position: absolute; left: 0; }

/* ---------- 3. ヘッダー（白＋黄の帯。現サイトの .navbar） ------- */
.site-header__brand { display: flex; align-items: center; min-height: 64px; }
.site-header__brand a { display: inline-flex; }
.gnav { background: var(--yellow); }
.gnav ul { display: flex; flex-wrap: wrap; }
.gnav a {
  display: flex; align-items: center; min-height: var(--tap); padding-inline: .6em;   /* 360px 幅でも3項目が1行に収まる */
  font-size: .9375rem; font-weight: 700; text-decoration: none;
}
.gnav li:first-child a { margin-left: -.6em; }
.gnav a:hover { background: var(--black); color: var(--white); }   /* 現サイトのホバー */

/* ---------- 4. ヒーロー（業務名 ⋯ 約束） ---------------------- */
.hero { padding-block: 2.5rem 3rem; }
.hero__title {
  font-size: clamp(1.625rem, 7vw, 2rem); font-weight: 700; line-height: 1.4; letter-spacing: .02em;
}
.hero__title span { display: block; }
.hero__promise { margin-top: 1.5rem; display: grid; gap: .625rem; }
.hero__promise li {
  border: 2px solid var(--yellow); border-radius: var(--radius);
  padding: .625rem 1rem; font-size: 1.0625rem; font-weight: 700;
}
.hero__cta { margin-top: 1.75rem; }

/* ---------- 5. ボタン（現サイトの .btn_01） --------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: min(100%, 18em); padding: .75rem 1.5rem;
  background: var(--cyan); color: var(--white); border-radius: var(--radius);
  font-size: 1.2rem; font-weight: 700; text-decoration: none;   /* 19.2px の太字＝大きい文字 */
}
.btn:hover { background: var(--yellow); color: var(--black); }

/* ---------- 6. 節と見出し ------------------------------------ */
.section { padding-block: 2.5rem; }
.section__title {
  position: relative; padding-left: 2.25rem; margin-bottom: 1.25rem;
  font-size: clamp(1.375rem, 5vw, 1.625rem); font-weight: 700; line-height: 1.4;
}
.section__title::before, .section__title::after {   /* 現サイトの見出しの飾り（大小2つの黄の四角） */
  content: ""; position: absolute; background: var(--yellow); transform: rotate(30deg);
}
.section__title::before { left: 0; top: .5em; width: 18px; height: 18px; }
.section__title::after  { left: 15px; top: .05em; width: 10px; height: 10px; }

/* 業務内容（現サイトのカード。枠は黄） */
.services { display: grid; gap: 1rem; }
.service {
  display: flex; flex-direction: column;
  border: 2px solid var(--yellow); border-radius: var(--radius); padding: 1.25rem;
}
.service h3 { font-size: 1.1875rem; font-weight: 700; line-height: 1.5; text-align: center; }
.service .bullets { margin: .75rem 0 1rem; }
.service__more {                                     /* 現サイトの「詳細はこちら」 */
  margin-top: auto; display: flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: .25rem .75rem; border-radius: var(--radius);
  background: var(--yellow); font-size: .9375rem; font-weight: 700; text-decoration: none; text-align: center;
}
.service__more:hover { background: var(--cyan); color: var(--white); }   /* 現サイトのホバー */

/* つくりびととは？（現サイト: 灰の太枠＋あいさつの細枠） */
.concept { border: 5px solid var(--gray); padding: 1.25rem 1.5rem; font-size: 1.125rem; font-weight: 700; }
.concept p { margin-top: .5rem; }
.greeting {
  margin-top: 1.5rem; border: 1px solid var(--gray-l); padding: 1.5rem;
  display: grid; gap: 1.25rem;
}
.greeting__text p + p, .greeting__text p + ul, .greeting__text ul + p { margin-top: 1rem; }
.greeting__photo { width: 160px; }
.greeting__photo img { aspect-ratio: 2 / 3; object-fit: cover; }
.greeting__photo figcaption { margin-top: .375rem; font-size: .875rem; font-weight: 700; }

/* ---------- 7. フッター（現サイト: 黄の点線＋白＋黒の帯） ------- */
.site-footer { margin-top: 1rem; border-top: 10px dotted var(--yellow); }
.site-footer__main { padding-block: 1.5rem; display: grid; gap: .75rem; }
.site-footer__brand { display: inline-flex; }
.site-footer__desc { font-size: .875rem; font-weight: 700; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.footer-nav a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: .875rem; }
.site-footer__bar { background: var(--black); color: var(--white); text-align: center; padding: .5rem var(--gutter); font-size: .8125rem; }

/* ---------- 8. 幅の広い画面 ---------------------------------- */
@media (min-width: 600px) {
  :root { --gutter: 24px; }
  .greeting { grid-template-columns: 1fr 160px; align-items: start; }   /* 写真は右（現サイトと同じ） */
  .gnav a { padding-inline: 1em; }
  .gnav li:first-child a { margin-left: -1em; }
}
@media (min-width: 900px) {
  .section { padding-block: 3.5rem; }
  .services { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .concept { display: grid; grid-template-columns: 1fr 1fr; align-items: center; font-size: 1.25rem; }
  .concept p { margin-top: 0; }

  /* ヒーロー: 左の業務名と右の約束を同じ行にそろえ、黄の点線でつなぐ */
  .hero { padding-block: 4rem 4.5rem; }
  .hero__grid {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: repeat(3, auto) auto; column-gap: 0; row-gap: .875rem;
  }
  .hero__title, .hero__promise { grid-row: 1 / 4; display: grid; grid-template-rows: subgrid; }
  .hero__title { grid-column: 1; font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
  .hero__promise { grid-column: 2; margin-top: 0; }
  .hero__title span { display: flex; align-items: center; gap: 1rem; padding-right: 1rem; }
  .hero__title span::after {                       /* 業務名と約束をつなぐ点線（フッターの点線と同じ形） */
    content: ""; flex: 1; min-width: 3rem; border-bottom: 6px dotted var(--yellow);
  }
  .hero__promise li { display: flex; align-items: center; font-size: 1.1875rem; padding-block: .75rem; }
  .hero__cta { grid-column: 1 / -1; margin-top: 1.25rem; }

  .site-footer__main { grid-template-columns: auto 1fr; align-items: center; column-gap: 1.5rem; }
  .footer-nav { grid-column: 1 / -1; }
}

/* ---------- 9. 下層ページ ------------------------------------ */
.page-title { font-size: clamp(1.625rem, 6vw, 2rem); }
.page-title, .btn, .btn-sub { word-break: keep-all; }   /* 折り返しは <wbr> の位置（語の切れ目）だけにする */
.prose { max-width: 42em; }                          /* 1行が長くなりすぎないようにする */
.prose p + p { margin-top: 1rem; }

/* 業務内容: ページ内メニュー（現サイトの .works_menu）と黒帯の見出し（現サイトの .works_example h2） */
.page-nav ul { display: grid; gap: .625rem; }
.page-nav a {
  display: flex; align-items: center; justify-content: center; min-height: var(--tap);
  padding: .5rem 1rem; border: 2px solid var(--cyan); border-radius: 10px;
  font-weight: 700; text-decoration: none;
}
.page-nav a:hover { background: var(--cyan); color: var(--white); }
.work { padding-block: 1.25rem 2.5rem; }
.band {
  margin-bottom: 1.25rem; padding: .375rem 1rem;
  background: var(--black); color: var(--white);
  font-size: clamp(1.25rem, 4.5vw, 1.4rem); font-weight: 700; line-height: 1.5;
}
.lead { font-size: 1.1875rem; font-weight: 700; line-height: 1.6; }
.lead + p { margin-top: .5rem; }
.work .bullets { margin-top: 1rem; }

/* 黄の地・黒文字のボタン（現サイトの「詳細はこちら」と同じ扱い） */
.btn-sub {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: .5rem 1.25rem; border-radius: var(--radius);
  background: var(--yellow); font-weight: 700; text-decoration: none; text-align: center;
}
.btn-sub:hover { background: var(--cyan); color: var(--white); }
.work .btn-sub { margin-top: 1.5rem; }
.actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* お問い合わせフォーム */
.form { margin-top: 2rem; max-width: 40rem; display: grid; gap: 1.5rem; }
.field label { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.req { padding: 0 .4em; border: 1px solid var(--black); border-radius: 3px; font-size: .75rem; line-height: 1.6; }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-height: var(--tap); margin-top: .375rem; padding: .5rem .75rem;
  border: 1px solid var(--black); border-radius: var(--radius);   /* 入力欄の枠は黒（灰 #999 は白地で 2.85 で、枠の基準 3.0 に届かない） */
  background: var(--white); color: var(--black); font: inherit;
}
.field textarea { min-height: 10em; resize: vertical; }
.field--error input, .field--error select, .field--error textarea { border-width: 3px; }
.field__error { margin-top: .375rem; font-weight: 700; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* ハニーポット（人には見えない） */
button.btn { border: 0; font-family: inherit; cursor: pointer; justify-self: start; }

/* 送信エラーの要約（色だけに頼らず、見出しと文で伝える） */
.error-summary { margin-top: 1.5rem; max-width: 40rem; padding: 1rem 1.25rem; background: var(--yellow); border: 2px solid var(--black); border-radius: var(--radius); }
.error-summary h2 { font-size: 1.125rem; font-weight: 700; }
.error-summary ul { margin-top: .5rem; }
.error-summary a { font-weight: 700; }
.error-summary p { margin-top: .5rem; }                       /* 要約の案内文（送信失敗・期限切れのとき） */
.form__status:empty { margin-top: -1.5rem; }                   /* 送信中の表示欄（aria-live）は、空の間は余白を取らない。読み上げのため display:none にはしない */

@media (min-width: 600px) {
  .page-nav ul { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 10. 印刷 ----------------------------------------- */
@media print {
  .skip-link, .gnav { display: none; }
  .site-footer__bar { background: none; color: var(--black); }
}

/* ---------- 11. v3: 現サイトの画像（2026-10-24） --------------- */
/* 写真は現サイトと同じ組み合わせで置く。飾りの写真は alt を空にし、内容のある画像だけ説明を付ける */
.hero__promise li { display: flex; align-items: center; gap: 1rem; padding: .5rem 1rem .5rem .5rem; }
.hero__promise img {                                  /* 現サイトのスライドの写真（約束と同じ組み合わせ） */
  flex: none; width: 96px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px;
}

.service__img { margin-top: auto; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.service .service__more { margin-top: 1rem; }

.page-head__img { margin-top: 1.5rem; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }

.work__body { display: grid; gap: 1.5rem; }
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-content: start; }
.figures img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--gray-l); }   /* 現サイトの .photo の枠 */
.figures figcaption { margin-top: .375rem; font-size: .9375rem; line-height: 1.6; }

@media (min-width: 900px) {
  .hero__promise li { padding-block: .5rem; }
  .hero__promise img { width: 120px; }
  .page-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
  .page-head__img { margin-top: 0; }
  .page-head .page-nav ul { grid-template-columns: 1fr; max-width: 22rem; }   /* 左の列が狭いので、メニューは縦に並べる */
  .work__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
}
/* 業務内容のページ内メニューが4項目になったため、600px 以上は 2×2 にする（現サイトと同じ並び） */
@media (min-width: 600px) {
  .page-nav ul { grid-template-columns: repeat(2, 1fr); }
}