/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.11.9.1755962898
Updated: 2025-08-24 00:28:18

*/

/* このコードをWordPressの「追加CSS」に貼り付けます */
/* 以前のCSSは削除して、こちらに差し替えてください */

/* フォーム全体を囲むコンテナ */
.custom-contact-form-v2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: #333;
  max-width: 680px;
  margin: 2rem auto;
  padding: 2.5rem 3rem;
  background: linear-gradient(145deg, #f0f7ff, #e0e7ff); /* 背景を淡い青のグラデーションに */
  border-radius: 20px; /* 角丸を大きく */
  border: 1px solid #dbeafe;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  overflow: hidden; /* グラデーションの背景などをはみ出させない */
}

/* フォームのタイトル */
.custom-contact-form-v2 h2 {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  color: #2c5282; /* 濃い青 */
  margin-bottom: 0.5rem;
}

/* フォームの説明文 */
.custom-contact-form-v2 p {
  text-align: center;
  color: #6b7280;
  margin-bottom: 2.5rem;
}

/* 各入力項目（アイコンとフォーム）のグループ */
.custom-contact-form-v2 .form-group {
  margin-bottom: 1.5rem;
  position: relative; /* アイコンを配置するため */
}

/* アイコンの共通スタイル */
.custom-contact-form-v2 .icon {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: #60a5fa; /* アイコンの色 */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 各アイコンのSVGデータ */
.custom-contact-form-v2 .user-icon { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.5a5.5 5.5 0 0 1 5.5 5.5c0 1.57-.67 3-1.75 3.99.85.88 1.75 2.2 1.75 3.51 0 2.21-1.79 4-4 4s-4-1.79-4-4c0-1.31.9-2.63 1.75-3.51C7.17 11 6.5 9.57 6.5 8a5.5 5.5 0 0 1 5.5-5.5zm0 2a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zM12 13c-3.31 0-6 2.69-6 6v1h12v-1c0-3.31-2.69-6-6-6zm0 2c2.21 0 4 1.79 4 4h-8c0-2.21 1.79-4 4-4z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.5a5.5 5.5 0 0 1 5.5 5.5c0 1.57-.67 3-1.75 3.99.85.88 1.75 2.2 1.75 3.51 0 2.21-1.79 4-4 4s-4-1.79-4-4c0-1.31.9-2.63 1.75-3.51C7.17 11 6.5 9.57 6.5 8a5.5 5.5 0 0 1 5.5-5.5zm0 2a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zM12 13c-3.31 0-6 2.69-6 6v1h12v-1c0-3.31-2.69-6-6-6zm0 2c2.21 0 4 1.79 4 4h-8c0-2.21 1.79-4 4-4z"/></svg>'); }
.custom-contact-form-v2 .email-icon { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4.25l-7.17 4.48c-.51.32-1.15.32-1.66 0L4 8.25V6h16v2.25zM4 18V9.33l7.03 4.39c.6.38 1.34.38 1.94 0L20 9.33V18H4z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4.25l-7.17 4.48c-.51.32-1.15.32-1.66 0L4 8.25V6h16v2.25zM4 18V9.33l7.03 4.39c.6.38 1.34.38 1.94 0L20 9.33V18H4z"/></svg>'); }
.custom-contact-form-v2 .tel-icon { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.02.74-.25 1.02l-2.2 2.2z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.02.74-.25 1.02l-2.2 2.2z"/></svg>'); }
.custom-contact-form-v2 .subject-icon { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>'); }
.custom-contact-form-v2 .message-icon { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>'); }

/* 入力フィールド（text, email, textarea）共通のスタイル */
.custom-contact-form-v2 .form-control {
  width: 100%;
  padding: 1rem 1rem 1rem 3rem; /* アイコン分の左パディング */
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background-color: #fff;
  font-size: 1rem;
  color: #374151;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

/* プレースホルダーのスタイル */
.custom-contact-form-v2 .form-control::placeholder {
  color: #9ca3af;
}

/* 入力フィールドがフォーカスされた時のスタイル */
.custom-contact-form-v2 .form-control:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* フォーカス時にアイコンの色も変える */
.custom-contact-form-v2 .form-control:focus + .icon,
.custom-contact-form-v2 .form-control:focus ~ .icon { /* textarea用 */
    background-color: #3b82f6;
}

/* textarea用のアイコン位置調整 */
.custom-contact-form-v2 .form-group textarea + .icon {
    top: 1.2rem;
    transform: none;
}

/* reCAPTCHAのスタイル調整 */
.custom-contact-form-v2 .form-recaptcha {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

/* 送信ボタンのスタイル */
.custom-contact-form-v2 .btn-primary {
  display: block;
  width: 100%;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #3b82f6, #60a5fa); /* ボタンもグラデーションに */
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px -5px rgba(59, 130, 246, 0.6);
}

/* 送信ボタンにマウスカーソルが乗った時のスタイル */
.custom-contact-form-v2 .btn-primary:hover {
  transform: translateY(-3px); /* 少し浮き上がる */
  box-shadow: 0 7px 20px -5px rgba(59, 130, 246, 0.8);
}

/* Contact Form 7のエラーメッセージ等のスタイル調整 */
.custom-contact-form-v2 .wpcf7-response-output {
  border-radius: 12px;
  margin-top: 1rem;
}