@charset "utf-8";



/*
 title
---------------------------------------------------------------------- */
.h2title { margin:0 0 15px 0;}
.h2title h2 { font-weight:800; font-size:46px; border-left:solid 2px #386474; padding:0 0 0 30px; margin:0 auto; width:1120px;}

.h3title { margin:0 0 15px 0;}
.h3title h3 { font-weight:600; font-size:42px; color: #386474; border-left:solid 2px #386474; padding:0 0 0 16px; margin:0 auto; width:1120px;}
.h4title { margin:24px 0 24px 0;}
.h4title h4 { font-weight:600; font-size:34px; color: #3C3C3C; margin:0 auto;}
.h4title.complete { margin:52px 0 52px 0; }
.h4title.complete h4 { color: #386474; }

.pagetitle { margin-bottom:80px;}

@media only screen and (max-width: 768px) {
    .h2title { margin:0 0 5px 0;}
    .h2title h2 { font-weight:800; font-size:28px; border-left:solid 2px #386474; padding:0 0 0 20px; margin:0 auto; width:auto;}
    .h3title { margin:0 0 5px 0;}
    .h3title h3 { font-weight:500; font-size:26px; border-left:solid 2px #386474; padding:0 0 0 12px; margin:0 auto; width:auto;}
    .h4title h4 { font-weight:500; font-size:24px;}
    .pagetitle { margin-bottom:50px;}
}


/*
 メディア
---------------------------------------------------------------------- */
.media { margin:auto;display:flex; justify-content:center; align-items:center; position:relative; }
.media-image-wrapper { max-width:44%; margin:0; position:absolute; top:10px; left:10px; margin-right:10px; z-index:1; }
.media-border-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -10px;
    left: -10px;
    border: 2px solid #386474;
    z-index: 2;
}
.media-img { width:100%; height:auto; }
.media-body { width:80%; height:300px; background-color:#386474; display:flex; justify-content:flex-end; margin-top:32px; box-sizing:border-box;}
.media-body-content { width: 54%; overflow: scroll; padding-top:24px; padding-right:24px; padding-bottom:24px; box-sizing:border-box; }

.media-title-wrapper { margin-bottom: 12px; }
.media-title { font-size:24px; color:#fff; border-bottom:1px #fff solid; padding-bottom:12px; }
.media-text { color:#fff; margin:0; }

/* 左右反転 */
.media-reverse { }
.media-reverse .media-image-wrapper { position:absolute; left:auto; right:0; margin-right:0; margin-left:10px; }
.media-reverse .media-border-box { position: absolute; left:auto; right:-10px; }
.media-reverse .media-body { justify-content:flex-start; }
.media-reverse .media-body-content { padding-right:0; padding-left:24px; }


/*
 下層ヘッダー
---------------------------------------------------------------------- */
.detail_h {
    height: 350px;
    margin-bottom: 50px;
    margin-top: 0px;
}
.detail_h .inner { position:relative; height:100%; width:100%;}
.detail_h .inner h2 {
	position:absolute; left:50%; top:70%; color:#386474; font-size:46px; font-weight:700; line-height:150%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
	text-align:center;
}
.detail_h h2 span { font-size:40%; display:block; color:#386474;}
.detail_h__lead p { font-size:18px; line-height:1.5; font-weight:bold;}
.detail_h.boothbg, .detail_h.guidebg, .detail_h.pricebg, .detail_h.contactbg, .detail_h.companybg, .detail_h.guidelinebg { background:url(img/bg_detail_common.jpg) no-repeat;}

@media only screen and (max-width: 768px) {
    .detail_h {
        height: 120px !important;
        margin-bottom: 50px;
        margin-top: 0px;
        position:relative;
    }
    .detail_h .inner h2 {
        position:absolute; left:50%; top:110%; color:#386474; font-size:28px; font-weight:500; line-height:150%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
        text-align:center; width:100%;
    }
    .detail_h h2 span { font-size:40%; display:block;}
}


/*
画像
---------------------------------------------------------------------- */
img.rab {
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}
.img_c { width:100%; margin:0 auto 20px auto;}
.img_c200 { width:auto; max-width:200px;  margin:0 auto 0 auto;}
.img_c800 { width:auto; max-width:800px;  margin:0 auto 0 auto;}
.img_c365 { width:auto; max-width:365px;  margin:0 auto 0 auto;}
.img_c490 { width:auto; max-width:490px;  margin:0 auto 0 auto;}
.img_c632 { width:auto; max-width:632px;  margin:0 auto 0 auto;}
.img_c300 { width:auto; max-width:300px;  margin:0 auto 0 auto;}
.img_c500 { width:auto; max-width:500px;  margin:0 auto 0 auto;}
.img_c534 { width:auto; max-width:534px;  margin:0 auto 0 auto;}
.img_c530 { width:auto; max-width:530px;  margin:0 auto 0 auto;}
.img_c550 { width:auto; max-width:550px;  margin:0 auto 0 auto;}
.img_c640 { width:100%; max-width:640px;  margin:0 auto 0 auto;}
.img_r { width:40%; margin:0 0 20px 30px; float:right;}
.img_l264 { width:50%; max-width:264px; margin:0 20px 20px 0; float:left;}
.img_l { width:35%; margin:0 30px 20px 0; float:left;}
.img_l300 { width:35%; margin:0 5% 20px 0; float:left;}

.img_c365 img,
.img_c800 img,
.img_c490 img,
.img_c200 img,
.img_l300 img,
.img_c500 img,
.img_c534 img,
.img_c530 img,
.img_c300 img,
.img_c640 img,
.img_c550 img,
.img_c632 img,
.img_c img,
.img_l264 img,
.img_r img,
.img_l img {width:100%!important;}


#popup-background{
    position:fixed;     /* 位置の固定 */
    top: 0;             /* 表示位置 */
    left: 0;            /* 表示位置 */
    height: 100%;       /* 画面全体に表示 */
    width: 100%;        /* 画面全体に表示 */
    background:#000;    /* 背景色 */
    opacity: 0.60;      /* 透明度 */
    margin: 0;          /* 余白の削除 */
    padding: 0;         /* 余白の削除 */
    z-index:1000;       /* 要素のz座標 */
    display: none;
}
#popup-item{
    position:fixed;     /* 位置の固定 */
    top: 50%;           /* 表示位置(真ん中に表示) */
    left: 50%;          /* 表示位置(真ん中に表示) */
    margin: 0;          /* 余白の削除 */
    padding: 0;         /* 余白の削除 */
    z-index:1001;       /* 要素のz座標 */
}


/*
テーブル
---------------------------------------------------------------------- */
/*table*/
table.tbl1 { width:100%;}
table.tbl1 th,table.tbl1 td { padding:35px 20px; border-bottom:1px solid #ccc; border-top:1px solid #ccc; font-size:18px; text-align:left; line-height:180%; margin-top:-1px; box-sizing:border-box;}
table.tbl1 th { width:30%; font-weight:500;}
table.tbl1 td {}

table.tbl2 { width:100%; font-size:100%; color:#000;}
table.tbl2 th,table.tbl2 td { border:1px solid #ccc; padding:40px 25px; vertical-align:middle; line-height:180%;}
table.tbl2 th { background:#efefef; width:25%; font-size:110%; font-weight:600;}
table.tbl2 td {}

table.tbl3 { width:100%; font-size:100%; }
table.tbl3 th,table.tbl3 td { border:1px solid #ccc; padding:12px 15px; vertical-align:middle; line-height:180%;}
table.tbl3 th { background:#efefef; width:25%; font-size:110%; font-weight:600; }
table.tbl3 td { }

table.tbl4 { width:100%; font-size:90%; color:#000;}
table.tbl4 th,table.tbl4 td { border:1px solid #ccc; padding:12px 8px; vertical-align:middle; line-height:150%;}
table.tbl4 th { background:#efefef; width:55%; font-weight:600;}
table.tbl4 td { text-align:center;}

table.tbl5 { width:100% !important;}
table.tbl5 th,table.tbl5 td { border:1px solid #ccc; padding:12px 8px; vertical-align:middle; line-height:150%;}
table.tbl5 th { background:#efefef; width:50%; font-weight:600; text-align:center;}
table.tbl5 td { text-align:center;}

table.tbl-price { width:100%; font-size:90%;}
table.tbl-price th,table.tbl-price td { border:1px solid #ccc; padding:12px 8px; vertical-align:middle; line-height:150%;}

table.tbl-price thead th { width:20%; background:#efefef; font-weight:600; text-align:center;}

table.tbl-price tbody th { background:#efefef; font-weight:600; padding:12px 15px;}
table.tbl-price tbody th span { display:block; font-size:90%; font-weight:300;}
table.tbl-price tbody td { text-align:center;}
table.tbl-price tfoot td { border: none;}


@media screen and (max-width: 768px) {
    /*table*/
    table.tbl1 { width:100%;}
    table.tbl1 th,table.tbl1 td { padding:25px 5px; border-bottom:1px solid #ccc; border-top:1px solid #ccc; font-size:16px; display:block; width:100%;}
    table.tbl1 th { width:auto; text-align:center; padding:15px 5px;}
    table.tbl1td {}
    table.tbl2 th,table.tbl2 td {padding:30px 15px; vertical-align:middle; width:100%; display:block; margin-top:-1px; box-sizing:border-box;}
    table.tbl2 th {width:100%; line-height:150%;}
    table.tbl2 td {line-height:180%;}
    table.tbl3 { width:100%;}
    table.tbl3 th,table.tbl3 td {width:100%; display:block; margin-top:-1px; box-sizing:border-box;}
    table.tbl3 th {width:100%; line-height:150%;}
    table.tbl3 td {}
    table.tbl-price th,table.tbl-price td { border:1px solid #ccc; padding:8px 5px; vertical-align:middle; line-height:150%; text-align:center;}
    table.tbl-price tbody th { background:#efefef; font-weight:600; padding:8px 5px;}
}


/*
ラインナップ
---------------------------------------------------------------------- */
.booth-detail { width:90%; margin:0 5% 50px 5%;}
.booth-detail .left { float:left; width:47.5%; margin:0 2.5% 0 0;}
.booth-detail .right { float:right; width:47.5%; margin:0 0 0 2.5%;}
.booth-detail .left img,.booth-detail .right img { width:100%;}
.booth-detail-txt { line-height:180%; font-size:110%; margin:0 0 30px 0;}

ul.list3 {}
ul.list3 li { float:left; width:33.333333333333333333333%;}
ul.list3 li img { width:100%;}
ul.detail-list {}
ul.detail-list li { width:23%; margin:0 1% 1% 1%; float:left; border:2px solid #386474; color:#386474; text-align:center; box-sizing:border-box; padding:10px 2px; font-size:85%; border-radius:99px;}
p.price-t { text-align:center; font-weight:600; font-size:24px; margin:20px auto;}


@media screen and (max-width: 768px) {
    .booth-detail .left { float:none; width:100%; margin:0 0 15px 0;}
    .booth-detail .right { float:none; width:100%; margin:0 0 15px 0;}
    .booth-detail-txt {line-height:180%; font-size:90%; margin:0 0 30px 0;}
    ul.list3 {}
    ul.list3 li { float:nonr; width:100%;}
    ul.detail-list li { width:80%; margin:0 10% 5px 10%; padding:10px 2px; font-size:80%; float:none;}
    p.price-t { font-size:16px;}
}


/*
ガイド
---------------------------------------------------------------------- */
.flow { position:relative; width:800px; margin:auto;}
.flow-left { float:left; font-weight:600; font-size:90px; color:#3d712f; line-height:70%; text-align:center; width:25%; box-sizing: border-box;}
.flow-left span { font-size:30%; display:block; font-weight:600; letter-spacing:3px;}
.flow-right { float:left; width:75%; box-sizing: border-box;}
.flow-title { color: #3C3C3C; font-weight:500; font-size:36px; margin:0 0 16px 0;}
.flow-txt { font-size:120%; line-height:160%; word-break: break-word;}
.flow-ps { margin:20px 0 0 0;}
.flow-ps a { color:#cc0000; font-size:120%; font-weight:600;}
.flow-left img { width:80px; height: auto; }
.flow-arrow img { width:44px; height: auto; }

.flow.f-last::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border: none;
    border-top: none;
}

.flow-arrow { text-align: center; margin-top: 32px; margin-bottom: 32px;}


@media screen and (max-width: 768px) {
    .flow { position:relative; width:100%; margin:auto; margin-top:80px;}
    .flow-left {font-size:52px; width:30%;}
    .flow-right {width:70%;}
    .flow-title {font-size:24px;}
    .flow-txt {font-size:100%; line-height:160%; color:#444; word-break: break-word;}
}

@media screen and (max-width: 576px) {
    .flow {margin-top: 56px;}
    .flow-left img {width:60px;}
    .flow-right {padding-left: 8px; padding-right: 8px;}
}


/*
map
---------------------------------------------------------------------- */
.gmap {
    position: relative;
    padding-bottom: 25%; /* これが縦横比 */
    height: 0;
    overflow: hidden;
    margin: 0 0 0 0;
}
.gmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border:0 !important;
}

@media screen and (max-width: 768px) {
    .gmap { padding-bottom: 90%; /* これが縦横比 */ }
}


/*
ボタン
---------------------------------------------------------------------- */
.btn { margin-top:20px;}
.btn a {
    display: block;
    padding: 30px 10px;
    text-align: center;
    color: #386474;
    background: #fff;
    position:relative;
    text-decoration:none;
    border-radius: 100px;
    font-size:120%;
}

.btn2 {margin-top:10px; position: relative;}
.btndetail { width:300px; height:auto; text-align:center;}
.btn4 a {
    display: block;
    padding: 30px 5px 30px 5px;
    background:#386474;
    text-align: center;
    width:40%;
    margin:auto;
    color:#fff;
    position:relative;
    cursor: pointer;
    text-decoration: none;
    border-radius: 100px;
    font-size:120%;
}

.btn-box { margin:20px 0 0 0;}
.btn-reserve { width:45%;}
.btn-reserve { float:right;}
.btn-reserve a {
    display: block;
    padding: 9px 5px 11px 5px;
    text-align: center;
    color: #386474 !important;
    background: #fff;
    position:relative;
    text-decoration:none;
    border: #386474 2px solid;
    border-radius: 100px;
    font-size:100%;
}

.btn-detail a:hover,
.btn-reserve a:hover,
.btn a:hover,
.btn2:hover,
.btn2 a:hover,
.btn3:hover,
.btn3 a:hover,
.btn_detail2 a:hover a,
.btn_detail3 a:hover a,
.btn_detail a:hover {
    text-decoration: none;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha( opacity=80 )";
    *zoom: 1;
    cursor:pointer;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all  0.6s ease;
}

/* btサイズ指定の場合 */
.btn_detail a {
    width: 53%;
    margin: 0;
    text-decoration: none;
    box-shadow: 0px 3px 10px rgba(0,0,0,0.15);
    -webkit-box-shadow: 0px 3px 10px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 3px 10px rgba(0,0,0,0.15);
}

.btn a::before {
    position:absolute;
    content: url(img/tell-btn3.png);
    display: inline-block;
    left:-20px;
    top:-30px;
}
.btn a::after {
    position:absolute;
    content: "";
    background-image: url(img/tell-btn4.png);
    background-size: cover;
    width: 17px;
    height: 24px;
    display: inline-block;
    left:80%;
    margin-top:1px;
}

@media screen and (max-width: 992px) {
    .btn a::after {left: 92%;}
}

@media screen and (max-width: 768px) {
    .btn a {
        display: block;
        padding: 25px 5px;
        text-align: center;
        color: #386474;
        background: #fff;
        position:relative;
        text-decoration:none;
        border-radius: 100px;
        font-size:14px;
    }
    .btn a::before {
        position:absolute;
        content: '';/*何も入れない*/
        display: inline-block;/*忘れずに！*/
        width: 80px;/*画像の幅*/
        height: 80px;/*画像の高さ*/
        background: url(img/tell-btn3.png) no-repeat;
        background-size: contain;
        vertical-align: middle;
        left:-20px;
        top:-30px;  
    }
    
    .btn a::after {height: 16px; width: 12px; left: 80%;}
    .btn3 a::after, .btn2 a::after {right:56px;}
}




/*
お問合せ
---------------------------------------------------------------------- */

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}



table.tbl_contact { width:100%; margin:0 0 50px 0; box-sizing: border-box;}
table.tbl_contact tr {
    display: block;
    width: 100%;
    padding: 40px 60px;
    border-top: 1px solid #dcdcdc;
    box-sizing: border-box;
}

table.tbl_contact tr:last-of-type {
    border-bottom: 1px solid #dcdcdc;
}
table.tbl_contact th {
    width: 250px;
    font-size: 110%;
    font-weight: bold;
    text-align: left;
    vertical-align: top;
	line-height:1.5;
}
table.tbl_contact th span {
	background:#cc0000;
	font-size:8px;
	color:#fff;
	padding:3px 10px;
	border-radius: 10px;
	line-height:0px;
	vertical-align: middle;
	}
table.tbl_contact td {
    font-size: 100%;
    text-align: left;
    vertical-align: top;
	line-height:1.5;
	background:#ccc;
	width:700px;
}
table.tbl_contact td span.comment {
    display: block;
    margin-top: 10px;
    font-size: 1.4rem;
}
.btn_contact { text-align:center; margin:0 0 100px 0;}
.btn_contact img { display: inline-block; width: 360px; height: auto; }

@media screen and (max-width: 576px) {
    .btn_contact img {width: 70%;}
}

.m-form-text {
    height: 3em;
    width: 100%;
    padding: 0 16px;
    border-radius: 4px;
    border: none;
    box-sizing:border-box;
    box-shadow: 0 0 0 1px #ccc inset;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.m-form-text:focus {
    outline: 0;
    box-shadow: 0 0 0 2px rgb(33, 150, 243) inset;
}

.m-form-item-textarea textarea {
    height: 300px;
}

.m-form-textarea {
    display: block;
    height: 200px;
    width: 100%;
    padding: 16px;
    border-radius: 4px;
    border: none;
    box-shadow: 0 0 0 1px #ccc inset;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    resize: vertical;
    box-sizing:border-box;
}

.m-form-textarea:focus {
    outline: 0;
    box-shadow: 0 0 0 2px rgb(33, 150, 243) inset;
}

.el_btn {
  font-size:110%;
  letter-spacing:2px;
}
input::placeholder,
textarea::placeholder {
  color: #d5d5d5;
}


table.tbl_contact tr td {
    background:none !important;
}

.el_btn {
    display: inline-block;
    width: 280px;
    max-width: 100%;
    padding: 18px 10px;
    background-color: #386474;;
    border: 2px solid transparent;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: 0.25s;
    border-radius: 100px!important;
}
table.tbl_contact td textarea {font-size: 120%;}

@media screen and (max-width: 768px) {
    table.tbl_contact { width:100%; margin:0 0 50px 0; box-sizing:border-box;}
    table.tbl_contact tr {
        display: block;
        width: 100%;
        padding: 0;
        border-top: 1px solid #dcdcdc;
        box-sizing:border-box;
    }
    table.tbl_contact tr:last-of-type {
        border-bottom: 1px solid #dcdcdc;
    }
    table.tbl_contact tr th,table.tbl_contact tr td {
        width:100%!important; display:block; background:none !important; box-sizing:border-box;
    }
    table.tbl_contact th {
    padding:20px 20px 0 20px; font-size:18px;
    }
    table.tbl_contact th span {
        font-size:8px;
        color:#fff;
        padding:3px 10px;
        border-radius: 10px;
        line-height:0px;
        vertical-align: middle;
    }
    table.tbl_contact td {
        padding:20px 20px 20px 20px;
    }
    table.tbl_contact td span.comment {
        display: block;
        margin-top: 10px;
        font-size: 1.4rem;
    }
}

#formWrap {
	width:800px;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}
#formWrap h4.t4 { text-align:center; font-size:28px; font-weight:700; margin:20px 0;}
table.formTable{
	width:100%;
	margin:10px auto 20px auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}
p.error_messe{
	margin:5px 0;
	color:red;
}

#formWrap input.btn {

    padding: 8px 5px 10px 5px;
    text-align: center;
    color: #fff;
    background: #990000;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
	text-shadow:none!important;
	outline: none!important;
	border: none;
	width:200px;
	margin:0 20px 0 0;
}
#formWrap input.btndown {
	margin:0 0 15px 20px;
    padding: 8px;
	width:150px;
	font-size:90%;
}


/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:768px) {
    #formWrap {
        width:95%;
        margin:0 auto;
    }
    table.formTable th, table.formTable td {
        width:auto;
        display:block;
    }
    table.formTable th {
        margin-top:5px;
        border-bottom:0;
    }

    #formWrap input.btn {
        display: block;
        width:250px;
        margin:0 0 15px 0;
    }
    #formWrap input.btndown {
        margin:15px 0 15px 0;
        width:150px;
        font-size:90%;
    }
}


/*
予約
---------------------------------------------------------------------- */

/*カレンダー*/


/* レンタル期間入力 */
#mtsrcb-entry-date,
#mtsrcb-entry-calendar {
    margin-bottom: 1.2em;
}

.action-row.description {
    margin-bottom: 1em;
}

.date-entry.focused {
    background-color: #fafad2;
}

.rental-date-box {
    display: inline-block;
    margin-bottom: 0.7em;
    width: 40%;
}

.date-box-date,
.date-box-time {
    margin-bottom: 0.3em;
}

.form-addchr {
    margin: 0 0.2em;
}

#rental-date-arrow {
    display: inline-block;
    font-size: 1.5em;
    margin: 0 0.5em;
    vertical-align: 50%;
}

/* カレンダー切替 */
#change-calendar-pain {
    margin-bottom: 0.5em;
}

.calendar-button,
.calendar-title {
    display: inline-block;
}

#calendar-link-title {
    display: none;
}

.calendar-button input:disabled {
    background-color: #cccccc;
}

/* 車両予約カレンダー */
.schedule-calendar {
    color: #3C3C3C;
}

.schedule-calendar.month-2 {
    display: inline-block;
    margin-right: 0.2em;
    vertical-align: top;
    width: 49%;
}

.schedule-calendar.month-3 {
    display: inline-block;
    margin-right: 0.1em;
    vertical-align: top;
    width: 32%;
}

.schedule-calendar table {
    width: 100%;
}

.schedule-calendar th,
.schedule-calendar td {
    border: 1px solid #cccccc;
    padding: 0.3em;
    text-align: center;
    width: 14%;
}

.schedule-calendar th:first-child,
.schedule-calendar th:last-child,
.schedule-calendar td:first-child,
.schedule-calendar td:last-child {
    padding: 0.3em;
}

.schedule-calendar td {
    vertical-align: top;
}

.caption-prev {
    float: left;
}

.caption-title {
    display: inline-block;
}

.caption-next {
    float: right;
}

.day-number {
    text-align: right;
}

.day-note {
    font-size: 0.5em;
}

td.no-day {
    background-color: #e8e8e8;
}

td.available {
    cursor: pointer;
}

td.today {
    background-color: #fafad2;
}

td.clicked_day {
    background-color: lightblue;;
}

th.sat,
.sat .day-number {
    color: blue;
}

th.sun,
.sun .day-number,
.holiday .day-number {
    color: red;
}

#alter-day-season.high,
td.high-season>.day-number {
    background-color: #ffccff;
}

#alter-day-season.low,
td.low-season>.day-number {
    background-color: #ccffff;
}

/* レンタル期間選択 */


/* 予約フォーム期間・車両 */
.rental-form-block {
    margin-bottom: 1.5em;
}

.rental-vehicle {
    font-size: 1.15em;
    margin-bottom: 0.5em;
}

.rental-period-date {
    display: inline-block;
    text-align: center;
}

.rental-period-day,
.rental-period-time {
    display: block;
}

.rental-period-arrow {
    display: inline-block;
    font-size: 1.5em;
    margin: 0 0.5em;
    vertical-align: 25%;
}

.rental-option-label {
    display: inline-block;
    margin: 0 1em 0 0;
}

.rental-option-list input {
    margin-right: 0.3em;
}

.customer-name-item,
.customer-address-item {
    margin-right: 0.5em;
}

.date_container span img {
    margin-right: 8px;
}

/* 開始・終了時間の選択 */
.times_container {
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
}
.times_container select,
.times_container img {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.times_container select {
    padding: 8px 72px 8px 8px;
    margin: 4px;
}
.icon-container img {
    width: 16px;
    height: auto;
    margin: 0 8px;
    vertical-align: middle;
}

@media only screen and (max-width: 768px) {
    .times_container { display: flex; width: 100%; }
    .times_container select, .times_container div { flex: 1; }
    .times_container div { flex: 0 0 auto; }
    .times_container select { padding-right: 24px; }
}

/* 請求料金表 */
.rental-charge {
    text-align: right;
}

.rental-product.total,
.rental-product.tax,
.rental-product.grand-total {
    text-align: right;
}

.rental-currency {
    text-align: right;
}

/* 予約申込者 */
.mts-form-table {
    border-collapse: separate;
    border-spacing: 0.3em;
    border: 1px solid #cccccc;
    margin: 0 0.5em;
    width: 100%;
}

.mts-form-table th:first-child,
.mts-form-table th:last-child,
.mts-form-table th {
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    padding: 0.4em;
    width: 25%;
}

.mts-form-table td:first-child,
.mts-form-table td:last-child,
.mts-form-table td {
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    padding: 0.4em;
}

#mts-customer-entry input,
#mts-customer-entry select {
    height: inherit;
    padding: 0.2em;
}

.customer-name-box {
    display: inline-block;
    margin-right: 0.4em;
    width: 47%;
}

label.customer-name-label {
    display: block;
    margin-bottom: 0.1em;
}

input.customer-name {
    width: 80%;
}

#mts-customer-entry dl {
    margin: 0;
}

#mts-customer-entry dd {
    margin: 0 0 0.2em 1em;
}

.customer-header label {
    display: block;
    margin-bottom: 0.1em;
}

#customer-postcode {
    display: inline-block;
    width: 35%;
}


label.gender-label {
    display: inline-block;
    margin-right: 0.8em;
}

.mts-gender-label {
    display: inline-block;
    margin-right: 1em;
}

.form-page-link {
    margin-bottom: 0.5em;
}

/* 予約確認ID入力 */
.reserve-box {
    margin-bottom: 1em;
    width: 100%;
}

.reserve-label {
    display: block;
    margin-bottom: 0.2em;
}

/* 予約内容確認リスト */
.list-page .mts-form-table {
    border-collapse: collapse;
    border: 1px solid #cccccc;
    margin: 0 0.5em;
    width: 100%;
}

.list-page .mts-form-table th:first-child,
.list-page .mts-form-table th:last-child,
.list-page .mts-form-table th {
    border: 1px solid #cccccc;
    padding: 0.4em;
    width: 25%;
}

.list-page .mts-form-table td:first-child,
.list-page .mts-form-table td:last-child,
.list-page .mts-form-table td {
    border: 1px solid #cccccc;
    padding: 0.4em;
}

/* 予約確認お支払い */
.payment-period-arrow {
    margin: 0 0.3em;
}


/* エラーメッセージ */
#mts-message-pane.error {
    border: 1px solid #ff0000;
    border-radius: 5px;
    color: #ff0000;
    margin-bottom: 1em;
    padding: 0.5em;
}

#mts-message-pane.update {
    border: 1px solid #eeee00;
    border-radius: 5px;
    color: #eeee00;
    margin-bottom: 1em;
    padding: 0.5em;
}













/*
 個人情報
---------------------------------------------------------------------- */
.privacy { line-height: 2;}
.privacy dt {
    font-weight: bold;
    font-size: 20px;
    margin-top: 1em;
	margin-bottom:15px;
}
.privacy dd { line-height:180%; margin-inline-start: 0;}

.privacy ul { margin-left: 1em; line-height:150%;}
.privacy ol { margin-left: 2em; line-height:150%;}
.privacy li {padding-left:1em; text-indent:-1em; line-height:150%;}

@media screen and (max-width: 768px) {
    .privacy { line-height: 2; font-size:90%;}
    .privacy dt {
        font-weight: bold;
        font-size:120%;
        margin-top: 1em;
    }
}



/* ----------------------------------------------------------
■ スマホ
----------------------------------------------------------- */
@media screen and (max-width: 768px) {

/*
画像
---------------------------------------------------------------------- */
.img_c { width:auto; margin:0 auto 15px auto;}
.img_r { width:auto; margin:0 0 15px 0; float:none;}

.img_l300,
.img_l{
    width:auto; margin:0 0 15px 0; float:none;
}

#popup-background{
    position:fixed;     /* 位置の固定 */
    top: 0;             /* 表示位置 */
    left: 0;            /* 表示位置 */
    height: 100%;       /* 画面全体に表示 */
    width: 100%;        /* 画面全体に表示 */
    background:#000;    /* 背景色 */
    opacity: 0.75;      /* 透明度 */
    margin: 0;          /* 余白の削除 */
    padding: 0;         /* 余白の削除 */
    z-index:1000;       /* 要素のz座標 */
    display: none;
}
#popup-item{
    position:fixed;     /* 位置の固定 */
    top: 50%;           /* 表示位置(真ん中に表示) */
    left: 50%;          /* 表示位置(真ん中に表示) */
    margin: 0;          /* 余白の削除 */
    padding: 0;         /* 余白の削除 */
    z-index:1001;       /* 要素のz座標 */
	
}
#popup-item {width:95%!important; margin:auto auto auto auto!important; height:auto!important; left: 0!important; right:0!important; top:0!important; bottom:0!important;}




/*
 ボタン
---------------------------------------------------------------------- */
/* btサイズ指定の場合 */
.btn_detail a {
    width: auto;
    margin: 0;
}

.btndetail { width: 80%; margin:0 auto;}






/*
 contact
---------------------------------------------------------------------- */
#contact dl { font-size:120%;border-bottom:dotted 1px #ccc; margin:25px 0 0 0; padding:0 0 25px 0; }
#contact dt { width:auto; float:none; margin:0; padding:0;}
#contact dd { width:auto; float:none; margin:0; padding:0;}
.contact_btn { clear:both; margin-top: 25px; text-align: center;}
#contact dd input {width:100%; margin:0 auto;}
#contact dd textarea {width:100%; margin:0 auto;}

#privacy { width:99%;}



/*
 フォーム
---------------------------------------------------------------------- */
#form dl { font-size:120%;border-bottom:dotted 1px #ccc; margin:25px 0 0 0; padding:0 0 25px 0; }
#form dt { width:auto; float:none; margin:0; padding:0;}
#form dd { width:auto; float:none; margin:0; padding:0;}
.form_btn { clear:both; margin-top: 25px; text-align: center;}
#form dd input {width:100%; margin:0 auto;}
#form dd textarea {width:100%; margin:0 auto;}

#form dd select { width:20%; height:30px; padding:0; box-sizing: border-box;}
#form dd input.w80 { width:69%; margin:0 1% 0 0;}
#form dd input.w20 { width:60%; margin:0 0 5px 0;}
#form dd input.w10 { width:13%; margin:0 1% 0 0;}




}




/* =====================================
 9. tel link
===================================== */
a[href^="tel:"] {
	pointer-events: none;
	cursor:text;
}

@media screen and (max-width: 767px) {
a[href^="tel:"] {
	pointer-events: auto;
	cursor:pointer;
}
}

/* 極小スマホ */
@media screen and (max-width: 576px) {
    .btn-detail{width: 70%;}
}