/************************************************************
  SIM UI（Formidable）見た目まとめ
  - 変更したい値は「① 変数/調整ポイント」だけ触ればOK
  - それ以外は基本さわらない想定
************************************************************/

/* ==========================================================
  ① 変数／調整ポイント（ここだけ触れば見た目調整できる）
========================================================== */
:root{
  --sim-accent: #2b6cb0;      /* アクセント色（左線・強調） */
  --sim-line:   #cbd5e0;      /* 下線の薄い色 */
  --sim-selbg:  #eef6ff;      /* 選択時のラベル背景 */
  --sim-font:   18px;         /* 見出し文字サイズ */
  --sim-card-ar: 5 / 4;       /* 画像カード比率（150/120相当） */
  --sim-unit-w:  32px;        /* 「円/個」ボックス幅（SP） */
  --sim-input-h: 44px;        /* 金額・個数 input 高さ */
}

/* ==========================================================
  ② 見出し（左太線＋下線）
========================================================== */
.sim-midashi .frm_primary_label{
  position: relative;
  padding: 8px 0 10px 12px;   /* 左線分の余白 */
  font-weight: 700;
  font-size: var(--sim-font);
  line-height: 1.4;
}
.sim-midashi .frm_primary_label::before{
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 5px;                 /* 太さ */
  height: 100%;
  background: var(--sim-accent);
}
.sim-midashi .frm_primary_label::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;                /* 下線太さ */
  background: var(--sim-line);
}

/* ==========================================================
  ③ 画像カード（葬儀形式／斎場選択など）
========================================================== */
.sim-card .frm_image_option_container{
  aspect-ratio: var(--sim-card-ar);
  display: flex;
  flex-direction: column;
}
.sim-card .frm_image_option_container img{
  width: 100%;
  flex: 1;                     /* 画像領域を確保 */
  object-fit: cover;
  display: block;
}
.sim-card .frm_text_label_for_image{
  padding: 6px 8px;
  text-align: center;
  background: #fff;
  font-size: 14px;
  line-height: 1.4;
}
.sim-card-choubun .frm_text_label_for_image {
  font-size: 11px;
}

/* ラジオ丸を消す（カード） */
.sim-card .frm_image_option input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 選択中：ラベル（span）の背景色だけ変更 */
.sim-card label:has(input[type="radio"]:checked) .frm_text_label_for_image{
  background: var(--sim-selbg);
}
/* スマホ：フォーム全体の左右余白はここだけで管理 */
@media (max-width: 767px){
  #frm_form_2_container .frm_fields_container{
    padding: 0 8px !important;
    box-sizing: border-box;
  }

  .sim-card .frm_opt_container{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0px;
    padding: 0 !important;   /* カード側では余白を持たせない */
    box-sizing: border-box;
  }

  .sim-card .frm_opt_container label,
  .sim-card .frm_image_option,
  .sim-card .frm_radio{
    box-sizing: border-box;
    width: 156px;
  }
}




/* ==========================================================
  ④ リスト詰め（li / グループ / p）
========================================================== */
.sim-li-tume {
  margin-bottom: 5px!important;
}
.sim-li-tume li{
  margin: 2px 0 !important;
}
.sim-li-tume .wp-block-group{
  margin-top: 0 !important;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 0;
  border-width: 1px!important;
}
.sim-li-tume p{
  text-align: center;
  margin-bottom: 5px;
}

/* ==========================================================
  ⑤ プラン区分（ラジオ枠）
========================================================== */
.sim-plan-kubun {
  margin-bottom: 8px!important;
}
.sim-plan-kubun .frm_opt_container{
  margin-top: 5px;
}
.sim-plan-kubun .frm_radio{
  border: 1px solid var(--sim-line);
  padding: 13px 2px;
  border-radius: 5px;
}
.sim-plan-kubun .frm_radio label{
  display: flex;
  align-items: center;
  gap: 6px;
}
.sim-plan-kubun .frm_primary_label {
  margin-bottom: 8px!important;
}
.sim-kubun {
  margin-bottom: 3px!important;
}

.sim-plan-kubun .frm_radio {
  width: 100px;
}
.sim-plan-kubun input {
  margin-right: 0!important;
  margin-left: 4px!important;;
}

.sim-kubun .frm_primary_label {
  font-weight: 600;
}
.sim-kihon {
  margin-bottom: 3px!important;
}

@media (max-width: 767px){
  .sim-plan-kubun .frm_opt_container{
    display: flex;
    justify-content: space-between;
  }

  .sim-plan-kubun .frm_radio{
    width: 33.33%;
    margin-right: 8px; /* もし全体に右マージンを入れているなら */
    box-sizing: border-box;
  }

  /* 最後だけ右マージンを消す */
  .sim-plan-kubun .frm_radio:last-child{
    margin-right: 0;
  }
  .sim-kubun .frm_opt_container{
    display: flex;
    justify-content: center;   /* 中央寄せ */
    gap: 8px;                  /* ボタン間の余白 */
  }

  .sim-kubun .frm_radio{
    width: 50%;              /* 既存指定を活かす */
    box-sizing: border-box;
  }
  .sim-kubun .frm_primary_label {
  text-align: center;
}
  /* ★ label を中央に配置する */
  .sim-kubun label {
    margin-left: 25%;
    margin-right: 25%;
    text-align: center;
  }
}

/* ==========================================================
  ⑥ 基本料金（ラベル＋金額：横並び）
========================================================== */
.sim-yokonarabi{
  display: flex;
  align-items: center;
  gap: 12px;
}
.sim-yokonarabi .frm_primary_label{
  padding-bottom: 0;
}
.sim-yokonarabi .frm_total_formatted{
  margin: 10px;
  margin-left: auto;          /* 金額を右端へ */
}

/* ==========================================================
  ⑦ 小さめ余白調整
========================================================== */
.sim-kosuu{
  margin-bottom: 5px !important;
}

/* ==========================================================
  ⑧ 返礼品（単価 / 個数 / 合計） 横並び：SP / PC
  - FormidableのSP崩し（grid-column: 1 / span 12 !important）対策
========================================================== */

/* 金額・個数 共通：高さを揃える（PC/SP共通） */
.sim-kingaku input,
.sim-ninzu-kosu input,
.sim-kingaku .frm_inline_box,
.sim-ninzu-kosu .frm_inline_box{
  height: var(--sim-input-h);
  line-height: var(--sim-input-h);
  box-sizing: border-box;
}

/* --- SP（600px以下）--- */
@media (max-width: 600px){

  /* 12カラム内の配置（あなたの図：4/4/4） */
  .frm_fields_container .frm_form_field.sim-kingaku{
    grid-column: 1 / span 4 !important;
  }
  .frm_fields_container .frm_form_field.sim-ninzu-kosu{
    grid-column: 5 / span 4 !important;
  }
  .frm_fields_container .frm_form_field.sim-migiyose{
    grid-column: 9 / span 4 !important;
  }

  /* 潰れ防止 */
  .sim-kingaku,
  .sim-ninzu-kosu,
  .sim-migiyose{
    min-width: 0 !important;
  }

  /* 入力幅 */
  .sim-kingaku input,
  .sim-ninzu-kosu input{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 「円/個」ボックス幅（SP） */
  .sim-kingaku .frm_inline_box,
  .sim-ninzu-kosu .frm_inline_box{
    width: var(--sim-unit-w) !important;
    padding: 6px !important;
    text-align: center !important;
  }

  /* 合計：右寄せ・枠なし */
  .sim-migiyose{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  .sim-migiyose .frm_total_formatted{
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    white-space: nowrap !important;
    text-align: right !important;
  }
}
.sim-migiyose p span:last-child {
  font-size: 0.6em;
}


/* --- PC（768px以上）--- */
@media (min-width: 768px){

  /* 合計：右側5カラム（8〜12）に固定 */
  .frm_fields_container .frm_form_field.sim-migiyose{
    grid-column: 9 / span 4 !important;
    justify-self: end !important;
    align-self: center !important;
  }
  .frm_fields_container .frm_form_field.sim-migiyose .frm_total_formatted{
    margin: 0 !important;
    white-space: nowrap !important;
    text-align: right !important;
  }
}
@media (min-width: 600px){
  .frm_fields_container .frm_form_field.sim-kingaku{
    grid-column: 1 / span 4 !important;
  }
  .frm_fields_container .frm_form_field.sim-ninzu-kosu{
    grid-column: 5 / span 4 !important;
  }
  .frm_fields_container .frm_form_field.sim-migiyose{
    grid-column: 9 / span 4 !important;
    text-align: right!important;
  }
}
.with_frm_style .frm_inline_total {
    padding: 0 0px;
}


/* ==========================================================
  ⑨ 総合計（強調表示）
========================================================== */
.sim-sougoukei{
  position: relative;
  font-weight: 700 !important;
  border-bottom: 3px solid var(--sim-accent);
}

/* ラベルを下線に吸着 */
.sim-sougoukei label{
  position: absolute;
  bottom: 2px;
  font-weight: 700 !important;
}

/* 金額表示を強調 */
.sim-sougoukei p{
  font-size: 2em !important;
  line-height: inherit;
  margin-bottom: 0!important;
}
.sim-sougoukei p span:last-child {
  font-size: 0.5em!important;
}


/* ==========================================================
  ⑨ お香典マージン調整
========================================================== */

.sim-okouden {
  margin-bottom: 0!important;
}

.sim-okouden .frm_total_formatted p {
  font-size: 2em!important;
  font-weight: 600;
}

.sim-koden-heikin {
  margin-bottom: 0!important;
}


/* ==========================================================
  安達のプランの幅個別指定
========================================================== */
.sim-plan-2karamu .frm_radio {
  width: 20%;
}
@media (max-width: 767px){
  .sim-plan-2karamu .frm_radio {
  width: 50%;
}
  .sim-plan-2karamu label {
        margin-left: 10%;
        margin-right: 10%;
        text-align: center;
  }
}
.adati-margin {
  margin-bottom: 5px!important;
}
/* ==========================================================
  相馬のプランのフォントサイズ個別指定
========================================================== */
.sim-saijou-iitate .frm_opt_container #frm_radio_311-4 span {
  font-size: 11px;
}
/* ==========================================================
  福島の家族葬の小ホールフォントサイズ個別指定
========================================================== */
/* 2番目の選択肢のテキスト */
.sim-fukushima-choubun .frm_opt_container > .frm_radio:nth-of-type(2) .frm_text_label_for_image{
  font-size: 10px !important;
}

/* 最後の選択肢のテキスト */
.sim-fukushima-choubun .frm_opt_container > .frm_radio:last-of-type .frm_text_label_for_image{
  font-size: 10px !important;
}