/* ==========================================================================
   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. 見出し・タイポグラフィの設定
   ========================================================================== */
/* H1〜H6の文字サイズを一ったん100%（標準サイズ）にし、太字を解除してリセット */
h1,
h2,
h3,
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;
}