@charset "UTF-8";

/*全体の設定
---------------------------------------------------------------------------*/
html, body {
height: 100%;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: none;
}
html {
overflow-x: hidden;
overflow-y: auto;
}
body{
margin:0;
font-family:sans-serif;
font-weight: normal;
font-style: normal;
color:#333333;
font-size:1rem;
line-height: 2;
}


/*フォーム
---------------------------------------------------------------------------*/
.wrap{
max-width:100%;
margin:auto;
padding:20px;
box-sizing:border-box;
}
/* タイトル */
.wrap .title{
background:#ff8c00;
color:#fff;
padding:20px 20px;
border-radius:15px;
font-size:20px;
font-weight: 600;
line-height: 1.5;
}
/* 説明 */
.page-text{
margin:30px 0;
line-height:1.6;
}
.page-text .red{
color:red;
}

/*フォーム*/
.form-group{
margin-bottom:20px;
}
.form-group label{
display:block;
margin-bottom:5px;
}

/* 必須 */
.required{
background:#ff4500;
color:#fff;
font-size:11px;
padding:3px 6px;
margin-left:5px;
}

/* 入力 */
.wrap input,
.wrap textarea{
width:100%;
padding:15px;
background:#eee;
border-radius:5px;
box-sizing:border-box;
border:1px solid #eee;
}
.wrap textarea {
height:100px;
resize:none;
}
.form-group input:not(:last-child) {
margin-bottom: 5px;
}

/*ボタン
---------------------------------------------------------------------------*/
.form-btn,
.search-btn{
text-align:center;
margin-top:30px;
}
.form-btn button{
background:#ff8c00;
color:#fff;
border:none;
padding:15px 0;
border-radius:30px;
font-size:20px;
cursor:pointer;
width: 250px
}
.search-btn button{
position:relative;
background:#ff8c00;
color:#fff;
border:none;
padding:15px 0;
border-radius:30px;
font-size:20px;
cursor:pointer;
width: 250px
}
/* アイコン */
.search-btn button::before{
content:"";
position:absolute;
left:20px;
top:50%;
transform:translateY(-50%);

width:20px;
height:20px;
background:url("icon_search.png") no-repeat center;
background-size:contain;
}


/*検索
---------------------------------------------------------------------------*/
.search-wrap {
  width: auto;
  margin: 30px 0;
  background: #fff;
  box-sizing: border-box;
}

/* 画像 */
.search-wrap img {
  width: 100%;
  max-width: 350px;
  height: auto;
  display: block;
  margin-bottom: 20px;
}

/* 見出し */
.search-wrap h3 {
  margin: 30px 0 10px;
  font-size: 16px;
}

.search-wrap h4 {
  margin: 0 0 10px;
  font-size: 14px;
}

/* input */
.search-wrap input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  background: #fff;
  font-size: 14px;
}

/* =========================
   ラジオボタン
========================= */
.radio-dantai {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  line-height: 1.4;
  margin-bottom: 12px;
}

/* 元のラジオは非表示 */
.radio-dantai input[type="radio"] {
  display: none;
}

/* カスタムボタン */
.radio-dantai-button {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid #ff8c00;
  border-radius: 50%;
  flex-shrink: 0;
}

/* チェック時 */
.radio-dantai input[type="radio"]:checked + .radio-dantai-button::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 12px;
  height: 12px;
  margin: auto;
  border-radius: 50%;
  background: #ff8c00;
}

/* ホバー */
.radio-dantai:hover .radio-dantai-button {
  border-color: #e67600;
}

/* =========================
   セレクト
========================= */
.select-box{
  margin-bottom: 20px;
}

.select-box select{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
}

/* =========================
   フォーカス
========================= */
.search-wrap input:focus,
.search-wrap textarea:focus,
.search-wrap select:focus,
.wrap input:focus,
.wrap textarea:focus{
outline:none;
border:1px solid #ff8c00;
background:#fff;
}

/*お知らせ　フォーム
---------------------------------------------------------------------------*/
.mousikomi {
width: 750px;
margin: 0 auto;
}
/* タイトル */
.wrap h1.title{
color:#ff6600;
padding:20px 0;
font-size:20px;
font-weight: 600;
line-height: 1.5;
background:none;
}
.wrap .af{
width:100%;
padding:15px;
background:#ffe5bf;
border-radius:5px;
box-sizing:border-box;
font-size: 14px;
line-height: 1.5;
}
.form-note {
margin-top: 20px;
padding: 15px 0;
font-size: 12px;
line-height: 1.4;
}
@media (max-width:767px){
.mousikomi {
width: 100%;
}
.wrap h1.title{
font-size:16px;
}
}

/*お申し込み　チェックボックス
---------------------------------------------------------------------------*/
.form-group .check{
display:inline-flex;
align-items:center;
gap:4px;
width:auto;
}
.form-group .check input[type="checkbox"]{
margin:0;
position:static;
float:none;
}
.form-group input[type="checkbox"]{
width:auto;
}