@charset "utf-8";
  .contact-text{
    margin:0 auto;
  }
  .mail-message-area{
    width:100%;
    max-width: 900px;
    /*padding:0 15px;*/
  }
  .mail-message{
    width: 100%;
    background:rgba(255,255,255, 0.8) !important;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    transition: all 0.7s;
    margin:0 auto;
    border-radius: 0;
  }

  .not-visible-message{
    height:0px;
    opacity: 0;
  }

  .visible-message{
    height:auto;
    opacity: 1;
    margin:25px auto 0;
  }

/* Input Styles */

  .form{

    padding: 5px;
    background:#f8f8f8;
    border:1px solid rgba(0, 0, 0, 0.075);

    color:#727272 !important;
    font-size:1rem;
    /*-webkit-transition: all 0.4s;*/
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }

  .form:hover{
    border:1px solid #8BC3A3;
  }

  .form:focus{
    color: white;
    outline: none;
    border:1px solid #8BC3A3;
  }

  .textarea{
    height: 200px;
    max-height: 200px;
    max-width: 100%;
  }
  
/* Generic Button Styles */

  .button{
    padding:8px 12px;
    background:#0A5175;
    display: block;
    width:120px;
    margin:10px 0 0 0;
    border-radius:3px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    text-align:center;
    font-size:0.8em;
    box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  }

  .button:hover{
    background:#8BC3A3;
    color:white;
  }

/* Send Button Styles */
.form-btn {
	width: 180px;
    /* 現在のボタンのスタイル（例） */
    display: inline-block; /* リンクはデフォルトでインライン要素なので、ブロック要素のように振る舞うように変更 */
    padding: 15px;
    background-color: #8BC3A3;
    color: #fff;
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none; /* ここが重要: リンクの下線を消す */
    border-radius: 5px;
    /* その他のスタイル... */
}

.form-btn.semibold {
    font-weight: 600; /* semiboldのスタイル */
}
.form-btn:hover{
    background:#111;
    color: white;
    border:none;
  }
/*  .form-btn{
    width:180px;
    display: block;
    height: auto;
    padding:15px;
    color:#fff;
    background:#8BC3A3;
    border:none;
    border-radius:3px;
    outline: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    margin:auto;
    box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  }

  .form-btn:hover{
    background:#111;
    color: white;
    border:none;
  }

  .form-btn:active{
    opacity: 0.9;
  }*/
center{
  margin-top:330px;
}
input {
    position: relative;
    z-index: 9999;
}

/* --- Contact Form Layout --- */
.contact-form form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;                /* 左右の間隔 */
    max-width: 900px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 10px;
}

/* 左右カラム 
.contact-form .col-xs-6 {
    flex: 1 1 calc(50% - 10px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}*/

/* 左カラム input */
.contact-form .col-xs-6 input.form {
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;      /* padding込みで幅100% */
    position: static;            /* common.cssの干渉無効化 */
    z-index: auto;
}

/* 右カラム textarea */
.contact-form .col-xs-6 textarea.form {
    width: 100%;
    flex: 1;
    min-height: 250px;
    box-sizing: border-box;
    position: static;            /* common.cssの干渉無効化 */
    z-index: auto;
}

/* ボタンを中央に */
.contact-form .fullwidth {
    width: 100%;
    text-align: center;
}
#setumei{
  color: #fff;
  max-width: 900px;
  margin: 30px auto;
  box-sizing: border-box;
  padding: 10px 10px;
}
#setumei a{
  color: #fff;
  text-decoration: underline #fff double;
}
main{
  background: #dba958;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 20px 0 50px;
}  
main h2{
  display: none;
  width:100%;
  max-width: 900px;
  margin-bottom: 30px;
  text-align: center;
  font-size: 210%;
  padding: 0 0;
}
/*.flex{
  display: flex;
}*/
input[type="radio"]{
  display: none;
  display: inline-block;
}

.radio-group{
  display: flex;
  align-items: center;
}

.clear,address,p,label{
  color: #fff;
}
#category5{
  margin-bottom: 20px;
}
.sp-only {
    display: none;
}

@media(max-width: 600px){

	#contact-us{
		width: 100%;
		flex-direction: column;
	}
  .sp-only {
        /* brタグ本来の表示形式に戻す */
        display: inline; 
        /* または display: block; など、状況に応じて調整 */
    }
	
}