/* ==================================================================================================== */
/* 汎用 */
/* ==================================================================================================== */

/* 全体 */
div.form-area { position:relative; margin-bottom:100px; z-index:1; }
div.form-area form { display:flex; flex-direction:column; gap:40px; }
.msg { color:#f00; }

/* 角丸 */
section.content-block { border-radius:20px 20px 0 0; }

/* 見出し */
section.content-block h2 { color:var(--pi); font-size:20px; font-weight:900; margin-bottom:40px; }

/* フォーム部分 */
p.item-title { font-size:16px; font-weight:800; line-height:32px; margin-bottom:8px; } 

/* フォーム項目 */
.item-box input[type="text"], .item-box textarea { background-color:var(--gr); border:1px solid var(--bk); border-radius:6px; padding:4px; max-width:100%; width:100%; }
.item-box input[type="text"]:focus, .item-box textarea:focus { background-color:var(--wh); border:1px solid var(--pi); }

/* 必須 */
span.hissu { align-items:center; background-color:var(--pi); border-radius:8px; color:var(--wh); font-size:14px; font-weight:500; display:inline-flex; line-height:16px; justify-content:center; padding:2px 8px; margin-left:8px; height:20px; width:44px; }

/* 複数使用ボタン */
.ye-button {
  text-align: center;
  margin-top: 40px;
}

/* ボタン本体 */
.ye-button button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px; /* 矢印との間隔 */
  background-color: var(--ye);
  border: none;
  border-radius: 100px;
  color: var(--bk);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  width: 176px;
  height: 46px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* hover時 */
.ye-button button:hover {
  color: var(--wh);
}

/* 矢印 */
.ye-button .arrow {
  font-weight: 900;
  transform: translateY(1px);
}

/*--------------------------------------
ラジオボタン
--------------------------------------*/
.item-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.item-box li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

/* デフォルトのラジオを非表示にしてカスタム表示 */
.item-box input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--bk);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* チェック時：黒丸 */
.item-box input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bk);
}

/*--------------------------------------
プルダウンメニュー（矢印あり）
--------------------------------------*/

/* ラッパーを相対配置 */
.select-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* select本体 */
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 10px 40px 10px 12px;
  font-size: 16px;
  border: 1px solid var(--gr, #ccc);
  border-radius: 6px;
  background-color: #fff;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

/* フォーカス時の枠線 */
.select-wrap select:focus {
  border-color: var(--bk);
  outline: none;
}

/* ▼ 矢印（borderのみで作成） */
.select-wrap::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--bk);
  border-bottom: 2px solid var(--bk);
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.3s ease;
  pointer-events: none;
}

/* フォーカス時（展開時）：上向きに回転 */
.select-wrap:has(select:focus)::after {
  transform: translateY(-50%) rotate(-135deg);
}


/* error部分 */
div.error { background-color:#ffe9e9; padding:24px; margin:auto; margin-bottom:40px; }
div.error p { font-size:16px; font-weight:400; line-height:200%; text-align:center; letter-spacing:-0.8px; }
div.error p::before { aspect-ratio:1/1; content:''; background-repeat:no-repeat; background-size:contain; background-position:center; background-image:url('../img/form/error.svg'); display:inline-block; margin-right:8px; vertical-align:middle; height:24px; width:24px; }
div.error-content { display:flex; flex-direction:column; }
div.error-content div.item-box { display:inline-block; text-align:center; }
div.error-content div.item-box p { text-align:left; }

@container( min-width:960px ) {

/* 全体 */
div.form-area { margin:auto; margin-bottom:200px; max-width:830px; width:100%; }
div.form-area::before { aspect-ratio:318/244; background-repeat:no-repeat; background-size:contain; background-position:center; background-image:url('../img/form/mail-illust.png'); content:''; display:inline-block; position:absolute; left:-240px; bottom:-200px; height:244px; width:318px; z-index:-1; }

/* 見出し */
section.content-block h2 { font-size:34px; font-weight:900; letter-spacing:6.8px; }

/* テキスト */
div.form-area p { font-size:18px; font-weight:400; line-height:32px; letter-spacing:-0.9px; }

/* フォーム部分 */
p.item-title { font-size:20px;} 

/* リスト */
.item-box ul { display:flex; align-items:flex-start; flex-wrap:wrap; gap:16px; justify-content:center; margin:auto; margin-top:24px; max-width:80%; }
.item-box ul li { font-size:18px; font-weight:400; width:calc( 50% - 8px ); }
.item-box ul li:nth-child(1) { order:1; }
.item-box ul li:nth-child(2) { order:3; }
.item-box ul li:nth-child(3) { order:5; }
.item-box ul li:nth-child(4) { order:2; }
.item-box ul li:nth-child(5) { order:4; }
.item-box ul li:nth-child(6) { order:6; }

/* error部分 */
div.error { margin:auto; margin-bottom:40px; max-width:830px; width:100%; }

}