@charset "utf-8";

/* ===================================================================
Style CSS
ウィンドウ幅[1024px～]の場合に適用
=================================================================== */

/* ===================================================================
各ページ共通
=================================================================== */

/*	btn
--------------------------------------------------------------------*/
.contact,
.reservation {
display: -webkit-inline-box;
position: relative;
width: 250px;
}

.contact {
background: #e38d13;
}

.reservation {
background: #3f8620;
}

.contact a,
.reservation a {
display: block;
color: #fff;
text-align: center;
font-size: 16px;
}

.contact a:hover,
.reservation a:hover {
text-decoration: none;
}

.contact a:hover {
background: #e3b413;
}

.reservation a:hover {
background: #5aa738;
}

.contact a:before,
.reservation a:before {
content: "";
position: absolute;
top: 50%;
left: 15px;
width: 30px;
height: 21px;
margin-top: -11px;
background-size: 30px;
background-repeat: no-repeat;
}

.contact a:before {
background-image: url(../../images/index/contact_icon.png);
}

.reservation a:before {
background-image: url(../../images/index/reserva_icon.png);
}

.contact a:after,
.reservation a:after {
position: absolute;
top: 50%;
right: 10px;
margin-top: -16px;
color: #fff;
content: "\f054";
font-family: FontAwesome;
}


/*	h
--------------------------------------------------------------------*/
h2 {
padding: 1em 25px;
font-size: 2.4rem;
color: white;
background: linear-gradient(to bottom, rgb(167, 145, 98) 0%, rgb(130, 114, 78) 100%);
}

h3 {
padding: 1em 25px;
border-bottom: 1px solid #ccc;
}

h4 {
padding: 1em 25px;
}

/*	header
--------------------------------------------------------------------*/
#header {
padding: 12px 0 12px 20px;
}

#header h1 {
max-width: 269px;
margin: 0 auto;
}


/*	footer
--------------------------------------------------------------------*/
#footer .f_box {
-js-display: flex;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
align-items: center;
max-width: 1100px;
margin: 50px auto;
}

#footer .f_box .f_cta {
-js-display: flex;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
width: 740px;
}

#footer .f_box .f_cta .tel {
max-width: 380px;
}

#footer .f_box .f_cta ul {
display: block;
width: 320px;
text-align: center;
}

#footer .f_box .f_cta ul li {
display: inline-block;
width: 100%;
margin: 0 0 20px 0;
}

#footer .f_box .f_cta ul li:last-child {
margin-bottom: 0;
}

#footer .f_box .f_cta ul li a {
padding: 10px 0;
font-size: 22px;
}

#footer .f_box .f_logo {
max-width: 320px;
margin: 0 auto;
}

#footer .f_box .f_logo h4 {
padding: 0;
}

/*	main
--------------------------------------------------------------------*/
.txt_attention,
.pp_check {
padding: 1em 15px;
}

.sec_form > p {
padding-right: 25px;
padding-left: 25px;
}

.txt_attention li::before {
content: '※';
}

.txt_attention li.small_txt {
font-size: 12px;
}

.pp_check {
text-align: center;
}

.thanks_page {
margin:0 0 30px 0;
padding: 30px;
border: 1px #ccc solid;
text-align: center;
}

.thanks_page p {
font-size: 16px;
}

/*	form
--------------------------------------------------------------------*/
/* ----- form error message start ----- */
.sec_name .msg_required,
.sec_ruby .msg_required {
max-width: 240px;
}

.sec_name span:last-child .msg_required,
.sec_ruby span:last-child .msg_required {
left: auto;
}

.sec_address .msg_required {
bottom: -14px;
left: 0;
}

.select_birth > span .msg_required {
bottom: -35px;
left: 0;
}

.select_birth > span:nth-of-type(2) .msg_required,
.select_birth > span:nth-of-type(3) .msg_required {
left: auto;
}
/* ----- form error message end ----- */

.sec_form {
padding-bottom: 35px;
}

.sec_form dl {
display: -ms-flexbox;/* IE10 */
display: flex;
-ms-flex-wrap: wrap;/* IE10 */
flex-wrap: wrap;
padding-bottom: 35px;
}

.frm_customer_info,
.frm_property_info {
border-top: 1px solid #ccc;
}

.sec_form dt {
display: -ms-flexbox;/* IE10 */
display: flex;
-ms-flex-align: center;/* IE10 */
align-items: center;
-ms-flex-pack: justify;/* IE10 */
justify-content: space-between;
max-width: 300px;
width: 100%;
padding: 40px 25px;
border-bottom: 1px solid #ccc;
}

.frm_customer_info > dt,
.frm_property_info > dt {
background: #eee;
}

.sec_form dd {
position: relative;
max-width: 680px;
width: 100%;
padding: 40px 25px;
border-bottom: 1px solid #ccc;
}

.sec_name,
.sec_ruby,
.select_birth {
display: -ms-flexbox;/* IE10 */
display: flex;
justify-content: space-between;
}

.sec_name > span,
.sec_ruby > span {
max-width: 240px;
width: 100%;
}

.sec_name > span:last-child,
.sec_ruby > span:last-child {
margin-left: 15px;
}

.sec_form .sec_address {
padding-bottom: 0;
}

.sec_address dt,
.sec_address dd {
padding: 20px 0;
border: none;
}

.sec_address dt {
width: 20%;
}

.sec_address dd {
width: 80%;
}

.sec_address .prt_select::after {
top: -20px;
right: 15px;
}

.sec_address .ttl_post_num {
-webkit-box-direction: normal;/* Androidブラウザ用 */
-webkit-flex-direction: column;/* safari PC 用 */
flex-direction: column;
-ms-flex-pack: center;/* IE10 */
justify-content: center;
-ms-flex-align: start;/* IE10 */
align-items: flex-start;
}

.sec_address .ttl_build_name_num {
display: -ms-flexbox;/* IE10 */
display: flex;
-webkit-box-direction: normal;/* Androidブラウザ用 */
-webkit-flex-direction: column;/* safari PC 用 */
flex-direction: column;
-ms-flex-align: start;/* IE10 */
align-items: flex-start;
}

/*.btn_post_number {
display: inline-block;
padding: 3px;
background-color: #E8E8E8;
cursor: pointer;
}*/

.select_birth {
position: static;
}

.select_birth::after {
content: none;
}

.select_birth > span {
position: relative;
max-width: 180px;
width: 100%;
}

.select_birth > span::after {
content: '\f078';
position: absolute;
top: 0;
right: 20px;
font-family: 'FontAwesome';
font-size: 1.6rem;
color: #333;
pointer-events: none;
line-height: 55px;
}

.select_birth > span:not(:first-child) {
margin-left: 10px;
}

/*	check.php
--------------------------------------------------------------------*/
.form_check .sec_address dt {
font-weight: bold;
}

.btn_form {
display: -ms-flexbox;/* IE10 */
display: flex;
-ms-flex-pack: justify;/* IE10 */
justify-content: space-between;
}

.btn_form button {
width: 48%;
margin: 0;
}