@charset "utf-8";
/*
 * carrot_lp_efo.css — お試しのページのフォームの見え方（2026-10-28。対の JS は js/carrot_lp_efo.js）
 * html に carrot-efo が付いた時（JS が動いた時）だけ効く。JS が動かない時は今までの見え方のまま
 */

/* 古い確かめの部品の赤い吹き出しは出さない */
html.carrot-efo .formError { display: none !important; }

/* スマホで拡大されない文字の大きさ・押しやすい高さ */
html.carrot-efo #form1 input[type=text],
html.carrot-efo #form1 input[type=tel],
html.carrot-efo #form1 input[type=email],
html.carrot-efo #form1 input[type=password],
html.carrot-efo #form1 select {
  font-size: 16px;
  min-height: 44px;
  box-sizing: border-box;
  transition: border-color .15s, background-color .15s;
}

/* 直してほしい欄（色だけに頼らず、太い枠と案内の文で伝える） */
html.carrot-efo #form1 .efo-ng {
  border: 2px solid #c5221f !important;
  background-color: #fff6f5 !important;
}
/* 正しく入った欄に、控えめな緑のチェック */
html.carrot-efo #form1 input.efo-ok {
  border-color: #2e7d4f !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%232e7d4f'/%3E%3Cpath d='M5.5 10.3l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px 18px;
  padding-right: 36px !important;
}
html.carrot-efo #form1 select.efo-ok { border-color: #2e7d4f !important; }

/* 欄のすぐ下の案内（欄には重ねない） */
html.carrot-efo #form1 .efo-msg {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 2px;
  color: #b3261e;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
  text-align: left;
}
html.carrot-efo #form1 .efo-msg[hidden] { display: none; }
html.carrot-efo #form1 .efo-msg::before {
  content: "!";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: #c5221f;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

/* メールアドレスの書き間違いの候補 */
html.carrot-efo #form1 .efo-suggest {
  margin: 6px 0 2px;
  font-size: 14px;
  color: #444;
  text-align: left;
}
html.carrot-efo #form1 .efo-suggest[hidden] { display: none; }
html.carrot-efo #form1 .efo-suggest button {
  background: none;
  border: 0;
  padding: 0;
  color: #1a5fb4;
  font-size: 14px;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}

/* 送るボタンの上の「あと何か所」 */
html.carrot-efo #form1 .efo-summary {
  max-width: 480px;
  margin: 12px auto;
  padding: 10px 14px;
  border: 2px solid #c5221f;
  border-radius: 8px;
  background: #fff6f5;
  color: #b3261e;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}
html.carrot-efo #form1 .efo-summary[hidden] { display: none; }
html.carrot-efo #form1 #warning.efo-warn { color: #b3261e; font-weight: bold; }

/* ===== 申し込みやすくする細かい直し（2026-10-28 大輔さん。対の JS は carrot_lp_efo.js の extras） ===== */
/* もう会員にある電話・メールの案内の中のリンクと補足 */
html.carrot-efo #form1 .efo-msg-link { display: block; width: fit-content; margin-top: 4px; padding: 8px 0; color: #1a5fb4; text-decoration: underline; font-weight: bold; line-height: 1.5; }
html.carrot-efo #form1 .efo-msg-sub { display: block; margin-top: 2px; color: #555; font-weight: normal; font-size: 13px; }
/* お支払い方法: 丸と文を横に並べ、2つの選択肢の間の大きな空きをなくす */
html.carrot-efo #form1 .radio-pay { display: flex !important; align-items: flex-start; gap: 10px; padding: 10px 0 !important; }
html.carrot-efo #form1 .radio-pay + br { display: none; }
html.carrot-efo #form1 .radio-pay input { flex: 0 0 22px; margin: 2px 0 0 !important; }
html.carrot-efo #form1 .radio-pay label { flex: 1 1 auto; line-height: 1.6; }
/* カードの有効期限: 月・年の選ぶ欄が細すぎて「--」が▼に重なっていた */
html.carrot-efo #form1 #zeus_new_card_area select,
html.carrot-efo #form1 #card_yuko_tuki,
html.carrot-efo #form1 #card_yuko_nen { width: 7.5em !important; min-width: 7.5em !important; }
/* パスワードの「表示」ボタン */
html.carrot-efo #form1 .efo-pass-wrap { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; }
html.carrot-efo #form1 .efo-pass-wrap input { padding-right: 64px !important; }
@media (max-width: 579px) {
  html.carrot-efo #form1 .efo-pass-wrap { display: block; }
  html.carrot-efo #form1 .efo-pass-wrap input { width: 100% !important; }
}
html.carrot-efo #form1 .efo-pass-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-width: 52px; height: 34px; padding: 0 8px;
  border: 1px solid #c8c8c8; border-radius: 6px; background: #fff; color: #333; font-size: 14px; cursor: pointer;
}
/* 個人情報の取扱い: 1行と、全文を開くボタン */
html.carrot-efo #form1 .efo-privacy-line { font-size: 14px !important; line-height: 1.7 !important; color: #333; }
html.carrot-efo #form1 .efo-privacy-open {
  display: block; margin: 2px 0 0; padding: 8px 0; border: 0; background: none; line-height: 1.5;
  color: #1a5fb4; font-size: 14px; text-decoration: underline; cursor: pointer;
}
html.carrot-efo #form1 .efo-privacy-full { margin-top: 8px; font-size: 13px; line-height: 1.7; }
html.carrot-efo #form1 .efo-privacy-full[hidden] { display: none; }
/* 申し込むボタンの上のお支払い合計（スマホで金額の表が出ていない時だけ JS が置く） */
html.carrot-efo #form1 .efo-total {
  max-width: 480px; margin: 10px auto 8px; padding: 10px 12px;
  border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3;
  text-align: center; font-size: 14px; color: #333; line-height: 1.6;
}
html.carrot-efo #form1 .efo-total strong { font-size: 22px; color: #bf0000; margin: 0 2px; }
html.carrot-efo #form1 .efo-total small { display: block; font-size: 13px; color: #555; }
/* 「通信中です」の箱の外枠（高さ 80px 決め打ち）が、隠れている間も空白になっていた。出ている間だけ場所を取る */
html.carrot-efo #form1 div:has(> #gifbtn) { height: auto !important; }
/* ロボットの確認の案内（チェックが無いまま押した時・時間が切れた時に赤くなる） */
html.carrot-efo #form1 #warning { font-size: 14px; line-height: 1.6; }

/* ===== スマホの表示（2026-10-28 大輔さん。PC の見え方は変えない） ===== */
@media (max-width: 579px) {
  /* 左の影: PC 用の影の画像（lp-2-mobile.css の #container の背景）の左端だけが見えていたので、スマホではやめる */
  /* 2026-10-28 11:58 直し: 影の画像は本文の下の白い地も兼ねていた。none にすると本文がベージュの模様の上に乗って読みにくくなったので、白い地にする */
  #container { background: #fff !important; }
  /* 左右の余白を同じ 16px に */
  #main_column {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 100% !important;
  }
  /* 画面の幅を超える物を出さない（横にずれる原因を止める） */
  #main_column img, #main_column iframe, #main_column video, #main_column table, #main_column embed, #main_column object {
    max-width: 100% !important;
  }
  #main_column img, #main_column video { height: auto !important; }
  /* はみ出しがあっても横に動かない（clip は縦のスクロールと position:sticky を壊さない） */
  body { overflow-x: clip !important; }
  /* 2026-10-28 PC 用の .top（幅 800px・高さ 0 の見えない箱）がスマホで右へはみ出し、横にずれていたので画面の幅に合わせる */
  .top { width: auto !important; max-width: 100% !important; }
  /* 2026-10-28 フォームの欄（例 fb_sh_2select の幅 400px の選ぶ欄）が画面の幅を超えないように */
  #form1 select, #form1 input[type=text], #form1 input[type=tel], #form1 input[type=email], #form1 input[type=password] { max-width: 100% !important; box-sizing: border-box !important; }
  /* 押す所の当たりを広げる（見た目の並びは変えない。JS が高さ 44px に足りないリンクに付ける） */
  #main_column a.efo-tap { padding-top: 12px; padding-bottom: 12px; }
  /* 2026-10-28 アップセル（仮予約のご案内）のページ: 本文の箱が「画面の幅の95%」（upsell-mobile.css の 95vw）で決め打ちされていて、
     上の左右の余白 16px と合わさって右が切れていた。親の幅に合わせる。白い地も画面の幅いっぱいに */
  #container:has(#bloc_upsell) { width: 100% !important; max-width: none !important; }
  #bloc_upsell #upsell_table { width: 100% !important; table-layout: fixed; }
  #bloc_upsell #upsell_table > tbody > tr > td,
  #bloc_upsell #upsell_table > tbody > tr > th { width: auto !important; max-width: 100%; box-sizing: border-box; }
  #bloc_upsell .samplenote3, #bloc_upsell #timer_box, #bloc_upsell #timer_box1,
  #bloc_upsell .koe-sotowaku, #bloc_upsell .koe-waku {
    width: auto !important; max-width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important;
  }
  #bloc_upsell img, #bloc_upsell select, #bloc_upsell iframe { max-width: 100% !important; box-sizing: border-box; }
  #bloc_upsell .aka_waku_position { float: none !important; margin: 16px 0 0 !important; max-width: 100% !important; box-sizing: border-box; }
  /* 下についてくる「今すぐ申し込む」の帯 */
  .efo-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .15);
    transform: translateY(110%);
    transition: transform .25s ease;
  }
  .efo-cta-bar.is-on { transform: translateY(0); }
  .efo-cta-bar button {
    display: block;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 10px;
    background: #6aa823; /* 2026-10-28 グラデーションをやめて単色 */
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: .05em;
    box-shadow: 0 2px 0 #4c7d16;
    cursor: pointer;
  }
  html.efo-cta-on body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
@supports not (overflow-x: clip) {
  @media (max-width: 579px) { body { overflow-x: hidden !important; } }
}