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




/******************************/
/** コンタクトフォームの装飾 **/
/******************************/
/* ------------- 基本リセット ------------- */
#cf7-area, #cf7-area * { box-sizing: border-box; }
#cf7-area tr, #cf7-area th, #cf7-area td { display: contents; } /* tableタグ混在を無効化してフレックスに合わせる */
#cf7-area label { margin: 0; display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; color:#222; }

/* ------------- 行（1項目） ------------- */
#cf7-area .cf7-item{
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}

/* 左カラム（質問） */
#cf7-area .cf7-q{
  min-width: 150px;
  width: 220px;              /* PC時のラベル幅 */
  display: flex;
  align-items: center;
  padding: 10px 8px;
}

/* 右カラム（回答） */
#cf7-area .cf7-a{
  flex: 1 1 auto;
  display: block;
}

/* ------------- バッジ（必須・任意） ------------- */
#cf7-area .cf7-req,
#cf7-area .cf7-opt{
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
}
#cf7-area .cf7-req{ background: #E53935; } /* 赤：必須 */
#cf7-area .cf7-opt{ background: #F29F3A; } /* オレンジ：任意 */

/* ------------- 入力UI ------------- */
#cf7-area .cf7-a input[type="text"],
#cf7-area .cf7-a input[type="email"],
#cf7-area .cf7-a input[type="tel"],
#cf7-area .cf7-a textarea{
  width: 100%;
  display: block;
  padding: 18px 16px;
  border: 1px solid #e5e8ee;
  border-radius: 8px;
  background: #F3F6FA;      /* 画像の薄いグレーのボックス感 */
  font-size: 16px;
  outline: none;
  transition: box-shadow .2s, border-color .2s, background-color .2s;
}
#cf7-area .cf7-a textarea{ min-height: 180px; resize: vertical; }

#cf7-area .cf7-a input:focus,
#cf7-area .cf7-a textarea:focus{
  border-color: #b8c6ff;
  box-shadow: 0 0 0 3px rgba(80,122,255,.15);
  background:#fff;
}

/* プレースホルダ色を淡く */
#cf7-area ::placeholder{ color:#98A1AF; }

/* ------------- チェックボックス ------------- */
#cf7-area .cf7-a .wpcf7-list-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 16px 8px 0;
  font-size: 15px;
}
#cf7-area .cf7-a input[type="checkbox"]{ width: 18px; height: 18px; accent-color: #F29F3A; }

/* ------------- ファイル ------------- */
#cf7-area input[type="file"]{
  width: 100%;
  padding: 14px;
  border: 1px dashed #cfd6e4;
  border-radius: 8px;
  background: #FAFBFD;
  font-size: 14px;
}

/* ------------- 送信ボタン ------------- */
#cf7-area .cf7-submit{ display: flex; justify-content: center; padding: 28px 0 10px; }
#cf7-area .cf7-submit .wpcf7-submit{
  display: inline-block;
  width: min(90%, 720px);
  padding: 22px 24px;
  border: none;
  border-radius: 9999px;         /* 大きな丸ボタン */
  background: #e87690;           /* 画像のオレンジ */
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(234,155,58,.25);
  transition: transform .06s ease, filter .2s ease;
}
#cf7-area .cf7-submit .wpcf7-submit:hover{ filter: brightness(1.03); }
#cf7-area .cf7-submit .wpcf7-submit:active{ transform: translateY(1px); }

/* ------------- レスポンシブ（タブレット以下） ------------- */
@media (max-width: 1024px){
  #cf7-area .cf7-q{ width: 200px; }
}

/* ------------- レスポンシブ（スマホ） ------------- */
@media (max-width: 768px){
  #cf7-area .cf7-item{
    flex-direction: column;
    gap: 10px;
    padding: 12px 0;
  }
  #cf7-area .cf7-q{
    width: 100%;
    padding: 4px 2px;
  }
  #cf7-area .cf7-a{
    width: 100%;
  }
  #cf7-area .cf7-a input[type="text"],
  #cf7-area .cf7-a input[type="email"],
  #cf7-area .cf7-a input[type="tel"],
  #cf7-area .cf7-a textarea{
    font-size: 16px;   /* ズーム防止 */
    padding: 16px 14px;
  }
}

/* ------------- アクセシビリティ（フォーカス可視） ------------- */
#cf7-area .wpcf7-submit:focus-visible,
#cf7-area .cf7-a input:focus-visible,
#cf7-area .cf7-a textarea:focus-visible{
  outline: 3px solid rgba(80,122,255,.35);
  outline-offset: 2px;
}
















/******************************/
/** h2の装飾 **/
/******************************/

/* PC用：緑から青へのグラデーションテキスト */
.is-style-section_ttl.h2 {
  font-size: 3rem;                      /* PC用のフォントサイズ */
  font-weight: bold;
  text-align: center;
  background: linear-gradient(90deg, #00FF7F, #1E90FF); /* スプリンググリーンからドジャーブルーへ */
  -webkit-background-clip: text;        /* 背景を文字にクリッピング（Chrome, Safari対応） */
  -webkit-text-fill-color: transparent; /* 文字の塗りつぶし色を透明に */
  background-clip: text;                 /* その他ブラウザ用 */
  transition: all 0.3s ease;            /* スムーズな変化 */
}


/* スマホ用：フォントサイズの調整 */
@media screen and (max-width: 768px) {
  .is-style-section_ttl h2 {
    font-size: 2rem;                    /* スマホ用にフォントサイズを縮小 */
  }
}