@charset "UTF-8";

/* ==========================================================================
   申し込みフォーム 見た目改善（2026-09-09）
   order3〜8/index.php のみで order.css の後に読み込む（credit.php・thanks.html には影響させないため別ファイル）。
   ========================================================================== */

/* ---- セクションのカード化 ---- */
/* 既存の .c-formList_item（お客様情報／お届け日／お申込内容...の各グループ）に
   白背景・角丸・薄い影を付け、細い罫線区切りだった見た目を
   「グループごとに独立したカード」に変える */
.c-formList_item {
  background: #fff;
  border: 1px solid #ece7f0;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 2px 10px rgba(90, 80, 112, 0.07);
}
.c-formList_item:not(:first-of-type) {
  margin-top: 28px;
}
@media only screen and (max-width: 768px) {
  .c-formList_item {
    padding: 22px 18px;
    border-radius: 8px;
  }
}

/* ---- 必須/任意バッジ ---- */
/* 既存の .required（紫地に白文字）はそのまま。
   任意項目には控えめなグレーバッジを追加し、
   「これは入力しなくてよい」がひと目で分かるようにする */
.optional {
  display: inline-block;
  background: #eee;
  color: #888;
  font-size: 1.3rem;
  font-weight: normal;
  padding: 0 0.5em;
  margin-left: 1em;
}
@media only screen and (max-width: 768px) {
  .optional {
    font-size: 1.2rem;
  }
}

/* ---- 商品プラン選択のカード化 ---- */
/* 既存の .c-inputList（ラジオボタンの縦リスト）を、
   TOPページのプランカードと近い配色のグリッドカードに変える。
   input要素のname/valueは一切変更しないため、送信データへの影響はない */
.c-planSelect {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.c-planSelect > li {
  margin-top: 0 !important; /* .c-inputList > li の margin-top(10px)を打ち消す */
}
.c-planSelect_label {
  /* 画像は「カード上部の大きな写真」ではなく、商品名の隣に置く
     丸い小さなサムネイルとして横並びにする */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 14px 44px 14px 16px; /* 右側はラジオボタン用の余白 */
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: border-color .15s ease, background .15s ease;
}
.c-planSelect_label:hover {
  border-color: #c6c0d3;
}
/* 丸サムネイル（48px、なければ非表示） */
.c-planSelect_img {
  display: block;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: #f5f5f5;
}
.c-planSelect_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-planSelect_body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0; /* flexアイテム内でのテキスト折り返しを正しくする */
  padding: 0;
}
.c-planSelect_label::before {
  /* ラジオボタンはカードの高さに関わらず、常に右側中央に固定表示する */
  left: auto;
  right: 14px;
  top: 50%;
  margin-top: -10px;
}
.c-planSelect_label::after {
  left: auto;
  right: 19px;
  top: 50%;
  margin-top: -5px;
}
.c-planSelect_name {
  display: block;
  font-weight: 700;
  /* サイト全体の word-break: break-all だと「E008」が「E00／8」のように
     英数字の途中で折り返されるため、商品名だけ通常の改行規則に戻す */
  word-break: normal;
  overflow-wrap: anywhere;
}
.c-planSelect_price {
  margin-top: 6px;
  font-size: 1.25em;
  font-weight: 700;
  color: var(--primary);
}
input[type="radio"]:checked + .c-planSelect_label {
  border-color: var(--primary);
  background: var(--p-4);
}

/* ---- 「初回無料」バッジの余白調整 ---- */
/* プラン名にバッジがくっついて見えていた問題を、
   下マージンと角丸・パディングの見直しで解消 */
.husen_1 {
  margin-bottom: 0.5em;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85em;
}
.c-planSelect_label .husen_1 {
  align-self: flex-start;
}
/* サムネイルが小さい丸型のため、写真内の「初回無料」バッジ部分は
   クロップで見えなくなる。文字側のバッジは常に表示する */

/* ---- ページ見出し画像とフォームの間隔 ---- */
/* 上部の案内文（.c-greeting）を削除したページでは、.c-page_inr の上余白(60px)と
   .c-formList の上余白(40px)が重なって100pxの空白になっていた。
   フォームがページ本体の先頭にあるときだけフォーム側の余白をなくし、
   案内文があるページ（order4/6の見出し画像→案内文 60px）と間隔を揃える */
.c-page_inr > form:first-child > .c-formList {
  margin-top: 0;
}