/* ==========================================================================
   01. 外部ファイルの読み込み / 外部インポート
   ========================================================================== */
/* WordPressのブロックエディター等とスタイルを同期させるための外部CSSをインポート */
@import url(editor-style.css);

/* ==========================================================================
   02. モダンCSSリセット & ノーマライズ (新規格リセット CSS)
       ※ `:where()` を使うことで詳細度が上がらない（0になる）ため、
          後から記述する通常のクラスで上書きしやすくなるメリットがあります。
   ========================================================================== */
/* すべての要素と擬似要素のマージン・パディングをゼロにし、サイズ計算をボーダー基準に統一 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 画面上で非表示(hidden)にする要素を完全に非表示化（until-found対応版） */
:where([hidden]:not([hidden='until-found'])) {
  display: none !important;
}

/* デバイス設定（ダークモード/ライトモード）に対応し、iOSなどの自動文字サイズ調整を無効化 */
:where(html) {
  -webkit-text-size-adjust: none;
  color-scheme: dark light;
}

/* ユーザーが視覚的アニメーションの削減を希望していない場合のみ、フォーカス移動時のスクロールを滑らかにする */
@media (prefers-reduced-motion: no-preference) {
  :where(html:focus-within) {
    scroll-behavior: smooth;
  }
}

/* 基本の行間、標準システムフォント、文字のアンチエイリアス（滑らかさ）を設定 */
:where(body) {
  line-height: 1.5;
  font-family: system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* フォーム部品のフォント種類と文字色を親要素から継承させる */
:where(input, button, textarea, select) {
  font: inherit;
  color: inherit;
}

/* テキストエリアのリサイズ方向を「縦方向のみ」または「テキストの並び方向」に制限 */
:where(textarea) {
  resize: vertical;
  resize: block;
}

/* クリック可能な要素のマウスポインターを「指マーク(pointer)」にする */
:where(button, label, select, summary, [role='button'], [role='option']) {
  cursor: pointer;
}

/* 無効化（disabled）されている要素のマウスポインターを「禁止マーク」にする */
:where(:disabled) {
  cursor: not-allowed;
}

/* 子要素や隣のインプットがdisabled状態のラベルも、マウスポインターを「禁止マーク」にする */
:where(label:has(>input:disabled), label:has(+input:disabled)) {
  cursor: not-allowed;
}

/* ボタンの枠線（境界線）のスタイルを初期状態の実線(solid)にする */
:where(button) {
  border-style: solid;
}

/* リンクの文字色を継承し、下線とテキストの隙間（オフセット）を微調整 */
:where(a) {
  color: inherit;
  text-underline-offset: 0.2ex;
}

/* リスト（箇条書き）の標準の黒丸や数字などのマーカーを消去 */
:where(ul, ol) {
  list-style: none;
}

/* 画像や動画、埋め込みコンテンツなどのインライン要素をブロック要素化して余白を制御しやすくする */
:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

/* 画像、ピクチャー、SVGの最大横幅を100%にし、高さは自動比率にして親要素からはみ出さないようにする */
:where(img, picture, svg) {
  max-inline-size: 100%;
  block-size: auto;
}

/* 段落や見出しテキストが長すぎて枠をはみ出る場合、自動で単語の途中で改行させる */
:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

/* 大きめの見出し（H1〜H3）の行間を、文字サイズに合わせた計算値で適切に狭める */
:where(h1, h2, h3) {
  line-height: calc(1em + 0.5rem);
}

/* 区切り線（hr）の標準ボーダーを消し、上部だけに1pxの実線を引いて文字色を継承 */
:where(hr) {
  border: none;
  border-block-start: 1px solid;
  color: inherit;
  block-size: 0;
  overflow: visible;
}

/* キーボード操作等でフォーカスが当たった際の、見やすい外枠（アウトライン）の表示設定 */
:where(:focus-visible) {
  outline: 3px solid Highlight;
  outline-offset: 2px;
  scroll-margin-block: 10vh;
}

/* スクリーンリーダー（音声読み上げ）専用。画面上は見えなくなるが読み上げにはカウントされる設定 */
:where(.visually-hidden:not(:focus-within, :active)) {
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================================
   03. ベーススタイル設定 (HTML & BODY)
   ========================================================================== */
/* 画面幅（--vw）に応じてフォントサイズを14px〜16pxの間で動的に滑らかに変動させる（レスポンシブフォント） */
html {
  font-size: clamp(14px, calc( 14px + 2 * ( ( var(--vw) * 100 ) - 320px ) / 1600 ), 16px);
}

/* サイト全体のフォント環境（欧文・日本語の優先順位）、文字色、背景色、改行ルール等の指定 */
body {
  font-family: europa, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Verdana, noto-sans-cjk-jp, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 1.0em;
  color: #505050;
  line-height: 1;
  background: #FFF;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
}

/* ==========================================================================
   04. 見出し・タイポグラフィの設定
   ========================================================================== */
/* h2だけリセットから除外し、ホームページ全体で完全に非表示にする */
h1,h2,h4,h5,h6{font-size:100%;font-weight:normal}



/* 主な文章構成要素の下側に「1.5em」の一定の間隔（余白）を確保 */
h2,
h3,
h4,
h5,
h6,
p {
  margin-bottom: 1.5em;
}

/* 強調表現用の太字設定 */
.bold,
strong {
  font-weight: bold;
}

/* 斜体（イタリック）表現用の設定 */
.italic,
em {
  font-style: italic;
}

/* 下線（アンダーライン）表現用の設定 */
.underline {
  text-decoration: underline;
}

/* ==========================================================================
   05. ユーティリティ：フォントサイズ (1.2rem 〜 4.0rem)
       ※ HTML基準の文字サイズに対する倍率を指定する汎用クラス
   ========================================================================== */
.font-12 { font-size: 1.2rem; }
.font-14 { font-size: 1.4rem; }
.font-16 { font-size: 1.6rem; }
.font-18 { font-size: 1.8rem; }
.font-20 { font-size: 2.0rem; }
.font-22 { font-size: 2.2rem; }
.font-24 { font-size: 2.4rem; }
.font-26 { font-size: 2.6rem; }
.font-28 { font-size: 2.8rem; }
.font-30 { font-size: 3.0rem; }
.font-32 { font-size: 3.2rem; }
.font-34 { font-size: 3.4rem; }
.font-36 { font-size: 3.6rem; }
.font-38 { font-size: 3.8rem; }
.font-40 { font-size: 4.0rem; }

/* ==========================================================================
   06. ユーティリティ：カラーバリエーション
       ※ 文字色をピンポイントで変更できる汎用カラークラス
   ========================================================================== */
.navy { color: #001F3F; }      /* 濃紺 */
.blue { color: #0074D9; }      /* 青 */
.aqua { color: #7FDBFF; }      /* 水色 */
.teal { color: #39CCCC; }      /* 鴨の羽色・青緑 */
.olive { color: #3D9970; }     /* オリーブ・深緑 */
.green { color: #2ECC40; }     /* 緑 */
.lime { color: #01FF70; }      /* ライム・明緑 */
.yellow { color: #FFDC00; }    /* 黄 */
.orange { color: #FF851B; }    /* 橙 */
.red { color: #FF4136; }       /* 赤 */
.maroon { color: #85144B; }    /* くり色・えんじ */
.fuchsia { color: #F012BE; }   /* フクシャ・鮮やかな紫 */
.purple { color: #B10DC9; }    /* 紫 */
.sitver { color: #DDD; }       /* シルバー（※クラス名ママ：sitver） */
.gray { color: #AAA; }         /* グレー */
.black { color: #111; }        /* 黒 */

/* ==========================================================================
   07. ハイパーリンク (a要素) ＆ アニメーション効果
   ========================================================================== */
/* リンクテキストの標準色（黄緑系）、下線あり、ホバー時の滑らかなアニメーション（0.4秒）を設定 */
a {
  color: #7FBF65;
  vertical-align: baseline;
  text-decoration: underline;
  outline: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-transition: 0.4s ease-out;
  -moz-transition: 0.4s ease-out;
  -ms-transition: 0.4s ease-out;
  -o-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
}

/* リンク内にある画像に対しても、ホバー時の変化アニメーションを同じスピードで適用 */
a img {
  -webkit-transition: 0.4s ease-out;
  -moz-transition: 0.4s ease-out;
  -ms-transition: 0.4s ease-out;
  -o-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
}

/* リンクにマウスが乗った時（hover）、またはクリック中（active）は下線を消す */
a:hover,
a:active {
  text-decoration: none;
  outline: none;
}

/* リンク内の画像にマウスが乗った時、またはクリック中は画像の不透明度を60%にして、透ける演出を行う */
a:hover img,
a:active img {
  opacity: 0.6;
}

/* ==========================================================================
   08. WordPress標準クラス (画像の配置設定)
   ========================================================================== */
/* 記事内で画像を「中央揃え」にするWordPress標準クラス */
img.aligncenter {
  display: block;
  margin: 1.0em auto;
}

/* 記事内で画像を「右寄せ」「左寄せ」にする際の共通設定（インライン化と下部マージン） */
img.alignright,
img.alignleft {
  display: inline;
  margin-bottom: 1.0em;
}

/* 画像を右に寄せて、左側にテキストを回り込ませる（左に余白を設ける） */
img.alignright {
  margin-left: 1.25em;
  float: right;
}

/* 画像を左に寄せて、右側にテキストを回り込ませる（右に余白を設ける） */
img.alignleft {
  margin-right: 1.25em;
  float: left;
}

/* ==========================================================================
   09. ユーティリティ：テキスト配置 (文字揃え)
   ========================================================================== */
.text-center { text-align: center; } /* 中央揃え */
.text-right { text-align: right; }   /* 右揃え */
.text-left { text-align: left; }     /* 左揃え */

/* ==========================================================================
   10. ユーティリティ：マージン（下方向の余白を制御するクラス）
   ========================================================================== */
.mb00 { margin-bottom: 0; }
.mb05 { margin-bottom: 0.5rem; }
.mb10 { margin-bottom: 1.0rem; }
.mb20 { margin-bottom: 2.0rem; }
.mb30 { margin-bottom: 3.0rem; }
.mb40 { margin-bottom: 4.0rem; }
.mb50 { margin-bottom: 5.0rem; }
.mb60 { margin-bottom: 6.0rem; }
.mb70 { margin-bottom: 7.0rem; }
.mb80 { margin-bottom: 8.0rem; }
.mb90 { margin-bottom: 9.0rem; }
.mb100 { margin-bottom: 10rem; }

/* ==========================================================================
   11. フロート解除 (クリアフィックス)
       ※ 伝統的な擬似要素を使用した回り込み解除の手法
   ========================================================================== */
/* IE8/9用にzoomを使ってレイアウトのバグを防ぐトリガー */
.cf {
  zoom: 1;
}

/* コンテンツの前後に見えないテーブル要素を作り、高さを保つ */
.cf::before,
.cf::after {
  content: "";
  display: table;
}

/* 後ろの擬似要素でfloat（左右寄せ）の影響を完全にクリアする */
.cf::after {
  clear: both;
}

/* ==========================================================================
   12. フォーム要素：入力フィールド（テキスト、テキストエリア、セレクト）
   ========================================================================== */
/* 主要な入力フォーム。ブラウザ固有のデザインを消し(appearance: none)、横いっぱいで高さ44pxに統一 */
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="email"],
textarea,
select {
  font-family: inherit;
  font-size: 16px;
  color: inherit;
  line-height: 24px;
  vertical-align: middle;
  width: 100%;
  height: 44px;
  padding: 6px 1.0em;
  background-color: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 0.375em;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}

/* 各種ブラウザ（標準、IE、Edge）向けのプレースホルダー（薄文字）の色をグレー(#999)に統一 */
input[type="text"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder,
select::placeholder {
  color: #999;
}

input[type="text"]:-ms-input-placeholder,
input[type="tel"]:-ms-input-placeholder,
input[type="number"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select:-ms-input-placeholder {
  color: #999;
}

input[type="text"]::-ms-input-placeholder,
input[type="tel"]::-ms-input-placeholder,
input[type="number"]::-ms-input-placeholder,
input[type="email"]::-ms-input-placeholder,
textarea::-ms-input-placeholder,
select::-ms-input-placeholder {
  color: #999;
}

/* 読み取り専用(readonly)属性が付いた入力欄は、枠線や高さをなくしてフラットテキストに見せる */
input[type="text"][readonly],
input[type="tel"][readonly],
input[type="number"][readonly],
input[type="email"][readonly],
textarea[readonly],
select[readonly] {
  height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
}

/* 複数行入力（テキストエリア）は、行間を1.5にし、高さを12.5文字分（12.5em）にする */
textarea {
  line-height: 1.5;
  height: 12.5em;
}

/* セレクトボックスの右側に独自の矢印SVG画像を配置し、右端に重ならないように余白を設定 */
select {
  padding-right: 2.25em;
  background-image: url("../img/icon_select.svg");
  background-repeat: no-repeat;
  background-position: calc(100% - 1.0em);
  background-size: 0.875em auto;
  cursor: pointer;
}

/* ==========================================================================
   13. フォーム要素：ラジオボタン・チェックボックス (カスタムデザイン)
   ========================================================================== */
/* ブラウザ標準のチェックボックスとラジオボタンそのものは画面上から隠す */
input[type="radio"],
input[type="checkbox"] {
  display: none;
}

/* 後続の span 要素をチェックボタンの見た目として使うための土台（余白と位置決め） */
input[type="radio"]+span,
input[type="checkbox"]+span {
  position: relative;
  display: inline-block;
  line-height: 1.4;
  margin-right: 1.25em;
  padding-left: 2.5em;
  cursor: pointer;
}

/* チェックマークや外枠を作るための前後擬似要素を中央寄せにするための共通定義 */
input[type="radio"]+span::before,
input[type="radio"]+span::after,
input[type="checkbox"]+span::before,
input[type="checkbox"]+span::after {
  position: absolute;
  top: 0;
  bottom: 0;
  content: "";
  display: block;
  margin: auto;
}

/* 未チェック状態の「外枠」のサイズを縦横2.0emに指定 */
input[type="radio"]+span::before,
input[type="checkbox"]+span::before {
  left: 0;
  width: 2.0em;
  height: 2.0em;
}

/* チェックした時の「中のマーク（点やチェック）」。初期状態では透明で見えないように隠す */
input[type="radio"]+span::after,
input[type="checkbox"]+span::after {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.4s ease-out;
  -moz-transition: 0.4s ease-out;
  -ms-transition: 0.4s ease-out;
  -o-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
}

/* 実際にチェックが入ったら（:checked）、中のマークを表示状態にする */
input[type="radio"]:checked+span::after,
input[type="checkbox"]:checked+span::after {
  opacity: 1.0;
  visibility: visible;
}

/* ラジオボタンは「丸型」にするため、外枠と中身の角丸を50%にする */
input[type="radio"]+span::before,
input[type="radio"]+span::after {
  border-radius: 50%;
}

/* ラジオボタンの外枠：白背景に薄いグレーの線 */
input[type="radio"]+span::before {
  background-color: #fff;
  border: 1px solid #d4d4d4;
}

/* ラジオボタンの中身（選択された時の点）：緑色(#019742)の丸ポチ */
input[type="radio"]+span::after {
  left: 0.5em;
  width: 1.0em;
  height: 1.0em;
  background-color: #019742;
}

/* チェックボックスの外枠：白背景、グレー線、そしてほんのり角丸に設定 */
input[type="checkbox"]+span::before {
  background-color: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 0.375em;
}

/* チェックボックスの中身：L字型の境界線を45度回転させることで「チェックマーク」を表現 */
input[type="checkbox"]+span::after {
  left: 0.625em;
  width: 0.75em;
  height: 0.5em;
  border-width: 0 0 2px 2px;
  border-style: solid;
  border-color: #019742;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* ==========================================================================
   14. フォーム要素：送信ボタン (グラデーション・アニメーション)
   ========================================================================== */
/* 送信ボタン：Flexboxで文字を上下左右中央にし、緑系のグラデーション、横幅最大240px、高さ60pxで立体的に装飾 */
[type="submit"] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: 0.5em 1.0em;
  font-family: inherit;
  font-weight: 500;
  color: #fff;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: center;
  width: 100%;
  max-width: 240px;
  height: 60px;
  padding: 1.0em 4.0em;
  background-image: linear-gradient(45deg, #187042 0%, #7FBF65 100%);
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  -webkit-transition: 0.4s ease-out;
  -moz-transition: 0.4s ease-out;
  -ms-transition: 0.4s ease-out;
  -o-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
}

/* ボタンが非活性（disabled）になったら、不透明度を20%にしてクリックできない見た目にする */
[type="submit"][disabled] {
  opacity: 0.2;
}

/* 送信ボタンに「戻る(back)」という値が指定されている場合は、グラデーションを消して黒っぽい背景にする */
[type="submit"][value="back"] {
  background-color: #202020;
  background-image: none;
}

/* ボタンにマウスを乗せると、ボタンが下方向に10%分沈み込む（アニメーション移動） */
[type="submit"]:hover {
  -webkit-transform: translateY(10%);
  -moz-transform: translateY(10%);
  -ms-transform: translateY(10%);
  -o-transform: translateY(10%);
  transform: translateY(10%);
}

/* ==========================================================================
   15. その他 (Google reCAPTCHA 非表示設定)
   ========================================================================== */
/* スパム対策用のGoogle reCAPTCHAの右下のバッジ（ロゴマーク）を画面上から非表示にする */
.grecaptcha-badge {
  visibility: hidden;
}

/* スマホでは縦並び、画面幅768px以上で横3つにする場合 */
@media (min-width: 768px) {
  .area_rows {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
  }
  .area_rows__col {
    flex: 1;
    min-width: 0;
  }
  .area_rows__col img {
    width: 100%;
    height: auto;
  }
}
/* ==========================================================================
   ギャラリー画像ブロックのはみ出し防止と余白設定
   ========================================================================== */
.area {
  width: 100%;
  max-width: 1200px;   /* サイトの最大幅に合わせて調整してください（例: 1000px〜1200px） */
  margin-left: auto;   /* 画面中央に寄せる */
  margin-right: auto;  /* 画面中央に寄せる */
  padding-left: 20px;  /* スマホや画面が狭い時の、左側の命綱余白 */
  padding-right: 20px; /* スマホや画面が狭い時の、右側の命綱余白 */
  margin-bottom: 60px; /* 前に設定した交通アクセスとの間の余白 */
}

/* 以前追加した記述に「box-sizing」の保険をかけておきます */
.area_rows {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  width: 100%;
}
/* ギャラリー画像と交通アクセスの間の余白を広げる */
.area {
  margin-bottom: 60px; /* 余白の広さ。数字を大きくするとさらに広がります */
}

/* ==========================================================================
   追加：事務所概要テーブルの区切り線
   ========================================================================== */
.outline_table > div {
  display: flex;                  /* 横並びにする */
  border-bottom: 1px solid #e0e0e0; /* 行の下側に1pxの薄いグレーの線を引く */
  padding: 15px 0;                /* 線の上下に少し余白を作る */
}

/* 一番最後の行だけは下線を消す */
.outline_table > div:last-child {
  border-bottom: none;
}

/* 左側（項目名）の幅を固定し、少し太字に */
.outline_table dt {
  width: 200px;
  flex-shrink: 0;
  font-weight: bold;
}

/* 右側（内容）の余白調整 */
.outline_table dd {
  flex-grow: 1;
}

/* ==========================================================================
   全ページ共通：パンくずリストを強制左寄せ ＆ フォント色統一の決定版
   ========================================================================== */
[typeof="BreadcrumbList"],
#page_title .page_title__inner ol {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    
    /* 左寄せの設定（維持） */
    align-self: flex-start !important; 
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
    gap: 0 12px !important;
    margin-bottom: 25px !important;

    /* ▼ ★フォントサイズと全体の文字色をここで統一（例：#666） ▼ */
    font-size: 14px !important;
    color: #666666 !important; /* ← 好きな色に変えられます（黒なら #111111 など） */
}

/* ▼ ★リンク（ホームなど）の色も、強制的に上記と同じ色に統一する設定 ▼ */
[typeof="BreadcrumbList"] a,
#page_title .page_title__inner ol li a {
    color: inherit !important;          /* 上の要素で指定した色（#666）をそのまま受け継ぐ */
    text-decoration: none !important;   /* 標準の下線を消す */
    transition: color 0.3s ease !important; /* 色が変わる時のアニメーション */
}

/* ▼ ★マウスが乗った時だけ、元々のアクセントカラー（緑）に変える演出 ▼ */
[typeof="BreadcrumbList"] a:hover,
#page_title .page_title__inner ol li a:hover {
    color: #7FBF65 !important;          /* ホバー時はお馴染みの緑色に */
    text-decoration: underline !important; /* ホバー時だけ下線を出す */
}

/* 区切り文字（ / ）や、リンクではない現在のページ名の文字色も統一 */
[typeof="BreadcrumbList"] li,
[typeof="BreadcrumbList"] a::after {
    color: inherit !important;
}

/* 【重要】リンクテキストの後ろに強制的に「 / 」を差し込む */
[typeof="BreadcrumbList"] a::after {
  content: "/" !important;   /* 「 / 」で区切る場合。矢印がよければ ">" に変更してください */
  margin-left: 12px !important; /* 区切り文字の右側のすき間 */
  color: #ccc !important;    /* 区切り文字の色（薄いグレー） */
  display: inline-block !important;
}


/* ==========================================================================
   追加：ページタイトルのグラデーションテキスト強制適用
   ========================================================================== */
#page_title .page_title__inner h2 {
  /* ★ここを変更：全体のフォントサイズを小さく調整 */
  /* スマホ時: 18px / 画面幅に応じてなめらかに変化 / PC時最大: 32px */
  font-size: clamp(18px, calc(18px + 14 * ((var(--vw) * 100) - 320px) / 880), 32px) !important;
 
	
  font-weight: 500 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.04em !important;
  width: fit-content !important;

/* ★ここを追加：H2の上の余白を広げる設定 */
  margin-top: 2.0rem !important;
　margin-bottom: 1.0em !important; 
 
	/* ★ここを変更：濃い森林のような深いグリーンのグラデーション */
  background-image: linear-gradient(45deg, #0B4A27 0%, #1F8249 100%) !important;
	
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}