@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ（D.FLEX株式会社）
    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
*/

/* ====================================================
   D.FLEX デザイン用カスタムCSS
   カラー：鉄紺 #1b2d40 ／ スチールブルー #0068b7 ／ 薄グレー #f4f5f7
   方針：構造はSWELLブロックが持つ。ここでは見た目の調整だけを行い、
         ブロック構造をCSSで固めない（クライアントが編集できる状態を保つ）
==================================================== */

:root {
  --df-navy: #1b2d40;
  --df-blue: #0068b7;
  --df-gray: #f4f5f7;
  --df-line: #d9dde2;
}

/* ---------- 見出し（全セクション共通） ---------- */
/* セクション見出しの下に余白（WF確認済みの間隔） */
.swell-block-fullWide__inner > h2,
.post_content .wp-block-column > h2 {
  margin-bottom: 48px;
  letter-spacing: 0.05em;
  font-size: 30px;
}
/* 見出し直後にリード文が続く場合は詰める */
.swell-block-fullWide__inner > h2 + .df-lead {
  margin-top: -16px;
}
@media (max-width: 768px) {
  .swell-block-fullWide__inner > h2,
  .post_content .wp-block-column > h2 {
    margin-bottom: 32px;
    font-size: 24px;
  }
  /* 困ったセクション（.df-checksを持つ）の見出しは22pxで2行に収める */
  .swell-block-fullWide:has(.df-checks) .swell-block-fullWide__inner > h2 {
    font-size: 22px;
  }
  /* 信用セクションの見出しも22px（24pxだと「を」だけ2行目に落ちる） */
  .wp-block-columns:has(.df-trust-img) h2 {
    font-size: 22px;
  }
  .swell-block-fullWide__inner > h2 + .df-lead {
    margin-top: -8px;
  }
}
/* 幅360px級の小さい端末では、対応力・信用の見出しが
   「20社／の」「提／案」「納期管理／を」と単語途中で折れるため一段小さく */
@media (max-width: 374px) {
  .post_content .df-coop-cols > .wp-block-column > h2 {
    font-size: 22px;
  }
  .post_content .wp-block-columns:has(.df-trust-img) h2 {
    font-size: 20px;
  }
}

/* 見出しの黄色マーカー：青字＋大きめの強調スパンにだけ引く
   （df-h2-em＝強み・材質・信用、df-h2-lg＝専門性の社名、df-h2-blue＝対応力） */
.df-h2-em,
.df-h2-lg,
.df-h2-blue {
  background-image: linear-gradient(transparent 72%, #ffd23f 72%);
  background-repeat: no-repeat;
  /* 初期は幅0。見出しが画面に入ると is-in が付いて左から引かれる */
  background-size: 0% 100%;
  transition: background-size 0.5s ease-out 0.05s;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 4px;
}
h2.is-in .df-h2-em,
h2.is-in .df-h2-lg,
h2.is-in .df-h2-blue {
  background-size: 100% 100%;
}

/* 青字強調を持たない見出し（加工品例・お知らせ・会社概要）は、
   見出し下中央に短い黄色バーを敷く */
/* 見出しはフェードインさせるが、下の黄色バーは動かしたくない。
   h2::after だとh2の透明度を継承してしまうため、バーは
   親（__inner）側の疑似要素として、見出しの直下に描く */
#works .swell-block-fullWide__inner > h2,
#company .swell-block-fullWide__inner > h2,
.swell-block-fullWide:has(.p-postList) .swell-block-fullWide__inner > h2 {
  padding-bottom: 16px;
}
#works .swell-block-fullWide__inner,
#company .swell-block-fullWide__inner,
.swell-block-fullWide:has(.p-postList) .swell-block-fullWide__inner {
  position: relative;
}
#works .swell-block-fullWide__inner::before,
#company .swell-block-fullWide__inner::before,
.swell-block-fullWide:has(.p-postList) .swell-block-fullWide__inner::before {
  content: "";
  position: absolute;
  top: var(--df-bar-top, 0);
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: #ffd23f;
  pointer-events: none;
}

/* リード文（中央揃えの補足文） */
/* 中央揃えのまま、折返し位置は本文中の <br class="df-sp-br"> で指定している
   （SPで単語の途中や1〜2文字だけの行にならないようにするため） */
.df-lead {
  color: #333; /* 本文色と統一（#666はリードだけ薄く見えたため） */
  margin-bottom: 40px;
}

/* 専門性: リード文2段落の間は「1行分」に詰める（2026-09-03 クライアント指示。40pxだと2行分に見える） */
.df-spec-cols .df-lead + .df-lead {
  margin-top: 0;
}
.df-spec-cols .df-lead:not(:last-child) {
  margin-bottom: 1.6em;
}
/* 信用・対応力: 本文2段落の間も同じ「1行分」（2026-09-03 クライアント指示で段落を分割。
   対応力は16pxのままだったので 2026-09-04 に揃えた） */
.df-trust-cols p:not(:last-child),
.df-coop-cols p:not(:last-child) {
  margin-bottom: 1.6em;
}

/* 本文幅を絞る段落 */
.df-narrow {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* PCだけで効かせる改行（SPでは非表示） */
.df-pc-br {
  display: none;
}
@media (min-width: 769px) {
  .df-pc-br {
    display: inline;
  }
}

/* ---------- FV ---------- */
/* キャッチコピーの社名は青で強調 */
.df-fv-name {
  color: var(--df-blue);
}
.df-fv-title {
  font-size: 34px;
  line-height: 1.6;
  color: var(--df-navy);
}
.df-fv-lead {
  color: #555;
}
@media (max-width: 768px) {
  /* 20px：「大阪・八尾のD.FLEX株式会社へ」が375pxで1行に収まる上限 */
  .df-fv-title {
    font-size: 20px;
  }
}

/* バッジ（アウトラインボタンをピル型に転用。リンクではないので押せない見た目に） */
.df-badges {
  margin-top: 8px;
}
.df-badges .wp-block-button__link {
  border: 1.5px solid #9aa4af;
  border-radius: 999px;
  background: transparent;
  color: var(--df-navy);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 24px;
  pointer-events: none; /* バッジは装飾。クリックさせない */
}
@media (max-width: 768px) {
  /* SPは2×2の同サイズピル */
  .df-badges .wp-block-buttons,
  .df-badges {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .df-badges .wp-block-button,
  .df-badges .wp-block-button__link {
    width: 100%;
  }
  .df-badges .wp-block-button__link {
    font-size: 12px;
    padding: 10px 6px;
    text-align: center;
  }
}

/* メインCTAボタン（SWELLボタン。2026-09-04 コアボタンから移行。
   .wp-block-button__link 側の指定は旧コアボタン互換のために残している） */
.swell-block-button.df-btn-main .swell-block-button__link,
.df-btn-main .wp-block-button__link {
  background: var(--df-blue);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 4px;
  padding: 18px 56px;
  min-width: 300px;
  box-shadow: 0 3px 10px rgba(0, 104, 183, 0.3);
  transition: opacity 0.25s;
}
.swell-block-button.df-btn-main .swell-block-button__link:hover {
  opacity: 0.85;
  color: #fff;
}
.df-btn-main .wp-block-button__link:hover {
  opacity: 0.85;
}

/* 暗背景でのCTA視認性対策：青ボタン＋白枠線2px（FV・中間CTA共通） */
.swell-block-button.df-btn-main .swell-block-button__link,
.df-fv-cta .wp-block-button__link,
#contact .df-btn-main .wp-block-button__link {
  border: 2px solid #fff;
}
/* 編集画面向けの補正（本番には影響なし）:
   SWELLボタンのリンク下線を消す／強みリストの「1.」マーカーを消す */
.swell-block-button.df-btn-main .swell-block-button__link {
  text-decoration: none;
}
.df-strengths,
.editor-styles-wrapper .df-strengths {
  list-style: none;
}
/* SWELLボタンの中央揃え（SWELL側の data-align=center がこのボタンには効かないため明示） */
.swell-block-button.df-btn-main {
  text-align: center;
}
/* SWELLボタンのアイコン（ブロック設定で fa-circle-play を指定） */
.swell-block-button.df-btn-main .__icon {
  font-size: 18px;
  margin-right: 10px;
  vertical-align: -1px;
}

/* ボタンテキスト左の「▶を丸で囲ったアイコン」＝Font Awesome 6 の fa-circle-play。
   （SWELL設定 > Font Awesome > CSSで読み込む(v6) をONにして使用）
   文言をクライアントが編集しても消えないよう疑似要素で描画する */
.df-btn-main .wp-block-button__link::before {
  content: "\f144"; /* fa-circle-play */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  margin-right: 10px;
  vertical-align: -1px;
}

@media (max-width: 768px) {
  .df-btn-main,
  .df-btn-main .wp-block-button__link,
  .swell-block-button.df-btn-main .swell-block-button__link {
    width: 100%;
    min-width: 0;
  }
}

/* FVの電話（PC=番号を大きく・リンク無効／SP=タップ可能） */
.df-tel-label {
  font-size: 13px;
  color: #666;
  letter-spacing: 0.06em;
  margin-bottom: 0;
}
.df-tel-number a {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--df-navy);
  text-decoration: none;
}
.df-tel-number {
  margin-top: 0;
}
@media (min-width: 769px) {
  /* PCではtel:リンクを無効化（クリックしても何も起きない） */
  .df-tel-number a {
    pointer-events: none;
  }
}

/* ---------- 強み（白角丸カード＋左上に大きな01番号） ----------
   番号はCSSカウンターで「01」形式（項目を増減しても自動で振り直る）。
   番号をカードの左上角に重ねるため、カード側に position:relative、
   番号は絶対配置で上と左に少しはみ出させている。
   セクション背景は薄グレー（カードの白を立たせるため） */
.df-strengths,
.post_content ol.df-strengths { /* SWELLのol既定padding-left:24pxに勝つための詳細度 */
  list-style: none;
  counter-reset: df-num;
  /* カードは固定幅で左右中央（fit-contentだと番号のはみ出し分が右に寄って見える） */
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
}
.df-strengths li {
  counter-increment: df-num;
  position: relative;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(27, 45, 64, 0.08);
  padding: 20px 24px 20px 44px;
  margin: 0 0 26px;
  font-size: 17px;
  font-weight: 700;
}
.df-strengths li::before {
  content: counter(df-num, decimal-leading-zero); /* 01, 02, … */
  position: absolute;
  top: -16px;
  left: -12px;
  color: var(--df-blue);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}
@media (max-width: 768px) {
  .df-strengths,
  .post_content ol.df-strengths {
    width: 90%;
  }
  .df-strengths li {
    font-size: 14.5px;
    padding: 16px 16px 16px 45px;
    margin-bottom: 22px;
    line-height: 1.7;
  }
  .df-strengths li::before {
    top: -13px;
    left: -8px;
    font-size: 29px;
  }
}

/* ---------- 強みの写真（丸切り抜き2枚・大小ずらし） ----------
   四角写真が多いページの中で、強みだけ丸にして変化をつける。
   大＝検品（品質）、小＝図面打ち合わせ（連携）を斜めに重ねる */
.df-st-cols {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  gap: 40px;
}
.df-st-cols .df-strengths,
.post_content .df-st-cols ol.df-strengths {
  margin-left: 0; /* カラム内では左寄せ（カラム自体が中央に来る） */
}
.df-st-photo img {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
}
.df-st-photo {
  margin: 0;
}
.df-st-photo-main {
  width: 100%;
}
.df-st-photo-sub {
  width: 60%;
  margin-left: 48%;
  margin-top: -24%; /* 大きい丸に少し重ねる */
}
/* PC: 見出しをカラム幅に合わせて左寄せ */
@media (min-width: 769px) {
  #strength .swell-block-fullWide__inner > h2 {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  /* 項目カード群の中心を見出しテキストの中心に合わせる（見出しは左寄せのまま） */
  .df-st-cols .df-strengths,
  .post_content .df-st-cols ol.df-strengths {
    max-width: 500px;
    margin: 0 auto;
    transform: translateX(-45px); /* 見出しテキストの中心に実測で合わせる */
  }
  /* 写真カラムを広めに（ブロック属性のflex-basis:55%をPCだけ上書き） */
  .df-st-cols .wp-block-column:first-child {
    flex-basis: 52% !important;
  }
  /* 写真を「見出し＋本文の横」まで引き上げる（見出し高さ＋余白ぶん） */
  .df-st-cols {
    align-items: flex-start;
  }
  .df-st-cols .wp-block-column:last-child {
    margin-top: -145px !important;
    transform: translateX(48px); /* 写真群を少し右へ */
  }
}
@media (max-width: 768px) {
  .df-st-cols {
    gap: 8px;
  }
  /* 項目カードを左右中央に（共通ルールの margin-left:0 をSPでは打ち消す） */
  .df-st-cols .df-strengths,
  .post_content .df-st-cols ol.df-strengths {
    margin-left: auto;
    margin-right: auto;
  }
  /* 写真はPCと同じく大小の丸を斜めに重ねる */
  .df-st-photo-main {
    width: 72%;
    margin-left: 2%;
  }
  .df-st-photo-sub {
    width: 50%;
    margin-left: 48%;
    margin-top: -28%;
  }
  /* 見出し内の強調spanはSPでは少し控えめに
     （信用セクションの「信用、品質、納期管理を」が1行に収まる上限） */
  .df-h2-em {
    font-size: 1.2em;
  }
}

/* 見出しの「強み」強調：青文字・背景なし・大きめ */
.df-h2-em {
  color: var(--df-blue);
  font-size: 1.35em;
}

/* 見出し内の社名強調（専門性セクション「D.FLEX株式会社」）：色そのまま大きく */
.df-h2-lg {
  font-size: 1.3em;
}

/* ---------- カード（材質・加工品例） ---------- */
.df-cards .wp-block-column {
  background: #fff;
  border: 1px solid var(--df-line);
  border-radius: 6px;
  padding: 24px;
}
/* 薄グレー背景セクション内のカードは白、白背景セクション内は薄グレー */
.swell-block-fullWide[style*="#ffffff"] .df-cards .wp-block-column {
  background: var(--df-gray);
  border-color: transparent;
}
.df-card-img img {
  border-radius: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;  /* 元写真の縦横比がバラバラでもカードの高さを揃える */
  object-fit: cover;
  display: block;
}
/* 写真ありカード（材質）：写真を枠の上・左右にくっつける。
   テキスト系カード（加工品例）はpadding維持のため :has で写真ありに限定 */
.df-cards .wp-block-column:has(.df-card-img) {
  padding: 0;
  overflow: hidden;
  position: relative;
}
.df-cards .df-card-img {
  margin: 0;
}
.df-cards .wp-block-column:has(.df-card-img) p {
  padding: 0 20px 20px;
}
/* 左上の青三角＋白番号（01〜04はCSSカウンターで自動採番） */
.swell-block-fullWide__inner {
  counter-reset: df-mat;
}
.df-cards .wp-block-column:has(.df-card-img)::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  border-top: 74px solid var(--df-blue);
  border-right: 74px solid transparent;
  z-index: 1;
}
.df-cards .wp-block-column:has(.df-card-img)::after {
  counter-increment: df-mat;
  content: "0" counter(df-mat);
  position: absolute;
  top: 8px; left: 10px;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .02em;
  z-index: 2;
}
.df-card-title {
  font-size: 17px;
  margin-bottom: 4px;
}
.df-cards .wp-block-column:has(.df-card-img) p {
  margin-top: 0;
}
/* 写真との間隔・本文との間隔。SWELLのh3デフォルト(上約62px/下約42px)を上書きするため詳細度を上げる */
.post_content .df-cards .df-card-title {
  margin-top: 14px;
  margin-bottom: 6px;
  margin-left: 20px;
  margin-right: 20px;
}
.df-cards .df-card-img {
  margin-bottom: 0;
}

/* 「その他」ボックス（材質カードと同じ見た目） */
.df-other-box {
  background: #fff;
  border: 1px solid var(--df-line);
  border-radius: 6px;
  padding: 24px;
  margin-top: 20px;
}
.df-other-title {
  font-size: 19px;
  margin-bottom: 16px !important;
}

/* ---------- 困った（チェックリスト・鉄紺帯） ---------- */
.df-checks {
  list-style: none;
  padding: 0;
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}
.df-checks li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 15px;
}
/* チェックマーク（四角→レ点。borderの2辺を45度回転させて描く。ネイビー背景用に明るい青） */
.df-checks li::before {
  content: "";
  width: 8px;
  height: 15px;
  flex: none;
  border-right: 3px solid #4da3ff;
  border-bottom: 3px solid #4da3ff;
  transform: rotate(45deg);
  position: relative;
  top: 1px;
  margin-right: 6px;
}
/* コーナーの斜めバンド装飾（透過PNGを右上・左下に重ねる） */
.swell-block-fullWide:has(.df-checks) {
  position: relative;
  overflow: hidden;
}
.swell-block-fullWide:has(.df-checks)::before,
.swell-block-fullWide:has(.df-checks)::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
}
.swell-block-fullWide:has(.df-checks)::before {
  top: 0; right: 0;
  width: min(42%, 480px);
  aspect-ratio: 1;
  background-image: url(../../uploads/2026/09/bg-band-top-right.webp);
  background-position: top right;
  background-size: contain;
}
.swell-block-fullWide:has(.df-checks)::after {
  bottom: 0; left: 0;
  width: min(42%, 480px);
  aspect-ratio: 1;
  background-image: url(../../uploads/2026/09/bg-band-bottom-left.webp);
  background-position: bottom left;
  background-size: contain;
}
.swell-block-fullWide:has(.df-checks) .swell-block-fullWide__inner {
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .df-checks {
    grid-template-columns: 1fr;
  }
  .df-checks li {
    font-size: 14.5px;
  }
}

/* ---------- 会社概要テーブル ---------- */
/* 代表写真なし（2026-09-02 クライアント指示）のため、テーブル単体を中央に置く */
.df-info-table {
  max-width: 720px;
  margin-inline: auto;
}
.df-info-table table {
  border-collapse: collapse;
}
.df-info-table td {
  border: 1px solid var(--df-line);
  padding: 14px 20px;
}
.df-info-table tr td:first-child {
  background: var(--df-gray);
  width: 32%;
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- SP固定バー ----------
   バーの地色・文字色はSWELLのカスタマイザー設定（color_fbm_bg / color_fbm_text /
   fbm_opacity）で指定している。CSSで上書きするとSWELL側の
   「#fix_bottom_menu .menu-item a」に負けるため、ここでは触らない。
   ここでやるのは「左のCTAだけ青く塗る」ことと、そのための高さ合わせだけ */
#fix_bottom_menu .menu_list {
  align-items: stretch; /* 既定はcenterで、リンクがセルの高さいっぱいにならない */
  padding-top: 0; /* SWELL既定の2pxで、上端に地色（紺）が線状に見えるため */
}
/* SWELLはiPhoneのホームバー領域ぶんの余白を #fix_bottom_menu の padding として付ける。
   そのままだとボタンの下に地色（紺）の帯が見えるため、
   余白を打ち消して、代わりにボタン（リンク）側を下まで伸ばす */
#fix_bottom_menu {
  padding-bottom: 0 !important;
}
#fix_bottom_menu .menu-item a {
  /* ホームバー領域ぶんだけリンクを下に伸ばして地色の帯を隠す。
     中身は flex の中央揃え（下の定義）に任せるので、余白は下だけに付ける */
  padding-bottom: calc(env(safe-area-inset-bottom) * 0.5);
  box-sizing: content-box;
}
#fix_bottom_menu .menu-item:first-child {
  background: var(--df-blue);
}
#fix_bottom_menu .menu-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* ---------- 加工品例（写真カード型） ----------
   材質カードと同じ df-cards の見た目を使う。ただし材質カードの
   左上三角番号（CSS自動採番）は、加工品例では見出しテキスト側に
   番号（1〜4）が入っているため二重になる → worksカードでは三角を消す */
.df-works-cards .wp-block-column:has(.df-card-img)::before,
.df-works-cards .wp-block-column:has(.df-card-img)::after {
  display: none;
}
.post_content .df-works-cards .df-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  text-align: left;
  margin: 14px 20px; /* タイトルが最後の要素なので、写真下と同じ余白を下にも */
}
/* SWELL側の last-child margin リセットに負けるため、カードのpaddingで下余白を確保する */
.df-cards.df-works-cards .wp-block-column:has(.df-card-img) {
  padding-bottom: 14px;
}
.df-wk-num {
  color: var(--df-blue);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  flex: none;
}
@media (max-width: 768px) {
  .post_content .df-works-cards .df-card-title {
    font-size: 14.5px;
    gap: 10px;
  }
  .df-wk-num {
    font-size: 20px;
  }
}

/* ---------- 写真の背後に一回り大きい淡ブルーの色面（カラーブロック装飾） ----------
   対象: 専門性・対応力・信用の3枚。画面端に接している側と反対の方向へずらす */
.df-spec-img,
.df-coop-img,
.df-trust-img {
  position: relative;
}
.df-spec-img::before,
.df-coop-img::before,
.df-trust-img::before {
  content: "";
  position: absolute;
  top: 36px;
  width: 100%;
  height: 100%;
  background: #dbe9f5;
  z-index: 0;
}
.df-spec-img::before,
.df-trust-img::before {
  left: 48px; /* 写真が左端接地 → 右下へ */
}
.df-coop-img::before {
  left: -48px; /* 写真が右端接地 → 左下へ */
}
.df-spec-img img,
.df-coop-img img,
.df-trust-img img {
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  /* SPも色面を出す。はみ出しで横スクロールが出ないよう、写真幅を色面ぶん狭める */
  .df-spec-img,
  .df-trust-img {
    width: calc(100% - 24px);
    margin-right: 24px;
  }
  .df-coop-img {
    width: calc(100% - 24px);
    margin-left: 24px;
  }
  .df-spec-img::before,
  .df-coop-img::before,
  .df-trust-img::before {
    top: 24px;
  }
  .df-spec-img::before,
  .df-trust-img::before {
    left: 24px;
  }
  .df-coop-img::before {
    left: -24px;
  }
}

/* ---------- 対応力（テキスト＋握手写真の2カラム） ---------- */
/* 見出しは左カラム内（左寄せ）。「最適な加工先を選定」は青で強調 */
.df-h2-blue {
  color: var(--df-blue);
}
/* 対応力: 「最適な加工プロセスを提案」を少し大きく
   （2026-09-02 テキスト変更で12文字に伸びたため 1.25em→1.1em。
     1.25emだとPC・SPとも「提／案」で折れる） */
.df-coop-cols .df-h2-blue {
  font-size: 1.1em;
}
/* 専門性: 「D.FLEX株式会社」を青に（サイズはdf-h2-lgの1.3emのまま） */
.df-spec-cols .df-h2-lg {
  color: var(--df-blue);
}
.df-coop-cols {
  gap: 48px;
}
.df-coop-cols h2 {
  margin-bottom: 28px;
  letter-spacing: 0.05em;
}
.df-coop-img img {
  border-radius: 0;
  width: 100%;
}
/* PC: 写真カラムを大きめにして右端を画面右端まで伸ばす。
   テキストは「画面左端〜写真」の余白の中央に来るよう、
   ラッパーを左右フルブリードにしてテキストカラム内で中央寄せする */
@media (min-width: 769px) {
  .df-coop-cols {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .df-coop-cols .wp-block-column:first-child {
    flex: 0 0 50%; /* 写真が画面の右半分を越えないように */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .df-coop-cols .wp-block-column:first-child > * {
    width: 100%;
    max-width: 460px; /* テキストブロックの幅。左右の余白が均等になる */
  }
}
/* 50vw計算のスクロールバー分のはみ出しを吸収（横スクロール防止） */
.swell-block-fullWide:has(.df-coop-cols) {
  overflow-x: clip;
}

/* ---------- 専門性（写真左＋テキスト右。対応力セクションの左右反転版） ---------- */
.df-spec-cols {
  gap: 48px;
}
.df-spec-cols h2 {
  margin-bottom: 28px;
  letter-spacing: 0.05em;
}
.df-spec-img img {
  border-radius: 0;
  width: 100%;
}
@media (min-width: 769px) {
  .df-spec-cols {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .df-spec-cols .wp-block-column:last-child {
    flex: 0 0 50%; /* 写真が画面の左半分を越えないように */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .df-spec-cols .wp-block-column:last-child > * {
    width: 100%;
    max-width: 460px;
  }
}
.swell-block-fullWide:has(.df-spec-cols) {
  overflow-x: clip;
}

/* ---------- 信用（写真左＋テキスト右。専門性と同じ型） ---------- */
.df-trust-cols {
  gap: 48px;
}
.df-trust-cols h2 {
  margin-bottom: 28px;
  letter-spacing: 0.05em;
}
.df-trust-img img {
  border-radius: 0;
  width: 100%;
}
@media (min-width: 769px) {
  .df-trust-cols {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .df-trust-cols .wp-block-column:last-child {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .df-trust-cols .wp-block-column:last-child > * {
    width: 100%;
    max-width: 460px;
  }
}
.swell-block-fullWide:has(.df-trust-cols) {
  overflow-x: clip;
}
@media (max-width: 768px) {
  .df-trust-cols {
    gap: 8px;
  }
  .df-trust-cols .wp-block-column:first-child {
    order: 2;
  }
}
/* PCも専門性〜対応力の間を詰める（SWELLの .pc-py-80 は !important 定義のため対抗） */
@media (min-width: 769px) {
  .swell-block-fullWide.pc-py-80:has(.df-spec-cols) {
    padding-bottom: 48px !important;
  }
  .swell-block-fullWide.pc-py-80:has(.df-coop-cols) {
    padding-top: 48px !important;
  }
}
@media (max-width: 768px) {
  .df-spec-cols {
    gap: 8px;
  }
  /* SPはテキストが先、写真が後（PCの写真左とは逆順） */
  .df-spec-cols .wp-block-column:first-child {
    order: 2;
  }
  /* 専門性〜対応力の間はどちらも白背景でpadding(sp-py-60=実測90px)×2が重なって見えるため詰める。
     SWELLのpaddingクラスに勝つため同クラスを重ねて詳細度を上げる */
  /* SWELL本体が .sp-py-60{padding:6em!important} のため!important必須 */
  .swell-block-fullWide.sp-py-60:has(.df-spec-cols) {
    padding-bottom: 36px !important;
  }
  .swell-block-fullWide.sp-py-60:has(.df-coop-cols) {
    padding-top: 36px !important;
  }
}
@media (max-width: 768px) {
  .df-coop-cols {
    gap: 8px;
  }
}

/* ---------- フッター ---------- */
.df-ft-logo {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.df-ft-info {
  font-size: 14px;
  opacity: 0.85;
  line-height: 2;
}
/* フッターナビの区切り線を控えめに */
.l-footer__nav a {
  font-size: 13.5px;
}

/* ---------- MOREボタン（一覧へ）中央寄せ ----------
   2026-09-04 SWELLボタン（loos/button＋MOREボタンスタイル）に移行。
   .wp-block-buttons 側は旧コアボタン互換のために残している */
.wp-block-buttons.is-style-more_btn,
.swell-block-button.is-style-more_btn {
  display: block;
  text-align: center;
}
.wp-block-buttons.is-style-more_btn .wp-block-button {
  display: inline-block;
  min-width: 320px;
}
.post_content .swell-block-button.is-style-more_btn .swell-block-button__link {
  display: inline-block;
  width: auto;
  min-width: 320px;
  max-width: 100%;
  text-align: center;
  box-shadow: none;
}
.wp-block-buttons.is-style-more_btn .wp-block-button__link {
  display: block;
}
.post_content .swell-block-button.is-style-more_btn .swell-block-button__link,
.wp-block-buttons.is-style-more_btn .wp-block-button__link {
  background: #fff;
  color: #666;
  border: 1px solid #dcdcdc;
  border-radius: 0;
  font-size: 14px;
  padding: 14px 48px;
  position: relative;
}
.post_content .swell-block-button.is-style-more_btn .swell-block-button__link::after,
.wp-block-buttons.is-style-more_btn .wp-block-button__link::after {
  content: "→";
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.25s;
}
.post_content .swell-block-button.is-style-more_btn .swell-block-button__link:hover,
.wp-block-buttons.is-style-more_btn .wp-block-button__link:hover {
  background: var(--df-blue);
  color: #fff;
  border-color: var(--df-blue);
}
.post_content .swell-block-button.is-style-more_btn .swell-block-button__link:hover::after,
.wp-block-buttons.is-style-more_btn .wp-block-button__link:hover::after {
  transform: translateX(4px) translateY(-50%);
}

/* FV見出し：SWELL側のh1指定より優先させる
   line-heightは白箱（案B）の行間を兼ねる：箱の高さ＋隙間ぶん */
.post_content h1.df-fv-title {
  font-size: 34px;
  line-height: 2.45;
}
@media (max-width: 768px) {
  /* 20px：「大阪・八尾のD.FLEX株式会社へ」が375pxで1行に収まる上限 */
  .post_content h1.df-fv-title {
    font-size: 20px;
    line-height: 2.2;
  }
}

@media (max-width: 768px) {
  /* SPの電話番号は控えめに */
  .df-tel-number a {
    font-size: 22px;
  }
}

/* SPだけで効かせる改行（見出しの中途半端な折返しを防ぐ）。PCでは無効 */
@media (min-width: 769px) {
  .df-sp-br {
    display: none;
  }
}

@media (max-width: 768px) {
  /* チェック欄とギャップを詰めて本文幅を稼ぐ（「〜わからない」の1文字落ち回避） */
  .df-checks li {
    gap: 10px;
  }
  .df-checks li::before {
    width: 7px;
    height: 13px;
  }

}

/* ====================================================
   写真背景セクション（FV・専門性）
   SWELLのフルワイド背景画像＋オーバーレイを使用。
   文字色はブロック側の textColor（白）を継承させる
==================================================== */
.swell-block-fullWide.has-bg-img .df-fv-title,
.swell-block-fullWide.has-bg-img h2,
.swell-block-fullWide.has-bg-img h3 {
  color: inherit;
}
.swell-block-fullWide.has-bg-img .df-fv-lead,
.swell-block-fullWide.has-bg-img .df-lead,
.swell-block-fullWide.has-bg-img .df-tel-label {
  color: rgba(255, 255, 255, 0.85);
}
.swell-block-fullWide.has-bg-img .df-tel-number a {
  color: #fff;
}
/* バッジは白フチ・白文字に */
.swell-block-fullWide.has-bg-img .df-badges .wp-block-button__link {
  border-color: rgba(255, 255, 255, 0.8);
  color: #fff;
}

/* 加工品例：セクション上部の実写（横長） */
.df-works-hero img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.df-works-hero {
  margin-bottom: 48px;
}

/* ====================================================
   ヘッダー高さの固定（スマホ実機の縦ずれ対策）
   ロゴがテキストのため、Webフォント（Noto Sans JP）の読み込み前後で
   文字の高さがわずかに変わり、ヘッダー高さ＝ページ全体の開始位置が
   動いて「ガクッ」と見えていた。高さをpxで固定して影響を断つ
==================================================== */
.l-header__inner {
  height: 72px;
}
.l-header__logo .c-siteTitle,
.l-header__logo a {
  display: block;
  height: 24px;
  line-height: 24px;
  overflow: hidden;
}
@media not all and (min-width: 960px) {
  .l-header__inner {
    height: 48px;
  }
  .l-header__logo .c-siteTitle,
  .l-header__logo a {
    height: 20px;
    line-height: 20px;
  }
}

/* ====================================================
   ヘッダー右側（電話番号＋CTAボタン）
   SWELLの「ヘッダー内部」ウィジェットに配置。
   このウィジェット領域はスマホでは表示されないため、
   SP＝ロゴ＋ハンバーガーのみ、というワイヤーの構造と一致する
==================================================== */
.df-hd-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.df-hd-tel {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--df-blue); /* アイコン(currentColor)も同時に青になる */
  white-space: nowrap;
}
.df-hd-ico {
  width: 17px;
  height: 17px;
  vertical-align: -2px;
  margin-right: 6px;
}
.df-hd-cta {
  background: var(--df-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 13px 20px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.25s;
}
.df-hd-cta:hover {
  color: #fff;
  opacity: 0.85;
}
/* ヘッダー内ウィジェットの既定余白を打ち消す */
.w-header .c-widget {
  margin: 0;
}
/* 画面が狭いPC・タブレットでは電話番号を隠してボタンだけ残す */
@media (max-width: 1100px) {
  .df-hd-tel {
    display: none;
  }
}

/* FVの電話番号にも受話器アイコンを付ける。
   ブロック本文には手を入れず、CSSのマスクで描画する
   （文言をクライアントが編集してもアイコンが消えない／ブロックが壊れない）。
   mask + currentColor なので、背景の明暗に合わせて色が自動で追従する */
.df-tel-number a::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: -3px;
  margin-right: 8px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.68 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.32 1.85.55 2.81.68A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.68 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.32 1.85.55 2.81.68A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (max-width: 768px) {
  .df-tel-number a::before {
    width: 20px;
    height: 20px;
    margin-right: 6px;
  }
}

/* ====================================================
   FVキャッチコピー：1行ずつ白背景（案B・クライアント承認デザイン方向）
   span 1個で全体を包み、box-decoration-break: clone で
   折返した行ごとに背景・paddingを付ける。
   PC=2行／SP=3行と行数が変わっても、行単位で自動的に箱になる
==================================================== */
.df-fv-title {
  line-height: 2.45; /* 箱同士の縦の間隔。白箱の高さ＋隙間ぶんを行間で作る */
}
.df-fv-title .df-fv-box {
  background: #fff;
  color: var(--df-navy);
  padding: 8px 20px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* 写真背景セクションの白文字継承より優先させる */
.swell-block-fullWide.has-bg-img .df-fv-title .df-fv-box {
  color: var(--df-navy);
}
/* SWELLの背景オーバーレイ（::before, z-index:1）がコンテンツの上に乗り、
   白箱が薄紺に沈むため、コンテンツ層をオーバーレイより上に出す */
.swell-block-fullWide.has-bg-img .swell-block-fullWide__inner {
  position: relative;
  z-index: 2;
}
@media (max-width: 768px) {
  .df-fv-title .df-fv-box {
    padding: 5px 12px;
  }
}

/* ====================================================
   スクロールアニメーション
   JS（functions.php）が画面内に入った要素に .is-in を付ける
==================================================== */
.df-fade {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.df-fade.is-in {
  opacity: 1;
  transform: none;
}
/* FV・中間CTA（セクションの中身まとめて出す方）は縦移動なしの純粋なフェードにする。
   縦に動かすと、読み込み中のわずかな遅れが「画面のガクつき」として見えるため */
.swell-block-fullWide__inner.df-fade {
  transform: none;
}
/* 動きを控える設定の人／JSが動かない場合でも中身が消えないようにする */
@media (prefers-reduced-motion: reduce) {
  .df-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .df-h2-em,
  .df-h2-lg,
  .df-h2-blue {
    background-size: 100% 100%;
    transition: none;
  }
}