﻿@charset "utf-8";


/* contents */
/* -------------------------------------------------------- */
/* ttl */
.ttl-01 {font-size:20px; text-align:left;}

/* btn */
.btn-01 {font-size:20px; line-height:1.2; text-align:center; text-decoration:none; color:#000; background-color:#fff; box-shadow:-1px -1px 2px 0px rgba(0,0,0,0.3) inset; border:solid 1px #666; border-radius:10px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; transition:background-color 0.3s ease;}
.btn-01:hover {background-color:#eee;}

/* list */
.list-01 {text-align:left;}
.list-01 dt {font-size:80%; padding:2px 10px; background-color:#eee; box-sizing:border-box;}
.list-01 dd {border-top:solid 1px #ccc;}
.list-01 dd a {padding:5px 5px 5px 20px; text-decoration:none; border-bottom:solid 1px #ccc; display:block;}

.list-02 {margin:-20px -10px 0 -10px; display:flex; flex-wrap:wrap;}
.list-02 > div {width:33.33%; padding:20px 10px 0 10px; box-sizing:border-box;}
.list-02 a {width:100%; height:3em;}

.list-03 {margin:0 -5px; display:flex; flex-wrap:wrap;}
.list-03 > div {width:25%; padding:10px 5px 0 5px; box-sizing:border-box;}
.list-03 a {text-decoration:none; border:solid 1px #ccc; box-sizing:border-box; display:block; position:relative; transition:opacity 0.3s ease;}
.list-03 a:hover {opacity:0.7;}
.list-03 a .name {width:100%; line-height:1.2; text-align:right; padding:2px 5px; background-color:rgba(255,255,255,0.8); box-sizing:border-box; position:absolute; bottom:0; left:0;}
.list-03 a .img {width:100%; padding:100% 0 0 0; background-repeat:no-repeat; background-position:center center; background-size:contain; display:block;}
.list-03 a .img.no-image {background:url(../img/no_image.svg) no-repeat center center; background-size:40% auto; opacity:0.3;}

@media screen and (max-width:767px){
	.list-02 > div {width:100%;}
	.list-03 > div {width:50%;}
}

/* splide */
.splide {width:100%; position:relative; overflow:hidden;}
.splide__list {}
.splide__arrows {}
.splide__arrows button {width:50px; height:50px; margin:-25px 0 0 0; padding:0; background-color:rgba(255,255,255,0.7); border:none; border-radius:100%; box-sizing:border-box; position:absolute; top:50%; z-index:5;}
.splide__arrows button.splide__arrow--prev {left:-25px;}
.splide__arrows button.splide__arrow--prev svg {right:3px; transform:scale(-1,1);}
.splide__arrows button.splide__arrow--next {right:-25px;}
.splide__arrows button.splide__arrow--next svg {left:3px;}
.splide__arrows button svg {width:20px; height:20px; margin:-10px 0 0 0; position:absolute; top:50%;}
.splide__pagination {width:100%; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; position:absolute; bottom:5px; left:0; z-index:5;}
.splide__pagination > li {padding:3px; box-sizing:border-box;}
.splide__pagination > li button {width:12px; height:12px; padding:0; background-color:rgba(0,0,0,0.7); border:solid 1px rgba(255,255,255,0.5); border-radius:100%; box-sizing:border-box; overflow:hidden;}
.splide__pagination > li button.is-active {background-color:rgba(0,0,0,1);}

/* modal */
body.modal #contents {padding:40px 10px 20px 10px;}
.modal-win {display:flex; justify-content:center; align-items:center; position:relative;}
.modal-win > div {width:320px; box-sizing:border-box;}
.modal-win .close.fix {width:40px; height:40px; background-color:#333; box-shadow:0 0 3px #333; border-radius:0 0 0 10px; position:fixed; top:0; right:0; cursor:pointer;}
.modal-win .close.fix::before,
.modal-win .close.fix::after {content:''; width:2px; height:70%; margin:0 0 0 -1px; background-color:#fff; border-radius:2px; display:block; position:absolute; top:15%; left:50%;}
.modal-win .close.fix::before {transform:rotate(45deg);}
.modal-win .close.fix::after {transform:rotate(-45deg);}

.form-section::before {content:''; width:100%; height:100%; background-color:rgba(255,255,255,0.7); display:block; position:fixed; top:0; left:0; opacity:0; pointer-events:none; z-index:400;}
.form-section::after {content:''; width:50px; height:50px; margin:-25px 0 0 -25px; background:url(../img/loading.svg) no-repeat center center; background-size:cover; display:block; position:fixed; top:50%; left:50%; opacity:0; pointer-events:none; z-index:410;}
.form-section.loading::before {opacity:1; pointer-events:auto; transition:opacity 0.3s ease;}
.form-section.loading::after {opacity:1; pointer-events:auto; transition:opacity 0.3s ease; animation:spinner 1.5s linear infinite;}
.form-section .form input,
.form-section .form select,
.form-section .form textarea {width:100%; font-size:16px; margin:0; padding:5px 10px; background:#fff; border-radius:3px; border:solid 1px #666; box-sizing:border-box;}
.form-section .form select {width:auto; padding:3px 0;}
.form-section .form textarea {height:6em;}
.form-section .form option {font-size:16px; padding:0;}
.form-section .form input.off,
.form-section .form select.off {pointer-events:none; opacity:0.3;}
.form-section .form input.error,
.form-section .form select.error {background-color:#fee;}
.form-section .form select option.off {display:none;}
.form-section .cert-code {margin:15px 0 0 0;}
.form-section .cert-code input {font-size:18px; font-weight:bold; letter-spacing:0.4em; text-align:center;}
.form-section .btn {text-align:center; margin:20px 0 0 0; display:flex; flex-wrap:wrap; justify-content:center;}
.form-section .btn button,
.form-section .btn .close {width:110px; height:40px; font-size:14px; font-weight:normal; letter-spacing:0.1em; text-align:center; text-decoration:none; color:#fff; margin:0 5px; background-color:rgba(0,0,139,1); border:none; border-radius:5px; display:flex; justify-content:center; align-items:center; transition:background-color 0.3s ease;}
.form-section .btn button:hover,
.form-section .btn .close:hover {background-color:rgba(0,0,139,0.7);}
.form-section .btn1 {margin:5px 0 0 0;}
.form-section .btn1 button {font-size:14px; padding:0; background:none; border:none;}
.form-section .btn1 button:hover {text-decoration:underline;}
.form-section .inputCheck {display:none;}
.form-section .error-txt {font-size:14px; color:#c00; margin:5px 0 0 0;}
.form-section .info {font-size:14px; text-align:center;}
@keyframes spinner {
	to {transform:rotate(360deg);}
}

.modal-login .form > div {margin:10px 0 0 0;}
.modal-login .form > div:first-of-type {margin-top:0;}
.modal-login .form input {width:100%; font-size:16px; padding:5px 10px; background:#fff; border-radius:3px; border:solid 1px #ccc; box-sizing:border-box;}
.modal-login .btn {text-align:center; margin:20px 0 0 0;}
.modal-login .btn button {width:120px; height:40px; font-size:14px; font-weight:normal; letter-spacing:0.1em; text-align:center; text-decoration:none; color:#fff; margin:0 auto; background-color:rgba(0,0,139,1); border:none; border-radius:5px; display:flex; justify-content:center; align-items:center; transition:background-color 0.3s ease;}
.modal-login .btn button:hover {background-color:rgba(0,0,139,0.7);}
.modal-login .btn button.off {pointer-events:none;}
.modal-login .txt {font-size:14px; text-align:center; margin:20px 0 0 0;}
.modal-login .txt a {text-decoration:none;}
.modal-login .txt a:hover {text-decoration:underline;}

.modal-reissue .form dl {text-align:left;}
.modal-reissue .form > dl:first-of-type dt {margin-top:0;}
.modal-reissue .form dt {font-size:14px; margin:10px 0 0 0; color:#fff; padding:0 0.5em; background-color:#333; border-radius:3px;}
.modal-reissue .form dd {margin:5px 0 0 0;}
.modal-reissue .btn button {width:160px;}
.modal-reissue .clm1 > div {margin:5px 0 0 0;}
.modal-reissue .clm1 > div:first-of-type {margin-top:0;}

.modal-entry .form dl {text-align:left;}
.modal-entry .form > dl:first-of-type dt {margin-top:0;}
.modal-entry .form dt {font-size:14px; margin:10px 0 0 0; color:#fff; padding:0 0.5em; background-color:#333; border-radius:3px;}
.modal-entry .form dd {margin:5px 0 0 0;}
.modal-entry .clm1 {display:flex; align-items:center;}
.modal-entry .clm1 > div {width:8em; margin:0 0.5em 0 0; box-sizing:border-box;}
.modal-entry .clm2 > div {margin:5px 0 0 0;}
.modal-entry .clm2 > div:first-of-type {width:8em; margin-top:0;}
.modal-entry .clm3 > div {margin:5px 0 0 0;}
.modal-entry .clm3 > div:first-of-type {margin-top:0;}

.modal-rsv > div > div {padding:20px;}
.modal-rsv .form dl {text-align:left;}
.modal-rsv .form > dl:first-of-type dt {margin-top:0;}
.modal-rsv .form dt {font-size:14px; margin:10px 0 0 0; color:#fff; padding:0 0.5em; background-color:#333; border-radius:3px;}
.modal-rsv .form dd {margin:5px 0 0 0;}
.modal-rsv .clm1 {margin:-5px 0 0 0; display:flex; flex-wrap:wrap; align-items:center;}
.modal-rsv .clm1 > div {margin:5px 0 0 0; display:flex; align-items:center; box-sizing:border-box;}
.modal-rsv .clm1 > div > div {box-sizing:border-box;}
.modal-rsv .clm1 > div:nth-of-type(2) {padding:0 0.5em;}
.modal-rsv .clm1 > div > div:nth-of-type(1) {width:8em; padding:0 0.3em 0 0;}
.modal-rsv .clm1 :placeholder-shown {color:#000;}
.modal-rsv .clm1 ::-webkit-input-placeholder {color:#000;}
.modal-rsv .clm1 :-moz-placeholder {color:#000; opacity:1;}
.modal-rsv .clm1 ::-moz-placeholder {color:#000; opacity:1;}
.modal-rsv .clm1 :-ms-input-placeholder {color:#000;}
.modal-rsv .clm2 {display:flex; flex-wrap:wrap; align-items:center;}
.modal-rsv .clm2 > div {display:flex; align-items:center; padding:0 0 0 1em; box-sizing:border-box;}
.modal-rsv .clm2 > div:first-of-type {padding-left:0;}
.modal-rsv .clm2 > div > div {white-space:nowrap; box-sizing:border-box;}
.modal-rsv .clm2 > div > div:nth-of-type(2) {width:4em; padding:0 0.3em;}

.modal-reconfirm .form > div {margin:10px 0 0 0;}
.modal-reconfirm .form > div:first-of-type {margin-top:0;}
.modal-reconfirm .txt > p {font-size:14px; line-height:1.2; text-align:center; margin:15px 0 0 0;}
.modal-reconfirm .txt > p:first-of-type {margin-top:0;}
.modal-reconfirm .txt > p > span {font-size:120%;}
.modal-reconfirm .info_txt {font-size:12px; text-align:center; color:#c00; margin:10px 0 0 0;}

@media screen and (max-width:767px){
	.modal-win {padding:4.0vw;}
	.modal-win .close {width:30px; height:30px;}
	.modal-entry > div > div {padding:4.0vw;}
	.modal-rsv > div > div {padding:4.0vw;}
}

/* item */
.car-rental .sec {padding-left:0;}
.nursing-care-rental .sec {padding-left:0;}
.item-clm {display:flex;}
.item-clm .item-list {width:210px; padding:0 30px 0 0; box-sizing:border-box;}
.item-clm .item-detail {box-sizing:border-box; flex:1;}
.item-clm .item-rsv {width:270px; padding:0 0 0 30px; box-sizing:border-box;}

.item-rsv .form dl {text-align:left; margin:15px 0 0 0;}
.item-rsv .form dl:first-of-type {margin-top:0;}
.item-rsv .clm1 {display:flex; flex-wrap:wrap; align-items:center;}
.item-rsv .clm1 > div {display:flex; align-items:center;}
.item-rsv .clm1 > div > div {box-sizing:border-box;}
.item-rsv .clm1 > div > div:nth-of-type(1) {padding:0 0.3em 0 0; flex:1;}
.item-rsv .clm1 > div:nth-of-type(2) {width:100%; line-height:1; text-align:center; display:block;}
.item-rsv .clm1 :placeholder-shown {color:#000;}
.item-rsv .clm1 ::-webkit-input-placeholder {color:#000;}
.item-rsv .clm1 :-moz-placeholder {color:#000; opacity:1;}
.item-rsv .clm1 ::-moz-placeholder {color:#000; opacity:1;}
.item-rsv .clm1 :-ms-input-placeholder {color:#000;}
.item-rsv .clm2 {font-size:80%; text-align:left; padding:2px 10px; background-color:#eee;}
.item-rsv::before {content:''; width:100%; height:100%; background-color:rgba(255,255,255,0.7); display:block; position:absolute; top:0; left:0; opacity:0; pointer-events:none; z-index:10;}
.item-rsv::after {content:''; width:50px; height:50px; margin:-25px 0 0 -25px; background:url(../img/loading.svg) no-repeat center center; background-size:cover; display:block; position:absolute; top:50%; left:50%; opacity:0; pointer-events:none; z-index:10;}
.item-rsv.loading > div::before {opacity:1; pointer-events:auto; transition:opacity 0.3s ease;}
.item-rsv.loading > div::after {opacity:1; pointer-events:auto; transition:opacity 0.3s ease; animation:spinner 1.5s linear infinite;}

.item-detail .ttl {font-size:20px; text-align:left;}
.item-detail .ttl span {font-size:80%;}
.item-detail .imgs {margin:30px 0 0 0;}
.item-detail .point {text-align:left; margin:15px 0 0 0;}
.item-detail .capacity {text-align:left; margin:15px 0 0 0;}
.item-detail .option {margin:0 -3px; display:flex; flex-wrap:wrap;}
.item-detail .option > div {font-size:12px; line-height:1; margin:6px 3px 0 3px; padding:3px 5px; border:solid 1px #333; border-radius:3px;}
.item-detail .cost {text-align:right; margin:30px 0 0 0; padding:10px; background-color:#eee; border-radius:5px;}
.item-detail .cost dt {font-size:80%; font-weight:bold; padding:0 0 5px 0;}
.item-detail .cost dd:nth-of-type(1) {font-size:120%; font-weight:bold; line-height:1.2;}
.item-detail .cost dd.note {font-size:80%; margin:5px 0 0 0;}
.item-detail .modal-win {display:block;}
.item-detail .modal-win > div {width:auto; padding:0;}
.item-detail .modal-win .close.fix {display:none;}
.item-detail .rsv-num {font-size:18px; font-weight:bold; margin:15px 0 0 0; padding:5px; background-color:#eee; box-sizing:border-box; border-radius:3px;}
.item-detail .btn a {height:3em;}

@media screen and (max-width:767px){
	.car-rental .sec {padding:0 4.0vw;}
	.nursing-care-rental .sec {padding:0 4.0vw;}
	.item-clm {display:block;}
	.item-clm .item-list {width:auto; padding:0;}
	.item-clm .item-detail {padding:30px 0;}
	.item-clm .item-rsv {width:auto; padding:0;}
}

/* contact */
.contact-sec {text-align:left;}
.contact-sec form {max-width:700px; margin:30px auto 0 auto; display:block;}
.contact-sec form::before {content:''; width:100%; height:100%; background-color:rgba(255,255,255,0.7); display:block; position:fixed; top:0; left:0; opacity:0; pointer-events:none; z-index:998;}
.contact-sec form::after {content:''; width:50px; height:50px; margin:-25px 0 0 -25px; background:url(../img/loading.svg) no-repeat center center; background-size:cover; display:block; position:fixed; top:50%; left:50%; opacity:0; pointer-events:none; z-index:999;}
.contact-sec form.loading::before {opacity:1; pointer-events:auto; transition:opacity 0.3s ease;}
.contact-sec form.loading::after {opacity:1; pointer-events:auto; transition:opacity 0.3s ease; animation:spinner 1.5s linear infinite;}
.contact-sec .form > dl {padding:20px 0; display:flex;}
.contact-sec .form > dl > dt {width:10em;}
.contact-sec .form > dl > dd {box-sizing:border-box; flex:1;}
.contact-sec .form input[type=text],
.contact-sec .form input[type=password],
.contact-sec .form select,
.contact-sec .form textarea {width:100%; font-size:16px; padding:10px; background:#fff; border-radius:3px; border:solid 1px #666; box-sizing:border-box;}
.contact-sec .form select {width:auto;}
.contact-sec .form textarea {height:6em;}
.contact-sec .form input.error,
.contact-sec .form select.error,
.contact-sec .form textarea.error {background-color:#fee;}
.contact-sec .form .address-clm > div {margin:10px 0 0 0;}
.contact-sec .form .address-clm > div:first-of-type {width:8em; margin-top:0;}
.contact-sec .btns {text-align:center; margin:30px 0 0 0; display:flex; flex-wrap:wrap; justify-content:center;}
.contact-sec .btns > li {padding:5px 10px;}
.contact-sec .btns button {width:10em; height:3em;}
.contact-sec .erro-txt {color:#c00; margin:5px 0 0 0;}
.contact-sec input.inputCheck {display:none;}

@media screen and (max-width:767px){
	.contact-sec .form > dl {display:block;}
	.contact-sec .form > dl > dt {width:auto;}
}

