/* ==========================================================================
   Walkers staging — front page SWELL移植オーバーライド
   本番トップ(Astra+Elementor)の本文をSWELLで描画するための調整。
   Astra依存を補い、SWELLのコンテンツ幅/余白/トップ装飾を解除する。
   ========================================================================== */

/* --- フルワイド化：SWELLのコンテンツ幅・左右余白を解除 --- */
#content.l-content,
.l-container.l-content,
#content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* --- SWELL本体/mainの上余白も解除（FV位置を本番と一致させる） --- */
.l-mainArea,
main#main,
.l-mainArea > #main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* --- SWELLのトップ用タイトル / パンくず / ページヘッダーを非表示 --- */
.c-breadcrumb,
.l-breadcrumb,
.p-breadcrumb,
.c-pageTitle,
.p-pageTitle,
.l-titleArea,
.p-titleArea,
.top_title_area,
.entry-header,
h1.entry-title { display: none !important; }

/* --- 本文コンテナの内側余白も0に（本番は端まで） --- */
.entry-content { margin: 0 !important; }

/* --- Astra由来のカラー変数を補完（本文CSSが間接参照する場合の保険） --- */
:root {
  --ast-global-color-0:#0170B9;
  --ast-global-color-1:#3a3a3a;
  --ast-global-color-2:#3a3a3a;
  --ast-global-color-3:#4B4F58;
  --ast-global-color-4:#F5F5F5;
  --ast-global-color-5:#FFFFFF;
  --ast-global-color-6:#E5E5E5;
  --ast-global-color-7:#424242;
  --ast-global-color-8:#000000;
}

/* --- ベースフォント（本番準拠） --- */
.entry-content,
.entry-content p,
.entry-content li,
.entry-content a { font-family: 'Noto Sans JP', sans-serif; }
.entry-content h2 { font-family: 'Manrope', sans-serif; }

/* --- pc-only / sp-only のレスポンシブ切替（Astra非依存で明示） --- */
@media (min-width: 835px) { .sp-only { display: none !important; } .pc-only { display: block !important; } }
@media (max-width: 834px) { .pc-only { display: none !important; } .sp-only { display: block !important; } }

/* --- FVオレンジ帯：home.css が .fv-anime を opacity:0.18 に薄めるため上書き ---
   SVGの線本体は #EC9231 / opacity:1 / 描画済みで正しいが、親コンテナ(.fv-anime)が
   18%透過で帯全体が淡く見える。ここで不透明に戻し、濃い #EC9231 のベタ帯にする。 */
.fv-anime { opacity: 1 !important; }

/* ==========================================================================
   フッター
   ヘッダー/フッターは mu-plugin（walkers-custom-header-footer.php）が
   wp_body_open / wp_footer フックで本番再現版を描画する。
   ここではSWELLデフォルトフッターが残った場合の保険だけを置く。
   ========================================================================== */
#footer.l-footer,
.l-footer { display: none !important; }

/* --- ヘッダーお問い合わせCTAボタン ---
   mu-plugin の CTA 装飾は本番のメニューID（#menu-item-3912）狙い撃ちのため、
   メニューIDが異なるステージング（お問い合わせ=最終項目）では効かない。
   最終メニュー項目をオレンジCTAボタン化して本番ヘッダーに寄せる。 */
.walkers-menu > li:last-child {
  background: #E98212;
  border: 1px solid #E98212 !important;
  border-radius: 99px;
  padding: 0 16px !important;
  margin-left: 16px !important;
  transition: all .4s ease;
}
.walkers-menu > li:last-child > a { color: #fff !important; }
.walkers-menu > li:last-child:hover { background: #fff; }
.walkers-menu > li:last-child:hover > a { color: #E98212 !important; }

/* SP（ハンバーガー展開時）も最終項目はオレンジCTAで目立たせる。
   ただし区切り線との重なりを避け、中央寄せのボタンとして整える。 */
@media screen and (max-width: 834px) {
  .walkers-menu > li:last-child {
    background: #E98212;
    border: 1px solid #E98212 !important;
    border-bottom: 1px solid #E98212 !important;
    border-radius: 99px;
    padding: 0 !important;
    margin: 16px auto 8px !important;
    width: calc(100% - 32px);
  }
  .walkers-menu > li:last-child > a {
    color: #fff !important;
    text-align: center;
    padding: 14px 16px;
  }
}

/* ==========================================================================
   WordPress コア columns ブロックのレイアウトCSS補完
   ステージング(SWELL)では wp-block-columns/style.css が読み込まれず、
   各カラムが原寸で縦積みになる（Works動画が巨大化する原因）。
   本番と同じ「PCで等幅3列・SP(≤781px)で縦積み」を再現する。
   ========================================================================== */
.wp-block-columns { align-items: normal; box-sizing: border-box; }
.wp-block-columns.is-layout-flex { gap: 2em; }
.wp-block-column {
  flex-grow: 1;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}
@media (min-width: 782px) {
  .wp-block-columns.is-layout-flex { flex-wrap: nowrap !important; }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column,
  .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
    flex-basis: 0;
    flex-grow: 1;
  }
}
@media (max-width: 781px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* ==========================================================================
   トップ本文ブロックの崩れ補正
   本番(Astra+Elementor)では効いていた挙動が、SWELL側のコアblock CSS欠落／
   SWELL既定スタイルの干渉で崩れる箇所を本番と一致させる。
   ========================================================================== */

/* --- 「ただの受託開発会社」見出し ---
   SWELLが .bottom-text-left 内の1つ目の<br>を display:none にするため
   「Walkersは」と「ただの受託開発会社」が1行に繋がって折返す。
   本番は両方の<br>が有効（3行表示）なので戻す。 */
.bottom-text-left br { display: inline !important; }

/* --- Newsの日付 ---
   SWELL既定の word-break:break-word ＋ 日付カラムの幅制約により
   「2025年12月19日」の末尾「日」が2行目へ折返してしまう。
   本番は1行表示・文字色 #4B4F58。 */
.wp-block-post-date,
.wp-block-post-date time {
  white-space: nowrap !important;
  word-break: keep-all !important;
}
.wp-block-post-date { color: #4B4F58 !important; }

/* --- 「もっと見る」「お客様の声一覧を見る」等のボタン ---
   WPコアの .wp-block-button__link(display:inline-block) が読み込まれず
   <a>が display:inline のままで、テキストと矢印画像が縦積みになる。
   本番同様 inline-block にし、矢印は中央(vertical-align:middle)に揃える。 */
.wp-block-button__link { display: inline-block; }
.wp-block-button__link img {
  display: inline !important;
  vertical-align: middle;
  box-sizing: border-box;
}