/* =============================================================
   下層ページ用の追加スタイル（施工事例 一覧・詳細、会社紹介、お問い合わせ、プライバシーポリシーなどの固定ページ）
   既存デザイン（style.css）の色・文字・余白に合わせ、TOPページには読み込まない
   ============================================================= */

/* ---------- 共通：固定ヘッダーの下から始める ---------- */
.page-main--works{ padding:0; min-height:0; }
.works-archive,
.work-detail{ padding-top:calc(var(--header-h) + 28px); }

/* ---------- パンくずリスト ---------- */
.breadcrumb{ margin-bottom:28px; font-size:12px; color:var(--c-gray); line-height:1.6; }
.breadcrumb__list{ display:flex; flex-wrap:wrap; }
.breadcrumb__item + .breadcrumb__item::before{ content:"›"; margin:0 8px; }
.breadcrumb a{ text-decoration:underline; text-underline-offset:3px; }
.breadcrumb a:hover{ color:var(--c-black); }

/* ---------- 施工事例一覧：ページ番号（JavaScript が無効な場合） ---------- */
.works-pagination{ margin-top:48px; }
.works-pagination ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.works-pagination li > .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 12px;
  font-family:var(--font-en); font-size:15px; letter-spacing:.04em;
  border:1px solid var(--c-line);
  transition:background-color .25s, color .25s, border-color .25s;
}
.works-pagination a.page-numbers:hover{ background:var(--c-black); color:#fff; border-color:var(--c-black); }
.works-pagination li > .current{ background:var(--c-black); color:#fff; border-color:var(--c-black); }
.works-pagination li > .dots{ border-color:transparent; min-width:24px; padding:0; }
.works-pagination .prev,
.works-pagination .next{ font-family:var(--font-jp); font-size:13px; font-weight:700; }

/* =============================================================
   施工事例 詳細
   ============================================================= */
.work-detail__inner{ max-width:calc(960px + var(--pad) * 2); }
.work-detail__header{ margin-bottom:24px; }
.work-detail__title{ font-size:24px; }
.work-detail__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.work-detail__tags .work-card__cat{ margin-bottom:0; }
.work-detail__term{
  display:inline-block; padding:3px 10px;
  font-size:11px; font-weight:700; letter-spacing:.08em;
  border:1px solid var(--c-line);
}
.work-detail__term:hover{ border-color:var(--c-black); }

/* 所在地・施工時期 */
.work-detail__meta{ margin-top:28px; border-top:1px solid var(--c-line); }
.work-detail__meta-row{ display:flex; gap:16px; padding:12px 0; border-bottom:1px solid var(--c-line); }
.work-detail__meta-row dt{ flex:0 0 5.5em; font-size:13px; font-weight:700; color:var(--c-gray); letter-spacing:.08em; }
.work-detail__meta-row dd{ font-size:15px; }

/* 説明 */
.work-detail__body{ margin-top:32px; max-width:46em; }
.work-detail__body p + p{ margin-top:1em; }

/* 前後の施工事例 */
.work-pager{ display:grid; margin-top:56px; border-top:1px solid var(--c-line); }
.work-pager__link{
  display:flex; flex-direction:column; gap:4px;
  padding:18px 4px; border-bottom:1px solid var(--c-line);
  transition:background-color .25s;
}
.work-pager__link:hover{ background:var(--c-bg-alt); }
.work-pager__link--older{ text-align:right; }
.work-pager__dir{ font-size:12px; font-weight:700; color:var(--c-gray); letter-spacing:.08em; }
.work-pager__title{ font-size:15px; font-weight:700; }

.work-detail__back{ margin-top:40px; text-align:center; }

/* ---------- 写真（メイン写真＋サムネイル） ---------- */
.work-gallery__main{ position:relative; }
.work-gallery__track{
  display:flex;
  width:100%;                   /* max-height で高さが抑えられても幅は保つ */
  aspect-ratio:1 / 1;          /* スマホ：縦長・横長どちらの写真も大きく見えるよう正方形 */
  max-height:78vh;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  background:var(--c-bg-alt);
}
.work-gallery__track::-webkit-scrollbar{ display:none; }
.work-gallery__track:focus-visible{ outline:2px solid var(--c-black); outline-offset:2px; }
.work-gallery__slide{ flex:0 0 100%; height:100%; scroll-snap-align:start; scroll-snap-stop:always; }
.work-gallery__zoom{ display:block; width:100%; height:100%; cursor:zoom-in; }
/* 写真は切り抜かずに全体を表示 */
.work-gallery__zoom img{ width:100%; height:100%; object-fit:contain; }

.work-gallery__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; line-height:1; color:var(--c-black);
  background:rgba(255,255,255,.88); border:none; border-radius:50%;
  box-shadow:0 1px 6px rgba(0,0,0,.18);
  cursor:pointer; transition:opacity .25s;
  -webkit-tap-highlight-color:transparent;
}
.work-gallery__nav span{ margin-top:-4px; }
.work-gallery__nav--prev{ left:8px; }
.work-gallery__nav--next{ right:8px; }
.work-gallery__nav:disabled{ opacity:0; pointer-events:none; }

.work-gallery__count,
.work-gallery__hint{
  position:absolute; bottom:10px;
  padding:2px 10px; border-radius:999px;
  font-size:12px; line-height:1.8; letter-spacing:.06em;
  color:#fff; background:rgba(17,17,17,.68);
  pointer-events:none;
}
.work-gallery__count{ right:10px; font-family:var(--font-en); }
.work-gallery__hint{ left:10px; }

/* サムネイル：スマホは横スクロール、PCは折り返し */
.work-gallery__thumbs{
  display:flex; gap:8px; margin-top:6px; padding:4px; /* 選択中の枠が切れないよう余白 */
  overflow-x:auto; scrollbar-width:thin;
}
.work-gallery__thumbs li{ flex:0 0 auto; }
.work-gallery__thumb{ display:block; width:64px; height:64px; opacity:.55; transition:opacity .2s; }
.work-gallery__thumb img{ width:100%; height:100%; object-fit:cover; }
.work-gallery__thumb:hover{ opacity:.85; }
.work-gallery__thumb[aria-current="true"]{ opacity:1; outline:2px solid var(--c-black); outline-offset:2px; }

/* ---------- 拡大表示 ---------- */
html.is-lightbox-open{ overflow:hidden; }
.work-lightbox{
  width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:0; border:none;
  background:#000; color:#fff;
}
.work-lightbox::backdrop{ background:#000; }
.work-lightbox__track{
  display:flex; height:100%;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.work-lightbox__track::-webkit-scrollbar{ display:none; }
.work-lightbox__track:focus{ outline:none; }
.work-lightbox__slide{
  flex:0 0 100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align:start; scroll-snap-stop:always;
}
.work-lightbox__slide img{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.work-lightbox__close,
.work-lightbox__nav{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  color:#fff; background:rgba(0,0,0,.45); border:none; border-radius:50%;
  font-size:30px; line-height:1; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.work-lightbox__close{ top:12px; right:12px; font-size:28px; }
.work-lightbox__nav{ top:50%; transform:translateY(-50%); }
.work-lightbox__nav span{ margin-top:-4px; }
.work-lightbox__nav--prev{ left:8px; }
.work-lightbox__nav--next{ right:8px; }
.work-lightbox__nav:disabled{ opacity:0; pointer-events:none; }
.work-lightbox__count{
  position:absolute; top:22px; left:16px;
  font-family:var(--font-en); font-size:14px; letter-spacing:.08em; color:rgba(255,255,255,.8);
}

/* マウス操作の端末では「タップで拡大」の表示は不要（カーソルで分かるため） */
@media (hover:hover) and (pointer:fine){
  .work-gallery__hint{ display:none; }
}

/* =============================================================
   会社紹介 /about/（各セクションはTOPと同じ。ここではページ見出しとアクセスのみ）
   ============================================================= */
.page-main--about{ padding:0; min-height:0; }
.about-page{ padding-top:calc(var(--header-h) + 28px); }
.about-page__header{ margin-bottom:40px; padding-bottom:28px; border-bottom:1px solid var(--c-line); }

/* アクセス（会社概要の表の下） */
.company-access{ margin-top:40px; }
.company-access__title{ font-size:18px; margin-bottom:10px; }
.company-access__address{ margin-bottom:14px; }

/* =============================================================
   お問い合わせ /contact/
   ============================================================= */
.page-main--contact{ padding:0; min-height:0; }
.contact-page{ padding-top:calc(var(--header-h) + 28px); }
.contact-page__inner{ max-width:calc(720px + var(--pad) * 2); }
.contact-page__header{ margin-bottom:24px; }
.contact-page__lead{ font-size:14px; line-height:1.9; }

/* お電話の案内 */
.contact-page__tel{
  margin:24px 0 36px; padding:16px 18px;
  text-align:center; background:var(--c-bg-alt);
}
.contact-page__tel-label{ font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--c-gray); }
.contact-page__tel-number{
  display:inline-block; margin:2px 0;
  font-family:var(--font-en); font-size:28px; font-weight:500; letter-spacing:.04em; line-height:1.4;
}
.contact-page__tel-hours{ font-size:12px; color:var(--c-gray); letter-spacing:.06em; }

/* ---------- フォーム ---------- */
/* 送信完了・案内へ移動したとき、固定ヘッダーに隠れないように */
.cf,
.cf-done,
.cf-alert{ scroll-margin-top:calc(var(--header-h) + 16px); }

.cf-alert{
  margin-bottom:24px; padding:14px 16px;
  font-size:14px; font-weight:700; line-height:1.8; white-space:pre-line;
  color:#b3261e; background:#fdf1f0; border-left:4px solid #b3261e;
}
.cf-alert:focus{ outline:none; }
.cf-intro{ margin-bottom:20px; font-size:13px; color:var(--c-gray); }

.cf-field{ margin-bottom:26px; }
.cf-label{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:15px; font-weight:700; letter-spacing:.04em; }
.cf-badge{
  display:inline-block; padding:1px 7px;
  font-size:11px; font-weight:700; line-height:1.7; letter-spacing:.06em;
  color:#fff; background:var(--c-black);
}
.cf-badge--optional{ color:var(--c-gray); background:transparent; border:1px solid var(--c-line); }
.cf-intro .cf-badge{ margin-right:4px; }

/* 16px 未満だと iPhone で入力時に画面が拡大されるため 16px */
.cf-input{
  display:block; width:100%; min-height:50px; padding:12px 14px;
  font:inherit; font-size:16px; line-height:1.6; color:var(--c-black);
  background:#fff; border:1px solid #c9c9c6; border-radius:0;
  -webkit-appearance:none; appearance:none;
  transition:border-color .2s, box-shadow .2s;
}
.cf-input:focus{ outline:none; border-color:var(--c-black); box-shadow:0 0 0 1px var(--c-black); }
.cf-input--short{ max-width:20em; }
.cf-input--textarea{ min-height:180px; resize:vertical; }
.cf-help{ margin-top:6px; font-size:12px; line-height:1.7; color:var(--c-gray); }
.cf-help--top{ margin:0 0 10px; }

.cf-error{ margin-bottom:6px; font-size:13px; font-weight:700; color:#b3261e; }
.cf-field.is-error .cf-input{ border-color:#b3261e; box-shadow:0 0 0 1px #b3261e; background:#fffafa; }

/* 写真 */
.cf-photos__input{ display:block; max-width:100%; font-size:14px; }
.cf-form.is-enhanced .cf-photos__input{
  /* JavaScript が有効な場合は下の「写真を選ぶ」ボタンで操作（キーボード操作のため入力欄自体は残す） */
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.cf-photos__pick{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:56px; padding:12px 16px;
  font-size:14px; font-weight:700; letter-spacing:.04em;
  background:#fff; border:1px dashed var(--c-gray);
  cursor:pointer; transition:background-color .2s;
  -webkit-tap-highlight-color:transparent;
}
.cf-photos__pick[hidden]{ display:none; }
.cf-photos__pick:hover{ background:var(--c-bg-alt); }
.cf-photos__pick svg{ width:22px; height:22px; flex:0 0 auto; }
.cf-photos__input:focus-visible + .cf-photos__pick{ outline:2px solid var(--c-black); outline-offset:2px; }
.cf-field.is-error .cf-photos__pick{ border-color:#b3261e; }

.cf-photos__list{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:10px; }
.cf-photos__item{ position:relative; aspect-ratio:1 / 1; background:var(--c-bg-alt); }
.cf-photos__item img{ width:100%; height:100%; object-fit:cover; }
.cf-photos__item--wait{ display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--c-gray); }
.cf-photos__remove{
  position:absolute; top:4px; right:4px;
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0 0 3px;
  font-size:22px; line-height:1; color:#fff;
  background:rgba(17,17,17,.75); border:none; border-radius:50%;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.cf-photos__remove:focus-visible{ outline:2px solid #fff; outline-offset:-4px; }
.cf-photos__status{ margin-top:8px; font-size:12px; color:var(--c-gray); white-space:pre-line; }

/* 迷惑送信対策の欄（人には見せない） */
.cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.cf-turnstile-box{ margin:8px 0 24px; }

/* 個人情報の取り扱い */
.cf-privacy{
  margin:8px 0 28px; padding:16px 18px;
  font-size:12px; line-height:1.8; color:var(--c-charcoal);
  border:1px solid var(--c-line);
}
.cf-privacy p + p{ margin-top:6px; }
.cf-privacy__title{ font-size:13px; font-weight:700; }
.cf-privacy__link{ text-decoration:underline; text-underline-offset:3px; }

/* 送信ボタン */
.cf-submit{ text-align:center; }
.cf-submit__btn{ width:100%; max-width:360px; cursor:pointer; font-family:inherit; }
.cf-submit__btn .btn__main{ font-family:var(--font-jp); font-size:17px; font-weight:700; letter-spacing:.12em; }
.cf-submit__btn:disabled,
.cf-submit__btn.is-loading{ opacity:.6; cursor:wait; }
.cf-submit__status{ margin-top:12px; font-size:13px; color:var(--c-gray); }

/* 送信完了 */
.cf-done{
  padding:32px 20px; text-align:center;
  background:var(--c-bg-alt); border-top:3px solid var(--c-black);
}
.cf-done:focus{ outline:none; }
.cf-done__title{ margin-bottom:12px; font-size:20px; font-weight:700; letter-spacing:.06em; }
.cf-done p + p{ margin-top:10px; }
.cf-done__note{ font-size:13px; color:var(--c-gray); }
.cf-done__note a{ text-decoration:underline; text-underline-offset:3px; }
.cf-done .btn{ margin-top:24px; }

/* =============================================================
   一般の固定ページ（page.php。プライバシーポリシーなど）
   ============================================================= */
.page-main--basic{ padding:0; min-height:0; }
.basic-page{ padding-top:calc(var(--header-h) + 28px); }
.basic-page__inner{ max-width:calc(760px + var(--pad) * 2); }
.basic-page__header{ margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--c-line); }

/* 本文（管理画面で入力した見出し・段落・箇条書き） */
.page-body{ font-size:14px; line-height:1.95; }
.page-body > * + *{ margin-top:1em; }
.page-body h2{
  margin-top:2.4em; padding-left:12px;
  font-size:17px; line-height:1.5; letter-spacing:.04em;
  border-left:3px solid var(--c-black);
}
.page-body h2 + *{ margin-top:.8em; }
.page-body h3{ margin-top:1.8em; font-size:15px; }
.page-body ol,
.page-body ul{ padding-left:1.6em; }
.page-body ol{ list-style:decimal; }
.page-body ul{ list-style:disc; }
.page-body li + li{ margin-top:.4em; }
.page-body a{ text-decoration:underline; text-underline-offset:3px; }
.page-body a:hover{ opacity:.7; }
.page-body .policy-date{ margin-top:2.4em; text-align:right; color:var(--c-gray); font-size:13px; }

/* =============================================================
   タブレット  768px 〜
   ============================================================= */
@media (min-width:768px){
  .works-archive,
  .work-detail,
  .about-page,
  .contact-page,
  .basic-page{ padding-top:calc(var(--header-h) + 40px); }
  .page-body{ font-size:15px; }
  .page-body h2{ font-size:19px; }
  .contact-page__header{ margin-bottom:32px; }
  .contact-page__lead{ font-size:15px; }
  .contact-page__tel{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 18px; padding:18px 24px; }
  .cf-photos__list{ grid-template-columns:repeat(5, 1fr); }
  .cf-photos__pick{ width:auto; min-width:320px; }
  .about-page__header{ margin-bottom:56px; }
  .work-detail__title{ font-size:30px; }
  .work-detail__body{ margin-top:40px; }

  .work-gallery__track{ aspect-ratio:4 / 3; }
  .work-gallery__nav{ width:48px; height:48px; }
  .work-gallery__nav--prev{ left:16px; }
  .work-gallery__nav--next{ right:16px; }
  .work-gallery__thumbs{ flex-wrap:wrap; overflow:visible; margin-top:14px; gap:10px; }
  .work-gallery__thumb{ width:84px; height:84px; }

  .work-pager{ grid-template-columns:1fr 1fr; }
  .work-pager__link{ padding:22px 16px; }
  .work-pager__link--older{ grid-column:2; }

  .work-lightbox__nav--prev{ left:20px; }
  .work-lightbox__nav--next{ right:20px; }
}