/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * 1. Remove the bottom border in Chrome 57- and Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ font-size: 16px; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], /* 1 */ [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, /* 1 */ menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /* origin */ *{ box-sizing: border-box; -webkit-backface-visibility: hidden; backface-visibility: hidden; } html{ margin: 0; } body{ color: #111; margin: 0; padding: 0; font-family : 'メイリオ', Meiryo, YuGothic, /* Mac用 */ 'Yu Gothic', /* Windows用 */ sans-serif; font-size: 14px; line-height: 1.75; font-weight: 500; } a{ color: #3C70AF; text-decoration: none; } a:hover{ text-decoration: underline; } a img{ /*transition: opacity 300ms 0s ease;*/ } a:hover img{ opacity: 0.7; } .pcb{ display: block !important; } .spb, .spb800{ display: none !important; } .pci{ display: inline !important; } .spi{ display: none !important; } .center{ text-align: center; } .cf:after{ content: ""; display: block; clear: both; } .clear { clear: both; } .none { display: none; } .inline{ display: inline !important; margin: 0 16px 0 0 !important; } .inlineM0{ display: inline !important; margin: 0 0 0 0 !important; } .mt10{ margin-top: 10px !important; } .mt20{ margin-top: 20px !important; } .mt40{ margin-top: 40px !important; } .mt60{ margin-top: 60px !important; } .mb0{ margin-bottom: 0 !important; } .pl20{ padding-left: 20px !important; } .ml16{ margin-left: 16px; } .mr16{ margin-right: 16px; } .mr24{ margin-right: 24px; } .tCenter{ text-align: center; } .tBlue24{ font-size: 24px; color: #00D; } .red{ color: #FF0000; } .bold{ font-weight: bold; } #toTop{ width: 60px; height: 60px; background: url(../images/pagetop.png) no-repeat 0 0; background-size: cover; position: fixed; bottom: 60px; right: 10px; z-index: 1000; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #detailpage #toTop{ bottom: 120px; } #wrap{ width: 100%; margin: 0; padding: 0; } header{ width: 100%; } #menuSwt{ width: 30px; height: 30px; background: url(../images/menuOpen.png) no-repeat center center; /*position: fixed;*/ position: absolute; top: 10px; right: 10px; z-index: 10000; } #menuSwt.active{ background: url(../images/menuClose.png) no-repeat center center; } #menuSwt:hover{ cursor: pointer; } #headLogo{ text-align: center; margin: 30px 0 0 0; } .home #headLogo{ margin: 60px 0 0 0; } #headLogo a:hover{ text-decoration: none; } #headLogo img{ width: 120px; height: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .home #headLogo img{ width: 200px; height: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #mainNavi{ width: 500px; background-color: #76A3D1; margin: 0; position: fixed; top: 50px; right: -680px; z-index: 1000; transition: right 300ms 0s ease; -webkit-box-shadow: -9px 6px 11px 0px rgba(0,0,0,0.18); -moz-box-shadow: -9px 6px 11px 0px rgba(0,0,0,0.18); box-shadow: -9px 6px 11px 0px rgba(0,0,0,0.18); } #mainNavi.open{ right: 0; } #mainNavi ul{ list-style: none; width: 100%; margin: 0 auto 0; padding: 0; letter-spacing: -0.5em; text-align: center; } #mainNavi ul li{ letter-spacing: normal; display: block; width: 100%; height: 40px; margin: 0; text-align: left; border-bottom: 1px solid #FFF; padding: 0; position: relative; } #mainNavi ul li:first-child{ border-top: 1px solid #FFF; } #mainNavi ul li:hover{ background-color: #4675B0; } #mainNavi ul li a{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 10px 0 0 8px; color: #FFF; } #mainNavi ul li:after{ font-family: 'FontAwesome'; content: "\f061"; color: #FFF; position: absolute; right: 20px; top: 4px; } #mainContent{ width: 100%; margin: 0; } main{ width: 96%; max-width: 1080px; margin: 0 auto; padding: 10px 0 80px; } footer{ width: 100%; margin: 0; padding: 0 0; background-color: #E6E6E6; } #footWhite{ background-color: #FFF; width: 100%; margin: 0 auto; padding: 0 0 20px; } #footerAirs{ width: 96%; max-width: 1080px; margin: 0 auto; } #footerWrap{ width: 96%; max-width: 1080px; margin: 0 auto; color: #4D4D4D; } #footerAirs p{ display: inline-block; margin: 0 12px 0 0; } #footerAirs ul.footerAirsList{ display: inline-block; list-style: none; background-color: #FFF; padding: 0; margin: 0; } #footerAirs ul.footerAirsList li{ display: inline-block; margin: 6px; } #footerAirs ul.footerAirsList li img{ vertical-align: middle; } .footerContacts{ width: 96%; max-width: 1080px; list-style: none; text-align: center; margin: 20px 0; padding: 0; } .footerContacts li{ display: inline-block; margin: 0 12px; font-weight: bold; } .footerContacts li a{ color: #4D4D4D; } .footContact{ background-color: #4D4D4D; color: #FFF !important; padding: 4px 16px; border-radius: 4px; } .footerMenus{ width: 96%; max-width: 1080px; margin: 0 auto; padding-top: 20px; letter-spacing: -0.5em; } .footerMenu4{ width: 25%; display: inline-block; letter-spacing: normal; vertical-align: top; } .footerMenu4 ul{ list-style: none; margin: 0; padding: 0; } .footerMenu4 ul li a{ color: #4D4D4D; } .footerMenu4 #footerLogo{ margin: 0; text-align: center; } .footerMenu4 #footerLogo img{ width: 80%; height: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #footerCopyrights{ clear: both; margin: 40px 0 0; padding: 8px 0; font-size: 12px; text-align: center; background-color: #4D4D4D; color: #FFF; } #detailpage #footerCopyrights{ padding: 8px 0 160px; } /* home */ .searchWay{ text-align: center; list-style: none; padding: 0; margin: 30px 0 20px; } .searchWay li{ display: inline-block; width: 165px; height: 40px; background-color: #E6E6E6; font-size: 20px; font-weight: bolder; color: #FFF; margin: 0 4px; padding-top: 4px; } .searchWay li img{ vertical-align: middle; margin-right: 4px; } .searchWay li.selected{ background-color: #4675B0; } .searchWay li:hover{ cursor: pointer; } .condwrap{ width: 520px; margin: 0 auto 10px; } .condSelectGroup{ width: 430px; float: left; } .reverseway{ width: 90px; float: left; padding: 30px 0 0 10px; } #reverseWaySwt:hover{ cursor: pointer; } .condSelect{ width: 100%; border: 1px solid #808080; margin: 0 0 10px 0; padding: 0; } .condSelect label{ width: 90px; height: 42px; display: inline-block; background-color: #E6E6E6; text-align: center; padding: 8px 0 0; vertical-align: top; } .condSelect select{ display: inline-block; border: none; width: 330px; height: 42px; margin: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(../images/selectDown.png) no-repeat 96% center; font-size: 16px; } .condSelect #TourGoingDateFrom{ display: inline-block; border: none; width: 330px; height: 42px; margin: 0; background: url(../images/selectCalendar.png) no-repeat 96% center; font-size: 16px; } #searchSubmit{ display: block; width: 340px; height: 50px; margin: 0 auto; padding: 11px 0 0 0; text-align: center; background-color: #FFAA00; color: #FFF; font-size: 16px; font-weight: bold; border: none; } #searchSubmit img{ vertical-align: middle; margin: 0 6px 0 0; } .homeMenuIcons{ list-style: none; max-width: 1000px; margin: 60px auto 0; padding: 0; letter-spacing: -0.5em; } .homeMenuIcons li{ width: 25%; display: inline-block; letter-spacing: normal; text-align: center; padding-bottom: 60px; } /* breadcrumb */ #breadcrumb{ width: 100%; margin: 0 auto 20px; } #breadcrumb ul{ list-style: none; letter-spacing: -0.5em; font-size: 80%; font-weight: bold; margin: 0 !important; padding: 0 !important; } #breadcrumb ul li{ display: inline-block; letter-spacing: normal; } #breadcrumb ul li:after{ content: ">"; padding: 0 16px; } #breadcrumb ul li:last-child:after{ content: ""; padding: 0; } /* pageTitle */ .pageTitle{ width: 100%; padding: 1.2rem 0 1rem; font-size: 2rem; color: #FFF; font-weight: 900; text-align: center; background-color: #003f8c; } .pageSubTitle{ width: 100%; background-color: #3C70AF; padding: 6px; text-align: center; color: #FFF; font-size: 1.4rem; font-weight: 900; text-shadow:1px 1px 2px #000000; margin: 2rem 0 2rem; } .pageSubTitle span{ display: inline-block; font-size: 1.2rem; padding: 0 20px; text-shadow: none; } .pageSubTitle.first{ margin: 0 0 2rem; } /* content */ .noticeHead{ margin: 0; color: #ff0000; font-weight: 900; font-size: 1.0rem; text-align: center; } .contentTitle{ width: 100%; background-color: #888; color: #FFF; font-size: 20px; font-weight: bold; padding: 4px 12px; } .partTitle{ width: 100%; font-size: 16px; font-weight: bold; color: #76A3D1; } /* list */ .listWrap{ width: 100%; } .list{ border-bottom: 1px solid #888; } .listL{ width: 200px; float: left; } .listR{ padding-left: 220px; position: relative; } .listPersonNum1{ background-color: #271D7B; color: #FFF; display: inline-block; padding: 4px 12px; border-radius: 4px; } .listPrice{ font-size: 20px; font-weight: bold; color: #D00; } .listName{ font-size: 16px; } .BtnListToDetali{ position: absolute; background-color: #FFAA00; color: #FFF; font-size: 16px; font-weight: bold; padding: 6px 18px; border-radius: 4px; right: 0; bottom: 12px; } .BtnListToDetali:before{ font-family: 'FontAwesome'; content: "\f061"; padding-right: 6px; } /* detail */ #footPrice{ width: 100%; height: auto; padding: 8px 16px; position: fixed; left: 0; bottom: 0; z-index: 10; background-color: #FF8000; color: #FFF; font-size: 80%; text-align: center; } .fpuilb{ display: inline-block; margin: 0 0 0 1em; font-weight: bold; } .fplilb{ display: inline-block; margin: 0 1em 0 0; font-weight: bold; } .subtex{ font-size: 60%; color: #804100; margin: 0 4px 0 0; } .subtexBl{ font-size: 60%; color: #804100; margin: 0 0 -0.75em 0; display: block; } dl.detailData{ margin: 0; } dl.detailData dt{ background-color: #CCC; padding: 8px 12px; } dl.detailData dd{ padding: 8px 12px 12px 24px; margin: 0; } dl.detailData dd img{ vertical-align: middle; margin: 0 8px; } .pmnum{ width: 40px; height: 30px; padding: 4px; border: 1px solid #CCCCCC; text-align: center; border-radius: 0; -webkit-appearance: none; vertical-align: middle; } .plus, .minus{ padding: 5px; width: 30px; border: none; color: #4675B0; font-weight: bold; border-radius: 0; vertical-align: middle; } .plus{ background-color: #E6E6E6; border: 1px solid #CCCCCC; border-left: none; } .minus{ background-color: #E6E6E6; border: 1px solid #CCCCCC; border-right: none; } .detailPersonNum1{ background-color: #271D7B; color: #FFF; display: inline-block; padding: 4px 12px; border-radius: 4px; margin: 0 0 1em; } #deptSelects, #arrSelects{ position: relative; width: 100%; height: 700px; } #deptSelects:before, #arrSelects:before{ content: ""; display: block; } #tabs-going, #tabs-return{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #deptFlights, #arrFlights{ position: absolute; width: 49.5%; height: calc(100% - 50px); top: 50px; right: -100%; display: none; transition: all 300ms 0s ease; overflow-y: auto; } #deptFlights::-webkit-scrollbar, #arrFlights::-webkit-scrollbar{ background: #EEE; width: 6px; } #deptFlights::-webkit-scrollbar-thumb, #arrFlights::-webkit-scrollbar-thumb{ background: #AAA; } .ui-tabs .ui-tabs-panel { padding: 1em 0; width: 49.5%; } .cal_body_t { /* float: left; */ /* background-color: #ffffff; */ border-left: 1px solid #999999; border-top: 1px solid #999999; /* margin-bottom: 3px; */ /* margin-right: 2px; */ /* width: 672px; */ } .calSun { /* background-color: #ffdddd; */ color: #ff3300; } .calSat { /* background-color: #ddddff; */ color: #0033ff; } .calDay { color: #333333; } .cal_week, .cal_col { padding: 1px 1px; border-right: 1px solid #999999; border-bottom: 1px solid #999999; /* width: 93px; */ width: 14.2857%; } .cal_col { float: left; /* text-align: center; */ /* cursor: pointer; */ padding: 4px; height: 90px; } .cal_week { float: left; text-align: center; } .cal_price { color: #333333; text-align: center; font-size: 12px; } .panelBackCal{ padding: 8px 12px; background-color: #666; color: #FFF; text-align: center; border-radius: 4px; } .panelBackCal:after{ font-family: FontAwesome; content: "\f0a9"; margin-left: 4px; } .panelBackCal:hover{ cursor: pointer; background-color: #888; } .panel-header{ padding: 8px 12px; text-align: center; } .selectDateWrap{ width: 100%; height: 36px; text-align: center; position: relative; } .selectDatePrev{ background-color: #3C70AF; color: #FFF; padding: 4px 12px; border-radius: 4px; display: inline-block; position: absolute; top: 0; left: 0; } .selectDatePrev:before{ font-family: FontAwesome; content: "\f060"; margin-right: 4px; } .selectDateNext{ background-color: #3C70AF; color: #FFF; padding: 4px 12px; border-radius: 4px; display: inline-block; position: absolute; top: 0; right: 0; } .selectDateNext:after{ font-family: FontAwesome; content: "\f061"; margin-left: 4px; } .selectDatePrev:hover, .selectDateNext:hover{ background-color: #4a8cdd; cursor: pointer; } #go_flights, #ret_flights{ margin: 20px; line-height: 2; } #go_flights input, #ret_flights input{ display: block; clear: both; float: left; margin: 2px 12px 0 0; } #go_flights label, #ret_flights label{ display: block; /*margin-bottom: 1.5em; */ /* 三段表記 */ margin-bottom: 1.0em; /* 二段表記 */ font-size: 80%; line-height: 1.5; } .flightListTime{ display: inline-block; text-align: left; float: left; padding-left: 1.5em; font-size: 130%; font-weight: bold; } .flightListPrice{ display: inline-block; text-align: right; float: right; font-weight: bold; line-height: 2.2; } /* 三段表記 */ /* .flightListCode{ clear: both; display: block; margin-left: 2em; font-weight: normal; line-height: 1; } */ /* 二段表記 */ .flightListCode{ clear: both; margin-left: 2em; font-weight: normal; line-height: 1; } #personNum, #hotelSelect, #optionSelect, div#totalPrice{ padding: 12px 12px; } .ui-widget-content a{ color: #3C70AF; } .hotelName, .optionName{ background-color: #CCC; padding: 8px 12px; margin: 0px 0 10px 0; } .hotelOption, .optionOption{ margin-bottom: 12px; padding-left: 20px; } .hotelOption select, .optionOption select{ margin: 0 8px 0 0; } .hotelComment, .optionComment{ margin-top: 1px; margin-bottom: 1px; } div#totalPrice{ background: #FFE4E1 !important; } .subTotal{ margin: 20px; } .subTotal dt{ } .subTotal dd{ margin: 0 0 12px 0; text-align: right; border-bottom: 1px solid #777; } .total{ text-align: right; font-size: 150%; font-weight: bold; color: #F00; padding: 0 20px; } #detailToOrder{ margin: 20px 0; text-align: center; } #detailToOrder a{ display: inline-block; background-color: #D56B02; color: #FFF; font-size: 16px; font-weight: bold; padding: 6px 18px; border-radius: 4px; opacity: 1 !important; cursor: pointer !important; } #detailToOrder a:before{ font-family: 'FontAwesome'; content: "\f061"; padding-right: 6px; } #detailToOrder a.backBtn{ display: inline-block; background-color: #FFF; border: 2px solid #888; color: #888; font-size: 16px; font-weight: bold; padding: 4px 18px; border-radius: 4px; margin-right: 10px; } #detailToOrder a.backBtn:before{ font-family: 'FontAwesome'; content: "\f060"; padding-right: 6px; } /* 180110 miyazaki 暫定的に表示制御ボタンを表示 --S */ #hotelSwt, #optionSwt{ width: 100%; background-color: #3C70AF; color: #FFF; font-size: 16px; padding: 6px; text-align: center; margin-bottom: 10px; position: relative; } #hotelSwt:hover, #optionSwt:hover{ cursor: pointer; } #hotelSwt:after, #optionSwt:after{ content: ""; background: url(../images/contentOpenSP.png); background-size: contain; position: absolute; width: 60px; height: 24px; top: 20%; right: 10%; margin: auto; } #hotelSwt.opened:after, #optionSwt.opened:after{ content: ""; background: url(../images/contentCloseSP.png); background-size: contain; position: absolute; width: 60px; height: 24px; top: 20%; right: 10%; margin: auto; } #spHotel, #spOption{ display: none; } /* 180110 miyazaki 暫定的に表示制御ボタンを表示 --E */ /* request */ .requestPurpose{ padding: 0 20px; } #confirm_info{ padding: 0 20px; } .formName{ background-color: #CCC; padding: 8px 12px; margin: 20px 0 10px 0; } .hotelOption{ margin-bottom: 12px; padding-left: 20px; } .hotelOption select{ margin: 0 8px 0 0; } .formField{ padding: 0 20px; } .formField input{ margin: 0 0 10px 4px; padding: 4px; } .formField input::-webkit-input-placeholder { color: #ccc; font-weight: normal; } .formField input:-ms-input-placeholder { color: #ccc; font-weight: normal; } .formField input::-moz-placeholder { color: #ccc; font-weight: normal; } #RequestLastname1{ margin: 0 24px 10px 4px; width: 8em; } #RequestFirstname1{ margin: 0 4px 10px 4px; width: 8em; } #RequestAge1{ width: 5em; margin: 0 4px 10px 4px; } .RequestSexBorderL{ display: inline-block; border-top: 1px solid #AAA; border-left: 1px solid #AAA; border-bottom: 1px solid #AAA; width: 6em; height: 30px; text-align: center; margin: 0 0 10px 0; padding: 4px; vertical-align: top; } .RequestSexBorderR{ display: inline-block; border: 1px solid #AAA; width: 6em; height: 30px; margin: 0 0 10px -0.4em; padding: 4px; text-align: center; } #RequestSex10{ } #RequestSex11{ } .formField input.birthday{ width: 7em; margin: 0 24px 10px 4px; } .inputTelNum .inline{ margin: 0 !important; } .inputTelNum input[type="text"]{ width: 14em; margin: 0 4px 10px; } .inputTelNum input[type="radio"]{ margin: 0 4px 10px; } p.noteBlue{ font-size: 80%; color: #00C; margin: 0; } #RequestContactZip, #RequestInvZip{ width: 10em; } #RequestContactPref, #RequestInvPref{ width: 10em; } #RequestContactAddr1, #RequestContactAddr2, #RequestInvAddr1, #RequestInvAddr2, #RequestInvComName{ width: 30em; } #RequestInvTel1, #RequestInvTel2, #RequestInvTel3{ width: 6em; margin: 0 4px 10px; } .inline div{ height: auto; } .methodImg{ height: 100px; width: auto; padding: 0 0 20px 0; } #RequestContactComment{ width: 100%; height: 8em; border-radius: 4px; } .inlblock{ display: inline-block; } .sendName{ text-align: center; font-size: 110%; font-weight: bold; } /* joken */ .rightshoulderSmall{ text-align: right; font-size: 0.6rem; padding-right: 3%; } .conditionDetail{ padding: 0 3%; } .condLead{ font-weight: bold; } .condsect{ font-size: 1.2rem; border-bottom: 1px solid #999; margin: 4rem 0 0; } .condList li{ margin-bottom: 1rem; } ul.condList{ list-style: none; } table.c_info { border-collapse:collapse; border:1px solid #ccc; font-size:12px; margin:50px auto; } table.c_info th.c_info_th,td.c_info_td{ padding:10px; border-collapse:collapse; border:1px solid #ccc; } table.beppyo { border-collapse:collapse; border:1px solid #ccc; font-size:12px; width:100%; margin-bottom: 1rem; } table.beppyo th.beppyo_th,td.beppyo_td{ padding:10px; border-collapse:collapse; border:1px solid #ccc; vertical-align:top; } table.beppyo th.beppyo_th{ text-align:center; } table.beppyo{ width:100%; } .scroll{ } .scroll::-webkit-scrollbar{ height: 5px; } .scroll::-webkit-scrollbar-track{ background: #F1F1F1; } .scroll::-webkit-scrollbar-thumb { background: #BCBCBC; } .renraku_box{ border: 1px solid #ccc; padding: 10px; } /* cancel */ .cancelContent{ margin-bottom: 3rem; } .cancelAir1{ background-color: #00bebe; font-size: 1.2rem; font-weight: 900; text-align: center; padding: 8px 16px; margin: 0; } .cancelAir2{ background-color: #ff6400; font-size: 1.2rem; font-weight: 900; text-align: center; padding: 8px 16px; margin: 0; } .cancelAir3{ background-color: #64be00; font-size: 1.2rem; font-weight: 900; text-align: center; padding: 8px 16px; margin: 0; } .cancelAir4{ background-color: #e2001a; font-size: 1.2rem; font-weight: 900; text-align: center; padding: 8px 16px; margin: 0; color: #FFF; } .cancelAir5{ background-color: #00F; font-size: 1.2rem; font-weight: 900; text-align: center; padding: 8px 16px; margin: 0; color: #FFF; } .cancelAir6{ background-color: #FF0; font-size: 1.2rem; font-weight: 900; text-align: center; padding: 8px 16px; margin: 0; color: #000; } .cancelAir7{ background-color: rgb(102, 102, 102); font-size: 1.2rem; font-weight: 900; text-align: center; padding: 8px 16px; margin: 0; color: #FFF; } .cancelAir8{ background-color: rgb(204, 255, 0); font-size: 1.2rem; font-weight: 900; text-align: center; padding: 8px 16px; margin: 0; color: #000; } .cancelAir9{ background-color: #CCFFFF; font-size: 1.2rem; font-weight: 900; text-align: center; padding: 8px 16px; margin: 0; color: #000; } .cancelAir10{ background-color: #7ec900; font-size: 1.2rem; font-weight: 900; text-align: center; padding: 8px 16px; margin: 0; color: #FFF; } .cancelTable{ width: 100%; margin: 0 0 2rem; } .cancelTable dt{ clear: both; margin: 10px 0 0 0; width: 60%; float: left; background-color: #DBDBDB; border: 2px solid #DBDBDB; padding: 8px 5%; } .cancelTable dd{ width: 38%; float: right; margin: 10px 0 0 0; padding: 8px 16px; border: 2px solid #DBDBDB; } .cancelTableTable{ width: 100%; margin-bottom: 1rem; } .cancelTableTable td{ padding: 8px 16px; } .cancelListLink{ display: block; padding: 8px 30px; margin: 0 20% 1rem; background-color: #4d4d4d; color: #FFF; font-size: 1.3rem; font-weight: 900; text-align: center; } /* company */ .companyTable{ width: 100%; } /* saiyo */ .blueText{ color: #003f8c; font-weight: 900; text-align: center; } .saiyoTable{ width: 100%; } /* toiawase */ .toiFormList{ width: 100%; } .toiFormList dt{ clear: both; width: 20%; margin: 10px 0 0 0; float: left; background-color: #CCC; border: 2px solid #CCC; padding: 4px 8px; } .toiFormList dt .toiDtSmall{ display: inline-block; font-size: 0.8rem; } .toiFormList dt.dtnull{ background-color: transparent; border-color: transparent; } .toiFormList dd{ width: 78%; margin: 10px 0 0 0; float: right; } .toiFormList dd input[type="text"] { width: 100%; height: 100%; border: 2px solid #CCC; padding: 4px 8px; } .toiFormList dd p{ margin: 0; } .toiFormList dd input.inputText8{ width: 8rem; } .toiFormList dd input.inputText4{ width: 4rem; } .toiFormList dd input.inputText30p{ width: 30%; } .toiFormList dd input.inputText70p{ width: 70%; } .toiTextArea1{ width: 100%; height: 6rem; border: 2px solid #CCC; padding: 4px 8px; } .toiBorderBox{ border: 2px solid #CCC; padding: 4px 8px; text-align: center; margin: 10px 0; } .toiButtons{ margin: 20px 0; text-align: center; } .toiResetBtn{ width: 49.5%; border: 2px solid #CCC; padding: 12px; background-color: #FFF; font-size: 1.2rem; color: #000; float: left; } .toiResetBtn:hover{ cursor: pointer; } .toiSubmitBtn{ width: 49.5%; border: 2px solid #555; background-color: #555; padding: 12px; font-size: 1.2rem; color: #FFF; float: right; } .toiSubmitBtn:hover{ cursor: pointer; } .toiNoticeBox{ border: 2px solid #F00; margin: 20px 0; color: #F00; font-weight: 900; text-align: center; padding: 8px 16px; } /* flow */ .flowContent{ width: 100%; } .flowStep1{ margin: 0; width: 100%; padding: 2px 0 0 0; text-align: center; background-color: #00bebe; color: #FFF; font-size: 1.6rem; font-weight: 900; } .flowStep2{ margin: 0; width: 100%; padding: 2px 0 0 0; text-align: center; background-color: #21be7f; color: #FFF; font-size: 1.6rem; font-weight: 900; margin-top: 4rem; } .flowStep3{ margin: 0; width: 100%; padding: 2px 0 0 0; text-align: center; background-color: #43be3f; color: #FFF; font-size: 1.6rem; font-weight: 900; margin-top: 4rem; } .flowStep4{ margin: 0; width: 100%; padding: 2px 0 0 0; text-align: center; background-color: #64be00; color: #FFF; font-size: 1.6rem; font-weight: 900; margin-top: 4rem; } .flowContent p{ padding: 0 60px; } .link-tour a{ display: inline-block; background-color: #D56B02; color: #FFF; font-size: 16px; font-weight: bold; padding: 6px 18px; border-radius: 20px; margin: 5px; } @media screen and (max-width: 800px) { .spb800{ display: block!important; } .ui-tabs .ui-tabs-panel { width: 100%; } #deptFlights, #arrFlights{ position: absolute; width: 100%; height: 100%; top: 0; right: -100%; display: none; transition: all 300ms 0s ease; overflow-y: auto; } .scroll{ overflow: auto; white-space: nowrap; margin-bottom: 1rem; } } @media screen and (max-width: 640px) { .pcb{ display: none !important; } .spb, .spb800{ display: block!important; } .pci{ display: none !important; } .spi{ display: inline !important; } .inline{ display: block !important; margin: 0 0 12px 0 !important; } .tBlue24 { font-size: 20px !important; } #menuSwt { right: 10px; } #mainNavi{ width: 90%; } #mainNavi ul{ margin-top: 0; clear: both; list-style: none; width: 100%; padding: 0; letter-spacing: normal; } .home #headLogo { margin: 40px 0 0 0; } .home #headLogo img{ width: 120px; } /* footer */ footer { padding: 0 0; } #footerWrap { width: 100%; } .footerContacts{ width: 100%; list-style: none; text-align: center; margin: 0 0; padding: 0; letter-spacing: -0.5em; } .footerContacts li{ display: inline-block; letter-spacing: normal; width: 100%; margin: 0 0; font-size: 16px; } .footerContacts li a{ color: #4D4D4D; } .footerMenus{ width: 100%; margin: 0 auto; border-top: none; padding-top: 20px; letter-spacing: -0.5em; } .footerMenu4{ width: 100%; display: inline-block; letter-spacing: normal; vertical-align: top; } .footContact { padding: 8px 24px; } .footerMenu4:nth-child(2){ margin-top: 40px; } .footerMenu4:nth-child(2) ul{ border-top: 1px solid #4D4D4D; } .footerMenu4 ul{ list-style: none; margin: 0; padding: 0; } .footerMenu4 ul li{ text-align: center; margin: 0 0 0; font-size: 16px; padding: 12px 16px; } .footerMenu4:nth-child(n+2) ul li{ border-bottom: 1px solid #4D4D4D; text-align: left; } .footerMenu4 ul li a{ color: #4D4D4D; } #footerLogo{ text-align: center; } .footerMenu4 #footerLogo img { width: 60%; margin: 40px auto 20px; } #footerCopyrights { margin: 0 0; } /* home */ .searchWay { text-align: center; list-style: none; padding: 0; margin: 10px 0 20px; } .searchWay li { display: inline-block; width: 125px; height: 40px; background-color: #E6E6E6; font-size: 20px; font-weight: bolder; color: #FFF; margin: 0 4px; padding-top: 4px; } .condwrap{ width: 100%; margin: 0 auto; } .condSelectGroup{ width: calc(100% - 60px); float: left; } .reverseway{ width: 60px; float: left; padding: 30px 0 0 10px; } .condSelect{ width: 100%; border: 1px solid #808080; margin: 0 0 10px 0; padding: 0; } .condSelect label{ width: 60px; height: 42px; display: inline-block; background-color: #E6E6E6; text-align: center; padding: 8px 0 0; vertical-align: top; } .condSelect select{ display: inline-block; border: none; width: calc(100% - 66px); height: 42px; margin: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(../images/selectDown.png) no-repeat 96% center; } .condSelect #TourGoingDateFrom{ display: inline-block; border: none; width: calc(100% - 66px); height: 42px; margin: 0; background: url(../images/selectCalendar.png) no-repeat 96% center; } #searchSubmit{ display: block; width: 100%; height: 50px; margin: 0 auto; padding: 11px 0 0 0; text-align: center; background-color: #FFAA00; color: #FFF; font-size: 15px; font-weight: bold; border: none; } #searchSubmit img{ vertical-align: middle; margin: 0 6px 0 0; } .homeMenuIcons{ max-width: 100%; margin: 30px auto 0; } .homeMenuIcons li{ width: 50%; padding-bottom: 30px; } /* list */ #searchCondSwt{ width: 100%; background-color: #3C70AF; color: #FFF; font-size: 16px; padding: 6px; text-align: center; margin-bottom: 10px; position: relative; } #searchCondSwt:hover{ cursor: pointer; } #searchCondSwt:after{ content: ""; background: url(../images/contentOpenSP.png); background-size: contain; position: absolute; width: 60px; height: 24px; top: 20%; right: 10%; margin: auto; } #searchCondSwt.opened:after{ content: ""; background: url(../images/contentCloseSP.png); background-size: contain; position: absolute; width: 60px; height: 24px; top: 20%; right: 10%; margin: auto; } .listSearchCond{ display: none; } .list { padding: 16px 0; } .listL { width: 100%; float: none; } .listL p{ display: inline-block; margin: 0; } .listL p img{ vertical-align: middle; } .listPersonNum1{ vertical-align: middle; margin-left: 6px; } .listR { padding-left: 0; position: relative; } .listR p{ margin: 0; } .BtnListToDetali { position: static; margin: 6px 0 0 0; float: right; } /* detail */ #footPrice{ text-align: left; } .cal_price { font-size: 2vw; } #detailSwt, #hotelSwt, #optionSwt{ width: 100%; background-color: #3C70AF; color: #FFF; font-size: 16px; padding: 6px; text-align: center; margin-bottom: 10px; position: relative; } #detailSwt:hover, #hotelSwt:hover, #optionSwt:hover{ cursor: pointer; } #detailSwt:after, #hotelSwt:after, #optionSwt:after{ content: ""; background: url(../images/contentOpenSP.png); background-size: contain; position: absolute; width: 60px; height: 24px; top: 20%; right: 1%; margin: auto; } #detailSwt.opened:after, #hotelSwt.opened:after, #optionSwt.opened:after{ content: ""; background: url(../images/contentCloseSP.png); background-size: contain; position: absolute; width: 60px; height: 24px; top: 20%; right: 1%; margin: auto; } dl.detailData, #spHotel, #spOption{ display: none; } /* request */ #RequestAge1 { margin: 0 4px 10px; } .wd6em{ display: inline-block; width: 6em; } #RequestLastname1, #RequestFirstname1 { margin: 0 4px 10px 4px; width: calc(100% - 120px); } .formField input.birthday { width: 6em; margin: 0 0 10px 4px; } .inputTelNum input[type="text"] { } .inputTelNum .inline { display: inline !important; } .RequestSexBorderL{ margin-left: -1px; } .RequestSexBorderL, .RequestSexBorderR{ width: 5em; } #RequestContactAddr1, #RequestContactAddr2, #RequestInvAddr1, #RequestInvAddr2, #RequestInvComName { width: 100%; } #RequestInvTel1, #RequestInvTel2, #RequestInvTel3 { width: 4em; margin: 0 4px 10px; } .methodImg { width: 100%; height: auto; } #detailToOrder a, #detailToOrder a.backBtn{ display: block; margin: 30px 0; } /* cancel */ .cancelTable dt{ clear: both; margin: 10px 0 0 0; width: 100%; float: none; background-color: #DBDBDB; border: 2px solid #DBDBDB; padding: 8px 5%; } .cancelTable dd{ width: 100%; float: none; margin: 4px 0 0 0; padding: 8px 16px; border: 2px solid #DBDBDB; } /* company */ .companyTable td{ display: block; width: 100%; text-align: center; } /* saiyo */ .saiyoTable td{ display: block; width: 100%; text-align: center; } /* toiawase */ .toiFormList dt{ clear: both; width: 100%; margin: 10px 0 0 0; float: none; background-color: #CCC; border: 2px solid #CCC; padding: 4px 8px; } .toiFormList dd{ width: 100%; margin: 4px 0 0 0; float: none; } .toiFormList dd input.inputText8{ width: 6rem; } .toiFormList dd input.inputText4{ width: 3rem; } .toiResetBtn{ width: 100%; border: 2px solid #CCC; padding: 12px; background-color: #FFF; font-size: 1.2rem; color: #000; float: none; } .toiSubmitBtn{ margin: 20px 0 0 0; width: 100%; border: 2px solid #555; background-color: #555; padding: 12px; font-size: 1.2rem; color: #FFF; float: none; } /* flow */ .flowContent p{ padding: 0 0; } }