.mCustomScrollbar{-ms-touch-action:pinch-zoom;touch-action:pinch-zoom}.mCustomScrollbar.mCS_no_scrollbar,.mCustomScrollbar.mCS_touch_action{-ms-touch-action:auto;touch-action:auto}.mCustomScrollBox{position:relative;overflow:hidden;height:100%;max-width:100%;outline:0;direction:ltr}.mCSB_container{overflow:hidden;width:auto;height:auto}.mCSB_inside>.mCSB_container{margin-right:30px}.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{margin-right:0}.mCS-dir-rtl>.mCSB_inside>.mCSB_container{margin-right:0;margin-left:30px}.mCS-dir-rtl>.mCSB_inside>.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{margin-left:0}.mCSB_scrollTools{position:absolute;width:16px;height:auto;left:auto;top:0;right:0;bottom:0;opacity:.75;filter:"alpha(opacity=75)";-ms-filter:"alpha(opacity=75)"}.mCSB_outside+.mCSB_scrollTools{right:-26px}.mCS-dir-rtl>.mCSB_inside>.mCSB_scrollTools,.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools{right:auto;left:0}.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools{left:-26px}.mCSB_scrollTools .mCSB_draggerContainer{position:absolute;top:0;left:0;bottom:0;right:0;height:auto}.mCSB_scrollTools a+.mCSB_draggerContainer{margin:20px 0}.mCSB_scrollTools .mCSB_draggerRail{width:2px;height:100%;margin:0 auto;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.mCSB_scrollTools .mCSB_dragger{cursor:pointer;width:100%;height:30px;z-index:1}.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{position:relative;width:4px;height:100%;margin:0 auto;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px;text-align:center}.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{width:12px}.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:8px}.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonUp{display:block;position:absolute;height:20px;width:100%;overflow:hidden;margin:0 auto;cursor:pointer}.mCSB_scrollTools .mCSB_buttonDown{bottom:0}.mCSB_horizontal.mCSB_inside>.mCSB_container{margin-right:0;margin-bottom:30px}.mCSB_horizontal.mCSB_outside>.mCSB_container{min-height:100%}.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{margin-bottom:0}.mCSB_scrollTools.mCSB_scrollTools_horizontal{width:auto;height:16px;top:auto;right:0;bottom:0;left:0}.mCustomScrollBox+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox+.mCSB_scrollTools.mCSB_scrollTools_horizontal{bottom:-26px}.mCSB_scrollTools.mCSB_scrollTools_horizontal a+.mCSB_draggerContainer{margin:0 20px}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:2px;margin:7px 0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{width:30px;height:100%;left:0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:4px;margin:6px auto}.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{height:12px;margin:2px auto}.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{height:8px;margin:4px 0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{display:block;position:absolute;width:20px;height:100%;overflow:hidden;margin:0 auto;cursor:pointer}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{left:0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{right:0}.mCSB_container_wrapper{position:absolute;height:auto;width:auto;overflow:hidden;top:0;left:0;right:0;bottom:0;margin-right:30px;margin-bottom:30px}.mCSB_container_wrapper>.mCSB_container{padding-right:30px;padding-bottom:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_vertical{bottom:20px}.mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_horizontal{right:20px}.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden+.mCSB_scrollTools.mCSB_scrollTools_vertical{bottom:0}.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal{right:0}.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal{left:20px}.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal{left:0}.mCS-dir-rtl>.mCSB_inside>.mCSB_container_wrapper{margin-right:0;margin-left:30px}.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden>.mCSB_container{padding-right:0}.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden>.mCSB_container{padding-bottom:0}.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{margin-right:0;margin-left:0}.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{margin-bottom:0}.mCSB_scrollTools,.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonLeft,.mCSB_scrollTools .mCSB_buttonRight,.mCSB_scrollTools .mCSB_buttonUp,.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{-webkit-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;-moz-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;-o-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;transition:opacity .2s ease-in-out,background-color .2s ease-in-out}.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar{-webkit-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;-moz-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;-o-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out}.mCS-autoHide>.mCustomScrollBox>.mCSB_scrollTools,.mCS-autoHide>.mCustomScrollBox~.mCSB_scrollTools{opacity:0;filter:"alpha(opacity=0)";-ms-filter:"alpha(opacity=0)"}.mCS-autoHide:hover>.mCustomScrollBox>.mCSB_scrollTools,.mCS-autoHide:hover>.mCustomScrollBox~.mCSB_scrollTools,.mCustomScrollBox:hover>.mCSB_scrollTools,.mCustomScrollBox:hover~.mCSB_scrollTools,.mCustomScrollbar>.mCustomScrollBox>.mCSB_scrollTools.mCSB_scrollTools_onDrag,.mCustomScrollbar>.mCustomScrollBox~.mCSB_scrollTools.mCSB_scrollTools_onDrag{opacity:1;filter:"alpha(opacity=100)";-ms-filter:"alpha(opacity=100)"}.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.4);filter:"alpha(opacity=40)";-ms-filter:"alpha(opacity=40)"}.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.75);filter:"alpha(opacity=75)";-ms-filter:"alpha(opacity=75)"}.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85);filter:"alpha(opacity=85)";-ms-filter:"alpha(opacity=85)"}.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9);filter:"alpha(opacity=90)";-ms-filter:"alpha(opacity=90)"}.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonLeft,.mCSB_scrollTools .mCSB_buttonRight,.mCSB_scrollTools .mCSB_buttonUp{background-image:url(clientlib-site-base/css/mCSB_buttons.png);background-repeat:no-repeat;opacity:.4;filter:"alpha(opacity=40)";-ms-filter:"alpha(opacity=40)"}.mCSB_scrollTools .mCSB_buttonUp{background-position:0 0}.mCSB_scrollTools .mCSB_buttonDown{background-position:0 -20px}.mCSB_scrollTools .mCSB_buttonLeft{background-position:0 -40px}.mCSB_scrollTools .mCSB_buttonRight{background-position:0 -56px}.mCSB_scrollTools .mCSB_buttonDown:hover,.mCSB_scrollTools .mCSB_buttonLeft:hover,.mCSB_scrollTools .mCSB_buttonRight:hover,.mCSB_scrollTools .mCSB_buttonUp:hover{opacity:.75;filter:"alpha(opacity=75)";-ms-filter:"alpha(opacity=75)"}.mCSB_scrollTools .mCSB_buttonDown:active,.mCSB_scrollTools .mCSB_buttonLeft:active,.mCSB_scrollTools .mCSB_buttonRight:active,.mCSB_scrollTools .mCSB_buttonUp:active{opacity:.9;filter:"alpha(opacity=90)";-ms-filter:"alpha(opacity=90)"}.mCS-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.15)}.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:rgba(0,0,0,.85)}.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:rgba(0,0,0,.9)}.mCS-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px 0}.mCS-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -20px}.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -40px}.mCS-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -56px}.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-2.mCSB_scrollTools .mCSB_draggerRail{width:4px;background-color:#fff;background-color:rgba(255,255,255,.1);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:4px;background-color:#fff;background-color:rgba(255,255,255,.75);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:4px;margin:6px auto}.mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85)}.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9)}.mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px 0}.mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -20px}.mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -40px}.mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -56px}.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px 0}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -20px}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -40px}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -56px}.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail{width:4px;background-color:#fff;background-color:rgba(255,255,255,.1);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px;background-color:#fff;background-color:rgba(255,255,255,.75);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:4px;margin:6px 0}.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:6px;margin:5px auto}.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85)}.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9)}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{background-position:-16px 0}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{background-position:-16px -20px}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{background-position:-20px -40px}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{background-position:-20px -56px}.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{background-position:-96px 0}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{background-position:-96px -20px}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{background-position:-100px -40px}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{background-position:-100px -56px}.mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{background-color:#fff;background-color:rgba(255,255,255,.1)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:2px}.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%}.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:2px;margin:7px auto}.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.15)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px 0}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -20px}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -40px}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -56px}.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{background-color:#fff;background-color:rgba(255,255,255,.15)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger,.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger,.mCS-rounded.mCSB_scrollTools .mCSB_dragger{height:14px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:14px;margin:0 1px}.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger{width:14px}.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{height:14px;margin:1px 0}.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{width:16px;height:16px;margin:-1px 0}.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:4px}.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{height:16px;width:16px;margin:0 -1px}.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{height:4px;margin:6px 0}.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{background-position:0 -72px}.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{background-position:0 -92px}.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{background-position:0 -112px}.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{background-position:0 -128px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.15)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px -72px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -92px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -112px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -128px}.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail{width:4px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail{background-color:transparent;background-position:center}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);background-repeat:repeat-y;opacity:.3;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail{height:4px;margin:6px 0;background-repeat:repeat-x}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{background-position:-16px -72px}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{background-position:-16px -92px}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{background-position:-20px -112px}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{background-position:-20px -128px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=)}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-96px -72px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-96px -92px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-100px -112px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-100px -128px}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-repeat:repeat-y;background-image:-moz-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,.5)),color-stop(100%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:linear-gradient(to right,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%)}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{background-repeat:repeat-x;background-image:-moz-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,.5)),color-stop(100%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-o-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-ms-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:linear-gradient(to bottom,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%)}.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger,.mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger{height:70px}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger{width:70px}.mCS-3d-dark.mCSB_scrollTools,.mCS-3d.mCSB_scrollTools{opacity:1;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_draggerRail{-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools .mCSB_draggerRail{width:8px;background-color:#000;background-color:rgba(0,0,0,.2);box-shadow:inset 1px 0 1px rgba(0,0,0,.5),inset -1px 0 1px rgba(255,255,255,.2)}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#555}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:8px}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:8px;margin:4px 0;box-shadow:inset 0 1px 1px rgba(0,0,0,.5),inset 0 -1px 1px rgba(255,255,255,.2)}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:8px;margin:4px auto}.mCS-3d.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-3d.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-3d.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1);box-shadow:inset 1px 0 1px rgba(0,0,0,.1)}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{box-shadow:inset 0 1px 1px rgba(0,0,0,.1)}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCS-3d-thick-dark.mCSB_scrollTools,.mCS-3d-thick.mCSB_scrollTools{opacity:1;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}.mCS-3d-thick-dark.mCSB_scrollTools,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer,.mCS-3d-thick.mCSB_scrollTools,.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px}.mCSB_inside+.mCS-3d-thick-dark.mCSB_scrollTools_vertical,.mCSB_inside+.mCS-3d-thick.mCSB_scrollTools_vertical{right:1px}.mCS-3d-thick-dark.mCSB_scrollTools_vertical,.mCS-3d-thick.mCSB_scrollTools_vertical{box-shadow:inset 1px 0 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.5)}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal,.mCS-3d-thick.mCSB_scrollTools_horizontal{bottom:1px;box-shadow:inset 0 1px 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.5)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:inset 1px 0 0 rgba(255,255,255,.4);width:12px;margin:2px;position:absolute;height:auto;top:0;bottom:0;left:0;right:0}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{box-shadow:inset 0 1px 0 rgba(255,255,255,.4);height:12px;width:auto}.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#555}.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{background-color:#000;background-color:rgba(0,0,0,.05);box-shadow:inset 1px 1px 16px rgba(0,0,0,.1)}.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-3d-thick-dark.mCSB_scrollTools{box-shadow:inset 0 0 14px rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal{box-shadow:inset 0 1px 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{box-shadow:inset 1px 0 0 rgba(255,255,255,.4),inset -1px 0 0 rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#777}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{background-color:#fff;background-color:rgba(0,0,0,.05);box-shadow:inset 1px 1px 16px rgba(0,0,0,.1)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical,.mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical{right:0;margin:12px 0}.mCustomScrollBox.mCS-minimal+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools.mCSB_scrollTools_horizontal{bottom:0;margin:0 12px}.mCS-dir-rtl>.mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical,.mCS-dir-rtl>.mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical{left:0;right:auto}.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger,.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger{height:50px}.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger{width:50px}.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.2);filter:"alpha(opacity=20)";-ms-filter:"alpha(opacity=20)"}.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.5);filter:"alpha(opacity=50)";-ms-filter:"alpha(opacity=50)"}.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.2);filter:"alpha(opacity=20)";-ms-filter:"alpha(opacity=20)"}.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.5);filter:"alpha(opacity=50)";-ms-filter:"alpha(opacity=50)"}.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools .mCSB_draggerRail{width:6px;background-color:#000;background-color:rgba(0,0,0,.2)}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px}.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:6px;margin:5px 0}.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:12px}.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{height:12px;margin:2px 0}.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1)}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset.mCSB_scrollTools .mCSB_draggerRail{width:12px;background-color:#000;background-color:rgba(0,0,0,.2)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px;margin:3px 5px;position:absolute;height:auto;top:0;bottom:0;left:0;right:0}.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{height:6px;margin:5px 3px;position:absolute;width:auto;top:0;bottom:0;left:0;right:0}.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:12px;margin:2px 0}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent;border-width:1px;border-style:solid;border-color:#fff;border-color:rgba(255,255,255,.2);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{border-color:#000;border-color:rgba(0,0,0,.2)}.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{background-color:#fff;background-color:rgba(255,255,255,.6)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.6)}.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.75)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9)} @charset "utf-8"; /* CSS Document */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } html { font-size: 62.5%; } body { font-family: 'Lato', sans-serif; font-size: 1.68rem; line-height: 1.5; color: #3e3e3e; letter-spacing: 0.02em; -webkit-text-size-adjust: 100%; } html[lang='ja'] body { font-family: 'メイリオ'; font-family: 'Noto Sans JP', 'メイリオ', sans-serif; } html[lang='ru'] body { font-family: Arial, Helvetica, sans-serif; } a { color: #333; text-decoration: none; } a:hover { text-decoration: underline; } body * { box-sizing: border-box; } input:hover, button:hover { hoge: none; } input::-ms-reveal { visibility: hidden; } .crpb { display: none; } footer ~ noscript + img, footer ~ script + img { display: none; } /* clearfix */ .cf:before, .cf:after { content: ' '; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } /* form set */ input, button, textarea { font-family: 'Montserrat', sans-serif; background-color: transparent; border: none; } input::-ms-clear { visibility: hidden; } html[lang='ja'] input, button, textarea { font-family: 'Montserrat', sans-serif; } button { background-color: transparent; border: none; cursor: pointer; margin: 0; padding: 0; appearance: none; } [role='button'] { cursor: pointer; } /* display*/ .dis-hide { display: none !important; } .dis-blo { display: block; } @media all and (min-width: 740px) { body { min-width: 1096px; } .pc-disnon { display: none !important; } } @media screen and (max-width: 739px) { .sp-disnon { display: none !important; } } /* */ .mgtNo { margin-top: 0px !important; } .mgtXS { margin-top: 16px !important; } .mgtS { margin-top: 24px !important; } .mgtM { margin-top: 32px !important; } .mgtL { margin-top: 48px !important; } .mgtL1 { margin-top: 50px !important; } .mgtXL { margin-top: 64px !important; } .mgtXXL { margin-top: 96px !important; } @media screen and (max-width: 739px) { .mgtNo { margin-top: 0px !important; } .mgtXS { margin-top: 8px !important; } .mgtS { margin-top: 16px !important; } .mgtM { margin-top: 24px !important; } .mgtL { margin-top: 32px !important; } .mgtXL { margin-top: 48px !important; } .mgtXXL { margin-top: 64px !important; } } /**/ .floatL { float: left; } .floatR { float: right; } /**/ .header-wrap, .login-wrap { position: relative; z-index: 9990; } .unit-overlay { background: rgba(40, 40, 40, 0.84); position: fixed; top: 0; left: 0; width: 100%; min-width: 100vw; height: 100%; min-height: 100vh; z-index: 9980; } /**/ [data-sticky='true'] ~ .contents-wrap { padding-top: 152px; } @media screen and (max-width: 739px) { [data-sticky='true'] ~ .contents-wrap { padding-top: 180px; } } /* header */ .header-wrap { background-color: #000; color: #fff; } .header-wrap a:focus, .header-wrap button:focus { outline: 1px solid #757575; } .header-wrap .header-unit { width: 1096px; margin: 0 auto; display: table; height: 72px; position: relative; } .header-wrap .header-unit .header-box { display: table-cell; vertical-align: middle; } .header-wrap .header-unit .header-box .logo-wrap { position: relative; margin-right: 13px; } .header-wrap .header-unit .header-box .logo-wrap:hover { text-decoration: none; } .header-wrap .header-unit .header-box .logo-wrap:after { content: ''; display: inline-block; width: 1px; height: 19px; background-color: #bfbfbf; top: 50%; margin-left: 14px; } .header-wrap .header-unit .header-box img { vertical-align: bottom; } .header-wrap .header-unit .search-box button:hover { background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_search_gd.svg) 0 0 no-repeat; } .header-wrap .header-unit .search-box button:hover img { opacity: 0; } .header-wrap .header-unit .header-box a { display: inline-block; } .header-wrap .header-unit .header-box a > span { line-height: 23px; } [lang='ja'] .header-wrap .header-unit .header-box a > span { line-height: 25px; } .header-wrap .header-unit .header-box a .header-logo-jal { width: 331px; height: 32px; } .header-wrap a, .header-wrap button { color: #e6e6e6; text-transform: uppercase; } .header-wrap .header-top-navigation { transition: all 0.5s linear; font-size: 0; text-align: right; } .header-wrap .header-top-navigation > li { display: inline-block; font-size: 1.17rem; margin-left: 22px; font-weight: 700; vertical-align: middle; height: 24px; } .header-wrap .header-top-navigation > li:last-child { margin-left: 18px; } [data-login='true'] .header-wrap .header-top-navigation > li:last-child { margin-left: 46px; } .header-wrap .header-top-navigation > li:first-child { margin-left: 0; margin-right: 22px; } [data-login='false'] .header-wrap .header-top-navigation > li:first-child { margin-right: 10px; } .header-wrap .header-top-navigation > li:nth-child(2) { margin-left: 0; } .header-wrap .header-top-navigation > li > button { font-weight: 700; font-size: 1.17rem; height: 24px; vertical-align: bottom; } .header-wrap .header-top-navigation > li img { vertical-align: bottom; } .header-wrap .header-top-navigation > li > button:hover, .header-wrap .header-top-navigation > li a:hover { color: #d9b064; text-decoration: none; } @media screen and (min-width: 740px) { .header-wrap .header-top-navigation > li .login-Judg .status-login { padding: 1px 16px 3px 16px; color: #fff; background: #8c713f; border-radius: 50px; vertical-align: top; } /*.header-wrap .header-top-navigation > li .login-Judg span { padding: 1px 16px 3px 16px; color: #fff; border-radius: 50px; vertical-align: top; } .header-wrap .header-top-navigation > li .login-Judg .status-login { background: #8c713f; } .header-wrap .header-top-navigation > li .login-Judg .status-logout { border: 1px solid #fff; }*/ [lang='ko'] .header-wrap .header-top-navigation > li .login-Judg span, [lang='th'] .header-wrap .header-top-navigation > li .login-Judg span { padding: 3px 16px; } .header-wrap .header-top-navigation > li .login-Judg .status-login:hover { background: #9c6d16; } /*.header-wrap .header-top-navigation > li .login-Judg .status-logout:hover { background: #9c6d16; border: 1px solid #9c6d16; }*/ .header-wrap .header-top-navigation > li .link-other{ line-height: 23px; } [lang="ko"] .header-wrap .header-top-navigation > li .link-other{ line-height: 24px; } [lang="zh-CN"] .header-wrap .header-top-navigation > li a, [lang="zh-HK"] .header-wrap .header-top-navigation > li a, [lang="zh-TW"] .header-wrap .header-top-navigation > li a { line-height: 24px; } .header-wrap .header-top-navigation > li .link-other .alt-icon img { vertical-align: top; } } @media screen and (max-width: 739px) { [data-login="true"] .header-wrap .header-unit .login-btn { display: none !important; } .header-wrap .header-unit .login-btn a > span { font-size: 1.17rem; line-height: 23px; } .header-wrap .header-unit .login-btn > .login-Judg { display: inline-block; position: absolute; top: 12px; right: 58px; text-transform: uppercase; color: #E6E6E6; } [lang="ko"] .header-wrap .header-unit .login-btn > .login-Judg, [lang="th"] .header-wrap .header-unit .login-btn > .login-Judg{ top: 14px; } .header-wrap .header-unit .login-btn > .login-Judg .status-login { padding: 1px 16px 3px 16px; color: #fff; background: #8c713f; border-radius: 50px; vertical-align: top; } [lang="ko"] .header-wrap .header-unit .login-btn > .login-Judg .status-login, [lang="th"] .header-wrap .header-unit .login-btn > .login-Judg .status-login { padding: 3px 16px; } .header-wrap .header-unit .login-btn > .login-Judg .status-login:hover { background: #9c6d16; } .header-wrap .navigation li .link-other .alt-icon img{ vertical-align: top; } } .header-wrap .navigation { display: block; } .header-wrap .navigation ul { font-size: 0; text-align: right; } .header-wrap .navigation ul li { display: inline-block; font-size: 1.4rem; margin-left: 33px; padding-top: 2px; } .header-wrap .navigation ul li:first-child { margin-left: 0; } .header-wrap .navigation ul li a { text-decoration: none; transition: all 0.1s ease; } .header-wrap .navigation ul li a:hover { color: #d9b064; } .header-wrap .navigation ul li a[aria-current='page'] { color: #a46a00; font-weight: 700; } .header-wrap .navigation ul li.nav-faq, .header-wrap .navigation ul li.nav-help { display: none; } .header-wrap .navigation ul li.nav-faq a{ text-transform: initial; } .header-wrap .header-logo-oneworld { width: 35px; height: auto; } .header-wrap .icon-world { position: relative; display: flex; align-items: center; } .header-wrap .icon-world:hover .icon_bg_world { fill: #d9b064; } .search-box { position: relative; } .search-box input { display: none; } .search-box form { position: relative; height: 100%; } .search-box span { display: inline-block; position: absolute; top: 0; right: 0; width: 24px; height: 24px; } .search-box span img, .search-box span button { width: 100%; height: 100%; } .search-box.on-focus { width: 312px; border-bottom: 1px solid #9c6d16; } .search-box.on-focus input { display: inline-block; } .search-box.on-focus input[type='text'] { height: 100%; color: #fff; width: 100%; } .header-wrap .header-unit .gnavi-btn, .header-wrap .header-unit .login-btn { display: none; } .search-box input { display: none; } [data-login='false'] .login-Judg span:last-child { display: none; } [data-login='true'] .login-Judg span:first-child { display: none; } [data-login='false'] .header-wrap .header-unit .gnavi-notification { display: none; } [data-login='true'] .header-wrap .header-unit .gnavi-notification { display: block; position: absolute; top: 11px; right: 63px; } [data-login='true'] [data-gheader='min'] .header-wrap .header-unit .gnavi-notification { top: 50%; transform: translateY(-50%); } [data-sticky='true'] { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 9999; transform: translate3d(0, 0, 0); } [data-sticky='false'] { position: static; } [data-gheader='min'] .header-wrap .header-unit { transition: all 0.6s linear; height: 52px; } [data-gheader='min'] .navigation { display: none; animation: sticky-out 0.6s linear 0s forwards; } [data-gheader='simple'] .header-wrap .header-unit { height: 52px; } [data-gheader='simple'] .header-wrap .header-top-navigation, [data-gheader='simple'] .navigation, [data-gheader='simple'] .header-wrap .header-unit .gnavi-notification { display: none; } @keyframes sticky-out { 0% { opacity: 1; } 100% { opacity: 0; } } @media screen and (max-width: 739px) { [data-gheader='min'] .header-wrap .header-unit, [data-gheader='simple'] .header-wrap .header-unit { height: auto; } [data-gheader='min'] .navigation { display: block !important; animation: none; } [data-gheader='simple'] .header-wrap .header-top-navigation, [data-gheader='simple'] .navigation { display: flex; } [data-gheader='simple'] .header-wrap .header-unit .gnavi-btn, [data-gheader='simple'] .header-wrap .header-unit .gnavi-btn + .header-box { display: none; } [data-login='true'] .header-wrap .header-unit .gnavi-notification { top: 13px; } [data-login='true'] [data-gheader='min'] .header-wrap .header-unit .gnavi-notification { top: 13px; transform: translateY(0); } .header-wrap .header-unit { display: block; position: relative; width: 100%; height: auto; margin: 0px; } .header-wrap .header-unit .gnavi-btn, .header-wrap .header-unit .login-btn { display: block; } .header-wrap .header-unit .gnavi-expanded { display: block; width: 32px; height: 32px; position: absolute; top: 8px; right: 16px; z-index: 10; } .header-wrap .header-unit .header-box { display: flex; flex-direction: column; width: 100%; height: calc(100vh - 48px); } .header-wrap .header-unit .header-box:first-child { height: 48px; } .header-wrap .header-unit .header-box .icon-oneworld { display: none; } .header-wrap .header-unit .header-box .logo-wrap { width: 176.99px; margin: 10.25px 0 0 16.25px; } .header-wrap .header-unit .header-box .logo-wrap::after { display: none; } .header-wrap .header-unit .header-box .logo-wrap img { width: 100%; } .header-wrap .header-unit .header-box a { font-family: 'Noto Sans JP', 'メイリオ', sans-serif; letter-spacing: 0.7px; width: 100%; } .header-wrap .header-unit .header-box a .header-logo-jal { height: auto; } .header-wrap .header-top-navigation { display: flex; flex-flow: row wrap; /*order:2;*/ text-align: left; margin-top: 25px; } .header-wrap .header-top-navigation > li { height: auto; margin: 0px !important; } .header-wrap .header-top-navigation > li:nth-child(2) { display: flex; align-items: center; background: #3e3e3e; width: 75%; height: 48px; position: relative; /*order:2;*/ padding-left: 36px; } .header-wrap .header-top-navigation > li:nth-child(2):after { content: ''; display: block; border-right: 1px solid #bfbfbf52; position: absolute; top: 0px; right: 0px; height: 48px; } /*.header-wrap .header-top-navigation > li:nth-child(2){position:absolute;top:12px;right:72px; z-index:10;}*/ .header-wrap .header-top-navigation > li:nth-child(4) { display: flex; align-items: center; background: #3e3e3e; text-align: center; height: 48px; /*order:3;*/ width: 25%; justify-content: center; } .header-wrap .header-top-navigation > li:nth-child(4) a { width: 100%; } .header-wrap .header-top-navigation > li > button { display: inline-block; width: 24px; } .header-wrap .header-top-navigation > li > button.icon-world { display: flex; } .header-wrap .header-top-navigation > li > button:first-child { position: relative; } .header-wrap .header-top-navigation > li:first-child > button:after { content: ''; width: 8px; height: 8px; border: 0px; border-top: solid 2px #bfbfbf; border-right: solid 2px #bfbfbf; transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; right: 16px; } .header-wrap .header-top-navigation .search-box { width: 100%; padding: 0 16px; margin-bottom: 30px !important; } .header-wrap .icon-world { width: 100% !important; text-align: left; } .header-wrap .navigation { display: flex; padding: 30px 16px; /*order:1;*/ } .header-wrap .navigation ul { text-align: left; width: 100%; height: calc(100vh - 245px); overflow: scroll; } .header-wrap .navigation ul li { display: block; padding: 15.9px 0; margin: 0; } .header-wrap .navigation ul li:first-child { margin-top: 0px; } .header-wrap .navigation ul li.nav-faq, .header-wrap .navigation ul li.nav-help { display: block; } .header-wrap .navigation ul li.nav-faq span, .header-wrap .navigation ul li.nav-help span { font-size: 0.97rem; } .search-box.on-focus { border: none; } .search-box span { top: 5px; } .search-box input { display: inline-block !important; border-bottom: 2px solid #bfbfbf; border-radius: 0px; color: #fff; transition: all 0.4s ease; width: 100%; padding: 5px 0 8px 8px; font-size: 16px; } .search-box input:focus { border-color: #a46a00; } .search-box input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #000 inset; -webkit-text-fill-color: #fff !important; } } /* footer */ [data-footer='simple'] .footer-wrap { padding: 0; } [data-footer='simple'] .footer-wrap .footer-line { margin: 0; } .footer-wrap { background-color: #000; color: #fff; padding: 80px 0 0; } .footer-wrap a { color: #fff; } .footer-wrap a:hover { text-decoration: none; color: #d9b064; } .footer-wrap .footer-inr { display: flex; width: 1096px; margin: 0 auto; } .footer-wrap .footer-inr.footer-next-inr { margin-top: 50px; } .footer-wrap .footer-inr .sns-box { margin-left: 44px; } .footer-wrap .footer-inr .sns-box .qrBox{ position: relative; } .footer-wrap .footer-inr .sns-box .qrBox .qr{ display: none; position: absolute; width: 124px; height: 124px; top: -164px; left:63px; } .footer-wrap .footer-inr .sns-box .qrBox .qr img{ width: 100%; } .footer-wrap .footer-inr .category-box { width: 100%; } .footer-wrap .footer-inr .category-box-in { display: flex; } .footer-wrap .footer-inr .category-box-in > div { min-width: 160px; margin-left: 80px; } .footer-wrap .footer-inr .category-box-in > div:first-child { margin-left: 0; } .footer-wrap .category-title { position: relative; font-weight: 700; font-size: 1.2rem; text-transform: uppercase; } .footer-wrap .category-title { font-family: 'Montserrat', sans-serif; } .footer-wrap .category-list { font-size: 1.2rem; margin-top: 8px; font-family: 'Lato', sans-serif; } .footer-wrap .category-list li { line-height: 2.2; } .footer-wrap .category-list a { color: #d5d5d5; display: inline-block; } .footer-wrap .category-list a:hover { color: #d9b064; } .footer-wrap .category-list a:hover::after { background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_link_other_dkgd.svg) 0 0 no-repeat; } .footer-wrap .category-list a object { pointer-events: none; } /* Commented by PS*/ /* .footer-wrap .category-list a svg:hover{fill:#9C6D16;} */ .footer-wrap .footer-inr .sns-box .category-title { font-family: 'Montserrat', sans-serif; font-size: 2rem; } .footer-wrap .footer-inr .sns-box .category-list { display: flex; font-size: 0; margin-top: 20px; } .footer-wrap .footer-inr .sns-box .category-list li { display: inline-block; margin-left: 23px; } .footer-wrap .footer-inr .sns-box .category-list li:first-child { margin-left: 0; } .sns-icon:hover svg { fill: #9c6d16; transition: 0.2s; } .footer-wrap .footer-inr .footer-logo { width: 72px; height: auto; } .footer-wrap .footer-inr .news-box { vertical-align: middle; text-align: right; font-family: 'Montserrat', sans-serif; text-transform: uppercase; } .footer-wrap .footer-inr .news-box a { border: 1px solid #939393; border-radius: 4px; font-weight: 700; padding: 20px 80px 19px 24px; font-size: 1.4rem; display: inline-block; } .footer-wrap .footer-inr .news-box a > span { display: inline-block; max-width: 216px; min-width: 189px; text-align: left; line-height: 1.4; } .footer-wrap .footer-inr .news-box .bg-news-icon { right: 5%; top: 25%; } .footer-wrap .footer-inr .award-unit { display: flex; } .footer-wrap .footer-inr .award-box { display: table; } .footer-wrap .footer-inr .award-box:not(:first-child) { margin-left: 44px; } .footer-wrap .footer-inr .award-box .award-logo, .footer-wrap .footer-inr .award-box .award-text { display: table-cell; vertical-align: middle; } .footer-wrap .footer-inr .award-box .award-text { text-transform: uppercase; font-weight: 700; font-size: 1.4rem; padding-left: 16px; width: 148px; line-height: 1.4; font-family: 'Montserrat', sans-serif; } .footer-line { background-color: #8c713f; width: 100%; height: 1px; display: block; border: none; margin: 75px 0 0; } .footer-line + .footer-inr { padding: 20px 0; text-align: right; } .footer-inr .copyright { font-size: 1.2rem; color: #d5d5d5; padding-right: 25px; font-family: 'Lato', sans-serif; } .footer-logo-jal { width: 200px; vertical-align: middle; } html[lang='ja'] .footer-wrap .category-list, html[lang='ja'] .footer-wrap .footer-inr .news-box, html[lang='ja'] .footer-wrap .footer-inr .award-box .award-text, html[lang='ja'] .footer-inr .copyright { font-family: 'Noto Sans JP', 'メイリオ', sans-serif; } /* news letter & BusinessJET bnr area */ .footer-wrap .footer-bnrlist{display:block;} .footer-wrap .footer-inr.footer-bnrlist:before, .footer-wrap .footer-inr.footer-bnrlist:after{content:"";display:table;} .footer-wrap .footer-inr.footer-bnrlist:after{clear:both;} .footer-wrap .footer-inr.footer-bnrlist{*zoom:1;} .footer-bnrlist > div{float:left;max-width:352px;} .footer-bnrlist > div .footer-inr{display:block;max-width:352px;} .footer-bnrlist > div .news-box{margin-right:30px;} .footer-bnrlist .businessjet_bnt{margin-top:50px;} .footer-bnrlist .businessjet_bnt img{vertical-align:bottom;width:322px;} @media screen and (max-width: 739px) { .footer-wrap { padding-top: 30px; } .footer-wrap .footer-inr { display: block; width: 100%; padding: 0 16px; } .footer-wrap .category-list { margin-top: 0px; } .footer-wrap .footer-inr .category-box { display: block; } html[lang='en'] .footer-wrap .footer-inr .category-box-in > div:nth-child(-n + 3) { flex: inherit; } html[lang='en'] .footer-wrap .footer-inr .category-box-in > div:nth-child(4) { margin-top: 0; } html[lang='en'] .footer-wrap .footer-inr .category-box-in > div:nth-child(4) .category-list { column-count: inherit; column-gap: inherit; } .footer-wrap .footer-inr .category-box-in { display: block; width: 100%; } .footer-wrap .footer-inr .category-box-in > div div { border-bottom: 1px solid #bfbfbf; width: 100%; padding: 15px 0; } .footer-wrap .footer-inr .category-box-in > div { margin: 0; } .footer-wrap .footer-inr .category-box-in [aria-hidden='false'] { border-color: #a46a00; } .footer-wrap .category-title { display: block; position: relative; padding: 6.31px 50px 6.31px 0; } .footer-wrap .category-title span { display: block; font-size: 0; width: 24px; height: 24px; background: url('../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_open_ftr.png') center center no-repeat; background-size: 20px 20px; position: absolute; top: 3px; right: 6px; } .footer-wrap .footer-inr .category-box-in > .footerLinksList div.fnavi-expanded .category-title > span { background: url('../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_close_ftr.png') center center no-repeat; } .footer-wrap .footer-inr .sns-box { display: block; padding: 0px; text-align: left; margin-top: 41.69px; margin-left: 0; } .footer-wrap .footer-inr .sns-box .category-list { justify-content: initial; } .footer-wrap .footer-inr .sns-box .category-list li svg { width: 32px; height: 32px; } .footer-wrap .footer-inr .sns-box .category-list li:first-child { margin-left: 0px; } .footer-wrap .footer-inr.footer-next-inr { display: flex; flex-flow: row wrap; margin-top: 0px; } .footer-wrap .footer-inr .award-unit { display: block; /*order:2;*/ margin-top: 48px; } .footer-wrap .footer-inr .award-box { display: block; width: 100%; } .footer-wrap .footer-inr .award-box:not(:first-child) { margin: 22.78px 0 0 0; } .footer-wrap .footer-inr .award-box .award-text { width: 100%; } .footer-wrap .footer-inr .footer-logo { width: 56px; } .footer-wrap .footer-inr .news-box { display: block; order: 1; text-align: left; margin-top: 32.94px; margin-left: 0; width: 100%; } .footer-wrap .footer-inr .news-box a { width: 100%; } .footer-line { margin-top: 44.87px; } .footer-line + .footer-inr { display: flex; flex-flow: row wrap; padding: 16.85px 16px 61.78px 16px; max-width:345px; margin-left:0; } .footer-inr .copyright { order: 2; margin-top: 8px; padding-right: 0; } .footer-inr .copyright + * { padding-right: 25px; } .footer-line + .footer-inr > span { order: 1; } .footer-wrap .footer-inr .category-box-in > div .category-list { display: none; } .footer-wrap .footer-inr .category-box-in > .footerLinksList div.fnavi-expanded { border-color: #a46a00; } .footer-wrap .footer-inr .category-box-in > .footerLinksList div.fnavi-expanded .category-list { display: block; } .footer-logo-jal { width: 239px; } .footer-logo-oneworld { width:23px; margin-left:15px; display:inline-block; vertical-align:middle; } /* news letter & BusinessJET bnr area */ .footer-bnrlist .footer-bnrinr-box{padding:0px;} .footer-bnrlist > div{float:none;max-width:100%;width:100%;margin-right:0px;} .footer-bnrlist > div .footer-inr{max-width:auto;} .footer-bnrlist .businessjet_bnt{margin-top:20px;} .footer-bnrlist .businessjet_bnt img{vertical-align:bottom;width:100%;} .footer-wrap .footer-inr.footer-bnrlist .footer-inr{padding:0px;} .footer-bnrlist > div .news-box{margin-right:0px;} } /* Aria select */ [data-unit='modal'].mdl-aria-select .modal-inr-cont { max-width: 648px; padding: 80px 20px 64px; } [data-unit='modal'].mdl-aria-select .modal-inr-cont .aria-head { font-family: 'Montserrat', sans-serif; color: #282828; font-size: 2.02rem; font-weight: 700; text-align: center; } [data-unit='modal'].mdl-aria-select .aria-select { margin: 46px auto 0; } [data-unit='modal'].mdl-aria-select .aria-select .on-select { color: #3e3e3e; font-size: 1.68rem; text-align: left; margin: 0 auto; overflow: hidden; } [data-unit='modal'].mdl-aria-select .aria-submit { text-align: center; margin-top: 40px; } .language-btn-unit { padding: 40px 16px 0; font-size: 0; text-align: center; } .language-btn-unit li { display: inline-block; position: relative; margin: 0 8px 8px 0; } .language-btn-unit input[type='radio'] { position: absolute; width: 100%; height: 100%; margin: 0; border-radius: 0; z-index: -1; } .language-btn-unit input[type='radio'] + label { background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/bg_book_marker_radio_off.svg) no-repeat 8px center; cursor: pointer; display: inline-block; background-color: #bfbfbf; color: #3e3e3e; border-radius: 4px; padding: 8px 16px 8px 31px; } .language-btn-unit input[type='radio']:checked + label { background-image: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/bg_book_marker_radio_on.svg); background-color: #f0e9db; } @media screen and (max-width: 739px) { .language-btn-unit { text-align: left; } } /* go top */ .c-pagetop { display: none; } @media screen and (max-width: 739px) { .c-pagetop { position: relative; z-index: 1; } .c-pagetop a { display: flex; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.9); border-radius: 6px 0 0 6px; border: 1px solid #8c713f; border-right: 0px; width: 64px; height: 56px; z-index: 10020; position: fixed; bottom: 24px; right: 0px; } .c-pagetop a:focus { outline: 1px solid #cc0000; outline-offset: -6px; } .c-pagetop svg { width: 8px; height: 16px; transform: rotate(-90deg); } } /* layout */ .contents-wrap { min-height: 600px; background-color: #f2f1ef; } .contents-body { width: 100%; } .contents-inner { width: 1096px; margin: 0 auto; } [class^='title-level'] { line-height: 1.25; font-family: 'Montserrat', sans-serif; } .title-level-1 { font-size: 4.18rem; font-weight: 400; } .title-level-2 { font-size: 3.48rem; font-weight: 600; } .title-level-3 { font-size: 2.9rem; font-weight: 400; } .title-level-4 { font-size: 2.42rem; font-weight: 400; } .title-level-5 { font-size: 2.02rem; font-weight: 700; } [class^='text-'] { line-height: 1.5; font-family: 'Lato', sans-serif; } html[lang='ru'] [class^='text-'] { line-height: 1.5; font-family: Arial, Helvetica, sans-serif; } .text-default { font-size: 1.68rem !important; font-weight: 400 !important; } .text-body-s { font-size: 1.4rem; } .text-eyebrow { font-size: 1.4rem; font-weight: 700; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } .text-eyebrow-s { font-size: 1.17rem; font-weight: 700; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } [class^='text-eyebrow'].eyebrow-lower { text-transform: none; } .text-fineprint { font-size: 1.17rem; font-weight: bold; font-family: 'Montserrat', sans-serif; } .text-fineprint-s { font-size: 1.17rem !important; font-weight: 400; font-family: 'Montserrat', sans-serif; } .text-technical { font-size: 0.97rem !important; } .alt-icon { display: inline-block; font-size: 0; line-height: 1; vertical-align: middle; } .alt-icon img { width: 100%; } .img-item { display: inline-block; } .img-item img { width: 100%; } .link-text { font-family: 'Montserrat', sans-serif; color: #856514; font-weight: 600; position: relative; } .link-text:hover { color: #9c6d16; text-decoration-color: #9c6d16; } .link-text::after { content: ''; display: inline-block; position: relative; top: -0.5px; width: 16px; height: 16px; margin-left: 4px; background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_text_link_s.svg) 0 0 no-repeat; vertical-align: middle; } [lang='ko'] [class*='link-text']::after, [lang='ja'] [class*='link-text']::after { top: -1.5px; } [class*='link-other'] { position: relative; } [class*='link-other']::before, [class*='link-other']::after { content: none !important; } [class*='link-other'] .alt-icon { position: relative; top: -1px; left: 1px; width: 16px; height: 16px; } .link-text-secondary-w { font-family: 'Lato', sans-serif; color: #fff; font-weight: 600; position: relative; } .link-text-secondary-w::after { content: ''; display: inline-block; position: relative; top: -0.5px; width: 9px; height: 18px; margin-left: 8px; background-image: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_text_link_wt.svg); background-repeat: no-repeat; background-position: 0 0; vertical-align: middle; } .link-text-secondary-w:hover:after { border-color: #d9b064; } .link-in-text { color: #00759d; text-decoration: underline; } .link-in-text:hover { color: #9c6d16 !important; } .link-in-text:visited { color: #40806a; } .link-other-text { position: absolute; font-size: 0; } .inr-pic p, .inr-pic [class^='title-'], .inr-pic [class^='text-'], .inr-pic [class^='link-text-'] { text-shadow: 0px 0px 3px #000000; } .bg-dark p, .bg-dark [class^='title-'], .bg-dark [class^='text-'], .bg-dark .mgtS a[class^='link-text'] { color: #fff; } .bg-dark .mgtS a[class^='link-text']:hover { text-decoration-color: #fff; } .br { display: block; } .br-secondary { display: inline-block; } .fw-n { font-weight: 400; } .fw-b { font-weight: 700; } .alL { text-align: left !important; } .alC { text-align: center !important; } .alR { text-align: right !important; } hr.line-GREY5, hr.high-spacing { border: none; background-color: #bfbfbf; height: 1px; margin: 80px 0 0; } hr.medium-spacing { margin: 50px 0 0; } hr.low-spacing { margin: 20px 0 0; } html[lang='ja'] [class^='title-level'], html[lang='ja'] [class^='text-'], html[lang='ja'] .text-eyebrow, html[lang='ja'] .text-eyebrow-s, html[lang='ja'] .link-text { font-family: 'メイリオ'; font-family: 'Noto Sans JP', 'メイリオ', sans-serif; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100%; z-index: 10010; } .modal-overlay::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(226, 231, 237, 0.9); } @media screen and (min-width: 740px) { .hov-color-bg a:hover { color: #8e610f; text-decoration-color: #8e610f; } } @media screen and (max-width: 739px) { .contents-body { max-width: 100vw; } .contents-body > .aem-Grid > *:last-child > *:first-child { padding-bottom: 112px; } } /* flex */ .fx { display: flex; } .fx-wrap { display: flex; flex-wrap: wrap; } .fx-col { display: flex; flex-direction: column; } .fx-col-btm { margin-top: auto; } .fx-btw, .flex-wrap-row { width: 100%; display: flex; align-content: space-between; justify-content: space-between; } .fx-btw-wrap, .flex-wrap-col { width: 100%; display: flex; flex-wrap: wrap; align-content: space-between; justify-content: space-between; } .fx-center { display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 739px) { .contents-inner { position: relative; width: 100%; padding: 0 16px; z-index: 1; } .title-level-1 { font-size: 3.48rem; font-weight: 400; } .title-level-2 { font-size: 2.9rem; font-weight: 600; } } /*font-color*/ .fc-WT { color: #fff; } .fc-DARK_RED { color: #930000; } .fc-DARK_GREY3 { color: #696969; } /*Deploy*/ [class^='text-'] + [class^='title-level'], [class^='title-level'] + [class^='text-'], [class^='title-level'] + p, p + p, p + [class^='text-'], [class^='text-'] + p, [class^='text-'] + [class^='text-'] { margin-top: 16px; } /*button*/ [class^='button-'] { min-width: 200px; display: inline-block; border-radius: 4px; padding: 13px 24px; text-align: center; text-transform: uppercase; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1.4rem; box-sizing: border-box; border: 1px solid #000; transition: all 0.2s ease 0s; } [class^='button-']:hover { text-decoration: none; } [class^='button-'].disabled, [class^='button-'][disabled] { background-color: #ebebeb; color: #696969; pointer-events: none; cursor: not-allowed; border: #ebebeb; } html[lang='ja'] [class^='button-'] { font-family: 'Noto Sans JP', 'メイリオ', sans-serif; } [class^='title-block'] + p { margin-top: 16px; } .title-block { font-weight: normal; } .title-block > span { display: block; } .button-block { display: block; } .button-primary { background-color: #8c713f; color: #fff; border-color: #9c6d16; text-shadow: none; } .button-primary:hover { background-color: #9c6d16; } .button-secondary { background-color: transparent; color: #000; } .button-secondary:hover { background-color: #9c6d16; border-color: #9c6d16; color: #fff; } .button-secondary-w { background-color: transparent; color: #fff; border-color: #fff; } .button-secondary-w:hover { background-color: #9c6d16; border-color: #9c6d16; color: #fff; } .button-other { position: relative; padding: 13px 48px 13px 24px; } .button-other .alt-icon { position: absolute; top: calc(50% - 12px); bottom: 0; right: 18px; margin: 0 auto; display: inline-block; width: 24px; height: 24px; } @media screen and (max-width: 739px) { [class^='button-'] { width: 100%; } } /* Tool tip */ [data-unit='tooltip'] { display: inline-block; position: relative; } [role='tooltip'] { display: none; background: #fff; box-shadow: 0px 4px 8px #dcdcdc; border-radius: 4px; color: #001e40; font-size: 1.3rem; opacity: 0; position: absolute; width: 200px; top: 50%; left: 50%; right: 0; transform: translateX(-50%); padding: 12px; z-index: 10; } [role='tooltip'][data-tipset='top'] { top: -8px; transform: translate(-50%, -100%); } [role='tooltip'][data-tipset='right'] { left: auto; right: -8px; transform: translate(100%, -50%); } [role='tooltip'][data-tipset='left'] { left: -8px; transform: translate(-100%, -50%); } [role='tooltip'][data-tipset='bottom'] { top: auto; bottom: -8px; transform: translate(-50%, 100%); } .tooltip-label:focus + [role='tooltip'], .tooltip-label:hover + [role='tooltip'] { display: inline-block; opacity: 1; animation-duration: 0.5s; animation-name: tooltip-fadein; } .tooltip-label:not(:focus):not(:hover) + [role='tooltip'] { pointer-events: none; } @keyframes tooltip-fadein { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @media screen and (max-width: 739px) { .sample-wrap { padding: 30px 20px; } [role='tooltip'] { width: 200px; } [role='tooltip'][data-tipset='right'], [role='tooltip'][data-tipset='left'], [role='tooltip'][data-tipset='bottom'] { left: 50%; top: -8px; bottom: auto; transform: translate(-50%, -100%); } } /* Inportant Notices */ /* .important-notices{background-color:#F2F1EF;padding:10px 0;} */ [data-sticky='true'] .important-notices { display: none !important; } .important-notices { position: relative; background: #f7eddb; z-index: 2; } .important-notices-inr { width: 100%; max-width: 1096px; margin: 0 auto; } .important-notices-inr li { border-top: 1px solid #bfbfbf; font-size: 1.4rem; position: relative; padding: 15.5px 0 15.5px 30px; } .important-notices-inr li:first-child { border-top: 0px; } .important-notices-inr li > span:first-child { display: inline-block; position: absolute; top: 15px; left: 2px; height: 24px; } .important-notices-inr li > a { font-size: 1.4rem; font-weight: 700; } .important-notices-inr li > a:hover { color: #8e610f; text-decoration-color: #8e610f; } .important-notices-inr li img { vertical-align: middle; } .important-notices-inr .icon-other-win { display: inline-block; width: 16px; height: 16px; } .important-notices-inr .icon-other-win img { width: 100%; height: auto; } @media screen and (max-width: 739px) { } /* Cookie policy */ .cookie-policy { display: none; background: #f2f1ef; width: 100%; padding: 16px 0; position: fixed; left: 50%; bottom: 0px; transform: translateX(-50%); z-index: 9991; } .cookie-policy.policy-fixed { position: fixed; left: 0px; bottom: 0px; z-index: 10; } .cookie-policy .cookie-policy-inr { display: flex; align-items: center; font-size: 1.4rem; width: 100%; max-width: 1096px; margin: 0 auto; } .cookie-policy .cookie-policy-inr button { height: 49px; margin-left: 24px; } @media screen and (max-width: 739px) { .cookie-policy { padding: 16px 16px 18px; } .cookie-policy .cookie-policy-inr { display: block; } .cookie-policy .cookie-policy-inr button { width: 100%; } .cookie-policy .cookie-policy-inr button { margin: 24px 0 0; } } /* Main vis */ .main-view-area { position: relative; background: #ccc; } .main-view-area .title-level-2 { font-weight: 400; } .main-view-area a:focus, .main-view-area button:focus { outline: 2px solid #cc0000; } .main-view-area.overlay:before { content: ''; display: inline-block; width: 100%; height: 379px; position: absolute; bottom: 0; left: 0; background: -moz-linear-gradient( left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 1%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100% ); background: -webkit-linear-gradient( left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 1%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100% ); background: linear-gradient( to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 1%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0) 100% ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#00000000',GradientType=1 ); } .main-view-area.jmb-unit { background: url(../../../world/commonY20/jmb/img/mian-jmb.jpg) no-repeat center center; height: 379px; background-size: cover; } .main-view-area .contents-inner-hero { position: absolute; top: 31%; width: 100%; } @media screen and (max-width: 1024px) { .main-view-area .contents-inner-hero { top: 31%; } } @media screen and (max-width: 739px) { .main-view-area .contents-inner-hero { top: auto; left: 0; bottom: 51.02px; transform: translateY(0); width: auto; padding: 0 16px; } } .main-view-area .contents-inner-hero .mv-details { text-shadow: 0px 0px 3px #000000; } .main-view-area .contents-inner-hero .mv-details .text-eyebrow-s { display: inline-block; line-height: 2; } .main-view-area.home-unit { overflow: hidden; } .main-view-area.home-unit .main-slide-box [class^='slide-'] { height: 598px; background-size: cover; background-repeat: no-repeat; background-position: center; } .main-slide-box [class^='slide-'] .mv-slide-inr { width: 100%; min-height: 100%; position: absolute; top: 43%; } @media screen and (max-width: 739px) { .main-slide-box [class^='slide-'] .mv-slide-inr { top: 50%; left: 0; } } .main-slide-box [class^='slide-'] .overlay { width: 100%; position: absolute; height: 100%; top: 0; background: -webkit-linear-gradient( top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100% ); background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100% ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); } @media screen and (max-width: 739px) { .main-slide-box [class^='slide-'] .mv-slide-inr:after { left: -6%; transform: none; } } .main-slide-box [class^='slide-'] .mv-details { z-index: 60; } .main-slide-box [class^='slide-'] .mv-details > .slide-head { font-size: 3.48rem; font-weight: 400; margin-bottom: 55px; } /* main vis slick custom */ .slick-dotted.slick-slider { margin-bottom: 0 !important; } .main-view-area.home-unit .mainVisualItemBtn { position: absolute; right: 50%; bottom: 50px; transform: translateX(546px); z-index: 999; } .main-view-area.home-unit .mainVisualItemBtn ul { display: flex; align-items: center; } .main-view-area.home-unit .mainVisualItemBtn li { margin-left: 24px; } .main-view-area.home-unit .mainVisualItemBtn li button { background: #fff; height: 8px; width: 32px; display: block; font-size: 0; transition: all 0.5s ease; } .main-view-area.home-unit .mainVisualItemBtn li.slick-active button { width: 88px; background: #8c713f; } .main-view-area.home-unit .mainVisualItemBtn li button.pauseBtn { display: block; width: 24px; height: 24px; background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_slide_stop.svg) no-repeat 0 0; background-size: 24px 24px; transition: none; } .main-view-area.home-unit .mainVisualItemBtn li button.startBtn { display: block; width: 24px; height: 24px; background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_slide_start.png) no-repeat 0 0; background-size: 24px 24px; transition: none; } .main-view-area.home-unit .mainVisualItemBtn li:first-child { order: 2; } .main-view-area.home-unit .mainVisualItemBtn li:nth-child(2) { order: 3; } .main-view-area.home-unit .mainVisualItemBtn li:nth-child(3) { order: 4; } .main-view-area.home-unit .mainVisualItemBtn li:last-child { margin-left: 0; order: 1; } @media screen and (max-width: 739px) { .main-view-area { min-height: 360px; } .main-view-area .contents-inner-hero { z-index: 60; } .main-view-area .contents-inner-hero .mv-details { top: auto; bottom: 0px; transform: translateY(0); width: 100%; padding: 0 16px; } .main-view-area.home-unit { width: 100%; } .main-view-area.home-unit .main-slide-box [class^='slide-'] { height: 480px; } .main-view-area.home-unit .main-slide-box [class^='slide-'].slide-01 { background-position: center 20%; } .main-slide-box [class^='slide-'] .mv-details > .slide-head { font-size: 2.9rem; font-weight: 400; margin-bottom: 16px; } .main-view-area.home-unit .mainVisualItemBtn { transform: translate(0); right: auto; left: 16px; bottom: 30.99px; } .main-view-area.home-unit .mainVisualItemBtn li { margin-left: 16px; } .main-view-area.overlay:before { content: ''; display: block; width: 100vw; height: 280px; position: absolute; left: 50%; transform: translateX(-50%); z-index: 50; background: -webkit-linear-gradient( top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.8) 100% ); background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.8) 100% ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); } .important-notices { padding: 0 16px 8px 16px; } } /* slick custom */ .contents-box-slider-area .slide { border-top: 4px solid #d5d5d5; overflow: hidden; position: relative; margin-top: -4px; z-index: 0; } .contents-box-slider-area .slide_inner { width: 896px; } .contents-box-slider-area .slide .slick-list { overflow: visible !important; } @media all and (min-width: 740px) { .contents-box-slider-area .slick-slide:not(.slick-active):before { display: block; content: ''; width: 100%; height: 800px; background: rgba(247, 237, 219, 0.7); position: absolute; z-index: 999; transition: 0.5s; } } @media all and (max-width: 739px) { .contents-box-slider-area .slide_inner { width: 100%; } } /* quicklink tab */ .tab-quicklink { margin-top: 64px; } .tab-quicklink [role='tablist'] { flex-wrap: wrap; width: 100%; } .tab-quicklink [role='tablist'] li { width: calc(100% / 3); } .tab-quicklink [role='tablist'] [role='tab'] { text-align: center; position: relative; padding: 90px 0 16px 0; } .tab-quicklink [role='tab'][aria-selected='true'] { font-weight: 700; } .tab-quicklink [role='tablist'] { border-bottom: 4px solid #d5d5d5; } .tab-quicklink [role='tab'] { position: relative; word-wrap: break-word; } .tab-quicklink [aria-selected='false']:after, .tab-quicklink [aria-selected='true']:after { display: block; content: ''; border-bottom: 4px solid #8c713f; width: 100%; position: absolute; left: 0px; bottom: -4px; transition: all 0.5s ease; } .tab-quicklink [aria-selected='false']:after { opacity: 0; } .tab-quicklink [role='tabpanel'] { background: #fff; padding: 6%; } .tab-quicklink .merit-lead { font-size: 2.02rem; } .tab-quicklink .merit-point { display: flex; justify-content: space-between; margin-top: 26px; } .tab-quicklink .merit-point > div { width: 31%; } .tab-quicklink .merit-point dt { font-size: 2.9rem; } .tab-quicklink .merit-point dd { font-size: 1.68rem; margin-top: 10px; } .tab-quicklink .quicklink-list { display: flex; width: 100%; } .tab-quicklink .quicklink-list li { width: calc(100% / 3 - 22px); } .tab-quicklink .quicklink-list li:nth-child(2) { margin: 0 40px; } .tab-quicklink .quicklink-list.tow { width: calc(100% / 3 * 2 - 11px); } .tab-quicklink .quicklink-list.tow li { width: calc(100% / 2 - 17px); } .tab-quicklink .quicklink-list li a.button-primary { display: block; width: 100%; margin-bottom: 24px; } @media screen and (max-width: 739px) { .tab-quicklink { margin-top: 34px; } .tab-quicklink [role='tablist'] [role='tab'] { font-size: 1.4rem; padding: 66px 4px 16px; } .tab-quicklink .quicklink-list li:nth-child(2) { margin: 0; } .tab-quicklink [role='tablist'] [role='tab']:before { background-size: 100% auto; width: 68px; height: 68px; } .tab-quicklink .quicklink-list.tow { width: 100%; } .tab-quicklink .quicklink-list.tow li { width: 100%; } .tab-quicklink .merit-point { display: block; } .tab-quicklink .merit-point > div { width: 100%; border-top: 1px solid #ccc; padding-top: 20px; margin-top: 20px; } .tab-quicklink .merit-point > div:first-child { border-top: 0px; } .tab-quicklink .quicklink-list { display: block; width: 100%; } .tab-quicklink .quicklink-list li { width: 100%; margin-bottom: 34px; } .tab-quicklink .quicklink-list li a.button-primary { display: block; width: 100%; margin-bottom: 18px; } } .col-between { display: flex; flex-direction: column; justify-content: space-between; height: 100%; width: 320px; } .jalprogram-unit.experience_jal-pg::before { background-position: 0 40%; background-image: url(../../../world/commonY20/experiencejal/img/bg_experience_jal_program.jpg); } .experience_jal-pg .jalprogram-area .jalprogram-col:first-child { color: #3e3e3e; } .lounge-service-area { position: relative; } .support-area { display: flex; position: relative; margin: 0 auto; padding: 96px 0; background: #fff; z-index: 1; } .support-area .support-col:first-child { padding: 0 124px 0 0; } .support-unit { display: flex; justify-content: space-between; padding: 48px 0; border-bottom: 1px solid #bfbfbf; } .support-unit li { width: calc(100% / 3); padding-right: 50px; } .support-area .btn-wrap { text-align: right; } .support-area .button-primary { width: 320px; } @media screen and (max-width: 739px) { .col-between { width: 100%; } .lounge-service-area { min-height: 480px; } .lounge-service-area .jalprogram-area .jalprogram-col:first-child { padding: 48px 10px 48px 0; } .jalprogram-unit.experience_jal-pg .jalprogram-area .jalprogram-col:first-child { min-height: 560px; } .support-area { padding: 20px 0 0 0; } .support-area .support-col { display: block; width: 100%; } .lounge-service-area::before { min-width: auto; } .support-area .support-col:first-child { width: 100%; padding-right: 0px; } .support-unit { display: block; padding-top: 10px; } .support-unit li { border-top: 1px solid #bfbfbf; width: 100%; padding: 24px 0 30px 0; } .support-unit li:first-child { border: none; } .support-unit li:last-child { padding-bottom: 0; } .support-area .btn-wrap { text-align: center; } .support-area .button-primary { width: 100%; } } .service-unit { display: flex; justify-content: space-around; padding: 64px 0 96px 0; } .service-unit li { text-align: center; } .service-unit li img { vertical-align: bottom; max-height: 64px; } .service-unit li a { display: block; } .service-unit li a::after { content: none; } .item-flex-box { display: table; } .item-flex-box .col { display: table-cell; vertical-align: middle; } .item-flex-box .box-inner { width: 448px; height: 500px; background-color: #fff; padding: 64px 64px 70px; box-sizing: border-box; position: relative; z-index: 1; vertical-align: top; } .item-flex-box .box-inner .text-eyebrow + p, .item-flex-box .box-inner .rte p { margin-top: 14px; } .item-flex-box .picture-box { width: 648px; position: relative; } .item-flex-box .picture-box:before, .item-flex-box .picture-box:after { content: ''; display: inline-block; width: 100%; height: 100%; background-color: #fff; position: absolute; } .item-flex-box .picture-box.left-type:before { top: 0; left: 112px; } .item-flex-box .picture-box.left-type:after { bottom: 0; left: 112px; } .item-flex-box .picture-box.right-type:before { top: 0; right: 112px; } .item-flex-box .picture-box.right-type:after { bottom: 0; right: 112px; } .item-flex-box .picture-box img { width: 100%; height: auto; vertical-align: bottom; position: relative; z-index: 1; } @media screen and (max-width: 739px) { .service-unit { flex-wrap: wrap; padding: 34px 0 64px 0; } .service-unit li { width: calc(100% / 2 - 10px); margin-bottom: 15px; } .dp-service-area .service-unit { display: block; padding: 25px 0; } .dp-service-area .service-unit li { border-top: 2px solid #bfbfbf; } .dp-service-area .service-unit li:first-child { border-top: none; } .dp-service-area .service-unit li a { display: flex; justify-content: space-around; align-items: center; padding: 20px 0; } .dp-service-area .service-unit li a span, .dp-service-area .service-unit li a p { flex-grow: 1; width: 50%; box-sizing: border-box; } .dp-service-area .service-unit li a p { text-align: left; } .dp-service-area .service-unit li a p b { display: block; width: 135px; } .dp-service-area .service-unit li a span img { width: 105px; } .dp-service-area .service-unit li:nth-of-type(2) a span img { width: 48px; } .dp-service-area + .contents-inner .service-unit { flex-wrap: wrap; padding: 45px 0; } .dp-service-area + .contents-inner .service-unit li { flex-grow: 1; width: 50%; border-left: 2px solid #bfbfbf; border-top: 2px solid #bfbfbf; } .dp-service-area + .contents-inner .service-unit li:nth-child(2n + 1) { border-left: none; } .dp-service-area + .contents-inner .service-unit li:nth-child(-n + 2) { border-top: none; } .dp-service-area + .contents-inner .service-unit li a { display: block; padding: 25px 0; } .dp-service-area + .contents-inner .service-unit li a span img { width: 48px; } .dp-service-area + .contents-inner .service-unit li a p { width: 100px; margin: 0 auto; } .dp-service-area + .contents-inner .item-flex-box { display: block; } .item-flex-box { display: block; } .item-flex-box .picture-box { z-index: -1; width: 100%; } .item-flex-box .picture-box::before, .item-flex-box .picture-box::after { width: 100vw; height: 100%; left: -16px !important; top: 28% !important; z-index: -1; } .item-flex-box .col { display: block; } .item-flex-box .box-inner { width: 100vw; height: auto; padding: 32px 16px 60px; margin-left: calc(((100vw - 100%) / 2) * -1); margin-right: calc(((100vw - 100%) / 2) * -1); } .dp-service-area + .contents-inner .item-flex-box .box-inner { margin-top: -85px; } .item-flex-box.pic-right { display: flex; flex-direction: column-reverse; } .enjoy-japan-area + .contents-inner .item-flex-box .box-inner, hr.line-GREY5 { margin: 20px 0 0; } hr.high-spacing { margin: 80px 0 0; } hr.medium-spacing { margin: 50px 0 0; } } .thumbnail-box li { display: flex; width: 100%; } .thumbnail-box .picture img { vertical-align: bottom; width: 200px; } .thumbnail-box .picture.col { min-width: 88px; } .thumbnail-box .col { vertical-align: middle; } .thumbnail-box .col:not(:first-child) { padding-left: 24px; } .thumbnail-box + div .button-block { margin-top: 40px; } .thumbnail-box.small-type { margin-top: 30px; } .thumbnail-box.small-type .picture .logo-symbol { width: 64px; } .thumbnail-box.small-type .col:not(:first-child) { flex: 1; padding-left: 24px; } .thumbnail-box.small-type li { align-items: center; margin-top: 18px; } .thumbnail-box.type-flex { display: flex; justify-content: space-between; flex-wrap: wrap; } .thumbnail-box.type-flex li { width: 49%; margin-left: 20px; } .thumbnail-box.type-flex li:first-child { margin-left: 0px; } .lines-navi { font-family: 'Montserrat', sans-serif; font-size: 0; position: relative; z-index: 1; } .lines-navi li { font-size: 1.4rem; display: inline-block; } .lines-navi li a { padding: 13px 32px; display: block; border-bottom: 4px solid #d5d5d5; transition: all 0.5s ease; } .lines-navi li a:hover { text-decoration: none; } .lines-navi li > [aria-selected='true'], .lines-navi li > [aria-current='true'] { font-weight: 600; border-bottom-color: #8c713f; } html[lang='ja'] .lines-navi { font-family: var(--primary-font-ja); } @media screen and (max-width: 739px) { .lines-navi-wrap { overflow-x: scroll; margin-top: 30px; } .lines-navi { display: flex; } .lines-navi li a { padding: 13px 30px; word-break: keep-all; display: flex; align-items: center; height: 100%; } .thumbnail-box.type-flex { display: block; } .thumbnail-box.type-flex li { width: 100%; margin: 20px 0 0; border-top: 1px solid #bfbfbf; padding: 25px 0; } .thumbnail-box.type-flex li:first-child { margin-top: 0; border-top: none; padding-top: 15px; } .thumbnail-box.type-flex .col { vertical-align: top; } .thumbnail-box .picture img { width: 100%; } } /* defult checkbox radio */ .check-form { display: inline-block; position: relative; line-height: 1.2; vertical-align: top; padding-left: 24px; margin-right: 16px; } .check-form input[type='radio'], .check-form input[type='checkbox'] { opacity: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; top: 0; left: 0; width: 14px; height: 14px; margin: 0px; } .check-form input[type='radio'] + label, .check-form input[type='checkbox'] + label { position: relative; top: 0; left: 0; } .check-form input[type='radio'] + label:before, .check-form input[type='checkbox'] + label:before { display: block; content: ''; background-color: #fff; vertical-align: middle; position: absolute; top: 0.1em; left: -24px; width: 14px; height: 14px; border: 1px solid #565656; transition: all 0.2s ease; } .check-form input[type='radio'] + label:before { border-radius: 50%; } .check-form input[type='radio'] + label:before:hover, .check-form input[type='checkbox'] + label:before:hover { cursor: pointer; } /* hover */ .check-form input[type='radio'] + label:hover, .check-form input[type='checkbox'] + label:hover { color: #666; cursor: pointer; } .check-form input[type='radio'] + label:hover:before, .check-form input[type='checkbox'] + label:hover:before { border: 1px solid #dcb773; } /* check */ .check-form input[type='radio']:checked + label:before { background-color: #d9b064; border-color: #d9b064; } .check-form input[type='checkbox']:checked + label:before { background-color: #a46a00; border-color: #a46a00; } .check-form input[type='radio']:checked + label:after, .check-form input[type='checkbox']:checked + label:after { opacity: 1; } /* focus */ .check-form input[type='radio']:focus + label:before, .check-form input[type='checkbox']:focus + label:before { border: 1px solid #dcb773; } /* check mark */ .check-form input[type='radio'] + label:after, .check-form input[type='checkbox'] + label:after { content: ''; opacity: 0; position: absolute; transition: opacity 0.2s ease-in-out; } .check-form input[type='checkbox'] + label:after { border: 1px solid #000; border-left: 0; border-top: 0; height: 8px; width: 4px; top: 0.2em; left: -18px; transform: rotate(45deg); } .check-form input[type='radio'] + label:after { background-color: #282828; border-radius: 50%; width: 8px; height: 8px; top: 0.3em; left: -20px; } .check-form input[type='radio'] + label:after:hover, .check-form input[type='checkbox'] + label:after:hover { cursor: pointer; } .contents-box-slider-area { background-color: #f7eddb; padding: 85px 0 105px; } .contents-box-slider-area .contents-group-select { display: table; } .contents-box-slider-area .contents-group-select .contents-group-title, .contents-box-slider-area .contents-group-select .group-select-body { display: table-cell; } .contents-box-slider-area .contents-group-select .contents-group-title { font-family: 'Montserrat', sans-serif; font-size: 2.02rem; padding-right: 8px; } .contents-box-slider-area .contents-group-select .group-select-body { position: relative; } .contents-box-slider-area .contents-group-select .group-select-active { border-bottom: 1px solid #9c6d16; width: 312px; cursor: pointer; padding: 5px 0; position: relative; } .contents-box-slider-area .contents-group-select .group-select-title { background: #fff; width: 312px; box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.3); padding-top: 16px; border-radius: 0 0 4px 4px; position: absolute; top: 39px; left: 0; z-index: 2; } .contents-box-slider-area .contents-group-select .group-select-title li a { padding: 8px 16px; display: block; text-decoration: none; transition: all 0.6s ease 0s; } .contents-box-slider-area .contents-group-select .group-select-title li:last-child a { border-radius: 0 0 4px 4px; } .contents-box-slider-area .contents-group-select .group-select-title li a[aria-selected='true'] { color: #9c6d16; } .contents-box-slider-area .contents-group-select .group-select-title li a:hover { background-color: #9c6d16; color: #fff; } .contents-box-slider-area .bx-wrapper { background: none; } .contents-box-slider-area .slider-box { width: 872px !important; margin: 0 12px; position: relative; /* left: -12px; */ } .contents-box-slider-area .slider-box .picture img { width: 100%; height: auto; vertical-align: bottom; } .contents-box-slider-area .slider-box .content-block { width: 487px; margin-top: 32px; } .contents-box-slider-area .slider-box .content-link { margin-top: 24px; } .contents-box-slider-area .slider-box .text-technical { margin: 20px 0 0 5px; } .contents-box-slider-area .slider-box .tripadvisor-box { position: absolute; background-color: #fff; width: 312px; box-sizing: border-box; bottom: 91px; right: 40px; } .contents-box-slider-area .slider-box .tripadvisor-box > a { display: block; padding: 30px 32px; } .contents-box-slider-area .slider-box .tripadvisor-box time { padding-left: 5px; } .contents-box-slider-area .slider-box .tripadvisor-box .text-body-s + dd, .contents-box-slider-area .slider-box .tripadvisor-box div + .text-body-s { margin-top: 8px; } .contents-box-slider-area .slider-box .tripadvisor-box div + .text-body-s + .text-body-s { margin-top: 8px; } .contents-box-slider-area .slider-box .tripadvisor-box .tripadvisor-evaluation img { width: 60px; height: auto; vertical-align: middle; } .contents-box-slider-area .slider-box .tripadvisor-box .tripadvisor-logo-type { margin-top: 30px; } .contents-box-slider-area .slider-box .tripadvisor-box .user-icon { position: absolute; top: -24px; right: 24px; width: 48px; height: 48px; padding: 8px; border-radius: 50%; overflow: hidden; } .contents-box-slider-area .slider-box .tripadvisor-box .user-icon::after { content: ''; position: absolute; top: 0; right: 0; width: 48px; height: 48px; border-radius: 50%; border: 8px solid #fff; box-sizing: border-box; } .contents-box-slider-area .slider-box .tripadvisor-box .user-icon img { width: 100%; height: auto; } html[lang='ja'] .contents-box-slider-area .contents-group-select .contents-group-title { font-family: 'Noto Sans JP', 'メイリオ', sans-serif; } .contents-box-slider-area .slider-wrap { border-top: 4px solid #d5d5d5; overflow: hidden; position: relative; margin-top: -4px; z-index: 0; } .contents-box-slider-area .slider-wrap:before { display: block; content: ''; width: 2000px; height: 800px; background: rgba(247, 237, 219, 0.7); position: absolute; top: 0px; right: 50%; z-index: 999; transform: translateX(-571px); } .contents-box-slider-area .slider-wrap:after { display: block; content: ''; width: 2000px; height: 800px; background: rgba(247, 237, 219, 0.7); position: absolute; top: 0px; left: 50%; z-index: 999; transform: translateX(348px); } .contents-box-slider-area .bx-viewport { left: calc(50% - 560px); } @media screen and (min-width: 739px) { .contents-box-slider-area .slider-box { left: -12px; } } @media screen and (max-width: 739px) { .contents-box-slider-area { padding: 48px 0 20px; margin-top: 0px; } .contents-box-slider-area > .contents-inner { padding: 0; } .contents-box-slider-area > .contents-inner .title-level-2, .contents-box-slider-area > .contents-inner .contents-group-select { padding: 0 16px; } .contents-box-slider-area .contents-group-select { display: block; margin-top: 24px; } .contents-box-slider-area .contents-group-select .contents-group-title, .contents-box-slider-area .contents-group-select .group-select-body { display: block; } .contents-box-slider-area .contents-group-select .group-select-active { width: 100%; margin-top: 12px; } html[lang='ja'] .contents-box-slider-area .contents-group-select .group-select-active { margin-top: 0; } html[lang='ja'] .contents-box-slider-area .contents-group-select .contents-group-title { margin-top: 12px; } .contents-box-slider-area .bx-viewport { left: 0; } .contents-box-slider-area .slider-box { width: calc(100vw - 0px) !important; margin: 0px; /* left: -16px; */ } .contents-box-slider-area .slider-box > div:nth-of-type(2) { display: flex; flex-direction: column; } .contents-box-slider-area .slider-box .tripadvisor-box { position: relative; width: calc(100% - 32px) !important; order: 1; margin: -32px auto 0 auto; bottom: 0; right: 0; } .contents-box-slider-area .slider-box .content-block { margin-top: 24px; width: 100%; padding: 0 16px; order: 2; } .contents-box-slider-area .slider-box .text-technical { margin-top: 48px; } .enjoy-japan-area > .contents-inner .explore-with-us-select { display: flex; align-items: center; padding: 0 16px; } .enjoy-japan-area .explore-with-us-select .explore-with-title { width: 90px; } .enjoy-japan-area .explore-with-us-select .explore-with-body { width: calc(100% - 90px); } .enjoy-japan-area .explore-with-us-select .explore-with-select { width: 100%; } } .mdl-jsc-message[data-unit='modal'] { align-items: flex-start; padding: 64px 16px; } .mdl-jsc-message .modal-inr-cont { max-width: 946px; } .mdl-jsc-message .modal-inr-box { padding: 60px 0 64px; border-radius: 6px; } .mdl-jsc-message .modal-inr-box .jsc-head { text-align: center; font-size: 2.4rem; font-weight: bold; } .mdl-jsc-message .modal-list { margin-top: 38px; } .mdl-jsc-message .modal-list li > span { display: block; border-bottom: 1px solid #c3c3c3; padding: 24px 0 40px; margin: 0 97px; font-size: 1.4rem; } .mdl-jsc-message .modal-list li > span > span { display: block; } .mdl-jsc-message .modal-list li > span .sup { display: inline-block; vertical-align: super; font-size: 0.4em; } .mdl-jsc-message .modal-list li > span strong { display: block; } .mdl-jsc-message .modal-list li a { font-size: 1.63rem; font-weight: 600; } .mdl-jsc-message .bg-gray { background: #f2f1ef; } @media screen and (max-width: 739px) { .mdl-jsc-message .modal-inr-box .jsc-head { font-size: 2.2rem; text-align: center; margin: 0; } .mdl-jsc-message .modal-list { margin-top: 24px; } .mdl-jsc-message .modal-list li > span { padding: 24px 0 24px; margin: 0 32px; } } /* Information modal */ .mdl-information .modal-inr-cont { max-width: 648px; padding: 80px 20px 64px; } .mdl-information .modal-inr-cont .area-head { font-family: 'Montserrat', sans-serif; color: #282828; font-size: 2.02rem; font-weight: 700; text-align: center; margin-bottom: 8px; } .mdl-information .info-btnlist { display: flex; justify-content: center; margin-top: 40px; } .mdl-information .info-btnlist li { margin-left: 16px; } .mdl-information .info-btnlist li:first-child { margin-left: 0px; } @media screen and (max-width: 739px) { .mdl-information .info-btnlist { flex-direction: column; margin-top: 30px; } .mdl-information .info-btnlist li { margin: 16px 0 0 0; } .mdl-information .info-btnlist li:first-child { margin-top: 0px; } } /* tab Base style */ [data-unit='tab'] [role='tablist'] { display: flex; justify-content: space-between; } [data-unit='tab'] [role='tab'] { display: block; position: relative; width: 100%; height: 100%; font-family: 'Montserrat', sans-serif; word-wrap: break-word; } [data-unit='tab'] [role='tab']:hover { text-decoration: none; } [data-unit='tab'] [aria-hidden='true'] { display: none; } [data-unit='tab'] [aria-hidden='false'] { display: block; } [data-unit='tab'] [aria-selected='true'] { pointer-events: none; cursor: default; } [data-event='JS_tabEvent'][aria-hidden='true'] { display: none; } [data-event='JS_tabEvent'][aria-hidden='false'] { display: block; } /* jmb tab */ .tab-jmbmerit [role='tablist'] { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; margin-top: 32px; } /*.tab-jmbmerit [role="tablist"]:after{display:block;content:"";border-bottom:4px solid #8C713F;position:absolute;left:0px;bottom:-4px;width:25%;transition:all 0.5s ease;}*/ .tab-jmbmerit [role='tablist'] li { flex: 1; } .tab-jmbmerit [role='tablist'] [role='tab'] { text-align: center; position: relative; padding: 76px 0 16px 0; } .tab-jmbmerit [role='tablist'] [role='tab']:before { display: block; content: ''; background-size: 88px 88px; background-repeat: no-repeat; background-position: center center; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); width: 62px; height: 62px; } .tab-jmbmerit [role='tab'][aria-selected='true'] { font-weight: 700; } .tab-jmbmerit [role='tablist'] li:first-child [role='tab']:before { background-image: url(../../../world/commonY20/jmb/img/icon_merit_tab_01.svg); } .tab-jmbmerit [role='tablist'] li:nth-child(2) [role='tab']:before { background-image: url(../../../world/commonY20/jmb/img/icon_merit_tab_02.svg); } .tab-jmbmerit [role='tablist'] li:nth-child(3) [role='tab']:before { background-image: url(../../../world/commonY20/jmb/img/icon_merit_tab_03.svg); } .tab-jmbmerit [role='tablist'] li:nth-child(4) [role='tab']:before { background-image: url(../../../world/commonY20/jmb/img/icon_merit_tab_04.svg); } .tab-jmbmerit [role='tablist'] li:first-child [role='tab'][aria-selected='true']:before { background-image: url(../../../world/commonY20/jmb/img/icon_merit_tab_01_on.svg); } .tab-jmbmerit [role='tablist'] li:nth-child(2) [role='tab'][aria-selected='true']:before { background-image: url(../../../world/commonY20/jmb/img/icon_merit_tab_02_on.svg); } .tab-jmbmerit [role='tablist'] li:nth-child(3) [role='tab'][aria-selected='true']:before { background-image: url(../../../world/commonY20/jmb/img/icon_merit_tab_03_on.svg); } .tab-jmbmerit [role='tablist'] li:nth-child(4) [role='tab'][aria-selected='true']:before { background-image: url(../../../world/commonY20/jmb/img/icon_merit_tab_04_on.svg); } .tab-jmbmerit [role='tablist'] { border-bottom: 4px solid #d5d5d5; } .tab-jmbmerit [role='tab'] { position: relative; word-wrap: break-word; } .tab-jmbmerit [aria-selected='false']:after, .tab-jmbmerit [aria-selected='true']:after { display: block; content: ''; border-bottom: 4px solid #8c713f; width: 100%; position: absolute; left: 0px; bottom: -4px; transition: all 0.5s ease; } .tab-jmbmerit [aria-selected='false']:after { opacity: 0; } .tab-jmbmerit [role='tabpanel'] { background: #fff; padding: 6%; } .tab-jmbmerit .merit-lead { font-size: 2.02rem; } .tab-jmbmerit .merit-point { display: flex; justify-content: space-between; margin-top: 26px; } .tab-jmbmerit .merit-point > div { position: relative; width: 31%; padding-bottom: calc(1.5em + 16px); } .tab-jmbmerit .merit-point dt { font-size: 2.9rem; } .tab-jmbmerit .merit-point dd { font-size: 1.68rem; margin-top: 10px; } .tab-jmbmerit .merit-point dd .link-text { display: block; position: absolute; left: 0; bottom: 0; width: 100%; color: #333; } .tab-jmbmerit .merit-point dd .link-text:hover { text-decoration-color: #333; } .tab-jmbmerit .merit-point dd .link-text::after { background-image: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_text_link_bk_s.svg); } @media screen and (max-width: 739px) { .scroll-on .tablist-wrap { width: 100%; } .tab-jmbmerit [role='tablist'] [role='tab'] { font-size: 1.4rem; padding: 66px 0 16px 0; } .tab-jmbmerit [role='tablist'] [role='tab']:before { background-size: 100% auto; width: 68px; height: 68px; } .tab-jmbmerit .merit-point { display: block; } .tab-jmbmerit .merit-point > div { width: 100%; border-top: 1px solid #ccc; padding-top: 20px; margin-top: 20px; } .tab-jmbmerit .merit-point > div:first-child { border-top: 0px; } } /* mile use */ .tab-mileuse [role='tablist'] { justify-content: flex-start; width: 100%; } .tab-mileuse [role='tablist'] li { width: auto; min-width: 135px; max-width: 200px; } /* [lang="en"] .tab-mileuse [role="tablist"] li{} */ .tab-mileuse [role='tablist'] [role='tab'] { font-size: 1.4rem; position: relative; padding: 16px 0 16px 0; display: flex; justify-content: center; align-items: center; } .tab-mileuse [role='tab'][aria-selected='true'] { font-weight: 700; } .tab-mileuse [role='tablist'] { border-bottom: 4px solid #d5d5d5; } .tab-mileuse [role='tab'] { position: relative; word-wrap: break-word; text-align: center; } .tab-mileuse [aria-selected='false']:after, .tab-mileuse [aria-selected='true']:after { display: block; content: ''; border-bottom: 4px solid #8c713f; width: 100%; position: absolute; left: 0px; bottom: -4px; transition: all 0.8s ease; } .tab-mileuse [aria-selected='false']:after { opacity: 0; } .tab-mileuse [role='tabpanel'] { padding: 36px; } .thumbnail-box-vertical.col-3 { display: flex; flex-wrap: wrap; margin-bottom: -30px; } .thumbnail-box-vertical.col-3 .flex-col { width: 32%; margin-bottom: 30px; } .thumbnail-box-vertical.col-3 .flex-col:not(:nth-child(3n+1)) { margin-left: 20px; } .thumbnail-box-vertical .picture { box-shadow: 0px 0px 10px #ccc; } .thumbnail-box-vertical .picture img { vertical-align: bottom; width: 100%; } .thumbnail-box-vertical .box-inner { position: relative; display: block; background: #fff; box-shadow: 0px 4px 8px #ccc; width: 88%; min-height: 170px; padding: 22px 24px; margin: -40px 0 0 auto; } .thumbnail-box-vertical .box-inner .exchange-list > p { font-size: 1.17rem; } .thumbnail-box-vertical .box-inner .exchange-list > dl dt { font-size: 2.02rem; font-weight: 700; margin-top: 5px; } .thumbnail-box-vertical .box-inner .exchange-list > dl dd { margin-top: 15px; } .thumbnail-box-vertical .box-inner .exchange-list > dl dd em { color: #d86664; font-style: normal; font-weight: 700; } .thumbnail-box-vertical a { display: block; } .thumbnail-box-vertical a:hover { cursor: pointer; } @media screen and (max-width: 739px) { .tab-jmbmerit [role='tablist'] { flex-wrap: nowrap; } .tab-jmbmerit [role='tablist'] li { width: calc(100% / 3); } .tab-mileuse [role='tablist'] li { width: 50%; min-width: initial; max-width: initial; } .tab-mileuse [role='tablist'].col-3 li { width: calc(100% / 3); } .tab-mileuse [role='tabpanel'] { padding: 40px 0; } .thumbnail-box-vertical .picture, .thumbnail-box-vertical .box-inner { box-shadow: none; } .thumbnail-box-vertical .box-inner { min-height: auto; } .thumbnail-box-vertical.col-3 { display: block; margin-bottom: inherit; } .thumbnail-box-vertical.col-3 .flex-col { width: 100%; margin-top: 32px; margin-bottom: inherit; } .thumbnail-box-vertical.col-3 .flex-col:first-child { margin-top: 0px; } .thumbnail-box-vertical.col-3 .flex-col:not(:nth-child(3n+1)) { margin-left: 0px; } } /* aco panel */ .aco-panel-unit { padding: 0 23px; overflow: hidden; } .aco-panel-list { display: flex; width: 100%; margin: 23.67px auto 0; max-width: 1920px; } .aco-panel-list li { outline: none; -webkit-appearance: none; -moz-appearance: none; border-left: 1px solid #fff; vertical-align: bottom; position: relative; width: 25%; height: 520px; transition: all 0.5s ease; overflow: hidden; } .aco-panel-list li:after { display: block; content: ''; background-color: rgba(0, 0, 0, 0.65); position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100%; z-index: 0; transition: opacity 1s ease; } .aco-panel-list li:before { display: block; content: ''; position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100%; z-index: 0; transition: opacity 1s ease; background: -webkit-linear-gradient( top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.8) 100% ); background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.8) 100% ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); opacity: 0; } .aco-panel-list li:first-child { border-left: 0px; } .aco-panel-list li.ev-hover { flex-grow: 1; width: 28%; } .aco-panel-list li:not(.ev-hover) { flex-grow: 1; width: 15%; } .aco-panel-list li.ev-not-select { flex-grow: 1; width: 15%; } .aco-panel-list li.ev-select { flex-grow: 1; width: 55%; } .aco-panel-list li.ev-select:after, .aco-panel-list li.ev-hover:after { opacity: 0; } .aco-panel-list li.ev-select:before { opacity: 1; } .aco-panel-list li .aco-panel-box { display: flex; align-items: flex-end; justify-content:start; width: 100%; height: 100%; z-index: 1; padding: 39.45px; left: 0; top: 0; } .aco-panel-list li .aco-panel-ttl { position: absolute; left: 50%; bottom: 88.2px; transform: translateX(-50%); z-index: 10; } .aco-panel-list li .aco-panel-inr { display: none; opacity: 0; position: relative; z-index: 10; } .aco-panel-list li.ev-select .aco-panel-inr { display: block; opacity: 1; animation: fade-in 1s both; animation-delay: 0.5s; } .aco-panel-list li:hover { cursor: pointer; } .aco-panel-list li.ev-select .aco-panel-ttl { display: none; } .aco-panel-list li.ev-select:hover { cursor: default; } .aco-panel-list li .aco-panel-inr > dl dt { color: #fff; font-weight: bold; } .aco-panel-list li .aco-panel-inr > dl dd { color: #fff; margin-top: 16.65px; } .aco-panel-list li .aco-panel-inr .aco-panel-btn { margin-top: 24.66px; color: white; } .aco-panel-list li .aco-panel-inr .aco-panel-btn a { color: white; font-weight: 600; } .aco-panel-list li .aco-panel-inr .aco-panel-btn a:hover { text-decoration-color: white; } .aco-panel-list li .aco-panel-inr .aco-panel-btn .icon { fill: white; } @keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @media screen and (max-width: 739px) { .aco-panel-unit { padding: 0; } .aco-panel-list { display: block; } .aco-panel-list li { display: block; border-left: 0px; border-bottom: 1px solid #fff; width: 100% !important; height: 160px; } .aco-panel-list li .aco-panel-box:after { display: block; content: ''; background-size: 40px 40px; background-repeat: no-repeat; background-position: 0 0; position: absolute; top: 60px; right: 24px; width: 40px; height: 40px; } .aco-panel-list li .aco-panel-box .icon { top: 60px; right: 24px; } .aco-panel-list li[aria-expanded='true'] .aco-panel-box .minus-icon { display: block; } .aco-panel-list li[aria-expanded='true'] .aco-panel-box .plus-icon { display: none; } .aco-panel-list li[aria-expanded='false'] .aco-panel-box .plus-icon { display: block; } .aco-panel-list li { flex-grow: initial !important; } .aco-panel-list li.ev-select { height: 480px; } .aco-panel-list li.ev-select:hover { cursor: pointer; } .aco-panel-list li .aco-panel-ttl { position: static; transform: none; margin-bottom: 29px; } } .aco-panel-disclaim { padding-top: 4px; font-size: 9.6px; } /* slider cards area */ .slider-cards-area { background-color: #f2f1ef; padding: 85px 0 105px; } .slider-cards-arrow .arrow-inner .arrow-prev::before { content: ''; position: absolute; right: 0; width: 1px; height: 100%; background: #bfbfbf; } .slider-cards-area .slider-cards .slider-cards-inner { overflow: visible; } .slider-cards-area .slider-cards .slick-track { display: flex !important; } .slider-cards-area .slider-cards .card { position: relative; max-width: 312px; min-width: 312px; height: auto; min-height: 320px; float: initial !important; margin-right: 24px; } .slider-cards-area .slider-cards .card > a { display: block; width: 100%; height: 100%; } .slider-cards-area .slider-cards .card > a:hover { text-decoration: none; } .slider-cards-area .slider-cards .card > a { display: block; width: 100%; height: 100%; } .slider-cards-area .slider-cards .card dl { height: 100%; padding: 40px 32px; color: #fff; } .slider-cards-area .slider-cards .card dt .text-date { display: none; margin-top: 0; } .slider-cards-area .slider-cards .card dd { border-top: 1px solid #fff; padding-top: 24px; margin-top: 16px; } .slider-cards-area .slider-cards .card dd p { font-family: 'Montserrat', sans-serif; font-size: 1.68rem; line-height: 1.5; } .slider-cards-area .slider-cards .card dd .link-text { display: inline-block; color: #fff; font-weight: normal; } .slider-cards-area .slider-cards .card dd .link-text:hover { color: #fff; } .slider-cards-area .slider-cards .card dd .link-text::after { background-image: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_text_link_wt_s.svg); } .slider-cards + div a:hover { color: #8e610f !important; text-decoration-color: #8e610f !important; } html[lang='ja'] .slider-cards-area .slider-cards .card li dd p { line-height: 1.5; } .pink01 { background: #a74849; } .pink02 { background: #c94d51; } .blue01 { background: #007faa; } .blue02 { background: #001e40; } .blue03 { background: #00001b; } .purple01 { background: #360020; } .purple02 { background: #630947; } .info-pink01 { background: #a74849; } .info-pink02 { background: #c94d51; } .info-blue01 { background: #007faa; } .info-blue02 { background: #001e40; } .info-blue03 { background: #00001b; } .info-purple01 { background: #360020; } .info-purple02 { background: #630947; } .slider-cards-arrow { position: relative; width: 1096px; height: 80px; margin: 0 auto; } .slider-cards-arrow .arrow-inner { position: absolute; right: 0; width: auto; margin-left: auto; font-size: 0; } .slider-cards-arrow .arrow-inner .slick-arrow { display: inline-block; position: relative; font-size: 0; } .slider-cards-arrow .arrow-inner .slick-arrow.slick-disabled { cursor: initial; pointer-events: none; } .slider-cards-arrow .arrow-inner .slick-arrow.slick-disabled img { opacity: 0.25; } .slider-cards-arrow .arrow-inner .arrow-prev { padding-right: 16px; } .slider-cards-arrow .arrow-inner .arrow-next { padding-left: 16px; } /* slider cards area / explorejapan */ .tips-jal-area .slider-cards-arrow { display: none; } .slider-cards-area .icon-other-win, .slider-cards-area .text-date { display: none; } @media all and (max-width: 739px) { .slider-cards-area { padding: 30px 0; } .slider-cards-area .title-level-2 { width: 90%; } html[lang='ja'].slider-cards-area .title-level-2 { width: 100%; } .slider-cards-area .slider-cards { margin-top: 40px; margin-left: 16px; } .slider-cards-area .slider-cards .card { width: calc(95vw - 16px); max-width: 328px; min-width: inherit; margin-right: 6px; } .slider-cards-arrow { display: none; } } /**/ .login-wrap { background-color: #fff; box-shadow: 0 2px 8px rgba(40, 40, 40, 0.16); } .login-wrap .login-unit { width: 1096px; margin: 0 auto; display: table; } .login-wrap .login-unit .in-box { display: table-cell; vertical-align: top; padding: 28px 0; transition: padding 0.3s linear; } [data-sticky='true'] .login-wrap .login-unit .in-box { padding: 25px 0; } .login-wrap .login-unit .login-input { width: 570px; padding-right: 40px; } .login-wrap .login-unit .login-input input { font-size: 1.68rem; border: 0px; -webkit-appearance: none; border-bottom: 1px solid #3e3e3e; padding: 3px 0 5px; border-radius: 0px; } .login-wrap .login-unit .login-input .login-erorr-txt { border: 1px solid #cc0000; color: #cc0000; font-size: 1.2rem; width: 90%; padding: 5px; margin-bottom: 20px; } .login-wrap .login-unit .login-input-box, .login-wrap .login-unit .login-input-box .inner-box { position: relative; } .login-wrap .login-unit .login-input-box label { position: absolute; top: 5px; left: 0; transition: all 0.3s ease; } .login-wrap .login-unit .login-input-box .icon-show-pass { position: absolute; bottom: -2px; right: 0px; width: 30px; height: 30px; } .login-wrap .login-unit .login-input input:focus + label { top: -15px; font-size: 1.17rem; } .login-wrap .login-unit .login-input input.has-content { padding-top: 24px; } .login-wrap .login-unit .login-input input.has-content + label { top: 0px; font-size: 1.17rem; } .login-wrap .login-unit .login-input-box input::placeholder { color: #3e3e3e; } .login-wrap .login-unit .login-input-box input:-ms-input-placeholder { color: #3e3e3e; } .login-wrap .login-unit .login-input-box input::-ms-input-placeholder { color: #3e3e3e; } .login-wrap .login-unit .login-input p + p { margin-top: 2px; } .login-wrap .login-unit .login-button-area { width: 200px; text-align: center; vertical-align: middle; } .login-wrap .login-unit .login-button-area.button-primary { border-radius: 0; } .login-wrap .login-unit .login-button-area.button-primary::after { content: ''; display: inline-block; background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_login_arw.svg) no-repeat 0 0; width: 13px; height: 16px; margin-top: -1%; margin-left: 2px; vertical-align: middle; } .login-wrap .login-unit .login-button-area.button-primary:hover { text-decoration: none; } .login-wrap .login-input-unit { display: flex; flex-wrap: wrap; } .login-wrap .login-unit .login-input .login-input-unit .input-save { width: 100%; } .login-wrap .login-unit .login-input .login-input-unit .input-save input { width: 14px; height: 14px; padding: 0; } .login-wrap .login-unit .login-input .login-input-unit .input-save label { font-size: 1.17rem; position: relative; top: 0; left: 0; } .login-input-unit .login-input-box { vertical-align: top; padding-right: 24px; } .login-input-unit .login-input-box .input-messeage { font-size: 1.17rem; color: #001e40; margin-top: 2px; background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_login_alert.svg) no-repeat 0 2px; padding-left: 17px; } .login-input-unit .login-input-box .input-error { font-size: 1.17rem; color: #cc0000; margin-top: 2px; background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_login_error.svg) no-repeat 0 0; padding-left: 17px; } .login-wrap .login-unit .login-input input, .login-input-unit .login-input-box .input-messeage, .login-input-unit .login-input-box .input-error { width: 212px; } .login-wrap .login-unit .mileage-box { display: flex; width: 770px; font-size: 1.4rem; flex-wrap: wrap; border-bottom: 1px solid #ddd; } .login-wrap .login-unit .mileage-box > dt, .login-wrap .login-unit .mileage-box > dd { width: 33.3%; padding-bottom: 16px; } .login-wrap .login-unit .message-box { display: flex; width: 770px; font-size: 1.4rem; margin-top: 16px; } .login-wrap .login-unit .message-box > dt, .login-wrap .login-unit .message-box > dd { width: 50%; } .login-wrap .login-unit .mileage-box .input-messeage { font-size: 1.17rem; color: #001e40; margin-top: 2px; background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_login_alert.svg) no-repeat 0 2px; padding-left: 17px; } .login-wrap .login-unit .sentence-unit { margin-top: 16px; } .login-wrap .login-unit .sentence-unit .text-fineprint { font-weight: normal; } .login-wrap .login-unit .sentence-unit .text-fineprint a { font-weight: bold; } [data-login-hidden='true'] .login-input-box + .login-input-box, [data-login-hidden='true'] .input-messeage, [data-login-hidden='true'] .input-error, [data-login-hidden='true'] .input-save, [data-login-hidden='true'] .sentence-unit { display: none; } .login-show { display: none; } @media screen and (max-width: 739px) { [data-sticky='true'] .login-wrap .login-unit { padding: 16px 40px; } [data-sticky='true'] .login-wrap .login-unit .login-input, [data-sticky='false'] .login-wrap .login-unit .login-input { display: block; } [data-sticky='true'] .login-wrap .login-unit .in-box { padding: 0; } .login-wrap { position: relative; z-index: 2; background: none; } .login-wrap .login-unit { display: block; width: 100%; padding: 16px 40px 0 40px; background: #fff; } .login-wrap .login-unit .in-box { display: block; padding: 0px; } .login-wrap .login-unit .login-input-box:nth-child(2) { margin-top: 47px; } .login-wrap .login-unit .login-input { width: 100%; padding-bottom: 22px; } .login-wrap .login-unit .login-input[data-login-hidden='false'] { margin-top: 10%; } .login-wrap .login-unit .login-input[data-login-hidden='false'] .login-input-unit { padding-bottom: 85px; } .login-wrap .login-unit .login-input .login-erorr-txt { width: 100%; } .login-wrap .login-unit .login-button-area { width: calc(100% + 32px); margin-left: -16px; margin-bottom: 53px; padding: 14px; } .login-wrap .login-input-unit { display: block; position: relative; margin-top: 24px; } .login-wrap .login-input-unit .login-input-box { display: block; width: 100%; padding-right: 0px; margin: 0 0 0 0; } .login-wrap .login-unit .login-input input, .login-input-unit .login-input-box .input-messeage, .login-input-unit .login-input-box .input-error { width: 100%; } .login-wrap .login-unit .login-button-area.button-primary { display: none; background-position: 64% center; } .login-wrap .login-unit .login-input[data-login-hidden='false'] + .login-button-area.button-primary { display: block; } .login-wrap .login-unit .login-input-box .icon-show-pass { right: 8px; } .login-wrap .input-save { position: absolute; bottom: 0; } .login-show { display: block; background: #fff; width: 50px; height: 50px; border-radius: 50%; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); box-shadow: 0px 4px 8px #28282829; cursor: pointer; z-index: -1; } .login-show:before { content: ''; display: block; background: #fff; width: 60px; height: 40px; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); } .login-show > svg { width: 16px; height: 16px; position: relative; bottom: -14px; z-index: 10; transform: rotate(-180deg); } [data-login-hidden='false'] .login-show { display: none; } .login-wrap.h100 { position: fixed; top: 0; width: 100%; height: auto; padding-top: 48px; overflow: auto; } .login-wrap.h100 .login-unit { padding: 24px 16px 0; } .login-wrap.h100 [class^='title-level'] { text-align: center; } } /**/ .status-unit { position: relative; margin-top: 24px; } .status-unit [aria-hidden='true'] { display: none !important; } .status-area { display: flex; align-items: flex-end; justify-content: space-between; position: absolute; bottom: 0; left: 0; width: 100%; } .status-area .status-card-button { background-color: rgba(0, 0, 0, 0.8); color: #fff; font-size: 1.17rem; text-align: center; padding: 32px 0; border-left: 1px solid #fff; width: 150px; height: 130px; } .status-area li:first-child .status-card-button { border-left: none; } .status-area .status-card-button span { display: block; } .status-area .status-card-button img { width: 64px; height: auto; } .status-area .status-card-body { background-color: #fff; width: 648px; padding: 40px; display: table; } .status-area .status-card-body .in-col { display: table-cell; vertical-align: top; } .status-area .status-card-body .in-col:not(:first-child) { padding-left: 40px; } .status-area .status-card-body .card-face { width: 136px; height: auto; } .status-area .status-check-list { margin-top: 16px; } .status-area .status-check-list li { background: url(../../../world/commonY20/jmb/img/icon_arw_r_gr.svg) no-repeat 0 center; padding-left: 20px; line-height: 1.7; } .card-type-img img { width: 100%; height: auto; vertical-align: bottom; } .one-world-box { display: flex; align-items: flex-end; } .sp-card-type-img { display: none; } .one-world-box > p { font-size: 1.4rem; font-weight: bold; } .one-world-box > p:first-child { width: 40px; margin-right: 8px; } .one-world-box > p:first-child img { width: 40px; } .status-area > li:first-child .one-world-box > p:nth-child(2) { color: #b6265e; } .status-area > li:nth-child(2) .one-world-box > p:nth-child(2) { color: #0073b4; } .status-area > li:nth-child(3) .one-world-box > p:nth-child(2) { color: #02a64f; } .status-area > li:nth-child(4) .one-world-box > p:nth-child(2) { color: #02a64f; } .status-area .status-check-list li { background-position: 0 5px !important; } .status-area .status-card-body .in-col:not(:first-child) { position: relative; } .one-world-box { position: absolute; left: 40px; bottom: 0px; } @media screen and (max-width: 739px) { .status-unit { display: flex; flex-direction: column; } .status-area { display: block; position: static; order: 2; } .card-type-img { order: 1; } .one-world-box { position: static; margin-top: 10px; } .status-area .status-card-body { display: block; width: 100%; padding: 0 24px 50px 24px; } .status-area .status-card-body .in-col { display: block; } .status-area .status-card-body .in-col:not(:first-child) { padding: 0; margin-top: 26px; } .status-area .status-card-body .in-col:nth-of-type(2) { margin-top: -65px !important; } .status-area > li { border-top: 1px solid #f2f1ef; } .status-area .status-card-button { display: flex; align-items: center; border-left: 0px; position: relative; width: 100vw; height: 96px; padding-left: 20px; padding-right: 20px; margin: 0 -16px 0 -16px; } .status-area > li:first-child .status-card-button { background: url('../../../content/dam/jal/wwwjalcojp/world/common/images/icons/bg_tab_crystal.jpg') center center no-repeat; background-size: cover; } .status-area > li:nth-child(2) .status-card-button { background: url('../../../content/dam/jal/wwwjalcojp/world/common/images/icons/bg_tab_sapphire.jpg') center center no-repeat; background-size: cover; } .status-area > li:nth-child(3) .status-card-button { background: url('../../../content/dam/jal/wwwjalcojp/world/common/images/icons/bg_tab_premier.jpg') center center no-repeat; background-size: cover; } .status-area > li:nth-child(4) .status-card-button { background: url('../../../content/dam/jal/wwwjalcojp/world/common/images/icons/bg_tab_diamond.jpg') center center no-repeat; background-size: cover; } .status-area .status-card-button:after { content: ''; background: rgba(0, 0, 0, 0.65); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .status-area .status-card-button img { z-index: 5; } .status-area .status-card-button span { margin-left: 10px; z-index: 5; } .status-area .status-check-list li { line-height: 1.4; margin-bottom: 4px; } .status-area .status-check-list li img { vertical-align: bottom; } .lineup-area .lineup-tab-body .in-col:nth-of-type(2) { margin-top: -65px !important; } .card-type-img { display: none; } } /* faq */ .faq-area { background-color: #fff; padding: 96px 0; } .faq-list { margin-top: 16px; } .faq-list li { border-bottom: 1px solid #bfbfbf; } .faq-list [role='button'] { padding: 16px 32px 16px 0; } .faq-list .dot { margin-left: -4px; } .faq-list .faq-list-title-text { flex-basis: 99%; } .faq-list .faq-list-icon-toggle-show, .faq-list .faq-list-icon-toggle-hide { display: none; } .faq-list [role='button'][aria-expanded='false'] .faq-list-icon-toggle-show { display: block; } .faq-list [role='button'][aria-expanded='true'] .faq-list-icon-toggle-hide { display: block; } .faq-list [role='button'][aria-expanded='true'] + .toggle-body { border-bottom: 1px solid #c58612; padding-bottom: 40px; margin-bottom: -1px; } .faq-list .toggle-body { margin-top: 16px; padding-right: 20%; } .faq-list .toggle-body[aria-hidden='true'] { display: none; } @media screen and (max-width: 739px) { .faq-area { padding-bottom: 0px; } .faq-list .toggle-body { padding-right: 0; } } /* -------------------- module -------------------- */ .pc-hide { display: none; } .i-dp {display: none !important;} .i-hotel-simple:not(.i-dp):not(.i-default) {display: none !important;} .i-car:not(.i-default) {display: none !important;} .i-rental:not(.i-default) {display: none !important;} .i-hire:not(.i-default) {display: none !important;} .i-activity:not(.i-default) {display: none !important;} .i-flight-rental {display: none !important;} .i-flight-hotel-rental {display: none !important;} [data-bookmaker="HOTEL"] .i-flight {display: none !important;} [data-bookmaker="HOTEL-SIMPLE"] .i-default, [data-bookmaker="HOTEL-SIMPLE"] .i-flight, [data-bookmaker="HOTEL-SIMPLE"] .i-rental, [data-bookmaker="HOTEL-SIMPLE"] .i-flight-rental, [data-bookmaker="HOTEL-SIMPLE"] .i-dp {display: none !important;} [data-bookmaker="CAR"] .i-hire, [data-bookmaker="CAR"] .i-rental, [data-bookmaker="CAR"] .i-default, [data-bookmaker="CAR"] .i-flight, [data-bookmaker="CAR"] .i-hotel-simple, [data-bookmaker="CAR"] .i-flight-rental, [data-bookmaker="CAR"] .i-dp, [data-bookmaker="RENTAL"] .i-hire, [data-bookmaker="RENTAL"] .i-rental, [data-bookmaker="RENTAL"] .i-default, [data-bookmaker="RENTAL"] .i-flight, [data-bookmaker="RENTAL"] .i-hotel-simple, [data-bookmaker="RENTAL"] .i-flight-rental, [data-bookmaker="RENTAL"] .i-dp {display: none !important;} [data-bookmaker="HIRE"] .i-activity, [data-bookmaker="HIRE"] .i-rental, [data-bookmaker="HIRE"] .i-default, [data-bookmaker="HIRE"] .i-flight, [data-bookmaker="HIRE"] .i-hotel-simple, [data-bookmaker="HIRE"] .i-flight-rental, [data-bookmaker="HIRE"] .i-dp {display: none !important;} [data-bookmaker="ACTIVITY"] .i-hire, [data-bookmaker="ACTIVITY"] .i-rental, [data-bookmaker="ACTIVITY"] .i-default, [data-bookmaker="ACTIVITY"] .i-flight, [data-bookmaker="ACTIVITY"] .i-hotel-simple, [data-bookmaker="ACTIVITY"] .i-flight-rental, [data-bookmaker="ACTIVITY"] .i-dp {display: none !important;} /* [data-bookmaker="FLIGHT-RENTAL"] .i-default, */ [data-bookmaker="FLIGHT-RENTAL"] .i-flight, [data-bookmaker="FLIGHT-RENTAL"] .i-hotel-simple, [data-bookmaker="FLIGHT-RENTAL"] .i-rental, [data-bookmaker="FLIGHT-RENTAL"] .i-dp {display: none !important;} /* [data-bookmaker="FLIGHT-RENTAL"] .i-default, */ /* [data-bookmaker="FLIGHT-HOTEL-RENTAL"] .i-dp, */ [data-bookmaker="FLIGHT-HOTEL-RENTAL"] .i-flight, [data-bookmaker="FLIGHT-HOTEL-RENTAL"] .i-hotel-simple, [data-bookmaker="FLIGHT-HOTEL-RENTAL"] .i-rental {display: none !important;} [data-bookmaker="HOTEL"] + .reservation-hide-position .i-flight {display: none !important;} [data-bookmaker="HOTEL-SIMPLE"] + .reservation-hide-position .i-default, [data-bookmaker="HOTEL-SIMPLE"] + .reservation-hide-position .i-flight, [data-bookmaker="HOTEL-SIMPLE"] + .reservation-hide-position .i-rental, [data-bookmaker="HOTEL-SIMPLE"] + .reservation-hide-position .i-flight-rental, [data-bookmaker="HOTEL-SIMPLE"] + .reservation-hide-position .i-dp {display: none !important;} [data-bookmaker="CAR"] + .reservation-hide-position .i-activity, [data-bookmaker="CAR"] + .reservation-hide-position .i-hire, [data-bookmaker="CAR"] + .reservation-hide-position .i-default, [data-bookmaker="CAR"] + .reservation-hide-position .i-flight, [data-bookmaker="CAR"] + .reservation-hide-position .i-hotel-simple, [data-bookmaker="CAR"] + .reservation-hide-position .i-flight-rental, [data-bookmaker="CAR"] + .reservation-hide-position .i-dp, [data-bookmaker="RENTAL"] + .reservation-hide-position .i-activity, [data-bookmaker="RENTAL"] + .reservation-hide-position .i-hire, [data-bookmaker="RENTAL"] + .reservation-hide-position .i-default, [data-bookmaker="RENTAL"] + .reservation-hide-position .i-flight, [data-bookmaker="RENTAL"] + .reservation-hide-position .i-hotel-simple, [data-bookmaker="RENTAL"] + .reservation-hide-position .i-flight-rental, [data-bookmaker="RENTAL"] + .reservation-hide-position .i-dp {display: none !important;} [data-bookmaker="HIRE"] + .reservation-hide-position .i-activity, [data-bookmaker="HIRE"] + .reservation-hide-position .i-rental, [data-bookmaker="HIRE"] + .reservation-hide-position .i-default, [data-bookmaker="HIRE"] + .reservation-hide-position .i-flight, [data-bookmaker="HIRE"] + .reservation-hide-position .i-hotel-simple, [data-bookmaker="HIRE"] + .reservation-hide-position .i-flight-rental, [data-bookmaker="HIRE"] + .reservation-hide-position .i-dp {display: none !important;} [data-bookmaker="ACTIVITY"] + .reservation-hide-position .i-hire, [data-bookmaker="ACTIVITY"] + .reservation-hide-position .i-rental, [data-bookmaker="ACTIVITY"] + .reservation-hide-position .i-default, [data-bookmaker="ACTIVITY"] + .reservation-hide-position .i-flight, [data-bookmaker="ACTIVITY"] + .reservation-hide-position .i-hotel-simple, [data-bookmaker="ACTIVITY"] + .reservation-hide-position .i-flight-rental, [data-bookmaker="ACTIVITY"] + .reservation-hide-position .i-dp {display: none !important;} /* [data-bookmaker="FLIGHT-RENTAL"] + .reservation-hide-position .i-default, */ [data-bookmaker="FLIGHT-RENTAL"] + .reservation-hide-position .i-flight, [data-bookmaker="FLIGHT-RENTAL"] + .reservation-hide-position .i-hotel-simple, [data-bookmaker="FLIGHT-RENTAL"] + .reservation-hide-position .i-rental, [data-bookmaker="FLIGHT-RENTAL"] + .reservation-hide-position .i-dp {display: none !important;} /* [data-bookmaker="FLIGHT-RENTAL"] + .reservation-hide-position .i-default, */ /* [data-bookmaker="FLIGHT-HOTEL-RENTAL"] + .reservation-hide-position .i-dp, */ [data-bookmaker="FLIGHT-HOTEL-RENTAL"] + .reservation-hide-position .i-flight, [data-bookmaker="FLIGHT-HOTEL-RENTAL"] + .reservation-hide-position .i-hotel-simple, [data-bookmaker="FLIGHT-HOTEL-RENTAL"] + .reservation-hide-position .i-rental {display: none !important;} [data-bookmaker="DEFAULT"] *:not(.hide-ct).i-default, [data-bookmaker="DEFAULT"] + .reservation-hide-position .i-default, [data-bookmaker="FLIGHT"] *:not(.hide-ct).i-default, [data-bookmaker="FLIGHT"] + .reservation-hide-position .i-default, [data-bookmaker="HOTEL"] *:not(.hide-ct).i-dp, [data-bookmaker="HOTEL"] + .reservation-hide-position .i-dp, [data-bookmaker="HOTEL-SIMPLE"] *:not(.hide-ct).i-hotel-simple, [data-bookmaker="HOTEL-SIMPLE"] + .reservation-hide-position .i-hotel-simple, [data-bookmaker="CAR"] *:not(.hide-ct).i-car, [data-bookmaker="CAR"] *:not(.hide-ct).i-rental, [data-bookmaker="CAR"] + .reservation-hide-position .i-car, [data-bookmaker="CAR"] + .reservation-hide-position .i-rental, [data-bookmaker="RENTAL"] *:not(.hide-ct).i-car, [data-bookmaker="RENTAL"] *:not(.hide-ct).i-rental, [data-bookmaker="RENTAL"] + .reservation-hide-position .i-car, [data-bookmaker="RENTAL"] + .reservation-hide-position .i-rental, [data-bookmaker="HIRE"] *:not(.hide-ct).i-car, [data-bookmaker="HIRE"] *:not(.hide-ct).i-hire, [data-bookmaker="HIRE"] + .reservation-hide-position .i-car, [data-bookmaker="HIRE"] + .reservation-hide-position .i-hire, [data-bookmaker="ACTIVITY"] *:not(.hide-ct).i-car, [data-bookmaker="ACTIVITY"] *:not(.hide-ct).i-activity, [data-bookmaker="ACTIVITY"] + .reservation-hide-position .i-car, [data-bookmaker="ACTIVITY"] + .reservation-hide-position .i-activity, [data-bookmaker="FLIGHT-RENTAL"] *:not(.hide-ct).i-default, [data-bookmaker="FLIGHT-RENTAL"] *:not(.hide-ct).i-flight-rental, [data-bookmaker="FLIGHT-RENTAL"] + .reservation-hide-position .i-default, [data-bookmaker="FLIGHT-RENTAL"] + .reservation-hide-position .i-flight-rental, [data-bookmaker="FLIGHT-HOTEL-RENTAL"] *:not(.hide-ct).i-default, [data-bookmaker="FLIGHT-HOTEL-RENTAL"] *:not(.hide-ct).i-dp, [data-bookmaker="FLIGHT-HOTEL-RENTAL"] *:not(.hide-ct).i-flight-hotel-rental, [data-bookmaker="FLIGHT-HOTEL-RENTAL"] + .reservation-hide-position .i-default, [data-bookmaker="FLIGHT-HOTEL-RENTAL"] + .reservation-hide-position .i-dp, [data-bookmaker="FLIGHT-HOTEL-RENTAL"] + .reservation-hide-position .i-flight-hotel-rental {display: block !important;} [data-bookmaker="FLIGHT-HOTEL-RENTAL"] .i-flight-hotel-rental + .i-dp, [data-bookmaker="FLIGHT-HOTEL-RENTAL"] + .reservation-hide-position .i-flight-hotel-rental + .i-dp {display: none !important;} .reservation-hide-position button, .reservation-module-unit button{color: #000;} @media screen and (max-width: 739px) { .reservation-hide-position div[tabindex="1"]:focus, .reservation-module-unit div[tabindex="1"]:focus, .reservation-hide-position div[tabindex="0"]:focus, .reservation-module-unit div[tabindex="0"]:focus, .reservation-hide-position dt[tabindex="0"]:focus, .reservation-module-unit dt[tabindex="0"]:focus {outline: none;} } .reservation-module-unit .text-fineprint-s { word-break: initial; } .reservation-module-wrap { background-color: #fff; position: relative; z-index: 9990; box-shadow: 0 2px 8px rgba(40, 40, 40, 0.16); } .reservation-module-close .close-btn .reservation-module-expanded { display: block; width: 32px; height: 32px; position: absolute; top: 43px; right: -1192px; left: 0; margin: 0 auto; } .reservation-module-close .close-btn .reservation-module-expanded::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #fff; border-radius: 50%; box-sizing: border-box; } .reservation-module-close .close-btn .reservation-module-expanded:focus { outline: 1px solid #fff; } .calendar-input-box + .reservation-module-close .close-btn .reservation-module-expanded:focus {outline: 2px solid #000;} .reservation-module-close .close-btn .reservation-module-expanded svg { vertical-align: middle; } .reservation-module-unit { display: flex; justify-content: flex-start; position: relative; width: 1096px; margin: 0 auto; height: auto; transition: height 0.3s linear, min-height 0.3s linear, max-height 0.3s linear; } @media screen and (min-width: 740px) { .module-tablist + div .reservation-module-unit:not(.for-mobile) {display: -ms-grid;display: grid;} [data-bookmaker="DEFAULT"] .reservation-module-unit {-ms-grid-columns: 0 1fr 1fr 0 1fr 200px;grid-template-columns: 1fr 1fr 1fr 200px;-ms-grid-rows: 100% 100% 100% 100% 100% 100%;grid-template-rows: 100% 100% 100% 100%;} [data-bookmaker="FLIGHT"] .reservation-module-unit {-ms-grid-columns: 224px 1fr 1fr 0px .8fr 200px;grid-template-columns: 224px 1fr 1fr .8fr 200px;-ms-grid-rows: 100% 100% 100% 100% 100% 100%;grid-template-rows: 100% 100% 100% 100% 100%;} [data-bookmaker="HOTEL"] .reservation-module-unit {-ms-grid-columns: 224px 1.6fr .8fr .8fr auto 200px;grid-template-columns: 224px 1.6fr .8fr .8fr 1.2fr 200px;-ms-grid-rows: 100% 100% 100% 100% 100% 100%;grid-template-rows: 100% 100% 100% 100% 100% 100%;} [data-bookmaker="HOTEL-SIMPLE"] .reservation-module-unit {-ms-grid-columns: 224px .8fr 1fr 0 auto 200px;grid-template-columns: 224px .8fr 1fr .6fr 200px;-ms-grid-rows: 100% 100% 100% 100% 100% 100%;grid-template-rows: 100% 100% 100% 100% 100%;} [data-bookmaker="HIRE"] .reservation-module-unit {-ms-grid-columns: 224px 1fr 1fr 0 0 200px;grid-template-columns: 224px 1fr 1fr 200px;-ms-grid-rows: 100% 100% 100% 100% 100% 100%;grid-template-rows: 100% 100% 100% 100%;} [data-bookmaker="ACTIVITY"] .reservation-module-unit {-ms-grid-columns: 224px 1fr 1fr 0 0 200px;grid-template-columns: 224px 1fr 1fr 200px;-ms-grid-rows: 100% 100% 100% 100% 100% 100%;grid-template-rows: 100% 100% 100% 100%;} [lang="ja"] [data-bookmaker="FLIGHT"] .reservation-module-unit {-ms-grid-columns: 224px 1fr 1fr 0px 1fr 200px;grid-template-columns: 224px 1fr 1fr 1fr 200px;} [lang="en"] [data-bookmaker="HOTEL-SIMPLE"] .reservation-module-unit {-ms-grid-columns: 224px 1fr 1fr 0 auto 200px;grid-template-columns: 224px 1fr 1fr .6fr 200px;} [lang="vi"] [data-bookmaker="HOTEL"] .reservation-module-unit {-ms-grid-columns: 224px 1.5fr .9fr 1.05fr 1.2fr 200px;grid-template-columns: 224px 1.5fr .9fr 1.05fr 1.2fr 200px} [lang="vi"] [data-bookmaker="HOTEL-SIMPLE"] .reservation-module-unit {-ms-grid-columns: 224px 1fr 1fr 0 auto 200px;grid-template-columns: 224px 1fr 1fr .6fr 200px;} /* IE */ [data-bookmaker="DEFAULT"] .reservation-module-unit > *:nth-child(1) {-ms-grid-row: 1;-ms-grid-column: 1;} [data-bookmaker="DEFAULT"] .reservation-module-unit > *:nth-child(2) {-ms-grid-row: 1;-ms-grid-column: 2;} [data-bookmaker="DEFAULT"] .reservation-module-unit > *:nth-child(3) {-ms-grid-row: 1;-ms-grid-column: 3;} [data-bookmaker="DEFAULT"] .reservation-module-unit > *:nth-child(4) {-ms-grid-row: 1;-ms-grid-column: 4;} [data-bookmaker="DEFAULT"] .reservation-module-unit > *:nth-child(5) {-ms-grid-row: 1;-ms-grid-column: 5;} [data-bookmaker="DEFAULT"] .reservation-module-unit > *:nth-child(6) {-ms-grid-row: 1;-ms-grid-column: 6;} [data-bookmaker="FLIGHT"] .reservation-module-unit > *:nth-child(1) {-ms-grid-row: 1;-ms-grid-column: 1;} [data-bookmaker="FLIGHT"] .reservation-module-unit > *:nth-child(2) {-ms-grid-row: 1;-ms-grid-column: 2;} [data-bookmaker="FLIGHT"] .reservation-module-unit > *:nth-child(3) {-ms-grid-row: 1;-ms-grid-column: 3;} [data-bookmaker="FLIGHT"] .reservation-module-unit > *:nth-child(4) {-ms-grid-row: 1;-ms-grid-column: 4;} [data-bookmaker="FLIGHT"] .reservation-module-unit > *:nth-child(5) {-ms-grid-row: 1;-ms-grid-column: 5;} [data-bookmaker="FLIGHT"] .reservation-module-unit > *:nth-child(6) {-ms-grid-row: 1;-ms-grid-column: 6;} [data-bookmaker="HOTEL"] .reservation-module-unit > *:nth-child(1) {-ms-grid-row: 1;-ms-grid-column: 1;} [data-bookmaker="HOTEL"] .reservation-module-unit > *:nth-child(2) {-ms-grid-row: 1;-ms-grid-column: 2;} [data-bookmaker="HOTEL"] .reservation-module-unit > *:nth-child(3) {-ms-grid-row: 1;-ms-grid-column: 3;} [data-bookmaker="HOTEL"] .reservation-module-unit > *:nth-child(4) {-ms-grid-row: 1;-ms-grid-column: 4;} [data-bookmaker="HOTEL"] .reservation-module-unit > *:nth-child(5) {-ms-grid-row: 1;-ms-grid-column: 5;} [data-bookmaker="HOTEL"] .reservation-module-unit > *:nth-child(6) {-ms-grid-row: 1;-ms-grid-column: 6;} [data-bookmaker="HOTEL-SIMPLE"] .reservation-module-unit > *:nth-child(1) {-ms-grid-row: 1;-ms-grid-column: 1;} [data-bookmaker="HOTEL-SIMPLE"] .reservation-module-unit > *:nth-child(2) {-ms-grid-row: 1;-ms-grid-column: 2;} [data-bookmaker="HOTEL-SIMPLE"] .reservation-module-unit > *:nth-child(3) {-ms-grid-row: 1;-ms-grid-column: 3;} [data-bookmaker="HOTEL-SIMPLE"] .reservation-module-unit > *:nth-child(4) {-ms-grid-row: 1;-ms-grid-column: 4;} [data-bookmaker="HOTEL-SIMPLE"] .reservation-module-unit > *:nth-child(5) {-ms-grid-row: 1;-ms-grid-column: 5;} [data-bookmaker="HOTEL-SIMPLE"] .reservation-module-unit > *:nth-child(6) {-ms-grid-row: 1;-ms-grid-column: 6;} [data-bookmaker="HIRE"] .reservation-module-unit > *:nth-child(1) {-ms-grid-row: 1;-ms-grid-column: 1;} [data-bookmaker="HIRE"] .reservation-module-unit > *:nth-child(2) {-ms-grid-row: 1;-ms-grid-column: 2;} [data-bookmaker="HIRE"] .reservation-module-unit > *:nth-child(3) {-ms-grid-row: 1;-ms-grid-column: 3;} [data-bookmaker="HIRE"] .reservation-module-unit > *:nth-child(4) {-ms-grid-row: 1;-ms-grid-column: 4;} [data-bookmaker="HIRE"] .reservation-module-unit > *:nth-child(5) {-ms-grid-row: 1;-ms-grid-column: 5;} [data-bookmaker="HIRE"] .reservation-module-unit > *:nth-child(6) {-ms-grid-row: 1;-ms-grid-column: 6;} [data-bookmaker="ACTIVITY"] .reservation-module-unit > *:nth-child(1) {-ms-grid-row: 1;-ms-grid-column: 1;} [data-bookmaker="ACTIVITY"] .reservation-module-unit > *:nth-child(2) {-ms-grid-row: 1;-ms-grid-column: 2;} [data-bookmaker="ACTIVITY"] .reservation-module-unit > *:nth-child(3) {-ms-grid-row: 1;-ms-grid-column: 3;} [data-bookmaker="ACTIVITY"] .reservation-module-unit > *:nth-child(4) {-ms-grid-row: 1;-ms-grid-column: 4;} [data-bookmaker="ACTIVITY"] .reservation-module-unit > *:nth-child(5) {-ms-grid-row: 1;-ms-grid-column: 5;} [data-bookmaker="ACTIVITY"] .reservation-module-unit > *:nth-child(6) {-ms-grid-row: 1;-ms-grid-column: 6;} } .reservation-module-unit.for-mobile { display: none; } .reservation-module-unit .rsv-error { width: 100%; color: #cc0000; font-size: 0.97rem; position: absolute; bottom: 7px; left: 0; margin: 0; padding: 0 10px; } .reservation-module-unit .rsv-error p + p { margin-top: 0; } .reservation-module-unit .in-box { display: flex; flex-direction: column; height: 100%; min-height: 100px; padding: 12px 8px; position: relative; } .reservation-module-unit .in-box.flying-area { padding-left: 16px; } .in-box.flying-area ~ div > .in-box { padding-left: 8px; padding-left: 16px; } .reservation-module-unit .in-box.flying-area, .reservation-module-unit .in-box.select-area { cursor: pointer; transition: background-color ease-in 0.2s; } .reservation-module-unit .select-area.hotel-item { display: none; } [data-bookmaker='FLIGHT-HOTEL-RENTAL'] .reservation-module-unit .select-area.hotel-item:not(.hide-ct), [data-bookmaker='HOTEL'] .reservation-module-unit .select-area.hotel-item:not(.hide-ct) { display: flex; } @media screen and (max-width: 739px) { [data-bookmaker='FLIGHT-HOTEL-RENTAL'] .reservation-module-unit .select-area.hotel-item:not(.hide-ct), [data-bookmaker='HOTEL'] .reservation-module-unit .select-area.hotel-item:not(.hide-ct) { display: block; } } .reservation-module-unit .in-box.select-area .item-box .item-col:nth-child(2) { width: 45px; text-align: center; } .reservation-module-unit .in-box.select-area .rsv-error { white-space: nowrap; } .reservation-module-unit .in-box.dp-hotel-area { flex-direction: row !important; } .reservation-module-unit .in-box.dp-hotel-area .room-area { display: none; width: 50px; width: max-content; padding-right: 8px; cursor: pointer; transition: background-color ease-in 0.2s; vertical-align: top; } .reservation-module-unit .in-box.dp-hotel-area .passenger-area { padding: 0; cursor: pointer; transition: background-color ease-in 0.2s; display: inline-block; vertical-align: top; } [data-bookmaker='HOTEL-SIMPLE'] .reservation-module-unit .in-box.dp-hotel-area .passenger-area { min-width: 118px; } [data-bookmaker='DEFAULT'] .reservation-module-unit .in-box.dp-hotel-area .passenger-area { width: 210px; } .reservation-module-unit .passenger-num > p { display: flex; align-items: center; } @media screen and (max-width: 739px) { .reservation-module-unit .passenger-num > p { justify-content: center; } } .reservation-module-unit .in-box.flying-area:hover, .reservation-module-unit .in-box.select-area:hover, .reservation-module-unit .in-box.dp-hotel-area:hover, .reservation-module-unit .in-box.is-active { background-color: rgba(130, 98, 31, 0.08); } .reservation-module-unit .in-box.price-area { background-color: #8c713f; color: #fff; padding: 13px 16px 0; position: relative; } .reservation-module-unit .in-box.price-area p + p { margin-top: 0; } .reservation-module-unit .in-box.price-area .reservation-price { font-size: 3.48rem; font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1; } .reservation-module-unit .in-box.price-area .rsv-button-area { position: absolute; bottom: -35px; left: 0; border-top: 1px solid #75603a; padding: 7px 16px; font-size: 1.68rem; font-weight: 600; text-align: left; } .reservation-module-unit .rsv-text, .reservation-module-unit .rsv-text-g { font-size: 2.02rem; font-weight: 700; line-height: 1.3; font-family: 'Montserrat', sans-serif; text-transform: uppercase; } .reservation-module-unit .rsv-text-g { white-space: nowrap; } .reservation-module-unit .rsv-text-time { font-size: 1.6rem; } @media screen and (max-width: 739px) { .reservation-module-unit .rsv-text, .reservation-module-unit .rsv-text-g { font-size: 2.42rem; } .reservation-module-unit .rsv-text-time { font-size: 1.6rem; } } [data-bookmaker="DEFAULT"] .reservation-module-unit .rsv-text, [data-bookmaker="DEFAULT"] .reservation-module-unit .rsv-text-g { font-size: 2.42rem; } [data-bookmaker='FLIGHT-HOTEL-RENTAL'] .reservation-module-unit .in-box.select-area .rsv-text-g, [data-bookmaker='HOTEL'] .reservation-module-unit .in-box.select-area .rsv-text-g { font-size: 1.68rem; } .reservation-module-unit .rsv-text-g { color: #a46a00; } .reservation-module-unit .item-box { display: flex; width: 100%; align-items: flex-start; } .reservation-module-unit .item-box .item-col .in-image { padding-top: 16px; } .reservation-module-unit .item-col p + p { margin-top: 0; line-height: 1.2; } .reservation-module-unit .item-box .item-col > div { display: inline-block; } [data-cal='onewayIcon'], [data-cal='returnIcon'] { display: flex; align-items: center; width: 32px; height: 64px; margin: 0 8px; line-height: 0; font-size: 0; } .reservation-module-unit .item-box .in-box.select-area .item-col:nth-child(2) { width: 32px; } .reservation-module-unit .rsv-button-area.button-primary { flex-direction: row; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; height: 100%; border-radius: 0; font-family: 'Montserrat', sans-serif; width: 200px; min-width: 200px; padding: 0 10px; text-align: center; } .reservation-module-unit .rsv-button-area.button-primary:hover { text-decoration: none; } .reservation-module-unit .rsv-button-area.button-primary > span:after { content: ''; display: inline-block; background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_login_arw.svg) no-repeat 0 0; width: 13px; height: 16px; animation: arrow 1.2s infinite; position: relative; margin-top: -2px; vertical-align: middle; } .ar-booking .reservation-module-unit .rsv-button-area.button-primary > span:after { animation: arrowARL 1.2s 4; right: -3px; } .reservation-module-unit .classes-label { display: inline-block; vertical-align: 5px; margin-left: 8px; background-color: #f0e9db; border-radius: 4px; color: #282828; padding: 6px 8px 7px; font-size: 0.97rem; line-height: 1; white-space: nowrap; } [data-sticky='true'] .reservation-module-unit { max-height: 161.64px; } .reservation-hide-position { width: 1096px; margin: 0 auto; position: relative; z-index: 9989; } .reservation-hide-position .reset-button { font-family: 'Montserrat', sans-serif; font-weight: bold; font-size: 1.68rem; color: #82621f; } .reservation-hide-position .reset-button:focus { outline: solid 2px #000; } .reservation-hide-position .flying-input-box { position: absolute; top: 0; left: 224px; z-index: 1; } [data-bookmaker="DEFAULT"] + .reservation-hide-position .flying-input-box { left: 0; } .reservation-hide-position .flying-input-box-inner { width: 672px; background-color: #fff; border-radius: 0 0 4px 4px; padding: 16px 0; } .flying-input-box-inner.input-pulldown .allcities {border-top: 1px solid #D5D5D5;} .flying-input-box-inner.input-pulldown .allcities-title {padding: 24px 12px 16px;} .flying-input-box-inner.input-suggest {display: none;} [data-bookmaker="DEFAULT"] + .reservation-hide-position .flying-input-box-inner.input-suggest, [data-bookmaker="FLIGHT"] + .reservation-hide-position .flying-input-box-inner.input-suggest, [data-bookmaker="HOTEL"] + .reservation-hide-position .flying-input-box-inner.input-suggest {display: block;} [data-bookmaker="DEFAULT"] + .reservation-hide-position .flying-input-box-inner.input-pulldown, [data-bookmaker="FLIGHT"] + .reservation-hide-position .flying-input-box-inner.input-pulldown, [data-bookmaker="HOTEL"] + .reservation-hide-position .flying-input-box-inner.input-pulldown {display: none;} .select-body.place-list {position: static;height: 100%;max-height: calc(100vh - 300px);padding: 0;background: none;border-radius: 0;box-shadow: none;} .flying-input-box-head-unit {display:flex;margin-bottom: 16px;padding: 0 10px; flex-wrap: wrap;} .reservation-hide-position .flying-input-box dt { padding: 0 8px; } .reservation-hide-position .flying-input-box dt + dt { margin-top: 0; } .reservation-hide-position .flying-input-box dd { border-bottom: 1px solid #a46a00; padding: 10px 0 5px 10px; } .reservation-hide-position .flying-input-box dd .flying-input { padding: 3px 16px 3px 5px; font-size: 1.68rem; width: 600px; } .reservation-hide-position .flying-input-box dd .flying-input + button img { vertical-align: bottom; } .reservation-hide-position .flying-input-box .candidate-wrap { height: 250px; max-height: calc(100vh - 320px); overflow: auto; margin-top: 16px; } .reservation-hide-position .flying-input-box .candidate-wrap .no-result { color: #757575; font-size: 1.6rem; padding-left: 24px; } .reservation-hide-position .flying-input-box .candidate-wrap .in-link { padding: 0 24px; } .reservation-hide-position .flying-input-box .candidate-wrap .in-link a { color: #00759d; font-size: 1.4rem; text-decoration: underline; } .reservation-hide-position .flying-input-box .candidate-wrap .in-link a:hover { color: #9c6d16; } .reservation-hide-position .flying-input-box .candidate-item { display: table; width: 100%; } .reservation-hide-position .flying-input-box .candidate-item:focus-visible { outline: 2px solid #000; outline-offset: -2px; } .reservation-hide-position .flying-input-box .candidate-item.is-active { background-color: #9c6d16; color: #fff; text-decoration: none; } @media screen and (min-width: 740px) { .flying-input-box-head-unit {flex-wrap: nowrap;} .reservation-hide-position .flying-input-box .candidate-item:hover { background-color: #9c6d16; color: #fff; text-decoration: none; } } .reservation-hide-position .flying-input-box .candidate-item .item-col { display: table-cell; vertical-align: top; padding: 8px 24px 12px; } .reservation-hide-position .flying-input-box .candidate-item .item-col span { display: block; } .reservation-hide-position .flying-input-box .candidate-item .text-fineprint { font-weight: normal; } .reservation-hide-position .flying-input + button:focus { border: 1px solid #333; } .reservation-hide-position .calendar-input-box { position: absolute; top: 0; left: 0; width: 1096px; background-color: #fff; box-shadow: 0 4px 8px rgba(40, 40, 40, 0.16); border-radius: 0 0 6px 6px; z-index: 1; } .reservation-hide-position .calendar-input-box .box-inner { padding: 24px 128px 48px; } .reservation-hide-position .calendar-input-box .bottom-link { font-size: 0; margin-top: 16px; } .reservation-hide-position .calendar-input-box .bottom-link li { font-size: 1.4rem; display: inline-block; margin-right: 36px; } .reservation-hide-position .calendar-input-box .bottom-link li a { color: #00759d; text-decoration: underline; } .reservation-hide-position .calendar-input-box .bottom-link li a:hover { color: #9c6d16; } .reservation-hide-position .passenger-input-box { background-color: #fff; box-shadow: 0 4px 8px rgba(40, 40, 40, 0.16); border-radius: 0 0 6px 6px; padding: 16px 0 0; position: absolute; top: 0; right: 200px; width: 424px; z-index: 1; } .reservation-hide-position .calendar-input-box .book-hotel-text { margin-top: 20px; } .reservation-hide-position .passenger-input-box dt { padding: 0 8px; } .reservation-hide-position .passenger-input-box dd { border-bottom: 1px solid #a46a00; padding: 10px 16px 5px 16px; } .reservation-hide-position .passenger-input-box dd .passenger-input { padding: 0 16px 0 8px; font-size: 1.68rem; width: 385px; } .reservation-hide-position .passenger-input-box dd .passenger-input + button img { vertical-align: bottom; } .reservation-hide-position .passenger-num-people { margin-top: 35px; padding: 0 16px 35px; } .reservation-hide-position .passenger-num-people .bottom-link { padding: 20px 0 10px; } .reservation-hide-position .passenger-num-people .bottom-link a { color: #00759d; font-size: 1.4rem; text-decoration: underline; } .reservation-hide-position .passenger-num-people .bottom-link a:hover { color: #9c6d16; } .reservation-hide-position .passenger-input-box .input-text { display: inline-block; width: calc(100% - 30px); } .reservation-hide-position .passenger-input-box .input-text + button { float: right; } .reservation-hide-position .passenger-btn-unit { border-top: 1px solid #bfbfbf; padding: 16px 0 0; font-size: 0; margin-top: 25px; } .reservation-hide-position .passenger-btn-unit li { display: inline-block; position: relative; margin: 0 8px 8px 0; z-index: 0; } .reservation-hide-position .passenger-btn-unit input[type='radio'] { position: absolute; width: 0; height: 0; opacity: 0; z-index: -1; } .reservation-hide-position .passenger-btn-unit input[type='radio']:focus ~ label { outline: 2px solid #000; outline-offset: -2px; } .reservation-hide-position .passenger-btn-unit input[type='radio']:focus::after { content: ''; display: block; position: relative; top: -11px; bottom: 0; left: -11px; right: 0; width: calc(100% + 22px); height: calc(100% + 22px); margin: auto; border-radius: 4px; background: #000; } .reservation-hide-position .passenger-btn-unit input[type='radio'] + label { background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/bg_book_marker_radio_off.svg) no-repeat 8px center; cursor: pointer; display: inline-block; background-color: #bfbfbf; color: #3e3e3e; border-radius: 4px; padding: 8px 16px 8px 31px; } .reservation-hide-position .passenger-btn-unit input[type='radio']:checked + label { background-image: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/bg_book_marker_radio_on.svg); background-color: #f0e9db; } .reservation-hide-position .num-people-list { display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; width: 100%; padding: 0; box-sizing: border-box; } [data-bookmaker="HOTEL"] + .reservation-hide-position .num-people-list.i-dp { display: flex !important; } .reservation-hide-position .num-people-list:not(:first-child) { padding-top: 25px; } .reservation-hide-position .num-people-list:nth-child(1) { z-index: 4; } .reservation-hide-position .num-people-list:nth-child(2) { z-index: 3; } .reservation-hide-position .num-people-list:nth-child(3) { z-index: 2; } .reservation-hide-position .num-people-list:nth-child(4) { z-index: 1; } .reservation-hide-position .num-people-list .passenger-type { width: 40%; } .reservation-hide-position .num-people-list .num-people { width: 60%; text-align: right; } .reservation-hide-position .num-people-list .passenger-type p + p { margin-top: 0 !important; } .reservation-hide-position .num-people-list .passenger-type p + p a { color: #5b94d9; text-decoration: underline; } .reservation-hide-position .num-people-list .num-people .btn-num { display: inline-block; width: 26px; height: 26px; border: 1px solid #757575; border-radius: 50%; line-height: 24px; font-size: 1.4rem; font-family: 'Lato', sans-serif; color: #757575; } .reservation-hide-position .scroll-area { padding-bottom: 15px; } .reservation-hide-position .num-people-list .num-people .btn-num:hover { border-color: #9c6d16; color: #fff; background-color: #9c6d16; } .reservation-hide-position .num-people-list .num-people .number { display: inline-block; padding: 0 8px; } .reservation-hide-position .coupon-wrap { display: block; padding: 20px 16px 28px; } .reservation-hide-position .coupon-wrap .input-coupon-code { width: 100%; border-bottom: 1px solid #3e3e3e; padding-bottom: 5px; } .reservation-hide-position .coupon-wrap .input-coupon-code[placeholder] { color: #3e3e3e; font-size: 1.68rem; } .reservation-hide-position .calendar-button-area { display: none; } .reservation-hide-position .default-error-text, .reservation-hide-position .room-error-text { position: relative; padding: 6px 16px 0; line-height: 1.5; color: #3e3e3e; } .reservation-hide-position .default-error-text p + p, .reservation-hide-position .room-error-text p + p { margin-top: 0; } .reservation-hide-position .default-error-text > .alt-icon, .reservation-hide-position .room-error-text > .alt-icon { position: absolute; top: 7px; left: 8px; } .calendar-table-wrap { position: relative; } .calendar-table-unit { width: 332px; height: 334px; display: inline-block; padding: 0 42px; box-sizing: content-box; } .calendar-table { width: 100%; margin-top: 30px; } .calendar-table caption, .calendar-table th, .calendar-table td { text-align: center; } .calendar-table .head-cell th { max-width: 48px; padding: 10px 8px; font-weight: normal; color: #001e40; } .calendar-table .body-cell td button { font-size: 1.68rem; font-family: 'Lato', sans-serif; padding: 10px 14px; position: relative; } .calendar-table .body-cell td button[role='presentation'] { pointer-events: none; } .calendar-table .body-cell td button[disabled]:not(.dep-day) { color: #757575; pointer-events: none; } .calendar-table .body-cell td button .price-decoration { display: block; border-radius: 2px; height: 4px; width: 20px; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); } .calendar-table .body-cell td button .price-decoration.clr-GR { background-color: #40806a; } .calendar-table .body-cell td button .price-decoration.clr-GL { background-color: #b85c00; } .calendar-table .body-cell td button .price-decoration.clr-RD { background-color: #930000; } .calendar-table .body-cell button { width: 100%; } .calendar-table .body-cell .interval { background-color: #f0e9db; position: relative; } .calendar-table .body-cell .interval-hotel { background-color: #f5f3ed; position: relative; } .calendar-table .body-cell .dep-day, .calendar-table .body-cell .arr-day { background-color: #a46a00; color: #fff; font-weight: 700; overflow: visible; } .calendar-table .body-cell .dep-day:before, .calendar-table .body-cell .arr-day:before { content: ''; display: inline-block; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; position: absolute; top: 50%; margin: 0 auto; transform: translateY(-50%); z-index: 10; } .calendar-table .body-cell .dep-day:before { border-left: 6px solid #a46a00; left: 100%; right: 0; } .calendar-table .body-cell .arr-day:before { border-right: 6px solid #a46a00; right: 100%; } .calendar-table .body-cell .in-day, .calendar-table .body-cell .out-day { background-color: #282828; color: #fff; font-weight: 700; overflow: visible; z-index: 11; } .calendar-table .body-cell .in-day:before, .calendar-table .body-cell .out-day:before { content: ''; display: inline-block; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; position: absolute; top: 50%; margin: 0 auto; transform: translateY(-50%); z-index: 10; } .calendar-table .body-cell .in-day:before { border-left: 6px solid #282828; left: 100%; right: 0; } .calendar-table .body-cell .out-day:before { border-right: 6px solid #282828; right: 100%; } .calendar-table .body-cell .arr-day.in-day::before, .calendar-table .body-cell .arr-day.in-day::after, .calendar-table .body-cell .arr-day.in-day:hover::before, .calendar-table .body-cell .arr-day.in-day:hover::after { border-right: none; } .calendar-input-box .section-line { border: none; background-color: #bfbfbf; height: 1px; margin-bottom: 0; } .calendar-input-box .price-decoration-item { font-size: 0; margin-top: 56px; } .calendar-input-box .price-decoration-item li { color: #fff; display: inline-block; border-radius: 4px; padding: 4px 12px 3px; } .calendar-input-box .price-decoration-item li:not(:first-child) { margin-left: 8px; } .calendar-input-box .price-decoration-item .clr-GR { background-color: #40806a; } .calendar-input-box .price-decoration-item .clr-GL { background-color: #b85c00; } .calendar-input-box .price-decoration-item .clr-RD { background-color: #930000; } .calendar-input-box .price-decoration-item + p { margin-top: 4px; } .calendar-input-box .calendar-prev { position: absolute; top: 20px; left: 0; } .calendar-input-box .calendar-prev svg { transform: rotate(180deg); } .calendar-input-box .calendar-next { position: absolute; top: 20px; right: 0; } .calendar-head-unit { display: flex; align-items: center; justify-content: flex-start; padding-bottom: 18px; } .calendar-head-unit .input-flexible-wrap span { margin-left: 24px; white-space: nowrap; } .calendar-head-unit .input-flexible-wrap ~ * { margin-left: 24px; } .calendar-head-unit .input-flexible-wrap .check-form { vertical-align: bottom; margin-right: 0; } .calendar-head-unit .reset-button svg { vertical-align: middle; } .calendar-table-wrap.is-oneway .calendar-table .body-cell .dep-day:before { display: none; } .reservation-module-unit .flying-area .text-eyebrow-s { position: absolute; } .reservation-module-unit .flying-area .item-box .item-col:first-child { max-width: calc(100% / 3 + 10%); margin-top: 17px; } @media screen and (min-width: 740px) { .reservation-module-unit .flying-area .item-box .item-col:first-child .text-fineprint-s, .reservation-module-unit .select-area .item-box .item-col:first-child .text-fineprint-s { width: 120%; } .reservation-module-unit .flying-area .item-box .item-col:last-child .text-fineprint-s { width: 110%; } } .reservation-module-unit .flying-area .item-box .item-col:last-child { max-width: calc(100% / 3 + 10%); margin-top: 17px; } [data-bookmaker="HOTEL-SIMPLE"] .reservation-module-unit .flying-area .item-box .item-col:last-child, [data-bookmaker="HIRE"] .reservation-module-unit .flying-area .item-box .item-col:last-child, [data-bookmaker="ACTIVITY"] .reservation-module-unit .flying-area .item-box .item-col:last-child { max-width: none; } .reservation-module-unit .flying-area .item-box .item-col .text-eyebrow-s { margin-top: -17px; } [data-bookmaker='HOTEL'] .reservation-module-unit .in-box.select-area .minus-icon, [data-bookmaker='FLIGHT-HOTEL-RENTAL'] .reservation-module-unit .in-box.select-area .minus-icon { height: 10px; margin-top: -4px; } [data-bookmaker='HOTEL'] .reservation-module-unit .in-box.select-area .minus-icon svg, [data-bookmaker='FLIGHT-HOTEL-RENTAL'] .reservation-module-unit .in-box.select-area .minus-icon svg { padding: 0; vertical-align: top; } .reservation-hide-position .dp-wrap .room-num { padding: 30px 16px; } .reservation-hide-position .dp-wrap .room-num-people > dl { border-top: 1px solid #bfbfbf; } [data-bookmaker='FLIGHT-RENTAL'] + .reservation-hide-position .dp-wrap .room-num-people > dl { padding-top: 25px; } .reservation-hide-position .dp-wrap .room-num-people > dl dt { padding: 20px 16px; } .reservation-hide-position .passenger-input-box .dp-wrap dt { padding: 0 16px; } .reservation-hide-position .passenger-input-box .dp-wrap .room-num-people dd:last-child { border-bottom: none; padding-bottom: 25px; } .reservation-hide-position .module-select-wrap { width: 100%; } .reservation-hide-position .module-select-unit .rsv-error { font-size: 0.97rem; color: #cc0000; text-align: right; } .reservation-hide-position .module-select-unit { position: relative; text-align: left; margin: 16px 0 0 auto; } @media all and (min-width: 740px){ .reservation-hide-position .calendar-input-box .module-select-unit { display: flex; } .reservation-hide-position .calendar-input-box .module-select-unit > li:first-child { margin-right: 80px; } } @media all and (max-width: 739px){ .reservation-hide-position .calendar-input-box .module-select-unit { margin-top: 8px; } .reservation-hide-position .calendar-input-box .module-select-unit > li:first-child { position: relative; z-index: 2; } .reservation-hide-position .calendar-input-box .module-select-unit > li:last-child { position: relative; z-index: 1; } .reservation-hide-position .calendar-input-box .module-select-unit > li:not(:first-child) { margin-top: 16px; } } .reservation-hide-position .module-select-unit:nth-of-type(1) { z-index: 9; } .reservation-hide-position .module-select-unit:nth-of-type(2) { z-index: 8; } .reservation-hide-position .module-select-unit:nth-of-type(3) { z-index: 7; } .reservation-hide-position .module-select-unit:nth-of-type(4) { z-index: 6; } .reservation-hide-position .module-select-unit:nth-of-type(5) { z-index: 5; } .reservation-hide-position .module-select-unit:nth-of-type(6) { z-index: 4; } .reservation-hide-position .module-select-unit:nth-of-type(7) { z-index: 3; } .reservation-hide-position .module-select-unit:nth-of-type(8) { z-index: 2; } .reservation-hide-position .module-select-unit:nth-of-type(9) { z-index: 1; } .reservation-hide-position .module-select-unit dl { position: relative; } .reservation-hide-position .calendar-input-box .module-select-unit dl { display: flex; align-items: center; width: auto; } .reservation-hide-position .room-num-people .module-select-unit dl { width: 120px; min-height: 52px; margin-left: auto; } .reservation-hide-position .module-select-unit dt, .reservation-hide-position .module-select-unit dd { position: relative; padding: 0 !important; border-bottom: none; } .reservation-hide-position .calendar-input-box .module-select-unit dt { margin-right: 30px; margin-top: 6px; } .reservation-hide-position .module-select-unit dd { min-width: 120px; } .reservation-hide-position .module-select-unit .module-select-body { position: absolute !important; width: 100%; height: 160px; background: #fff; box-shadow: 0 4px 8px rgba(40, 40, 40, 0.16); border-radius: 0 0 4px 4px; overflow: hidden !important; } .reservation-hide-position [data-people='infant'] .module-select-unit .module-select-body { height: auto; } .reservation-hide-position .module-select-unit .module-select-body li > a { padding: 8px 16px; display: block; } .reservation-hide-position .module-select-unit .module-select-body li > a:hover { background-color: #9c6d16; text-decoration: none; color: #fff; } .reservation-hide-position .module-select { position: relative; border-bottom: 1px solid #a46a00; padding: 8px 16px 4px 8px; text-align: left; width: 100%; } .reservation-hide-position .module-select:after { position: absolute; right: 5px; content: ''; display: inline-block; width: 24px; height: 24px; background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_arrow_gr.svg) no-repeat 0 0; } .reservation-hide-position .module-select[aria-expanded='true']:after { top: 3px; } .reservation-hide-position .module-select[aria-expanded='false']:after { top: 3px; transform: rotate(180deg); } .reservation-hide-position .dp-wrap .passenger-btn-unit { margin-top: 0; padding: 16px 16px ; } .reservation-hide-position .dp-wrap .room-num-people .room-head { position: relative; } .reservation-hide-position .dp-wrap .room-num-people .room-head:after { position: absolute; right: 16px; content: ''; display: inline-block; width: 24px; height: 24px; background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_arrow_gr.svg) no-repeat 0 0; } .reservation-hide-position .dp-wrap .room-num-people .room-head[aria-expanded='true']:after { top: 16px; } .reservation-hide-position .dp-wrap .room-num-people .room-head[aria-expanded='false']:after { top: 16px; transform: rotate(180deg); } .reservation-hide-position .dp-wrap.i-hotel-simple.i-flight-rental .bottom-link { padding: 0 20px 16px; } [data-bookmaker='HOTEL'] + .reservation-hide-position .flying-input-box dd { padding-left: 8px; padding-right: 8px; } [data-bookmaker='HOTEL'] + .reservation-hide-position .flying-input-box .dp-from-head { position: relative; } [data-bookmaker='HOTEL'] + .reservation-hide-position .flying-input-box .dp-from-head:after { position: absolute; right: 16px; content: ''; display: inline-block; width: 24px; height: 24px; background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_arrow_gr.svg) no-repeat 0 0; } [data-bookmaker='HOTEL'] + .reservation-hide-position .flying-input-box .dp-from-head[aria-expanded='true']:after { top: 0; } [data-bookmaker='HOTEL'] + .reservation-hide-position .flying-input-box .dp-from-head[aria-expanded='false']:after { top: 0; transform: rotate(180deg); } [data-bookmaker='DEFAULT'] + .reservation-hide-position .dp-wrap, [data-bookmaker='FLIGHT'] + .reservation-hide-position .dp-wrap { display: none; } [data-bookmaker='HOTEL'] + .reservation-hide-position .scroll-area { height: 100%; overflow: auto; } [data-bookmaker='HOTEL'] + .reservation-hide-position .default-wrap { display: none; } [data-bookmaker='HOTEL'] + .reservation-hide-position .calendar-head-unit .switch-unit, [data-bookmaker='HOTEL'] + .reservation-hide-position .calendar-head-unit .input-flexible-wrap { display: none; } [data-bookmaker='HOTEL'] + .reservation-hide-position .calendar-head-unit .dp-wrap.switch-unit { display: inline-block; } [data-bookmaker='HOTEL'] + .reservation-hide-position .calendar-button-area { text-align: center; margin-top: 1.5em; display: block; } [data-bookmaker='HOTEL'] + .reservation-hide-position .calendar-input-box .bottom-link { display: none; } @media screen and (min-width: 740px) { .reservation-hide-position .custom-scroll { max-height: calc(100vh - 320px); } .calendar-table-wrap .month { display: flex; } .calendar-table .body-cell td button:focus { background-color: #b59457; color: #000; z-index: 100; } .calendar-table .body-cell .dep-day:focus:before { border-left: 6px solid #b59457; } .calendar-table .body-cell .arr-day:focus:before { border-right: 6px solid #b59457; } .calendar-table .body-cell .in-day:focus:before { border-left: 6px solid #b59457; } .calendar-table .body-cell .out-day:focus:before { border-right: 6px solid #b59457; } /* IE 以外 */ @media screen and (-webkit-min-device-pixel-ratio: 0) { .calendar-table .body-cell td button:hover { background-color: #b59457; color: #000; z-index: 100; } .calendar-table .body-cell td .dep-day:hover:before { border-left: 6px solid #b59457; } .calendar-table .body-cell td .arr-day:hover:before { border-right: 6px solid #b59457; } .calendar-table .body-cell td .in-day:hover:before { border-left: 6px solid #b59457; } .calendar-table .body-cell td .out-day:hover:before { border-right: 6px solid #b59457; } } @-moz-document url-prefix() { .calendar-table .body-cell td button:hover { background-color: #b59457; color: #000; z-index: 100; } .calendar-table .body-cell td .dep-day:hover:before { border-left: 6px solid #b59457; } .calendar-table .body-cell td .arr-day:hover:before { border-right: 6px solid #b59457; } .calendar-table .body-cell td .in-day:hover:before { border-left: 6px solid #b59457; } .calendar-table .body-cell td .out-day:hover:before { border-right: 6px solid #b59457; } } @supports (-ms-ime-align: auto) { .calendar-table .body-cell td button:hover { background-color: #b59457; color: #000; z-index: 100; } .calendar-table .body-cell td .dep-day:hover:before { border-left: 6px solid #b59457; } .calendar-table .body-cell td .arr-day:hover:before { border-right: 6px solid #b59457; } .calendar-table .body-cell td .in-day:hover:before { border-left: 6px solid #b59457; } .calendar-table .body-cell td .out-day:hover:before { border-right: 6px solid #b59457; } } /* IE のみ */ @media screen and (-ms-high-contrast: none), screen and (-ms-high-contrast: active) { .calendar-table .body-cell td:hover button { background-color: #b59457; color: #000; z-index: 100; } .calendar-table .body-cell td:hover .dep-day:before { border-left: 6px solid #b59457; } .calendar-table .body-cell td:hover .arr-day:before { border-right: 6px solid #b59457; } .calendar-table .body-cell td:hover .in-day:before { border-left: 6px solid #b59457; } .calendar-table .body-cell td:hover .out-day:before { border-right: 6px solid #b59457; } } } @media screen and (max-width: 739px) { .pc-hide { display: inline-block; } .sp-fixed-bottom { position: fixed; left: 0; bottom: 0; padding: 15px 10px; z-index: 100; border-radius: 0; } .h100, .h100 #inputsForm, .h100 .reservation-module-wrap { height: 100%; } .reservation-module-close { display: block; position: fixed; top: 0; left: 0; right: 0; width: 100vw; height: 48px; background: rgba(40, 40, 40, 0.96); z-index: 9999; } .reservation-module-close .close-btn .reservation-module-expanded { display: block; width: 32px; height: 32px; padding: 0; top: 8px; right: 16px; left: auto; } [data-gheader='min'] ~ .reservation-module-close .close-btn .reservation-module-expanded { top: 8px; } .reservation-module-unit { display: none; min-height: auto !important; max-height: none !important; } .reservation-module-unit .item-box { justify-content: center; } .reservation-module-unit:not(.h100) .flying-area .item-box .item-col {transition: .2s margin;} .reservation-module-unit.for-mobile { display: block; width: auto; } .reservation-module-unit.for-mobile { height: auto !important; padding: 0; } .h100 .reservation-module-unit.for-mobile { height: calc(100% - 101px) !important; overflow: scroll; } .reservation-module-unit.for-mobile .rsv-error { position: static; margin-left: 0; text-align: left; } [aria-expanded='false'] .rsv-error { display: none !important; } .reservation-module-unit.for-mobile .rsv-error > span { display: inline-block; } .reservation-module-unit.for-mobile .rsv-error > span:last-of-type { margin-bottom: 8px; } .reservation-module-unit.for-mobile .select-area .rsv-error, .reservation-module-unit.for-mobile .dp-hotel-area .rsv-error { margin-top: 16px; } .reservation-module-unit.for-mobile .flying-area { position: relative; } .reservation-module-unit.for-mobile .flying-area .text-eyebrow-s.fw-n { top: 18px; left: 0; right: 0; text-align: center; } [data-bookmaker='DEFAULT'] .reservation-module-unit.for-mobile .flying-area .text-eyebrow-s.fw-n, [data-bookmaker='HOTEL'] .reservation-module-unit.for-mobile .flying-area .text-eyebrow-s.fw-n, [data-bookmaker*='FLIGHT'] .reservation-module-unit.for-mobile .flying-area .text-eyebrow-s.fw-n { width: 45%; right: auto; } .h100 .reservation-module-unit.for-mobile .flying-area { min-height: 113px; border-bottom: 1px solid #bfbfbf; } .h100 .reservation-module-unit.for-mobile .flying-area .item-box .item-col { margin-top: 32px !important; min-height: 40px; } .h100 .reservation-module-unit.for-mobile .flying-area .item-box .item-col[aria-expanded='true']:after { height: 116px; } .h100 .reservation-module-unit.for-mobile .flying-area .item-box .item-col[aria-expanded='true']:after { content: ''; position: absolute; left: 0; top: -36px; width: 100%; height: 116%; background-color: rgba(130, 98, 31, 0.08); } .h100 [data-bookmaker='DEFAULT'] .reservation-module-unit.for-mobile .flying-area .item-box .item-col[aria-expanded='true']:after { top: -32px; padding: 32px 0 100%; } .reservation-module-unit.for-mobile .flying-area .item-box { justify-content: space-around; align-items: flex-start; } .reservation-module-unit.for-mobile .flying-area .item-box .item-col { position: relative; margin: 37px 0 16px; text-align: center; vertical-align: bottom; word-break: break-word; } .reservation-module-unit.for-mobile .flying-area .item-box .item-col:first-child, .reservation-module-unit.for-mobile .flying-area .item-box .item-col:last-child { width: 100%; max-width: inherit; padding: 0 10px; } [data-bookmaker='DEFAULT'] .reservation-module-unit.for-mobile .flying-area .item-box .item-col:first-child, [data-bookmaker='DEFAULT'] .reservation-module-unit.for-mobile .flying-area .item-box .item-col:last-child, [data-bookmaker='FLIGHT'] .reservation-module-unit.for-mobile .flying-area .item-box .item-col:first-child, [data-bookmaker='FLIGHT'] .reservation-module-unit.for-mobile .flying-area .item-box .item-col:last-child, [data-bookmaker='HOTEL'] .reservation-module-unit.for-mobile .flying-area .item-box .item-col:first-child, [data-bookmaker='HOTEL'] .reservation-module-unit.for-mobile .flying-area .item-box .item-col:last-child { width: 100%; } .reservation-module-unit.for-mobile .flying-area .item-box .item-col:nth-child(2) { width: 32px; } .reservation-module-unit.for-mobile .flying-area .item-box .item-col:nth-child(2) img { padding: 0; vertical-align: middle; position: relative; z-index: 100; } .reservation-module-unit.for-mobile .select-area { min-height: 113px; text-align: center; padding: 24px 0 0; border-bottom: 1px solid #bfbfbf; } .reservation-module-unit.for-mobile .dp-hotel-area { border-bottom: 1px solid #bfbfbf; } .reservation-module-unit.for-mobile .room-area, .reservation-module-unit.for-mobile .passenger-area { min-height: 113px; padding: 33px 0 0; text-align: center; } .reservation-module-unit.for-mobile .room-area { border-bottom: 1px solid #bfbfbf; } .reservation-module-unit.for-mobile .rsv-button-area { display: block; width: 100%; height: auto; padding: 14px 10px; position: fixed; top: auto; bottom: 0; } .reservation-module-unit.for-mobile .hide-ct { display: none; } [data-sticky='true'] .reservation-module-unit.for-mobile .flying-area .item-box .item-col { margin: 16px 0; } [data-sticky='true'] .reservation-module-unit.for-mobile:not(.h100) > .flying-area .text-eyebrow-s, [data-sticky='true'] .reservation-module-unit.for-mobile:not(.h100) > .flying-area > .text-fineprint-s { display: none !important; } [data-sticky='true'] .reservation-module-unit.for-mobile .flying-area .login-show { display: none; } .reservation-hide-position { width: 100%; height: 100%; position: absolute; top: 48px; left: 0; z-index: 10000; } .reservation-hide-position .passenger-num-people { margin-top: 30px; padding: 0; } .reservation-hide-position .passenger-num-people > * { padding-left: 16px !important; padding-right: 16px !important; } .reservation-hide-position .num-people-list:not(:first-child) { padding-top: 20px; } .reservation-module-unit .flying-area .text-eyebrow-s { left: 0; right: 0; margin: 0 auto; } .reservation-hide-position .flying-input-box { position: relative; width: 100%; height: calc(100vh - 186px); top: 85px; left: 0; background: #fff; } .reservation-hide-position .hide-ct ~ .flying-input-box { border-bottom: none; } [data-bookmaker='DEFAULT'] + .reservation-hide-position .flying-input-box { height: 100%; top: 106px; } .reservation-hide-position .flying-input-box-inner { position: relative; width: calc(100% - 20px); margin: 0 10px 30vh; border-radius: 4px; padding: 16px 0 0; box-shadow: 0 4px 8px rgba(40, 40, 40, 0.16); z-index: 101; } .reservation-hide-position .flying-input-box .candidate-wrap li:last-child { margin-bottom: 30px; } .reservation-hide-position .flying-input-box dd .flying-input { width: calc(100% - 40px); } .reservation-hide-position .calendar-input-box .box-inner { padding: 16px; position: relative;top: 0;left: 0;right: 0;height: 100%;overflow: auto; } .reservation-hide-position .calendar-input-box { width: 100%; height: calc(100% - 101px); padding-top: 0; top: 0; box-shadow: none; overflow: visible; } .reservation-hide-position .calendar-input-box .book-hotel-text { font-weight: bold; margin-top: 25px; } .reservation-hide-position .calendar-input-box .bottom-link li { margin-right: 30px; } .reservation-hide-position .passenger-input-box { width: 100%; height: calc(100% - 101px); position: relative; right: auto; padding: 24px 8px 0; box-shadow: none; overflow: visible; } .reservation-hide-position .passenger-input-box > div {position: relative;top: 0;left: 0;right: 0;height: 100% !important;overflow: auto !important;} .reservation-hide-position .passenger-input-box dt { padding: 0 8px; } .calendar-table-unit { width: 100%; padding: 0; } .calendar-head-unit { width: auto; padding: 0; flex-flow: wrap; } .calendar-head-unit .input-flexible-wrap { margin-top: 0; } .calendar-head-unit .input-flexible-wrap .check-form { margin: 8px 16px 0 0; } .calendar-head-unit .input-flexible-wrap ~ * { margin-top: 8px; margin-left: 0; margin-right: 24px; } .calendar-head-unit .reset-button { margin-right: 0; } .calendar-table caption { margin-bottom: 10px; } .calendar-table .head-cell th, .calendar-table .body-cell td button { padding: 10px 5px; } [data-bookmaker='FLIGHT-RENTAL'] .reservation-module-unit.for-mobile .hotel-item, [data-bookmaker='FLIGHT-RENTAL'] .reservation-module-unit.for-mobile .room-area, [data-bookmaker='CAR'] .reservation-module-unit.for-mobile .hotel-item, [data-bookmaker='CAR'] .reservation-module-unit.for-mobile .room-area, [data-bookmaker='RENTAL'] .reservation-module-unit.for-mobile .hotel-item, [data-bookmaker='RENTAL'] .reservation-module-unit.for-mobile .room-area, [data-bookmaker='FLIGHT'] .reservation-module-unit.for-mobile .hotel-item, [data-bookmaker='FLIGHT'] .reservation-module-unit.for-mobile .room-area, [data-bookmaker='DEFAULT'] .reservation-module-unit.for-mobile .hotel-item, [data-bookmaker='DEFAULT'] .reservation-module-unit.for-mobile .room-area { display: none; } [data-bookmaker='FLIGHT'] + .reservation-hide-position .flying-input-box .candidate-wrap { max-height: calc(100vh - 360px - 58px); } [data-bookmaker='HOTEL'] + .reservation-hide-position .flying-input-box .candidate-wrap { max-height: calc(100vh - 360px); } [data-bookmaker='DEFAULT'] + .reservation-hide-position .calendar-input-box { height: calc(100% - 100px); top: 0; } [data-bookmaker='HOTEL'] + .reservation-hide-position .scroll-area { height: auto; } [data-bookmaker='HOTEL'] + .reservation-hide-position .passenger-input-box { padding: 24px 8px 0; right: auto; } [data-bookmaker='HOTEL'] + .reservation-hide-position .check-form { display: inline-block; visibility: hidden; } [data-bookmaker='HOTEL'] + .reservation-hide-position .dp-wrap.switch-unit { margin-bottom: 10px; } [data-bookmaker='HOTEL'] + .reservation-hide-position .dp-wrap.switch-unit label .switch-button { height: 44px; flex: 0 0 248px; } [data-bookmaker='HOTEL'] + .reservation-hide-position .dp-wrap.switch-unit label .switch-button:before { width: 120px; line-height: 1.3; } [data-bookmaker='HOTEL'] + .reservation-hide-position .dp-wrap.switch-unit label .switch-button:after { width: 120px; line-height: 1.3; } [data-bookmaker='HOTEL'] + .reservation-hide-position .dp-wrap.switch-unit .switch-chk:checked ~ label .switch-button:after { -webkit-transform: translate3d(120px, 0, 0); transform: translate3d(120px, 0, 0); } [data-bookmaker='HOTEL'] + .reservation-hide-position .calendar-head-unit { width: 100%; } } @media screen and (max-height: 490px) and (max-width: 739px) { .reservation-hide-position .flying-input-box .candidate-wrap { min-height: 120px; } } @media screen and (max-height: 420px) and (max-width: 739px) { [data-bookmaker='FLIGHT'] + .reservation-hide-position .flying-input-box, [data-bookmaker='HOTEL'] + .reservation-hide-position .flying-input-box, [data-bookmaker='DEFAULT'] + .reservation-hide-position .flying-input-box { min-height: 100vh; top: 0; overflow: scroll; } .reservation-hide-position .flying-input-box .candidate-wrap { max-height: initial; height: 100% !important; } .sp-fixed-bottom { display: none !important; } } /*a11y*/ .room-num-people [aria-hidden='true'] { display: none; } /* --- switch-button --- */ [data-bookmaker="DEFAULT"] .reservation-module-unit .rsv-switch-area {display:none!important;} .rsv-switch-area::after {content: "";position: absolute;top: 10%;right: 0;width: 1px;height: 80%;background: #D5D5D5;} .rsv-switch-area .rsv-switch-inner {display: flex;align-items: center;} .rsv-switch-area .rsv-switch-inner .switch-button {position: relative;width: 56px;height: 56px;border: 1px solid #D5D5D5;border-radius: 4px;overflow: visible;transition: border .2s;} .rsv-switch-area .rsv-switch-inner .switch-button::before {content: "";display: none;position: absolute;top: -6px;right: -6px;width: 20px;height: 20px;background-image: url("../../../world/shared/global-common-top/images_sites/icons/icon_module_check.svg");background-size: contain;z-index: 2;} .rsv-switch-area .rsv-switch-inner .switch-button:not(:last-child) {margin-right: 20px;} .rsv-switch-area .rsv-switch-inner .switch-button:not(:last-child)::after {content: "";position: absolute;top: calc(50% - 8px);right: -18px;display: inline-block;width: 16px;height: 16px;background-image: url("../../../world/shared/global-common-top/images_sites/icons/icon_module_plus.svg");background-size: contain;} .rsv-switch-area .rsv-switch-inner .switch-button .switch-button-text {display: flex;flex-direction: column;align-items: center;width: calc(100% + 4px);margin-left: -2px;font-size: 1rem;transform: scale(0.9);font-weight: bold;word-break: break-word;transition: color .2s;} .rsv-switch-area .rsv-switch-inner .switch-button .switch-button-text::before {content:"";display: inline-block;width: 32px;height: 32px;background-size: contain;transform: scale(1.1);} .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(1) .switch-button-text::before {content: "";background-image: url("../../../world/shared/global-common-top/images_sites/icons/icon_module_plane.svg");} .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(2) .switch-button-text::before {content: "";background-image: url("../../../world/shared/global-common-top/images_sites/icons/icon_module_bed.svg");} .rsv-switch-area .rsv-switch-inner .switch-button[data-module-switch="true"] {background: #A46A00;color: #fff;border: none;} .rsv-switch-area .rsv-switch-inner .switch-button[data-module-switch="true"]::before {display: block;} .rsv-switch-area .rsv-switch-inner .switch-button[data-module-switch="true"]:nth-child(1) .switch-button-text::before {background-image: url("../../../world/shared/global-common-top/images_sites/icons/icon_module_plane_ac.svg");} .rsv-switch-area .rsv-switch-inner .switch-button[data-module-switch="true"]:nth-child(2) .switch-button-text::before {background-image: url("../../../world/shared/global-common-top/images_sites/icons/icon_module_bed_ac.svg");} [lang="th"] .rsv-switch-area .rsv-switch-inner .switch-button .switch-button-text {line-height: 1;} .rsv-switch-area .default-error-text {margin-top: 6px;font-size: 0.97rem;} [lang="ja"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._car, [lang="ja"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._activity {letter-spacing: -2px;} .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._rental, .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._hire, .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._activity {display: none;} .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._rental::before, .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._hire::before, .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._activity::before {content: none;} [data-bookmaker="RENTAL"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._rental, [data-bookmaker="FLIGHT-RENTAL"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._rental, [data-bookmaker="FLIGHT-HOTEL-RENTAL"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._rental, [data-bookmaker="HIRE"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._hire, [data-bookmaker="ACTIVITY"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._activity {display: flex;} .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._car::before, [data-bookmaker="RENTAL"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._rental::before, [data-bookmaker="FLIGHT-RENTAL"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._rental::before, [data-bookmaker="FLIGHT-HOTEL-RENTAL"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._rental::before {content: "";background-image: url("../../../world/shared/global-common-top/images_sites/icons/icon_module_car.svg");} [data-bookmaker="HIRE"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._hire::before {content: "";background-image: url("../../../world/shared/global-common-top/images_sites/icons/icon_module_hire.svg");} [data-bookmaker="ACTIVITY"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._activity::before {content: "";background-image: url("../../../world/shared/global-common-top/images_sites/icons/icon_module_activity.svg");} [data-bookmaker="RENTAL"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._car, [data-bookmaker="FLIGHT-RENTAL"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._car, [data-bookmaker="FLIGHT-HOTEL-RENTAL"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._car, [data-bookmaker="HIRE"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._car, [data-bookmaker="ACTIVITY"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._car {display: none;} .rsv-switch-area .rsv-switch-inner .switch-button[data-module-switch="true"]:nth-child(3) .switch-button-text._car::before, [data-bookmaker="RENTAL"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._rental::before, [data-bookmaker="FLIGHT-RENTAL"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._rental::before, [data-bookmaker="FLIGHT-HOTEL-RENTAL"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._rental::before {background-image: url("../../../world/shared/global-common-top/images_sites/icons/icon_module_car_ac.svg");} [data-bookmaker="HIRE"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._hire::before {background-image: url("../../../world/shared/global-common-top/images_sites/icons/icon_module_hire_ac.svg");} [data-bookmaker="ACTIVITY"] .rsv-switch-area .rsv-switch-inner .switch-button:nth-child(3) .switch-button-text._activity::before {background-image: url("../../../world/shared/global-common-top/images_sites/icons/icon_module_activity_ac.svg");} @media screen and (min-width:740px){ .reservation-module-unit .rsv-switch-area {justify-content: flex-start;max-width: 224px;padding: 23px 8px 0 0;} .rsv-switch-area .rsv-switch-inner .switch-button[data-module-switch="false"]:nth-child(2):hover {border-color: #A46A00;} .rsv-switch-area .rsv-switch-inner .switch-button[data-module-switch="false"]:nth-child(2):hover .switch-button-text {color: #A46A00;} .rsv-switch-area .rsv-switch-inner .switch-button .switch-button-text {line-height: 1;} .rsv-switch-area .rsv-switch-inner .switch-button .switch-button-text::before {margin-bottom: 2px;} .rsv-switch-area .default-error-text {position: absolute;bottom: 7px;right: 8px;left: 0;} [lang="vi"] .rsv-switch-area .rsv-switch-inner .switch-button .switch-button-text, [lang="in"] .rsv-switch-area .rsv-switch-inner .switch-button .switch-button-text {transform: scale(0.85);} } @media screen and (max-width: 739px) { .for-mobile .rsv-switch-area{padding: 0 10px;} .rsv-switch-area .rsv-switch-inner {justify-content: center;padding-top: 16px;} .rsv-switch-area .rsv-switch-inner .switch-button {position: relative;width: auto;min-width: 96px;height: auto; padding: 6px 11px 6px 43px;} .rsv-switch-area .rsv-switch-inner .switch-button .switch-button-text {justify-content: center;height: 32px;padding-left: 4px;text-align: center;transform: initial;} .rsv-switch-area .rsv-switch-inner .switch-button .switch-button-text::before {position: absolute;top: 6px;left: 11px;transform: initial;} .rsv-switch-area .default-error-text {margin-top: 0;margin-bottom: 6px;} .rsv-switch-inner + .default-error-text {padding: 8px 8px 0;} } @media all and (-ms-high-contrast: none) and (min-width: 740px){ .rsv-switch-area .rsv-switch-inner .switch-button .switch-button-text {align-items: stretch;word-break: break-all;} .rsv-switch-area .rsv-switch-inner .switch-button .switch-button-text::before {margin: 0 auto;} } .switch-car-box {position: absolute;top: 0;left: 0;padding: 8px 4px 4px;border-radius: 0 0 4px 4px;background: #fff;} @media screen and (max-width: 739px){ .switch-car-box {display: none;} .switch-car-area {padding: 8px 16px 10px;} } .switch-unit {position: relative;width: auto;min-height: 41px;} .switch-unit label {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} .switch-unit label .switch-button {position: relative;} .switch-unit label .switch-button:before {content: attr(data-checked);position: absolute;top: 0;text-align: center;} .switch-unit label .switch-button:after {content: attr(data-unchecked);position: absolute;z-index: 5;text-align: center;background: white;color: #fff;} .switch-unit input[type='radio'] {position: absolute;top: 0;width: 0;height: 0;margin: 0;border-radius: 4px;opacity: 0;} .switch-unit input[type='radio'].radio-l {left: 0;} .switch-unit input[type='radio'].radio-r {right: 0;} .switch-unit .switch-button{display:-ms-grid;display:grid;-ms-grid-columns: 1fr 1fr;grid-template-columns: 1fr 1fr;-ms-grid-rows: 100% 100%;grid-template-rows: 100% 100%;position:relative;height:41px;border-radius:4px;padding:3px;background:#fff;border:1px solid #3e3e3e;font-size:1.4rem;} .switch-unit .switch-button > *:nth-child(1){-ms-grid-row:1;-ms-grid-column:1;} .switch-unit .switch-button > *:nth-child(2){-ms-grid-row:1;-ms-grid-column:2;} .switch-unit .switch-button label {position: relative;display: flex;justify-content: center;align-items: center;min-width: 100px;} .switch-unit .switch-button .label-l {padding: 4px 10px;text-align: center;line-height: 1.2;z-index: 1;} .switch-unit .switch-button .label-c {padding: 4px 10px;text-align: center;line-height: 1.2;z-index: 2;} .switch-unit .switch-button .label-r {padding: 4px 10px;text-align: center;line-height: 1.2;z-index: 3;} .switch-unit .switch-button .label-l {left: 0;} .switch-unit .switch-button .label-r {right: 0;} .switch-unit .switch-button .label-l:focus, .switch-unit .switch-button .label-c:focus, .switch-unit .switch-button .label-r:focus, .switch-unit .radio-l:checked:focus ~ .switch-button .label-l, .switch-unit .radio-c:checked:focus ~ .switch-button .label-c, .switch-unit .radio-r:checked:focus ~ .switch-button .label-r {outline: none;} .switch-unit .switch-button .label-l:focus-visible, .switch-unit .switch-button .label-c:focus-visible, .switch-unit .switch-button .label-r:focus-visible, .switch-unit .radio-l:checked:focus-visible ~ .switch-button .label-l, .switch-unit .radio-c:checked:focus-visible ~ .switch-button .label-c, .switch-unit .radio-r:checked:focus-visible ~ .switch-button .label-r {outline: 2px solid #000;} .switch-unit .radio-l:checked ~ .switch-button .label-l, .switch-unit .radio-c:checked ~ .switch-button .label-c, .switch-unit .radio-r:checked ~ .switch-button .label-r {border-radius: 2px;background-color: #9c6d16;color: #fff;transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);} .switch-unit .radio-l:checked ~ .switch-button .label-l {left: 30px;transform: translateX(-30px);} .switch-unit .radio-r:checked ~ .switch-button .label-r {right: 30px;transform: translateX(30px);} .switch-unit.col3 .switch-button {-ms-grid-columns: 1fr 1fr 1fr;grid-template-columns: 1fr 1fr 1fr;-ms-grid-rows: 100% 100% 100%;grid-template-rows: 100% 100% 100%;} .switch-unit.col3 .switch-button > *:nth-child(1) {-ms-grid-row: 1;-ms-grid-column: 1;} .switch-unit.col3 .switch-button > *:nth-child(2) {-ms-grid-row: 1;-ms-grid-column: 2;} .switch-unit.col3 .switch-button > *:nth-child(3) {-ms-grid-row: 1;-ms-grid-column: 3;} .switch-unit.col3 .radio-l:checked ~ .switch-button .label-l {left: 30px;transform: translateX(-30px);} .switch-unit.col3 .radio-c:checked ~ .switch-button .label-c {right: 30px;transform: translateX(30px);} .switch-button .label-l::before, .switch-button .label-c::before {content: "" !important;position: absolute;top: 4px;bottom: 0;right: -1px;width: 1px;height: calc(100% - 8px);background: #bfbfbf;z-index: -1;} .switch-button-link {display: flex;justify-content: center;align-items: center;padding: 4px 10px;text-align: center;z-index: 0;} .switch-button-link .alt-icon {top: 0;} .switch-button-jep { height: 41px; border-radius: 4px; padding: 3px; background: #fff; border: 1px solid #3e3e3e; font-size: 1.4rem; display: flex; justify-content: center; line-height: 1.2; margin-left: 10px; } @media screen and (max-width: 739px) { .switch-unit {width: 100%;} .switch-button {display: flex;} .switch-unit .switch-button .label-l, .switch-unit .switch-button .label-r {min-width: calc(100% / 2);padding: 0;} .switch-unit.col3 .switch-button .label-l, .switch-unit.col3 .switch-button .label-c, .switch-unit.col3 .switch-button .label-r {min-width: calc(100% / 3);} .rsv-switch-area.rsv-switch-area.hide-ct {display: none !important;} .switch-button-jep { margin-left: 0; margin-top: 5px; width: 100%; } } /* --- / switch-button --- */ /* --- module tab --- */ /* module tab */ .module-tablist {position: relative;margin: 0 auto;background: #fff;} .module-tablist::before {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 4px;background: #D5D5D5;} .module-tablist__inner {width: 100%;height: 100%;display: flex;flex-wrap: wrap;} .module-tab {position: relative;width: auto;height: 48px;} .module-tab__inner {display: block;position: relative;width: 100%;height: 100%;text-decoration: none;} .module-tab__inner__txt {display: flex;justify-content: center;align-items: center;position: relative;width: 100%;height: 100%;font-size: 1.4rem;z-index: 1;} .module-tab input {position: absolute;width: 0;height: 0;opacity: 0;} .module-tab input:focus ~ span {outline: 2px solid #000;outline-offset: -2px;} [aria-selected="true"] .module-tab__inner__txt {font-weight: 600;} [aria-selected="true"] .module-tab__inner__txt._01::before {background-image: url(../../../content/dam/assets-global/world/commonY20/img/icon_module_tab_booking_ac.svg);} [aria-selected="true"] .module-tab__inner__txt._02::before {background-image: url(../../../content/dam/assets-global/world/commonY20/img/icon_module_tab_checkin_ac.svg);} [aria-selected="true"] .module-tab__inner__txt._03::before {background-image: url(../../../content/dam/assets-global/world/commonY20/img/icon_module_tab_m-booking_ac.svg);} [aria-selected="true"] .module-tab__inner__txt::after {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 4px;background: #8C713F;} .h100 .module-tablist {display: none;} @media screen and (min-width: 740px) { .module-tablist {min-width: 1096px;} .module-tablist__inner {width: 1096px;margin: 0 auto;} .module-tab__inner__txt {padding: 0 16px;} .module-tab__inner__txt::before {content: "";width: 32px;height: 32px;margin-right: 4px;background-size: contain;} .module-tab__inner__txt._01::before {background-image: url(../../../content/dam/assets-global/world/commonY20/img/icon_module_tab_booking.svg);} .module-tab__inner__txt._02::before {background-image: url(../../../content/dam/assets-global/world/commonY20/img/icon_module_tab_checkin.svg);} .module-tab__inner__txt._03::before {background-image: url(../../../content/dam/assets-global/world/commonY20/img/icon_module_tab_m-booking.svg);} .module-tab__inner__txt:hover {color: #8e610f;cursor: pointer;} [aria-selected="true"] .module-tab__inner__txt:hover {color: #3e3e3e;cursor: initial;} } @media screen and (max-width:739px){ .module-tab {width: calc(100% / 3);height: 48px;} .module-tab__inner__txt {padding: 0 8px;font-size: 1.17rem;text-align: center;} } /* module tab item */ .reservation-module-unit._btn-unit {height: auto !important;} @media screen and (min-width: 740px) { .reservation-module-unit._btn-unit {position: relative;min-height: 100px;padding-right: 0;} .reservation-module-quicklink-list {display: flex;justify-content: space-around;width: 100%;padding: 16px 0;} .reservation-module-quicklink-list-item {flex: auto;width: 100%;max-width: calc(100% / 3 - 22px);} .reservation-module-quicklink-list-item:not(:last-child) {margin-right: 34px;} .reservation-module-quicklink-list-item .button-primary {width: 100%;} .reservation-module-quicklink-list-item p {padding-top: 16px;font-size: 1.4rem;} } @media screen and (max-width: 739px){ .module-container {height: 100%;} .reservation-module-unit._btn-unit {display: block;width: 100%;padding-right: 0;} .reservation-module-quicklink-list {position: static;top: 0;left: 0;right: 0;padding: 16px 16px 32px;background: #fff;height: auto;max-height: calc(100vh - 96px);overflow: scroll;} .reservation-module-quicklink-list-item:not(:last-child) {margin-bottom: 24px;} .reservation-module-quicklink-list-item p {padding-top: 16px;} } /* --- / module tab --- */ /* -------------------- / module -------------------- */ /* jal program */ .jalprogram-unit { background-color: #fff; width: 100%; position: relative; } .jalprogram-unit:before { display: block; content: ''; background-position: center right; background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; left: 0; width: 50%; min-width: 548px; height: 100%; } .jalprogram-area { display: flex; position: relative; width: 1096px; margin: 0 auto; z-index: 1; } .lounge-service-area .jalprogram-area { top: 0; width: 40%; } .jalprogram-area .thumbnail-box a:hover { cursor: pointer; } .jalprogram-area img { width: 100%; } .jalprogram-area .jalprogram-col { width: 548px; } .lounge-service-area .jalprogram-area .jalprogram-col { width: auto; } .jalprogram-area .jalprogram-col .thumbnail-box .link-other .alt-icon { position: absolute; top: 55%; right: 0px; left: auto; } .jalprogram-area .jalprogram-col:first-child { padding: 80px 124px 80px 0; } .jalprogram-area .jalprogram-col:nth-child(2) { padding: 80px 0px 80px 124px; } .jalprogram-area .jalprogram-col .title-block .img-item { margin-left: 16px; } .jalprogram-area .pic-card-face { max-width: 312px; margin-top: 61.83px; } .jalprogram-area .thumbnail-box .col:nth-child(2) dl { border-bottom: 1px solid #bfbfbf; } .jalprogram-area .thumbnail-box a.col { position: relative; } .jalprogram-area .thumbnail-box a.col:after { content: ''; display: block; background-image: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_text_link.svg); background-repeat: no-repeat; background-position: 0 0; position: absolute; top: 50%; right: 0px; width: 10px; height: 18px; transform: translateY(-0%); } .jalprogram-area .thumbnail-box dd { min-height: calc(2em + 20px); line-height: 1.5; padding: 0 14% 20px 0; margin-top: 3px; } @media screen and (max-width: 739px) { .lounge-service-area .jalprogram-area { display: block; width: 94%; } .jalprogram-area .jalprogram-col { width: 100%; } .jalprogram-unit::before { display: none; } .jalprogram-unit .jalprogram-area .jalprogram-col:first-child { background-size: cover; background-repeat: no-repeat; min-height: 480px; padding: 47.83px 15.36px; } .jalprogram-area .jalprogram-col:nth-child(2) { padding: 47.83px 15.36px; } .jalprogram-area .pic-card-face { width: 64%; margin-top: 40px; } .thumbnail-box .col.picture:first-child { min-width: 88px; } .pic-right + .thumbnail-box .col.picture:first-child { min-width: 88px; } } .jalprogram-unit.travelinfo-pg:before { background-image: url(../../../world/commonY20/travelinfo/img/bg_travelinfo_program.jpg); } .jalprogram-unit.jmb-pg:before { background-image: url(../../../world/commonY20/jmb/img/bg_jmb_program.jpg); } .jalprogram-unit.explorejapan-pg:before { background-image: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/bg_railroad_promotion.jpg); } .jalprogram-unit.jmb-pg.ar-program:before { background-image: url(../../../world/commonY20/jmb/img/bg_jmb_program_ar.jpg); } @media screen and (max-width: 739px) { .jalprogram-unit.travelinfo-pg .jalprogram-area .jalprogram-col:first-child { background-image: url(../../../world/commonY20/travelinfo/img/bg_travelinfo_program.jpg); background-position: bottom right; } .jalprogram-unit.jmb-pg .jalprogram-area .jalprogram-col:first-child { background-image: url(../../../world/commonY20/jmb/img/bg_jmb_program.jpg); background-position: 88% bottom; } .jalprogram-unit.explorejapan-pg .jalprogram-area .jalprogram-col:first-child { background-image: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/bg_railroad_promotion.jpg); background-position: bottom center; } .jalprogram-unit.jmb-pg.ar-program .jalprogram-area .jalprogram-col:first-child { background-image: url(../../../world/commonY20/jmb/img/bg_jmb_program_ar.jpg); background-position: bottom right; } } /**/ .lineup-unit { position: relative; margin-top: 24px; } .lineup-unit [aria-hidden='true'] { display: none !important; } .lineup-area { display: flex; align-items: flex-end; /* justify-content: space-between; */ position: absolute; bottom: 0; left: 0; width: 100%; } .lineup-area .lineup-tab-button { background-color: rgba(0, 0, 0, 0.8); color: #fff; font-size: 1.17rem; text-align: center; padding: 16px; border-left: 1px solid #fff; width: 224px; height: 142px; display: flex; align-items: center; justify-content: center; } .lineup-area li:first-child .lineup-tab-button { border-left: none; } .lineup-area .lineup-tab-button span { display: block; } .lineup-area .lineup-tab-button img { width: 64px; height: auto; } .lineup-area .lineup-tab-body { background-color: #fff; width: 648px; padding: 40px; display: table; } .lineup-area .lineup-tab-body .in-col { display: table-cell; vertical-align: top; } .lineup-area .lineup-tab-body .in-col + .in-col { padding-left: 40px; } .lineup-area .lineup-tab-body .card-face { width: 136px; height: auto; } .lineup-area .lineup-check-list { margin-top: 16px; } .lineup-area .lineup-check-list li { line-height: 1.7; } .card-type-img img { width: 100%; height: auto; vertical-align: bottom; } .one-world-box { display: flex; align-items: flex-end; } .lineup-unit.tab-type2 .lineup-area .lineup-tab-body { width: 872px; } .lineup-area .lineup-tab-button .card-mobile-background { display: none; } @media screen and (max-width: 739px) { .lineup-area { display: block; position: static; order: 2; } .card-type-img { order: 1; } .one-world-box { position: static; margin-top: 10px; } .lineup-unit.tab-type2 .lineup-area .lineup-tab-body { width: 100%; } .lineup-area .lineup-tab-body { display: block; width: 100%; padding: 0 24px 50px 24px; } .lineup-area .lineup-tab-body .in-col { display: block; } .lineup-area .lineup-tab-body .in-col:not(:first-child) { padding: 0; margin-top: 26px; } .lineup-area > li { border-top: 1px solid #f2f1ef; } .lineup-area .lineup-tab-button .card-desktop-title { display: none; } .lineup-area .lineup-tab-button[aria-hidden='false'] .card-mobile-text, .lineup-area .lineup-tab-button[aria-hidden='false'] .card-mobile-image, .lineup-area .lineup-tab-button[aria-hidden='false'] .card-mobile-background, .lineup-area .lineup-tab-button[aria-hidden='false'] .card-mobile-background-image { height: 100%; width: 100%; } .lineup-area .lineup-tab-button[aria-hidden='false'] .card-mobile-background { display: flex; flex-direction: column; } .lineup-area .lineup-tab-button[aria-hidden='false'] .card-mobile-text { align-items: center; justify-content: center; } .lineup-area .lineup-tab-button { display: flex; background-size: cover; background-position: center center; background-repeat: no-repeat; align-items: center; border-left: 0px; position: relative; width: 100vw; height: 96px; padding-left: 20px; padding-right: 20px; margin: 0 -16px 0 -16px; } .lineup-area .lineup-tab-body .card-face { width: 86px; } .lineup-area .lineup-tab-button:after { content: ''; background: rgba(0, 0, 0, 0.65); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .lineup-area .lineup-tab-button img { z-index: 5; } .lineup-area .lineup-tab-button span { margin-left: 10px; z-index: 5; } .lineup-area .lineup-check-list li { line-height: 1.4; margin-bottom: 4px; } .lineup-area .lineup-check-list li img { vertical-align: bottom; } .sp-card-type-img { display: block; width: calc(100vw - 32px); margin-left: -24px; margin-bottom: 15px; } .sp-card-type-img img { width: 100%; } .card-type-img { display: none; } } /* select box */ .ttl-select { display: flex; } .select-box { position: relative; width: 312px; } .ttl-select .select-box { margin-left: 8.25px; } .on-select { border-bottom: 1px solid #9c6d16; cursor: pointer; padding: 5px 45px 5px 5px; position: relative; } .on-select:after { position: absolute; top: 5px; right: 16px; content: ''; display: inline-block; width: 24px; height: 24px; background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_arrow_gr.svg) no-repeat 0 0; transition: all 0.5s ease; transform: rotate(0); } .on-select[aria-expanded='false']:after { transform: rotate(180deg); } .select-body { position: absolute; top: auto; left: 0; right: 0; width: 100%; margin: 0 auto; padding-top: 16px; background: #fff; border-radius: 0 0 4px 4px; z-index: 6; box-shadow: 0px 3px 10px 5px rgba(0, 0, 0, 0.16); } .aria-select .select-body { box-shadow: 0px 3px 10px 5px rgba(0, 0, 0, 0.16); height: 270px; } .select-body li a { padding: 8px 16px; display: block; text-decoration: none; transition: all 0.6s ease 0s; width: 100%; text-align: left; color: #3e3e3e; } .select-body li:last-child a { border-radius: 0 0 4px 4px; } .select-body li a[aria-selected='true'] { color: #9c6d16; } .select-body li a:hover { background-color: #9c6d16; color: #fff; } .select-body li a > span { display: block; font-size: 1.17rem; } .airport-info-area .ttl-select { display: flex; justify-content: space-between; align-items: end; flex-flow: wrap; } .airport-info-area .title-level-2 { width: 100%; } .airport-info-area .select-box { width: 424px; margin-left: auto; } @media screen and (max-width: 739px) { .ttl-select { display: block; } .ttl-select .select-box { margin-left: 0; } .select-box { width: 100%; } .select-body { width: 100%; left: 0; transform: none; } .airport-info-area .ttl-select { flex-flow: column; align-items: start; } .airport-info-area .ttl-select > div { margin-left: 0; margin-top: 16.5px; } .airport-info-area .select-box { width: 100%; order: 3; } .on-select { padding: 8px 45px 8px 8px; } .on-select:after { top: 8px; } } /* airport-search-box */ .airport-info-area .airport-search-box { width: 40%; max-width: 447px; position: relative; margin-left: 8.25px; } .airport-info-area form.airport-search-box-inner { position: relative; height: 46px; } .airport-info-area form.airport-search-box-inner button { position: absolute; top: 50%; transform: translateY(-50%); right: 10px; background-color: #fff; } .airport-info-area .airport-search-box-inner input { display: inline-block; width: 100%; height: 100%; padding: 0 11px; border: 2px solid #8D6214; background-color: #fff; } .airport-info-area .airport-search-box-inner input::placeholder { font-size: 1.68rem; color: #3e3e3e; } .airport-info-area .suggest-wrap { position: absolute; top: auto; left: 0; right: 0; width: 100%; max-height: 532.49px; margin: 0 auto; padding: 16px 0; background: #fff; border-radius: 0 0 4px 4px; z-index: 6; } .airport-info-area .suggest-item { display: flex; justify-content: space-between; color: #3e3e3e; padding: 10px 20px; } .airport-info-area .suggest-item:hover { background-color: #9c6d16; color: #fff; text-decoration: none; } .airport-info-area .suggest-item:focus-visible { outline: 2px solid #000; outline-offset: -2px; } .airport-info-area .suggest-item .item-col span { display: block; line-height: 1.25; } .airport-info-area .suggest-item .item-col span.city-area { font-size: 1.17rem; } @media screen and (max-width: 739px) { .airport-info-area .airport-search-box { width: 100%; max-width: 100%; } .airport-info-area .suggest-wrap { height: 254.44px; } } .dis-flex { display: flex; } .stay-japan-area, .baggage-area { padding: 96px 0; } .stay-japan-select, .baggage-select { display: flex; align-items: center; } .stay-japan-select, .baggage-select { font-size: 2.02rem; } .stay-japan-select .select-box, .baggage-select .select-box { font-size: 1.68rem; } .stay-japan-select dd, .baggage-select dd { display: flex; align-items: center; } .stay-japan-select .select-box, .baggage-select .select-box { margin: 0 16px 0 8px; } .stay-japan-select .select-box:first-child, .baggage-select .select-box:first-child { margin-left: 0; } .stay-japan-select dd:not(:first-child), .baggage-select dd:not(:first-child) { margin-left: 8px; } .tab-baggage [role='tablist'] { justify-content: flex-start; width: 100%; } .tab-baggage [role='tablist'] li { min-width: 135px; } .tab-baggage [role='tablist'] [role='tab'] { display: flex; align-items: center; justify-content: center; padding: 16px; font-size: 1.4rem; text-align: center; } .tab-baggage [role='tab'][aria-selected='true'] { font-weight: 700; } .tab-baggage [role='tablist'] { border-bottom: 4px solid #d5d5d5; } .tab-baggage [aria-selected='false']:after, .tab-baggage [aria-selected='true']:after { display: block; content: ''; border-bottom: 4px solid #8c713f; width: 100%; position: absolute; left: 0px; bottom: -4px; transition: all 0.8s ease; } .tab-baggage [aria-selected='false']:after { opacity: 0; } .thumb-box { display: flex; background: #fff; /*align-items: center;*/ } .thumb-box > div:first-child { width: 38.7%; } .thumb-box > div img { width: 100%; vertical-align: bottom; } .thumb-box .thumb-cont { width: 61.3%; padding: 24px 5.84%; } .baggage-area .col.left { width: 184px; min-width: 184px; padding-right: 16px; } .baggage-area .col.right { width: 100%; } .baggage-area .lead-text { line-height: 1.4; font-family: 'Montserrat', sans-serif; font-weight: 700; } .baggage-area .lead-text.title { line-height: 1.4; font-size: 2.02rem; word-wrap: break-word; } .baggage-area .note { font-size: 1.2rem; } .baggage-area .note:first-of-type { margin-top: 8px; } .baggage-area .max-num { position: relative; width: 100%; font-size: 1.2rem; padding-bottom: 4px; } .baggage-area .max-num p:first-child { line-height: 1; } .baggage-area .max-num span { padding: 0 4px; font-family: 'Montserrat', sans-serif; color: #a74849; font-size: 3.48rem; font-weight: 700; } .baggage-area .max-num-wrap p + p { position: absolute; margin-top: 4px; } [lang='en'] .baggage-area .lead-text { letter-spacing: -0.3px; } .baggage-box-head { display: flex; align-items: center; border-bottom: 1px solid #ccc; padding-bottom: 24.31px; margin-bottom: 24.31px; } .baggage-delivery .baggage-box-head { display: block; } .baggage-box-head .col.max-num-wrap { display: flex; justify-content: space-between; align-items: flex-end; } .baggage-box-head .max-num-wrap .max-num { margin-bottom: 1.8em; margin-right: 16px; } .baggage-box-head .bag-img { flex: none; min-width: 116px; } .baggage-box-head p > img { width: auto; } .baggage-box-body { margin-bottom: 8px; } .baggage-box-body .bag-detail { width: 100%; } .baggage-box-body .bag-detail p + p { margin: 0; } .baggage-box-body .bag-detail > div { display: flex; } .baggage-box-body .bag-detail > div:first-child { align-items: flex-end; } .baggage-box-body .bag-detail > div:not(:first-child) { margin-top: 16px; } .baggage-box-body .bag-detail div dt:not(.lead-text) { font-size: 1.4rem; width: 35%; } .baggage-box-body .bag-detail div dd { font-size: 1.4rem; } .baggage-box-body .bag-detail div em { font-style: normal; font-weight: 700; } .baggage-box-body .bag-detail-vertical { width: 100%; } .baggage-box-body .bag-detail-vertical dt { font-size: 1.4rem; font-weight: 700; width: 96%; margin-top: 24px; } .baggage-box-body .bag-detail-vertical dt:first-child { margin-top: 0px; } .baggage-box-body .bag-detail-vertical dd { font-size: 1.4rem; width: 96%; } .baggage-show-more [role='button'] { display: none; } .stay-japan-wrap { font-size: 1.4rem; } .stay-japan-head { font-weight: bold; } .stay-japan-body .thumbnail-box { margin-top: 32px; } .stay-japan-body .thumbnail-box li { border-top: 1px solid #bfbfbf; } .stay-japan-body .thumbnail-box li a { padding: 12px 0 40px; } .stay-japan-body .thumbnail-box li .text-fineprint { font-size: 1.4rem; font-weight: bold; } .stay-japan-body .thumbnail-box dl { width: 400px; } .stay-japan-body .thumbnail-box a { display: block; position: relative; width: 100%; } .stay-japan-body .thumbnail-box a:after { content: ''; display: block; background-image: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_text_link.svg); background-repeat: no-repeat; background-position: 0 0; position: absolute; top: 50%; right: 0px; width: 10px; height: 18px; transform: translateY(-50%); } .stay-japan-body .thumbnail-box .link-other .alt-icon { position: absolute; top: 50%; right: 0; left: inherit; transform: translateY(-50%); } @media screen and (min-width: 740px) { html[lang='fr'] .stay-japan-select .select-box, html[lang='fr'] .baggage-select .select-box { width: 282px; } html[lang='in-ID'] .stay-japan-select .select-box { width: 282px; } html[lang='ru'] .stay-japan-select .select-box { width: 222px; } html[lang='ru'] .baggage-select .select-box { width: 272px; } html[lang='de'] .stay-japan-select .select-box { width: 222px; } } @media screen and (max-width: 739px) { .stay-japan-area, .baggage-area { padding: 44.98px 0 16px 0; } .stay-japan-select, .baggage-select { display: block; margin-top: 24px; } .stay-japan-select dd > div, .baggage-select dd > div { margin: 0; } .stay-japan-select dd, .baggage-select dd { flex-wrap: wrap; } .stay-japan-select dd:not(:first-child), .baggage-select dd:not(:first-child) { margin-left: 0; } .stay-japan-select .select-box, .baggage-select .select-box { margin: 0; } /* 各言語調整 */ .stay-japan-select dd .select-box { padding: 8px 0; } .stay-japan-select dd > div:nth-child(2) { width: 96px; } .stay-japan-select dd > div:nth-child(3) { width: calc(100% - 104px); margin: 0 0 0 8px; } .baggage-select dd > div:nth-child(3) { width: calc(100% - 30px); margin: 0 0 0 8px; } html[lang='ja'] .stay-japan-select dd > div:nth-child(2), html[lang='zh-HK'] .stay-japan-select dd > div:nth-child(2), html[lang='zh-CN'] .stay-japan-select dd > div:nth-child(2), html[lang='ko'] .stay-japan-select dd > div:nth-child(2), html[lang='zh-TW'] .stay-japan-select dd > div:nth-child(2), html[lang='es'] .stay-japan-select dd > div:nth-child(2) { width: 66px; } html[lang='in-ID'] .stay-japan-select dd > div:nth-child(2) { width: 136px; } html[lang='th'] .stay-japan-select dd > div:nth-child(2) { width: 76px; } html[lang='fr'] .stay-japan-select dd > div:nth-child(2), html[lang='de'] .stay-japan-select dd > div:nth-child(2) { width: 100%; } html[lang='it'] .stay-japan-select dd > div:nth-child(2) { width: 116px; } html[lang='ru'] .stay-japan-select dd > div:nth-child(2), html[lang='vi'] .stay-japan-select dd > div:nth-child(2) { width: 106px; } html[lang='ja'] .stay-japan-select dd > div:nth-child(3), html[lang='zh-HK'] .stay-japan-select dd > div:nth-child(3), html[lang='zh-CN'] .stay-japan-select dd > div:nth-child(3), html[lang='ko'] .stay-japan-select dd > div:nth-child(3), html[lang='zh-TW'] .stay-japan-select dd > div:nth-child(3), html[lang='es'] .stay-japan-select dd > div:nth-child(3) { width: calc(100% - 74px); } html[lang='in-ID'] .stay-japan-select dd > div:nth-child(3) { width: calc(100% - 144px); } html[lang='th'] .stay-japan-select dd > div:nth-child(3) { width: calc(100% - 84px); } html[lang='fr'] .stay-japan-select dd > div:nth-child(3), html[lang='de'] .stay-japan-select dd > div:nth-child(3) { width: 100%; margin: 0; } html[lang='it'] .stay-japan-select dd > div:nth-child(3) { width: calc(100% - 124px); } html[lang='ru'] .stay-japan-select dd > div:nth-child(3), html[lang='vi'] .stay-japan-select dd > div:nth-child(3) { width: calc(100% - 114px); } html[lang='ja'] .baggage-select dt { margin-top: 12px; } html[lang='ja'] .baggage-select dd > div:first-child { width: calc(100% - 54px); } html[lang='ja'] .baggage-select dd > div:nth-child(3) { width: 100%; margin-left: 0; } html[lang='zh-HK'] .baggage-select dd, html[lang='zh-CN'] .baggage-select dd, html[lang='ko'] .baggage-select dd, html[lang='zh-TW'] .baggage-select dd { margin-bottom: 8px; } html[lang='zh-HK'] .baggage-select dd > div:nth-child(3), html[lang='zh-CN'] .baggage-select dd > div:nth-child(3), html[lang='zh-TW'] .baggage-select dd > div:nth-child(3) { margin: 0; width: auto; } html[lang='zh-HK'] .baggage-select dd > div:nth-child(4), html[lang='zh-CN'] .baggage-select dd > div:nth-child(4), html[lang='zh-TW'] .baggage-select dd > div:nth-child(4) { width: calc(100% - 30px); margin: 0 0 0 8px; } html[lang='vi'] .baggage-select dd > div:nth-child(3), html[lang='fr'] .baggage-select dd > div:nth-child(3) { width: calc(100% - 40px); } html[lang='th'] .baggage-select dd > div:nth-child(3) { width: calc(100% - 60px); } html[lang='de'] .baggage-select dd > div:nth-child(3) { width: calc(100% - 60px); margin: 0 0 8px 8px; } html[lang='it'] .baggage-select dd > div:nth-child(3) { width: calc(100% - 100px); } html[lang='ru'] .baggage-select dd > div:nth-child(3) { width: 100%; margin: 0; } /* /各言語調整 */ .tab-baggage { width: calc(100% + 32px); margin-left: -16px; } .tab-baggage .tablist-wrap { overflow-x: scroll; } .baggage-area .col.left { width: 90%; padding: 0; } .baggage-area .max-num-wrap p + p { position: static; } .baggage-area div dt { margin-bottom: 4px; } .baggage-box-head { flex-wrap: wrap; align-items: flex-end; margin-top: 35.56px; } .baggage-box-head .max-num-wrap { margin-top: 16px; } .baggage-box-head .max-num-wrap .max-num { margin-bottom: 0; } .baggage-box-body .bag-detail > div { display: block; } .baggage-box-body .bag-detail > div:first-child { display: flex; } .baggage-box-body .bag-detail .lead-text { min-width: 50%; } .baggage-box-body .bag-detail .max-num { min-width: 50%; text-align: right; } .baggage-box-body .bag-detail div dt:not(.lead-text) { width: 100%; } .baggage-box-body + div { margin-top: 16px; } .baggage-delivery .baggage-box-head > p:first-child { width: 100%; } .tab-mileuse [role='tabpanel'] { padding: 40px 0; } .thumb-box { display: block; } .thumb-box > div:first-child { width: 100%; height: 203px; overflow: hidden; } .thumb-box .thumb-cont { width: 100%; padding: 0 16px; } .baggage-show-more { padding: 0 0 64px 0; } .baggage-show-more [role='button'] { display: inline-block; font-family: 'Montserrat', sans-serif; color: #856514; font-weight: 600; position: relative; margin-bottom: 20px; padding-right: 20px; } .baggage-show-more [role='button']:after { content: ''; display: block; top: 50%; right: 0px; width: 16px; height: 16px; transform: translateY(-50%); } .baggage-show-more [role='button'][aria-expanded='true']:after { background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_minus.svg) 0 0 no-repeat; position: absolute; } .baggage-show-more [role='button'][aria-expanded='false']:after { background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_plus.svg) 0 0 no-repeat; position: absolute; } [lang='en'] .tab-baggage [role='tablist'] li { width: 133px; } .stay-japan-area .thumb-cont { padding-top: 32px; padding-bottom: 32px; } .stay-japan-body .thumbnail-box dl { width: auto; } .stay-japan-body .thumbnail-box li a { padding-right: 40px; } .stay-japan-area .thumb-box > div:first-child { position: relative; } } @media screen and (max-width: 374px) { .baggage-area .contents-inner .title-level-2 { font-size: 2.45rem; } } .text-list li { padding-left: 1em; position: relative; } .text-list li:before { display: block; content: ''; background: #333; border-radius: 50%; position: absolute; left: 0px; top: 0.6em; width: 4px; height: 4px; } .trip-budget .thumbnail-box-vertical .box-inner { padding-bottom: calc(24px + 1em); } .trip-budget .link-text { position: absolute; left: 22px; bottom: 24px; color: #333; } .trip-budget .link-text::after { background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_text_link_bk_s.svg) 0 0 no-repeat; } /* anime */ @keyframes arrow { 0% { right: 0; opacity: 0; } 100% { right: -15px; opacity: 1; } } @keyframes arrowARL { 0% { right: 0; opacity: 0; } 100% { right: -15px; opacity: 1; } } .flex-wrap-row { width: 100%; display: flex; align-content: space-between; justify-content: space-between; } .flex-wrap-col { width: 100%; display: flex; flex-wrap: wrap; align-content: space-between; justify-content: space-between; } /* JMB */ [data-login='false'] .title-level-2 .login-true { display: none; } [data-login='true'] .title-level-2 .login-false { display: none; } [data-login='true'] .tablist-wrap .login-true { display: none; } [data-login='true'] .tab-panels .login-true { display: none !important; } [data-login='true'] .jmb-page > .contents-inr { margin-top: 0; } [data-login='true'] .login-wrap { background: url(../../../world/commonY20/jmb/img/bg_member_top.jpg) no-repeat 50% 0 #fff; max-width: 100%; min-height: 200px; background-size: 100% auto; box-shadow: none; } [data-login='true'] .login-wrap.bg-higher { background-image: url(../../../world/commonY20/jmb/img/bg_member_top_higher.jpg); } [data-login='true'] .login-user img { border: 6px solid #fff; border-radius: 50%; } [data-login='true'] .login-unit { padding-bottom: 80px; padding-top: 5.3vw; } [data-login='true'] .login-unit .fs-s { font-size: 1.2rem !important; } [data-login='true'] .login-unit .login-top-text { text-align: center; font-size: 2.488rem; margin-top: 2px; word-break: break-word; } [data-login='true'] .login-unit .login-top-text .name { padding-right: 0.5em; } [data-login='true'] .login-unit .error-unit { margin: 30px auto 0; text-align: center; } [data-login='true'] .login-unit .error-text { font-size: 1.2rem; color: #cc0000; position: relative; display: inline-block; padding-left: 18px; text-align: left; } [data-login='true'] .login-unit .error-text:before { content: ''; display: block; background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_login_error.svg) no-repeat 0 1px; position: absolute; top: 0; left: 0px; width: 16px; height: 16px; } [data-login='true'] .login-unit .error-link { display: inline-block; padding: 15px 10px; font-size: 1.4rem; } [data-login='true'] .login-unit .number-unit { margin-top: 4px; text-align: center; } [data-login='true'] .login-unit .number-unit > div { display: inline-block; font-size: 1.4rem; padding: 0 3px; } [data-login='true'] .login-unit .details-wrap { max-width: 940px; margin: 60px auto 0 auto; display: flex; justify-content: space-between; } [data-login='true'] .login-unit .details-box span:not(.alt-icon) { font-weight: 700; line-height: 1.25; padding-right: 5px; } [data-login='true'] .login-unit .details-box span.alt-icon { display: inline-block; } [data-login='true'] .login-unit .details-box .clr-mile, [data-login='true'] .login-unit .details-box .clr-ejal { font-size: 3.8rem; font-family: 'Muli', sans-serif; } [data-login='true'] .login-unit .details-box .clr-mile { color: #976f11; } [data-login='true'] .login-unit .details-box .clr-ejal { color: #2a344b; } [data-login='true'] .login-unit .details-box .question { padding-left: 2px; display: inline; vertical-align: 1px; } [data-login='true'] .login-unit .details-box .question img { vertical-align: middle; } [data-login='true'] .login-unit .status-box .status-detail dt span { display: block; } [data-login='true'] .login-unit .status-box { border-radius: 6px; background-color: #f4f5f6; padding: 21px 136px 21px 24px; min-width: 364px; position: relative; } [data-login='true'] .login-unit .status-box .status-text { color: #cc0000; font-weight: 700; font-size: 1.728rem; margin-top: 3px; } [data-login='true'] .login-unit .status-box .status-detail dd { line-height: 1.7; } [data-login='true'] .login-unit .status-box .status-detail dd strong { font-size: 1.4rem; } [data-login='true'] .login-unit .status-box .status-detail dd .status-detail-fs-s { margin-top: 0px; font-size: 1.17rem; } [data-login='true'] .login-unit .status-box .status-pic { position: absolute; right: 24px; text-align: right; } [data-login='true'] .login-unit .status-box .status-pic > p { font-size: 0; } [data-login='true'] .login-unit .status-box .status-pic-cardface { width: 100px; } [data-login='true'] .login-unit .status-box .status-pic-oneworld { width: 35px; margin-top: 4px; } [data-login='true'] .login-unit .nav-lines { font-size: 0; text-align: center; margin-top: 50px; } [data-login='true'] .login-unit .nav-lines li { display: inline-block; font-size: 1.68rem; border-left: 1px solid #d5dbe2; margin-left: 10px; } [data-login='true'] .login-unit .nav-lines li:first-child { margin-left: 0; border-left: none; } [data-login='true'] .login-unit .nav-lines li:first-child a { padding-left: 0; } [data-login='true'] .login-unit .nav-lines li a { padding-left: 10px; } [data-login='true'] .login-unit .appeal-area { margin-top: 48px; border-radius: 6px; background-color: #f4f5f6; padding: 16px 32px; } [data-login='true'] .login-unit .appeal-area .appeal-text { margin-left: 24px; } [data-login='true'] .login-unit .appeal-area .appeal-text span, [data-login='true'] .login-unit .appeal-area .appeal-text strong { display: block; } [data-login='true'] .login-unit .appeal-area .appeal-text p strong { margin-bottom: 2px; } [data-login='true'] .login-unit .appeal-area .appeal-pic img { width: 88px; height: auto; vertical-align: bottom; } [data-login='true'] .login-unit .privilege-area-title { position: relative; width: 100%; height: 80px; margin-top: 48px; padding: 24px 0 28px; border-radius: 6px; background: url(../../../world/commonY20/jmb/img/bg_login_privilege_area_title.png) no-repeat; background-size: auto 100%; text-align: center; font-size: 1.8rem; color: #fff; } [data-login='true'] .login-unit .privilege-area-title::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: 40px; height: 40px; margin: 0 auto; background-size: contain; transform: translateY(50%); z-index: 999; } [data-login='true'] .login-unit .privilege-area-title[aria-expanded='false']::before { background-image: url(../../../world/commonY20/jmb/img/icon_accordion_open.svg); } [data-login='true'] .login-unit .privilege-area-title[aria-expanded='true']::before { background-image: url(../../../world/commonY20/jmb/img/icon_accordion_close.svg); } [data-login='true'] .login-unit .privilege-area { position: relative; width: 100%; height: auto; padding: 50px 50px; border: 1px solid #e2e7ed; border-radius: 6px; box-shadow: 0px 2px 10px #e2e7ed; } [data-login='true'] .login-unit .privilege-area hr { height: 1px; border: none; background-color: #d5dbe2; } [data-login='true'] .login-unit .privilege-area h3 { text-align: center; font-size: 1.8rem; font-weight: 600; } [data-login='true'] .login-unit .privilege-area h3:first-of-type { margin-bottom: 40px; } [data-login='true'] .login-unit .privilege-area h3:first-of-type + .privilege-contents { padding-top: 16px; } [data-login='true'] .login-unit .privilege-area .privilege-contents { position: relative; } /* [data-login="true"] .login-unit .privilege-area .privilege-contents:not(:last-of-type){border-bottom:1px solid #D5DBE2;} */ [data-login='true'] .login-unit .privilege-area .privilege-contents .other-air-tickets { position: absolute; top: -25px; right: 0; text-align: right; } [data-login='true'] .login-unit .privilege-area .link-txt { font-size: 1.6rem; font-weight: 600; } [data-login='true'] .login-unit .privilege-area .alC:not(:last-child) { margin-bottom: 32px; } [data-login='true'] .login-unit .privilege-area .title-wrap { position: relative; } [data-login='true'] .login-unit .privilege-area .title-wrap .link-txt { position: absolute; top: 0; right: 0; } [data-login='true'] .login-unit .privilege-list { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 48px; font-size: 1.4rem; } [data-login='true'] .login-unit .privilege-item { width: calc(946px / 4); margin-top: 30px; padding: 0 6px; font-weight: 600; } [data-login='true'] .login-unit .privilege-item span:not(.alt-icon) { display: block; text-align: center; } [data-login='true'] .login-unit .privilege-link-wrap { margin-top: 40px; text-align: center; } [data-login='true'] .login-unit .privilege-link-wrap + .privilege-link-wrap { margin-top: 16px; } [data-login='true'] .login-unit .privilege-link { display: inline-block; padding: 0 15px; } [data-login='true'] .login-unit .btn-area { margin-top: 60px; } [data-login='true'] .login-wrap .note-txt-btm { position: absolute; bottom: 13px; right: 13px; font-size: 1.3rem; } .login-wrap .reload-unit { padding: 220px 0 88px; } .login-wrap .reload-txt { display: inline-block; } @media screen and (max-width: 739px) { .main-view-area.jmb-unit + .contents-inner::before { content: ''; position: absolute; top: -50vh; left: 0; right: 0; width: 100%; height: 50vh; background: #f2f1ef; z-index: -1; } [data-login='true'] .login-unit { padding: 0 20px 40px; } [data-login='true'] .login-wrap { background-image: url(../../../world/commonY20/jmb/img/bg_member_top_sp.jpg); } [data-login='true'] .login-wrap.bg-higher { background-image: url(../../../world/commonY20/jmb/img/bg_member_top_higher_sp.jpg); } [data-login='true'] .login-wrap .login-user { padding-top: 20%; } [data-login='true'] .login-unit .login-top-text .name { display: block; line-height: 1.35; } [data-login='true'] .login-unit .privilege-area .privilege-contents .other-air-tickets { width: 75%; margin: 0 auto; position: static; text-align: center; padding-left: 14px; } [data-login='true'] .login-unit .privilege-area .privilege-link-wrap:last-of-type { margin-bottom: 0; } [data-login='true'] .login-unit .privilege-area h3:first-of-type { margin-bottom: 0; } [data-login='true'] .login-unit .privilege-area h3:first-of-type + .privilege-contents { padding-top: 0; } [data-login='true'] .login-unit .fx-btw { flex-wrap: wrap; } [data-login='true'] .login-unit .fx-btw .details-box { width: 50%; padding: 0 10px; text-align: center; font-size: 1.6rem; } [data-login='true'] .login-unit .fx-btw .details-box:first-child { padding-left: 0; width: 100%; text-align: center; } [data-login='true'] .login-unit .fx-btw .details-box:nth-child(2) { padding-right: 0; } [data-login='true'] .login-unit .fx-btw .details-box span { font-size: 1.6rem; } [data-login='true'] .login-unit .fx-btw .details-box .position-btn { position: absolute; left: 50%; transform: translateX(-50%); padding-top: 20px; white-space: nowrap; } [data-login='true'] .login-unit .fx-btw .details-box .fs-xl { font-size: 3rem !important; min-height: 1.3em; } [data-login='true'] .login-unit .fx-btw .details-box .mgtXS { margin-top: 16px !important; } [data-login='true'] .login-unit .fx-btw .details-box + .status-box-wrap:before { content: ''; display: inline-block; height: 60px; } [data-login='true'] .login-unit .number-unit { margin-top: 15px; } [data-login='true'] .login-unit .number-unit > div { display: block; font-size: 1.4rem; } [data-login='true'] .login-unit .number-unit > div .link-txt { margin-top: 4px; } [data-login='true'] .login-unit .error-unit { width: 100%; } [data-login='true'] .login-unit .error-link { display: inline-block; padding: 0 0 10px 0; } [data-login='true'] .login-unit .error-link:first-child { padding-top: 15px; } [data-login='true'] .login-unit .status-box { min-width: auto; } @media all and (max-width: 320px) { .login-unit .error-link { font-size: 1.35rem; } } [data-login='true'] .login-wrap .login-unit { background: none; } [data-login='true'] .login-unit .status-box-wrap { width: 100%; } [data-login='true'] .login-unit .status-box { width: 100%; min-height: 150px; padding: 21px 18px; } [data-login='true'] .login-unit .status-box .status-text { margin-top: 5px; font-size: 1.7rem; } [data-login='true'] .login-unit .status-box .status-pic-cardface { width: 85px; } [data-login='true'] .login-unit .details-wrap { width: 100%; margin-top: 56px; } [data-login='true'] .login-unit .appeal-area { padding: 32px 16px; margin-top: 55px; text-align: center; } [data-login='true'] .login-unit .privilege-area { padding: 35px 20px 30px; background-color: #f4f5f6; border-radius: 0; } [data-login='true'] .login-unit .privilege-area-title { border-radius: 6px 6px 0 0; } [data-login='true'] .login-unit .privilege-area .alC:not(:last-child) { margin-bottom: 15px; } [data-login='true'] .login-unit .appeal-area .appeal-pic img { width: 155px; } [data-login='true'] .login-unit .appeal-area .appeal-text { width: 100%; text-align: center; } [data-login='true'] .login-unit .appeal-area .appeal-text { margin-left: 0; } [data-login='true'] .login-unit .appeal-area .appeal-text span { margin-top: 10px; } [data-login='true'] .login-unit .appeal-area .appeal-text strong { margin-top: 30px; } [data-login='true'] .login-unit .appeal-area .appeal-btn { margin-top: 32px; } [data-login='true'] .login-unit .nav-lines { background-color: #fff; border-radius: 6px; box-shadow: 0 2px 10pt rgba(226, 231, 237, 1); margin-top: 32px; } [data-login='true'] .login-unit .nav-lines li { display: block; border: none; margin-left: 0; } [data-login='true'] .login-unit .nav-lines li a { text-align: center; padding: 14px 0; display: block; } [data-login='true'] .login-unit .nav-lines li:not(:first-child) a { border-top: 1px solid #d5dbe2; } [data-login='true'] .login-unit .nav-lines li a:after { display: none; } [data-login='true'] .login-unit .nav-lines li:first-child a { padding: 14px 0; } [data-login='true'] .login-unit .privilege-list { justify-content: space-between; } [data-login='true'] .login-unit .privilege-area { padding: 40px 20px 60px; background-color: #f4f5f6; } [data-login='true'] .login-unit .privilege-item { width: 48.5%; } [data-login='true'] .login-unit .privilege-item:first-child { margin-left: 0; } [data-login='true'] .login-unit .privilege-area .title-wrap .link-txt { position: relative; margin-top: 10px; display: inline-block; } [data-login='true'] .login-unit .privilege-link-wrap + .privilege-link-wrap { margin: 0; } [data-login='true'] .login-unit .privilege-link { display: block; padding: 0 0 5px 0; } [data-login='true'] .login-unit .privilege-area .privilege-contents .other-air-tickets { width: 100%; } [data-login='true'] .login-unit .btn-area { margin-top: 36px; } [data-login='true'] .login-wrap .note-txt-btm { width: 100%; font-size: 1.13rem; text-align: center; bottom: 20px; right: 0; transform: translateY(50%); } [data-login='true'] .login-wrap .reload-unit { padding: 50% 20px 80px; } [data-login='true'] .login-wrap .reload-txt { display: block; margin-top: 8px; font-size: 1.4rem; } } /* market change select */ [data-unit='modal'].mdl-market-select .modal-inr-cont { max-width: 872px; padding: 80px 20px 64px; } [data-unit='modal'].mdl-market-select .modal-inr-cont .market-head { font-family: 'Montserrat', sans-serif; color: #282828; font-size: 2.02rem; font-weight: 700; text-align: center; } [data-unit='modal'].mdl-market-select .market-c-txt { color: #3e3e3e; font-size: 1.4rem; text-align: center; width: 340px; margin: 5px auto 0 auto; } [lang='ja'] [data-unit='modal'].mdl-market-select .market-c-txt { width: 100%; } [data-unit='modal'].mdl-market-select .market-c-btn { display: flex; justify-content: center; width: 752px; margin: 32px auto 0 auto; } [data-unit='modal'].mdl-market-select .market-c-btn li { width: 100%; max-width: 200px; margin-left: 24px; } [data-unit='modal'].mdl-market-select .market-c-btn li:first-child { margin-left: 0; } [data-unit='modal'].mdl-market-select .market-c-btn a { width: 100%; min-width: auto; max-width: 200px; } @media screen and (max-width: 739px) { [data-unit='modal'].mdl-market-select .modal-inr-cont { padding-bottom: 40px; } [data-unit='modal'].mdl-market-select .market-c-txt { width: 100%; } [data-unit='modal'].mdl-market-select .market-c-btn { width: 100%; flex-direction: column; } [data-unit='modal'].mdl-market-select .market-c-btn li { flex: initial; max-width: initial; margin-top: 10px; margin-left: 0; } [data-unit='modal'].mdl-market-select .market-c-btn li:first-child { margin-top: 0px; } [data-unit='modal'].mdl-market-select .market-c-btn a { min-width: 200px; max-width: initial; } } /* Modal */ [data-unit='modal'] { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 10000; overflow: auto; -webkit-overflow-scrolling: touch; } [data-unit='modal'] .modal-inr-cont { display: block; position: relative; width: 100%; background: #fff; z-index: 10020; /*box-shadow:0 4px 15px rgba(0, 0, 0, 0.2);*/ cursor: auto; min-height: 70px; border-radius: 6px; } [data-unit='modal'] .modal-close { border: none; padding: 0; } .modal-close { position: absolute; right: 10px; top: 10px; color: #fff; cursor: pointer; width: 50px; height: 50px; } [data-unit='modal'] .modal-close:focus, [data-unit='modal'] .modal-close:hover { outline: none; } [data-unit='modal'] .modal-close span { position: absolute !important; padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; } [data-unit='modal'] .modal-close:before, [data-unit='modal'] .modal-close:after { display: block; content: ' '; position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 2px; height: 22px; margin: auto; background: #3e3e3e; transition: background 0.2s ease-in-out; } [data-unit='modal'] .modal-close:before { transform: rotate(-45deg); } [data-unit='modal'] .modal-close:after { transform: rotate(45deg); } [data-unit='modal'] .modal-close:focus:before, [data-unit='modal'] .modal-close:focus:after, [data-unit='modal'] .modal-close:hover:before, [data-unit='modal'] .modal-close:hover:after { background: #9c6d16; } @media screen and (max-width: 739px) { [data-unit='modal'] { align-items: flex-start; padding: 30px 16px 10px 16px; } [data-unit='modal'] .modal-close { top: 2px; right: 0px; } } @media screen and (max-width: 330px) { .modal-close { width: 40px; height: 40px; } [data-unit='modal'] .modal-close:before, [data-unit='modal'] .modal-close:after { height: 18px; } } .category-nav-list .category-nav-item { width: calc(1096px / 6); margin-bottom: 32px; padding: 0 10px; display: flex; text-align: center; justify-content: center; } .category-nav-list .category-nav-item.category-nav-noimg { align-items: center; justify-content: flex-end; padding-right: 28px; } .category-nav-list .category-nav-item span:not(.alt-icon) { display: block; text-align: center; } .category-nav-list .category-nav-item span:first-child { margin-bottom: 8px; } @media all and (max-width: 739px) { .category-nav-list .category-nav-item { width: auto; font-size: 1.3rem; } .category-nav-list .category-nav-item:first-child { margin-left: 10px; } .category-nav-list .category-nav-item:last-child { margin-right: 10px; } .category-nav-list .category-nav-item span:first-child { margin-bottom: 2px; } .category-nav-list .category-nav-item.category-nav-noimg { padding: 0 10px; } } .mdl-login-box { padding-left: 16px; padding-right: 16px; } .mdl-login-box .modal-inr-cont { max-width: 558px; } .mdl-login-box .modal-inr-box { padding: 60px 0 64px; border-radius: 6px; } .mdl-login-box .modal-inr-box .jsc-head { text-align: center; font-size: 1.8rem; font-weight: bold; } .mdl-login-box .modal-list { margin-top: 38px; } .mdl-login-box .login-box { width: 316px; margin: 24px auto 0; } .mdl-login-box .login-box .login-input > div { margin-top: 16px; position: relative; } .mdl-login-box .login-box .login-input > div .password-eye { position: absolute; top: 50%; right: 8px; margin-top: -12px; } .mdl-login-box .login-box input[type='text'], .mdl-login-box .login-box input[type='password'] { border: 1px solid #d5dbe2; font-size: 1.6rem; padding: 11px 16px 13px; border-radius: 6px; width: 100%; } .mdl-login-box .login-box input[placeholder] { color: #666; } .mdl-login-box .login-box .login-button { text-align: center; margin-top: 24px; } .mdl-login-box .login-box .operation-list { margin-top: 24px; text-align: center; } .mdl-login-box .login-box .operation-list li:not(:first-child) { margin-top: 8px; } .mdl-login-box .login-box a { font-size: 1.4rem; font-weight: 600; color: #cc0000; position: relative; padding-right: 18px; } .mdl-login-box .login-box a:after { content: ''; display: block; background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_text_link_rd.svg) 0 0 no-repeat; position: absolute; top: 55%; right: 0px; width: 15px; height: 15px; transform: translateY(-50%); } .mdl-login-box .bg-gray { background: #f2f1ef; } @media screen and (max-width: 739px) { .mdl-login-box .modal-inr-box .jsc-head { font-size: 1.8rem; text-align: center; margin: 0; } .mdl-login-box .login-box { width: 100%; padding: 0 24px; } .mdl-login-box .modal-list { margin-top: 24px; } .mdl-login-box .modal-list li span { display: block; border-bottom: 1px solid #c3c3c3; padding: 24px 0 24px; margin: 0 32px; } } .fs-s { font-size: 1.2rem !important; } .fs-xl { font-size: 3.8rem !important; } .mdl-account-box { padding-left: 24px; padding-right: 24px; } .mdl-account-box .link-list { background: #fff; margin-top: 16px; } .mdl-account-box .link-list li a { font-size: 1.6rem; line-height: 1.3; padding: 16px 24px 16px 0; border-bottom: solid 1px #e2e7ed; position: relative; } .mdl-account-box .link-list li a { display: block; position: relative; color: #111; word-wrap: break-word; } .mdl-account-box .link-list li a:after { content: ''; display: inline-block; background: url(../../../content/dam/jal/wwwjalcojp/world/common/images/icons/icon_text_link_s.svg) 100% no-repeat; position: absolute; top: 50%; right: 0px; width: 16px; height: 16px; transform: translateY(-50%); } .mdl-account-box .link-list li .link-other .alt-icon { position: absolute; top: 50%; right: 0; left: auto; transform: translateY(-50%); } .mdl-account-box .modal-inr-cont { max-width: 1140px; } .mdl-account-box .modal-inr-box { padding: 64px 97px; border-radius: 6px; } .mdl-account-box .modal-inr-box .account-head { text-align: center; font-size: 2.4rem; font-weight: bold; } .mdl-account-box .modal-inr-box .item-head { color: #976f11; font-size: 2rem; margin-top: 32px; padding-left: 45px; height: 32px; line-height: 32px; } html[lang='ja'] .mdl-account-box .modal-inr-box .item-head { display: flex; align-items: center; } .mdl-account-box .modal-inr-box .item-head.jmb-account { background: url(../../../world/commonY20/jmb/img/icon_jmb_account.svg) no-repeat 0 50%; } .mdl-account-box .modal-inr-box .item-head.other-account { background: url(../../../world/commonY20/jmb/img/icon_other_account.svg) no-repeat 0 50%; } .mdl-account-box .modal-inr-box .account-list-unit { display: flex; justify-content: center; } .mdl-account-box .modal-inr-box .account-list-unit .member-info { width: 100%; } .mdl-account-box .modal-inr-box .account-list-box-r { margin-left: 48px; } .mdl-account-box .modal-inr-box .link-list { flex: 1; min-width: 268px; margin-right: 48px; } .mdl-account-box .modal-inr-box .link-list:last-child { margin-right: 0; } @media screen and (max-width: 739px) { .mdl-account-box .modal-inr-box { padding: 24px 36px; border-radius: 6px; } .mdl-account-box .modal-inr-box .account-head { font-size: 1.8rem; margin: 0; } .mdl-account-box .modal-inr-box .account-list-unit { flex-direction: column; } .mdl-account-box .modal-inr-box .item-head { font-size: 1.8rem; margin-top: 24px; padding-left: 30px; height: 24px; line-height: 24px; background-size: 22px auto !important; } .mdl-account-box .modal-inr-box .flex-wrap-row { flex-direction: column; } .mdl-account-box .modal-inr-box .link-list { min-width: auto; } .mdl-account-box .modal-inr-box .account-list-box-l, .mdl-account-box .modal-inr-box .account-list-box-l ul, .mdl-account-box .modal-inr-box .account-list-box-r, .mdl-account-box .modal-inr-box .account-list-box-r ul { width: 100%; } .mdl-account-box .modal-inr-box .account-list-box-r { margin-left: 0; } } .mdl-mile-regist { padding-left: 16px; padding-right: 16px; } .mdl-mile-regist .modal-inr-cont { width: 752px; } .mdl-mile-regist .modal-inr-box { padding: 60px 0 64px; border-radius: 6px; } .mdl-mile-regist .modal-inr-box .jsc-head { text-align: center; font-size: 2.4rem; font-weight: bold; } .mdl-mile-regist .modal-inr-cont .modal-inr-box .modal-txt { width: 90%; margin: 24px auto 0 auto; } .mdl-mile-regist .modal-inr-cont .modal-inr-box .category-nav-list { width: 435px; margin: 20px auto 0 auto; } .mdl-mile-regist .modal-inr-cont .modal-inr-box .category-nav-list .category-nav-item { width: 180px; margin-bottom: 3px; } .mdl-mile-regist .modal-inr-cont .modal-inr-box .category-nav-list .category-nav-item span:first-child { margin-bottom: 0; } .mdl-mile-regist .modal-inr-box .category-nav-item .alt-icon { margin-right: -16px; } @media all and (max-width: 739px) { .mdl-mile-regist .modal-inr-box .jsc-head { font-size: 2.2rem; text-align: center; margin: 0; } .mdl-mile-regist .modal-inr-cont .modal-inr-box .modal-txt { font-size: 1.5rem; } .mdl-mile-regist .modal-inr-cont .modal-inr-box .category-nav-list { width: 90%; margin: 10px auto 0 auto; } .mdl-mile-regist .modal-inr-cont .modal-inr-box .category-nav-list .category-nav-item:first-child { margin-left: 0; } .mdl-mile-regist .modal-inr-cont .modal-inr-box .category-nav-list .category-nav-item:last-child { margin-right: 0; } .mdl-mile-regist .modal-inr-cont .modal-inr-box .category-nav-list .category-nav-item { width: 50%; margin-bottom: 0; padding: 0; } .mdl-mile-regist .modal-inr-cont .modal-inr-box .category-nav-list .category-nav-item img { width: 100%; } .mdl-mile-regist .modal-inr-cont .modal-inr-box .category-nav-item .link-text { font-size: 1.4rem; } } .mdl-service-box { padding-left: 24px; padding-right: 24px; } .mdl-service-box .modal-inr-cont { width: 780px; } .mdl-service-box .modal-inr-box { padding: 64px 0; border-radius: 6px; } .mdl-service-box .modal-inr-box .account-head { text-align: center; font-size: 2.4rem; font-weight: bold; } .mdl-service-box .modal-inr-box .link-list { display: flex; flex-wrap: wrap; width: 588px; margin: 24px auto 0; background: #fff; } .mdl-service-box .modal-inr-box .link-list li { margin-left: 24px; } .mdl-service-box .modal-inr-box .link-list li:nth-child(n + 4) { margin-top: 16px; } .mdl-service-box .modal-inr-box .link-list li:nth-child(3n + 1) { margin-left: 0; } @media print { [data-sticky='true'] { position: static !important; } [data-gheader='min'] .header-wrap .header-unit { height: 72px; transition: none; } [data-gheader='min'] .navigation { display: block !important; animation: none; } .main-view-area .mv-details, .contents-body > * > * { padding-left: 16px; padding-right: 16px; } } /* jsc messege */ @media screen and (min-width: 740px) { [lang='ja'] [data-login='true'] .header-wrap .header-unit .gnavi-notification {right: 70px;} [lang='zh-CN'] [data-login='true'] .header-wrap .header-unit .gnavi-notification, [lang='zh-TW'] [data-login='true'] .header-wrap .header-unit .gnavi-notification, [lang='zh-HK'] [data-login='true'] .header-wrap .header-unit .gnavi-notification { right: 36px; } [lang='ko'] [data-login='true'] .header-wrap .header-unit .gnavi-notification { right: 59px; } [lang='th'] [data-login='true'] .header-wrap .header-unit .gnavi-notification { right: 60px; } [lang='vi'] [data-login='true'] .header-wrap .header-unit .gnavi-notification { right: 91px; } [lang='ru'] [data-login='true'] .header-wrap .header-unit .gnavi-notification { right: 58px; } [lang='es'] [data-login='true'] .header-wrap .header-unit .gnavi-notification { right: 104px; } [lang='fr'] [data-login='true'] .header-wrap .header-unit .gnavi-notification { right: 102px; } [lang='it'] [data-login='true'] .header-wrap .header-unit .gnavi-notification { right: 36px; } [lang='de'] [data-login='true'] .header-wrap .header-unit .gnavi-notification { right: 77px; } /* lang="en" */ [lang="en"] .reservation-module-unit .select-area .item-box .text-eyebrow-s {white-space: nowrap;} /* lang="ko" */ [lang='ko'] .reservation-module-unit .flying-area .item-box .item-col:first-child, [lang='ko'] .reservation-module-unit .flying-area .item-box .item-col:last-child { max-width: calc(50% - 32px); } /* lang="vi" */ [lang='vi'] .calendar-table-unit { height: 351px; } [lang='vi'] .calendar-head-unit .input-flexible-wrap { display: flex; flex-direction: column; } [lang='vi'] .calendar-head-unit .input-flexible-wrap span + span { margin-top: 8px; } [lang='vi'] [data-bookmaker='FLIGHT'] + .reservation-hide-position .flying-input-box, [lang='vi'] [data-bookmaker='HOTEL'] + .reservation-hide-position .flying-input-box { left: 110px; } [lang="vi"] [data-bookmaker='HOTEL-SIMPLE'] .reservation-module-unit .in-box.select-area .rsv-text-g { font-size: 1.68rem; } /* lang="in" */ [lang='in-ID'] .header-wrap .navigation ul li { font-size: 1.2rem; margin-left: 25px; } [lang='in-ID'] .header-wrap .navigation ul li:first-child { margin-left: 0; } [lang='in-ID'] .calendar-head-unit .input-flexible-wrap { display: flex; flex-direction: column; } [lang='in-ID'] .calendar-head-unit .input-flexible-wrap span + span { margin-top: 8px; } [lang='in-ID'] [data-bookmaker='FLIGHT'] + .reservation-hide-position .flying-input-box, [lang='in-ID'] [data-bookmaker='HOTEL'] + .reservation-hide-position .flying-input-box { left: 224px; } /* lang="ru" */ [lang='ru'] .header-wrap .navigation ul li { font-size: 1.2rem; margin-left: 25px; } [lang='ru'] .header-wrap .navigation ul li:first-child { margin-left: 0; } [lang='ru'] .baggage-area .lead-text.title { font-size: 1.8rem; } /* lang="th" */ [lang="th"] [data-bookmaker="HOTEL"] + .reservation-hide-position .calendar-head-unit{width:auto;} [lang="th"] .reservation-module-unit .flying-area .item-box .item-col:first-child, [lang="th"] .reservation-module-unit .flying-area .item-box .item-col:last-child{max-width:calc(50% - 32px);} /* lang="fr" */ [lang='fr'] .reservation-module-unit .select-area .rsv-text { font-size: 2.3rem; } [lang='fr'] .header-wrap .navigation ul li { margin-left: 25px; font-size: 1.2rem; } [lang='fr'] .header-wrap .navigation ul li:first-child { margin-left: 0; } /* lang="es" */ [lang='es'] .header-wrap .navigation ul li { margin-left: 25px; font-size: 1.2rem; } [lang='es'] .header-wrap .navigation ul li:first-child { margin-left: 0; } } [data-bookmaker="HOTEL-SIMPLE"] [lang="en"] .reservation-hide-position [data-infant-age="JS_infantAge"] dl { width: 150px; } [lang="ja"] .reservation-hide-position [data-infant-age="JS_infantAge"] dl { width: 180px; } [lang='ko'] .reservation-hide-position [data-infant-age='JS_infantAge'] dl { width: 210px; } [lang='vi'] .reservation-hide-position [data-infant-age='JS_infantAge'] dl { width: 190px; } [lang='in-ID'] .reservation-hide-position [data-infant-age='JS_infantAge'] dl { width: 170px; } [lang='th'] .reservation-hide-position [data-infant-age='JS_infantAge'] dl { width: 240px; } /* explorejapan promotion info area */ .japan-promotion-info-area .lineup-unit { margin-top: 100px; } .japan-promotion-info-area .lineup-area .lineup-tab-button { width: 150px; height: 130px; padding: 0 10px; } .japan-promotion-info-area .lineup-area .lineup-tab-body { width: 646px; } .japan-promotion-info-area .text-eyebrow-s { text-transform: none; } .japan-promotion-info-area .text-body-s.text-icon { display: flex; } .japan-promotion-info-area .text-body-s.text-icon .iconTA { margin-left: auto; } .japan-promotion-info-area .thumbnail-box.small-type li { align-items: center; margin-top: 0; border-bottom: 1px solid #bfbfbf; } .japan-promotion-info-area .thumbnail-box.small-type li:first-child { border-top: 1px solid #bfbfbf; } .japan-promotion-info-area .thumbnail-box .col { padding: 16px 16px 16px 0; position: relative; width: 100%; display: block; } .japan-promotion-info-area .thumbnail-box .link-other .alt-icon { position: absolute; top: 50%; right: 0; left: inherit; transform: translateY(-50%); } @media screen and (max-width: 739px) { .japan-promotion-info-area .lineup-unit { margin-top: 24px; } .japan-promotion-info-area .lineup-area .lineup-tab-button { width: 100vw; height: 96px; } .japan-promotion-info-area .lineup-area .lineup-tab-body { width: 100%; } .japan-promotion-info-area .lineup-area .lineup-tab-button span { margin-left: 0; } .japan-promotion-info-area .text-body-s.text-icon { position: relative; display: block; } .japan-promotion-info-area .text-body-s.text-icon .iconTA { position: relative; top: -1px; right: 0; width: 75px; height: 20px; display: inline-block; font-size: 0; line-height: 1; vertical-align: middle; margin: 0 0 0 15px; } .japan-promotion-info-area .lineup-area .lineup-tab-body .card-face { width: 126px; padding: 10px; background-color: #fff; } .japan-promotion-info-area .thumbnail-box .col { padding: 16px 32px 16px 0; } } @media screen and (max-width: 320px) { .japan-promotion-info-area .text-body-s.text-icon .iconTA { margin-left: 10px; } } /* Main visual login */ .mv-login-unit{ padding-top: 50px; position: absolute; top: 0; width: 100%; z-index: 60; } .myl-variation-container .mv-login-unit{ padding-top: 20px; } .mv-login-unit .mv-login-unit-namebox{ text-shadow: 0px 0px 3px #000000; color: #fff; width: 1096px; margin: 0 auto; } .mv-login-unit .mv-login-unit-name { font-size: 3.48rem; font-weight: 400; } .mv-login-unit .mv-login-unit-msg { font-size: 2.48rem; font-weight: 400; } /* mv more*/ .mv-details .mv-details-sub01 { } .mv-details .mv-details-sub02 { margin-top: 5px !important; } .mv-details .mv-details-annotation01 { margin-bottom: 10px; } .mv-details .mv-details-annotation02 { margin-top: 10px; } .mv-login-unit-msg-en { font-size: 2.48rem; font-weight: 400; } @media screen and (max-width: 739px) { .mv-login-unit { display: none; } } .flying-input-box-inner .de-airport-service-link { padding:16px 8px 0 8px; line-height:1; } .flying-input-box-inner .de-airport-service-link .link-txt { color:#00759D; text-decoration:underline; font-size:1.4rem; } .flying-input-box-inner .de-airport-service-link .link-txt:hover { color:#9C6D16; } .header-wrap .header-unit {background: #000;} .reservation-module-close .close-btn .reservation-module-expanded {padding: 0;top: 24px;right: -1014px;z-index: 1;} .reservation-module-close .close-btn .reservation-module-expanded::before {content:none;} @media screen and (min-width: 740px) { .module-open {height: 100%;overflow: scroll;} .reservation-module-wrap {min-width: 1096px;} .close-btn img:nth-child(2){display: none;} [aria-controls="dispCalendar"] img:nth-child(2){display: inline;} [aria-controls="dispCalendar"] img:nth-child(3){display: none;} } @media screen and (max-width:739px){ .reservation-module-close .close-btn .reservation-module-expanded {display: block;width: 32px;height: 32px;padding: 0;top: 8px;right: 16px;left: auto;} } /* ow */ .switch-unit input[type="radio"] {width: 0;height: 0;opacity: 0;} .radio-l:checked:focus ~ .switch-button .label-l, .radio-r:checked:focus ~ .switch-button .label-r {outline: 2px solid #000;} /* promotion code area */ .calender-btm-unit{ display: flex; justify-content: space-between; } .promotion-code-area{ width: 370px; } .promotion-code-area .text-eyebrow-s{ text-transform: none !important; } .promotion-code-area dd{ margin-bottom: 10px; padding: 5px 0; border-bottom: 1px solid #A46A00; } .promotion-code-area dd > input{width: 330px; padding: 5px 10px;} .promotion-code-area dd > button{float: right;} @media all and (max-width:739px){ .calender-btm-unit{ display: block; } .promotion-code-area{ width: auto;margin-top: 30px; } .promotion-code-area dd > input{ width: calc(100% - 40px); font-size:1.45rem; } } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } @charset 'UTF-8'; /* Icons */ @font-face { font-family: 'slick'; font-weight: normal; font-style: normal; src: url('clientlib-site-base/css/fonts/slick.eot'); src: url('clientlib-site-base/css/fonts/slick.eot?#iefix') format('embedded-opentype'), url('clientlib-site-base/css/fonts/slick.woff') format('woff'), url('clientlib-site-base/css/fonts/slick.ttf') format('truetype'), url('clientlib-site-base/css/fonts/slick.svg#slick') format('svg'); } /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 20px; line-height: 1; opacity: .75; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } [dir='rtl'] .slick-prev { right: -25px; left: auto; } .slick-prev:before { content: '←'; } [dir='rtl'] .slick-prev:before { content: '→'; } .slick-next { right: -25px; } [dir='rtl'] .slick-next { right: auto; left: -25px; } .slick-next:before { content: '→'; } [dir='rtl'] .slick-next:before { content: '←'; } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { font-family: 'slick'; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { opacity: .75; color: black; } .fill-white { fill: #ffffff; } .fill-grey2 { fill: #ebebeb; } .fill-dark-grey4 { fill: #3e3e3e; } .fill-gold5 { fill: #9c6d16; } .fill-golden-2 { fill: #82621f; } .fill-golden-3 { fill: #856514; } .fill-light-black { fill: rgba(0, 0, 0, 0.2); } .fill-red { fill: #ff0000; } .fill-blue2 { fill: #001e40; } .fill-none { fill: none; } .fill-evenodd { fill-rule: evenodd; } .stroke-none { stroke: none; } .stroke-white { stroke: #ffffff; } .stroke-dark { stroke: rgba(0, 0, 0, 0); } .relative { position: relative; } .initial { position: initial; } .absolute { position: absolute; } .flex { display: flex; } .align-center { align-items: center; } .hide { display: none; } .opacity-zero { opacity: 0; } /* CTA varritions */ .link-text-secondary .link-text { font-family: 'Lato', sans-serif; font-weight: 400; } /* Overrides icon color for secondary cta*/ .link-other .icon { fill: #856514; } .link-other .icon.fill-white { fill: #ffffff; } /* Overrides icon color for secondary cta only for footer*/ .footer-wrap .link-other .icon { fill: #ffffff; } /* Change Icon color in case of Primary Button*/ .button-primary .icon { fill: white; } /* GLobal Styles */ .image-tag { height: 100%; object-fit: cover; width: 100%; } [class^='title-block'] + div { margin-top: 16px; } /*Hero component styles*/ .hero-image-container { height: 598px; } .content-hero-image-container { height: 379px; } .hero-desc { width: 60%; } @media screen and (max-width: 739px) { .hero-image-container { height: 480px; } .hero .main-view-area .contents-inner-hero .mv-details { padding: 0; } .hero-desc { width: 100%; } } @media screen and (min-width: 740px) { .main-slide-box [class^='slide-'] .mv-slide-inr.myl-variation .mv-details > .slide-head { width: 360px; margin-bottom: 180px; } .main-slide-box [class^='slide-'] .mv-slide-inr.myl-variation { top: 20%; } [lang='ja'] .main-slide-box [class^='slide-'] .mv-slide-inr.myl-variation { top: 20%; } [lang='ja'] .main-slide-box [class^='slide-'] .myl-variation .mv-details > .slide-head { width: 425px; font-size: 3.33rem; } } /* End of Hero component styles*/ /* Banner component styles*/ .banner-image-container { height: 404px; } @media screen and (max-width: 739px) { .banner-image-container { height: 480px; } } .jalprogram-col .link-other { color: #fff; } .jalprogram-col .link-other .icon { fill: #fff; } /* End of Banner component styles*/ /* Double Content Card */ .doubleContentCard .jalprogram-area { display: flex; position: relative; width: 1096px; margin: 0 auto; z-index: 1; /*height: 758px;*/ } @media screen and (max-width: 739px) { .doubleContentCard .jalprogram-area { display: block; width: 100%; height: auto; } } .doubleContentCard .jalprogram-col .link-other { color: #856514; } @media screen and (max-width: 739px) { .doubleContentCard.jalprogram-area .jalprogram-col:first-child { padding: 0px 15.36px; } } .contentImgCtaText-image-container { z-index: -1; left: 0; margin-top: -80px; } @media screen and (min-width: 740px) { .contentImgCtaText-image-container { width: 50vw; min-width: 548px; height: 100%; } } /* This break point is specific to parent container width*/ @media screen and (min-width: 1096px) { .contentImgCtaText-image-container { left: calc(-1 * (100vw - 1096px) / 2); } } @media screen and (max-width: 739px) { .contentImgCtaText-image-container { width: 100vw; margin-top: -47px; height: 560px; } } .doubleContentCard .thumbnail-box .picture.col { min-width: auto; } .doubleContentCard .thumbnail-box .link-other { color: #333; } .doubleContentCard .thumbnail-box .alt-icon { position: absolute; top: 55%; right: 0px; left: auto; } .doubleContentCard .jalprogram-area .icon { fill: #856514; } .doubleContentCard .jalprogram-area .bg-dark .icon { fill: #ffffff; } /* End of Double Content Card */ /* Start of Tab with CTA component styles*/ .tab-quicklink [role='tablist'] [role='tab'] .inactive-icon, .tab-quicklink [role='tablist'] [role='tab'][aria-selected='true'] .active-icon { display: block; } .tab-quicklink [role='tablist'] [role='tab'] .active-icon, .tab-quicklink [role='tablist'] [role='tab'][aria-selected='true'] .inactive-icon { display: none; } .tab-quicklink [role='tablist'] [role='tab'] img { top: 0px; left: 50%; transform: translateX(-50%); text-transform: uppercase; width: 88px; height: 88px; } @media screen and (max-width: 739px) { .tab-quicklink [role='tablist'] [role='tab'] .active-icon, .tab-quicklink [role='tablist'] [role='tab'] .inactive-icon { width: 68px; height: 68px; } } /* End of Tab with CTA component styles*/ /* Start of Product Listing with Tab styles*/ .tab-panels .thumbnail-box-vertical .icon.fill-white { fill: #000000; } /* End of Product Listing with Tab styles*/ /* Overrides style for bottom links in flight booking component */ .bottom-link .link-other .icon { fill: #40806a; } .bottom-link .link-text { font-weight: 400; font-family: 'Lato', sans-serif; } @media screen and (max-width: 739px) { .flightBooking.aem-GridColumn, [data-sticky='true'] > .aem-Grid { height: 100%; } } /* Start of Airport Information styles*/ .info-icon-tick { vertical-align: text-top; margin-bottom: -5px; margin-right: -2px; } .card-type-img { min-height: 400px; } #WA_airport-select-03 .lineup-area .lineup-tab-body { width: 872px; } @media screen and (max-width: 739px) { #WA_airport-select-03 .lineup-area .lineup-tab-body { width: 100%; } .lineup-check-list .text-wrap { align-items: flex-start; } } /* End of Airport Information styles*/ /* Class for screen reader text only*/ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; white-space: nowrap; /* added line */ border: 0; } /* Styles for Baggage Info */ .link-in-text.link-other .icon { fill: #40806a; } .disclaimer-block { margin-left: 20px; } .reverse-column { display: flex !important; align-items: center; flex-direction: row-reverse; justify-content: flex-end; } .reverse-column.baggage-select .select-box:first-child { margin-left: 8px; } .reverse-column.baggage-select .select-box:last-child { margin-left: 0px; } @media screen and (max-width: 739px) { .reverse-column { align-items: stretch; flex-direction: column-reverse; } } /* Styles for Flight Hotel Scenario for th region with en and th language */ .flight-hotel-scenario .reservation-module-unit .in-box.select-area.hotel-item, .flight-hotel-scenario .reservation-module-unit .select-area.hotel-item { display: none; } .flight-hotel-scenario + .reservation-hide-position .flying-input-box { left: 104px; } /*.flight-hotel-scenario .reservation-module-unit .rsv-switch-area .rsv-switch-inner { width: 104px; } .flight-hotel-scenario .reservation-module-unit .rsv-switch-area .switch-button > span { width: 96px; }*/ .flight-hotel-scenario .reservation-module-unit .rsv-switch-area .switch-button:last-child > span { text-transform: capitalize; }