/* =============================
   フォーム全体のラッパー
   ============================= */
.application-form-wrapper {
  max-width: 800px;       /* フォームの幅 */
  margin: 0 auto;         /* 中央寄せ */
  padding: 30px;

 
 
  font-family: "Yu Gothic","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
}

/* =============================
   セクションタイトル
   ============================= */
.section-title {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #333;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
}

/* =============================
   各行のスタイル
   ============================= */
.form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.form-row label {
  font-weight: bold;
  margin-bottom: 5px;
  color: #555;
maegin:auto 0;
}

.form-row .required {
  display: inline-block;   /* テキスト幅に合わせる */
  color: white;
  border-radius: 3px;
  padding: 5px 4px;       /* 横に少し余白 */
  font-weight: bold;
  margin-left: 10px;
  background: #d33;
  font-size: 0.8rem;
  line-height: 1;          /* 高さをテキストに合わせる */
  vertical-align: middle;  /* 親テキストと中央揃え */

}


/* =============================
   入力フィールド
   ============================= */
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="number"],
.form-row input[type="date"],
.form-row textarea {
  padding: 12px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
}


.form-row input:focus,
.form-row textarea:focus {
  border-color: #66a3ff;
  outline: none;
}

/* =============================
   ラジオボタングループ
   ============================= */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
	
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: bold;
}

.radio-group input[type="text"] {
  margin-left: 5px;
  width: 80px;
	
	font-weight: bold;
}

/* =============================
   非表示のテキストボックス
   ============================= */
.hidden {
  display: none;
}

/* =============================
   区切り線
   ============================= */
.form-break {
  height: 1px;
  background-color: #eee;
  margin: 25px 0;
}

/* =============================
   送信ボタン
   ============================= */
.submit-row {
  text-align: center;
  margin-top: 20px;
}

.submit-row button {
  background-color: #fbc71c;
  color: #000000;
  font-size: 1rem;
  padding: 20px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
	font-weight:bold;
}

.submit-row button:hover {
  background-color: #ec6d38;
}

/* =============================
   レスポンシブ対応
   ============================= */
@media (max-width: 600px) {
  .radio-group {
    flex-direction: column;
  }
}


/* =============================
   テキストエリア（幅小さめ版）
   ============================= */
.form-row textarea {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 0.95rem;
  width: 100%;             /* 元の幅のまま */
 
  height: 60px;             /* 初期高さ */
  max-height: 200px;       /* 最大高さを制限 */
  resize: both;             /* 横も縦もリサイズ可能 */
  box-sizing: border-box;
  transition: border-color 0.2s;
}


label {
  display: inline-flex;       /* 親をFlexに */
  align-items: center;        /* 縦中央揃え */
}


#programContent {
  resize: vertical;   /* 縦方向のみリサイズ可能、横は固定 */
  max-height: 200px;  /* 必要なら最大高さを制限 */
  width: 100%;        /* 幅は親に合わせる */
  box-sizing: border-box;
}
#notes {
  resize: vertical;   /* 縦だけリサイズ可能、横は固定 */
  max-height: 200px;  /* 最大高さを制限（必要に応じて調整） */
  width: 100%;        /* 親幅いっぱいに */
  box-sizing: border-box; 
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 0.95rem;
}

.form-description{

font-weight:bold;
	
	color:#ACACAC;
	}




/*最初の文章ハム*/


.form-description1{
	
text-align: center;
margin-top:30px;	
	
	
}





/* 簡易モーダルCSS */
.modal {
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.5);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:1000;
}
.modal.hidden {
  display:none;
}
.modal-content {
  background:white;
  padding:20px;
  border-radius:8px;
  max-width:400px;
  width:90%;
}
.modal-content h3 {
  margin-top:0;
}
.modal-content button {
  margin:5px;
}


.modal {
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.5);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:1000;
}
.modal.hidden { display:none; }
.modal-content {
  background:white;
  padding:20px;
  border-radius:8px;
  max-width:500px;
  width:90%;
  max-height: 80vh;
  overflow-y: auto;
}
.modal-content h3 { margin-top:0; }
.modal-content button { margin:5px; }
#confirm-text p { margin:5px 0; }


/* OKボタン（送信ボタン）は強調 */
#confirm-ok {
 
  color: black;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

/* キャンセルボタンはシンプルに */
#confirm-cancel {
  background: transparent; /* 背景なし */
  color: #555;             /* 薄い文字色 */
  border: 1px solid #ccc;  /* 薄い枠線 */
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
#confirm-cancel:hover {
  background: #f0f0f0; /* ホバーで薄く色がつく程度 */
}






.submit-row input[type="submit"],
.submit-row button {
  background-color: #fbc71c;
  color: #000000;
  font-size: 1rem;
  padding: 20px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-weight: bold;
}

.submit-row input[type="submit"]:hover,
.submit-row button:hover {
  background-color: #ec6d38;
}





/* 番組内容とSNSを同じ幅に固定 */
#programContent,
#sns {
  width: 100%;       /* 横幅を固定 */

  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 0.95rem;
  resize: vertical;   /* 縦方向のみリサイズ可能 */
  height: 60px;       /* 初期高さ */
  max-height: 200px;  /* 最大高さ */
}