@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;700&display=swap');

main{
	font-family: 'YuGothic', 'Yu Gothic', sans-serif;
}
.saiyou-3{
margin:0 auto;
width:100%;
font-size:0;
padding:0;
}
.cv{
	position:relative;
}
.bg-image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 中央にしたくなければ top寄せに変更 */
  align-items: center;
  padding: 0px 0px;
  box-sizing: border-box;
}

.contact-button {
  display: flex;
  align-items: center;
  padding: 16px 31px;
  border-radius: 30px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.contact-button .icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.contact-button.email {
  background-color: #FCD34D;
  color: #1F2937;
}

.contact-button.line {
  background-color: #ffffff;
  color: #16A34A;
  border: 2px solid #16A34A;
}


.form{
	padding: 50px 0px;
}
.form-img{width: 80%;margin: 0px auto 40px;}
.form-wrap{
  padding: 0 10px;
}


/* テーブル全体の設定 */
.contact-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0 24px; /* 行間の余白 */
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: 15px;
  color: #333;
}

/* 左側のラベル部分 */
.contact-table th {
  text-align: left;
  vertical-align: top;
  width: 100%;
  font-weight: normal;
  line-height: 1;
  font-size: 18px;
}

/* 右側の入力エリア */
.contact-table td {
  width: 100%;
}

.contact-table input[type="text"],
.contact-table input[type="email"],
.contact-table select,
.contact-table textarea {
  width: 100%;
  padding: 15px 12px;
  font-size: 18px;
  border: 1px solid #4B5563; /* グレーの境界線 */
  border-radius: 4px;
  box-sizing: border-box;
  font-family: inherit;
  color: #333;
}

/* テキストエリアサイズ調整 */
.contact-table textarea {
  height: 120px;
  resize: vertical;
}

/* 「必須」ラベルの見た目 */
.hissu {
  display: inline-block;
  background-color: #b91c1c;
  color: white;
  font-size: 12px;
  padding: 5px 6px;
  border-radius: 4px;
  margin-right: 6px;
}

/* セレクトボックスのラッパー（余白調整用） */
.contact-select-wrap {
  display: block;
}

/* 送信ボタン */
.contact-submit-btn-wrap {
  margin-top: 0px;
  text-align: center;
}

.contact-submit-btn {
  background-color: #4B5563;
  color: white;
  font-size: 16px;
  padding: 12px 32px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.3s ease;
}

.contact-submit-btn:hover {
  background-color: #374151;
}

.btn,.form input[type=submit]{
  margin-top: 20px;
  background: #075d88;
  color: #fff;
  margin: 0px auto 0;
  line-height: 3em;
  max-width: 400px;
  display: block;
  font-size: clamp(16px,2.4vw,24px);
}

@media screen and (min-width: 992px) {
.saiyou-3{
	margin:0 auto;
	width: 550px;
	text-align: center;
	padding: 0;
	}

.cv{
	position:relative;
}
.bg-image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: -70px;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 中央にしたくなければ top寄せに変更 */
  align-items: center;
  padding: 0px 0px;
  box-sizing: border-box;
}

.contact-button {
  display: flex;
  align-items: center;
  padding: 16px 50px;
  border-radius: 30px;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.contact-button .icon {
  width: 50px;
  height: 45px;
  margin-right: 10px;
}

.contact-button.email {
  background-color: #FCD34D;
  color: #1F2937;
}

.contact-button.line {
  background-color: #ffffff;
  color: #16A34A;
  border: 2px solid #16A34A;
}
	
.form{
	padding: 50px 50px;
}
.form-img{width: 60%;margin: 0px auto 40px;}
.form-wrap{
  padding: 0 10px;
}
/* フォーム全体の最大幅と中央寄せ */
.contact-table-wrap {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

/* テーブル設定 */
.contact-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto; /* ← fixedだと崩れやすい */
}

/* ラベル側 */
.contact-table th {
  width: 200px;
  text-align: left;
  vertical-align: top;
  padding: 4px 8px;
  font-size: 22px;
  color: #1f2937;
  white-space: nowrap;
}

/* 入力欄側 */
.contact-table td {
  padding: 4px 8px;
  vertical-align: top;
}
.contact-table th, .contact-table td{
display:block;		
	}
/* input/select/textarea のサイズ調整 */
.contact-table input[type="text"],
.contact-table input[type="email"],
.contact-table select,
.contact-table textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 15px 10px;
  font-size: 22px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
}