@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* =====================================================
   Override: ページヒーローセクション 縮小 + eyebrow非表示
   対象: 内部ページのみ（HOME は除外）
   変更: eyebrow非表示 / padding 40px→20px / title縮小 / min-height縮小
   ===================================================== */
.page-template-default .luna-page-hero {
  min-height: 10vh !important;
  padding: 20px 20px !important;
}
.page-template-default .luna-page-hero__eyebrow {
  display: none !important;
}
.page-template-default .luna-page-hero__title {
  font-size: clamp(22px, 4vw, 40px) !important;
}
.page-template-default .luna-page-hero__sub {
  margin-top: 8px !important;
}

/* =====================================================
   Override: ページヒーロー上部ギャップ解消
   原因: l-content padding-top(64px) + post_content margin-top(64px) = 128px の空白
   対象: 内部ページのみ（HOME は除外）
   ===================================================== */
.page-template-default .post_content .luna-page-hero:first-child {
  margin-top: -128px !important;
}
.admin-bar.page-template-default .post_content .luna-page-hero:first-child {
  margin-top: -96px !important;
}

/* ================================================
   fix_header 非表示 (2026-05-03)
   luna-header-transparent クラスとSWELL内部JSの衝突で
   スクロール時に fix_header が逆順フェードして2重表示になるため抑制
   ================================================ */
html.luna-header-transparent #fix_header {
  display: none !important;
}

/* =====================================================
   Fix: トップページ FV - SWELLコンテンツパディング除去 (2026-05-05)
   原因: .top #content に padding-top: 4em (64px) がSWELL側から自動設定される
         透過ヘッダー(-transparent)時はヒーローをビューポートトップから開始させる必要あり
         その結果、白いギャップが発生し白背景上で白文字ヘッダーが不可視になっていた
   ===================================================== */
.home #content {
  padding-top: 0 !important;
}

/* =====================================================
   Scroll Animation - js-* classes (2026-05-04)
   IntersectionObserver で .is-visible を付与して発火
   ===================================================== */

/* 下からスライド+フェイド（最頻出） */
.js-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* フェイドのみ */
.js-fade-only {
  opacity: 0;
  transition: opacity 1.0s ease;
}

/* 左からスライドイン */
.js-slide-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 右からスライドイン */
.js-slide-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 発火後（全クラス共通） */
.js-fade-up.is-visible,
.js-fade-only.is-visible,
.js-slide-left.is-visible,
.js-slide-right.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* =====================================================
   Fix: フッター copyright リンク文字色 (2026-05-05)
   原因: SWELLグローバルリンク色(#1a1a1a)がフッター背景と同色で不可視
   ===================================================== */
.l-footer .copyright a {
  color: #aaaaaa !important;
  text-decoration: underline !important;
}
.l-footer .copyright a:hover {
  color: #ffffff !important;
}
/* =====================================================
   Design System: 全ページ タイポグラフィ統一 (2026-05-05)
   ===================================================== */

/* ページタイトル：格式 */
/* .c-pageTitle と .c-pageTitle__inner はSWELLデフォルトに戻す（2026-05-06 過剰上書き削除） */

/* セクション padding（サブページのみ inline padding-top を上書き） */
.wp-block-group.alignfull { padding-top: 2.5rem; padding-bottom: 2.5rem; }
#body_wrap:not(.home) .wp-block-group.alignfull { padding-top: 2.5rem !important; }
/* サブページ: ヒーロー(wp-block-cover)直後の余白を抑制 */
#body_wrap:not(.home) .post_content .wp-block-cover.alignfull { margin-bottom: 0 !important; }

/* H2 基本マージン */
.post_content h2 { margin: 1.5rem 0 1.25rem !important; }
.wp-block-group.alignfull h2.wp-block-heading { margin-top: 1.5rem !important; margin-bottom: 1.25rem !important; }

/* H2 ボーダー付き（上マージンゼロ） */
.wp-block-group.alignfull h2.wp-block-heading[style*='border'] { margin-top: 0 !important; margin-bottom: 0.75rem !important; }
.kensetsu-section-h2 { margin-top: 0 !important; margin-bottom: 0.75rem !important; border-bottom: 2px solid #c8a96e; padding-bottom: 0.75rem; }

/* H3 */
.wp-block-group.alignfull h3.wp-block-heading { margin-top: 1.25rem !important; margin-bottom: 0.5rem !important; }

/* カラム内 padding-top（!important 除去 → inline style が優先される） */
.wp-block-group.alignfull .wp-block-columns { padding-top: 1.5rem; }

/* ENラベル(p) -> H2 密接 */
.wp-block-group.alignfull p + h2.wp-block-heading { margin-top: 0.5rem !important; }

/* カバーブロック内 H1/H2 */
.wp-block-cover h1.wp-block-heading { margin-top: 0.5rem !important; margin-bottom: 0 !important; }
.wp-block-cover h2.wp-block-heading { margin-top: 1.5rem !important; margin-bottom: 0.75rem !important; }
.wp-block-cover p + h1.wp-block-heading,
.wp-block-cover p + h2.wp-block-heading { margin-top: 0.5rem !important; }

/* =====================================================
   Fix: OUR STRENGTHS - 画像高さ統一 (2026-05-05)
   原因: strength-01-jisseki.jpg が800x1000px（縦長）のため
         カラム01だけ縦に伸びてレイアウト崩れが発生
   対策: aspect-ratio + object-fit:cover で4枚を同一高さに固定
   ===================================================== */
.taihoku-strength-img img {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* =====================================================
   Fix: CONTACT label gold color + 2-column height align (2026-05-06)
   SWELLが .wp-block-group.alignfull 配下の p タグに color:white を強制継承するため
   !important で c8a96e を持つ p のみゴールドを再適用
   ===================================================== */
[style*="#1a2b3c"] p[style*="c8a96e"] { color: #c8a96e !important; }
[style*="#1a2b3c"] .wp-block-columns.alignwide { align-items: stretch; }
[style*="#1a2b3c"] .wp-block-columns.alignwide > .wp-block-column { display: flex; flex-direction: column; }
[style*="#1a2b3c"] .wp-block-column .wp-block-buttons { flex: 1; display: flex; flex-direction: column; }
[style*="#1a2b3c"] .wp-block-column .wp-block-button { flex: 1; display: flex; flex-direction: column; }
[style*="#1a2b3c"] .wp-block-column .wp-block-button__link { flex: 1 !important; display: flex !important; align-items: center; justify-content: center; }
[style*="#1a2b3c"] .wp-block-column .wp-block-group[style*="border"] { flex: 1; display: flex; flex-direction: column; justify-content: center; }
/* 2026-08-30 CARD-ROW-ALIGNMENT-DRIFT 是正（/concept/ の3枚カード）
 * 症状: 見出しが1行のカードと2行のカードが混ざると、本文(P)の行頭が 101/101/129px と 28px ずれる。
 *       箱・画像・幅は完全に揃っているのに中の行だけがずれる型（CEO 2026-08-28 指摘）。
 * 原因: .tsp-card は通常フローで、h3 の行数がそのまま下の要素の開始位置になる。
 * 方針: 見出しに一律の min-height を与えると、見出しが全部1行の /company/ /recruit/ に
 *       不要な空きができる。そこで subgrid で「カード間で同じ行の高さを共有」させる。
 *       ＝ずれているページだけが揃い、揃っているページは1pxも変わらない。
 * 対象: .tsp-cards 直下のカードは全ページで子が3つ（n / h3 / p）であることを実測で確認済み。 */
.tsp-cards{ grid-template-rows: repeat(3, auto); }
.tsp-cards > .tsp-card{ display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; }

/* ===== CTAページ共通部品（2026-08-30 サイクル8）=====================================
 * /catalog/ /land/ /events/ /tour/ の4ページで同じ見た目の節見出し・Q&A・回遊カードを使う。
 * サイクル7で /catalog/ の post_content 内 <style> に書いたものを、ここへ1本化した
 * （同じ規則を2箇所で別々に持たない＝片方だけ直して型が割れる事故を防ぐ）。
 * 変数 --ink/--soft/--line/--accent/--card/--paper/--serif は各ページの .tsp が定義する。 */
.tsp-sech{text-align:center;margin:52px 0 6px}
.tsp-sech h2{font-size:clamp(1.15rem,2.2vw,1.45rem);margin:.4rem 0 0}
.tsp-sech .tsp-eye{color:#3d6580}
.tsp-sechsub{text-align:center;color:var(--soft);font-size:.92rem;max-width:60ch;margin:10px auto 0}
.tsp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0 8px}
.tsp-step{background:var(--paper,#F5F3EF);padding:24px 20px;border-top:2px solid var(--accent)}
.tsp-step .n{font-family:var(--serif);color:#3d6580;font-weight:700;font-size:1.3rem;letter-spacing:.08em;display:block}
.tsp-step h3{font-size:1.0rem;margin:.5rem 0 .5rem}
.tsp-step p{color:var(--soft);font-size:.86rem;margin:0;line-height:1.75}
.tsp-after{max-width:820px;margin:0 auto;padding:0 24px}
.tsp-qa{border-top:1px solid var(--line);margin:0;padding:22px 0}
.tsp-qa:last-of-type{border-bottom:1px solid var(--line)}
.tsp-qa h3{font-size:.98rem;margin:0 0 8px;color:var(--ink);position:relative;padding:0;border:0}
/* 子テーマ側に .post_content h3::before{position:absolute} があり、放置すると
 * 「Q.」が見出しの1文字目に重なる（2026-08-30 実描画で確認）。static/inline へ戻す。 */
.tsp-qa h3::before{content:"Q." !important;position:static !important;display:inline !important;width:auto !important;height:auto !important;background:none !important;color:var(--accent);font-weight:700;margin:0 .5em 0 0 !important;transform:none !important}
.tsp-qa p{color:var(--soft);font-size:.9rem;margin:0;line-height:1.85}
.tsp-qa p::before{content:"A." !important;position:static !important;display:inline !important;color:var(--accent);font-weight:700;margin:0 .5em 0 0 !important}
.tsp-also{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0 0}
.tsp-also a{display:block;border:1px solid var(--line);background:var(--card,#fff);padding:20px 18px;text-decoration:none;color:var(--ink);transition:background-color .2s,border-color .2s}
.tsp-also a:hover{background:var(--paper,#F5F3EF);border-color:var(--accent)}
.tsp-also .t{font-family:var(--serif);font-size:1rem;display:block}
.tsp-also .s{color:var(--soft);font-size:.82rem;display:block;margin-top:6px;line-height:1.7}
@media(max-width:781px){.tsp-steps{grid-template-columns:1fr}.tsp-also{grid-template-columns:1fr}}
/* .tsp-points は /catalog/ /tour/ が各自のインライン<style>で定義済み（そちらが後勝ちで優先）。
 * /land/ /events/ は定義を持たないため、共通の既定値をここに置く（2026-08-30 サイクル8）。 */
.tsp-points{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:38px 0}
.tsp-point{background:var(--card,#fff);border:1px solid var(--line);padding:24px 20px}
.tsp-point .n{font-family:var(--serif);color:#3d6580;font-weight:700;font-size:1.3rem;letter-spacing:.08em;display:block}
.tsp-point h3{font-size:1.0rem;margin:.5rem 0 .5rem}
.tsp-point p{color:var(--soft);font-size:.86rem;margin:0;line-height:1.75}
@media(max-width:781px){.tsp-points{grid-template-columns:1fr}}
/* .tsp-point は「番号 / 見出し / 本文」の3つ。見出しが1行のカードと2行のカードが混ざると
 * 本文の行頭が29pxずれる（2026-08-30 /land/ /events/ で実測 138/109px）。
 * min-height を使うと見出しが全部1行のページに不要な空きが出るため、
 * subgrid でカード間の行高を共有する（サイクル5 /concept/・サイクル7 /catalog/ と同じ手法）。 */
.tsp-points{grid-template-rows:repeat(3,auto)}
.tsp-points > .tsp-point{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start}
@media(max-width:781px){.tsp-points > .tsp-point{grid-row:auto;grid-template-rows:none}}