@charset "utf-8";

/*-----------------
 　　　　予約フロー
 ----------------*/


 /*-----------------
 　　　　　　共通
 ----------------*/

body{
    background: #fff;
    position: relative;
    right: 0;
    overflow-x: hidden;
}

header{
    margin: 10px 0 10px 10px;
 }

header h1 img {
    width: 50%;
}

.content-inner{
    margin: 0 2%;
}

.caution-txt{
    padding: 10px;
    border: 1px solid #000;
    line-height: 1.5;
    margin-bottom: 15px;
}

.age_txt2{
    display: block;
    margin-top: 8px;
    font-size: 105%;
    color: #ff0000;
}
.ex{ margin-bottom: 5px; clear: both;}
.ex2{ margin-top: 5px;}
.ib{ display: inline-block; vertical-align: top;}
.dn{ display: none;}
.fl{ float: left;}
.fr{ float: right;}
.pr{ position: relative;}
.mt15{ margin-top: 15px;}
.red{ color: red; }

.common-ttl{
    background: #ebf6fd;
    border-left: #23afef solid 5px;
    color: #000;
    position: relative;
    padding: 9px 10px 9px 40px;
    font-size: 100%;
    margin: 10px 0;
}

 .common-ttl2{
    background: #23afef;
    color: #fff;
    font-size: 140%;
    text-align: center;
    padding: 5px 0 3px;
}

.common-ttl3{
    border-left: 3px solid #23afef;
    padding: 5px 0 5px 6px;
}

.required{
    position: absolute;
    top: 6px;
    left: 6px;
    color: #fff;
    background: #ff0000;
    padding: 0 2px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
}

.required-none{ padding:9px 10px 9px 10px; }

.required2{
    position: absolute;
    top: -3px;
    left: 122px;
    color: #fff;
    background: #ff0000;
    padding: 0 2px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
}

.txt-red,
.txt-red2{
    font-size: 90%;
    color: #ff0000;
}



.caution-txt2{
    background: #dbdbdb;
    padding: 5px;
}

.pcSwitch{
    text-align: center;
    margin: 10px 0;
}

.arart_text{
    border: 2px #ea0000 solid;
    padding: 3px 5px;
    display: inline-block;
    margin: 5px 0;
}

.inputError,
.inputError2,
.addErr{
    border: 1px dashed #ea0000;
    display: inline-block;
    padding: 7px 0 5px 26px;
    position: relative;
    margin:5px 0;
}

.inputError:before, .inputError2:before,.addErr:before{
    position: absolute;
    top: 5px;
    left: 7px;
    content: " ";
    width: 15px;
    height: 15px;
    background: url(../img/caution.png) no-repeat;
    background-size: 15px 15px;
}

/*
.clause-txt{
    position: fixed;
    top: 0;
    right: -240px;
    width: 240px;
    height: 100%;
    background: #fff;
    overflow-y: auto;
}
*/
.mytabi {
    text-align: center;
    margin: 0 auto;
    width: 80%;
}

.mytabi a{
    text-align: center;
    margin: 20px auto 5px;
    display: block;
    background: #f64e59;
    color: #fff;
    font-size: 120%;
    border-radius: 5px;
    padding: 10px 15px;
}

.sistemerror{
    margin-top: 10px;
}
.arart-option_A,
.arart-option_B,
.arart-option_C{ color: #ea0000;}
.insurance-info{
    text-align: right;
    padding-bottom: 5px;
}

.insurance-info a {
    color: #000;
    text-decoration: underline;
}

/*--------------------
　　　テーブルデザイン
--------------------*/

.common-table{
    border: #989898 1px solid;
    text-align: left;
    font-size: 110%;
    width: 100%;
}

.common-table th{
    background: #ebf6fd;
    font-weight: normal;
    padding: 7px 0 7px 7px;
}

.common-table td{
    padding: 10px 5px;
}

.common-table .pcr td div{
    border: 1px solid #000;
    margin: 3px;
    padding: 10px;
    line-height: 1.5;
    background-color: #fdffd3;
}

.common-table .pcr td span{
    color: red;
}

.common-table td p{
    line-height: 1.5;
}

.common-table2{
    width: 100%;
    border: #828282 solid 1px;
}

.common-table2 th{
    background: #fffbb5;
    padding: 5px;
    text-align: left;
}

.common-table2 td{
    padding: 5px;
}

.common-table2 tr{
   border-bottom: dashed 1px #828282;
}

.specification .flightInfomation p,
.tour-check .flightInfomation p{
	margin-bottom:10px;
}

/*------------------
　　　　　　パンくず
------------------*/

.bread{
    position: relative;
    padding: 0;
    list-style: none;
    width: 100%;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    background: #cacaca;
    margin-bottom: 15px;
}

.bread li{
    display: block;
    position: relative;
    float: left;
    padding: 9px 0 0 10px;
    width: 12%;
    height: 30px;
    color: #585858;
    background: #cacaca;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.bread li p{
    padding: 0 0 0 15px;
    font-size: 15px;
    line-height: 1;
}

.bread li:first-child p{
    padding: 0 0 0 5px;
}

.bread li:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: -6px;
    right: -40px;
    width: 0;
    height: 0;
    border: 21px solid transparent;
    border-left: 21px solid #fff;
}

.bread li:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    right: -27px;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-left: 15px solid #cacaca;
}
.bread li:last-child{
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.bread li:last-child:before{
    border:none;
}

.bread li:last-child:after{
    border:none;
}
.bread li.select{
    width: 49%;
    background: #23afef;
    color: #fff;
}

.bread li:last-child.select{
    width: 52%;
}

.bread li.select:after {
    border-left: 15px solid #23afef;
}



/*---------------------
　　　　ボタンデザイン
---------------------*/

.box-btn{
    text-align: center;
    margin: 20px 0 15px; 
}

#wbf .box-btn .contact-link,
#geo .box-btn .contact-link,
#life .box-btn .contact-link{
	display:none;
}

.reserve-btn button{
    border: none;
    background: #ff8400;
    border-radius: 5px;
    color: #fff;
    font-size: 160%;
    padding: 10px 48px 10px 45px;
    font-weight: bold;
    position: relative;
}

.reserve-btn button:after{
    content: " ";
    position: absolute;
    top: 41%;
    right: 22px;
    content: " ";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent #fff;
}

.reserve-btn button.disabled{
    background: #D0D0D0;
}

.contact-link button{
    display: inline-block;
    text-decoration: underline;
    margin: 25px 0 15px;
    color: #000;
    position: relative;
    background: none;
    border: none;
    text-decoration: underline;
    font-size: 120%;
}

.contact-link button:before{
    content: " ";
    position: absolute;
    top: 25%;
    left: -11px;
    content: " ";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 3px 0 3px 5px;
    border-color: transparent transparent transparent #000;
}

.return-btn a{
    display: inline-block;
    background: #ECEBEB;
    border-bottom: #d4d4d4 solid 3px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 5px 10px 5px 20px;
    margin-bottom: 5px;
    color: #000;
    position: relative;
}

.return-btn a:before{
    content: " ";
    position: absolute;
    top: 34%;
    left: 7px;
    content: " ";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 3px 5px 3px 0;
    border-color: transparent #000 transparent transparent;
}

.tabclose-btn{
    margin: 45px auto;
    text-align: center;
}

.tabclose-btn a {
    display: inline-block;
    background: #ECEBEB;
    border-bottom: #d4d4d4 solid 3px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 5px 10px 5px 10px;
    margin-bottom: 5px;
    color: #000;
    position: relative;
}
.customer-form .catch {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 140%;
    color: #1664ED;
    font-weight: bold;
}
/*--------------------
　　　  ホテルモーダル
---------------------*/

.htl-select{
    position: relative;
    padding-top: 15px;
}

.num-htl{
    font-size: 120%;
    margin: 10px;
}

.notes{
    font-size: 100%;
    margin:10px 10px 0;
}

.date-ttl{
    background: #ebf6fd;
    font-size: 110%;
    position: relative;
    padding: 6px 0 4px 10px;
    width: 50px;
    margin: 0 20px 0 10px;
}

.date-ttl:after{
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 0;
    border-width: 13px;
    border-style: solid;
    border-left-color: #ebf6fd;
    border-right-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

.htl-select li{
    border-top: 1px solid #ccc;
    padding: 10px;
}

.htl-select li dl{
    overflow: hidden;
}

.htl-select li dt{
    float: left;
    width: 35%;
}

.htl-select li dt img{
    width: 100%;
}

.htl-select li dd{
    float: right;
    width: 60%;
}

.htl-select .noupfee, .htl-select .roomCat {
    color: #fff;
    font-size: 84%;
    padding: 0px 4px;
    margin-right: 5px;
    background: #7F7C7C;
}

.htl-select .noupfee {
    display: inline-block;
    padding: 4px 6px 2px;
    margin-bottom: 5px;
}

.htl-select .htl-adultPrice .roomCat,
.htl-select .htl-childPrice .roomCat,
.htl-select .roomCat{
    background: #7F7C7C;
}

.htl-select .htl-adultPrice span {
    background: #23afef;
    color: #fff;
    font-size: 84%;
    padding: 0px 4px;
    margin-right: 5px;
}

.htl-select .htl-adultPrice .roomqty{
    color: #000;
    background: none;
}

.htl-select .htl-childPrice span {
    background: #f9417e;
    color: #fff;
    font-size: 84%;
    padding: 0px 4px;
    margin-right: 5px;
}

.htl-list .htl-select dd p {
    padding-bottom: 5px;
}

.htl-radio{
    float: right;
    font-size: 110%;
    margin-top: 5px;
}

.htl-radio label{ margin-left: 5px;}

.modalClose{
    font-size: 180%;
    margin: 10px;
    position: absolute;
    border: #000 solid 1px;
    padding: 3px 5px 1px;
    top: -4px;
    right: -2px;
}

.modal-content{
    margin-top: 45px;
}

/*---------------------
*明細
---------------------*/
.specificationBtn{
    background: #ccc;
    border: none;
    border-bottom: 2px solid #333;
    padding: 4px 12px;
    border-radius: 5px;
    margin-left: 10px;
}

/*-- coupon --*/
.coupon p{
	display: inline-block;
    margin-left: 20px;
}

/*-- pageloading --*/

#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: rgba(255,255,255,0.5);
  z-index: 3;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #000;
  z-index: 4;
}

#loader p{
    margin-top: 15px;
}

/*---------------------
　　　　　　フッター
---------------------*/

footer{
    background: #d9ecff;
    text-align: center;
    padding: 15px 0 0;
}

footer p{
    margin-bottom: 5px;
}

footer p:nth-child(1),
footer p:nth-child(2),
footer p:nth-child(3),
footer p:nth-child(4){
    display:none;
}
footer p.copy{
    display:block;
}

.txt-large{
    font-size: 160%;
    font-weight: bold;
}

footer .open-time{
    position: relative;
    padding-left: 77px;
    text-align: left;
    margin-left: 20px;
}

footer .open-time span{
    position: absolute;
    top: 0 ;
    left: 0;
}

footer .fax{
    text-align: left;
    margin-left: 20px;
}

footer .copy{
    margin: 10px 0 0;
}

footer .tel{
    font-size: 160%;
    color: #000;
    font-weight: bold;
    padding: 10px 15px 8px 15px;
    background: #fff;
    display: inline-block;
    border-radius: 5px;
    box-shadow: rgb(180, 196, 212) 0px 3px 0px 0px;
    -webkit-box-shadow: rgb(180, 196, 212) 0px 3px 0px 0px;
    -moz-box-shadow: rgb(180, 196, 212) 0px 3px 0px 0px;
    position: relative;
    margin-bottom: 15px;
}

footer .tel:before{
    content: " ";
    position: absolute;
    top: 35%;
    left: -6px;
    content: " ";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 8px 8px 0;
    border-color: transparent #fff transparent transparent;
}

footer .tel-icon{
    position: absolute;
    top: 12px;
    left: -30px;
    width: 19px;
    height: 25px;
    background: url(../img/tel_icon.png) no-repeat;
    background-size: 19px 25px;
}


/*---------------------
　　　ページトップボタン
---------------------*/

#pagetop img,
#pagetop2 img {
    width: 100%;
}


#pagetop,
#pagetop2{
    position: fixed;
    right: 5px;
    bottom: 5px;
    opacity: 0.5;
    z-index: 2;
}

#pagetop a,
#pagetop2 a {
    width: 34px;
    height: 40px;
    display: block;
}

/* アプリダウンロードボタン */
.app_btn{
    text-align: center;
}
.googleplay,
.apple_icon{
    width: 138px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}
.apple_icon{
    width: 123px;
    margin-top: 9px;
}
.googleplay a,
.apple_icon a{
    display: block;
}
.googleplay a img{
    width: 100%;
}
.apple_icon a img{
    width: 100%;
}
.fb_box{
    text-align: center;
}

/*保険*/
.chubb_hoken img{width: 100%;}

span.minitext {
    margin: 0 0 0 4em;
    font-size: 80% !important;
    display: block !important;
    vertical-align: middle !important;
}
span.minitext2 {
    font-size: 80% !important;
    vertical-align: middle !important;
}

/* 0911 */
.send-off,.send-on{
    display: block;
    font-size: 80%;
    line-height: 2;
    margin-top: 10px;
}
td .ttl{
    border-left: 6px solid #23afef;
    padding-left: 4px;
    margin-bottom: 10px;
}
.timeselect{
    width: 100%;
    font-size: 18px;
}

/*　0920　*/

.f100{font-size:100%;}
.bt {
    border-top: 2px dashed #afbfca;
    padding-top: 10px;
}
.Cinsurance-box label span{
    display: inline-block;
    width: 90%;
}
.Cinsurance-box .Cinsurance-box-info span{
	color: #f00;
	font-weight: bold;
}
.Cinsurance-box label strong{
	font-size: 150%;
}
.Cinsurance-box input{
    display: inline-block;
    margin-right: 2%;
	vertical-align: middle;
}
.bg1{background:#eee;padding:4px;border-radius:4px;}
.CcheckList.bg2,.CcheckList .bg2 {
    background: #ffd6d6;
	padding: 15px;
}
.insurance-info span{
    text-decoration: underline;
    color: #000;
}

.clause_close {
    position: relative;
    display: inline-block;
    background: #ECEBEB;
    border-bottom: #d4d4d4 solid 3px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 5px 10px 5px 20px;
    margin-bottom: 5px;
    color: #000;
}
.Cinsurance-box label {
    padding: 0 !important;
    display: block !important;
}
.f80 {
    font-size: 80% !important;
    padding: 0;
}
.dpb{display:block;}

.Cinsurance-box .subttl {
    background: #f3f3f3;
    padding: 8px;
    font-size: 90%;
    border-left: 4px solid #56b1da;
}
.Cinsurance-box .ctable {
    width: 100%;
    border: 1px solid #ccc;
    margin: 10px 0;
}
.Cinsurance-box .comment {
    line-height: 170%;
    margin-bottom: 10px;
	font-size: 90%;
}
.Cinsurance-box .comment .txt-red2{
	font-size:100%;
}
.Cinsurance-box tr{padding:15px 0;}
.Cinsurance-box .ctableWrap th{
    padding: 10px;
    text-align: center;
    width: 70px;
    display: block;
    border:1px solid #ccc;    
}
.Cinsurance-box th.bg1{border-radius:0;}
.Cinsurance-box td td{
    padding:0 10px;
    text-align: center;
    border:1px solid #ccc;
}
.Cinsurance-box .br{border-right: 2px dotted #ccc;}

.Cinsurance-box .box3 dl{
    display: inline-block;
    width: 28%;
    margin:10px 0;
}
.Cinsurance-box .box3 dl:nth-child(2){margin:0 5%;}
.Cinsurance-box .box3 dd{
    color: #1ca5e4;
    font-size: 110%;
    font-weight: bold;
    margin: 10px 0;
}
.Cinsurance-box .box3 dt img{width:100%;height:auto;}
.Cinsurance-box .box3 .ex-border{
	border: 1px solid #d5d7d8;
	padding: 10px;
	line-height: 170%;
	margin-bottom: 20px;
}
.Cinsurance-box .box3 .ex-border span{
	color: #f00;
	font-weight: bold;
}
.Cinsurance-box .insurance_image {
    height: 180px;
}

.Cinsurance-box table .txt-red2 {
    color: #ea0000;
    font-size: 160%;
}


.Cinsurance-box .ctableWrap {
    width: 300px;
    overflow-x: scroll;
}
.Cinsurance-box .ctable th{padding:8px;}

label.seat{display:inline-block;}
input[name=mileage] {
    width: 90%;
    display: block;
}

.allpoint{
    padding:0 !important;
    display: block;
    font-size: 90%;
}
.allpoint .minitxt{
    display:block;
    font-size: 100%;
}

.rentAgeCheck p {
    font-size: 110%;
    margin: 5px 0;
}

.rentAgeCheck p.yearbox{
    display:inline-block;
    padding:10px;
}

.oh{
    overflow:hidden;
}
header h1{float:left;}
#head-bottom-menu{
    float:right;
}
#head-bottom-menu a {
    text-align: center;
    font-weight: bold;
    color: #3b7bab;
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
    display: block;
    width: 140px;
    height: 30px;
    padding-top: 45px;
    box-sizing: border-box;
    background: url(/module/common/images/menu-coupon.png) no-repeat center top;
    background-size: contain;
    margin-bottom: 20px;
}
#head-bottom-menu a:hover{opacity:0.8;}
.coupon-n {
    display: block;
    width: 18px;
    height: 18px;
    background: #FF0000;
    color: #FFF;
    font-size: 12px;
    line-height: 18px;
    border-radius: 50%;
    position: relative;
    top: -55px;
    left: 83px;
}
/*メルマガ登録モーダル*/
  .mailmag_pop {
        border: 2px solid #5d94b6;
        width: 560px;
        background: #fff;
        top: 16%;
        position: fixed;
        left: 28%;
        z-index: 9999;
        border-radius: 4px;
        display:none;
    }
    .mailmag_pop .inr {
        padding: 40px;
    }
.btnBox .btn1,.btnBox .btn2{display:inline-block;  width: 40%;margin:0 10px;}
.btnBox .btn1 a {
    font-size: 110%;
    text-align: center;
    background: #ff2638 url(/oka/img/tourokuico.png) no-repeat 4% 47%;
    background-size: 20px auto;
    padding: 16px;
    color: #fff;
    display: inline-block;
    border-radius: 4px;
    border-bottom: 2px solid #bc1a27;
    width: 90%;
    font-weight: bold;
}
.btnBox .btn2 a {
    font-size:110%;
    margin-left: 10px;
    text-align: center;
    background: #00a0e9 url(/oka/img/loginico.png) no-repeat 4% 50%;
    background-size: 20px auto;
    padding: 16px;
    color: #fff;
    display: inline-block;
    border-radius: 4px;
    border-bottom: 2px solid #0e6e99;
    width: 90%;
    font-weight: bold;
}
.btnBox .btn1 a:hover,.btnBox .btn2 a:hover{opacity:0.8;text-decoration:none;}
#batten{
    background: #ccc;
    padding: 8px 10px;
    border-radius: 40px;
    position: absolute;
    z-index: 11;
    top: -14px;
    right: -10px;
    border: 4px solid #3d3d3d;
    font-weight: bold;
    font-size: 127%;
}
#batten:hover{cursor:pointer;}
#gnav-overlay {
    display: none;
    width: 100%;
    height: 100%;
    text-align: center;
    position: fixed;
    top: 0;
    z-index: 100;
    background: rgba(0,0,0,0.7);
}
.closeBtn{
    padding: 10px 0;
    background: #4a4a4a;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    border-bottom: 2px solid #333;
}
@media screen and (max-width: 789px){

    .mailmag_pop {
        width: 90%;
        position: fixed;
        left: 4%;
    }
    .mailmag_pop img{
        width:100%;height:auto;
    }
    #head-bottom-menu{
        margin-right:10px;
    }
    #head-bottom-menu a{
        font-size:10px;
        width: 70px;
        height: 24px;
        padding-top: 25px;
    }
    .coupon-n {
        width: 14px;
        height: 14px;
        font-size: 10px;
        line-height: 15px;
        top: -42px;
        left: 46px;
    }
    .btnBox .btn1, .btnBox .btn2{
        width:100%;
        display:block;
        margin:10px 0;
    }
    .btnBox .btn2 a{
        margin-left:0;
    }
}