/* == malihu jquery custom scrollbar plugin == Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller */ /* CONTENTS: 1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar. 4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes. */ /* ------------------------------------------------------------------------------------------------------------------------ 1. BASIC STYLE ------------------------------------------------------------------------------------------------------------------------ */ .mCustomScrollbar{ -ms-touch-action: none; touch-action: none; /* MSPointer events - direct all pointer events to js */ } .mCustomScrollbar.mCS_no_scrollbar{ -ms-touch-action: auto; touch-action: auto; } .mCustomScrollBox{ /* contains plugin's markup */ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr; } .mCSB_container{ /* contains the original content */ overflow: hidden; width: auto; height: auto; } /* ------------------------------------------------------------------------------------------------------------------------ 2. VERTICAL SCROLLBAR y-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_inside > .mCSB_container{ margin-right: 30px; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */ .mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */ .mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ position: absolute; width: 16px; height: auto; left: auto; top: 0; right: 0; bottom: 0; } .mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */ .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */ right: auto; left: 0; } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */ .mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */ 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{ /* the draggable element */ cursor: pointer; width: 31px; height: 30px; /* minimum dragger height */ z-index: 1; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */ position: relative; width: 12px; 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; /* auto-expanded scrollbar */ } .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; /* auto-expanded scrollbar */ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown{ display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 3. HORIZONTAL SCROLLBAR x-axis ------------------------------------------------------------------------------------------------------------------------ */ .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; } /* non-visible scrollbar */ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ width: auto; height: 16px; top: auto; right: 0; bottom: 0; left: 0; } .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */ .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; /* minimum dragger width */ 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; /* auto-expanded scrollbar */ 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; /* auto-expanded scrollbar */ 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; } /* ------------------------------------------------------------------------------------------------------------------------ 4. VERTICAL AND HORIZONTAL SCROLLBARS yx-axis ------------------------------------------------------------------------------------------------------------------------ */ .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; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; } /* non-visible horizontal scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; } /* non-visible vertical scrollbar/RTL direction/left-side scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; } /* non-visible scrollbar/RTL direction/left-side scrollbar */ .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{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; /* non-visible scrollbar */ margin-left: 0; } /* non-visible horizontal scrollbar */ .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 5. TRANSITIONS ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ -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_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */ .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{ -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; } /* ------------------------------------------------------------------------------------------------------------------------ 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS ------------------------------------------------------------------------------------------------------------------------ */ /* ---------------------------------------- 6.1 THEMES ---------------------------------------- */ /* default theme ("light") */ .mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; } .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } .mCS/*B_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,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,0.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,0.85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; } .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ background-image: url(common/css/mCSB_buttons.png); /* css sprites */ background-repeat: no-repeat; opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 0; /* sprites locations light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px */ } .mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -20px; /* sprites locations light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px */ } .mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -40px; /* sprites locations light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px */ } .mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -56px; /* sprites locations light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px */ } .mCSB_scrollTools .mCSB_buttonUp:hover, .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } /* theme: "dark" */ /*.mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }*/ .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #B4D337; background-color: #B4D337; } /*.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.85); }*/ /*.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(0,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; } /* ---------------------------------------- */ /* theme: "light-2", "dark-2" */ /* .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ 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,0.85); } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.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; } */ /* theme: "dark-2" */ /* .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,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,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,0.85); } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,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; } */ /* ---------------------------------------- */ /* theme: "light-thick", "dark-thick" */ /* .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ width: 4px; background-color: #fff; background-color: rgba(255,255,255,0.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; background-color: #fff; background-color: rgba(255,255,255,0.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 4px; margin: 6px 0; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-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,0.85); } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.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; } */ /* theme: "dark-thick" */ /* .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,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,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,0.85); } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,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; } */ /* ---------------------------------------- */ /* theme: "light-thin", "dark-thin" */ /* .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.1); } .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width: 100%; height: 2px; margin: 7px auto; } */ /* theme "dark-thin" */ /* .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,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; } */ /* ---------------------------------------- */ /* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */ /* .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); } .mCS-rounded.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; } .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 14px; margin: 0 1px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 14px; margin: 1px 0; } .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, .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{ width: 16px; /* auto-expanded scrollbar */ height: 16px; margin: -1px 0; } .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, .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{ width: 4px; /* auto-expanded scrollbar */ } .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, .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{ height: 16px; /* auto-expanded scrollbar */ width: 16px; margin: 0 -1px; } .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, .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{ height: 4px; /* auto-expanded scrollbar */ 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; } */ /* theme "rounded-dark", "rounded-dots-dark" */ /* .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,0.75); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,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,0.85); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,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; } */ /* theme "rounded-dots", "rounded-dots-dark" */ /* .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ background-color: transparent; background-position: center; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg=="); background-repeat: repeat-y; opacity: 0.3; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.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; } */ /* theme "rounded-dots-dark" */ /* .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; } */ /* ---------------------------------------- */ /* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */ /* .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-y; background-image: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ background-repeat: repeat-x; background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); }*/ /* theme "3d", "3d-dark" */ /* .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; } .mCS-3d.mCSB_scrollTools, .mCS-3d-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 8px; background-color: #000; background-color: rgba(0,0,0,0.2); box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 8px; margin: 4px 0; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.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; } */ /* theme "3d-dark" */ /* .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); box-shadow: inset 1px 0 1px rgba(0,0,0,0.1); } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ box-shadow: inset 0 1px 1px rgba(0,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; } */ /* ---------------------------------------- */ /* theme: "3d-thick", "3d-thick-dark" */ /* .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; } .mCS-3d-thick.mCSB_scrollTools_vertical, .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools_horizontal, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ bottom: 1px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4); width: 12px; margin: 2px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ height: 12px; width: auto; } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #000; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,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; } */ /* theme: "3d-thick-dark" */ /* .mCS-3d-thick-dark.mCSB_scrollTools{ box-shadow: inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,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,0.4), inset -1px 0 0 rgba(0,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,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ background-color: #fff; background-color: rgba(0,0,0,0.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); } .mCS-3d-thick-dark.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; } */ /* ---------------------------------------- */ /* theme: "minimal", "minimal-dark" */ /*.mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ right: 0; margin: 12px 0; } .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: 0; margin: 0 12px; }*/ /* RTL direction/left-side scrollbar */ /*.mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{ left: 0; right: auto; } .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; } .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; } .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal-dark.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,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; }*/ /* theme: "minimal-dark" */ /*.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; }*/ /* ---------------------------------------- */ /* theme "light-3", "dark-3" */ .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ width: 6px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; } .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 6px; margin: 5px 0; } .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, .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{ width: 12px; } .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, .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{ 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; } /* theme "dark-3" */ .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,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; } /* ---------------------------------------- */ /* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */ .mCS-inset.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ width: 12px; background-color: #000; background-color: rgba(0,0,0,0.2); } .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.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.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.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.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; height: 12px; margin: 2px 0; } .mCS-inset.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; } /* theme "inset-dark", "inset-2-dark", "inset-3-dark" */ .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-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-2-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-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; } /* theme "inset-2", "inset-2-dark" */ .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; border-width: 1px; border-style: solid; border-color: #fff; border-color: rgba(255,255,255,0.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,0.2); } /* theme "inset-3", "inset-3-dark" */ .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); } /* ---------------------------------------- */ @charset "UTF-8"; /* CSS Document */ /* Theme Name: hadatoha Description:テーマの説明 Theme URI: テーマの URL Author: 作った人の名前 Author URI: 作った人の URL Version: バージョン License: ライセンス License URI: ライセンスの URL */ /* settings */ #h_logo { padding-top: 15px; } .breadcrumbs li{ max-width: 440px; display: inline-block; vertical-align: middle; } .blog.default .text_sub p { line-height: 170%; } .blog.default .ti_h4 { margin-bottom: 10px; font-size: 28px; } .single .content_right .post_cat li{ width: auto; margin-bottom: 0; margin-top: 10px; margin-right: 10px; } .single .content_right .post_cat li a{ font-size: 12px; line-height: 1; padding: 5px !important; display: block; color: #4671a0; border: 1px solid #4671a0; text-decoration: none; } .single .content_right .post_cat li a:hover{ background: #4671a0; color: #fff; } .post_date { font-size: 12px; } .category { text-align: right; margin-top: 20px; } .cat{ padding-left: 10px; } .cat img{ vertical-align: middle; } .content_right{ width: 840px; float: right; margin-left: 50px; } .blognav{ float: left; width: 300px; } .ti_snav{ background: #F9F6EF; } /* navigation */ .navigation { overflow: hidden; margin: 50px 0 30px; } .alignleft { float: left; padding: 5px 20px 20px 0; } .alignright { float: right; padding: 5px 0 20px 20px; } .aligncenter { display: block; margin: 0 auto; } /* sidebar_widget */ /*.blognav { overflow: hidden; margin-right: -30px; }*/ .widget { margin-bottom: 30px; /* width: 380px; float: left; margin-right: 30px;*/ } .widget li { padding: 10px 0 10px 20px; border-bottom: #dddddd 1px solid; text-align: left; background: url(img/ico_blog.png) no-repeat left 20px; } .widget li > ul.children li{ background-image: url(img/ico_blog02.png); border-bottom: none; } /* calendar */ #wp-calendar { width: 80%; margin: 10px auto 0; text-align: center; } td#prev { text-align: left; } td#next { text-align: right; } /* commentform */ #respond { margin: 20px 0; } #commentform label { display: block; } .form-allowed-tags { display: none; } .form-submit { margin: 10px 0 0 0; } .form-submit input { padding: 10px; } .widget_categories ul, .widget_archive ul{ /* max-height: 300px; overflow-y: auto;*/ } /* pager index ------------------------------------------ */ #pager { padding: 30px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #pager>* { display: block; font-size: 16px; width: 56px; height: 52px; line-height: 52px; text-align: center; background: #F9F5EF; color: #CFB087; text-decoration: none; } #pager>*:nth-child(n+2) { margin-left: 10px; } #pager>.dots { background-color: transparent; width: 30px; color: #CFB087; } #pager>.prev, #pager>.next { width: 120px; } #pager>a { position: relative; z-index: 1; -webkit-transition: color 0.2s, background .2s; transition: color 0.2s, background .2s; } #pager>a:hover, #pager>.current { background-color: #CFB087; color: #F9F5EF; } /* pager single ------------------------------------------ */ #pager.single { padding-top: 60px; } #pager.single>a { width: 240px; } /* pager not found ------------------------------------------ */ #not_found #pager.single { padding-top: 0; } .blog .breadcrumbBg, .archive.category .breadcrumbBg{ margin-bottom: 3rem; } .blog .content_right, .archive.category .content_right, .date .content_right{ width: 820px; } .blog .content_right .col-2 .item, .archive.category .content_right .col-2 .item{ padding: 2rem; background: #f9f9f9; box-sizing: border-box; margin-bottom: 4%; } .blog .content_right .col-2 .item h2, .archive.category .content_right .col-2 .item h2{ font-size: 1.8rem; } .blog .content_right .post_cat, .archive.category .content_right .post_cat{ justify-content: start; flex-wrap: wrap; } .blog .content_right .post_cat li, .archive.category .content_right .post_cat li{ width: auto; margin-bottom: 0 !important; margin-top: 5px !important; margin-right: 5px !important; } .blog .content_right .post_cat li a, .archive.category .content_right .post_cat li a{ font-size: 10px; line-height: 1; padding: 5px !important; display: block; color: #4671a0; border: 1px solid #4671a0; } .blog .content_right .post_cat li a:hover, .archive.category .content_right .post_cat li a:hover{ text-decoration: underline; } .blog .content_right .attachment-post-thumbnail, .archive.category .content_right .attachment-post-thumbnail{ display: block; margin: auto; } .blog .content_right a:hover, .archive.category .content_right a:hover{ opacity: .5; text-decoration: none; display: block; } /* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 640px以下 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (max-width: 640px) { .content_right{ width: 100% !important; float: none; margin-left: 0; } .blog.default .ti_h4 { margin-bottom: 10px; font-size: 18px; border-bottom: 1px solid #dddddd; } .blognav { margin-right: 0; overflow: visible; margin-top: 30px; float: none; width: auto; } .widget { margin-bottom: 30px; width: auto; float: none; margin-right: 0; } .widgettitle{ font-size: 90%; } #h_logo h1 { font-size: 1em; } #pager>* { height: 55px; line-height: 55px; display: none; background: #CFB087; color: #F9F5EF; } #pager>*:nth-child(n+2) { margin-left: 10px; } #pager>.current { display: block; width: 300px; } #pager>.prev, #pager>.next { display: block; width: 150px; } /* pager single ------------------------------------------ */ #pager.single>a { display: block; width: 200px; } } /* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 640以上1050px以下 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (max-width: 1050px) and (min-width: 641px) { .content_right{ width: 740px; margin-left: 0px; } .content_right .text_sub{ padding: 0px; } .blognav { margin-right: 0; overflow: visible; } .widget { margin-bottom: 30px; width: auto; float: none; margin-right: 0; } } /* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1050以上1200px以下 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (max-width: 1200px) and (min-width: 1051px) { .content_right{ width: 70%; margin-left: 0px; } .content_right .text_sub{ padding: 0px; } .blognav { margin-right: 0; overflow: visible; } .widget { margin-bottom: 30px; width: auto; float: none; margin-right: 0; } /* 画像横並び */ .text_sub p a { display: inline!important; } } /* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1200以上1400px以下 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (max-width: 1400px) and (min-width: 1201px) { .blognav { margin-right: 0; overflow: visible; } .widget { margin-bottom: 30px; width: auto; float: none; margin-right: 0; } /* 画像横並び */ .text_sub p a { display: inline!important; } } /* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 1400px以上 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (min-width: 1401px) {} /*----------------------------------------------- 微調整 --------------------------------------------------*/ @media only screen and (max-width: 320px) { /* iPhone5 */ } @media only screen and (min-width: 321px) and (max-width: 375px) { /* iPhone6 */ } @media only screen and (min-width: 376px) and (max-width: 640px) { /* iPhone6plus */ } @charset "utf-8"; html { font-size: 62.5%; font-family: 'Noto Serif JP', serif; color: #362e2b; } body{ font-family: YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP',serif; } p, a, li, dd, dt, th, td { font-size: 1.6rem; } p, li, dd, dt, th, td { line-height: 1.8; } h1, h2, h3, h4, h5, h6 { line-height: normal; } a{ color: #362e2b; } a:hover{ opacity: .6; } img { max-width: 100%; height: auto; } .times { font-family: 'Times', 'Times New Roman', 'Lusitana', serif; } .gothic { font-family: 'Noto Sans JP', sans-serif; } .sp { display: none; } img { max-width: 100%; } .block { display: block; } .pc_block { display: block; } .bold { font-weight: bold; } .pc_none { display: none !important; } .font-gv { font-family: "Great Vibes", cursive !important; } .serif { font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif !important; } .sans { font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif !important; } .center { text-align: center; } .lwrap { max-width: 1170px; margin: auto; } .fl-l { float: left; } .fl-r { float: right; } .clearfix::after { content: ""; display: block; clear: both; } .alignCenter { text-align: center; } .alignLeft { text-align: left; } .alignRight { text-align: right; } .flex { display: flex; } .flex.col-2 { flex-wrap: wrap; justify-content: space-between; } .flex.col-2 .item { width: 48%; } .flex.col-3 { flex-wrap: wrap; justify-content: space-between; } .flex.col-3 .item { width: 32%; } .flex.col-4 { flex-wrap: wrap; justify-content: space-between; } .flex.col-4 .item { width: 23.5%; } .flex.col-5 { flex-wrap: wrap; justify-content: space-between; } .flex.col-5 .item { width: 18.4%; } .flex.col-6 { flex-wrap: wrap; } .flex.col-6 .item { width: 15%; margin-right: 2%; } .flex.col-6 .item:nth-child(6n) { margin-right: 0; } /* border *******************/ .border-solid-top { border-top: 1px solid #ebebeb; } .border-solid-left { border-left: 1px solid #ebebeb; } .border-solid-right { border-right: 1px solid #ebebeb; } .border-solid-bottom { border-bottom: 1px solid #ebebeb; } .border-dashed-top { border-top: 1px dashed #ebebeb; } .border-dashed-left { border-left: 1px dashed #ebebeb; } .border-dashed-right { border-right: 1px dashed #ebebeb; } .border-dashed-bottom { border-bottom: 1px dashed #ebebeb; } .border-dotted-top { border-top: 1px dotted #ebebeb; } .border-dotted-left { border-left: 1px dotted #ebebeb; } .border-dotted-right { border-right: 1px dotted #ebebeb; } .border-dotted-bottom { border-bottom: 1px dotted #ebebeb; } /* カラー *******************/ .c-white { color: #ffffff !important; } .c-black { color: #333333 !important; } .c-blue { color: #4671a0 !important; } .c-yellow { color: #fff582 !important; } .c-red { color: #c81f21 !important; } .c-green { color: #5aaa3c !important; } .c-orange { color: #ffb03b !important; } .c-gray { color: #ebebeb !important; } .c-brown { color: #bfa563 !important; } .c-gold { color: #ddc29c !important; } /* bgカラー *******************/ .bg-white { background-color: #ffffff !important; } .bg-black { background-color: #333333 !important; } .bg-blue { background-color: #4671a0 !important; } .bg-yellow { background-color: #fff582 !important; } .bg-red { background-color: #c81f21 !important; } .bg-green { background-color: #5aaa3c !important; } .bg-orange { background-color: #ffb03b !important; } .bg-gray { background-color: #ebebeb !important; } .bg-brown { background-color: #bfa563 !important; } .bg-grade-green { background: linear-gradient(180deg, #88cba5 0%, #88cba5 50%, #78c394 50%, #78c394 100%); } .bg-grade-pink { background: linear-gradient(180deg, #fdadba 0%, #fdadba 50%, #fd8a9e 50%, #fd8a9e 100%); } .bg-grade-blue { background: linear-gradient(180deg, #5082ae 0%, #5082ae 50%, #4671a0 50%, #4671a0 100%); } .bg-grade-red { background: linear-gradient(180deg, #e94d00 0%, #e94d00 50%, #e03b00 50%, #e03b00 100%); } /* border color *******************/ .bc-white { border-color: #ffffff !important; } .bc-black { border-color: #333333 !important; } .bc-blue { border-color: #4671a0 !important; } .bc-yellow { border-color: #fff582 !important; } .bc-red { border-color: #c81f21 !important; } .bc-green { border-color: #5aaa3c !important; } .bc-orange { border-color: #ffb03b !important; } .bc-gray { border-color: #ebebeb !important; } .bc-brown { border-color: #bfa563 !important; } /* circle *******************/ .circle { display: inline-block; width: 10rem; height: 10rem; border-radius: 100%; background-color: #ebebeb; text-align: center; position: relative; } .circle > span { position: absolute; top: 50%; left: 50%; width: 100%; } /* square *******************/ .square { display: inline-block; width: 10rem; height: 10rem; background-color: #ebebeb; text-align: center; position: relative; } .square > span { position: absolute; top: 50%; left: 50%; width: 100%; } /* 角丸 *******************/ .round-15 { border-radius: 1.5rem; } .round-30 { border-radius: 3rem; } .round-60 { border-radius: 6rem; } .round-90 { border-radius: 9rem; } .round-100 { border-radius: 100%; } /* box shadow *******************/ .b-shadow { box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2); } /* text shadow *******************/ .t-shadow { text-shadow: 0.43rem 0.43rem 0.323rem rgba(0, 0, 0, 0.6); } /* margin *******************/ .mt-0 { margin-top: 0rem !important; } .mb-0 { margin-bottom: 0rem !important; } .mt-5 { margin-top: 0.5rem !important; } .mb-5 { margin-bottom: 0.5rem !important; } .mt-10 { margin-top: 1rem !important; } .mb-10 { margin-bottom: 1rem !important; } .mt-15 { margin-top: 1.5rem !important; } .mb-15 { margin-bottom: 1.5rem !important; } .mt-20 { margin-top: 2rem !important; } .mb-20 { margin-bottom: 2rem !important; } .mt-25 { margin-top: 2.5rem !important; } .mb-25 { margin-bottom: 2.5rem !important; } .mt-30 { margin-top: 3rem !important; } .mb-30 { margin-bottom: 3rem !important; } .mt-35 { margin-top: 3.5rem !important; } .mb-35 { margin-bottom: 3.5rem !important; } .mt-40 { margin-top: 4rem !important; } .mb-40 { margin-bottom: 4rem !important; } .mt-45 { margin-top: 4.5rem !important; } .mb-45 { margin-bottom: 4.5rem !important; } .mt-50 { margin-top: 5rem !important; } .mb-50 { margin-bottom: 5rem !important; } .mt-55 { margin-top: 5.5rem !important; } .mb-55 { margin-bottom: 5.5rem !important; } .mt-60 { margin-top: 6rem !important; } .mb-60 { margin-bottom: 6rem !important; } .mt-65 { margin-top: 6.5rem !important; } .mb-65 { margin-bottom: 6.5rem !important; } .mt-70 { margin-top: 7rem !important; } .mb-70 { margin-bottom: 7rem !important; } .mt-75 { margin-top: 7.5rem !important; } .mb-75 { margin-bottom: 7.5rem !important; } .mt-80 { margin-top: 8rem !important; } .mb-80 { margin-bottom: 8rem !important; } .mt-85 { margin-top: 8.5rem !important; } .mb-85 { margin-bottom: 8.5rem !important; } .mt-90 { margin-top: 9rem !important; } .mb-90 { margin-bottom: 9rem !important; } .mt-95 { margin-top: 9.5rem !important; } .mb-95 { margin-bottom: 9.5rem !important; } .mt-100 { margin-top: 10rem !important; } .mb-100 { margin-bottom: 10rem !important; } .mt-105 { margin-top: 10.5rem !important; } .mb-105 { margin-bottom: 10.5rem !important; } .mt-110 { margin-top: 11rem !important; } .mb-110 { margin-bottom: 11rem !important; } .mt-115 { margin-top: 11.5rem !important; } .mb-115 { margin-bottom: 11.5rem !important; } .mt-120 { margin-top: 12rem !important; } .mb-120 { margin-bottom: 12rem !important; } .mt-125 { margin-top: 12.5rem !important; } .mb-125 { margin-bottom: 12.5rem !important; } .mt-130 { margin-top: 13rem !important; } .mb-130 { margin-bottom: 13rem !important; } .mt-135 { margin-top: 13.5rem !important; } .mb-135 { margin-bottom: 13.5rem !important; } .mt-140 { margin-top: 14rem !important; } .mb-140 { margin-bottom: 14rem !important; } .mt-145 { margin-top: 14.5rem !important; } .mb-145 { margin-bottom: 14.5rem !important; } .mt-150 { margin-top: 15rem !important; } .mb-150 { margin-bottom: 15rem !important; } /* marker *******************/ .marker-yellow { background: linear-gradient(transparent 0%, #fff582 0%); } .btn a { text-decoration: none; text-align: center; display: flex; justify-content: center; align-items: center; /* background-color: #cccccc; */ } .btn a i { display: inline-block; line-height: 0; margin-right: .4rem; } .btn.large a { width: 30rem; margin: auto; padding: 1.1rem 0; border-radius: .5rem; } .btn.large a i { width: 1.6rem; line-height: 0; margin-right: 1rem; } .btn01 { border-radius: .6rem; } .btn01 a { display: block; padding: 1rem 0; text-align: center; text-decoration: none; } .btn01 a span { line-height: 0; vertical-align: middle; margin-right: 1rem; } .btn01 a span img{ vertical-align: baseline; } .btn02 a { display: block; background-color: #0054a6; color: #ffffff; text-align: center; font-size: 1.8rem; padding: 1rem 0; max-width: 35rem; width: 100%; } .btn02 a span { display: inline-block; background: url("images/ceramics/ico-btn-arrow.svg") no-repeat center left; background-size: 1.4rem; padding-left: 2rem; } .btn02 a:hover { text-decoration: none; } .btn03 a { text-align: center; display: block; background-color: #e5f5fd; color: #000000; padding: 1.5rem 0; line-height: 1; } .btn03 a span { display: inline-block; background: url("images/ceramics/ico-btn-arrow-2.svg") no-repeat center right; background-size: 1.4rem; padding-right: 2rem; } .btn03 a:hover { text-decoration: none; } .bgOrange { background: linear-gradient(#FFA126 0%, #FFA126 50%, #ffa200 50%, #ffa200 100%); } .bgOrange a { color: #fff; } .bgGreen { background: linear-gradient(#74b389 0%, #74b389 50%, #69b581 50%, #69b581 100%); } .bgGreen a { color: #fff; } .bgRed { background: linear-gradient(#F65B45 0%, #F65B45 50%, #fd5519 50%, #fd5519 100%); } .bgRed a { color: #fff; } .bgPink { background: linear-gradient(#ed89a0 0%, #ed89a0 50%, #ec8ea2 50%, #ec8ea2 100%); } .bgPink a { color: #fff; } .bgBlue { background: linear-gradient(#3d71ab 0%, #3d71ab 50%, #4671a0 50%, #4671a0 100%); } .bgBlue a { color: #fff; } .bgBrown { background: linear-gradient(#bfa569 0%, #bfa569 50%, #bfa664 50%, #bfa664 100%); } .bgBrown a { color: #fff; } .bgWhite { background: #fff; } .bgWhite a { color: #444444 !important; } /* title *******************/ .title01 { font-size: 2.4rem; line-height: 1.65; text-align: center; } .title01::before { content: ""; display: block; margin: auto; background: url("images/common/ico-ttl.png") no-repeat center; background-size: cover; width: 9.8rem; height: 3.6rem; margin-bottom: 1rem; } .title01 .line { font-weight: 100; display: inline-block; position: relative; } .title01 .line::before, .title01 .line::after { content: ""; display: block; height: .1rem; width: 1rem; background: #333; position: absolute; top: 50%; transform: translateY(-50%) translateX(0%); -webkit-transform: translateY(-50%) translateX(0%); } .title01 .line::before { left: -2rem; } .title01 .line::after { right: -2rem; } .title01 .small { font-size: 1.4rem; display: block; } .title02 { position: relative; text-align: center; font-size: 2.2rem; font-weight: 500; } .title02::before { content: ""; display: block; width: 100%; height: .1rem; background: #e4e4e4; position: absolute; top: 50%; left: 0; transform: translateY(-50%) translateX(0%); -webkit-transform: translateY(-50%) translateX(0%); } .title02 span { background: #fff; display: inline-block; padding: 0 1.5rem; position: relative; z-index: 1; } .title03 { font-size: 2.4rem; font-weight: 500; line-height: 1.5; text-align: center; } .title03::before { content: ""; display: block; margin: 0 auto 1rem; background: url("images/common/icon_titleIcon2.png") no-repeat center; background-size: auto; width: 9.7rem; height: 3.5rem; } .title03 .line { font-weight: 500; display: inline-block; position: relative; } .title03 .line::before, .title03 .line::after { content: ""; display: block; height: .1rem; width: 1rem; background: #333; position: absolute; top: 50%; transform: translateY(-50%) translateX(0%); -webkit-transform: translateY(-50%) translateX(0%); } .title03 .line::before { left: -2rem; } .title03 .line::after { right: -2rem; } .list01 { background: #fff; list-style: none; } .list01 li { border-bottom: .1rem solid #eeeeee; } .list01 a, .list01 .link-none { text-decoration: none; font-size: 1.5rem; color: #444444; display: block; padding: 1rem 1rem 1rem 1rem; box-sizing: border-box; position: relative; } .list01 a::after { content: "\f078"; color: #4671a0; font-size: 1rem; font-family: "Font Awesome 5 Free"; font-weight: bold; position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%) translateX(0%); -webkit-transform: translateY(-50%) translateX(0%); } .list02 { list-style: none; } .list02 li { font-size: 1.3rem; margin-bottom: .6rem; } .list02 li:last-child { margin-bottom: 0; } .list02 li::before { font-size: 1rem; content: "●"; color: #d4af82; margin-right: .6rem; position: relative; top: -.1rem; } .list02 a { text-decoration: none; color: #323232; } .list03 { list-style: none; } .list03 > li > a { font-size: 1.3rem; color: #fff; text-decoration: none; } .list03 > li > a::before { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: .4rem 0 .4rem .4rem; border-color: transparent transparent transparent #fff; position: relative; top: -.2rem; margin-right: .6rem; } .list03 > li.parrent { font-size: 1.3rem; padding-bottom: .6rem; color: #fff; position: relative; border-bottom: 1px solid #fff; } .list03 > li.parrent:hover { cursor: pointer; } .list03 > li.parrent::before { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: .4rem .4rem 0 .4rem; border-color: #fff transparent transparent transparent; position: relative; top: -.3rem; left: -.25rem; margin-right: .6rem; } .list03 > li.parrent::after { content: "\f068"; font-family: "Font Awesome 5 Free"; font-weight: bold; position: absolute; top: 0; right: 0; } .list03 > li.parrent.active:after { content: "\f067"; } .list04 { list-style: none; } .list04 > li > a { font-size: 1.2rem; color: #fff; text-decoration: none; } .list04 > li > a::before { content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: .8rem; display: inline-block; margin-right: .6rem; top: -.15rem; position: relative; } .breadcrumb { max-width: 1170px; margin: auto; position: relative; } .breadcrumbs{ position: static !important; -webkit-transform: inherit !important; -ms-transform: inherit !important; transform: inherit !important; display: block !important !important; } .breadcrumbBg { background: #f2f2f2; padding: 1.7rem 0; } .single .breadcrumbBg{ margin-bottom: 3rem; } .archive .breadcrumbBg{ margin-bottom: 3rem; } .search .breadcrumbBg{ margin-bottom: 3rem; } .breadcrumb h1{ position: absolute; right: 0; font-size: 2rem; } .single .breadcrumb h1{ position: static; } .archive .breadcrumb h1{ position: static; } .search .breadcrumb h1{ position: static; } .breadcrumb span, .breadcrumb a { font-size: 1.4rem; color: #777777; /* margin: 0 .5rem; */ } .breadcrumb a { text-decoration: none; display: inline-block; } .banaWrap { display: flex; background: url("images/top/bg04.jpg") no-repeat center top; background-size: cover; padding: 10rem 0; } .banaWrap p { margin-right: 1.5%; line-height: 0; } .banaWrap p:last-child { margin-right: 0; } .slick-prev { left: 3rem; width: 5.1rem; height: 5.1rem; background: url("images/common/slide_arrow_prev.png") no-repeat center; background-size: cover; z-index: 1; } .slick-prev::before { content: none; } .slick-next { right: 3rem; width: 5.1rem; height: 5.1rem; background: url("images/common/slide_arrow_next.png") no-repeat center; background-size: cover; z-index: 1; } .slick-next::before { content: none; } .carousel .item { box-sizing: border-box; padding: 0 2rem; } .carousel .item .img { min-height: 14rem; display: flex; align-items: center; margin-bottom: 1rem; } .induction { background: url("images/common/induction_bg.jpg") no-repeat center top; background-size: cover; padding: 7rem 0; } .induction > .flex { background: #fff; position: relative; padding: 5rem 19rem 3.5rem 10rem; box-sizing: border-box; } .induction > .flex::before { content: ""; width: 13.8rem; height: 17.5rem; display: block; background: url("images/common/induction_bg_2.png") no-repeat center top; background-size: cover; position: absolute; left: 0; bottom: 0; } .induction > .flex::after { content: ""; width: 19.1rem; height: 22.9rem; display: block; background: url("images/common/induction_bg_women.png") no-repeat center top; background-size: cover; position: absolute; right: 0; bottom: 0; } .induction > .flex .left { width: 50%; } .induction > .flex .right { width: 50%; text-align: center; } .induction > .flex .right .no1 { font-size: 1.7rem; } .induction > .flex .right .no2 { font-size: 1.4rem; margin-top: 1rem; } .induction > .flex .right .tel { text-align: center; line-height: 1.5; } .induction > .flex .right .tel a { font-size: 3.4rem; display: inline-block; font-family: 'Times', 'Times New Roman', 'Lusitana', serif; text-decoration: none; color: #333; } .induction > .flex .right .tel a .small { font-size: 2.4rem; } .induction > .flex .right .flex { justify-content: center; } .induction > .flex .right .btn { border-radius: .6rem; } .induction > .flex .right .btn.bgOrange { margin-right: 2rem; } .induction > .flex .right .btn.bgGreen { margin-right: 2rem; } .induction > .flex .right .btn a { font-size: 1.7rem; width: 19rem; padding: .8rem 0; } .induction > .flex .right .btn a span{ margin-right: .5rem; vertical-align: middle; } .induction > .flex .right .btn a span img{ vertical-align: baseline; } .induction .logo { font-size: 2.4rem; /* background: url("images/common/header_logo.png") no-repeat center left; background-size: 4.5rem; */ /* padding: 1.5rem 0 .8rem 5.5rem; */ } .induction .sub { text-align: center; font-size: 1.3rem; } .induction .address { font-size: 1.2rem; font-weight: bold; margin: 2rem 0 0 5.5rem; } .induction2 { padding: 8rem 0; } .induction2 .text { text-align: center; } .induction2 .lwrap { background: #fff; padding: 3rem 10rem 5rem; box-sizing: border-box; position: relative; } .induction2 .lwrap::before { content: ""; width: 13.8rem; height: 17.5rem; display: block; background: url("images/common/induction_bg_2.png") no-repeat center top; background-size: cover; position: absolute; left: 0; bottom: 0; } .induction2 .lwrap::after { content: ""; width: 26.7rem; height: 37.8rem; display: block; background: url("images/common/induction2_bg_women.png") no-repeat center top; background-size: cover; position: absolute; right: 0; bottom: 0; } .induction2 .logo { font-size: 2.4rem; display: inline-block; background: url("images/common/header_logo.png") no-repeat center left; background-size: 4.5rem; padding: 1.5rem 0 .8rem 5.5rem; } .induction2 .sub { text-align: center; font-size: 1.3rem; } .induction2 .address { font-size: 1.2rem; font-weight: bold; margin: 2rem 0 0; } .induction2 .bgTitle { margin: 4rem 0 3rem; font-size: 2.2rem; padding: .6rem 0; background: #eeeeee; } .induction2 .parrent { width: 78rem; margin-bottom: 2rem; align-items: center; justify-content: space-between; } .induction2 .parrent .btn { width: 24rem; border-radius: .6rem; } .induction2 .parrent .btn a { line-height: 7rem; border: .6rem; } .induction2 .parrent .btn a span { margin-right: .8rem; line-height: 1; vertical-align: middle; } .induction2 .parrent .flex .item:nth-child(1) { margin-right: 1.8rem; } .induction2 .bottom { font-size: 1.5rem; } .induction2 .tel { text-align: center; line-height: 1.5; margin: 0 0 0 2rem; } .induction2 .tel a { font-size: 3.4rem; display: inline-block; font-family: 'Times', 'Times New Roman', 'Lusitana', serif; text-decoration: none; color: #333; } .induction2 .tel a .small { font-size: 2.4rem; } .faqWrap .item { border-bottom: .1rem solid #cccccc; } .faqWrap .item:first-child { border-top: .1rem solid #cccccc; } .faqWrap .item.active h4::after { transform: rotate(180deg); top: 45%; } .faqWrap .item h4 { font-size: 2rem; font-weight: 500; text-indent: -1em; padding: 2rem 5.5rem 2rem 6rem; position: relative; box-sizing: border-box; } .faqWrap .item h4::before { content: "Q."; color: #e0a232; display: inline-block; margin-right: 2rem; } .faqWrap .item h4::after { transition: .3s; content: ""; display: block; width: 1rem; height: .7rem; background: url("images/common/arrow_bottom.png") no-repeat center; background-size: 100%; position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%) translateX(0%); -webkit-transform: translateY(-50%) translateX(0%); } .faqWrap .item h4:hover { cursor: pointer; } .faqWrap .item .faq-a { display: none; padding: 0 2rem 2rem; } .faqWrap .item .faq-a p{ background: #f9f9f9; padding: 1rem; } .faqWrap .item .faq-a p::before { content: "A."; color: #ec8ea2; display: inline-block; margin-right: 1rem; } .table01 { width: 100%; } .table01 thead th { background: #989898; color: #fff; text-align: center; padding: 1.5rem 0; } .table01 tbody tr { border-bottom: 1px solid #dbdbdb; } .table01 tbody th { background: #f6f6f6; } .table01 th { font-size: 1.7rem; box-sizing: border-box; padding: 2.5rem 1rem; text-align: center; vertical-align: middle; } .table01 td { font-size: 1.7rem; box-sizing: border-box; padding: 2.5rem 1rem; text-align: center; } .table01.col-3 thead th:nth-child(1) { width: 46%; } .table01.col-3 thead th:nth-child(2) { width: 28%; } .table01.col-3 thead th:nth-child(3) { width: 28%; } .table01.col-3 th { width: 46%; } .table01.col-3 td { width: 28%; } .priceWrap h3 { text-align: center; font-size: 3rem; font-weight: 500; margin-bottom: 3.5rem; } .header{ position: fixed; width: 100%; background: #fff; left: 0; top: 0; z-index: 999; height: inherit; } .headerTop { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 0; box-sizing: border-box; z-index: 5; position: relative; background: #fff; } .headerLogo a { font-size: 2rem; text-decoration: none; color: #362e2b; line-height: normal; display: block; } .headerLogo a:hover{ opacity: 1; } .headerLogo .logo { display: inline-block; vertical-align: middle; margin-right: .6rem; position: relative; } .headerLogo .logo img{ width: 316px; display: inline-block; vertical-align: middle; } .headerLogo .blue { font-size: 1rem; margin-left: 1rem; background: #4671a0; color: #fff; display: inline-block; padding: 1rem; line-height: 1; } .headerTel .tel { margin-bottom: .6rem; line-height: normal; } .headerTel .tel a { color: #444444; font-size: 2.5rem; text-decoration: none; font-weight: bold; } /* .headerTel .tel a:before{ font-family: "Font Awesome 5 Free"; font-weight: bold; content: "\f879"; } */ .headerTel .tel .small { font-size: 2rem; } .headerTel .no2 { font-size: 1.2rem; line-height: 1.3; } .headerBtn .btn { display: inline-block; text-align: center; border-radius: .6rem; } .headerBtn .btn a { padding: .8rem 0; line-height: 1.6; box-sizing: border-box; } .headerBtn .btn .icon-img { margin-right: .6rem; line-height: 1.6; vertical-align: middle; } .headerBtn .btn .icon-img img{ vertical-align: middle; } .headerBtn .bgOrange { width: 15rem; margin-right: 1rem; } .headerBtn .bgGreen { width: 15rem; margin-right: 1rem; } .headerBtn .bgRed { width: 15rem; margin-right: 1rem; } .headerBtn .bgPink { width: 15rem; margin-right: 1rem; } .headerBtn .bgBlue { width: 18rem; } .headerBottom { border-top: .1rem solid #e9e9e9; } .headerBottom .lwrap { align-items: center; justify-content: space-between; /* padding: 1rem 0; */ } .headerBottom .search{ padding: 1rem 0; } .headerBottom .search form { border: .1rem solid #e9e9e9; border-radius: 3rem; display: inline-block; width: 26rem; } .headerBottom .search input { padding: 1.5rem .8rem; box-sizing: border-box; width: 20.7rem; } .headerBottom .search input[type="submit"] { width: 4.7rem; padding: 1.2rem 0; background: url("images/common/icon_search_btn.png") no-repeat center top; background-size: 100% 100%; text-indent: -9999px; position: relative; right: -.1rem; } .headerBottom .search input[type="submit"]:hover { cursor: pointer; } .headerBottom .search input:focus { outline: none; } .gnavi { display: flex; align-items: center; } .gnavi li { margin-right: 1.5rem; line-height: normal; border-bottom: 4px solid #fff; } .gnavi li:last-child { margin-right: 0; } .gnavi li:hover{ border-bottom: 4px solid #edeef0; } .gnavi li a { display: block; text-decoration: none; font-size: 1.4rem; color: #323232; padding: 2rem 0; /* transition: all .2s ease-in; */ } .gnavi li a::before { /* content: ">"; display: inline-block; */ color: #4671a0; font-size: 1.1rem; /* margin-right: .6rem; */ content: '\f054'; font-family: "Font Awesome 5 Free"; font-weight: bold; } /* .gnavi li .gnavi-sub{ display: none; } */ /* .gnavi{ display: table; padding-left: 50px; } .gnavi li { display: table-cell; margin-right: 2em; } */ /* .gnavi li:hover { color: #fff; background-color: #19192b; } */ /* .gnavi li a { color: #fff; } */ .gnavi .gnavi-sub { /* transition: all .2s ease-in; */ max-height: 0; opacity: 0; overflow: hidden; width: 100%; left: 0; text-align: center; position: absolute; background: #f5f8ff; margin-top: 4px; } .gnavi .gnavi-sub .flex{ padding: 3rem; max-width: 1170px; margin: auto; } .gnavi li:hover .gnavi-sub{ max-height: 9999px; opacity: 1; } .gnavi .gnavi-sub ul { text-align: left; margin-bottom: 1rem; } .gnavi .gnavi-sub ul li { border: none; } .gnavi .gnavi-sub li a{ display: block; padding: .5rem; } .gnavi .gnavi-sub li a:hover{ text-decoration: underline; } .gnavi .gnavi-sub li a span{ font-size: 1rem; } .gnavi .gnavi-sub .menu-title{ font-size: 1.8rem; color: #f39800; font-weight: bold; border: none !important; } .gnavi .gnavi-sub .menu-title a{ font-size: 1.8rem; color: #4671a0; font-weight: bold; } .spBtn { display: none; position: relative; z-index: 3; /* right: 2rem; top: 2rem; */ /* width: 5rem; height: 4rem; */ width: 50px; height: 40px; cursor: pointer; margin-left: 1rem; margin-top: -1rem; } .spBtn span { display: block; position: absolute; width: 100%; height: 3px; background: #362e2b; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .spBtn span:nth-child(1) { top: 0; } .spBtn span:nth-child(2) { top: 19px; } .spBtn span:nth-child(3) { bottom: 0; } .spBtn.active span:nth-child(1) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); top: 19px; } .spBtn.active span:nth-child(2) { opacity: 0; } .spBtn.active span:nth-child(3) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); bottom: 19px; } .spBtn p{ color: #362e2b; line-height: 1; font-size: 13px; position: absolute; bottom: -15px; left: 0; letter-spacing: -1px; width: 100%; text-align: center; } .footer { background: #696969; margin-bottom: 0; } .footer .map iframe { height: 40rem; width: 100%; } .footerTop { background: url("images/common/footer_bg.jpg") no-repeat center top; background-size: cover; padding: 12rem 0 14rem; text-align: center; } .footerTop .logo { font-size: 2rem; margin-bottom: 3rem; text-align: center; } .footerTop .logo img{ width: 300px; } /* .footerTop .logo::before { content: ""; background: url("images/common/header_logo.png") no-repeat center; background-size: cover; width: 4rem; height: 4.1rem; display: block; margin: 0 auto 1.5rem; } */ .footerTop p { font-size: 1.2rem; } .footerTop p a { font-size: 1.2rem; text-decoration: none; color: #362e2b; } .footerMenu { padding: 8rem 0 3rem; } .footerMenu .list03 li { margin-bottom: .6rem; } .footerMenu .flex { justify-content: space-between; } /* .footerMenu .item:nth-child(1) { width: 20%; } .footerMenu .item:nth-child(2) { width: 20%; } .footerMenu .item:nth-child(3) { width: 20%; } .footerMenu .item:nth-child(4) { width: 20%; } .footerMenu .item:nth-child(5) { width: 25%; } */ .footerMenu .item{ width: 25%; } .footerMenu .list04 { margin-left: 1rem; } .footerMenu .mb { margin-bottom: 3rem; } .footerMenu .parrent .list04 { /* display: none; */ } .footerBottom { border-top: .1rem solid #fff; border-bottom: .1rem solid #fff; padding: 3rem 0; box-sizing: border-box; color: #fff; } .footerBottom p { font-size: 1.2rem; } .footerBottom p.btn { font-size: 1.6rem; display: inline-block; width: 18rem; border-radius: .6rem; margin-right: .6rem; } .footerBottom p.btn:last-child { margin-right: 0; } .footerBottom p.btn a { line-height: 5rem; } .footerBottom p.btn a span{ vertical-align: middle; display: inline-block; margin-right: .5rem; } .footerBottom p.btn a span img{ vertical-align: baseline; } .footerBottom p.btn.bgWhite { width: 12rem; } .footerBottom .flex { justify-content: space-between; } .footerBottom .snsBtn p { line-height: normal; } .footerBottom .snsBtn p:first-child { margin-bottom: .3rem; } .footerBottom .snsBtn a { display: block; } .footer small { display: block; text-align: center; color: #fff; font-size: 1.1rem; padding: 1.5rem 0 2rem; } #contents{ margin-top: 172px; } .single .content_right h2{ font-size: 24px; } .single .content_right h3{ font-size: 22px; } .single .content_right h4{ font-size: 20px; } .single .content_right a{ color: #f39800; text-decoration: underline; } .single .content_right a:hover{ text-decoration: none; } .single .entry-title{ font-size: 28px; } @media screen and (max-width: 1200px) { .lwrap { margin: 0 1.5rem; } .banaWrap { padding: 8% 0; } .carousel .item { padding: 0 1rem; } .carousel .item .img { min-height: 9vw; } .breadcrumb { margin: 0 1.5rem; } .induction > .flex { padding: 5rem 16rem 3.5rem 7rem; padding: 5rem 15vw 3.5rem 8vw; } .induction > .flex::before { width: 11.8vw; height: 15vw; } .induction > .flex::after { width: 14.2vw; height: 17.5vw; } .induction > .flex .left { width: 52%; margin-right: 2%; } .induction > .flex .right { width: 46%; } .induction > .flex .right .flex { justify-content: space-between; } .induction > .flex .right .btn { width: 48%; } .induction > .flex .right .btn a { width: 100%; font-size: 1.5rem; } .induction > .flex .right .btn a span { margin-right: .3rem; width: 1.5rem; display: inline-block; } .induction > .flex .right .no1 { font-size: 1.4rem; } .induction > .flex .right .no2 { font-size: 1.2rem; } .induction .logo { /* background-size: 3rem; padding: 1.5rem 0 .8rem 4.2rem; */ /* font-size: 1.8rem; */ } .induction .sub { font-size: 1.1rem; } .induction .address { font-size: 1.1rem; margin: 2rem 0 0 3rem; } .induction2 .lwrap::after { width: 22.7rem; height: 31.8rem; } .induction2 .tel { margin: 0 2% 0 0; width: 32%; } .induction2 .tel a { font-size: 3vw; } .induction2 .tel a .small { font-size: 2vw; } .induction2 .parrent { width: 88%; } .induction2 .parrent .flex { justify-content: space-between; width: 66%; } .induction2 .parrent .flex .item { width: 48%; } .induction2 .parrent .btn { width: 100%; } .induction2 .parrent .btn a { line-height: 6rem; } .headerLogo { width: 38%; margin-right: 2%; } .headerLogo a { font-size: 1.7vw; white-space: nowrap; } .headerLogo .icon { margin-right: 1%; width: 3.4vw; } .headerLogo .blue { /* font-size: 1.2vw; margin-left: 1%; */ position: absolute; top: -1.5rem; left: -1.5rem; margin: 0; padding: .5rem 1rem; } .headerTel { width: 18%; margin-right: 1%; } .headerTel .tel a { font-size: 2.2vw; } .headerTel .tel .small { font-size: 1.8vw; } .headerTel .no2 { font-size: .8vw; } .headerTel .tbNone { display: none; } .headerBtn { letter-spacing: -.5em; text-align: right; width: 41%; } .headerBtn > * { letter-spacing: normal; } .headerBtn .btn a { font-size: 1.2vw; } .headerBtn .btn .icon-img { margin-right: 3%; width: 2vw; display: inline-block; } .headerBtn .bgOrange { width: 12vw; margin-right: 1%; } .headerBtn .bgGreen { width: 12vw; margin-right: 1%; } .headerBtn .bgRed { width: 12vw; margin-right: 1%; } .headerBtn .bgPink { width: 12vw; margin-right: 1%; } .headerBtn .bgBlue { width: 14vw; } .headerBottom .search form { width: 24vw; } .headerBottom .search input { padding: 1.5rem .8rem; width: 19vw; } .headerBottom .search input[type="submit"] { width: 4vw; right: -1%; } .gnavi li { margin-right: 1.3vw; } .gnavi li a { font-size: 1.1vw; } .gnavi li a::before { margin-right: .4rem; } .footerBottom .flex { flex-wrap: wrap; justify-content: center; } .footerBottom .flex > p { width: 100%; text-align: center; margin-bottom: 2rem; } .footerBottom .flex .btnWrap { margin-right: 2rem; } .footerBottom p.btn { width: 15rem; } .footerBottom p.btn span { display: inline-block; width: 2rem; margin-right: .3rem; line-height: 0; vertical-align: middle; position: relative; top: -.2rem; } .footerBottom p.btn a { font-size: 1.4rem; } .footerBottom p.btn.bgBlue span { width: 1.6rem; } #contents{ margin-top: 12.5vw; } } @media screen and (max-width: 1000px) { .headerLogo .blue { position: absolute; top: -2.2rem; left: -1.5rem; margin: 0; padding: .5rem 1rem; } .induction > .flex { flex-wrap: wrap; padding: 3rem; } .induction > .flex::before { width: 18vw; height: 23vw; } .induction > .flex::after { width: 18vw; height: 22vw; } .induction > .flex .left { width: 100%; margin-right: 0; margin-bottom: 3rem; text-align: center; } .induction > .flex .left .logo { display: inline-block; width: 40%; } .induction .address{ display: inline-block; /* width: 50%; */ } .induction > .flex .right { width: 100%; } .induction > .flex .right .flex { max-width: 42rem; margin: auto; } .footerMenu .flex { flex-wrap: wrap; justify-content: center; } .footerMenu .item:nth-child(1) { width: 33.33333333%; width: 27%; margin-bottom: 3rem; } .footerMenu .item:nth-child(2) { width: 33.33333333%; width: 27%; margin-bottom: 3rem; } .footerMenu .item:nth-child(3) { width: 33.33333334%; width: 27%; margin-bottom: 3rem; } .footerMenu .item:nth-child(4) { width: 33.33333333%; } .footerMenu .item:nth-child(5) { width: 33.33333333%; } } @media screen and (max-width: 900px) { #contents { margin-top: 17.5vw; } .list01 a, .list01 .link-none { font-size: 1.2rem; padding: 1rem 1.5rem 1rem 1rem; } .list01 a::after { right: .8rem; } .induction2 .parrent .flex { width: 64%; } .induction2 .parrent .btn a { line-height: 4.5rem; } .induction2 .tel { width: 34%; } .induction2 .tel a { font-size: 2.9vw; } .headerBottom .search form { width: 16vw; } .headerBottom .search input { width: 12.5vw; padding: 0.5rem; } .headerBottom .search input[type="submit"] { width: 3vw; padding: .2rem 0; } } /******************* スマホ ******************/ @media screen and (max-width: 767px) { .breadcrumb h1{ position: static; } html { font-size: 1.33333vw; } p, a, li, dd, dt, th, td { font-size: 2.8rem; } .lwrap { margin: 0 3rem; } .pc { display: none !important; } .sp { display: block; } .title01 { font-size: 4rem; } .title01::before { background-size: 100%; width: 12.7rem; height: 4.5rem; margin: 0 auto 2rem; } .title01 .line::before { height: .2rem; width: 2rem; left: -3rem; } .title01 .line::after { height: .2rem; width: 2rem; right: -3rem; } .title01 .small { font-size: 2rem; } .title02 { font-size: 3.2rem; } .title02 span { padding: 0 3rem; } .title03 { font-size: 4rem; } .title03::before { background-size: 100%; width: 12.7rem; height: 4.5rem; margin: 0 auto 2rem; } .title03 .line::before { height: .2rem; width: 2rem; left: -3rem; } .title03 .line::after { height: .2rem; width: 2rem; right: -3rem; } .list01 a, .list01 .link-none { font-size: 2.6rem; padding: 2rem 4rem 2rem 2rem; line-height: 1.2; } .list01 a::after { /* width: 2rem; */ /* height: 1.4rem; */ right: 1.2rem; line-height: 1; top: 35%; } .list01 li ul li a{ font-size: 2rem; } .list02 li { font-size: 2.8rem; text-indent: -1em; padding-left: 1em; margin-bottom: 2rem; } .list02 li::before { font-size: 1.8rem; top: -.3rem; margin-right: 1.2rem; } .list03 > li.parrent { font-size: 2.8rem; margin-right: 0; } .list03 > li.parrent::before{ border-width: .8rem 0 .8rem .8rem; margin-right: 1rem; } /* .list03 > li.parrent::before { border-width: .8rem .8rem 0 .8rem; } */ .list03 > li.parrent.active::before{ border-width: .8rem .8rem 0 .8rem; top: -0.5rem; } .list03 > li > a { font-size: 2.8rem; } .list03 > li > a::before { border-width: .8rem 0 .8rem .8rem; margin-right: 1rem; } .list04 > li > a { font-size: 2.8rem; } .btn01 a { padding: 2rem 0; } .btn01 a .icon { width: 2.6rem; display: inline-block; } .btn01 a .icon img { width: 100%; } .banaWrap { padding: 6rem 3rem; flex-wrap: wrap; } .banaWrap p { width: 32%; margin-right: 2%; margin-bottom: 2%; } .banaWrap p:nth-child(3n) { margin-right: 0; } .banaWrap p:nth-child(n + 7) { margin-bottom: 0; } .carousel .item { padding: 0 2rem; } .carousel .item .img { min-height: 11rem; } .induction > .flex { padding: 4rem; } .induction > .flex::before, .induction > .flex::after { content: none; } .induction > .flex .right .no1 { font-size: 2.6rem; } .induction > .flex .right .no2 { font-size: 2rem; margin-top: 2rem; } .induction > .flex .right .tel { line-height: 2; } .induction > .flex .right .tel a { font-size: 4.8rem; } .induction > .flex .right .tel a .small { font-size: 3.2rem; } .induction > .flex .right .btn a { font-size: 2.8rem; } .induction > .flex .right .btn a span { width: 2.5rem; margin-right: .6rem; } .induction > .flex .right .btn a span img { width: 100%; } .induction > .flex .right .flex { max-width: 60rem; } .induction .logo { width: 100% !important; display: block !important; /* font-size: 3.4rem; background-size: 4rem; padding: 1.5rem 0 1rem 5rem; */ } .induction .sub { font-size: 2rem; } .induction .address { margin: 2rem 0 0; font-size: 2rem; width: 100%; display: block; } .induction2 .lwrap { padding: 5rem 3rem 7rem; } .induction2 .lwrap::before { width: 11.8rem; height: 15.5rem; } .induction2 .lwrap::after { content: none; } .induction2 .logo { font-size: 3.4rem; background-size: 4rem; padding: 1.5rem 0 1rem 5rem; } .induction2 .sub { font-size: 2rem; } .induction2 .address { margin: 2rem 0 0; font-size: 2.4rem; } .induction2 .bgTitle { font-size: 3rem; margin: 4rem 0; } .induction2 .parrent { width: 100%; margin-bottom: 3rem; } .induction2 .parrent .btn a { font-size: 2rem; line-height: 5.5rem; } .induction2 .parrent .btn a span { display: inline-block; width: 2rem; } .induction2 .bottom { font-size: 2rem; } .induction2 .tel a { font-size: 3rem; } .breadcrumb { margin: 0 3rem; font-size: 2.2rem; } .breadcrumbBg { padding: 2.5rem 0; } .breadcrumb span, .breadcrumb a { font-size: 2.2rem; } .pointWrap .item { width: 100%; } .faqWrap .item h4 { font-size: 2.8rem; text-indent: -.9em; padding: 3rem 5.5rem 3rem 7rem; } .faqWrap .item h4::after { width: 2rem; height: 1.4rem; right: 1.5rem; } .faqWrap .item .faq-a { padding: 0 3rem 3rem; } .priceWrap h3 { font-size: 3.4rem; margin-bottom: 4rem; } .spTableWrap { overflow: scroll; } .table01.col-5 { width: 100rem; } .headerTop.lwrap { /* margin: 0 2rem; */ margin: 0; padding: 1.5rem 2rem; border-bottom: 1px solid #f0f0f0; } .headerLogo { width: 40%; margin-right: 0; } .headerLogo a { font-size: 2.8rem; } .headerLogo .logo{ margin-right: 0; } .headerLogo .logo img{ width: 100%; } .headerLogo .blue { font-size: 2rem; top: -2.4rem; left: -2rem; bottom: inherit; /* bottom: -4rem; */ } .headerTel { display: none; } .headerTel.sp{ display: block; text-align: center; width: 100%; margin: 3rem 0; } .headerTel.sp .tbNone{ display: block; } .headerTel .tel .small{ font-size: 6rem; } .headerTel .tel a{ font-size: 6rem; } .headerTel .no2{ font-size: 2.4rem; background: #f5f8ff; padding: 2rem 3rem; display: inline-block; } .headerBtn { width: 48%; /* display: none; */ /* margin-right: 7rem; */ } .headerBtn .btn a{ line-height: 1.3; padding: 1rem 1rem 0.7rem; font-size: 13px; display: block; } .headerBtn .bgOrange{ width: auto; } /* .headerBtn .btn.bgOrange a{ padding-left: 0; padding-right: 0; } */ .headerBtn .btn .icon-img{ display: block; margin: auto; line-height: 1; text-align: center; width: inherit; } .headerBtn .btn .icon-img img{ height: 3rem; } /* .headerBtn .bgOrange{ display: none; } */ .headerBtn .bgRed{ width: auto; } .headerBtn .bgPink{ width: auto; margin-right: 2%; } .headerBtn .bgGreen{ width: auto; margin-right: 2%; } .headerBtn .bgBlue{ width: auto; } .headerBottom { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; /* margin-top: 72px; padding-bottom: 72px; */ overflow-y: scroll; overflow-x: hidden; background: #fff; z-index: 4; } .headerBottom .lwrap{ display: block; } .headerBottom .search{ margin-top: 3rem; } .headerBottom .search form{ width: 100%; display: block; } .headerBottom .search input{ padding: 1rem; width : 85%; width : -webkit-calc(100% - 50px); width : calc(100% - 50px); font-size: 2.6rem } .headerBottom .search input[type="submit"]{ width: 45px; height: 45px; } .gnavi{ display: block; } .gnavi .gnavi-sub{ display: none; overflow: auto; opacity: 1; } .gnavi .flex.col-4 .item{ width: 100%; margin: 0; } .gnavi .flex.col-5 .item{ width: 100%; margin: 0; } .gnavi .flex.col-6 .item{ width: 100%; margin: 0; } .gnavi li{ border: none !important; margin-right: 0; border-bottom: 1px solid #eeeeee !important; } .gnavi li:hover .gnavi-sub{ max-height: inherit; position: static; } .gnavi .gnavi-sub{ position: static; max-height:inherit; } .gnavi .gnavi-sub .menu-title{ font-size: 2.8rem; } .gnavi .gnavi-sub .menu-title a{ font-size: 2.8rem; } .gnavi li a{ font-size: 2.6rem; text-align: left; } .gnavi .gnavi-sub li a{ padding: 1rem; } .gnavi li a{ position: relative; } .gnavi li a:after{ content: "\f138"; font-family: "Font Awesome 5 Free"; font-weight: bold; position: absolute; right: 0; top: 2.5rem; color: #4671a0; } .gnavi li a.sp-accordion:after{ content: "\f067"; } .gnavi li a.sp-accordion.active:after { content: "\f068"; } .gnavi .gnavi-sub li a:after{ content: none; } .spBtn { display: block; } .footer .map iframe { height: 50rem; } .footerTop .logo { font-size: 3.4rem; margin-bottom: 5rem; } .footerTop .logo::before { width: 5.5rem; height: 6.1rem; margin: 0 auto 2rem; } .footerTop p { font-size: 2.8rem; } .footerTop p a { font-size: 2.8rem; } .footerMenu .item { margin-bottom: 0 !important; } .footerMenu .item:nth-child(1) { width: 100%; } .footerMenu .item:nth-child(2) { width: 100%; } .footerMenu .item:nth-child(3) { width: 100%; } .footerMenu .item:nth-child(4) { width: 100%; } .footerMenu .item:nth-child(5) { width: 100%; } .footerMenu .mb { margin-bottom: 0; } .footerMenu .parrent .list04 { margin: 3rem 0 0 3rem; display: none; } .footerMenu .list03 li { margin-bottom: 3rem; } .footerBottom .flex > p { font-size: 2.4rem; text-align: left; margin-bottom: 3rem; } .footerBottom .flex .btnWrap { width: 100%; margin-right: 0; margin-bottom: 2rem; display: flex; justify-content: space-between; } .footerBottom .flex .snsBtn { width: 100%; } .footerBottom p.btn { width: 20rem; } .footerBottom p.btn.bgWhite { width: 13rem; } .footerBottom p.btn a { font-size: 2.4rem; } .footerBottom p.btn span { width: 2.2rem; margin-right: 1rem; } .footerBottom p.btn span img { width: 100%; } .footerBottom .snsBtn { display: flex; } .footerBottom .snsBtn p:first-child { margin-bottom: 0; margin-right: 1rem; } .footerBottom .snsBtn p img { width: 16rem; } .footer small { padding: 3rem 0 4rem; font-size: 1.6rem; } #contents { margin-top: 12.5vw; } .headerBottom{ margin-top: 12.5vw; } .headerBottom .lwrap{ padding-bottom: 12.5vw; } .single .content_right h2{ font-size: 20px; } .single .content_right h3{ font-size: 18px; } .single .content_right h4{ font-size: 16px; font-weight: bold; } .single .entry-title{ font-size: 24px; } } @media screen and (max-width: 640px) { /* margin *******************/ .sp-mt-0 { margin-top: 0rem !important; } .sp-mb-0 { margin-bottom: 0rem !important; } .sp-mt-5 { margin-top: 0.5rem !important; } .sp-mb-5 { margin-bottom: 0.5rem !important; } .sp-mt-10 { margin-top: 1rem !important; } .sp-mb-10 { margin-bottom: 1rem !important; } .sp-mt-15 { margin-top: 1.5rem !important; } .sp-mb-15 { margin-bottom: 1.5rem !important; } .sp-mt-20 { margin-top: 2rem !important; } .sp-mb-20 { margin-bottom: 2rem !important; } .sp-mt-25 { margin-top: 2.5rem !important; } .sp-mb-25 { margin-bottom: 2.5rem !important; } .sp-mt-30 { margin-top: 3rem !important; } .sp-mb-30 { margin-bottom: 3rem !important; } .sp-mt-35 { margin-top: 3.5rem !important; } .sp-mb-35 { margin-bottom: 3.5rem !important; } .sp-mt-40 { margin-top: 4rem !important; } .sp-mb-40 { margin-bottom: 4rem !important; } .sp-mt-45 { margin-top: 4.5rem !important; } .sp-mb-45 { margin-bottom: 4.5rem !important; } .sp-mt-50 { margin-top: 5rem !important; } .sp-mb-50 { margin-bottom: 5rem !important; } .sp-mt-55 { margin-top: 5.5rem !important; } .sp-mb-55 { margin-bottom: 5.5rem !important; } .sp-mt-60 { margin-top: 6rem !important; } .sp-mb-60 { margin-bottom: 6rem !important; } .sp-mt-65 { margin-top: 6.5rem !important; } .sp-mb-65 { margin-bottom: 6.5rem !important; } .sp-mt-70 { margin-top: 7rem !important; } .sp-mb-70 { margin-bottom: 7rem !important; } .sp-mt-75 { margin-top: 7.5rem !important; } .sp-mb-75 { margin-bottom: 7.5rem !important; } .sp-mt-80 { margin-top: 8rem !important; } .sp-mb-80 { margin-bottom: 8rem !important; } .sp-mt-85 { margin-top: 8.5rem !important; } .sp-mb-85 { margin-bottom: 8.5rem !important; } .sp-mt-90 { margin-top: 9rem !important; } .sp-mb-90 { margin-bottom: 9rem !important; } .sp-mt-95 { margin-top: 9.5rem !important; } .sp-mb-95 { margin-bottom: 9.5rem !important; } .sp-mt-100 { margin-top: 10rem !important; } .sp-mb-100 { margin-bottom: 10rem !important; } .sp-mt-105 { margin-top: 10.5rem !important; } .sp-mb-105 { margin-bottom: 10.5rem !important; } .sp-mt-110 { margin-top: 11rem !important; } .sp-mb-110 { margin-bottom: 11rem !important; } .sp-mt-115 { margin-top: 11.5rem !important; } .sp-mb-115 { margin-bottom: 11.5rem !important; } .sp-mt-120 { margin-top: 12rem !important; } .sp-mb-120 { margin-bottom: 12rem !important; } .sp-mt-125 { margin-top: 12.5rem !important; } .sp-mb-125 { margin-bottom: 12.5rem !important; } .sp-mt-130 { margin-top: 13rem !important; } .sp-mb-130 { margin-bottom: 13rem !important; } .sp-mt-135 { margin-top: 13.5rem !important; } .sp-mb-135 { margin-bottom: 13.5rem !important; } .sp-mt-140 { margin-top: 14rem !important; } .sp-mb-140 { margin-bottom: 14rem !important; } .sp-mt-145 { margin-top: 14.5rem !important; } .sp-mb-145 { margin-bottom: 14.5rem !important; } .sp-mt-150 { margin-top: 15rem !important; } .sp-mb-150 { margin-bottom: 15rem !important; } .sp-mt-155 { margin-top: 15.5rem !important; } .sp-mb-155 { margin-bottom: 15.5rem !important; } .sp-mt-160 { margin-top: 16rem !important; } .sp-mb-160 { margin-bottom: 16rem !important; } .sp-mt-165 { margin-top: 16.5rem !important; } .sp-mb-165 { margin-bottom: 16.5rem !important; } .sp-mt-170 { margin-top: 17rem !important; } .sp-mb-170 { margin-bottom: 17rem !important; } .sp-mt-175 { margin-top: 17.5rem !important; } .sp-mb-175 { margin-bottom: 17.5rem !important; } .sp-mt-180 { margin-top: 18rem !important; } .sp-mb-180 { margin-bottom: 18rem !important; } .sp-mt-185 { margin-top: 18.5rem !important; } .sp-mb-185 { margin-bottom: 18.5rem !important; } .sp-mt-190 { margin-top: 19rem !important; } .sp-mb-190 { margin-bottom: 19rem !important; } .sp-mt-195 { margin-top: 19.5rem !important; } .sp-mb-195 { margin-bottom: 19.5rem !important; } .sp-mt-200 { margin-top: 20rem !important; } .sp-mb-200 { margin-bottom: 20rem !important; } .pc_none { display: block !important; } .spBtn{ width: 40px; height: 30px; margin-top: -5px; } .spBtn span:nth-child(2){ top: 14px; } .spBtn.active span:nth-child(1){ top: 13px; } .spBtn.active span:nth-child(3){ bottom: 14px; } .spBtn p{ font-size: 10px; bottom: -12px; } .headerBtn .btn a{ font-size: 10px; letter-spacing: -1px; } .btn02 a { max-width: inherit; font-size: 3rem; line-height: 1; padding: 2.3rem 0; } .btn02 a span { background-size: 2.4rem; padding-left: 3.4rem; } .btn03 a { padding: 1.5rem; line-height: 1.35; font-weight: bold; } .btn03 a span { background-size: 2rem; padding-right: 3rem; text-align: left; } /* #contents { margin-top: 12.5vw; } */ } @media screen and (max-width: 480px) { .spBtn{ width: 34px; height: 23px; } .spBtn span:nth-child(2){ top: 10px; } .spBtn.active span:nth-child(1){ top: 10px; } .spBtn.active span:nth-child(3){ bottom: 10px; } .spBtn p{ letter-spacing: -2px; } .headerLogo .blue { top: -2.6rem; } /* #contents { margin-top: 14.5vw; } */ } @media screen and (max-width: 380px) { .headerLogo .blue { top: -2.8rem; } #contents { margin-top: 14.5vw; } .headerBottom{ margin-top: 14.5vw; } .headerBottom .lwrap{ padding-bottom: 14.5vw; } } @media only screen and (max-width: 320px) { p { font-size: 2.8rem; } }