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

/* ==========================================================
  サイト全体（ベース設定）
========================================================== */

/* 本文カラー統一
   クラス名：html body
   効果：全ページの文字色を #222222 に統一（背景 #ffffff 前提） */
html, body { color: #222222; }

/* SWELL既定色の補正
   クラス名：has-white-background-color  shadow_on  is-style-clmn-shadow
   効果：#333 等の固定色を #222222 に上書き */
.has-white-background-color,
.shadow_on > .wp-block-column,
.is-style-clmn-shadow > .swell-block-columns__inner > .swell-block-column {
  color: #222222 !important;
}



/* ==========================================================
  ユーティリティ（汎用）
========================================================== */

/* ふわっと影
   クラス名：shadow-swell
   効果：軽めのドロップシャドウで要素を浮かせる */
.shadow-swell {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 4px 4px -4px rgba(0, 0, 0, 0.1);
}

/* 表示切替（PC / SP）
   クラス名：pc-only  sp-only
   効果：端末別に表示制御 */
.sp-only { display: none; }
@media (max-width: 959px) {
  .pc-only { display: none; }
  .sp-only { display: block; }
}



/* ==========================================================
  セクション見出し
========================================================== */

/* 英語タイトルサイズ
   クラス名：c-section-title（h2 に付与）
   効果：見出しを大きめに */
h2.wp-block-heading.is-style-section_ttl.c-section-title {
  font-size: 2.8rem !important;
  /* line-height はSWELL側で管理 */
}

/* 日本語サブタイトル装飾（ティールライン）
   クラス名：c-section-subtitle
   効果：左右にティールラインを表示 */
.c-section-subtitle {
  text-align: center;
  margin-top: -0.8em;
  font-size: 1rem;
  color: #07abb7;
  position: relative;
}
.c-section-subtitle::before,
.c-section-subtitle::after {
  content: "";
  display: inline-block;
  width: 2em;
  height: 1px;
  background-color: #07abb7;
  vertical-align: middle;
  margin: 0 0.5em;
}

/* 日本語サブタイトル装飾（白ライン版）
   クラス名：c-section-subtitle--white
   効果：左右に白ラインを表示（暗背景用） */
.c-section-subtitle--white {
  text-align: center;
  margin-top: -0.8em;
  font-size: 1rem;
  color: #fff;
  position: relative;
}
.c-section-subtitle--white::before,
.c-section-subtitle--white::after {
  content: "";
  display: inline-block;
  width: 2em;
  height: 1px;
  background-color: #fff;
  vertical-align: middle;
  margin: 0 0.5em;
}





/* ==========================================================
  ボタン（SWELLカスタム）
========================================================== */

/* ----------------------------------------------
   四角ボタン（透過タイプ）
   クラス名：is-style-more_btn（青枠） / is-style-more_btn--white（白枠）
   効果：背景なし＋枠線タイプのボタン
---------------------------------------------- */

/* 青枠ボタン */
.is-style-more_btn a {
  background: transparent;
  box-shadow: 0 0 0 1px #07abb7;
  color: #07abb7;
}

/* 白枠ボタン（暗背景用） */
.is-style-more_btn--white a {
  background: transparent;
  box-shadow: 0 0 0 1px #fff;
  color: #fff;
  transition: all 0.3s ease;
}

/* 白枠ボタン（ホバー時反転） */
.is-style-more_btn--white a:hover {
  background: #fff;
  color: #07abb7;
}



/* ----------------------------------------------
  白枠・丸ボタン：ホバー時の文字色変更
  クラス名：btn-hover-green / btn-hover-pink
  効果：通常時は既存のまま／ホバー時のみ文字色を変更（背景は白反転想定）
---------------------------------------------- */

/* 共通：ふわっと切替 */
.btn-hover-green a,
.btn-hover-pink a {
  transition: all 0.3s ease;
}

/* 緑（ティール） */
.btn-hover-green a:hover {
  background: #fff;
  color: #07abb7 !important;
}

/* ピンク */
.btn-hover-pink a:hover {
  background: #fff;
  color: #ea75a0 !important;
}



/* ==========================================================
  テーブル（料金表）
========================================================== */

/* 左列アクセント
   クラス名：color-border-table
   効果：左列のみ下線 #2bb9b0、縦中央揃え */
.color-border-table td:first-child {
  border-bottom: 2px solid #2bb9b0;
  vertical-align: middle;
}

/* シンプル版
   クラス名：is-style-simple
   効果：上線なし＋中央寄せでスッキリ */
.color-border-table.is-style-simple td,
.color-border-table.is-style-simple th {
  border-top: none;
  vertical-align: middle;
}

/* 余白（PC）
   クラス名：color-border-table  table-note
   効果：PC時はセルと注釈の左右余白を広めに */
@media (min-width: 768px) {
  .color-border-table td,
  .color-border-table th { padding: 1.2em; }
  .table-note { padding: 0 1.2em; }
}

/* 余白・線（SP）
   クラス名：color-border-table  sp_block_
   効果：区切り線を減らし、上下余白を最適化 */
@media (max-width: 767px) {
  .color-border-table td,
  .color-border-table th { border-bottom: none; }

  .color-border-table .has-text-align-right {
    vertical-align: top;
    padding-top: 0.5em;
    padding-bottom: 0.25em;
  }

  .color-border-table.sp_block_ td,
  .color-border-table.sp_block_ th { padding: 1em 0.7em; }

  .table-note { padding: 0 0.7em; }
}

/* =========================================================
   トップページを除く固定ページ（.page）すべてに適用
   - ページタイトル（h1）を非表示
   - パンクズと最初のブロックの間の余白を削除
   ========================================================= */

/* トップページ（front-page / home）以外で */
.page:not(.home):not(.front-page) .c-pageTitle {
  /* H1「ページタイトル」を非表示（SEO上は残す） */
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* 下線・余白なども無効化 */
.page:not(.home):not(.front-page) .c-pageTitle[data-style="b_bottom"] {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* コンテンツ部分の余白をリセット */
.page:not(.home):not(.front-page) #content,
.page:not(.home):not(.front-page) .l-content,
.page:not(.home):not(.front-page) .l-mainContent,
.page:not(.home):not(.front-page) .l-mainContent__inner,
.page:not(.home):not(.front-page) .post_content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* パンクズ直下のフルワイドブロックも上詰め */
.page:not(.home):not(.front-page) .post_content > .swell-block-fullWide:first-of-type {
  margin-top: 0 !important;
}

/* パンクズリスト下の余白を削除 */
.page:not(.home):not(.front-page) #breadcrumb {
  margin-bottom: 0 !important;
}



/* ==========================================================
   お問い合わせフォーム（WPForms）用カスタムCSS
   ※ SWELL + WPForms 共通
   ※ .policy-box：プライバシーポリシーや規約本文を表示
   ※ .btn-center：送信ボタンを中央寄せ表示
========================================================== */

/* ------------------------------------------
   送信ボタン中央寄せ（クラス名：btn-center）
------------------------------------------ */
.wpforms-submit-container {
  text-align: center; /* ボタン全体を中央寄せ */
}
.wpforms-submit.btn-center {
  display: inline-block; /* インライン化して中央揃え */
  margin: 0 auto;
}

/* ------------------------------------------
   規約本文ブロック（クラス名：policy-box）
------------------------------------------ */
/* 不要なチェック行を非表示（説明文のみ表示） */
.wpforms-field.policy-box ul {
  display: none !important;
}

/* legend（見出し）下の余白を詰めてすっきり */
.wpforms-field.policy-box legend.wpforms-field-label {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 規約本文の体裁調整 */
.wpforms-field.policy-box .wpforms-field-description,
.wpforms-field.policy-box .wpforms-disclaimer-description {
  display: block;
  margin-top: 0.5em;
  line-height: 1.6;
  font-size: 0.95em;
  color: #333;
}

/* ------------------------------------------
   アクセシビリティ補助（ラベル非表示）
   ※ WPFormsの .wpforms-label-hide 用
------------------------------------------ */
.wpforms-label-hide {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}