/*_________ [1] Tooltop as Help    __________*/
.qtipHelp_Area{width:302px;
border:solid 7px #C1E0FF;
text-align:left;
background-color:#ffffff;
}

/*_________ [1-1] Header Setting   __________*/
.qtipHelp_Area .qtip-title    {
padding:7px 4px 7px 8px;
width:290px;
line-height:1.1;
border-bottom:solid 1px #7abdff;
background-color:#e1f0ff;
}
.qtipHelp_Area .qtip-title em {
color:#333333;
font-weight:bold;
font-style:normal;
}

/*_________ [1-2] Contents Setting __________*/
.qtipHelp_Area .qtip-content       {
padding:7px 6px 7px 6px;
width:290px;
border-color:#3399ff;
line-height:1.2;
background-color:#ffffff;
}
.qtipHelp_Area .qtip-content table,
.qtipHelp_Area .qtip-content th,
.qtipHelp_Area .qtip-content td    {
border-style:solid;
border-color:#C1E0FF;
}
.qtipHelp_Area .qtip-content table {
border-collapse:collapse;
border-width:1px 1px 0 0;
width:100%;
}
.qtipHelp_Area .qtip-content th    {
border-width:0 0 1px 1px;
padding:3px;
width:20%;
vertical-align:top;
background-color:#E1F0FF;
font-weight:normal;
}
.qtipHelp_Area .qtip-content td    {
border-width:0 0 1px 1px;
padding:3px;
width:80%;
vertical-align:top;
background-color:#FFFFFF;
}
.qtipHelp_Area .qtip-content hr    {
margin-top:5px;
height:1px;
color:#D6D6D6;
}
/*________ [1-2-1] Icon Introduction ________*/
.qtipHelp_Area .qtip-content table.explain_Table    {
border-width:0;
}
.qtipHelp_Area .qtip-content table.explain_Table th,
.qtipHelp_Area .qtip-content table.explain_Table td {
border-style:dotted;
padding:7px 3px 3px 3px;
border-width:1px 0 0 0;
border-color:#bdbdbd;
}
.qtipHelp_Area .qtip-content table.explain_Table th {
background-color:#ffffff;
}
.qtipHelp_Area .qtip-content table.explain_Table td {
color:#666666;
}
.qtipHelp_Area .qtip-content table.explain_Table .first_row th,
.qtipHelp_Area .qtip-content table.explain_Table .first_row td {
padding:3px;
border-width:0;
}
/*--------------------------------------------------
pay-info-box
---------------------------------------------------*/
.cmn-tip-container.pay-info-box{
padding: 15px 20px;
font-size:12px;
font-family: '\30e1\30a4\30ea\30aa', Meiryo, '\30d2\30e9\30ae\30ce\89d2\30b4 Pro W3', 'Hiragino Kaku Gothic ProN', '\ff2d\ff33 \ff30\30b4\30b7\30c3\30af', sans-serif;
width:550px;
box-sizing:border-box;
position:absolute;
background:#fff;
z-index: 1;
text-align: left;
top: 48px;
left: 0;
min-height:95px;
}
.pay-info-box.wide{
width:630px;
}
.pay-info-box dl dt{
float:left;
margin-bottom:0px;
font-weight: normal;
}
.pay-info-box dd{
margin-left:50px;
margin-bottom:1px;
}
.pay-info-box dd:last-child{
margin-bottom:0;
}
.pay-info-box dd span{
color:#c1c1c1;
}
.pay-info-box dd img{
margin:-5px 0 -3px 0px;
height:15px;
}
.pay-text-box{
border-top:1px dotted #b5b5b5;
margin-top:12px;
padding-top:8px;
font-size:12px;
}
.pay-text-box p{
font-size:12px;
}
.pay-text-box b{
font-size:13px;
display:block;
margin-bottom:4px;
}
.pay-text-box span{
display:inline-block;
margin-top:7px;
text-indent:0;
}
.opt-price{
position:relative;
margin-right: 150px;
}
.hotel-commission-box strong{
color:#e30707;
}
.hotel-commission-box .head-info{
font-weight:bold;
font-size:14px;
}
.price-detail-box{
background:#f3f3f3;
padding:12px 10px 12px 12px;
display:block;
border-radius:4px;
margin:10px 0 0 0;
}
.price-detail-box li{
display:inline-block;
width:190px;
vertical-align:top;
}
.price-detail-box li:first-child{
padding-top:4px;
}
.price-detail-box li:first-child > span{
display:inline-block;
background:#888;
border-radius:3px;
color:#fff;
font-size:11px;
font-weight:bold;
padding:0px 3px;
margin-right:5px;
}
.wide .price-detail-box li:last-child{
width:350px;
}
.price-detail-box li:last-child{
width:280px;
margin-left:10px;
font-size:13px;
vertical-align:middle;
}
.price-detail-box li:last-child > span{
display:inline-block;
margin-right:5px;
width:26px;
vertical-align:middle;
}
.price-detail-box li:last-child strong{
font-size:18px;
display:inline-block;
width:116px;
text-align:right;
vertical-align:middle;
}
.price-detail-box li:last-child strong + span{
width:125px;
font-size:11px;
margin:0 0 0 7px;
line-height:1.2;
letter-spacing:-0.5px;
}
.wide .price-detail-box li:last-child strong + span{
width:190px;
}
.arrow-box {
position: relative;
background: #fff;
border: 1px solid #ccc;
border-radius:4px;
}
.arrow-box:after, .arrow-box:before {
bottom: 100%;
left: 70px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.resort-fee-01 .arrow-box:after,.resort-fee-01 .arrow-box:before{
left: 75%;
}
.arrow-box:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 20px;
margin-left: -20px;
}
.arrow-box:before {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ccc;
border-width: 21px;
margin-left: -21px;
}
.agent-info-box{
border-bottom:1px solid #ccc;
margin-bottom:15px;
padding-bottom:20px;
}
.agent-info-box li{
display:inline-block;
max-width:160px;
position:relative;
height:155px;
vertical-align:top;
padding-top:20px;
}
.agent-info-box li:first-child > div{
border:1px solid #ccc;
border-radius:4px;
}
.agent-info-box li div{
height:155px;
padding:10px 5px;
box-sizing:border-box;
vertical-align:top;
display:inline-block;
}
.agent-info-box li:first-child{
padding-left:54px;
}
.agent-info-box li:first-child:before{
content:'';
display:block;
width:39px;
height:51px;
background:url(/element/w_hotel/shared/images/icon-commition-01.gif) no-repeat;
position:absolute;
top:0;
left:15px;
}
.agent-info-box li + li{
padding-left:28px;
position:relative;
}
.agent-info-box li + li:before{
content:'';
display:block;
width:28px;
height:24px;
background:url(/element/w_hotel/shared/images/icon-commition-02.gif) no-repeat;
position:absolute;
top:27px;
left:0;
}
.agent-info-box .head-text{
font-size:12px;
padding-bottom:6px;
margin-bottom:10px;
border-bottom:1px solid #e2e2e2;
text-align:center;
}
.agent-info-box .price-info{
text-align:center;
font-size:15px;
}
.agent-info-box .price {
font-size:12px;
color:#777;
}
.agent-info-box .price b{
font-size:15px;
color:#333;
}
.agent-info-box .cap{
display:block;
font-size:10px;
color:#777;
margin-top:4px;
}
.agent-info-box .price-text{
display:block;
font-size:11px;
color:#777;
}
.agent-info-box .price-text b{
line-height:1.3;
display:block;
margin-top:12px;
font-size:12px;
color:#333;
}
.pay-info-box.wide .agent-info-box li div.arrow-box,
.pay-info-box .agent-info-box li.resort-fee-01 .arrow-box{
width:360px;
}
.pay-info-box .agent-info-box li .arrow-box div{
display:inline-block;
width:160px;
}
.pay-info-box .agent-info-box li .arrow-box div.agent-move{
padding-top:0;
}
.pay-info-box .agent-info-box li .arrow-box div + div{
position:relative;
margin-left:20px;
}
.pay-info-box .agent-info-box li .arrow-box div + div:before{
display:block;
content:'';
width:18px;
height:4px;
background:#777;
position:absolute;
left: -22px;
top: 43px;
}
.pay-info-box .agent-info-box li .arrow-box div + div:after{
display:block;
content:'';
width:4px;
height:18px;
background:#777;
position:absolute;
left: -15px;
top: 36px;
}
.text-agent-info{
font-size:11px;
color:#777;
margin:15px 0 -10px 0;
letter-spacing:-0.5px;
}
#one_column #main_Col .cpnInfo_Area{
line-height:1.5;
}
/* ----------------------------------------------------------------
  payment tooltip
----------------------------------------------------------------- */
.tip-payment-info{
position: absolute;
top:auto;
right: 10px;
padding: 15px 20px;
width: 440px;
font-family: '\30e1\30a4\30ea\30aa', Meiryo, '\30d2\30e9\30ae\30ce\89d2\30b4 Pro W3', 'Hiragino Kaku Gothic ProN', '\ff2d\ff33 \ff30\30b4\30b7\30c3\30af', sans-serif;
color: #333;
font-size: 13px;
border: 1px solid #aaa;
border-radius: 3px;
background-color: #fff;
box-shadow: 1px 1px 3px 0 rgba(153,153,153,.75);
box-sizing: border-box;
z-index: 101;
}
.tip-payment-info .list-payment > li{
display: table;
width: 100%;
}
.tip-payment-info .list-payment > li > .hdg{
position: relative;
display: table-cell;
width: 5.5em;
font-weight: normal;
color: #555;
vertical-align: top;
white-space: nowrap;
}
.tip-payment-info .list-payment > li > .hdg:after{
position: absolute;
content: "\ff1a";
right:0;
}
.tip-payment-info .list-payment > li > .box{
vertical-align: top;
display: table-cell;
white-space: nowrap;
color: #333;
}
.tip-payment-info .list-payment-01{
display: inline-block;
letter-spacing: -.4em;
}
.tip-payment-info .list-payment-01 > li{
position: relative;
padding-left: 1em;
display: inline-block;
letter-spacing: normal;
}
.tip-payment-info .list-payment-01 > li:before{
position: absolute;
left: 0;
top: 0;
content: "\ff0f";
}
.tip-payment-info .list-payment-01 > li:first-child{
padding-left: 0;
}
.tip-payment-info .list-payment-01 > li:first-child:before{
display: none;
}
.tip-payment-info .list-payment-01 > li.disabled{
color: #ccc;
}
.tip-payment-info .list-payment-01 > li.disabled:before{
color: #333;
}
.tip-payment-info .list-payment-01 > li.disabled + li.disabled:before{
color: #ccc;
}
.tip-payment-info .list-credit{
display: inline-block;
vertical-align: middle;
}
.tip-payment-info .list-credit > li{
display: inline-block;
}
.tip-payment-info .list-payment img{
vertical-align: middle;
height: 15px;
width: auto;
}
.tip-payment-info .pay-text-box{
border-top:1px solid #ccc;
margin-top:4px;
padding-top:0px;
font-size:12px;
}
.tip-payment-info .pay-text-box p{
font-size:12px;
padding-left: .5em;
text-indent: -.5em;
}
/* .list-pament-info
----------------------------------------------- */
.list-pament-info{
display: table;
table-layout: fixed;
width: 186px;
border-collapse: separate;
border-spacing: 3px;
margin: -4px 0 0 -4px;
}
.list-pament-info li{
display: table-cell;
width:50%;
padding:2px 1px;
border:1px solid #d9d9d9;
vertical-align: middle;
text-align: center;
font-size:10px;
color:#666;
}