@charset "UTF-8";
/* CSS Document */



.title{
	text-align: center;

}


/* ========= フォーム全体 ========= */
.Form{
  width: min(900px, 92%);
  margin: 30px auto 80px;

  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
	background: #FEF1D7;        /* お住まいと同系の生成り色 */
  border: 8px solid #736357;   /* 同じ系統の濃茶枠 */
}

/* タイトル付近との余白（h1直後に来る想定） */
h1 + .Form{ margin-top: 24px; }

/* ========= 行レイアウト ========= */
.Form-Item{
  display: block;
  padding: 14px 0;
  border-bottom: 1px dashed #eef2f7;
}
.Form-Item:last-child{ border-bottom: none; }

/* ========= ラベル ========= */
.Form-Item-Label{
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.6;
  color: #222;
}
.Form-Item-Label-Required{
  display: inline-block;
  margin-left: .6em;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  background: #ff8c00; 
  padding: .12em .6em;
  border-radius: 6px;
  vertical-align: middle;
}

/* ========= 入力共通 ========= */
.Form-Item-Input,
.Form-Item-Textarea{
  width: 100%;
  font-size: 1rem;
  line-height: 1.6;
  color: #222;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.Form-Item-Textarea{ min-height: 180px; resize: vertical; }

.Form-Item-Input::placeholder,
.Form-Item-Textarea::placeholder{
  color: #9aa4b2;
}

/* フォーカス */
.Form-Item-Input:focus,
.Form-Item-Textarea:focus{
  border-color: #ff8c00;               /* サイトのアクセント */
  box-shadow: 0 0 0 3px rgba(136,191,191,.25);
}

/* HTML5の簡易バリデーション色（未入力/不正時） */
.Form-Item-Input:required:invalid,
.Form-Item-Textarea:required:invalid{
  background-color: #fff;
  border-color: #ffd4cc;
}
.Form-Item-Input:required:invalid:focus,
.Form-Item-Textarea:required:invalid:focus{
  border-color: #ff8f70;
  box-shadow: 0 0 0 3px rgba(255,143,112,.2);
}

/* number入力の上下矢印をSafari/Chromeで最小限に */
input[type="number"]{
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* ========= ラジオ（お住まい） ========= */
.Form-Item label[for^="inquiry_"]{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 16px;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.Form-Item input[type="radio"]{
  width: 16px; height: 16px;
  accent-color: #ff8c00; /* 対応ブラウザで色を合わせる */
}
.Form-Item input[type="radio"]:focus-visible + span,
.Form-Item label[for^="inquiry_"]:hover{
  border-color: #cfe7e7;
  background: #f7fbfb;
}

/* ========= 送信ボタン ========= */
.Form-Btn{
  display:block;
  margin: 24px auto;
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  background: #ff8c00;   /* サイト色 */
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 14px rgba(136,191,191,.25);
}
.Form-Btn:hover{ filter: brightness(1.03); }
.Form-Btn:active{ transform: translateY(1px); }
.Form-Btn:disabled{ opacity: .65; cursor: not-allowed; }

/* ========= レスポンシブ ========= */
@media (max-width: 900px){
  .Form{ padding: 22px; border-radius: 14px; }
}
@media (max-width: 600px){
  .Form{ padding: 18px; border-radius: 12px; }
  .Form-Item{ padding: 12px 0; }
  .Form-Btn{ width: 100%; text-align: center; }
  /* ラジオを縦並びに */
  .Form-Item label[for^="inquiry_"]{
    display: flex;
    width: 100%;
    margin-right: 0;
  }
}

/* ========= 既存テーマとの馴染み（任意） ========= */
/* main直下のh1を少しだけ強調（他ページに影響しにくい範囲） */
main > h1{
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  color: #223;
  margin: 16px auto 8px;
}

/* 文章（注意書き） */
Form p{
  line-height: 1.9;
	
	margin: 0 auto 50px;
	max-width: 800px;
}

/* ========= アクセシビリティ微調整 ========= */
input, textarea, button{
  font-family: inherit;
}



/*フォーム下メッセージ*/
/* お知らせ（メール受信設定） */
.notice-mail{
  box-sizing: border-box;
  width: min(1200px, 90%);
	max-width: 850px;
  margin: 20px auto 100px;
  padding: clamp(16px, 2.5vw, 28px) clamp(16px, 3vw, 40px);
  border-radius: 18px;
  font-family: "Kosugi Maru", "Yu Gothic", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.9;
  color: #333;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(12px, 2vw, 18px);
}

/* 左にワンポイント（封筒アイコン）— 画像ファイル不要のSVGデータURI */
.notice-mail::before{
  content: "";
  width: clamp(28px, 5vw, 40px);
  height: clamp(28px, 5vw, 40px);
  align-self: start;
  margin-top: 2px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">\
      <rect x="4" y="10" width="40" height="28" rx="6" fill="%23736357"/>\
      <path d="M8 14l16 12L40 14" fill="none" stroke="%23FEF1D7" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>\
    </svg>');
}

/* テキスト本体を2列目に流し込む */
.notice-mail{
  grid-auto-flow: column;
}
.notice-mail br{
  /* モバイルで行間が詰まりすぎないよう軽く調整（任意） */
  line-height: 2.0;
}

/* 重要キーワードの視認性（角張らない下線） */
.notice-mail{
  text-underline-offset: .2em;
  text-decoration-thickness: .08em;
}

/* モバイル最適化（700px基準） */
@media (max-width: 700px){
  .notice-mail{
    padding: 16px 18px;
    border-width: 6px;
    border-radius: 16px;
    grid-template-columns: auto 1fr;
  }
}