/* =========================================================
   banhan_new.css
   既存 common.css の後に読み込む上書き用CSS
   - ヘッダー/フッター/フォーム動作は維持
   - GA / wsformmailer / JS は変更なし
   ========================================================= */

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
}

body {
  min-width: 0 !important;
  background:
    radial-gradient(circle at top left, #eef7ff 0%, rgba(238,247,255,0) 30%),
    radial-gradient(circle at top right, #fff4ef 0%, rgba(255,244,239,0) 28%),
    #f8fbff;
  color: #1f2937;
}

img {
  max-width: 100%;
  height: auto;
}

.main_area {
  padding: 28px 0 72px !important;
}

.main_area .inner {
  width: min(1120px, calc(100% - 32px)) !important;
  padding: 0 !important;
}

.main_area .contents_box > dd {
  margin: 0 0 56px !important;
  padding: 0 !important;
}

.main_area .contents_box > dt {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto 22px;
  padding: 0 0 14px;
  border-bottom: 2px solid #dbe7f5 !important;
  color: #0f172a !important;
  font-size: clamp(28px, 3.2vw, 42px) !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em;
}

/* ---------- Header ---------- */
.header_area {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(215, 32, 72, 0.12) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  padding: 14px 0 12px !important;
}

.header_area .inner {
  width: min(1120px, calc(100% - 32px)) !important;
}

.header_area .header_logo_area .header_logo_txt {
  color: #64748b;
  font-size: 13px;
  margin-bottom: 8px !important;
}

.header_area .header_logo_area h1 {
  margin-bottom: 6px !important;
}

.header_area .header_logo_area h1 img {
  width: 250px !important;
}

.header_area .header_inquiry_area .header_inquiry_ttl {
  color: #0f172a !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
}

.header_area .header_inquiry_area .header_inquiry_mail a {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%) !important;
  border-radius: 999px !important;
  padding: 14px 24px !important;
  box-shadow: 0 14px 30px rgba(255, 107, 107, 0.22);
}

.header_area .header_inquiry_area .header_inquiry_mail a:hover {
  opacity: 1 !important;
  transform: translateY(-1px);
}

.header_area .header_inquiry_area .header_inquiry_txt {
  color: #64748b !important;
  font-size: 13px !important;
}

/* ---------- Hero / Policy ---------- */
.policy_area {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.policy_problem_wrap {
  background:
    linear-gradient(135deg, #ffffff 0%, #f7fbff 48%, #fff7f2 100%) !important;
  border: 1px solid #e6eef8;
  border-radius: 32px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
  padding: 30px 24px !important;
  margin-bottom: 20px;
}

.main_area .policy_problem {
  width: 100% !important;
  gap: 12px 14px;
}

.main_area .policy_problem li {
  margin: 0 !important;
  font-size: clamp(24px, 2.4vw, 38px) !important;
  transform: none !important;
  flex: 1 1 240px;
}

.main_area .policy_problem li div {
  background: none !important;
  display: block !important;
  background: #ffffff !important;
  border: 1px solid #e5edf8;
  border-radius: 22px;
  padding: 18px 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  line-height: 1.45;
}

.main_area .policy_problem li span {
  font-size: 1.08em !important;
}

.main_area .policy_problem li span.red,
.main_area .policy_problem li span.blue,
.main_area .policy_problem li span.green,
.main_area .policy_problem li span.orange,
.main_area .policy_problem li span.purple {
  text-shadow: none !important;
  letter-spacing: 0.02em !important;
}

.main_area .policy_problem li span.red { color: #ef4444 !important; }
.main_area .policy_problem li span.blue { color: #2563eb !important; }
.main_area .policy_problem li span.green { color: #10b981 !important; }
.main_area .policy_problem li span.orange { color: #f97316 !important; }
.main_area .policy_problem li span.purple { color: #8b5cf6 !important; }

.main_area .policy_arrows {
  height: 36px !important;
  margin: 10px auto 24px !important;
}

.main_area .policy_arrows .arrow {
  border-width: 18px 18px 0 18px !important;
  border-color: #ff7b72 transparent transparent transparent !important;
}

.main_area .policy_catch_area {
  margin: 0 auto 24px !important;
}

.main_area .policy_catch_area .policy_catch_txt {
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: clamp(20px, 2.4vw, 34px) !important;
  line-height: 1.6 !important;
  color: #0f172a !important;
  background: linear-gradient(135deg, #eef7ff 0%, #fff3ea 100%) !important;
  border: 1px solid #e5edf8;
  border-radius: 28px !important;
  padding: 22px 24px !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
  display: inline-block;
}

.main_area .policy_catch_area .policy_catch_txt span {
  color: #2563eb !important;
}

.main_area .policy_catch_area .policy_catch2 {
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: clamp(28px, 3.1vw, 46px) !important;
  line-height: 1.45 !important;
  color: #0f172a !important;
  font-weight: 800;
  margin-bottom: 18px !important;
}

.main_area .policy_catch_area .policy_catch2 span {
  color: #ff6b6b !important;
  font-size: 1.08em !important;
  text-shadow: none !important;
}

.main_area .policy_img_area {
  background: transparent !important;
  margin: 32px auto 0 !important;
}

.main_area .policy_img_area .img_policy {
  width: min(1120px, calc(100% - 32px)) !important;
  padding: 0 !important;
}

.main_area .policy_img_area .img_policy img {
  border-radius: 28px;
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.12);
}

.main_area .policy_txt {
  width: min(1120px, calc(100% - 32px)) !important;
  font-size: 13px !important;
  color: #64748b !important;
  text-align: right !important;
  line-height: 1.6 !important;
  padding: 12px 0 0 !important;
}

/* ---------- Point / Strength ---------- */
.main_area .point_area {
  background:
    linear-gradient(135deg, #0f172a 0%, #1e3a5f 55%, #2b5876 100%) !important;
  border-radius: 36px;
  width: min(1120px, calc(100% - 32px));
  margin: 40px auto 0;
  padding: 42px 24px !important;
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.18);
}

.main_area .point_area .point_ttl {
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 26px !important;
}

.main_area .point_area .point_list {
  width: 100% !important;
  gap: 18px;
}

.main_area .point_area .point_list li {
  width: calc(50% - 9px) !important;
  margin: 0 !important;
  padding: 28px 22px 22px !important;
  border-radius: 24px;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.98) !important;
  min-height: 210px;
}

.main_area .point_area .point_list li::before,
.main_area .point_area .point_list li::after {
  display: none !important;
}

.main_area .point_area .point_list .point {
  top: -14px !important;
  left: 18px !important;
  font-size: 16px !important;
  border: none !important;
  background: linear-gradient(135deg, #ffd166 0%, #ffb703 100%) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  box-shadow: 0 10px 20px rgba(255, 183, 3, 0.25);
}

.main_area .point_area .point_list .point1,
.main_area .point_area .point_list .point2,
.main_area .point_area .point_list .point3,
.main_area .point_area .point_list .point4 {
  width: 100% !important;
  height: auto !important;
  text-indent: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  background: none !important;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.55;
  color: #0f172a;
}

.main_area .point_area .point_txt {
  width: 100% !important;
  font-size: 18px !important;
  line-height: 1.9 !important;
  color: rgba(255,255,255,0.92) !important;
  margin-top: 20px;
}

/* ---------- Results / Company / Program ---------- */
.main_area .results_area,
.main_area .program_area,
.main_area .contact_area {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.main_area .results_txt,
.main_area .request_box .request_txt {
  background: linear-gradient(transparent 60%, #dff2ff 60%, #dff2ff 96%, transparent 96%) !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  color: #0f172a !important;
}

.main_area .company_list,
.main_area .company_list2,
.main_area .program_area .program {
  gap: 14px 18px;
}

.main_area .company_list li {
  font-size: 20px !important;
  background: #ffffff;
  border: 1px solid #e5edf8;
  border-radius: 999px;
  padding: 12px 18px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  margin: 0 !important;
}

.main_area .company_list li::after {
  content: "" !important;
  margin: 0 !important;
}

.main_area .company_list li:last-child::after {
  content: "" !important;
}

.main_area .company_list2 {
  margin: 36px auto 26px !important;
}

.main_area .company_list2 li {
  width: calc(50% - 9px) !important;
  margin: 0 !important;
  background: #fff;
  border: 1px solid #e5edf8;
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.main_area .program_area .program li {
  width: calc(33.333% - 12px) !important;
  margin: 0 !important;
  background: #fff;
  border: 1px solid #e5edf8;
  border-radius: 24px;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.main_area .program_area .program li img {
  border-radius: 16px;
  border: none !important;
}

/* ---------- Flow ---------- */
.main_area .flow_ttl,
.main_area .request_ttl {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto 22px !important;
  border-radius: 18px;
  background: linear-gradient(135deg, #eff6ff 0%, #fff4ec 100%) !important;
  color: #0f172a !important;
  font-weight: 800;
  line-height: 1.4 !important;
  font-size: clamp(24px, 2.4vw, 34px) !important;
  padding: 18px 20px !important;
  border: 1px solid #e5edf8;
}

.main_area .flow_list li {
  background: #fff;
  border: 1px solid #e5edf8;
  border-radius: 24px;
  padding: 22px 24px !important;
  margin: 0 auto 18px !important;
  text-align: left !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.main_area .flow_list li::after {
  border-top: 12px solid #cfdff6 !important;
  border-right: 18px solid transparent !important;
  border-left: 18px solid transparent !important;
  margin-top: 14px !important;
}

.main_area .flow_list li .flow_list_ttl {
  color: #0f172a !important;
  font-size: 24px !important;
  line-height: 1.55 !important;
  margin-bottom: 10px !important;
}

.main_area .flow_list li .flow_list_ttl span {
  background: linear-gradient(135deg, #2563eb 0%, #4f8dfd 100%) !important;
  color: #fff !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  font-size: 18px !important;
  margin-right: 10px !important;
  padding: 0 !important;
  vertical-align: middle;
}

/* ---------- Request / Contact ---------- */
.main_area .request_box {
  background: #fff;
  border: 1px solid #e5edf8;
  border-radius: 28px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
  width: min(1120px, calc(100% - 32px));
  padding: 28px 24px !important;
  margin-bottom: 28px !important;
}

.main_area .request_box p {
  font-size: 18px !important;
  line-height: 1.9 !important;
}

.main_area .contact_box {
  width: min(1120px, calc(100% - 32px));
  background: linear-gradient(135deg, #0f172a 0%, #1d3557 100%);
  border-radius: 30px;
  padding: 24px !important;
  box-shadow: 0 24px 52px rgba(15, 23, 42, 0.18);
  gap: 18px;
}

.main_area .contact_box div {
  background: rgba(255,255,255,0.96);
  border-radius: 22px;
  flex: 1 1 0;
}

.main_area .contact_box .contact_ttl {
  font-size: 22px !important;
  color: #0f172a !important;
}

.main_area .contact_box .contact_tel a {
  color: #2563eb !important;
}

.main_area .contact_box .contact_link a {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 30px rgba(255, 107, 107, 0.2);
}

/* ---------- Form ---------- */
.main_area #form_area {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding-top: 10px !important;
}

.form-section,
.main_area form {
  background: rgba(255,255,255,0.96);
  border: 1px solid #e5edf8 !important;
  border-radius: 30px;
  box-shadow: 0 24px 52px rgba(15, 23, 42, 0.08);
}

.main_area .form_txt {
  font-size: clamp(24px, 2.6vw, 34px) !important;
  color: #0f172a !important;
  margin-bottom: 12px !important;
}

.main_area .notice {
  color: #ef4444 !important;
}

.main_area .form_table {
  border-collapse: separate !important;
  border-spacing: 0 12px !important;
}

.main_area .form_table th,
.main_area .form_table td {
  border: none !important;
}

.main_area .form_table th {
  background: #eff6ff !important;
  color: #0f172a !important;
  border-radius: 16px 0 0 16px;
  font-size: 15px !important;
}

.main_area .form_table td {
  background: #fff !important;
  border-radius: 0 16px 16px 0;
  box-shadow: inset 0 0 0 1px #e5edf8;
}

.main_area .form_table td input,
.main_area .form_table td textarea,
.form-table input[type="text"],
.form-table input[type="email"],
.form-table input[type="tel"],
.form-table textarea {
  border: 1px solid #d7e3f4 !important;
  background: #fbfdff !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
}

.main_area .form_table td input:focus,
.main_area .form_table td textarea:focus,
.form-table input:focus,
.form-table textarea:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15);
}

.main_area .btn_area,
.form-btn-area {
  margin-top: 20px !important;
}

.main_area .btn_area input {
  border-radius: 999px !important;
  background: linear-gradient(135deg, #b30000 0%, #b30000 100%) !important;
  color: #fff !important;
  border: none !important;
  padding: 14px 30px !important;
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.24);
  font-weight: 700 !important;
}

/* ---------- Footer ---------- */
.site-footer,
.footer_area,
footer {
  margin-top: 56px !important;
}

/* ---------- Responsive ---------- */
@media only screen and (max-width: 1024px) {
  .main_area .point_area .point_list li,
  .main_area .company_list2 li,
  .main_area .program_area .program li {
    width: 100% !important;
  }

  .main_area .contact_box {
    flex-direction: column;
  }
}

@media only screen and (max-width: 767px) {
  body {
    min-width: 100% !important;
  }

  .header_area {
    padding: 14px 0 !important;
  }

  .header_area .inner,
  .main_area .inner {
    width: calc(100% - 24px) !important;
  }

  .policy_area,
  .main_area .point_area,
  .main_area .results_area,
  .main_area .program_area,
  .main_area .contact_area,
  .main_area #form_area,
  .main_area .request_box,
  .main_area .contact_box,
  .main_area .contents_box > dt,
  .main_area .policy_img_area .img_policy,
  .main_area .policy_txt,
  .main_area .flow_ttl,
  .main_area .request_ttl {
    width: calc(100% - 24px) !important;
  }

  .policy_problem_wrap,
  .main_area .point_area,
  .main_area .request_box,
  .main_area .contact_box {
    border-radius: 24px;
    padding: 22px 16px !important;
  }

  .main_area .policy_problem li {
    flex-basis: 100%;
    font-size: 26px !important;
  }

  .main_area .policy_catch_area .policy_catch_txt {
    font-size: 20px !important;
    padding: 18px 16px !important;
  }

  .main_area .policy_catch_area .policy_catch2 {
    font-size: 28px !important;
  }

  .main_area .point_area .point_list .point1,
  .main_area .point_area .point_list .point2,
  .main_area .point_area .point_list .point3,
  .main_area .point_area .point_list .point4 {
    font-size: 20px;
  }

  .main_area .point_area .point_txt,
  .main_area .request_box p,
  .main_area .flow_list li .flow_list_ttl,
  .main_area .company_list li {
    font-size: 16px !important;
  }

  .main_area .flow_list li {
    padding: 18px 16px !important;
  }

  .main_area .form_table {
    border-spacing: 0 10px !important;
  }

  .main_area .form_table th,
  .main_area .form_table td {
    display: block;
    width: 100% !important;
    border-radius: 16px !important;
  }

  .main_area .form_table td {
    margin-top: 6px;
  }
}
/* =========================================
   Hero h1 pop animation
   本来の見出し自体を飛び出させる
   ========================================= */

.hero h1{
  opacity: 0;
  transform: translateY(42px) scale(0.88);
  animation: heroTitlePop 1s cubic-bezier(0.18, 0.9, 0.2, 1) 0.3s forwards;
  will-change: transform, opacity;
  text-shadow:
    0 10px 30px rgba(0,0,0,0.25),
    0 3px 8px rgba(0,0,0,0.3);
}

.hero h1 em{
   display: inline-block;
  animation: heroEmphasisPop 0.9s cubic-bezier(0.18, 0.9, 0.2, 1) 0.6s forwards;
}

@keyframes heroEmphasisPop{
  0%{
    transform: scale(0.8);
    opacity: 0;
  }
  30%{
    transform: scale(2.0);   /* ← 2倍 */
    opacity: 1;
  }
  55%{
    transform: scale(1.2);   /* ← 一度戻る */
  }
  75%{
    transform: scale(1.5);   /* ← もう一回軽く強調 */
  }
  100%{
    transform: scale(1);     /* ← 最終位置 */
  }
}

@media(max-width:600px){
  .hero h1{
    font-size: 28px;
    line-height: 1.4;
  }
} 

@keyframes heroTitlePop{
  0%{
    opacity: 0;
    transform: translateY(42px) scale(0.88);
  }
  55%{
    opacity: 1;
    transform: translateY(-10px) scale(1.06);
  }
  72%{
    opacity: 1;
    transform: translateY(4px) scale(0.985);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================
   CTA button animation（軽く動かす）
   ========================================= */

.cta-btn{
  animation: ctaFloat 2.5s ease-in-out infinite;
  transition: transform 0.2s ease;
  will-change: transform;
}

.cta-btn:hover{
  transform: translateY(-3px) scale(1.03);
}

.cta-btn:active{
  transform: translateY(1px) scale(0.98);
}

@keyframes ctaFloat{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
  100%{ transform: translateY(0); }
}

/* スマホでは動きを止める（おすすめ） */
@media(max-width:600px){
  .cta-btn{
    animation: none;
  }
}

/* =========================================
   Mobile final tuning（スマホ最終調整）
   ========================================= */

@media(max-width:600px){

  /* ===== Hero ===== */
  .hero{
    padding: 28px 16px 24px;
  }

  .hero h1{
    font-size: 26px;
    line-height: 1.4;
    letter-spacing: -0.01em;
  }

  /* 「わかる。」をスマホだけ少し抑える */
  .hero h1 em{
    display: inline-block;
    animation: heroEmphasisPopSp 0.8s cubic-bezier(0.18, 0.9, 0.2, 1) 0.6s forwards;
  }

  /* ===== CTAボタン ===== */
  .cta-btn,
  .hero-btn{
    width: 100%;
    max-width: 320px;
    min-height: 52px;
    font-size: 16px;
    padding: 14px 20px;
    border-radius: 999px;
  }

  /* CTAの動きはスマホでは止める */
  .cta-btn{
    animation: none;
  }

  /* ===== Form ===== */
  .main_area .form_table td input,
  .main_area .form_table td textarea,
  .form-table input[type="text"],
  .form-table input[type="email"],
  .form-table input[type="tel"],
  .form-table textarea{
    font-size: 16px !important;
    padding: 14px 14px !important;
  }

  .main_area .form_table th{
    margin-bottom: 6px;
  }

}


/* ===== スマホ専用：emアニメーション（弱め） ===== */
@keyframes heroEmphasisPopSp{
  0%{
    transform: scale(0.9);
    opacity: 0;
  }
  35%{
    transform: scale(1.35);
    opacity: 1;
  }
  65%{
    transform: scale(1.08);
  }
  100%{
    transform: scale(1);
  }
}
.hero-btn-note{
  margin-top:14px !important;
  font-size:14px !important;
  font-weight:700 !important;
  color:#fff !important;
  background:rgba(255,255,255,0.15) !important;
  display:inline-block !important;
  padding:6px 14px !important;
  border-radius:999px !important;
}

/* ===== heroボタン下の安心テキスト最適化 ===== */
.hero-btn-note{
  margin-top:12px !important;
  font-size:14px !important;
  font-weight:700 !important;
  color:#fff !important;
  background:rgba(255,255,255,0.15) !important;
  display:table !important;
  padding:6px 14px !important;
  border-radius:999px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
  white-space:nowrap !important;
}


/*
 * wsformmailer CSS ここから
 */
.wsm * {
  box-sizing: border-box;
  font-size: 18px;
}

.wsm_loading,
.wsm_input .wsm_confirmitem:not(.wsm_confirmarea-thumb),
.wsm_input .wsm_backbtn,
.wsm_input .wsm_confirmarea-thumb,
.wsm_confirm .wsm_notinconfirm,
.wsm_confirm .wsm_inputarea:not(.wsm_fieldset),
.wsm_confirm .wsm_erroritem,
.wsm_confirm .wsm_fieldset label,
.wsm_confirm.wsm_inputonce .wsm_written::before,
.wsm_confirm.wsm_inputonce .wsm_written::after,
.wsm_sending #wsm,
.wsm_sending .wsm_notinconfirm,
.wsm_done #wsm,
.wsm_done .wsm_notinconfirm{
  display: none !important;
}
.wsm_confirmarea,
.wsm_sendingarea,
.wsm_donearea{
  display: none !important;
}
.wsm_confirm .wsm_confirmarea,
.wsm_sending .wsm_sendingarea,
.wsm_done .wsm_donearea{
  display: block !important;
}

/* button */
.wsm_btn:disabled{
  opacity: 0.15;
}
.wsm_btn {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 20px; font-weight: 700;
  background: #b30000;
  color: #fff;
  padding: 13px 40px; border-radius: 99px;
  cursor: pointer; border: none;
  box-shadow: 0 12px 30px rgba(179, 0, 0, 0.25);
  transition: transform .1s, box-shadow .1s;
}
.wsm_btn:hover {
  background: #cc0000;
  transform: translateY(-1px);
}
.wsm_backbtn{
  background: #e5edf8;
  color: inherit;
}
.wsm_backbtn:hover {
  background: #e5edf8;
  transform: translateY(-1px);
}

/* input */

.wsm_hidden{
  display: none;
}
.wsm_fieldset{
  border:none;
  margin: 0;
  padding: 0;
}
.wsm_required{
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.15em 0.5em;
   background: #c00;
   color: #fff;
   border-radius: 0.25em;
   font-size: 0.8rem;
}
.wsm_inputarea{
  position: relative;
  margin: 0;
  padding: 0 2em 0 0;
  border: none;
}
.wsm_inputarea-file{
  width: 20em;
  max-width: 100%;
}
.wsm_label{
  display: block;
  border: none;
  padding: 0;
  font-weight: bold;
}

.wsm input[type="text"],
.wsm input[type="email"],
.wsm input[type="tel"],
.wsm input[type="url"],
.wsm input[type="time"],
.wsm input[type="datetime"],
.wsm input[type="number"],
.wsm textarea,
.wsm select {
  padding: 0.5em;
  border: solid thin #999;
  border-radius: 0.25em;
  font-size: 16px;
}
.wsm_inputonce .wsm_written input,
.wsm_inputonce .wsm_written textarea,
.wsm_inputonce .wsm_written select {
  border-color: #5c5;
}
.wsm_inputonce .wsm_haserror input,
.wsm_inputonce .wsm_haserror textarea,
.wsm_inputonce .wsm_haserror select {
  border-color: #c00;
}

.wsm_radio,
.wsm_check{
  display: inline-block;
  margin: 0;
  padding: 0;
}
.wsm_radio_btn,
.wsm_check_btn{
  display: none;
}
.wsm_radio_label,
.wsm_check_label{
  position: relative;
  display: inline-block;
  margin: 0.25em 0.25em 0.25em 0;
  padding: 0.25em 1em 0.25em 2rem;
  border: solid thin #ccc;
  border-radius: 0.25em;
}
.wsm_radio_label::before,
.wsm_check_label::before{
  content: "";
  position: absolute;
  left: 0.45em;
  top: 0.4em;
  width: 0.8em;
  height: 0.8em;
  border: solid 0.2em #999;
  border-radius: 50%;
  font-size: 1rem;
}
.wsm_check_label::before{
  border-radius: 0.25em;
}
.wsm_radio_btn:checked + .wsm_radio_label,
.wsm_check_btn:checked + .wsm_check_label{
  border-color: #9d9;
}
.wsm_radio_btn:checked + .wsm_radio_label::before{
  left: 0.65em;
  top: 0.55em;
  width: 0.45em;
  height: 0.45em;
  border: solid 0.2em #fff;
  border-radius: 50%;
  background: #5c5;
  box-shadow: 0 0 0 0.2em #ccc;
  font-size: 1rem;
}
.wsm_check_btn:checked + .wsm_check_label::after{
  content: "";
  position: absolute;
  left: 0.7em;
  top: 0.5em;
  width: 0.7em;
  height: 0.4em;
  border-left: solid 0.23em #5c5;
  border-bottom: solid 0.23em #5c5;
  transform: rotate(-45deg);
  font-size: 1rem;
}

.wsm_erroritem{
  visibility: hidden;
  position: relative;
  color: #c00;
  font-size: 0.85em;
}
.wsm_inputonce .wsm_erroritem.shown{
  visibility: visible;
}
.wsm_inputonce .wsm_written::before{
  content: "";
  position: absolute;
  top: 0.5em;
  right: 0;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: #5c5;
}
.wsm_inputonce .wsm_written::after{
  content: "";
  position: absolute;
  top: 0.75em;
  right: 0.25em;
  width: 0.6em;
  height: 0.3em;
  border-left: solid 0.23em #fff;
  border-bottom: solid 0.23em #fff;
  transform: rotate(-45deg);
}
.wsm_inputonce .wsm_haserror::before{
  content: "";
  position: absolute;
  top: 0.5em;
  right: 0;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: #c00;
}
.wsm_inputonce .wsm_haserror::after{
  content: "";
  position: absolute;
  top: 1em;
  right: 0.25em;
  width: 0.75em;
  height: 0;
  border-top:solid 0.3em #fff;
  border-left: none;
  border-bottom: none;
  transform: none;
}
.wsm_selectarea select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    margin:  0;
    padding: 0.5em 2.5em 0.5em 0.5em;
    background: transparent;
    position: relative;
    z-index: 1;
    border: solid thin #a6a69a;
    border-radius: 0.25em;
}
.wsm_selectarea select::-ms-expand {
    display: none;
}
.wsm_selectarea{
  position: relative;
  display: inline-block;
  max-width: calc(87vw - 2em);
  margin: 0;
}

.wsm_selectarea::after{
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 0.6em;
    width: 0;
    height: 0;
    border-top: solid 0.6em #e0007f;
    border-left: solid 0.4em transparent;
    border-right: solid 0.4em transparent;
}

.wsm_spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
  opacity: 0.15;
}

.wsm_spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: wsm_bouncedelay 1.4s infinite ease-in-out both;
  animation: wsm_bouncedelay 1.4s infinite ease-in-out both;
}

.wsm_spinner .wsm_bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.wsm_spinner .wsm_bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes wsm_bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes wsm_bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

@media only screen and (max-width: 767px) {
  .wsm * {
    font-size: 16px;
  }
}

/*
 * wsformmailer CSS ここまで
 */