/* =========================================================
   株式会社スリー・ピース・サービス（three-piece-s）サイト共通 CSS
   ---------------------------------------------------------
   Figma「株式会社スリー・ピース・サービス　様」Page 1（1440 / 375）の実測値で組んでいる。
   実測の正本は docs/figma/design_tokens.md、計画は docs/site_plan_2026-09-18.md。
   元の corp 正本の style.css は docs/backup/style.css.orig。

   ★構成★
   1. フォント読み込み・トークン（corp 正本の変数名は据え置き、意味だけ差し替え）
   2. 基本・フェードアップ（演出）
   3. 共通部品 .tp-*（見出し・ボタン・写真の飾り）
   4. ヘッダー（写真の上に透過で重なる固定ヘッダー・SP はハンバーガー＋右パネル）
   5. 標準ブロックの見た目（hero_main / hero_page / concept_split / contact_form）
      → corp 正本はブロック追加時に個別 CSS を焼き込まない（default_block_css.js が空）ので、
        テーマ JSON は使わず、ここに `body .クラス` の詳細度で書く（blocks.css に勝つ）
   6. カスタムHTML（SERVICE のカード／本社・九州支店／お問い合わせの導入文）
   7. 共通フッター（地図＋「九州支店」の札・社名 2 段・ナビ・著作権・SP 下部固定）
   8. SP（768px 以下）

   ★暗い地（#393C41）のサイト。blocks.css が白地前提で持つ色はここで上書きする★
   ★corp のブロックが前提にする骨組み（position / display / opacity / visibility）は落とさない★
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@500;700;900&display=swap");

:root {
  /* ---- 本案件のトークン ---- */
  --tp-bg: #393C41;            /* 地（チャコールグレー） */
  --tp-bg-deep: #222324;       /* SERVICE の濃い帯・SP パネル */
  --tp-bg-deep-sp: #292A2C;    /* SP の濃い帯 */
  --tp-btn: #4D4D4D;           /* ボタン・下層ヒーローの英字 */
  --tp-btn-hover: #777777;
  --tp-sub: #777777;           /* 英字社名（ヘッダー）・フォームのラベル下線 */
  --tp-frame: #C7C7C7;         /* 写真の枠線 */
  --tp-card-a: #2B2D31;        /* カードのグラデーション（上） */
  --tp-card-b: #4E4E4E;        /* 同（下） */
  --tp-red: #FF0000;           /* 必須 */
  --tp-font: "Zen Kaku Gothic Antique", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;

  /* ---- corp 正本の変数（名前は据え置き・意味を本案件に差し替え） ---- */
  --bg-base: var(--tp-bg);
  --bg-paper: var(--tp-bg);
  --bg-warm: var(--tp-bg-deep);
  --bg-dark: var(--tp-bg-deep);
  --bg-dark-deep: var(--tp-bg-deep);
  --ink: #ffffff;
  --text-main: #ffffff;
  --text-sub: #ffffff;
  --text-muted: #b9bbbe;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255, 255, 255, 0.85);
  --gold: #ffffff;
  --gold-light: #ffffff;
  --gold-ink: #ffffff;
  --vermilion: var(--tp-red);
  --fc-btn-bg: var(--tp-btn);
  --fc-btn-fg: #ffffff;
  --fc-btn-bg-hover: var(--tp-btn-hover);
  --fc-btn-fg-hover: #ffffff;
  --fc-btn-border: var(--tp-btn);
  --fc-btn-outline-fg: #ffffff;
  --line: rgba(255, 255, 255, 0.35);
  --line-dark: rgba(255, 255, 255, 0.2);
  --shadow-base: 8px 8px 0 rgba(0, 0, 0, 0.25);
  --font-heading: var(--tp-font);
  --font-serif: var(--tp-font);
  --font-sans: var(--tp-font);
  --font-en: var(--tp-font);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================
   2. 基本
   ========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; background: var(--tp-bg); }
body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  background: var(--tp-bg);
  color: #fff;
  font-family: var(--tp-font);
  font-weight: 500;
  font-size: 15px;
  line-height: 30px;
  letter-spacing: 0.9px;
  -webkit-font-smoothing: antialiased;
  writing-mode: horizontal-tb;
  overflow-wrap: break-word;
}
body::before { display: none; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s ease, background .25s ease, border-color .25s ease, opacity .25s ease; }
a:hover { color: #fff; opacity: .8; }
button { font: inherit; }
br.sp-br { display: none; }
.tp-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- フェードアップ（ふわっと浮かび上がる）----
   corp 正本の仕組み（IntersectionObserver が .fade-up に .is-visible を付ける）をそのまま使い、
   動きだけ「32px 下から 1 秒かけて」に調整。カードが並ぶ所は .tp-reveal で時間差。
   ★要素の位置決めに transform を使わない（ここの transform と衝突する）★ */
.fade-up { opacity: 0; transform: translateY(32px); transition: opacity 1s ease-out, transform 1s var(--ease); }
.fade-up.is-visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .15s; }
.delay-2 { transition-delay: .3s; }
.tp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease-out, transform .9s var(--ease); }
.tp-reveal.is-in { opacity: 1; transform: translateY(0); }
.tp-reveal:nth-child(2) { transition-delay: .12s; }
.tp-reveal:nth-child(3) { transition-delay: .24s; }
.tp-reveal:nth-child(4) { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .fade-up, .tp-reveal { opacity: 1; transform: none; transition: none; }
}

/* 標準ブロック共通の見出し（corp 正本から引き継ぎ） */
.section-header, .news-section-header, .job-section-header, .contact-section-header { text-align: center; margin-bottom: 48px; }
.section-header h2, .news-main-title, .job-main-title, .contact-main-title { font-family: var(--tp-font); font-size: 36px; line-height: 52px; letter-spacing: 2.16px; font-weight: 900; color: #fff; }
.section-header p, .news-sub-text, .job-sub-text, .contact-sub-text { margin-top: 14px; color: #fff; font-size: 15px; line-height: 30px; }

/* =========================================================
   3. 共通部品
   ========================================================= */
/* 英字の大見出し（GREETING／SERVICE：48/70 900・字間 2.88・大文字）と和文の見出し（36/52 900・字間 2.16） */
.tp-en-title { font-size: 48px; line-height: 70px; letter-spacing: 2.88px; font-weight: 900; color: #fff; text-transform: uppercase; }
.tp-title { font-size: 36px; line-height: 52px; letter-spacing: 2.16px; font-weight: 900; color: #fff; }
.tp-center { text-align: center; }

/* ボタン（206×63・#4D4D4D・文字 20/29 字間 1.4・右端まで伸びる白い線 33.6px）
   Figma：右寄せ・文字と線の間 31。線は箱の右端に接する */
.tp-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: flex-end; gap: 31px;
  width: 206px; height: 63px; padding: 17px 0; background: var(--tp-btn); color: #fff;
  font-size: 20px; line-height: 29px; letter-spacing: 1.4px; font-weight: 500; white-space: nowrap;
  transition: background .25s ease;
}
.tp-btn::after { content: ""; flex: 0 0 34px; width: 34px; height: 1px; background: #fff; transition: flex-basis .25s ease, width .25s ease; }
.tp-btn:hover { background: var(--tp-btn-hover); color: #fff; opacity: 1; }
.tp-btn-wrap { display: flex; justify-content: center; line-height: 0; }

/* 標準ブロックのボタン（block_button 部品・フォームの送信）も同じ形に。サイト設定「ボタン配色」（corp 既定の黄色 #F1C232）が
   header.php から !important で注入されるため、さらに強い詳細度＋!important で固定する */
body .fc-block-btn, body .btn-nab-back {
  position: relative; display: inline-flex; align-items: center; justify-content: flex-end; gap: 31px;
  width: 206px; min-height: 0; height: 63px; padding: 17px 0; border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
  font-family: var(--tp-font); font-size: 20px; line-height: 29px; letter-spacing: 1.4px; font-weight: 500; white-space: nowrap;
}
body .fc-block-btn::after, body .btn-nab-back::after { content: ""; flex: 0 0 34px; width: 34px; height: 1px; background: #fff; }
html body .fc-block-btn-primary, html body .fc-block-btn-outline, html body .btn-submit-contact, html body .link-button-btn-primary, html body .btn-nab-back {
  background: var(--tp-btn) !important; color: #fff !important; border-color: var(--tp-btn) !important; box-shadow: none !important; border-radius: 0 !important;
}
html body .fc-block-btn-primary:hover, html body .fc-block-btn-outline:hover, html body .btn-submit-contact:hover, html body .link-button-btn-primary:hover, html body .btn-nab-back:hover {
  background: var(--tp-btn-hover) !important; color: #fff !important; border-color: var(--tp-btn-hover) !important; opacity: 1;
}
body .fc-block-btn-wrap { margin-top: 25px; line-height: 0; }
body .fc-block-btn-ext, body .fc-block-btn i { display: none; }

/* 写真の飾り（615×416 の中に：枠線 607×405 が左上・写真 607×405 が右 8／下 11 ずれ・右下 8px の影 黒 25%）
   枠線は写真より手前（Figma の重ね順）。SP は 350×416（枠 345×405・写真は右 5／下 11）と 350×236（枠 345×230・右 5／下 6） */
.tp-photo { position: relative; flex: 0 0 615px; width: 615px; height: 416px; }
.tp-photo img { position: absolute; left: 8px; top: 11px; width: 607px; height: 405px; max-width: none; object-fit: cover; box-shadow: 8px 8px 0 rgba(0, 0, 0, .25); }
.tp-photo::after { content: ""; position: absolute; left: 0; top: 0; width: 607px; height: 405px; border: 1px solid var(--tp-frame); pointer-events: none; }

/* =========================================================
   4. ヘッダー（Figma Frame 26：x=58〜1382・y=30〜110。写真の上に透過で重なる。スクロール後は地色＋高さ 80）
   ========================================================= */
body .global-header {
  position: fixed; top: 0; left: 0; z-index: 1000;
  width: 100%; height: 110px; min-height: 0;
  padding: 30px 58px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  background: transparent; border: 0; border-radius: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  transition: background .3s ease, height .3s ease, padding .3s ease;
}
body .global-header.is-scrolled { height: 80px; min-height: 0; padding: 0 58px; border-bottom: 0; background: rgba(57, 60, 65, .92); box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
body .global-header .header-page-eyebrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* SEO 用 H1 は見せない */
/* 文字ロゴ 2 段：社名 20/40 900 白 ＋ 英字 20/40 900 #777（320 幅の中央）。英字は CSS で足す */
body .header-logo { display: flex; flex-direction: column; flex: 0 0 auto; width: 320px; color: #fff; font-family: var(--tp-font); font-size: 20px; line-height: 40px; letter-spacing: 0; font-weight: 900; white-space: nowrap; transition: none; }
body .header-logo::after { content: "Three・Piece・Service"; display: block; text-align: center; color: var(--tp-sub); font-size: 20px; line-height: 40px; font-weight: 900; letter-spacing: 0; }
body .header-logo:hover { color: #fff; opacity: 1; }
body .global-header.is-scrolled .header-logo { font-size: 18px; line-height: 30px; }
body .global-header.is-scrolled .header-logo::after { font-size: 16px; line-height: 24px; }
body .header-logo img { max-height: 60px !important; }
/* 右側：ナビ（15/22 700・字間 0.9・間 44）＋ 47 ＋ 電話（24/35 700・字間 1.44） */
body .desktop-nav { display: flex; align-items: center; justify-content: flex-end; gap: 44px; margin-left: auto; }
body .desktop-nav a { position: relative; color: #fff; font-size: 15px; font-weight: 700; line-height: 22px; letter-spacing: 0.9px; white-space: nowrap; text-transform: uppercase; }
body .desktop-nav a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px; background: #fff; transition: width .25s ease; }
body .desktop-nav a:hover::after, body .desktop-nav a.active::after { width: 100%; }
body .desktop-nav a:hover { color: #fff; opacity: 1; }
body .header-btns { display: flex; align-items: center; gap: 16px; margin-left: 7px; }
body .btn-header-tel { display: inline-flex; align-items: center; justify-content: center; gap: 0; height: 35px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; font-size: 24px; line-height: 35px; letter-spacing: 1.44px; font-weight: 700; white-space: nowrap; }
body .btn-header-tel i { display: none; }
body .btn-header-tel:hover { background: transparent; color: #fff; opacity: .8; }
/* お問い合わせ CTA は本案件では出さない（ブロック設定で OFF）。骨組みだけ残す */
body .btn-header-contact { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 20px; border: 1px solid #fff; border-radius: 0; background: transparent; color: #fff; font-size: 15px; line-height: 22px; font-weight: 700; letter-spacing: 0.9px; }
body .btn-header-contact:hover { background: #fff; color: var(--tp-bg); opacity: 1; }
body .menu-trigger { display: none; }
.fc-language-switcher { display: none; }
/* 1280 より狭い PC：ロゴ 320＋ナビ 393＋47＋電話 151＋左右 116＝約 1030 → 余白と間を詰める */
@media (max-width: 1279px) {
  body .global-header { padding: 30px 30px 0; gap: 24px; }
  body .global-header.is-scrolled { padding: 0 30px; }
  body .desktop-nav { gap: 28px; }
}
/* SP・タブレットのヘッダー（Figma Frame 52：y=8〜66・左右 16。社名 15/30・英字 14/28・ハンバーガー 42 角） */
@media (max-width: 1024px) {
  body .global-header { height: 74px; padding: 8px 16px; gap: 16px; }
  body .global-header.is-scrolled { height: 66px; padding: 4px 16px; }
  body .header-logo, body .global-header.is-scrolled .header-logo { width: 240px; font-size: 15px; line-height: 30px; }
  body .header-logo::after, body .global-header.is-scrolled .header-logo::after { font-size: 14px; line-height: 28px; }
  body .desktop-nav { display: none; }
  body .header-btns { display: none; }
  body .menu-trigger {
    display: inline-flex; align-items: center; justify-content: center; position: relative; margin-left: auto; width: 42px; height: 42px; padding: 0; line-height: 1;
    border: 0; border-radius: 0; background: transparent; color: #fff; cursor: pointer;
  }
  body .menu-trigger i { display: none; }
  body .menu-trigger::before { content: ""; width: 18px; height: 12px; background: url("/image/assets/tp_ic_menu.svg") center / 18px 12px no-repeat; }
}
/* SP パネル（Figma に無い → 提案：右から出る全高パネル・地 #222324・英字ナビ＋電話番号） */
.mobile-nav-overlay {
  position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.mobile-nav-overlay.active { opacity: 1; visibility: visible; }
body .mobile-nav-overlay { left: auto; right: 0; width: 280px; max-width: 84vw; background: var(--tp-bg-deep); gap: 0; padding: 96px 32px 40px; justify-content: flex-start; align-items: stretch; box-shadow: -8px 0 30px rgba(0, 0, 0, .35); overflow-y: auto; }
body .mobile-nav-overlay > a { display: block; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .25); color: #fff; font-size: 15px; line-height: 22px; font-weight: 700; letter-spacing: 0.9px; text-align: left; text-transform: uppercase; }
body .mobile-nav-overlay > a:hover { color: #fff; opacity: .8; }
body .mobile-nav-overlay > a.tp-nav-tel { margin-top: 32px; padding: 0; border: 0; font-size: 24px; line-height: 35px; letter-spacing: 1.44px; text-align: center; }
body .mobile-nav-overlay .menu-trigger { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 16px; right: 16px; left: auto; width: 42px; height: 42px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; }
body .mobile-nav-overlay .menu-trigger::before { content: none; }
body .mobile-nav-overlay .menu-trigger i { display: inline-block; color: #fff; font-size: 24px; line-height: 1; }
.tp-nav-backdrop { position: fixed; inset: 0; z-index: 1999; background: rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.tp-nav-backdrop.active { opacity: 1; visibility: visible; }

/* =========================================================
   5. 標準ブロック
   ========================================================= */
/* ---- 5-1 hero_main（MV 1440×600・写真＋黒 30%（2・3 枚目 24%）・中央にキャッチ 40/58 と英字 32/46）---- */
body .hero-wrapper { position: relative; width: 100%; height: 600px; min-height: 0; border-radius: 0; overflow: hidden; background: #111; }
body .hero-wrapper::after { content: none; }
body .hero-img-window, body .hero-img-window img, body .hero-img-window video { width: 100%; height: 100%; object-fit: cover; }
body .hero-slide-img { background-size: cover; background-position: center; }
body .hero-slide-img::after,
body .hero-cap-top-left .hero-slide-img::after, body .hero-cap-mid-left .hero-slide-img::after, body .hero-cap-bottom-left .hero-slide-img::after,
body .hero-cap-top-center .hero-slide-img::after, body .hero-cap-mid-center .hero-slide-img::after, body .hero-cap-bottom-center .hero-slide-img::after,
body .hero-cap-top-right .hero-slide-img::after, body .hero-cap-mid-right .hero-slide-img::after, body .hero-cap-bottom-right .hero-slide-img::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .24); }
body .hero-slide-img[style*="tp_mv_1"]::after { background: rgba(0, 0, 0, .3); }
/* 写真の見せる範囲（Figma の imageTransform：横幅いっぱい・縦は 1 枚目 66%／2・3 枚目は上端） */
body .hero-slide-img[style*="tp_mv_1"] { background-position: center 66.07%; }
body .hero-slide-img[style*="tp_mv_2"], body .hero-slide-img[style*="tp_mv_3"] { background-position: center 0%; }
body .hero-slide-caption,
body .hero-cap-top-left .hero-slide-caption, body .hero-cap-mid-left .hero-slide-caption, body .hero-cap-bottom-left .hero-slide-caption,
body .hero-cap-top-center .hero-slide-caption, body .hero-cap-mid-center .hero-slide-caption, body .hero-cap-bottom-center .hero-slide-caption,
body .hero-cap-top-right .hero-slide-caption, body .hero-cap-mid-right .hero-slide-caption, body .hero-cap-bottom-right .hero-slide-caption {
  top: 271px; bottom: auto; left: 0; right: 0; padding: 0 20px; text-align: center; transform: none; text-shadow: none; color: #fff;
}
body .hero-slide-catch { max-width: none; margin: 0; font-family: var(--tp-font); font-weight: 700; font-size: 40px !important; line-height: 58px; letter-spacing: 2.4px; color: #fff; text-shadow: none; }
body .hero-slide-sub { max-width: none; margin: 26px 0 0; font-family: var(--tp-font); font-weight: 700; font-size: 32px !important; line-height: 46px; letter-spacing: 1.92px; color: #fff; text-shadow: none; }
body .hero-slide-catch br { display: none; } /* 改行は SP だけ。改行の前後の空白は共通ヘッダーのスクリプトが取り除く */
body .hero-slider-dots { display: none; }

/* ---- 5-2 hero_page（下層 1440×401・写真＋黒 24%・中央に和文 32/46 白＋英字 32/46 #4D4D4D）---- */
body .page-hero-wrapper {
  position: relative; min-height: 0; height: 401px; padding: 193px 20px 0; display: flex; align-items: flex-start; justify-content: center;
  text-align: center; border-radius: 0; overflow: hidden; color: #fff;
  background-size: 100% auto; background-position: center 54.38%; background-repeat: no-repeat; background-color: #111;
}
body .page-hero-wrapper::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .24); pointer-events: none; }
body .ph-overlay { display: none; }
body .ph-container { position: relative; z-index: 2; width: 100%; max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
body .ph-title { margin: 0; font-family: var(--tp-font); font-weight: 700; font-size: 32px; line-height: 46px; letter-spacing: 1.92px; color: #fff; text-shadow: none; }
body .ph-desc { max-width: none; margin: 0; font-family: var(--tp-font); font-weight: 700; font-size: 32px; line-height: 46px; letter-spacing: 1.92px; color: var(--tp-btn); text-shadow: none; text-transform: uppercase; }

/* ---- 5-3 concept_split（写真 615×416 左＋文章 549 右・間 76・全体 1240）----
   TOP の GREETING：見出し 48/70 大文字・文章は下揃え／下層：見出し 36/52・文章は上揃え・段の間 69
   DOM は「文章 → 写真」の順なので order で入れ替える（reverse でも写真は常に左＝Figma） */
body .concept-section { position: relative; padding: 0 20px 69px; background: transparent; color: #fff; overflow: visible; }
body .concept-container, body .concept-container.concept-reverse {
  position: relative; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 615px minmax(0, 549px); gap: 76px; align-items: start;
}
body .concept-container .concept-img-wrapper, body .concept-container.concept-reverse .concept-img-wrapper {
  order: 1; position: relative; align-self: start; width: 615px; height: 416px; min-height: 0; margin: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none;
}
body .concept-container .concept-img-wrapper img, body .concept-container .concept-img-wrapper video {
  position: absolute; left: 8px; top: 11px; width: 607px !important; height: 405px !important; min-height: 0; max-width: none; object-fit: cover; box-shadow: 8px 8px 0 rgba(0, 0, 0, .25);
}
body .concept-container .concept-img-wrapper::after { content: ""; position: absolute; left: 0; top: 0; width: 607px; height: 405px; border: 1px solid var(--tp-frame); pointer-events: none; }
body .concept-container .concept-content, body .concept-container.concept-reverse .concept-content { order: 2; text-align: left; padding: 0; }
body .concept-content p.concept-eyebrow { margin: 0 0 8px; font-family: var(--tp-font); font-weight: 700; font-size: 15px; line-height: 22px; letter-spacing: 0.9px; color: #fff; }
body .concept-title, body .concept-content h2 { margin: 0; font-family: var(--tp-font); font-weight: 900; font-size: 36px; line-height: 52px; letter-spacing: 2.16px; color: #fff; }
body .concept-title::before, body .concept-title::after { content: none; }
body .concept-text::before, body .concept-content p.concept-text::before { content: none; }
body .concept-text, body .concept-content p.concept-text { margin: 21px 0 0; font-size: 15px; line-height: 30px; letter-spacing: 0.9px; color: #fff; }
/* 文ごとの箱（共通ヘッダーのスクリプトが <br> で分け、PC では文末の数文字だけが落ちる文に読点・助詞の後ろで改行を入れる。text-wrap の pretty／balance は CJK では不自然だった） */
.tp-sent { display: block; }
.tp-sent-empty { height: 30px; }
/* 下層：ヒーローの直後は 92（業務内容）。会社案内は 80（.tp-page-company） */
body .page-hero-wrapper + .concept-section { padding-top: 92px; }
body.tp-page-company .page-hero-wrapper + .concept-section { padding-top: 80px; padding-bottom: 135px; }
/* 業務内容の 1 段目（導入）は Figma に見出しが無い → 見出しは読み上げ・検索向けに残して隠す */
body.tp-page-business .page-hero-wrapper + .concept-section .concept-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.tp-page-business .page-hero-wrapper + .concept-section .concept-text { margin-top: 0; }
/* 業務内容の最後の段 → 地図まで 100 */
body.tp-page-business .concept-section:last-of-type { padding-bottom: 100px; }
/* TOP の GREETING（hero_main の後ろ）：上 183・下 128、見出し 48/70 大文字 */
body .hero-wrapper ~ .concept-section { padding-top: 183px; padding-bottom: 128px; }
body .hero-wrapper ~ .concept-section .concept-content { padding-top: 2px; } /* Figma：文章の列は写真の上端から 2px 下 */
body .hero-wrapper ~ .concept-section .concept-title { font-size: 48px; line-height: 70px; letter-spacing: 2.88px; text-transform: uppercase; }
@media (max-width: 1300px) {
  body .concept-container, body .concept-container.concept-reverse { grid-template-columns: minmax(0, 615fr) minmax(0, 549fr); gap: 48px; }
  body .concept-container .concept-img-wrapper, body .concept-container.concept-reverse .concept-img-wrapper { width: 100%; height: auto; aspect-ratio: 615 / 416; }
  body .concept-container .concept-img-wrapper img, body .concept-container .concept-img-wrapper video { width: calc(100% - 8px) !important; height: calc(100% - 11px) !important; }
  body .concept-container .concept-img-wrapper::after { width: calc(100% - 8px); height: calc(100% - 11px); }
}

/* ---- 5-4 contact_form（1060 幅・ラベル 278＋入力 782・行 61・行の間 20・下線 2px・赤字「必須」・送信 316×76）---- */
body .contact-form-section { position: relative; padding: 61px 20px 100px; background: transparent; color: #fff; }
body .contact-section-header { display: none; } /* 導入文は直前のカスタムHTML。ブロックの見出しは出さない */
body .contact-container { max-width: 1060px; margin: 0 auto; }
body .form-wrapper { border: 0; padding: 0; background: transparent; box-shadow: none; }
body .contact-success-msg { padding: 40px 20px; text-align: center; font-size: 15px; line-height: 30px; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .35); }
body .contact-success-msg i { display: block; margin-bottom: 12px; font-size: 32px; color: #fff; }
body .contact-error-msg, body .form-error { color: #ff8a8a; }
body .form-group { display: grid; grid-template-columns: 278px minmax(0, 782px); align-items: stretch; margin: 0 0 20px; }
body .form-group label { display: flex; align-items: center; gap: 10px; min-height: 60px; margin: 1px 0 0; padding: 10px 10px 8px; border-bottom: 2px solid var(--tp-sub); /* 下線 2px は行の高さに含む（Figma の線は内側） */ font-size: 20px; line-height: 40px; letter-spacing: 1.2px; font-weight: 500; color: #fff; }
body .form-group-textarea label { align-items: flex-start; }
body .form-group label .required, body .form-group label .optional { order: -1; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: 20px; line-height: 40px; font-weight: 500; letter-spacing: 1.2px; }
body .form-group label .required { color: var(--tp-red); }
body .form-group label .optional { color: #fff; }
body .form-group .tp-field { display: flex; align-items: center; padding: 10px 10px 8px; border-bottom: 2px solid var(--tp-btn); }
/* お問い合わせ内容は Figma では 1 行ぶん（41px）の箱だが、文章を書く欄なので 160px に広げている（意図的な差・ページが 99px 伸びる） */
body .restaurant-contact-form input[type="text"], body .restaurant-contact-form input[type="email"], body .restaurant-contact-form input[type="tel"], body .restaurant-contact-form textarea {
  width: 100%; height: 41px; padding: 0 12px; border: 0; border-radius: 0; background: #FEFEFE; color: #222;
  font-family: var(--tp-font); font-size: 15px; letter-spacing: 0.9px; box-shadow: none;
}
body .restaurant-contact-form textarea { height: 160px; padding: 8px 12px; line-height: 26px; resize: vertical; }
body .restaurant-contact-form ::placeholder { color: #9a9a9a; }
body .restaurant-contact-form input:focus, body .restaurant-contact-form textarea:focus { outline: 2px solid #fff; outline-offset: 0; box-shadow: none; }
body .form-submit-wrap { margin-top: 41px; text-align: center; line-height: 0; }
/* 送信ボタンは地（#393C41）と #4D4D4D では見分けにくい → 白地＋濃い文字（2026-09-26 要望） */
html body .btn-submit-contact { background: #fff !important; color: #222 !important; border-color: #fff !important; }
html body .btn-submit-contact:hover { background: #ddd !important; color: #222 !important; border-color: #ddd !important; }
body .btn-submit-contact { display: inline-flex; align-items: center; justify-content: center; width: 316px; max-width: 100%; height: 76px; padding: 18px 0; border: 0; border-radius: 0; cursor: pointer; font-family: var(--tp-font); font-size: 20px; line-height: 40px; letter-spacing: 1.2px; font-weight: 500; transform: none; }
body .btn-submit-contact:hover { transform: none; }
body .btn-submit-contact i { display: none; }
body .contact-privacy, body .contact-note { color: #fff; }

/* =========================================================
   6. カスタムHTML
   ========================================================= */
/* ---- 6-1 SERVICE（見出し 48/70 → 38 → カード 4 枚 1279×437 → 38 → ボタン → 65。濃い帯 400 が下半分に敷かれる）---- */
.tp-service { position: relative; padding: 0 20px 65px; }
.tp-service::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 400px; background: var(--tp-bg-deep); }
.tp-service > * { position: relative; }
.tp-service-cards { max-width: 1279px; margin: 38px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.tp-card { position: relative; min-width: 0; height: 437px; background: linear-gradient(180deg, var(--tp-card-a) 0%, var(--tp-card-b) 100%); color: #fff; }
/* L 字の飾り線（121×45・白 40%・1px）：左上（18,19）と右下（右 18・下 17） */
.tp-card::before, .tp-card::after { content: ""; position: absolute; width: 121px; height: 45px; border: 0 solid rgba(255, 255, 255, .4); pointer-events: none; }
.tp-card::before { left: 18px; top: 19px; border-top-width: 1px; border-left-width: 1px; }
.tp-card::after { right: 18px; bottom: 17px; border-bottom-width: 1px; border-right-width: 1px; }
.tp-card-title { position: absolute; left: 18px; right: 18px; top: var(--tp-ty, 110px); font-size: 36px; line-height: 52px; letter-spacing: 0; font-weight: 700; text-align: center; color: #fff; }
.tp-card-text { position: absolute; left: 18px; right: 18px; top: var(--tp-py, 237px); font-size: 15px; line-height: 30px; letter-spacing: 0.9px; font-weight: 500; color: #fff; }
.tp-service .tp-btn-wrap { margin-top: 38px; }
@media (max-width: 1240px) and (min-width: 769px) {
  .tp-service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-service::before { height: 640px; }
}

/* ---- 6-2 本社／九州支店（見出し 36/52 → 62 → 写真 615×416 と表 478 を 86 あけて横並び・全体 1179）----
   DOM は「表 → 写真」。本社（.tp-office--photo-left）は PC で写真を左へ。会社案内ページはボタン無し */
.tp-offices { padding: 72px 20px 109px; }
.tp-offices--company { padding: 0 20px 88px; }
.tp-office + .tp-office { margin-top: 72px; }
.tp-offices--company .tp-office + .tp-office { margin-top: 104px; }
.tp-office-row { max-width: 1179px; margin: 62px auto 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 86px; }
.tp-office-info { flex: 0 1 478px; min-width: 0; margin-top: 11px; display: flex; flex-direction: column; gap: 25px; } /* Figma：表は写真の枠の上端から 11 下 */
.tp-office--photo-left .tp-photo { order: -1; }
.tp-dl { display: flex; flex-direction: column; gap: 24px; }
.tp-dl-row { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 0 7px; border-bottom: 1px solid #fff; /* Figma の線は内側＝行の高さ 56 に含む */ font-size: 20px; line-height: 40px; letter-spacing: 1.2px; font-weight: 500; }
.tp-dl-row dt { flex: 0 0 127px; font-weight: 500; }
.tp-dl-row dd { flex: 1 1 auto; min-width: 0; }
.tp-dl-row a:hover { opacity: .8; }
@media (max-width: 1240px) and (min-width: 769px) {
  .tp-office-row { gap: 40px; }
  .tp-office-row .tp-photo { flex: 0 1 615px; width: auto; height: auto; aspect-ratio: 615 / 416; min-width: 0; }
  .tp-office-row .tp-photo img { width: calc(100% - 8px); height: calc(100% - 11px); }
  .tp-office-row .tp-photo::after { width: calc(100% - 8px); height: calc(100% - 11px); }
  .tp-dl-row { font-size: 17px; letter-spacing: 0.6px; }
  .tp-dl-row dt { flex-basis: 96px; }
}

/* ---- 6-3 お問い合わせの導入文（ヒーローの下 80・中央 2 行 15/30）---- */
.tp-contact-intro { padding: 80px 20px 0; text-align: center; font-size: 15px; line-height: 30px; letter-spacing: 0.9px; }
.custom-html-inner > .tp-contact-intro, .custom-html-inner > .tp-offices, .custom-html-inner > .tp-service { margin-top: 0 !important; }

/* =========================================================
   7. 共通フッター（地図 1440×427＋左上に白い札「九州支店」→ 社名 2 段 → ナビ → 著作権。全体 317）
   corp の DOM：footer > .footer-nav-wrap(nav) + .info-grid(.shop-info + .gmap-wrap)。
   .info-grid を display: contents にして flex の order で「地図 → 社名 → ナビ」に並べ替える
   ========================================================= */
body .global-footer { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0; background: var(--tp-bg); color: #fff; border-top: 0; overflow: hidden; }
body .global-footer .info-grid { display: contents; }
body .global-footer .gmap-wrap { order: 1; position: relative; width: 100%; max-width: none; height: 527px; min-height: 0; margin: 0; padding-top: 100px; border: 0; border-radius: 0; background: transparent; overflow: hidden; }
body .global-footer .gmap-wrap iframe, body .global-footer .gmap-wrap .gmap-placeholder { background: #2b2d31; }
body .global-footer .gmap-wrap iframe { width: 100%; height: 427px; min-height: 0; border: 0; filter: none; display: block; }
body .global-footer .gmap-placeholder { min-height: 0; height: 427px; color: #fff; }
/* 札「九州支店」244×55・白地・枠 1px #393C41・文字 20/40 黒。Figma は地図の左上（80,61）に重ねていたが、
   Google マップ自身の情報カード（社名・住所）と被るため、地図の上の地色の帯（100px）の中央に置く（2026-09-29 先方要望） */
body .global-footer .gmap-wrap::before {
  content: "九州支店"; position: absolute; z-index: 2; left: 0; right: 0; top: 22px; margin: 0 auto; width: 244px; height: 55px; padding: 8px 0 7px; border: 1px solid var(--tp-bg);
  background: #fff; color: #000; font-size: 20px; line-height: 38px; letter-spacing: 1.2px; font-weight: 500; text-align: center; pointer-events: none;
}
body .global-footer .shop-info { order: 2; position: relative; width: 100%; padding: 55px 20px 0; opacity: 1; transform: none; text-align: center; }
body .global-footer .footer-brand { text-align: center; }
body .global-footer .footer-brand h2 { font-family: var(--tp-font); font-size: 20px; line-height: 40px; letter-spacing: 0; font-weight: 900; color: #fff; }
body .global-footer .footer-brand::after { content: "Three・Piece・Service"; display: block; font-size: 20px; line-height: 40px; letter-spacing: 0; font-weight: 900; color: #fff; }
body .global-footer .footer-genre, body .global-footer .footer-table, body .global-footer .footer-payments-box, body .global-footer .footer-nav-brand { display: none; }
body .global-footer .footer-nav-wrap { order: 3; position: relative; width: 100%; margin: 0; padding: 32px 20px 0; background: transparent; border: 0; }
body .global-footer .footer-nav { max-width: none; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 44px; }
body .global-footer .footer-nav-link { padding: 0; border: 0; white-space: nowrap; color: #fff; font-size: 15px; font-weight: 700; line-height: 22px; letter-spacing: 0.9px; text-transform: uppercase; }
body .global-footer .footer-nav-link:last-child { border: 0; }
body .global-footer .footer-nav-link:hover { color: #fff; opacity: .8; }
body .footer-copy-text, body .footer-copy { margin: 0; padding: 32px 20px 68px; border: 0; background: var(--tp-bg); color: #fff; font-size: 14px; line-height: 28px; letter-spacing: 0; font-weight: 900; text-align: center; }

/* ---- 浮遊ボタン：PC では出さない（Figma に無い）。SP は 8 章で画面下に固定（電話＋アクセス）---- */
.fc-floating-actions { position: fixed; z-index: 1800; display: flex; }
.fc-floating-action { display: inline-flex; align-items: center; justify-content: center; }
body .fc-floating-actions { display: none; }

/* =========================================================
   8. SP（768px 以下）— Figma Frame 51（375×5036）。下層は TOP の縮め方に準拠
   ========================================================= */
@media (max-width: 768px) {
  /* MV 375×720：キャッチ 32/46（2 行）・英字 20/29・写真は高さいっぱいで横位置だけ指定 */
  body .hero-wrapper { height: 720px; }
  body .hero-slide-caption,
  body .hero-cap-top-left .hero-slide-caption, body .hero-cap-mid-left .hero-slide-caption, body .hero-cap-bottom-left .hero-slide-caption,
  body .hero-cap-top-center .hero-slide-caption, body .hero-cap-mid-center .hero-slide-caption, body .hero-cap-bottom-center .hero-slide-caption,
  body .hero-cap-top-right .hero-slide-caption, body .hero-cap-mid-right .hero-slide-caption, body .hero-cap-bottom-right .hero-slide-caption { top: 271px; padding: 0; }
  body .hero-slide-catch { font-size: 32px !important; line-height: 46px; letter-spacing: 1.92px; white-space: nowrap; }
  body .hero-slide-catch br { display: inline; }
  body .hero-slide-sub { margin-top: 26px; font-size: 20px !important; line-height: 29px; letter-spacing: 1.2px; }
  body .hero-slide-img[style*="tp_mv_1"] { background-position: 63.52% center; }
  body .hero-slide-img[style*="tp_mv_2"] { background-position: 72.24% center; }
  body .hero-slide-img[style*="tp_mv_3"] { background-position: 42.25% center; }

  /* 下層ヒーロー：高さ 300・文字 24/35 */
  body .page-hero-wrapper { height: 300px; padding-top: 130px; background-size: cover; background-position: center; }
  body .ph-container { gap: 6px; }
  body .ph-title, body .ph-desc { font-size: 24px; line-height: 35px; letter-spacing: 1.44px; }

  /* 写真の飾り：350×416（枠 345×405・写真は右 5／下 11） */
  .tp-photo { flex: 0 0 auto; width: 350px; max-width: 100%; height: 416px; }
  .tp-photo img { left: 5px; top: 11px; width: calc(100% - 5px); height: 405px; }
  .tp-photo::after { width: calc(100% - 5px); height: 405px; }

  /* concept_split：写真 → 見出し 36/52 → 本文。左右 13（＝350 幅）。blocks.css の SP 指定が !important */
  body .concept-section, body .concept-section.fade-up { padding: 0 12.5px 60px !important; }
  body .page-hero-wrapper + .concept-section, body .page-hero-wrapper + .concept-section.fade-up { padding-top: 40px !important; }
  body.tp-page-company .page-hero-wrapper + .concept-section, body.tp-page-company .page-hero-wrapper + .concept-section.fade-up { padding-bottom: 90px !important; }
  body.tp-page-business .concept-section:last-of-type { padding-bottom: 60px !important; }
  body .hero-wrapper ~ .concept-section, body .hero-wrapper ~ .concept-section.fade-up { padding-top: 40px !important; padding-bottom: 94px !important; }
  body .concept-container, body .concept-container.concept-reverse { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 350px; }
  body .concept-container .concept-img-wrapper, body .concept-container.concept-reverse .concept-img-wrapper { width: 100%; height: 416px; aspect-ratio: auto; }
  body .concept-container .concept-img-wrapper img, body .concept-container .concept-img-wrapper video { left: 5px; width: calc(100% - 5px) !important; height: 405px !important; }
  body .concept-container .concept-img-wrapper::after { width: calc(100% - 5px); height: 405px; }
  body .hero-wrapper ~ .concept-section .concept-title { font-size: 36px; line-height: 52px; letter-spacing: 2.16px; }
  body .hero-wrapper ~ .concept-section .concept-content { padding-top: 0; }
  body .concept-title, body .concept-content h2 { font-size: 28px; line-height: 42px; letter-spacing: 1.68px; }

  /* SERVICE：見出し 36/52 → 32 → カード 312×285 縦積み（間 11）→ 32 → ボタン → 58。濃い帯 #292A2C は 1 枚目の 502 下から */
  .tp-en-title { font-size: 36px; line-height: 52px; letter-spacing: 2.16px; }
  .tp-service { padding: 0 12.5px 58px; }
  .tp-service::before { top: 586px; bottom: 0; height: auto; background: var(--tp-bg-deep-sp); }
  .tp-service-cards { max-width: 312px; margin-top: 32px; grid-template-columns: minmax(0, 1fr); }
  .tp-card { height: 285px; padding: 45px 18px 0; }
  .tp-card:nth-child(4) { padding-top: 57px; }
  .tp-card::before { left: 14px; top: 16px; }
  .tp-card::after { right: 18px; bottom: 20px; }
  .tp-card-title { position: static; font-size: 24px; line-height: 35px; }
  .tp-card-text { position: static; margin-top: 23px; }
  .tp-service .tp-btn-wrap { margin-top: 32px; }

  /* 本社／九州支店：見出し → 32 → 表（行 46・15/30）→ 25 → ボタン → 24 → 写真 350×236 */
  .tp-title { font-size: 36px; line-height: 52px; }
  .tp-offices { padding: 62px 12.5px 40px; }
  .tp-offices--company { padding: 0 12.5px 40px; }
  .tp-office + .tp-office, .tp-offices--company .tp-office + .tp-office { margin-top: 101px; }
  .tp-office-row { max-width: 350px; margin-top: 32px; flex-direction: column; align-items: stretch; gap: 24px; }
  .tp-office-info { flex: 0 0 auto; width: 100%; margin-top: 0; align-items: center; }
  .tp-office--photo-left .tp-photo { order: 0; }
  .tp-dl { width: 100%; }
  .tp-dl-row { min-height: 46px; padding: 8px 0 7px; font-size: 15px; line-height: 30px; letter-spacing: 0.9px; }
  .tp-dl-row dt { flex-basis: 88px; }
  .tp-office-row .tp-photo { height: 236px; }
  .tp-office-row .tp-photo img { top: 6px; height: 230px; }
  .tp-office-row .tp-photo::after { height: 230px; }

  br.pc-br { display: none; }
  br.sp-br { display: inline; }
  /* お問い合わせ */
  .tp-contact-intro { padding: 40px 12.5px 0; text-align: left; }
  body .contact-form-section { padding: 40px 12.5px 60px; }
  body .form-group { grid-template-columns: minmax(0, 1fr); margin-bottom: 16px; }
  body .form-group label { min-height: 0; padding: 4px 0; border-bottom: 0; font-size: 16px; line-height: 32px; letter-spacing: 0.96px; }
  body .form-group label .required, body .form-group label .optional { font-size: 16px; line-height: 32px; letter-spacing: 0.96px; }
  body .form-group .tp-field { padding: 0 0 12px; }
  body .restaurant-contact-form input[type="text"], body .restaurant-contact-form input[type="email"], body .restaurant-contact-form input[type="tel"] { height: 46px; font-size: 16px; }
  body .restaurant-contact-form textarea { font-size: 16px; }
  body .form-submit-wrap { margin-top: 28px; }

  /* フッター：札 350×42（16/32）→ 9 → 地図 350×171 → 社名 → ナビ（間 27）→ 著作権 12/24 */
  body .global-footer { padding: 0 12.5px; }
  body .global-footer .gmap-wrap { height: 222px; padding-top: 51px; background: transparent; overflow: visible; }
  body .global-footer .gmap-wrap iframe, body .global-footer .gmap-wrap .gmap-placeholder { height: 171px; }
  body .global-footer .gmap-placeholder { position: static; background: #2b2d31; display: flex; align-items: center; justify-content: center; }
  body .global-footer .gmap-wrap::before { left: 0; top: 0; width: 100%; height: 42px; padding: 4px 0; font-size: 16px; line-height: 32px; letter-spacing: 0.96px; }
  body .global-footer .shop-info { padding: 37px 0 0; }
  body .global-footer .footer-nav-wrap { padding: 32px 0 0; }
  body .global-footer .footer-nav { gap: 8px 27px; }
  body .footer-copy-text, body .footer-copy { padding: 32px 12.5px 119px; font-size: 12px; line-height: 24px; } /* 下部固定バー 64 のぶんを足す */

  /* SP 下部固定（電話＋アクセス）：corp の浮遊ボタンを画面下いっぱいの 2 分割バーに */
  body .fc-floating-actions { display: flex; left: 0; right: 0; bottom: 0; top: auto; width: 100%; gap: 0; padding: 0; flex-direction: row; background: var(--tp-btn); box-shadow: 0 -4px 16px rgba(0, 0, 0, .3); }
  body .fc-floating-action, body .fc-floating-contact {
    flex: 1 1 50%; width: auto; height: 64px; min-height: 0; margin: 0; padding: 0 8px; gap: 8px; border: 0; border-radius: 0; background: var(--tp-btn); color: #fff; box-shadow: none;
    font-family: var(--tp-font); font-size: 15px; line-height: 22px; letter-spacing: 0.9px; font-weight: 700; white-space: nowrap;
  }
  body .fc-floating-action + .fc-floating-action { border-left: 1px solid rgba(255, 255, 255, .35); }
  body .fc-floating-action i { display: inline-block; font-size: 16px; color: #fff; }
  body .fc-floating-action span { display: inline; }
  /* 2 つ目は「アクセス」（リンク先＝会社案内）。既定の封筒アイコンを場所ピンに替える */
  body .fc-floating-contact i { display: none; }
  body .fc-floating-contact::before { content: "\f3c5"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 16px; line-height: 1; color: #fff; }
  body .fc-floating-action:hover { background: var(--tp-btn-hover); color: #fff; opacity: 1; }
}