/* ===== 大洋電化 共通ベースCSS（全ページ共通の色・余白・部品） =====
   トークン（色・余白）は tokens.css に一元化（このファイルでは :root を定義しない）。
   中身はすべて .taiyo スコープ＝トップページ（.taiyo-top / top.css）とは干渉しません。 */

/* ===== 全体の既定フォント（指示書#35）=====
   .taiyo外（ブログ記事本文 .post_content・SWELLのヘッダーナビ等）にも M PLUS Rounded 1c を効かせ、
   全端末・全ページで書体を統一する（Windowsの游ゴシックが細く出る問題への対策）。
   SWELL既定の body 指定に後勝ちさせるため base.css（子テーマ・後読み）で上書き。既存書体はフォールバックとして維持。 */
body{ font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",sans-serif; }

.taiyo *{box-sizing:border-box}
.taiyo{
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",sans-serif;
  color:var(--ink);line-height:1.8;background:var(--cream);
}
.taiyo img{display:block;max-width:100%}
.taiyo a{color:inherit}
.taiyo .wrap{max-width:1140px;margin:0 auto;padding:0 var(--s5)}
.taiyo section{padding:var(--s9) 0}

/* ボタン */
.taiyo .ctarow{display:flex;gap:var(--s4);flex-wrap:wrap}
.taiyo .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font-weight:800;padding:10px 30px;min-height:60px;border-radius:30px;font-size:18px;line-height:1.3;transition:.15s}
.taiyo .btn.tel{background:var(--orange-cta);color:#fff;box-shadow:0 6px 0 #9e4711}
.taiyo .btn.line{background:var(--lg);color:#fff;box-shadow:0 6px 0 #04a544}
.taiyo .btn.ghost{background:#fff;color:var(--navy);box-shadow:0 5px 0 #cfd9e2}
.taiyo .btn:hover{transform:translateY(-2px)}
.taiyo .btn svg{width:22px;height:22px;fill:currentColor}
/* ゴーストボタン末尾の「▸」はCSS三角形で描画（文字グリフだと上寄りになるため）。align-items:centerで上下中央 */
.taiyo .btn.ghost{gap:8px}
.taiyo .btn.ghost::after{content:"";width:0;height:0;border-style:solid;border-width:5px 0 5px 7.5px;border-color:transparent transparent transparent currentColor;flex:none;position:relative;top:.5px}
/* 「◂ 一覧へ戻る」だけは先頭に左向き三角形（末尾は出さない） */
.taiyo .btn.ghost.-back::after{content:none}
.taiyo .btn.ghost.-back::before{content:"";width:0;height:0;border-style:solid;border-width:5px 7.5px 5px 0;border-color:transparent currentColor transparent transparent;flex:none;position:relative;top:.5px}

/* セクション見出し */
.taiyo h2.t{font-size:34px;color:var(--navy);font-weight:900;text-align:center;letter-spacing:.02em}
.taiyo h2.t .en{display:block;color:var(--orange-cta);font-size:14px;letter-spacing:.2em;margin-bottom:6px}
.taiyo .bar{width:54px;height:6px;background:var(--orange);border-radius:4px;margin:var(--s4) auto var(--s6)}
.taiyo .lead-c{text-align:center;color:var(--muted);font-size:17px;max-width:34em;margin:0 auto var(--s7);font-weight:500}

/* グリッド・カード */
.taiyo .grid{display:grid;gap:var(--s5)}
.taiyo .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.taiyo .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.taiyo .card{background:#fff;border:2px solid var(--line);border-radius:24px;overflow:hidden;color:inherit;display:flex;flex-direction:column;min-width:0}

/* SWELL自動パンくず(.p-breadcrumb)を非表示：各テンプレの .crumb と重複するため */
.p-breadcrumb{ display:none !important; }

/* カード内テキスト/画像が min-content で縮まず狭幅で右にはみ出すのを防止 */
.taiyo .card h3,.taiyo .card p{ overflow-wrap:anywhere; word-break:normal; }
.taiyo .card .ph,.taiyo .card .ph img{ min-width:0; }
.taiyo .card .b{ min-width:0; }

/* パンくず（mock 準拠） */
.taiyo .crumb{font-size:14px;color:var(--muted);padding:var(--s3) var(--s5);max-width:1120px;margin:0 auto}
.taiyo .crumb a{color:var(--navy);text-decoration:none;font-weight:700}
.taiyo .crumb a:hover{color:var(--orange-cta)}

/* 共通・最終CTAバンド */
.taiyo .ctaband{background:var(--navy);text-align:center;padding:var(--s9) var(--s5)}
.taiyo .ctaband h2{color:#fff;font-size:28px;font-weight:900;margin-bottom:var(--s2)}
.taiyo .ctaband p{color:#cfe0f0;font-size:16px;margin-bottom:var(--s5)}
.taiyo .ctaband .ctarow{justify-content:center}

/* 関連導線セクション（.relnav）の余白（指示書#24：:has非依存の確実版）。
   直前セクションの下余白を負マージンでピタリ相殺し、.relnav自身のpaddingで間隔を作る。
   ※サービス詳細ページは pages.css を読み込まないため base.css に定義（全ページ共通で効かせる）。
   ※直前セクションの下余白：通常ページ=.taiyo section（PC:s9/SP:s8）、サービス詳細=.taiyo-svc section（PC/SP:s8）。 */
.taiyo .relnav{ margin-top: calc(-1 * var(--s9)); padding: var(--s7) 0 var(--s7); }
.taiyo-svc .relnav{ margin-top: calc(-1 * var(--s8)); }   /* サービス詳細：直前セクション下余白が s8 のため相殺量を s8 に */

@media(max-width:820px){
  .taiyo .g3,.taiyo .g2{grid-template-columns:minmax(0,1fr)}
  .taiyo h2.t{font-size:26px}
  .taiyo .ctaband h2{font-size:24px}   /* CTA見出しをモバイルで縮小（「大丈夫」等の1文字落ち防止） */
  .taiyo .btn{min-height:56px;font-size:17px}
  .taiyo section{padding:var(--s8) 0}
  /* モバイルは通常ページもサービス詳細も直前セクション下余白=s8 のため共通で -s8 相殺 */
  .taiyo .relnav{ margin-top: calc(-1 * var(--s8)); padding: var(--s5) 0 var(--s6); }
}

/* タブレット中間（821〜1024px）：3カラムは窮屈なので2カラムに（top.cssと同方針） */
@media (min-width:821px) and (max-width:1024px){
  .taiyo .g3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ===== モバイル改行ユーティリティ（指示書#9）=====
   .br-sp = モバイル(≤820px)のみ改行 / .br-pc = PCのみ改行。全下層ページ共通。
   ※フロントページ(.taiyo-top/top.css)側にも同等定義あり（base.css非読込のため）。 */
.br-sp{ display:none; }
.br-pc{ display:inline; }
@media screen and (max-width:820px){
  .br-sp{ display:inline; }
  .br-pc{ display:none; }
}

/* 見出し・リード文が変な位置で折れないように（対応ブラウザのみ・非対応でも無害） */
.taiyo h1, .taiyo h2, .taiyo h2.t,
.taiyo .lead-c, .taiyo .lead, .taiyo .phead p{
  text-wrap: balance;          /* 行の長さを均等に */
  word-break: keep-all;        /* 日本語の途中で折らない */
  overflow-wrap: anywhere;     /* どうしても入らない時だけ折る */
}
/* 本文段落は行を最後まで埋めて折り返す（左揃え・右に大きな空きを作らない）＝標準の日本語組み。
   text-wrap:pretty/balance は日本語本文だと（特にiOS Safariで）行が短く詰まり右が空くため本文には使わない。
   中央寄せのリード文/見出し(.lead/.lead-c/.phead p/h1/h2)は、より詳細度の高い上のルールでbalanceを維持。 */
.taiyo p, .taiyo li{ text-wrap: wrap; word-break: normal; overflow-wrap: anywhere; }

/* .box の中の最後の要素は下余白を消す（箱の下に余白が二重にならない・全ページ共通）（指示書#10-4） */
.taiyo .box > *:last-child{ margin-bottom: 0; }

/* CTAband等の見出しが1文字だけ落ちないように（指示書#10-5-4の保険） */
.taiyo .ctaband h2{ text-wrap: balance; word-break: keep-all; }

/* ===== インラインstyleから移設した共通ユーティリティ（指示書#28-H：見た目1px不変） ===== */
.taiyo .ctarow.-center{ justify-content:center; }   /* 単独CTA行の中央寄せ（各下層ページ） */
.taiyo .-mt7{ margin-top:var(--s7); }
.taiyo .-mt4{ margin-top:var(--s4); }
.taiyo .-mb4{ margin-bottom:var(--s4); }
.taiyo b.-green{ color:var(--green); }
/* .box-h（.box内の小見出しh2）は .prose h2 と競合するため pages.css 側で高詳細度に定義 */

/* ===== 指示書#31：料金表のカード型表示（大・特大 × 狭い画面） =====
   横スクロールは「できることが見た目で分からない」ため廃止（#30の保護を置き換え）。
   大/特大 × 640px以下では、1行＝1カード（作業内容が上・料金が右下）に組み替え、
   スクロール操作なしで全情報が見えるようにする。
   標準時・広い画面は従来のテーブル表示のまま。
   サービス詳細は pages.css 非読込のため、全ページ共通の base.css に定義（#24・#30と同方針）。 */
@media screen and (max-width:640px){
  html[data-fontsize="large"] .taiyo table,
  html[data-fontsize="xlarge"] .taiyo table{
    display:block; background:transparent; border-radius:0; overflow:visible; margin:var(--s3) 0;
  }
  html[data-fontsize="large"] .taiyo table tbody,
  html[data-fontsize="xlarge"] .taiyo table tbody{ display:block; }
  /* ヘッダー行（作業内容/料金の目安）は非表示：カード型では自明のため */
  html[data-fontsize="large"] .taiyo table tr:first-child,
  html[data-fontsize="xlarge"] .taiyo table tr:first-child{ display:none; }
  /* 1行＝1カード */
  html[data-fontsize="large"] .taiyo table tr,
  html[data-fontsize="xlarge"] .taiyo table tr{
    display:block; background:#fff; border:2px solid var(--line); border-radius:12px;
    padding:var(--s4) var(--s5); margin-bottom:var(--s3);
  }
  html[data-fontsize="large"] .taiyo table td,
  html[data-fontsize="xlarge"] .taiyo table td{
    display:block; border-bottom:none; padding:0; text-align:left;
  }
  /* 作業内容（上段） */
  html[data-fontsize="large"] .taiyo table td:first-child,
  html[data-fontsize="xlarge"] .taiyo table td:first-child{
    color:var(--ink); font-weight:700; margin-bottom:var(--s2); line-height:1.6;
  }
  /* 料金（下段・右寄せ） */
  html[data-fontsize="large"] .taiyo table td.price,
  html[data-fontsize="xlarge"] .taiyo table td.price{
    text-align:right; white-space:normal;
  }
}