@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
*/

/* ============================================================
   奥山社会保険労務士事務所 — サイト用スタイル
   対象: SWELL 2.15.0 / SWELL CHILD

   【編集場所】
   外観 > テーマファイルエディター
     → 右上「編集するテーマを選択」で SWELL CHILD を選ぶ
     → style.css

   【注意】
   冒頭の Template: swell 〜 */ のコメントは絶対に削除しないこと。
   削除すると子テーマとして認識されなくなります。

   ※ このCSSは SWELL 2.15.0 の build/css/main.css と
      classes/Style/Post.php を実際に読んで作成しています。
      打ち消しの根拠は各ブロックのコメントに記載。
   ※ ただし実機での表示確認はしていません。
      崩れたら該当箇所を知らせてください。
   ============================================================ */


/* ============================================================
   1. SWELL本体スタイルの打ち消し
   ------------------------------------------------------------
   SWELLは :is(.post_content,.mce-content-body) 配下に以下を適用してくる:

   (a) :is(.post_content,.mce-content-body) > *      → margin-bottom: 2em
   (b) :is(.post_content,.mce-content-body) h2       → margin: 4em 0 2em / font-size:1.4em
   (c) :is(.post_content,.mce-content-body) h3       → margin: 3em 0 2em + ::before
   (d) h2:where(:not([class^="swell-block-"])...)
       → 見出しデザイン（背景色・左線・::before）を動的に付与
       ※ :where() は詳細度0なので実質 :is(.post_content,.mce-content-body) h2 (0,1,1)
         → こちらは :is(.post_content,.mce-content-body) .sr h2 (0,2,1) で確実に勝てる
   (e) :is(.post_content,.mce-content-body) td, th   → border: 1px solid / padding: .5em
       :is(.post_content,.mce-content-body) th       → 背景色 + font-weight:700
   (f) :is(.post_content,.mce-content-body) small    → font-size:.8em / opacity:.8
   (g) :is(.post_content,.mce-content-body) div > :first-child { margin-top:0 !important }
       :is(.post_content,.mce-content-body) div > :last-child  { margin-bottom:0 !important }
       → !important なので、この2つには逆らわず padding で組む

   なお追加CSSは wp_head 優先度101、SWELLの動的CSSは優先度8前後で
   出力されるため、同詳細度なら追加CSS側が勝ちます。
   ============================================================ */

/* (a) セクション同士の余計な2em隙間を消す */
:is(.post_content,.mce-content-body) > .sr { margin-bottom: 0; }

/* (b)(c)(d) 見出し装飾を完全に無効化 */
:is(.post_content,.mce-content-body) .sr h1,
:is(.post_content,.mce-content-body) .sr h2,
:is(.post_content,.mce-content-body) .sr h3 {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  line-height: 1.5;
  position: static;
}
:is(.post_content,.mce-content-body) .sr h1::before, :is(.post_content,.mce-content-body) .sr h1::after,
:is(.post_content,.mce-content-body) .sr h2::before, :is(.post_content,.mce-content-body) .sr h2::after,
:is(.post_content,.mce-content-body) .sr h3::before, :is(.post_content,.mce-content-body) .sr h3::after {
  content: none;
  display: none;
}

/* (e) テーブルの初期罫線を消す（自前で引き直す） */
:is(.post_content,.mce-content-body) .sr table,
:is(.post_content,.mce-content-body) .sr th,
:is(.post_content,.mce-content-body) .sr td {
  border: none;
  padding: 0;
  background: none;
  font-weight: 400;
  color: inherit;
}

/* (f) small の減光を解除 */
:is(.post_content,.mce-content-body) .sr small {
  font-size: inherit;
  opacity: 1;
}

/* リンクの下線・色を自前管理に */
:is(.post_content,.mce-content-body) .sr a { text-decoration: none; }


/* ============================================================
   2. カラー変数
   ------------------------------------------------------------
   サイト全体のメインカラーは CSS ではなく
   「外観 > カスタマイズ > サイト全体設定 > 基本カラー > メインカラー」
   で #2a7a4a に設定してください（そちらが正規の設定箇所です）。
   ここでの変数は .sr 内の装飾専用です。
   ============================================================ */
.sr {
  --g:        #2a7a4a;  /* メイン緑 */
  --g-hover:  #3a8a5a;
  --g-pale:   #e8f5ec;  /* 淡い緑（アイコン背景・バッジ） */
  --g-line:   #b0d8be;  /* 緑の枠線 */
  --card-line:#d0e8d8;  /* カードの枠線 */
  --txt:      #1a3022;
  --txt-sub:  #4a6a54;
  --txt-mute: #8fb89e;

  color: var(--txt);
  line-height: 1.8;
}


/* ============================================================
   3. ヒーロー（FV）
   ============================================================ */
.sr-hero {
  background: linear-gradient(145deg, #e8f5ec 0%, #f2faf4 55%, #fffef5 100%);
  padding: 64px 24px 56px;
  text-align: center;
  border-radius: 12px;
}
.sr-hero__eyebrow {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--g);
  margin-bottom: 16px;
}
.sr-hero__title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--txt);
  margin-bottom: 16px;
}
.sr-hero__title em { color: var(--g); font-style: normal; }
.sr-hero__desc {
  font-size: 14px;
  color: var(--txt-sub);
  line-height: 1.9;
  margin-bottom: 32px;
}
.sr-hero__btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.sr-hero__tags {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.sr-hero__tag {
  background: #fff;
  border: 1px solid var(--g-line);
  color: var(--txt-sub);
  font-size: 12px;
  padding: 6px 16px;
  border-radius: 20px;
}

/* ボタン */
:is(.post_content,.mce-content-body) .sr-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--g);
  color: #fff;
  padding: 15px 40px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(42,122,74,.28);
  transition: background .2s, box-shadow .2s, transform .1s;
}
:is(.post_content,.mce-content-body) .sr-btn-primary:hover {
  background: var(--g-hover);
  color: #fff;
  box-shadow: 0 6px 20px rgba(42,122,74,.38);
}
:is(.post_content,.mce-content-body) .sr-btn-primary:active { transform: translateY(1px); }

:is(.post_content,.mce-content-body) .sr-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--g);
  border: 2px solid var(--g);
  padding: 13px 38px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  transition: background .2s, transform .1s;
}
:is(.post_content,.mce-content-body) .sr-btn-outline:hover { background: var(--g-pale); color: var(--g); }
:is(.post_content,.mce-content-body) .sr-btn-outline:active { transform: translateY(1px); }

@media (max-width: 600px) {
  .sr-hero { padding: 44px 18px 40px; }
  .sr-hero__title { font-size: 22px; }
  .sr-hero__desc  { font-size: 13px; }
  .sr-hero__btns  { flex-direction: column; gap: 12px; }
  :is(.post_content,.mce-content-body) .sr-btn-primary,
  :is(.post_content,.mce-content-body) .sr-btn-outline { width: 100%; padding: 15px 20px; }
}


/* ============================================================
   4. セクション共通
   ============================================================ */
.sr-section  { padding: 56px 0; }
.sr-sec-head { text-align: center; margin-bottom: 36px; }
.sr-sec-en {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--g);
  margin-bottom: 8px;
}
:is(.post_content,.mce-content-body) .sr .sr-sec-ja {
  font-size: 22px;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 12px;
}
/* 下線バーは見出しの ::after で描画（空divを廃止） */
:is(.post_content,.mce-content-body) .sr .sr-sec-ja::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  background: var(--g);
  border-radius: 2px;
  margin: 12px auto 0;
}
.sr-sec-desc {
  font-size: 13px;
  color: var(--txt-mute);
  line-height: 1.8;
}
@media (max-width: 600px) {
  .sr-section { padding: 40px 0; }
  :is(.post_content,.mce-content-body) .sr .sr-sec-ja { font-size: 19px; }
}


/* ============================================================
   5. 取扱業務
   ============================================================ */
.sr-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) { .sr-services { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .sr-services { grid-template-columns: 1fr; } }

.sr-service-card {
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.sr-service-card:hover {
  border-color: var(--g-line);
  box-shadow: 0 4px 14px rgba(42,122,74,.08);
}
:is(.post_content,.mce-content-body) .sr .sr-service-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 8px;
}
.sr-service-card p {
  font-size: 12px;
  color: var(--txt-sub);
  line-height: 1.75;
}


/* ============================================================
   6. 選ばれる理由
   ============================================================ */
.sr-reasons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 700px) { .sr-reasons { grid-template-columns: 1fr; } }

.sr-reason-card {
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.sr-reason-card__num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--g);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
:is(.post_content,.mce-content-body) .sr .sr-reason-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 6px;
}
.sr-reason-card p {
  font-size: 12px;
  color: var(--txt-sub);
  line-height: 1.7;
}


/* ============================================================
   7. 代表紹介
   ============================================================ */
.sr-profile {
  display: flex;
  gap: 28px;
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: 16px;
  padding: 32px;
}
.sr-profile__photo,
.sr-profile__photo-ph {
  width: 110px;
  height: 138px;
  border-radius: 10px;
  flex-shrink: 0;
}
.sr-profile__photo { object-fit: cover; }
.sr-profile__photo-ph {
  background-color: var(--g-pale);
  color: var(--g);
  font-size: 11px;
  text-align: center;
  padding-top: 84px;
}
.sr-profile__name {
  font-size: 20px;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 4px;
}
.sr-profile__title {
  font-size: 12px;
  color: var(--g);
  margin-bottom: 14px;
}
.sr-profile__text {
  font-size: 13px;
  color: var(--txt-sub);
  line-height: 1.9;
}
.sr-profile__badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.sr-profile__badge {
  background: var(--g-pale);
  color: #1a5c34;
  border: 1px solid var(--g-line);
  font-size: 11px;
  padding: 4px 14px;
  border-radius: 20px;
}
@media (max-width: 600px) {
  .sr-profile { flex-direction: column; align-items: center; text-align: center; padding: 24px 20px; }
  .sr-profile__badges { justify-content: center; }
}


/* ============================================================
   8. お知らせ
   ============================================================ */
.sr-news {
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: 12px;
  overflow: hidden;
}
.sr-news__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid #e8f2ec;
}
.sr-news__item:last-child { border-bottom: none; }
.sr-news__date {
  font-size: 12px;
  color: var(--txt-mute);
  width: 82px;
  flex-shrink: 0;
  white-space: nowrap;
}
.sr-news__tag {
  background: var(--g-pale);
  color: var(--g);
  font-size: 11px;
  padding: 3px 12px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sr-news__text { font-size: 13px; color: #3a5a44; }
@media (max-width: 560px) {
  .sr-news__item { flex-wrap: wrap; gap: 8px; }
  .sr-news__text { width: 100%; }
}


/* ============================================================
   9. 料金
   ============================================================ */
.sr-fees {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 700px) { .sr-fees { grid-template-columns: 1fr; } }

.sr-fee-card {
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: 12px;
  padding: 20px 22px;
}
.sr-fee-card__label {
  font-size: 11px;
  color: var(--txt-mute);
  margin-bottom: 4px;
}
.sr-fee-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 10px;
}
.sr-fee-card__price {
  font-size: 22px;
  font-weight: 700;
  color: var(--g);
}
/* :is(.post_content,.mce-content-body) small の減光は上で解除済み。ここでサイズだけ指定 */
:is(.post_content,.mce-content-body) .sr .sr-fee-card__price small {
  font-size: 12px;
  color: var(--txt-mute);
  font-weight: 400;
}
.sr-fee-card__note {
  font-size: 11px;
  color: var(--txt-mute);
  margin-top: 6px;
}
.sr-fee-tax {
  font-size: 11px;
  color: var(--txt-mute);
  text-align: center;
  margin-top: 16px;
}


/* ============================================================
   10. 事務所概要テーブル
   ============================================================ */
.sr-table-wrap {
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: 12px;
  overflow: hidden;
}
:is(.post_content,.mce-content-body) .sr .sr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 0;
}
:is(.post_content,.mce-content-body) .sr .sr-table tr { border-bottom: 1px solid #e8f2ec; }
:is(.post_content,.mce-content-body) .sr .sr-table tr:last-child { border-bottom: none; }
:is(.post_content,.mce-content-body) .sr .sr-table th,
:is(.post_content,.mce-content-body) .sr .sr-table td {
  padding: 13px 18px;
  vertical-align: top;
  text-align: left;
}
:is(.post_content,.mce-content-body) .sr .sr-table th {
  width: 120px;
  background: #f2faf4;
  color: var(--txt-mute);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}
@media (max-width: 560px) {
  :is(.post_content,.mce-content-body) .sr .sr-table th,
  :is(.post_content,.mce-content-body) .sr .sr-table td { display: block; width: 100%; padding: 10px 16px; }
  :is(.post_content,.mce-content-body) .sr .sr-table th { padding-bottom: 2px; }
  :is(.post_content,.mce-content-body) .sr .sr-table td { padding-top: 0; }
}


/* ============================================================
   11. アクセス
   ============================================================ */
.sr-access {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 700px) { .sr-access { grid-template-columns: 1fr; } }

/* SWELLは :is(.post_content,.mce-content-body) iframe に display:block; margin:auto を当てている（衝突なし） */
.sr-access__map iframe {
  width: 100%;
  height: 280px;
  border: 1px solid var(--card-line);
  border-radius: 10px;
}
.sr-access__info {
  font-size: 13px;
  line-height: 2;
  color: var(--txt-sub);
}
.sr-access__label {
  display: block;
  font-size: 11px;
  color: var(--txt-mute);
  margin-top: 12px;
}
.sr-access__info > .sr-access__label:first-child { margin-top: 0; }


/* ============================================================
   12. お問い合わせ
   ============================================================ */
.sr-contact-tel {
  background: var(--g-pale);
  border: 1px solid var(--g-line);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
}
.sr-contact-tel__label {
  font-size: 12px;
  color: #4a8a64;
  margin-bottom: 8px;
}
:is(.post_content,.mce-content-body) .sr .sr-contact-tel__num {
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--g);
  margin-bottom: 6px;
}
.sr-contact-tel__hours { font-size: 12px; color: var(--txt-sub); }
.sr-contact-tel__note  { font-size: 11px; color: var(--txt-mute); margin-top: 6px; }
@media (max-width: 600px) {
  :is(.post_content,.mce-content-body) .sr .sr-contact-tel__num { font-size: 26px; }
}


/* ============================================================
   13. Contact Form 7
   ------------------------------------------------------------
   フォームは .sr の外（別ブロック）に置くため、
   .sr 配下ではなく .sr-form 単体で完結させる
   ============================================================ */
.sr-form .wpcf7-form {
  background: #fff;
  border: 1px solid #d0e8d8;
  border-radius: 12px;
  padding: 28px;
}
.sr-form .wpcf7-form label {
  display: block;
  font-size: 12px;
  color: #4a6a54;
  margin-top: 14px;
  margin-bottom: 4px;
}
.sr-form .wpcf7-form input[type="text"],
.sr-form .wpcf7-form input[type="email"],
.sr-form .wpcf7-form input[type="tel"],
.sr-form .wpcf7-form select,
.sr-form .wpcf7-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #c8e4d0;
  border-radius: 6px;
  font-size: 14px;
  color: #1a3022;
  background: #f8fdf9;
}
.sr-form .wpcf7-form input:focus,
.sr-form .wpcf7-form select:focus,
.sr-form .wpcf7-form textarea:focus {
  outline: none;
  border-color: #2a7a4a;
  box-shadow: 0 0 0 3px rgba(42,122,74,.12);
}
.sr-form .wpcf7-form textarea { height: 120px; resize: vertical; }
.sr-form .wpcf7-form .wpcf7-submit {
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  background: #2a7a4a;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s;
}
.sr-form .wpcf7-form .wpcf7-submit:hover { background: #3a8a5a; }


/* ============================================================
   14. ページ内リンクのスクロール位置
   ------------------------------------------------------------
   SWELLの固定ヘッダーに隠れないよう scroll-margin-top を使用。
   （負マージン方式は上の要素のクリックを妨げるため不使用）
   ============================================================ */
.sr [id] { scroll-margin-top: 90px; }

/* ============================================================
   15. アイコン（カードの ::before で描画）
   ------------------------------------------------------------
   空の <div> はビジュアルエディタで削除されてしまうため、
   アイコンはカード自身の ::before で描画しています。
   HTML側はカードに sr-card--rule のようなクラスを付けるだけです。
   ============================================================ */
.sr-service-card::before {
  content: "";
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  background-color: var(--g-pale);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
  border-radius: 12px;
}
.sr-card--rule::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232a7a4a%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpolyline%20points%3D%2214%202%2014%208%2020%208%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%2213%22%20x2%3D%228%22%20y2%3D%2213%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%2217%22%20x2%3D%228%22%20y2%3D%2217%22%2F%3E%3C%2Fsvg%3E"); }
.sr-card--insurance::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232a7a4a%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%2021V5a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v16%22%2F%3E%3C%2Fsvg%3E"); }
.sr-card--payroll::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232a7a4a%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%2221%22%20x2%3D%2216%22%20y2%3D%2221%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2217%22%20x2%3D%2212%22%20y2%3D%2221%22%2F%3E%3C%2Fsvg%3E"); }
.sr-card--grant::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232a7a4a%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%2223%22%2F%3E%3Cpath%20d%3D%22M17%205H9.5a3.5%203.5%200%200%200%200%207h5a3.5%203.5%200%200%201%200%207H6%22%2F%3E%3C%2Fsvg%3E"); }
.sr-card--consult::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232a7a4a%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22%2F%3E%3C%2Fsvg%3E"); }
.sr-card--shield::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232a7a4a%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22%2F%3E%3C%2Fsvg%3E"); }

/* 代表者写真プレースホルダ */
.sr-profile__photo-ph {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232a7a4a%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2021v-2a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center 42px;
  background-size: 30px 30px;
}

/* ============================================================
   16. ビジュアルエディタ内での表示調整
   ------------------------------------------------------------
   エディタ内には SWELL の main.css が読み込まれず、
   全体リセット（* { margin:0; padding:0 }）が効かないため、
   .sr 配下だけ同等のリセットをかけて表示を front と揃える。
   ============================================================ */
.mce-content-body .sr,
.mce-content-body .sr * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.mce-content-body .sr {
  font-family: inherit;
  font-weight: 400;
}
/* エディタ内では編集対象が分かるよう、セクションの境目を薄く示す */
.mce-content-body .sr {
  outline: 1px dashed rgba(42,122,74,.25);
  outline-offset: 2px;
}

/* ============================================================
   17. ビジュアルエディタ内でのパーツ表示補助
   ------------------------------------------------------------
   「パーツ挿入」で単体を挿入した直後は、親の .sr が無い状態でも
   デザインが見えるようにしておく。
   （サイト表示側では .sr の中に入るので影響しない）
   ============================================================ */
.mce-content-body .sr-service-card,
.mce-content-body .sr-reason-card,
.mce-content-body .sr-fee-card,
.mce-content-body .sr-news__item,
.mce-content-body .sr-contact-tel,
.mce-content-body .sr-profile,
.mce-content-body .sr-hero {
  --g:         #2a7a4a;
  --g-hover:   #3a8a5a;
  --g-pale:    #e8f5ec;
  --g-line:    #b0d8be;
  --card-line: #d0e8d8;
  --txt:       #1a3022;
  --txt-sub:   #4a6a54;
  --txt-mute:  #8fb89e;
}
/* エディタ内では編集対象の範囲が分かるよう境界を薄く表示 */
.mce-content-body .sr-services,
.mce-content-body .sr-reasons,
.mce-content-body .sr-fees,
.mce-content-body .sr-news,
.mce-content-body .sr-table-wrap {
  outline: 1px dashed rgba(42,122,74,.30);
  outline-offset: 3px;
}

/* ============================================================
   18. ヘッダー内の電話番号・CTAボタン
   ------------------------------------------------------------
   配置場所: 外観 > ウィジェット > 「ヘッダー内部」
             にカスタムHTMLウィジェットとして設置する。
   SWELLはこのエリアを以下の構造で出力する:
     <div class="w-header pc_"><div class="w-header__inner">
       <div class="w-header__item widget_custom_html"> ... </div>
   ※ pc_ クラスが付くためスマホでは非表示。
      スマホ用は カスタマイザー > ヘッダー > カスタムボタン で対応。
   ============================================================ */
.sr-head-cta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sr-head-tel {
  text-align: right;
  line-height: 1.3;
}
.sr-head-tel__label {
  display: block;
  font-size: 10px;
  color: #7a9882;
  letter-spacing: .5px;
}
.l-header .sr-head-tel__num {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #2a7a4a;
  letter-spacing: .5px;
  text-decoration: none;
  margin: 1px 0;
}
.sr-head-tel__hours {
  display: block;
  font-size: 10px;
  color: #7a9882;
}
.l-header .sr-head-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2a7a4a;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}
.l-header .sr-head-btn:hover {
  background: #3a8a5a;
  color: #fff;
}

/* ヘッダー内ウィジェットの既定余白を打ち消す */
.l-header .w-header__item { margin: 0; }

/* 画面が狭いときは電話番号を少し小さく */
@media (max-width: 1100px) {
  .l-header .sr-head-tel__num { font-size: 17px; }
  .l-header .sr-head-btn { font-size: 12px; padding: 10px 16px; }
  .sr-head-cta { gap: 10px; }
}


/* ============================================================
   19. グローバルナビの微調整
   ============================================================ */
.l-header .c-gnav > li > a {
  font-size: 14px;
  font-weight: 500;
}


/* ============================================================
   20. フッター
   ------------------------------------------------------------
   SWELL 2.15.0 の実際の出力構造（build/css/modules/parts/footer.css
   および lib/widget.php で確認）:

     <footer class="l-footer">
       <div class="l-footer__widgetArea">
         <div class="l-container w-footer -col3">
           <div class="w-footer__box">
             <div class="c-widget ...">
               <div class="c-widget__title -footer">見出し</div>
               ... ウィジェットの中身 ...
       <div class="l-footer__foot">
         <ul class="l-footer__nav"> ← フッターメニュー
         <p class="copyright">

   SWELL側の既定:
     .l-footer a, .l-footer span { color: inherit }
       → 色を変えたい要素は詳細度を上げて指定する
     .l-footer__nav a { font-size:13px; padding:0 .75em; border-right:1px solid }
     .w-footer { display:flex; justify-content:space-between }
     .w-footer__box { flex:1; padding:1em }
   ============================================================ */

/* ウィジェットの見出し
   ------------------------------------------------------------
   WordPress 5.8以降のブロック版ウィジェット画面では、
   ウィジェットのタイトル欄（before_title / after_title）が
   使われず .c-widget__title が出力されない。
   そのため見出しはHTML側に .sr-foot-h として直接書く方式にする。
   （旧クラシック版ウィジェットでも動くよう両方に指定） */
.l-footer .c-widget__title.-footer,
.l-footer .sr-foot-h {
  font-size: 13px;
  font-weight: 500;
  padding-bottom: 8px;
  margin: 0 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}

/* --- 事務所情報ブロック --- */
.sr-foot-info {
  font-size: 12px;
  line-height: 2;
  opacity: .85;
}
.l-footer .sr-foot-info__name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  opacity: 1;
  margin-bottom: 6px;
}

/* --- リンクリスト --- */
.sr-foot-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sr-foot-links li { margin: 0; }
.l-footer .sr-foot-links a {
  display: block;
  font-size: 12px;
  padding: 5px 0;
  opacity: .85;
  text-decoration: none;
  transition: opacity .2s;
}
.l-footer .sr-foot-links a:hover { opacity: 1; }
.l-footer .sr-foot-links a::before {
  content: "\203A";
  margin-right: 7px;
  opacity: .6;
}

/* --- フッターのボタン --- */
.l-footer .sr-foot-btn {
  display: block;
  background: #2a7a4a;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  padding: 11px 10px;
  border-radius: 6px;
  margin-bottom: 8px;
  text-decoration: none;
  transition: background .2s;
}
.l-footer .sr-foot-btn:hover { background: #3a8a5a; color: #fff; }

.l-footer .sr-foot-btn.-tel {
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  font-size: 15px;
  letter-spacing: .5px;
}
.l-footer .sr-foot-btn.-tel:hover {
  background: rgba(255,255,255,.08);
}
.sr-foot-btn__sub {
  display: block;
  font-size: 10px;
  font-weight: 400;
  opacity: .75;
  margin-top: 2px;
}

/* --- フッターメニュー（プライバシーポリシー等） --- */
.l-footer .l-footer__nav a {
  font-size: 12px;
  opacity: .8;
}
.l-footer .l-footer__nav a:hover { opacity: 1; }

/* --- コピーライト --- */
.l-footer .copyright {
  font-size: 11px;
  opacity: .6;
}

/* --- スマホ調整 --- */
@media (max-width: 768px) {
  .l-footer .c-widget__title.-footer { margin-bottom: 8px; }
  .sr-foot-info { line-height: 1.9; }
  .l-footer .l-footer__nav a { font-size: 11px; }
}


/* ============================================================
   21. SNSリンク（X / Instagram）
   ------------------------------------------------------------
   スマホにはマウスホバーが無いため、
   ブランドカラーは「最初から」適用する。
   ホバー時は少し浮かせるだけにして、
   PC・スマホどちらでも同じ見え方になるようにしている。

   アイコンは data URI のSVGとしてCSS側に持たせているため、
   HTML側は <a class="sr-sns sr-sns--x"> と書くだけでよい。
   ============================================================ */
.sr-sns-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.post_content .sr .sr-sns,
.mce-content-body .sr .sr-sns,
.l-footer .sr-sns {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 9px 18px 9px 15px;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.sr-sns::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

/* --- X（旧Twitter）: 黒 --- */
.post_content .sr .sr-sns--x,
.mce-content-body .sr .sr-sns--x,
.l-footer .sr-sns--x {
  background: #000;
  color: #fff;
}
.sr-sns--x::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M18.244%202.25h3.308l-7.227%208.26%208.502%2011.24H16.17l-5.214-6.817L4.99%2021.75H1.68l7.73-8.835L1.254%202.25H8.08l4.713%206.231zm-1.161%2017.52h1.833L7.084%204.126H5.117z%22%2F%3E%3C%2Fsvg%3E"); }

/* --- Instagram: 公式のグラデーション --- */
.post_content .sr .sr-sns--ig,
.mce-content-body .sr .sr-sns--ig,
.l-footer .sr-sns--ig {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
}
.sr-sns--ig::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%222.5%22%20width%3D%2219%22%20height%3D%2219%22%20rx%3D%225.2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224.2%22%2F%3E%3Ccircle%20cx%3D%2217.6%22%20cy%3D%226.4%22%20r%3D%221.1%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }

/* --- ホバー／タップ時は少し浮かせるだけ --- */
.post_content .sr .sr-sns:hover,
.mce-content-body .sr .sr-sns:hover,
.l-footer .sr-sns:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.20);
  filter: brightness(1.08);
}
.post_content .sr .sr-sns:active,
.l-footer .sr-sns:active {
  transform: translateY(0);
  box-shadow: none;
}

/* --- アイコンのみの丸ボタンにする場合（クラスに -icononly を追加） --- */
.post_content .sr .sr-sns.-icononly,
.mce-content-body .sr .sr-sns.-icononly,
.l-footer .sr-sns.-icononly {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  font-size: 0;
  gap: 0;
}
.sr-sns.-icononly::before { width: 18px; height: 18px; }