@charset "UTF-8";

/*----------------------------------------------------------------------------------------------------------------------#page_tit----------*/

#page_tit{
background:url("../images/contact_main.jpg") no-repeat center center;
background-size:cover;
}

/*----------------------------------------------------------------------------------------------------------------------#cont----------*/

#cont h2{
font-size:27px;
font-weight: normal;
letter-spacing:3px;
line-height:1.4;
color:#fff;
text-align:center;
position: relative;
margin-bottom: 30px;
}

.border:after{
width:100%;
content: "";
border-bottom: 1px solid #fff;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: -10px;
margin:auto;}

#cont h3{
font-weight:bold;
text-align:left;
color:#5D5D5D;
}

@media screen and (max-width:1024px){

#cont h2{ 
font-size:25px;
letter-spacing:3px;
}

}

@media screen and (max-width:740px){

#cont h2{ 
font-size:24px;
}

}


/*----------------------------------------------------------------------------------------------------------------------#contact----------*/

#contact{
padding:100px 0 50px;
position:relative;
}

#contact .inner{
max-width:1080px;
width:100%;
margin:0 auto;
}

#contact p{ 
text-align:center;
margin-top:15px;
margin-bottom: 20px;
}

.red {color: #eb5062;}

.reserve-banner {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px 20px;
  text-align: center;
  font-size: 1.1em;
  margin-bottom: 25px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.reserve-banner strong {
  font-size: 1.5em;
}

.reserve-banner p {
  margin: 0;
  line-height: 1.6;
}

@media screen and (max-width:1024px){

#contact .inner{ width:90%; }

}

@media screen and (max-width:740px){

#contact{
padding:80px 0 40px;
position:relative;
}
	
#contact p{ 
text-align:justify;}

#contact .inner{ width:95%; 
margin:0 auto;
}

.reserve-banner p{
  text-align: center !important;
  font-size: 1em;
}

}

/*----------------------------------------------------------------------------------------------------------------------#mailform----------*/
#mailform {
	width:800px;
	margin:0 auto;
	line-height:120%;
	font-size:100%;
}
table.formTable{
	width:100%;
	max-width: 800px;  /* PCでは最大幅を800pxに */
	margin:0 auto;
	border-collapse:collapse;
}

table.formTable td,table.formTable th{
	border-bottom:1px solid #DED4CE;
	padding:15px;
}
table.formTable th{
	width:30%;
	text-align:left;
}

/* 共通スタイル */
table.formTable input[type="text"],
table.formTable input[type="email"],
table.formTable input[type="tel"],
table.formTable input[type="date"],
table.formTable select,
table.formTable textarea {
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
}

.date-flex {
  margin-bottom: 10px; 
}
.date-flex label {
  display: block;   /* ラベルを改行させる */
  margin-bottom: 5px; /* ラベルと入力欄の間の余白 */
}

.date-flex input,
.date-flex select {
  display: inline-block;
  vertical-align: middle; /* 中央揃えにする */
  margin-right: 5px;
}


/* 項目ごとの幅指定 */

/* 希望日 */
input[name="date1"],
input[name="date2"],
input[name="date3"]{
    width: 40%;
}

/* 希望時間 */
select[name="time1"],
select[name="time2"],
select[name="time3"]{
    width: 30%;
}

/* お名前・フリガナ */
input[name="お名前"],
input[name="フリガナ"] {
    width: 70%;
}

/* 郵便番号 */
input[name="郵便番号"] {
    width: 40%;
}

/* 住所 */
input[name="住所"] {
    width: 90%;
}

/* 電話番号・メール */
input[name="電話番号"],
input[name="Email"] {
    width: 70%;
}

/* お問い合わせ内容 */
textarea[name="お問合せ内容"] {
    width: 100%;
    min-height: 120px;
}

/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:740px) {
#mailform {
	width:95%;
	margin:0 auto;
}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
input[type="text"], textarea {
	width:80%;
	padding:5px;
	font-size:110%;
	display:block;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}
}

.red {color: #eb5062;}

.privacy{
margin:35px 0px 30px 0px;
padding:20px 40px;
border:1px solid #ddd;
font-size:12px;
text-align: left !important;
}

.privacy p{ 
text-align: left !important;
}

.privacy h4{ 
font-weight:bold;
color:#a48b78;
}

.caution{
margin-top:50px;	
border:1px solid #ddd;
padding:30px 40px;
font-size:12px;
}

.caution p{ 
text-align: left !important;
}

.by_tel{
background-color:#000;
margin-top:25px;
padding:40px;
text-align:center;
margin-bottom: 50px;
}

.by_tel p:first-child span{
border-bottom:1px solid #fff000;
font-weight:bold;
padding-bottom:10px;
color: #fff;
}

.by_tel p a{
font-size:32px;
line-height:1.4;
font-family:Helvetica, sans-serif;
padding-left:20px;
color:#fff !important;
letter-spacing:4px;
}

.by_tel p:last-child{ margin-top:16px; color: #fff; }

.by_tel p strong{ color:#fff; }


@media screen and (max-width:740px){

#mailform {
	width: 100%;
}
	
#mailform input[type=text] {
	width: 100%;
}
	
#mailform textarea[name=contact] {
	width: 100%;
}
	
#mailform label {
	width: 300px;
	padding-left: 0px;
}
	
.by_tel{ padding:20px; }

.by_tel p{
text-align: center !important;
}
	
.by_tel p:first-child span{
border-bottom:1px solid #fff000;
font-weight:bold;
padding-bottom:10px;
}

.by_tel p a{
display:block;
margin-top:20px;
font-size:35px;
padding-left:0px;
letter-spacing:2px;
}

.by_tel p:last-child{ margin-top:10px; }

.by_tel p strong{ display:block; }

}