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

/* ===== MW WP Form | 見た目＆幅調整 ===== */
/* 調整しやすいように変数化 */
:root{
  --form-max-width: 720px;         /* フォームの最大幅 */
  --form-padding: 16px;
  --form-radius: 10px;
  --form-border: #d9dee3;
  --form-placeholder: #9aa3ab;
  --form-focus: #2f556b;           /* アクセント（サイトの雰囲気に合わせて変更） */
  --btn-bg: #2f556b;
  --btn-bg-hover: #274756;
  --btn-text: #fff;
	  /* ベーストーン */
  --mc-bg: #FFFFFF;
  --mc-ink: #1F2937;   /* 濃いグレー。本文・見出し向け */
  --mc-muted: #6B7280; /* 補助文字 */

  /* アクセント（ブランド寄せ） */
  --mc-accent: #2A3CA8; /* ネイビー寄りブルー（既出トーンに合わせ） */
  --mc-sage:   #7FA88E; /* セージ */
  --mc-ecru:   #EDE7DC; /* エクリュ */
  --mc-gold:   #C8A867; /* 差し色（任意） */
}

/* ダーク系配色を使う予定があれば任意で */
@media (prefers-color-scheme: dark){
  :root{
    --mc-bg: #0B1020;
    --mc-ink: #E6E6EB;
    --mc-muted: #A8B1C0;
    --mc-ecru: #2E2A24;
  }
}

/* このページのフォームだけに効かせたい場合は ID 指定を先頭に付ける */
#mw_wp_form_mw-wp-form-415 {
  max-width: var(--form-max-width);
  margin: 0 auto;
}

/* 段落の余白を整える（Swell上書き） */
#mw_wp_form_mw-wp-form-415 p{
  margin: 0 0 20px;
}

/* ラベル（見出し） */
#mw_wp_form_mw-wp-form-415 label{
font-family: "Inter", sans-serif;
  display:block;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 8px;
  color: #1b4a59;
}

/* テキスト/メール/電話/テキストエリア 共通 */
#mw_wp_form_mw-wp-form-415 input[type="text"],
#mw_wp_form_mw-wp-form-415 input[type="email"],
#mw_wp_form_mw-wp-form-415 input[type="tel"],
#mw_wp_form_mw-wp-form-415 textarea{
  width: 100%;
  box-sizing: border-box;
  padding: var(--form-padding);
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  background: #fff;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  font-size: 16px;
  line-height: 1.6;
}

/* プレースホルダー色 */
#mw_wp_form_mw-wp-form-415 ::placeholder{
  color: var(--form-placeholder);
  opacity: 1;
}

/* フォーカス時 */
#mw_wp_form_mw-wp-form-415 input[type="text"]:focus,
#mw_wp_form_mw-wp-form-415 input[type="email"]:focus,
#mw_wp_form_mw-wp-form-415 input[type="tel"]:focus,
#mw_wp_form_mw-wp-form-415 textarea:focus{
  border-color: var(--form-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-focus) 15%, transparent);
  background-color: #fff;
}

/* テキストエリア高さ */
#mw_wp_form_mw-wp-form-415 textarea{
  min-height: 160px;
  resize: vertical;
}

/* チェックボックスの並びを整える */
#mw_wp_form_mw-wp-form-415 .mwform-checkbox-field{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
}
#mw_wp_form_mw-wp-form-415 .mwform-checkbox-field label{
  font-weight: 500;
  margin: 0; /* 上の label と区別 */
}

/* 送信ボタン */
#mw_wp_form_mw-wp-form-415 input[type="submit"],
#mw_wp_form_mw-wp-form-415 .mw_wp_form .submit{
  appearance: none;
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  border: none;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .05s ease, background-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
#mw_wp_form_mw-wp-form-415 input[type="submit"]:hover{
  background: var(--btn-bg-hover);
  transform: translateY(-1px);
}
#mw_wp_form_mw-wp-form-415 input[type="submit"]:active{
  transform: translateY(0);
}
/* ===== セレクトボックス（プルダウン）のスタイル調整 ===== */
#mw_wp_form_mw-wp-form-415 select {
  width: 100%;
  max-width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #d9dee3;         /* 枠線を柔らかいグレーに */
  border-radius: 8px;                /* 角を丸める */
  background-color: #fdfdfd;         /* 背景をやや柔らかく */
  color: var(--form-placeholder);                     /* 文字色を真っ黒ではなく#444程度に */
  appearance: none;                  /* デフォルトの矢印を消す（必要なら） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

/* 選択肢（オプション）の文字色を少し薄めに */
#mw_wp_form_mw-wp-form-415 select option {
  color: #555;                       /* 真っ黒じゃなく柔らかめ */
  background-color: #fff;            /* 背景は白 */
}

/* フォーカス時 */
#mw_wp_form_mw-wp-form-415 select:focus {
  border-color: #2f556b;             /* サイトのアクセントカラーに合わせる */
  box-shadow: 0 0 0 3px rgba(47,85,107,0.15);
  outline: none;
}

/* ---- Thanks block ---- */
.mc-thanks{
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid #d9dee3;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.04);
}
.mc-thanks__title{
  margin: 0 0 10px;
  font-size: clamp(20px, 3.8vw, 26px);
  color: #1b4a59; /* サイトの見出し色に合わせてOK */
  font-weight: 700;
  letter-spacing: .02em;
}
.mc-thanks__lead{ margin: 0 0 12px; line-height: 1.9; }
.mc-thanks__notes{ margin: 0 0 18px 1.2em; padding: 0; }
.mc-thanks__notes li{ margin: .2em 0; }

.mc-thanks__btns{ display: flex; gap: 12px; flex-wrap: wrap; }
.mc-btn{
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: #2f556b;  /* ボタン基調色 */
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
  transition: transform .05s ease, background-color .2s ease;
}
.mc-btn:hover{ background:#274756; transform: translateY(-1px); }
.mc-btn--sub{ background:#7c8b94; }
.mc-btn--sub:hover{ background:#6d7b83; }


.contact_bottom{
	margin:2em 0;
}
.right-line {
  border-left: 0.5px solid #1b4a59;
  padding-left: 24px;
}

@media (max-width: 786px){
 .right-line {
  border-left: 0;
  padding: 24px 0 0 0;
}
}

/* 小さめ画面の余白を最適化 */
@media (max-width: 599px){
  :root{
    --form-padding: 14px;
  }
  #mw_wp_form_mw-wp-form-415 { padding: 0 12px; }
}

.paddingA{
	padding:0 10%
}

@media (min-width: 479px){

.explan-content {
    padding: 2em 1em!important;
}
}