@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.1.27
    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
*/

/* ==========================================================================
   Design Tokens

   ここに :root があったが、変数の定義は assets/css/tokens.css に一本化した。
   style.css は編集画面には読み込まれない（add_editor_style() から意図的に
   外してある）ため、ここに変数を置くと編集画面だけ色が出ない、という状態に
   なるため。--gradient-contact もそれで編集画面で解決できず、グラデーションの
   ボタンや帯が真っ白になっていた。

   → サイト共通で使う値は assets/css/tokens.css に書くこと。
     tokens.css はフロント（全ページ）と編集画面の両方から読み込まれる。
     このファイルからも tokens.css の変数はそのまま参照してよい
     （child_tokens → child_style の順で読み込んでいるため）。
   ========================================================================== */

/* ==========================================================================
   エディタ本文（.post_content）のSP基本文字サイズ
   ブログ記事・制作実績・サービス詳細・固定ページ（page.php/front-page.php/
   page-about.php）など、the_content()を出す全テンプレートが共通で
   .post_content クラスを使っている（parts/single/post-body.php・page.php等
   参照）ため、全ページで読み込まれるこのファイルに置く。
   見出し・リンク色などの書体はSWELL本体に任せたままなので、ここでは
   基本の文字サイズ・行送りだけ --fz-jp-base-sp（tokens.css）に揃える */
@media (max-width: 750px) {
    .post_content {
        font-size: var(--fz-jp-base-sp)!important;
        line-height: var(--lh-jp-base-sp)!important;
    }
}

/* ==========================================================================
   サイト共通ヘッダー：CTAボタン化（資料請求 / お問い合わせ）
   全ページで読み込まれるこのファイル（child_style）に置く。renewal.css は
   recruit/lp/portfolio系ページでは読み込まれないため、ヘッダーのような
   サイト全体に出るパーツはそちらに依存させない。

   使い方：外観 > メニュー のヘッダー用メニューに項目を追加し、
   その項目の「CSSクラス」欄に下記を入力するとテキストリンクの代わりに
   ボタン表示になる（PC通常ヘッダー・追従ヘッダー(#fix_header)の両方に
   自動で反映される。どちらも同じメニュー・同じ.c-gnavマークアップのため）。
     - 資料請求（グレー）      → c-navBtn -gray
     - お問い合わせ（グラデーション） → c-navBtn -dark
       ※ -dark は元は黒塗りだったが、サイト共通のCTAグラデーション
         （--gradient-contact／footer .c-contact-cta等と同じ）に統一した
   ========================================================================== */
/* ボタンの見た目そのものは.c-navBtnに持たせ、<li class="c-navBtn -gray"><a>…</a></li>
   （ヘッダーメニュー）・<a class="c-navBtn -gray">…</a>（SPメニュー下部ウィジェットなど、
   liで包まない箇所）のどちらでも同じ丸ボタンになるようにしている。
   2026-09-09: デザイン差し替えに合わせてpadding/letter-spacingを調整
   （実機の見た目に合わせた実測ベースの値。液晶差やブラウザのfont-renderingで
   多少ズレる場合は数値だけ再調整すればよい）。

   2026-09-09 追記（不具合修正）: SWELL本体が
   `.c-gnav>.menu-item>a{height:100%;display:flex;flex-direction:column;
   justify-content:center;padding:0 12px}` をclass2つ+要素1（詳細度0,2,1）で
   当てている。このボタンをliで包まない汎用パーツにした際、下のセレクタの詳細度が
   それより低くなってしまい（`.c-navBtn > a`は0,1,1）、ヘッダーgnav内でだけ
   SWELL側のheight:100%とpadding:0 12pxに負けて、テキストが極端に縦長の
   ボックスに収まり丸（風船）状に潰れる不具合が出た。個別に詳細度を積み増すのは
   親テーマの実装に依存して壊れやすいので、代わりにレイアウトを決める
   プロパティ（height/display/padding等）だけ!importantにして確実に勝たせる。
   色などの見た目だけのプロパティは!important無しのまま。 */
.c-navBtn > a,
a.c-navBtn {
    height: auto !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.875em 2em !important;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: .04em;
    text-decoration: none;
    transition: opacity .25s ease;
}
/* SWELL標準のホバー時下線/背景エフェクト（:after）はボタン内では不要なので消す */
.c-navBtn > a:after {
    display: none !important;
}
.c-navBtn > a:hover,
a.c-navBtn:hover {
    opacity: .8;
}
.c-navBtn.-gray > a,
a.c-navBtn.-gray {
    background: #6c6a6a;
    color: var(--color-bg);
}
.c-navBtn.-dark > a,
a.c-navBtn.-dark {
    background: var(--gradient-contact);
    color: var(--color-bg);
}

/* ヘッダーgnav内でのボタンの並び（余白・縦位置）。見た目自体は上の.c-navBtn参照 */
.c-gnav > .menu-item.c-navBtn {
    display: flex;
    align-items: center;
    margin-left: 0.875em;
    margin-block: auto;
}

/* ==========================================================================
   SPヘッダー：ハンバーガーボタンの丸枠化 ＋ 開いた時のメニューのフルスクリーン化
   （2026-09-09 デザイン差し替え）

   - 閉じている時：ハンバーガーアイコン（.c-iconBtn.-menuBtn）をPCのCTAボタンと
     同じ「輪郭のはっきりした丸」で囲む。SWELL標準はアイコンのみでボタン枠が無い。
   - 開いている時：SWELL標準の#sp_menuは画面幅の88%だけのドロワー
     （.p-spMenu__inner{width:88vw}）で、残り12%は元のページが透けて見える仕様。
     デザインは画面いっぱいの暗色パネルなので、幅を100vwに上書きする。
   - 開いた状態でも上部にロゴが常時見えるよう、閉じるボタンと同じ行に
     .p-spMenu__logo を追加している（出力側は子テーマの
     parts/header/sp_menu.php を参照。親テーマ標準はロゴを出力しない）。
   - 下部ボタン（外観 > ウィジェット の「SPメニュー下部」）は、資料請求／
     お問い合わせのリンクに .c-navBtn -gray / .c-navBtn -dark
     （このファイル冒頭の.c-navBtn参照）を付けて運用する想定。
     liで包まない<a class="c-navBtn -gray">…</a>単体でも同じ見た目になる。
   ========================================================================== */

/* 閉じている時：ヘッダー右上のハンバーガーボタン。
   2026-09-09 不具合修正: SWELL本体は親の.l-header__menuBtn自体を
   `height/width: var(--logo_size_sp)`（＝ロゴと同じ高さ）で固定サイズにしている
   （line-height/text-alignで中身を中央寄せする前提の作り、flexコンテナではない）。
   ここを固定em値（2.75em）にすると親の枠からはみ出し、はみ出した分が上端側に
   食い込んで見える（「ハンバーガーがTOPにくっついている」不具合）。
   固定値をやめて親と同じ var(--logo_size_sp) にすることで、ロゴの行の高さに
   必ず収まるようにした。 */

/* 2026-09-10: .l-header__customBtn（sp_btns.php）は「SP検索をヘッダー内に表示」
   または「カスタムボタンURL」を設定した場合だけ中身が入るSWELL標準の箱。
   このサイトはどちらも未設定で常に空だが、SWELL本体が
   `.l-header__customBtn,.l-header__menuBtn{width:var(--logo_size_sp)}` で
   ロゴ・ハンバーガーと同じ固定幅を割り当てているため、空でもハンバーガーの
   横に余白として居座ってしまう（#header・#fix_header両方に出る）。
   使う予定がないので非表示にする。将来SP検索かカスタムボタンを使う場合は
   このルールを消すこと。 */
.l-header__customBtn.sp_ {
    display: none;
}

.l-header__customBtn, .l-header__menuBtn {
    --logo_size_sp: 4rem;

    & .c-iconBtn__icon {
        font-size: 2rem;
    }
}
.l-header__menuBtn.sp_ .c-iconBtn.-menuBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--logo_size_sp);
    height: var(--logo_size_sp);
    border: 1px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
}

/* 閉じている時：ヘッダー用メニュー（.c-gnav）はSWELL標準だと960px未満で
   丸ごとdisplay:noneになり、資料請求/お問い合わせボタンごと消えてしまう
   （ハンバーガーメニューに一本化される仕様のため）。デザインはSPでもこの2つの
   ボタンだけは常時ヘッダーに残す仕様なので、960px未満だけ.c-gnavを再度表示し、
   その中の.c-navBtn以外の項目（通常のテキストリンク）だけ隠す。
   対象は通常ヘッダー（#header）だけでよい。#fix_header（追従バー）はSPでは
   常にdisplay:none（SWELL標準どおり）のままなので触らない
   （下の「FV重ねページ：SPはヘッダー自体を重ねて追従させる」の節参照）。 */
@media (max-width: 959px) {
    #header .l-header__gnav.c-gnavWrap {
        display: flex !important;
        align-items: center;
    }
    #header .c-gnav {
        display: flex;
        align-items: center;
    }
    #header .c-gnav > .menu-item:not(.c-navBtn) {
        display: none !important;
    }
}

/* 閉じている時：SPヘッダーのpadding・間隔まとめ（2026-09-10）
   1. 上下padding：SWELL本体は #header .l-header__inner に padding:0 を
      当てており、ヘッダーの高さはロゴ／ハンバーガーボタン自身の高さ
      （--logo_size_sp）がそのままヘッダーの高さになる作り（＝そもそも
      余白という概念が無い）。全ページ共通で余白を足す（当初は採用・
      エントリー・旧ポートフォリオだけに絞る.mda-legacy-headerクラスで
      対応していたが、「旧ページだけでなく全体に一括で調整できるように
      したい」との仕様変更を受けてページ限定を撤廃した）。
   2. Contact us（.c-gnav側）とハンバーガーの間の余白が「あったりなかったり
      する」不具合：.l-header__inner はコア標準で display:flex;
      justify-content:space-between（ロゴ・gnav・ハンバーガーの3つを
      両端揃え＋間を均等割り）。間隔そのものを決める指定（gap）が無いため、
      ロゴやメニュー文言の幅次第でgnavとハンバーガーの間が0に近いくらい
      詰まることがあった。gapを足して、余白が最低この分は必ず確保される
      ようにする（space-betweenは残りの余白があればさらに広げる。gapより
      狭くはならない）。
   ※ .top（TOPページ）だけはrenewal.css側に元から
     `.top #header .l-container{padding-block:.5rem;gap:1rem}`という
     同種の対応が先に入っており、詳細度（1,2,0）がこのルール（1,1,0）より
     高いため、gapの値自体は同じ1remで実害は無いが、padding-blockだけ
     0.5remに負けてしまっていた（このルールに!importantを付けている理由）。 */
@media (max-width: 959px) {
    #header .l-header__inner {
        gap: 1rem;
        padding-block: 1rem !important;
    }
}

/* 3. 左右padding：採用・エントリー（renewal.css・legacy.cssどちらも読み込まない）
      と旧ポートフォリオ（legacy.cssのみ、.l-container自体の定義が無い）だけ、
      ハンバーガーが画面端に張り付く（左右の余白が無い）不具合。
      .l-container自体はコア標準で padding-left/right: var(--swl-pad_container,0)
      （カスタマイザー設定値）を使うが、renewal.cssを読み込むページは
      .l-container{padding-inline:var(--space-3/5)}で独自の値に上書きしている
      ため、カスタマイザー設定に何が入っていても実害が無かった。renewal.css
      （もlegacy.cssも）読み込まないページだけ、コアの値がそのまま出てしまう。
      ヘッダー・追従ヘッダーだけは、読み込まれているCSSに関係なく常に
      一定の左右余白を持たせる（--space-3/5はtokens.cssの値。全ページで
      読み込まれるファイルなので、renewal.css非読み込みページでも使える）。 */
#header .l-container,
#fix_header .l-container {
    padding-inline: var(--space-5, 2.5rem);
}
@media (max-width: 750px) {
    #header .l-container,
    #fix_header .l-container {
        padding-inline: var(--space-3, 1rem);
    }
}

/* #fix_header内部のレイアウト（PC用）。通常ヘッダー側は .l-header__inner に
   コア標準でdisplay:flexが当たっているが、#fix_header側の
   .l-fixHeader__inner にはコアに一切レイアウト指定が無く（ロゴ・gnavとも
   ただのdiv）、本来は横並びにならず縦積みになってしまうはずの状態だった。
   #fix_headerはPC専用（SPは下の節の通り別方式）なので実害はPC限定だが、
   ページ限定にせずここで一律flex化しておく。 */
#fix_header .l-fixHeader__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}

/* 2026-09-10: TOPページの#fix_headerだけ、下線（.menu-item>a:after）とバー
   下端の間に余計な余白ができる不具合。renewal.cssの`.top { & #header
   .l-container, & #fix_header .l-container, & #footer .l-container {
   padding-block:.5rem } }`（#header/#fix_header/#footerまとめて0.5rem足す
   一括指定）が原因。#header側はposition:absoluteで高さを持たないため
   実害が出ないが、#fix_headerは実際に高さのある浮いたバーなので、この
   0.5rem分だけ下線とバー下端の間に隙間が見えてしまう。#fix_headerだけ
   打ち消す（#header/#footerは触らない。他ページはこのrenewal.css側の
   .topスコープ自体が効かないので元々問題ない）。
   renewal.cssは.top #fix_header .l-containerというidを含む詳細度
   （1,2,0）で、しかも読み込み順もstyle.cssより後のため、!importantが必要。 */
.top #fix_header .l-container {
    padding-block: 0 !important;
}

.c-gnav>.menu-item>a:after {position: absolute;}

.c-gnav>.menu-item a {
    padding-block: 1.6rem;


    @media (max-width: 750px) {
    & .ttl {
        font-size: 1.5rem;
      }
        }
}



/* 開いている時：パネル本体をフルスクリーン化 + 暗色に。
   2026-09-09 不具合修正: .p-spMenu__inner自体にbackgroundを付けても
   反映されなかった原因が判明。SWELL本体は.p-spMenu__inner:beforeという
   疑似要素を position:absolute; inset:0（全面カバー）で敷いており
   （中身は空だが要素自体は既に存在する）、これが.p-spMenu__inner本体の
   背景の上に重なって描画されるため、本体側にbackgroundを付けても
   ::beforeの下に隠れて見えなかった。実際に背景色を乗せる先はこの
   ::before側。色はサイト共通トークン var(--color-black)（tokens.css）に
   統一した。 */
#sp_menu.p-spMenu .p-spMenu__inner {
    width: 100vw !important;
    color: var(--color-bg) !important;
}
#sp_menu.p-spMenu .p-spMenu__inner::before {
    background: var(--color-black) !important;
}
#sp_menu.p-spMenu.-left .p-spMenu__inner {
    transform: translateX(-100vw);
}
#sp_menu.p-spMenu.-right .p-spMenu__inner {
    transform: translateX(100vw);
}
[data-spmenu="opened"] #sp_menu.p-spMenu .p-spMenu__inner {
    transform: translateX(0);
}

/* ロゴ・閉じるボタンの行（.p-spMenu__inner の padding-top: var(--logo_size_sp) 分の高さ）
   2026-09-10: top:0だと画面上部にぴったりくっついて見えるため、1rem空ける。 */
#sp_menu .p-spMenu__logo,
#sp_menu .p-spMenu__closeBtn {
    position: absolute;
    top: 1rem;
    height: var(--logo_size_sp);
    display: flex;
    align-items: center;
    z-index: 1;
}
#sp_menu.-right .p-spMenu__logo { left: 1.25em; }
#sp_menu.-left  .p-spMenu__logo { right: 1.25em; }
#sp_menu.-right .p-spMenu__closeBtn { right: 1.25em; }
#sp_menu.-left  .p-spMenu__closeBtn { left: 1.25em; }

/* ロゴ画像は黒の線画なので、FV重ねページ（.mda-fv-dark）と同じやり方で白反転させる */
#sp_menu .p-spMenu__logo img {
    filter: brightness(0) invert(1);
}

/* 2026-09-10: TOPページだけロゴが二重に見える不具合の対策。
   SWELL標準の「トップページ限定ヒーローヘッダー」機能（is_use('top_header')。
   TOPページだけ有効）がオンだと、head_logo()は常に-top用/-common用の
   2枚のimgを出力する（スクロールでどちらを見せるか切り替える仕組み）。
   #header・#fix_header側はSWELLがTOPページだけ読み込む専用CSS
   （swell/build/css/modules/parts/top-header--spfix.css）がどちらか一方を
   隠してくれるが、この.p-spMenu__logoは子テーマが独自追加した要素なので
   そのCSSが一切届かず、2枚とも表示されていた（実際は同じ画像ファイルの重複）。
   #headerの非スクロール時と同じ状態（-topを表示・-commonを隠す）に揃える。 */
#sp_menu .p-spMenu__logo .c-headLogo__img.-common {
    display: none;
}

#sp_menu .p-spMenu__closeBtn {
    justify-content: center;
}
#sp_menu .p-spMenu__closeBtn .c-iconBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 閉じている時のハンバーガーボタンと同じ理由でvar(--logo_size_sp)にする
       （固定em値だと親の.p-spMenu__closeBtn（同じくvar(--logo_size_sp)固定）
       からはみ出す） */
    width: var(--logo_size_sp);
    height: var(--logo_size_sp);
    border: 1px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
}

/* 本文側は上のロゴ/閉じるボタン行の高さぶん、左右の余白を取り直す */
#sp_menu .p-spMenu__body {
    padding: 0 6vw 10vw;
}

/* ナビゲーション：中央寄せ・下線なし・行間を広めに */
#sp_menu .c-widget__title.-spmenu {
    display: none; /* デザインに見出しテキストは無いため非表示（未入力なら元々空） */
}
#sp_menu .p-spMenu__nav {
    margin-top: 2.5em;
}
#sp_menu .c-spnav {
    text-align: center;
}
#sp_menu .c-spnav a {
    border-bottom: none;
    padding: 1.1em .25em!important;
    color: var(--color-bg);
    font-size: 1.5rem;
}

/* 下部ボタン（資料請求／Contact us）：横幅いっぱいの丸ボタンを縦に並べる。
   2026-09-10 訂正: 当初「外観 > ウィジェット の『SPメニュー下部』
   （#sp_menu_bottom .p-spMenu__bottom）」に別枠で出ている前提で書いていたが、
   実際のマークアップ（ユーザー提供）を見たところ、そのような要素はこのサイトに
   存在せず、資料請求／Contact usは普通のヘッダー用メニュー項目として
   <ul class="c-spnav">の中に他の項目と同じ並びで<li class="c-navBtn -gray/-dark">
   として入っているだけだった。つまり.p-spMenu__bottomを前提にしていた
   これらのルールは一度も効いていなかった（資料請求がグレー×白文字のまま
   だった不具合・下の余白が付かなかった不具合の真因）。.c-spnav > li.c-navBtn
   を対象にした正しいセレクタに書き換える。
   間隔（直前の通常メニュー項目との余白／ボタン同士の余白）はSP_menu.jpg
   （デザイン書き出し、実測4倍換算＝375px基準で計算）を実測した値。 */
#sp_menu .c-spnav > li.c-navBtn {
    margin-top: 3rem;
}
#sp_menu .c-spnav > li.c-navBtn + li.c-navBtn {
    margin-top: 1.95rem;
}
#sp_menu .c-spnav > li.c-navBtn > a {
    width: 100%;
}
/* 暗い背景の上でグレー（.-gray）は視認性が落ちるため、ここだけ白地に上書きする
   （お問い合わせ側のグラデーション.-darkは元々暗い背景でも読めるので上書き不要） */
#sp_menu .c-navBtn.-gray > a {
    background: var(--color-bg);
    color: var(--color-dark);
}
/* プライバシーポリシー：2026-09-10、実マークアップ確認（ユーザー提供）。
   これも.p-spMenu__bottomではなく同じ<ul class="c-spnav">内の項目
   （<li class="... menu-item-privacy-policy ..."><a><span class="ttl">…</span></a></li>）
   だった。menu-item-privacy-policyはWP標準機能が自動で付与するクラス
   （設定 > プライバシー でプライバシーポリシーページを指定すると、
   そのページへのメニュー項目に自動で付く。個別のID等に依存しないので安定して使える）。
   他の項目より小さく・控えめな色でContact usボタンの直下に出す
   （.c-spnav aの基本padding/color/font-sizeを、より詳細度の高いこちらで上書き）。
   margin-topはSP_menu.jpg実測：Contact usボタン下端からの間隔。 */
#sp_menu .c-spnav > li.menu-item-privacy-policy {
    margin-top: 2.25rem;
}
#sp_menu .c-spnav > li.menu-item-privacy-policy > a {
    padding: 0 .25em;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, .55);
}

/* プライバシーポリシーはPC側（.c-gnav、ヘッダー通常メニュー）には出さない。
   #sp_menuの.c-spnavも通常ヘッダーの.c-gnavも同じWPメニュー（header_menu）を
   出し分けているだけの別出力なので、メニューに項目を追加すると両方に出てしまう。
   PCはフッター等に別途プライバシーポリシーへのリンクがある想定のため、
   .c-gnav側だけ非表示にする（.c-spnav側は対象外なのでSPには残る）。 */
.c-gnav > .menu-item.menu-item-privacy-policy {
    display: none;
}

/* ==========================================================================
   管理バー（wp-adminにログイン中に出る黒いツールバー）とSPの追従ヘッダーが
   重なって隠れる不具合（2026-09-09、ログイン時のみ再現するとの報告）

   SWELL本体の「SPでヘッダーを追従させる」機能は
   `.l-header[data-spfix="1"]{position:sticky;top:var(--swl-adminbarH,0)}`
   という実装で、管理バーの高さぶんだけ下にずらす前提になっている。
   ところがこのテーマには --swl-adminbarH を実際にセットしている箇所が
   （PHP・JSともに）見当たらず、常にフォールバック値の0が使われていた。
   その結果、ログイン中は「top:0に貼りつく管理バー」と「top:0に貼りつく
   追従ヘッダー」が同じ位置を取り合い、ヘッダー（ロゴ・ハンバーガー）が
   管理バーの下に隠れて見えなくなる。
   WP標準の管理バーの高さ・ブレークポイント（782px以下で46px、それ以外は32px）
   に合わせて、この変数を子テーマ側で定義しておく。

   2026-09-09 追記（不具合修正）: 最初 body.admin-bar に定義していたが直らなかった。
   原因はSWELLがbody_class()を<body>ではなく#body_wrap（bodyの中の最初のdiv）に
   対して呼んでいるため（header.php参照）。.admin-barクラスは#body_wrap側にしか
   付かず<body>には一切付かないので、body.admin-barは常にマッチしていなかった。
   #body_wrap.admin-bar に変更。 */
#body_wrap.admin-bar {
    --swl-adminbarH: 32px;
}
@media (max-width: 782px) {
    #body_wrap.admin-bar {
        --swl-adminbarH: 46px;
    }
}

/* ==========================================================================
   ヘッダーロゴ上のキャッチコピー（常時・PC/SP問わず・スクロール追従時も表示）
   SWELL標準の「キャッチフレーズ設定」は、
     - ヘッダーバーに表示（head_bar） … PC専用（.pc_クラスでSPは常に非表示）
     - ロゴの近くに表示（head_wrap）   … SP幅では親テーマ側CSSの
       `.l-header__inner .c-catchphrase{display:none}` で強制的に隠れる
   ため、どちらもPC/SP両方・常時表示という要件に合わない。また追従ヘッダー
   （#fix_header）はそもそもキャッチフレーズ自体を出力しない。
   そのため子テーマ側の header_contents.php / fix_header.php で、phrase_pos
   機構は使わず常に独自の .c-headCatch をロゴの直前に出力している。
   （外観 > カスタマイズ > ヘッダー の「キャッチフレーズの表示位置」は
   二重表示を避けるため「表示しない」にしておくこと）
   ここではその2箇所（通常/追従ヘッダー）を縦積みにし、キャッチコピーを
   常にロゴの真上・左揃えで出す。
   ========================================================================== */
.l-header__logo,
.l-fixHeader__logo {
    flex-direction: column;
    align-items: flex-start;
}
.c-headCatch {
    margin: 0 0 0.3em;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    max-width: 100%;
    display: none; /* 2026-09-07: 非表示に。PHP側の出力はそのまま残してあるので、
                       復活させる場合はこの1行を消すだけでよい */
}

/* ==========================================================================
   サイト共通フッター
   全ページ共通のこのファイルに置く（renewal.cssはrecruit/lp/portfolioで
   読み込まれないため）。.l-container は renewal.css の同名クラスの定義には
   依存せず、.c-footer配下限定で同じルール（width:85%・max-width:var(--container-w)、
   .c-contact-cta__inner 等と同じ型）を自前で用意している。--container-w 自体は
   tokens.css の変数（全ページで読み込まれる）なので参照して問題ない。

   中身のPHP側の対応は parts/footer/footer_contents.php 参照：
     - 見出し付きグループ: 外観 > メニュー の「フッター」を2階層で組む
       （親項目＝見出し、子項目＝リンク）
     - SNSアイコン・コピーライト: 外観 > カスタマイズ > フッター の設定を流用
     - FILE SENDボタン／下部バナー（PRODUCTION SUPPORT）: リンク先未定のため
       # のまま（footer_contents.php内の「TODO: リンク先を設定」を参照して
       差し替え）。CONTACT USバナーは /contact/ 固定リンク

   2026-09-10 デザイン刷新（差分の要点。旧デザインとの違いに注意）：
     - クイックリンク一覧（c-footQuick）は廃止。SNS＋FILE SENDだけの
       .c-footer__quick になった
     - .c-footer__main（quick縦通し＋nav/bannerの2カラムgrid）は廃止。
       代わりに .c-footNav をフル幅で出したあと、.c-footer__bottom で
       quick＋banner×2を横並びにする構成
     - 下部バナーは「PRODUCTION SUPPORT」1個→同じ横幅・高さの2個
       （PRODUCTION SUPPORT／CONTACT US）に変更
     - .c-footNav__col の左罫線（border-left）は色を変更（旧
       rgba(255,255,255,.2) → #c0c0c0、ユーザー指定）。他の文字色・サイズは
       実測で旧デザインと有意差なしと判断し維持している
     - SP版は c-footBanner（PRODUCTION SUPPORT）がフッター内の並び順の
       先頭（ロゴより上）に来て、.-contact（CONTACT US）は非表示になる。
       .c-footer__bottom を display:contents にして中の3要素
       （quick／banner／banner.-contact）を .c-footer__top 直下のflexアイテム
       として扱い、order で並べ替えている（TOPページのWorksセクションで
       使った手口と同じ）

   2026-09-14 SP版デザイン刷新（スクショ実測。差分は下の@media(max-width:750px)内）：
     - .c-footNav：SPは1カラム（縦一列）→ 明示的な2カラム（奇数列は左フロート・
       偶数列は右フロート）に変更。「採用情報」「プライバシーポリシー」
       （-sub）は2カラムから外し、両カラムの下にフル幅で並べる
     - .c-footer__quick：SPはSNS＋FILE SENDの横並び→縦積みに変更。
       SNSアイコンは大きく・間隔も広く、FILE SENDは横幅いっぱいの
       四角いボタンにした

   全体を .c-footer { } 1つでネストしてある。中の各ルールは自動的に
   「.c-footer 」を前置した状態になるため、
     - 親テーマのfooter.css（.l-footer a, .l-footer span{color:inherit}、
       詳細度0,1,1）に文字色を上書きされる事故（実際に一度発生した）を
       ルールを追加するたびに気にする必要がなくなる
     - フッター用のクラス名を毎回フルで書かなくてよい
   のが狙い。新しいパーツを足すときもこの .c-footer { } の中に書き足せばよい。
   ========================================================================== */
.c-footer {
    position: relative;
    background: var(--color-dark);
    color: var(--color-bg);

    & .l-container {
        /* 2026-09-10: 固定paddingではなく、他のコンテンツ（.c-contact-cta__inner等）と
           同じ「width:85%・max-width:var(--container-w)」の型に統一（ユーザー指定） */
        width: 85%;
        max-width: var(--container-w);
        margin-inline: auto;
    }

    & .c-footer__top {
        /* renewal.css の `.top #footer .l-container { padding-block:0.5rem }`
           （TOPページ限定、#footer というID込みのセレクタ）に詳細度で負けて、
           ロゴ上の余白がほぼ消えていた（.c-footer__top と .l-container は
           同一要素）。IDセレクタにクラスだけでは勝てないため !important で
           強制する（このファイル既存の「SWELL本体を上書きするための
           !important」方針と同じ扱い） */
        padding-top: 6rem !important;
        padding-bottom: 4rem !important;
        padding-inline: 0!important;
    }

    & .c-footer__logo {
        margin-bottom: 4rem;

        /* ロゴ画像が黒地の線画のため、暗い背景でも見えるように白反転させる。
           将来的に多色ロゴへ差し替える場合はこのfilterを外すこと */
        & .c-footer__logo-img {
            display: block;
            filter: brightness(0) invert(1);
            height: 40px;
            width: auto;
        }
        & .c-footer__logo-text {
            color: var(--color-bg);
            font-size: 1.5rem;
            font-weight: 700;
            text-decoration: none;
        }
    }

    /* ---------- 下段：SNS＋FILE SEND ／ バナー×2 ---------- */
    /* auto列（quick）＋バナー2個を1frずつ。quickだけ右マージンを足して
       「quick〜バナー間」を「バナー同士の間」より広く空ける（新デザインの
       画像を実測すると2つの間隔が均等ではなかったため） */
    & .c-footer__bottom {
        display: grid;
        grid-template-columns: auto 1fr 1fr;
        column-gap: 1.75rem;
        align-items: stretch; /* quickをbannerと同じ高さまで伸ばす */
    }

    /* ---------- 左：SNS＋FILE SEND ---------- */
    & .c-footer__quick {
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* SNSを上端、FILE SENDを下端に。banner側の高さに合わせて伸縮する */
        margin-right: 3.25rem;
    }
    & .c-footer__sns.c-iconList {
        display: flex;
        justify-content: center; /* ulがFILE SENDボタンと同じ幅までstretchされるため、
                                     中身のアイコンを明示的に中央揃えにする（指定が無いと左寄りになる） */
        gap: 1.1rem;

        /* SNSアイコンの並び順はSWELL標準では設定欄の並び（Facebook→Instagram…固定）に
           なってしまうため、デザイン案の並び（Instagram→Facebook→TikTok）にCSSのorderで矯正。
           TikTokだけorder未指定だと初期値0になり先頭に来てしまうので明示的に3を指定 */
        & .c-iconList__item.-instagram {
            order: 1;
        }
        & .c-iconList__item.-facebook {
            order: 2;
        }
        & .c-iconList__item.-tiktok {
            order: 3;
        }
        & .c-iconList__link {
            margin: 0;
            color: rgba(255, 255, 255, .75);
            width: 1.3em;
            height: 1.3em;

            &:hover {
                color: var(--color-bg);
            }
            & i {
                width: 100%;
                font-size: 1.3rem;
            }
        }
    }

    & .c-footFileSend {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        padding: 1em 2.2em;
        border: 1px solid rgba(255, 255, 255, .6);
        border-radius: 2px;
        color: var(--color-bg);
        font-size: 0.8125rem;
        letter-spacing: 0.15em;
        text-decoration: none;
        transition: background-color .2s ease, color .2s ease;

        &:hover {
            background: var(--color-bg);
            color: var(--color-black);
        }
    }

    /* ---------- ナビ：見出し付きグループ（私たちについて／サービス／…） ---------- */
    /* 横幅いっぱいに4列。デザイン案では「制作実績＋最新情報」「会社概要＋お問い合わせ＋採用情報」のように
       複数グループが同じ列に縦積みされている。これはメニュー項目数によって
       自動で変わるものなので、flexで横一列に並べるのではなくCSS多段組み
       （columns）で流し込み、列に収まる分だけ自然に積ませている。
       ※ どのグループがどの列に来るかは高さのバランスで決まるため、デザイン案と
       厳密に一致しない場合がある。グループ分け自体（例：プライバシーポリシーを
       採用情報の子項目にする）は 外観 > メニュー の「フッター」側の親子構造で調整する */
    & .c-footNav {
        margin-bottom: 4rem; /* 下の.c-footer__bottom（quick＋banner）との間 */
        /* column-widthを併用すると、横幅が足りない中間サイズの画面で列数が
           勝手に3列→2列…と減ってしまう（＝ご指摘の「カラム落ち」）。
           750px以下（SP版）以外は常に4列を保ちたいので、列数だけを指定する */
        columns: 4;
        column-gap: 2.5rem;
        line-height: 1.4;

        & .c-footNav__col {
            break-inside: avoid;
            margin-bottom: 3rem;
            padding-left: 1.75rem;
            /* 2026-09-10: 旧 rgba(255,255,255,.2) から色指定に変更（ユーザー指定） */
            border-left: 1px solid var(--color-border);

            & .c-footNav__ttl {
                margin: 0 0 1.5rem;
                font-size: var(--fz-jp-note-pc);

                & a {
                    color: var(--color-bg);
                    text-decoration: none;
                }
            }
            & .c-footNav__list {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;

                & a {
                    color: var(--color-text-sub);
                    font-size: var(--fz-jp-xs-pc);
                    text-decoration: none;
                    transition: color .2s ease;

                    &:hover {
                        color: var(--color-bg);
                    }
                }
            }

            /* 見出し扱いにしたくない項目（お問い合わせ／採用情報など）用。
               外観 > メニュー でその項目の「CSSクラス」欄に -sub と入れると適用される。
               ※ デザイン案では文字色・文字サイズは通常グループと同じ。罫線を消して
               見出しの下マージンを詰めるだけの「補足リンク」的な扱いにするためのもの */
            &.-sub {
                margin-bottom: 0.9rem;
                padding-left: 0;
                border-left: none;

                & .c-footNav__ttl {
                    margin-bottom: 1.5rem;
                    font-size: var(--fz-jp-note-pc);
                }
                & .c-footNav__list {
                    gap: 0.4rem;
                }

                /* 2026-09-10: 新デザインの画像を実測すると「プライバシーポリシー」は
                   文字サイズだけ他のリンクと同じ0.75rem（=通常グループの
                   c-footNav__list相当）に縮み、色は白のまま（グレーではない）。
                   色を変えない modifier なので -gray ではなく -mini という名前にした
                   （旧 -gray から改名。外観 > メニュー 側のCSSクラス欄も
                   -mini に書き換えること） */
                &.-mini .c-footNav__ttl  {
                    font-size: var(--fz-jp-xs-pc);
                }
            }

            /* 「お問い合わせ」だけグラデーションのピルボタンにする用。
               外観 > メニュー でその項目の「CSSクラス」欄に -cta と入れると適用される
               （-sub の代わりに指定する。見出し扱いの下線・余白は元々不要なため） */
            &.-cta {
                margin-bottom: 0.9rem;
                padding-left: 0;
                border-left: none;

                & .c-footNav__ttl {
                    margin-bottom: 0;

                    & a {
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0.8em 2.75em;
                        border-radius: 999px;
                        background: var(--gradient-contact);
                        color: var(--color-bg);
                        font-size: 0.8125rem;
                        letter-spacing: 0.05em;
                        transition: opacity .2s ease;
                        
                        &:hover {
                            opacity: 0.8;
                        }
                    }
                }
            }
        }
    }

    /* ---------- 下段バナー（PRODUCTION SUPPORT／CONTACT US） ---------- */
    /* 【原因判明】親テーマの assets/css/footer.css（main.cssに同梱）に
       `.l-footer a, .l-footer span { color: inherit }` という詳細度0,1,1の
       ルールがあり、単一クラス（0,1,0）のままの色指定は全部これに負けて
       「フッター文字色」設定（＝白）を継承してしまう。白背景のバナーだけ
       これが起きると白文字×白背景で消えて見える。.c-footer配下でネストする
       ことで詳細度が自動的に0,2,0以上になり、確実にこちらが優先される */
    & .c-footBanner {
        position: relative;
        display: block;
        overflow: hidden;
        padding: 3.2rem 2rem;
        background: var(--color-bg);
        text-align: center;
        text-decoration: none;

        & .c-footBanner__ghost {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            color: rgba(26, 16, 14, .12);
            font-size: 3rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            white-space: nowrap;
            pointer-events: none;
            font-family: var(--font-en);
            line-height: 1.3;
            mix-blend-mode: multiply; /* CONTACT US側（グラデーション背景）でも自然に
                                          馴染ませるため乗算に。白背景側は乗算でも
                                          見え方が変わらないので共通化できる */
            transition: background-color .5s ease, color .5s ease;

            @media (max-width: 750px) {
               font-size: 4.375rem;line-height: 2.3;
            }
        }
        transition: background-color .5s ease;

        /* hover：PRODUCTION SUPPORT（無印）は背景#7F7F80＋ゴースト文字#868689＋
           本文（c-footBanner__text）は白。乗算のままだと灰色の背景に乗算されて
           色が沈むので、hover時はmix-blend-modeを解除してそのままの色で見せる
           （ユーザー指定）。トランジションを.2s→.5sにしたのもユーザー指定
           （速いとちらつくため）。
           CONTACT US（.-contact）は下のブロックで背景を単色#692446に切り替える
           （ghostはmix-blend-mode:multiplyのまま維持） */
        &:hover {
            background-color: #7F7F80;

            & .c-footBanner__ghost {
                color: #868689;
                mix-blend-mode: normal;
            }
            & .c-footBanner__text {
                color: var(--color-bg);
            }
        }
        & .c-footBanner__text {
            position: relative;
            z-index: 1;
            display: block;
            color: var(--color-black);
            font-size: var(--fz-jp-base-pc);
            transition: color .5s ease;

            /* 「制作のリソース不足・外注のご相談はこちら」の途中の<br>はSPだけ
               効かせる（ユーザー指定。PCは横幅に余裕があり1行で収まる） */
            & br {
                display: none;

                @media (max-width: 750px) {
                    display: inline;
                }
            }
        }

        /* 「CONTACT US」（お問い合わせ）バナー。見た目はPRODUCTION SUPPORTと
           同じ（ghost＋text構成）で、背景だけ .c-contact-cta 等と共通の
           グラデーションに差し替え、文字色を白にする */
        &.-contact {
            background-color: var(--color-accent-from); /* 変数が解決できない環境でも白にならないための下地 */
            background-image: var(--gradient-contact);

            & .c-footBanner__text {
                color: var(--color-bg);
            }

            /* hoverはグラデーションをやめて単色#692446に切り替える */
            &:hover {
                background-color: #692446;
                background-image: none;

                & .c-footBanner__ghost {
                    color: rgba(26, 16, 14, .12); /* PRODUCTION SUPPORT側の上書きを打ち消し、通常時と同じ乗算のまま */
                    mix-blend-mode: multiply; /* 同上。無印hoverのnormal解除をここで打ち消す */
                }
            }
        }
    }

    /* ---------- 最下部：コピーライト ---------- */
    & .l-footer__foot {
        margin-top: 4rem;
        padding-block: 2rem;
        text-align: center;

        & .copyright {
            color: var(--color-text-sub);
            font-family: var(--font-en);
            font-size: var(--fz-jp-note-pc);
            letter-spacing: 0.05rem;
        }
    }

    @media (max-width: 750px) {
        /* .l-container は width:85%（renewal.css の .l-container と同じ型）なので
           SP専用の上書きは不要。他の固定px指定が残っていないかだけ確認すること */
        & .c-footer__top {
            /* ロゴ／ナビ／quick／バナー×2 を直接のflexアイテムとして扱い、
               orderで並べ替える（.c-footer__bottomはdisplay:contentsで
               ボックスとしては消える）。PCのgrid配置はこの下で無効化 */
            display: flex;
            flex-direction: column;
            padding-top: 4rem!important;
            padding-bottom: 3rem!important;
        }
        & .c-footer__logo {
            order: 0;
        }
        & .c-footNav {
            order: 1;
            /* 2026-09-14 スクショ実測（デザイン再確認）：3rem→5remに拡大。
               実際のSP画面をデザイン画像と同じ比率で測り直すと、ここの余白が
               デザインの約7割しかなかった */
            margin-bottom: 5rem;
            width: 100%;
            columns: unset; /* PC用の複数カラム（columns:4、高さでバランスする「新聞組み」）を解除 */
            display: flow-root; /* floatの高さをこの要素の高さにも反映させる（clearfix） */

            /* 2026-09-14 SP版デザイン刷新（スクショ実測）：明示的な2カラムに変更。
               ただしCSSの複数カラム（columns、上のPC用ルール）はまとまりごとの
               高さでバランスさせる仕組みのため、「私たちについて」（項目3つ）と
               「サービス」（項目7つ）のように分量が大きく違うグループを
               横に並べたいこの見た目には使えない（高さバランス優先で
               両方1列目に入ってしまう）。そこで昔ながらの「奇数列は左フロート・
               偶数列は右フロート」の2カラム組みにした。フロートは同じ側の
               直前の要素の直下に潜り込む性質があるため、左右の列がそれぞれ
               独立した高さで詰まっていく（サービス側の項目数が多くても、
               私たちについて側の次のグループの位置には影響しない）。
               ※ 外観 > メニュー のフッターメニューが「私たちについて／サービス／
               制作実績／最新情報／会社概要／採用情報／プライバシーポリシー」の
               順で登録されている前提（奇数番目＝左列、偶数番目＝右列になる） */
            & .c-footNav__col {
                width: calc(50% - 1rem);

                /* 最低フォントサイズ1.25rem(20px)のルール（ユーザー指定、SPのみ。
                   PCはmax-width:750px対象外なので現行サイズ0.75〜0.875remのまま）。
                   -sub／-sub.-mini／-cta はPC側の指定がこれより詳細度が高いため
                   下でそれぞれ個別に上書きする */
                & .c-footNav__ttl {
                    font-size: var(--fz-jp-note-sp);
                }
                & .c-footNav__list a {
                    font-size: var(--fz-jp-note-sp);
                }

                &:nth-child(odd) {
                    float: left;
                }
                &:nth-child(even) {
                    float: right;
                }

                /* 「採用情報」「プライバシーポリシー」はDOM順で奇数/偶数どちらに
                   来ても2カラムには含めず、両カラムの下にフル幅・1列で並べる
                   （スクショ実測。罫線が無いのはPC同様） */
                &.-sub {
                    float: none;
                    clear: both;
                    width: 100%;

                    & .c-footNav__ttl {
                        font-size: var(--fz-jp-note-sp);
                    }
                    /* -mini（プライバシーポリシー）はPC側が.-sub.-miniの詳細度分
                       上のルールより高いため、同じ詳細度で個別に上書きする */
                    &.-mini .c-footNav__ttl {
                        font-size: var(--fz-jp-note-sp);
                    }
                }
                &.-cta .c-footNav__ttl a {
                    font-size: var(--fz-jp-note-sp);
                }
            }
        }
        & .c-footer__bottom {
            display: contents;
        }
        & .c-footer__quick {
            order: 2;
            margin-right: 0;
            flex-direction: column; /* SNS→FILE SENDの縦積みに変更（スクショ実測） */
            /* 2026-09-14 スクショ実測（デザイン再確認）：2.5rem→5.5remに拡大。
               実機スクショをデザイン画像と同じ比率（画像幅に対する割合）で
               測り直すと、SNSとFILE SENDの間がデザインの半分程度しかなかった */
            gap: 5.5rem;
        }
        & .c-footer__sns.c-iconList {
            /* 2026-09-14 スクショ実測（デザイン再確認）：アイコン本体・間隔とも
               デザインの半分程度だったため拡大（gap 4rem→9.5rem） */
            gap: 9.5rem;

            & .c-iconList__link {
                width: 3.25rem;
                height: 3.25rem;

                & i {
                    font-size: var(--fz-jp-h-lg-sp);
                }
            }
        }
        & .c-footFileSend {
            /* PCはSNSの隣に収まる小さいボタンだが、SPは横幅いっぱいの
               四角いボタンに変える（スクショ実測）。
               2026-09-14：padding 1.4rem→2.75rem、font-size 1.25rem→1.5remに
               拡大（デザイン画像と同じ比率で測り直すとボタンの高さが
               デザインの6割程度しかなかった） */
            width: 100%;
            padding: 2.75rem 2.2em;
            font-size: 1.5rem;
        }
        & .c-footBanner {
            order: -1; /* フッター内の並び順の先頭（ロゴより上）へ */
            width: 100%;
            margin-bottom: 3rem;
            /* 2026-09-14 スクショ実測（デザイン再確認）：デザイン画像と同じ比率で
               測り直すと、この白いバナー自体の高さがデザインの半分強しかなかった。
               PC側は現状のpadding(3.2rem 2rem)のままなので、SPだけ縦方向を
               拡大する（横方向はwidth:100%が上で.l-containerの幅を継承しており
               ズレていなかったので変更なし） */
            padding-block: 4.75rem;
            
            

            &.-contact {
                display: none; /* SP版はCONTACT USバナーを非表示 */
            }

            & .c-footBanner__text {
                /* 最低フォントサイズ1.25rem(20px)は満たしつつ、実測に合わせて
                   1.75remまで拡大（バナー本文がデザインより小さかったため） */
                font-size: var(--fz-jp-h-sm-sp);
                line-height: 1.6;
            }
        }
        & .l-footer__foot .copyright {
            font-size: var(--fz-jp-note-sp); /* 最低フォントサイズ1.25rem(20px)のルール（ユーザー指定、SPのみ） */
        }
    }
}


/* ==========================================================================
   FV重ねページ：黒いFVの上にヘッダーを白抜きで重ねるレイアウト

   固定ページのテンプレートに「FV重ね（黒背景・ヘッダー白抜き）」
   （tmpl-fv-dark.php）を選んだページ、および「私たちについて」ページ
   （page-about.php）に、functions.php の body_class フィルターが
   .mda-fv-dark を付ける。
   （SWELLは body_class() を <body> ではなく #body_wrap に対して呼んでいるので、
   このクラスも #body_wrap に付く。#header も #content もその中なのでこれで届く）

   全ページで読み込まれるこのファイルに置いてある。renewal.css は
   recruit/lp/portfolio系ページでは読み込まれないため、どのページでも
   選べるレイアウトの設定をそちらに依存させない（上のCTAボタンと同じ理由）。

   ここでやっているのは次の2つ。
     A. 本文を画面最上部から始める（#content の上余白を消す）
     B. ヘッダーを本文の上に浮かせて白抜きにする
   自動で出るページタイトルを消すのは functions.php 側
   （mda_is_page_title_hidden / swell_is_show_ttltop フィルター）の担当。

   ■ PCとSPで「浮かせ方」が違う（2026-09-10 整理）
     PC: #header を position:absolute にしてFVの上に完全に浮かせる（高さを
     持たない）。スクロール後の白背景反転はSWELL標準の別要素 #fix_header が
     担当する（元から正しく動くので触っていない）。

     SP: 当初はPCと同じくposition:absoluteにしていたが、それだと#headerが
     レイアウトのフローから外れてしまい、SWELL標準の「SPで追従」機能
     （data-spfix、position:sticky）が使えなくなる。その回避策として
     #fix_header（本来PC専用）をSPでも無理やり動かしていたが、ハンバーガー
     ボタンが無い・#sp_menuと重なる等、PC専用の作りゆえの不具合が次々出た。

     そこでSPだけ方式を変更：#header を position:absolute にせず、
     フローに残したまま（＝SWELL標準のposition:stickyがそのまま効く）
     margin-bottomをヘッダー自身の高さ分マイナスにして、直後のFVをその分
     引き上げることで見た目だけ重ねる。スクロールでFVを通り過ぎると
     SWELL標準がhtmlに付ける[data-scrolled="true"]を使って、その時だけ
     通常ページと同じ見た目（白背景・通常の文字色）に戻す。
     これにより#fix_headerを一切使わずに済み、PC/SP問わず
     「#header一つ・同じ仕組み（sticky）」に統一される。

   ■ 注意：PCは#headerが高さを持たないため、ページの一番上に、ヘッダーが
     収まるだけの高さがある要素（黒いFVなど）を必ず置くこと。置かないと
     本文にヘッダーがかぶる。SPはmargin-bottomで重ねているだけなので
     この心配は無い。
   ========================================================================== */
.mda-fv-dark {

    /* ---- 記事幅を1200pxにする ----
       SWELLは「外観 > カスタマイズ > サイト全体設定」の記事幅を
       :root の --article_size（現在980px）として出しており、
         .l-article { max-width: var(--article_size) }
         .alignfull > .wp-block-group__inner-container { max-width: var(--article_size) }
       などがこれを参照している。個別のセレクタを1つずつ上書きするのではなく
       変数ごと差し替えれば、参照している箇所すべてが一度に1200pxになる。
       （このページのデザイン基準幅が1200pxのため。実測：デザイン1440px幅で左右120px）
       サイト全体を1200pxにしたい場合は、ここではなくカスタマイザーの記事幅を
       変えること。ここでの指定はFV重ねページだけに効く。 */
    --article_size: 75rem;

    /* ---- A. 本文を画面最上部から始める ----
       SWELL本体は .l-content に padding-top:4em、
       .l-mainContent__inner > .post_content に margin:4em 0 を入れている。
       この2つが残っているとFVがヘッダーの下から始まってしまい重ならない。
       （margin-top側は本体が !important で 0 にしているのは :first-child の
       ときだけなので、ここで明示的に消しておく） */
    & #content.l-content {
        padding-top: 0;
    }
    & .l-mainContent__inner > .post_content {
        margin-top: 0;
    }

    /* FV自体はブロックの配置を「全幅」にして画面幅いっぱいに広げる。
       SWELLの .alignfull は left:calc(50% - 50vw) / width:100vw で外側の
       コンテナに関係なく広がるため、.l-container の余白は触らなくてよい。 */

    /* ---- B. ヘッダーを浮かせて白抜きにする（PC）----
       2026-09-10 訂正: topは0固定に戻した。#body_wrap自体がSWELL標準で
       position:relativeなので、#header（position:absolute）の基準となる
       containing blockは#body_wrapのpadding box。管理バーログイン時、
       WP標準が<html>にmargin-topを入れて画面全体を管理バーの高さぶん
       下にずらす仕組みのため、#body_wrapの位置自体が既にそのぶん下がっている。
       つまりtop:0のままで既に管理バーの下に正しく収まるはずだった。
       ここにさらにvar(--swl-adminbarH,0)を足していたため、管理バーログイン時
       だけヘッダーが二重に（管理バーの高さ分×2）下がってしまっていた
       （「管理者ログインの時だけヘッダー位置がばらばら」の実体）。
       ※SP側（#header{position:sticky}、data-spfix）は事情が違う。stickyの
       top基準はスクロールポート＝ビューポートそのものなので、containing block
       が下がっている恩恵を受けられず、var(--swl-adminbarH,0)による補正が
       正しく必要（こちらはSWELL標準のコードで、今回変更していない）。 */
    @media (min-width: 960px) {
        & #header.l-header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            background: transparent;
            box-shadow: none;

            /* SWELL本体は .l-header__inner に color:var(--color_header_text) を当てている。
               個々の要素を白く塗って回るのではなく、この変数をヘッダー配下だけ差し替える。
               メニュー文字・キャッチコピー・SPのメニューボタン（.c-iconBtnはcolor:inherit）
               まで、まとめて追従する */
            --color_header_text: var(--color-bg);

            & .menu-item>a:after {
                background: var(--color-bg);
            }
        }

        /* ロゴ画像は黒の線画なので、フッターと同じやり方で白に反転させる。
           将来ロゴを多色にする場合はこのfilterを外すこと（.c-footer__logo-img と同じ） */
        & #header .c-headLogo.-img img {
            filter: brightness(0) invert(1);
        }

        /* ヘッダーCTAボタン（このファイル上部の .c-navBtn 参照）。
           資料請求（-gray）は通常時と同じグレー塗りのまま、黒地でも輪郭が
           つぶれないよう白いフチを追加する（塗りは透明にしない）。
           お問い合わせ（-dark）は通常時から共通グラデーションなので黒地でも
           上書き不要（自然に読める）。ボタンの形（padding・角丸）は共通側のまま */
        & #header .c-gnav > .menu-item.c-navBtn {
            &.-gray > a {
                border: 1px solid rgba(255, 255, 255, .7);
                color: var(--color-bg);
            }
        }
    }

    /* ---- B'. ヘッダーを浮かせて白抜きにする（SP・2026-09-10方式変更）----
       #header は position:absolute にせず、フローに残したまま
       （＝SWELL標準の [data-spfix="1"]{position:sticky} がそのまま効く）
       margin-bottomをヘッダー自身の高さ分マイナスにして、直後のFVをその分
       引き上げる。JSが#headerの実測高さを --swl-headerH に入れてくれている
       （SWELL標準の変数。他では未使用だが常に最新値が入っている）ので、
       それを使えばFVページごとにヘッダー高さが違っても自動で追従する。 */
    @media (max-width: 959px) {
        & #header.l-header {
            margin-bottom: calc(var(--swl-headerH, 0px) * -1);
        }
    }
}

/* SP：[data-scrolled]切り替わりで背景・文字色がカクッと変わってしまう不具合の対策。
   PCは#fix_header自体に`.l-fixHeader[data-ready]{transition:all .5s}`という
   SWELL標準のトランジションが付いているので滑らかにフェードインするが、
   SPは#header自身の背景・文字色をそのまま切り替えているだけなので、
   transitionを指定しない限り即時に切り替わる（アニメーション無しに見える）。
   PC側と揃えて.4sで滑らかにする。--color_header_textはCSS変数なので
   それ自体はtransitionできないが、実際に使われる先（.l-header__inner）の
   colorプロパティ側にtransitionを付ければ見た目上は滑らかに変わる。 */
@media (max-width: 959px) {
    .mda-fv-dark #header.l-header,
    .mda-fv-light #header.l-header {
        transition: background-color .4s ease, box-shadow .4s ease;
    }
    .mda-fv-dark #header .l-header__inner {
        transition: color .4s ease;
    }
    .mda-fv-dark #header .c-headLogo.-img img {
        transition: filter .4s ease;
    }
    .mda-fv-dark #header .c-gnav > .menu-item.c-navBtn.-gray > a {
        transition: border-color .4s ease, color .4s ease, opacity .25s ease;
    }
}

/* SP・FV重ねページの色（透明＋白文字）は「まだFVの上にいる間」だけの見た目。
   SWELL標準はスクロールして#headerを通り過ぎると<html>に
   [data-scrolled="true"] を付ける（.l-scrollObserverをIntersectionObserverで
   監視。既存の.p-fixBtnWrap等でも使われている標準機構）ので、それが付いて
   いない間だけ透明化・白文字化する。付いた後は何もしない＝下の
   （PCと共通の）通常のヘッダー見た目に自然に戻る。
   #headerのidが同じ要素で外観だけ切り替わるので、#fix_headerのような
   別要素・別の余白調整・ハンバーガーの出し直しは一切不要になる。 */
@media (max-width: 959px) {
    html:not([data-scrolled="true"]) .mda-fv-dark #header.l-header {
        background: transparent;
        box-shadow: none;
        --color_header_text: var(--color-bg);
    }
    html:not([data-scrolled="true"]) .mda-fv-dark #header .menu-item>a:after {
        background: var(--color-bg);
    }
    html:not([data-scrolled="true"]) .mda-fv-dark #header .c-headLogo.-img img {
        filter: brightness(0) invert(1);
    }
    html:not([data-scrolled="true"]) .mda-fv-dark #header .c-gnav > .menu-item.c-navBtn.-gray > a {
        border: 1px solid rgba(255, 255, 255, .7);
        color: var(--color-bg);
    }
}


/* ==========================================================================
   FV重ねページ（明るい版）：淡い色のFVの上にヘッダーをそのまま重ねる

   ブログ一覧（PC_BlogAll.jpg）は、見出し帯（淡いベージュ）がページの一番上
   ＝ヘッダーの裏側から始まっている。そのためヘッダーを本文の上に浮かせて、
   帯が画面最上部まで届くようにする。
   .mda-fv-dark との違いは「文字色を白抜きにしない」ことだけ。帯が明るいので、
   ヘッダーの文字・ロゴ・ボタンは通常のまま読める。
   クラスを付けるのは functions.php の body_class フィルター
   （SWELLは body_class() を <body> ではなく #body_wrap に対して呼ぶ）。

   ■ 注意（PC）
     ヘッダーは position:absolute になるので高さを持たなくなる。ページの先頭には
     ヘッダーが収まるだけの上余白を持つ要素（＝.p-archive__band）を必ず置くこと。
     余白の値は assets/css/archive.css 側にある。
     SPの浮かせ方は.mda-fv-darkと同じ方式（2026-09-10、下記参照）。
   ========================================================================== */
.mda-fv-light {

    /* ---- 本文を画面最上部から始める ----
       SWELL本体の .l-content の padding-top:4em が残っていると、
       帯がヘッダーの下から始まってしまい重ならない */
    & #content.l-content {
        padding-top: 0;
        padding-inline: 0;
    }

    /* ---- ヘッダーを浮かせる（色はそのまま・PC）----
       2026-09-10訂正: top:0固定に戻した。理由は.mda-fv-dark側の同じ節の
       コメント参照（#body_wrapがposition:relativeなので管理バー分の
       ずれは既に効いており、var(--swl-adminbarH,0)を足すと二重になっていた）。 */
    @media (min-width: 960px) {
        & #header.l-header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            background: transparent;
            box-shadow: none;
        }
    }

    /* ---- ヘッダーを浮かせる（SP・2026-09-10方式変更）----
       .mda-fv-darkと同じ理由・同じ方式（このファイル内の解説コメント参照）。
       文字色は元々白抜きにしていないので、スクロール状態での色の出し分けは不要。 */
    @media (max-width: 959px) {
        & #header.l-header {
            margin-bottom: calc(var(--swl-headerH, 0px) * -1);
        }
    }
}

@media (max-width: 959px) {
    html:not([data-scrolled="true"]) .mda-fv-light #header.l-header {
        background: transparent;
        box-shadow: none;
    }
}


/* ブロックの見た目に関するCSSは assets/css/blocks.css へ集約
   （フロントと編集画面の両方から同じファイルを読み込むため）。 */