/*
Theme Name: type-TN26
Author: TN
Version: 4.3, 2026.04
*/

@charset "UTF-8";



/*------------------------------------------------------------
	COLOR
------------------------------------------------------------ */
:root {
    --main: #3593DC;
    --sub: #C4A923;
    --bg1: #F7F7F4;
    --bg2: #f4fafc;
}


/*------------------------------------------------------------
	CUSTOM
------------------------------------------------------------ */
.home .service { background: var(--bg1);}
.sns3 { margin: 0 auto; padding: 6% 0; background: var(--bg2);}
.sns3 .col3 { width: 1100px; max-width: 90%; margin: 0 auto;}
.ins { position: relative; width:90%; max-width:1100px; margin:6% auto 0;}
.ins:last-of-type { margin-bottom: 6%;}
.btns { text-align: center!important;}
.btns a { position:relative; text-align:center; margin:2em 0; padding: .8em 2em; line-height: 1.3; display:inline-block; border-radius: 50px; color: #fff; font-size: 1.1em; background: var(--main); font-weight: 500; transition: all .2s ease-in-out;}
.btns a:hover { opacity: .7;}
.maps > div { margin: 0 auto 1em;}



footer h3 { width: 100%; margin-bottom: 15px; font-family: 'Montserrat', sans-serif; position: relative; padding-bottom: .4em; border-bottom: 1px solid #999; letter-spacing: 2px;}
footer .inner { justify-content: center;}
footer .fList { margin: 0 10% 0 0;}
footer .fList h3:before { display: none;}
footer .com li { margin-bottom: .4em;}
footer .common { margin-top: 2%;}

@media(max-width:767px) {
    .sns3 .col3 { flex-direction: column; align-items: center; justify-content: center;}
    footer .com { width: 100%; padding: 6% 5%; background: #333;}
    footer .com h3,
    footer .com li,
    footer .com li a { color: #fff;}
    footer .com li { font-size: 3.2vw;}
    footer .common { margin-top: 0;}

}


/*------------------------------------------------------------
	BREADCRUMB
------------------------------------------------------------ */
#breadcrumb { padding: .6em; background: #fff; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;}
#breadcrumb > div { display: flex; align-items: center; justify-content: flex-start; margin: 0 auto; font-size: .8em; line-height: 1.4em; width: 95%; margin: 0 auto;}
#breadcrumb > div, #breadcrumb a, #breadcrumb i { color: #ccc; }
#breadcrumb > div > i { margin: 0 .5em; }
#breadcrumb > div i { font-size: calc(1em + 3px); transition: all .2s ease-in-out;}
#breadcrumb > div a { display: block; position: relative; padding-right: .9em; margin-right: .5em;}
#breadcrumb > div a::after {
content: "\f105";
font-family: FontAwesome;
position: absolute;
top: 50%;
right: 0;
transform: translate(0%,-50%);
transition: all .2s ease-in-out;
color: #ccc;
display: block;
font-size: .9em;
}
#breadcrumb > div a i:hover, #breadcrumb > div a:hover { color: #666;}

@media(max-width:767px) {
    #breadcrumb { margin-top: 60px; padding: .6em 0;}
    #breadcrumb > div { font-size: 11px; flex-wrap: wrap; line-height: 1.2;}
    #breadcrumb > div a { padding-right: .8em; margin-right: .4em;}
    #breadcrumb > div a::after {font-size: 13px;}
}


/*------------------------------------------------------------
	RESERVATION
------------------------------------------------------------ */
.para-reservation .ins.reserveCal::before,
.jet-reservation .ins.reserveCal::before {
    content: "予約カレンダーの読み込み中";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: -1;
    color: var(--main);
    /* background: url(images/read_cal.png) 50% 0 no-repeat; */
    font-family: 'Noto Sans Japanese', sans-serif;
}
.para-reservation .ins input,
.jet-reservation .ins input {
    font-size: 16px;
    padding: .3em;
}
.rsCau { text-align: center; margin-top: 1em;}

button, [type="button"], [type="reset"], [type="submit"] { background:none; border:0; transition: all .2s ease-in-out; }
button:active { color:#fff; }
button { text-align: center!important; position:relative; text-align:center; margin:2.5em auto 0!important; padding: .85em 2em 1em; line-height: 1.3; display:inline-block; border-radius: 50px; color: #fff; font-size: 18px!important; background: #07b1d8; font-weight: bold!important; cursor: pointer; width: 28%!important; max-width: 90%; display: block;}
button:hover { opacity: .7;}
button.return_form_button { margin-top: 1em!important; background: #999;}
button.return_button { background: #999;}

.week_slot { background-color: #ddd!important;}
.calendarHeader { background: var(--sub);}
.calendarHeader .calendarData { color: #fff; text-shadow: 0 0 6px rgba(0,0,0,.5); font-weight: bold;}

#reservation .ins > p { padding-top: 2em;}

.reserveCal input,
.reserveCal textarea { font-size: 16px!important;}

.form-thanks h2 { text-align: center; margin-bottom: 1em;}
.form-thanks p:not(:first-of-type) { margin-top: 1.5em;}
.form-thanks p:first-of-type { text-align: center; margin-bottom: 5em;}
.form-thanks { }


/* BOOKING-PACKAGE */
#booking-package_inputFormPanel .row { display: flex; align-items: center; justify-content: space-between; padding: 1em 10px!important;}
#booking-package_inputFormPanel .row .name { width: 10em;}
#booking-package_inputFormPanel .row .value { width: calc(100% - 10.5em);}
#booking-package_inputFormPanel .form_text, #booking-package-loginform .form_text, #booking-package-user-form .form_text, #booking-package-user-edit-form .form_text { border-radius: 4px; padding: .5em!important;}
#booking-package_calendarPage .available_day:hover { background: #a7ddff!important;}
input#booking_package_input_zip { width: 5.5em!important;}
input#booking_package_input_male,
input#booking_package_input_female { width: 3em!important; margin-right: .5em!important;}
.service_name_cost span { font-weight: 700; margin-bottom: .3em; display: block;}
.descriptionOfService { font-size: calc(1em - 1px);}
#booking-package_inputFormPanel .name { font-weight: 700!important;}
#booking-package_schedulePage .closed { color: #d3d3d3!important;}
#booking-package input::placeholder { color: #ccc;}
#booking-package_inputFormPanel textarea { min-height: 8em;}
#booking-package_inputFormPanel .row .value .description { display: inline-block;}
#booking_package_totalCost .value { color: var(--main)!important; font-weight: bold;}
.addedAllServices .hidden_panel { display: block!important; color: #999; border-left: 4px solid #d6d6d6; padding-left: .8em; margin-top: .4em; font-size: calc(1em - 2px); display: none!important;}
#booking_package_totalNumberOfGuests .errorMessage { display: none!important;}
#booking-package_inputFormPanel select {
    position: relative;
    z-index: 1;
    line-height: 1.8;
    display: block;
    width: 100%;
    padding: .2em 1.2em;
    color:#333;
    font-size:16px;
    border: none;
    background-color: #f3f3f3;
    background-image: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor:pointer;
    border-radius: 8px;
    border: 1px solid #999!important;
}
#booking_package_totalNumberOfGuests .addedGuests_click { display: none;}
#booking_package_totalNumberOfGuests .costPerGuests.hidden_panel { display: block!important; color: var(--main)!important; margin: 0!important;}
#booking-package_inputFormPanel .maximumAndMinimum,
#booking-package_inputFormPanel .costPerGuests { display: none!important;}


#booking-package_inputFormPanel .error_empty_value, #booking-package_serviceDetails .error_empty_value, #booking-package-user-form .error_empty_value, #booking-package-user-edit-form .error_empty_value { background-color: #ffeaea!important;}
#booking-package_inputFormPanel .addedService_click, #booking-package_serviceDetails .addedService_click, #booking-package_myBookingDetailsFroVisitor .addedService_click, #booking-package_myBookingDetails .courseLinePanelInLink { color: var(--main)!important;}
#booking-package_inputFormPanel .addedGuests_click, #booking-package_serviceDetails .addedGuests_click, #booking-package_myBookingDetailsFroVisitor .addedGuests_click, #booking-package_myBookingDetails .addedGuests_click { color: var(--main)!important;}
#reservationHeader { color: #E74C3C!important; font-weight: bold!important;}


@media(max-width:767px) {
    #booking-package_inputFormPanel .row { flex-direction: column; align-items: flex-start;}
    #booking-package_inputFormPanel .row .required { margin-bottom: .2em;}
    #bottomPanel { display: flex; flex-direction: column;}
    #booking-package_inputFormPanel .row .required,
    #booking-package_inputFormPanel .row .value { width: 100%;}
    button { width: 90%!important;}
}


/*------------------------------------------------------------
	404
------------------------------------------------------------ */
.error404 h3,
.error404 p { text-align: center;}
.error404 h3 { margin-bottom: 1em; color: var(--main);}




/*------------------------------------------------------------
	320px
------------------------------------------------------------ */
@media(max-width:320px) {
.col2 li, .col2 li:nth-child(2n) { position:relative; width:94%; }
.blogs li p.cate { font-size:1.1rem; padding:.3em .6em; }
.small-container { padding-bottom: 200%; /* 高さ */ }
input[type="submit"], .inqBtn { font-size:1.6rem; }
img.logo { float:none !important; margin:0 auto 0; display:block; }
p.footInfo { padding:0; }
}

/*------------------------------------------------------------
	others
------------------------------------------------------------ */
@media(min-width:768px) {
	.onlySp { display:none !important; }
}
@media(max-width:767px) {
	.onlyPc { display:none !important; }
}
@media(max-width:411px) {
	.small-container { padding-bottom: 172%; /* 高さ */ }
}
@media (min-width: 751px) {
    a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
    }
}