@charset "UTF-8"; /*---------------------------------------- proshop ----------------------------------------*/ /*　common ----------------------------------------*/ #titleArea { background: url("../img/proshop/bg_main_proshop.jpg") 100% 50% no-repeat; } @media screen and (min-width: 0px) and (max-width: 667px) { #titleArea { background: url("../img/proshop/bg_main_proshop.jpg") 100% 50% no-repeat; background-size: 50% auto; } } .gm-style-iw { font-weight: 700 !important; left: 0 !important; right: 0 !important; color: white !important; position: static !important; } .gm-style-iw a { color: white !important; } .gm-style-iw .gm-iw { color: white !important; } .gm-style-iw .gm-iw .gm-title { font-weight: 700; } .gm-style-iw + div { display: none; } .gm-style-iw > div > div { position: relative; z-index: 200; } .gm-style-iw:after { content: ''; display: block; top: -1em; bottom: 0; left: -1em; right: -1em; position: absolute; background-color: #0b3290 !important; } .gm-style-iw:before { content: ''; display: block; bottom: -42px; left: 0; right: -1px; width: 0px; margin: auto; position: absolute; content: ""; position: absolute; border-top: 22px solid #0b3290; border-right: 10px solid transparent; border-bottom: 22px solid transparent; border-left: 10px solid transparent; } #searchMapInfoArea .tableStyle01 { width: 940px; } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight020 { height: 20px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight022 { height: 22px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight024 { height: 24px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight026 { height: 26px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight028 { height: 28px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight030 { height: 30px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight032 { height: 32px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight034 { height: 34px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight036 { height: 36px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight038 { height: 38px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight040 { height: 40px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight042 { height: 42px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight044 { height: 44px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight046 { height: 46px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight048 { height: 48px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight050 { height: 50px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight052 { height: 52px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight054 { height: 54px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight056 { height: 56px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight058 { height: 58px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight060 { height: 60px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight062 { height: 62px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight064 { height: 64px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight066 { height: 66px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight068 { height: 68px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight070 { height: 70px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight072 { height: 72px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight074 { height: 74px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight076 { height: 76px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight078 { height: 78px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight080 { height: 80px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight082 { height: 82px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight084 { height: 84px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight086 { height: 86px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight088 { height: 88px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight090 { height: 90px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight092 { height: 92px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight094 { height: 94px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight096 { height: 96px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight098 { height: 98px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight100 { height: 100px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight102 { height: 102px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight104 { height: 104px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight106 { height: 106px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight108 { height: 108px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight110 { height: 110px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight112 { height: 112px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight114 { height: 114px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight116 { height: 116px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight118 { height: 118px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight120 { height: 120px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight122 { height: 122px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight124 { height: 124px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight126 { height: 126px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight128 { height: 128px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight130 { height: 130px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight132 { height: 132px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight134 { height: 134px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight136 { height: 136px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight138 { height: 138px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight140 { height: 140px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight142 { height: 142px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight144 { height: 144px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight146 { height: 146px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight148 { height: 148px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight150 { height: 150px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight152 { height: 152px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight154 { height: 154px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight156 { height: 156px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight158 { height: 158px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight160 { height: 160px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight162 { height: 162px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight164 { height: 164px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight166 { height: 166px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight168 { height: 168px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight170 { height: 170px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight172 { height: 172px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight174 { height: 174px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight176 { height: 176px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight178 { height: 178px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight180 { height: 180px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight182 { height: 182px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight184 { height: 184px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight186 { height: 186px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight188 { height: 188px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight190 { height: 190px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight192 { height: 192px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight194 { height: 194px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight196 { height: 196px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight198 { height: 198px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbCellHeight200 { height: 200px; } } @media screen and (min-width: 0px) and (max-width: 667px) { #searchMapInfoArea .mbTableFixedTitle { padding-bottom: 20px !important; width: auto; } @media (max-width: 660px) { video { width: 100%; height: auto; }} #searchMapInfoArea .mbTableFixedTitle th, #searchMapInfoArea .mbTableFixedTitle td { border-color: transparent; } } /*　index ----------------------------------------*/ #proshop .idx #searchLocalArea { position: relative; min-height: 750px; padding-right: 181px; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .idx #searchLocalArea { padding-right: 10px; padding-bottom: 180px; } } #proshop .idx #searchLocalArea #searchLocalMap { position: absolute; bottom: 26px; right: 36px; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .idx #searchLocalArea #searchLocalMap { left: 10px; right: 10px; } } #proshop .idx .gridSearchLocal05 { width: 102.38994%; margin-left: -2.38994%; } #proshop .idx .gridSearchLocal05:before, #proshop .idx .gridSearchLocal05:after { content: ""; display: table; } #proshop .idx .gridSearchLocal05:after { clear: both; } #proshop .idx .gridSearchLocal05 > * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 17.61006%; margin-left: 2.38994%; } #proshop .idx .gridSearchLocal05 > *.gridCol02 { width: 37.61006%; } #proshop .idx .gridSearchLocal05 > *.gridCol03 { width: 57.61006%; } #proshop .idx .gridSearchLocal05 > *.gridCol04 { width: 77.61006%; } #proshop .idx .gridSearchLocal05 > *.gridCol05 { width: 97.61006%; } #proshop .idx .gridSearchLocal05 > *:first-child + * + * + * + * ~ * { margin-top: 20px; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .idx .gridSearchLocal05 { width: 106.48464%; margin-left: -6.48464%; } #proshop .idx .gridSearchLocal05:before, #proshop .idx .gridSearchLocal05:after { content: ""; display: table; } #proshop .idx .gridSearchLocal05:after { clear: both; } #proshop .idx .gridSearchLocal05 > * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 43.51536%; margin-left: 6.48464%; } #proshop .idx .gridSearchLocal05 > *.gridCol02 { width: 93.51536%; } #proshop .idx .gridSearchLocal05 > *:first-child + * ~ * { margin-top: 20px; } } /*　geolocation ----------------------------------------*/ #proshop .geolocation #gMapArea { position: relative; padding: 0; } #proshop .geolocation #gMapArea #gMap { overflow: visible !important; height: 510px; width: 976px; font-size: 0; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .geolocation #gMapArea #gMap { height: 280px; width: auto; } } #proshop .geolocation #gMapArea #gMapInfoArea { content: ''; display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 360px; margin: auto 0; z-index: 100; background-color: rgba(0, 0, 0, 0.1); } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .geolocation #gMapArea #gMapInfoArea { width: auto; position: static; } } #proshop .geolocation #gMapArea #gMapInfoArea #gMapScrollArea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 16px 21px 0; padding: 3px 4px; background-color: #fff; height: 480px; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .geolocation #gMapArea #gMapInfoArea #gMapScrollArea { margin: 0; height: 280px; } } #proshop .geolocation #gMapArea #gMapInfoArea #gMapInfoMainList { padding-left: 32px; background: url("../../img/i_marker03.png") 0 0 no-repeat; } #proshop .geolocation #gMapArea #gMapInfoArea #gMapInfoMainList > dt { padding-right: 80px; } #proshop .geolocation #gMapArea #gMapInfoArea #gMapInfoMainList > dt b { font-weight: 700; color: #0b3290; display: block; } #proshop .geolocation #gMapArea #gMapInfoArea #gMapInfoMainList > dt span { font-size: 86%; } #proshop .geolocation #gMapArea #gMapInfoArea #gMapInfoMainList > dd { margin-top: 18px; font-size: 86%; } #proshop .geolocation #gMapArea #gMapInfoArea .gMapInfo { position: relative; padding: 6px 20px 6px 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 306px; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .geolocation #gMapArea #gMapInfoArea .gMapInfo { width: auto; } } #proshop .geolocation #gMapArea #gMapInfoArea .gMapInfo > dt { font-weight: 700; color: #0b3290; } #proshop .geolocation #gMapArea #gMapInfoArea .gMapInfo > dd { font-size: 86%; } #proshop .geolocation #gMapArea #gMapInfoArea #gMapInfoThumb { position: absolute; top: 12px; right: 20px; } #proshop .geolocation #gMapArea #gMapInfoArea .gMapInfoList { margin-top: 15px; } #proshop .geolocation #gMapArea #gMapInfoArea .gMapInfoList li { border-bottom: 1px solid #cccccc; padding: 5px 6px; } #proshop .geolocation #gMapArea #gMapInfoArea .gMapInfoList li:before, #proshop .geolocation #gMapArea #gMapInfoArea .gMapInfoList li:after { content: ""; display: table; } #proshop .geolocation #gMapArea #gMapInfoArea .gMapInfoList li:after { clear: both; } #proshop .geolocation #gMapArea #gMapInfoArea .gMapInfoList li:first-child { border-top: 1px solid #cccccc; } #proshop .geolocation #gMapArea #gMapInfoArea .gMapInfoList li .pan-to-marker { display: block; } #proshop .geolocation #gMapArea #gMapInfoArea .gMapInfoList li dl { float: left; width: 150px; padding-left: 34px; background: url("../../img/i_marker02.png") 0 0 no-repeat; text-decoration: none; } #proshop .geolocation #gMapArea #gMapInfoArea .gMapInfoList li dl dt { font-weight: 700; color: #0b3290; } #proshop .geolocation #gMapArea #gMapInfoArea .gMapInfoList li dl dd { font-size: 86%; color: #333; } #proshop .geolocation #gMapArea #gMapInfoArea .gMapInfoList li figure { margin-left: 197px; } #proshop .geolocation #gMapArea #gMapInfoArea .gMapInfoList li:hover { -webkit-transition-property: all; -moz-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; transition-timing-function: ease-out; background-color: #e5edf6; cursor: pointer; } #proshop .geolocation #gMapScrollArea { height: 100%; } #proshop .geolocation #campainArea .gridCampainList04 { width: 101.7801%; margin-left: -1.7801%; } #proshop .geolocation #campainArea .gridCampainList04:before, #proshop .geolocation #campainArea .gridCampainList04:after { content: ""; display: table; } #proshop .geolocation #campainArea .gridCampainList04:after { clear: both; } #proshop .geolocation #campainArea .gridCampainList04 > * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 23.21466%; margin-left: 1.7801%; } #proshop .geolocation #campainArea .gridCampainList04 > *.gridCol02 { width: 48.20942%; } #proshop .geolocation #campainArea .gridCampainList04 > *.gridCol03 { width: 73.20419%; } #proshop .geolocation #campainArea .gridCampainList04 > *.gridCol04 { width: 98.19895%; } #proshop .geolocation #campainArea .gridCampainList04 > *:first-child + * + * + * ~ * { margin-top: 5px; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .geolocation #campainArea .gridCampainList04 { width: 106.48464%; margin-left: -6.48464%; } #proshop .geolocation #campainArea .gridCampainList04:before, #proshop .geolocation #campainArea .gridCampainList04:after { content: ""; display: table; } #proshop .geolocation #campainArea .gridCampainList04:after { clear: both; } #proshop .geolocation #campainArea .gridCampainList04 > * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 43.51536%; margin-left: 6.48464%; } #proshop .geolocation #campainArea .gridCampainList04 > *.gridCol02 { width: 93.51536%; } #proshop .geolocation #campainArea .gridCampainList04 > *:first-child + * ~ * { margin-top: 5px; } } /* custom scrollbar ---------------------------------------------*/ .mCustomScrollbar { overflow: hidden; } .mCSB_container { width: auto; overflow: hidden; } .mCSB_container.mCS_no_scrollbar { margin-right: 0; } .mCS_disabled > .mCustomScrollBox > .mCSB_container.mCS_no_scrollbar, .mCS_destroyed > .mCustomScrollBox > .mCSB_container.mCS_no_scrollbar { margin-right: 30px; } .mCustomScrollBox > .mCSB_scrollTools { width: 15px; height: 100%; top: 0; right: 0; display: block !important; } .mCSB_scrollTools .mCSB_draggerContainer { background: #d2d2d2; position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; padding: 0 0 6px; } .mCSB_scrollTools a + .mCSB_draggerContainer { margin: 0; } .mCSB_scrollTools .mCSB_draggerRail { width: 15px; height: 100%; margin: 0 auto; } .mCSB_scrollTools .mCSB_dragger { cursor: pointer; width: 100%; height: 30px; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 9px; height: 100%; margin: 3px auto 0; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown { display: block; position: relative; height: 20px; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown { top: 100%; margin-top: -40px; } /* horizontal scrollbar */ .mCSB_horizontal > .mCSB_container { height: auto; margin-right: 0; margin-bottom: 30px; overflow: hidden; } .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar { margin-bottom: 0; } .mCS_disabled > .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar, .mCS_destroyed > .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar { margin-right: 0; margin-bottom: 30px; } .mCSB_horizontal.mCustomScrollBox > .mCSB_scrollTools { width: 100%; height: 16px; top: auto; right: auto; bottom: 0; left: 0; overflow: hidden; } .mCSB_horizontal > .mCSB_scrollTools a + .mCSB_draggerContainer { margin: 0 20px; } .mCSB_horizontal > .mCSB_scrollTools .mCSB_draggerRail { width: 100%; height: 2px; margin: 7px 0; } .mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger { width: 30px; height: 100%; } .mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 4px; margin: 6px auto; } .mCSB_horizontal > .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_horizontal > .mCSB_scrollTools .mCSB_buttonRight { display: block; position: relative; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; float: left; } .mCSB_horizontal > .mCSB_scrollTools .mCSB_buttonRight { margin-left: -40px; float: right; } .mCustomScrollBox { -ms-touch-action: none; /*MSPointer events - direct all pointer events to js*/ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight { background-repeat: no-repeat; display: none; } .mCSB_scrollTools .mCSB_buttonUp { background-position: 0 0; } .mCSB_scrollTools .mCSB_buttonDown { background-position: 0 -20px; } .mCSB_scrollTools .mCSB_buttonLeft { background-position: 0 -40px; } .mCSB_scrollTools .mCSB_buttonRight { background-position: 0 -56px; } .mCS-dark-thin > .mCSB_scrollTools .mCSB_draggerRail { /* rgba fallback */ } .mCS-dark-thin > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 8px; background: #0b3290; /* rgba fallback */ } .mCS-dark-thin.mCSB_horizontal > .mCSB_scrollTools .mCSB_draggerRail { width: 100%; } .mCS-dark-thin.mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 2px; margin: 7px auto; } .mCS-dark-thin > .mCSB_scrollTools .mCSB_buttonUp { background-position: -80px 0; } .mCS-dark-thin > .mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -20px; } .mCS-dark-thin > .mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -40px; } .mCS-dark-thin > .mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -56px; } .mCS-dark-thin > .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background: #0b3290; } .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: #0b3290; } /* address ----------------------------------------*/ #proshop #searchAddressForm .searchAddressList dt { margin-top: 8px; background: url("../../img/i_search02.png") 0 0.1em no-repeat; padding-left: 26px; font-weight: 700; } #proshop #searchAddressForm .searchAddressList dd input[type="search"] { width: 390px; margin-top: 4px; padding: 4px 2px; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop #searchAddressForm .searchAddressList dd input[type="search"] { width: auto; } } #proshop #searchAddressForm .searchAddressList dt, #proshop #searchAddressForm .searchAddressList dd { text-align: left; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop #searchAddressForm .searchAddressList dt, #proshop #searchAddressForm .searchAddressList dd { text-align: center; } } /* prefecture ----------------------------------------*/ #proshop .prefecture #prefectureArea .gridSearchPrefecture05 { width: 101.7801%; margin-left: -1.7801%; } #proshop .prefecture #prefectureArea .gridSearchPrefecture05:before, #proshop .prefecture #prefectureArea .gridSearchPrefecture05:after { content: ""; display: table; } #proshop .prefecture #prefectureArea .gridSearchPrefecture05:after { clear: both; } #proshop .prefecture #prefectureArea .gridSearchPrefecture05 > * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 18.2199%; margin-left: 1.7801%; } #proshop .prefecture #prefectureArea .gridSearchPrefecture05 > *.gridCol02 { width: 38.2199%; } #proshop .prefecture #prefectureArea .gridSearchPrefecture05 > *.gridCol03 { width: 58.2199%; } #proshop .prefecture #prefectureArea .gridSearchPrefecture05 > *.gridCol04 { width: 78.2199%; } #proshop .prefecture #prefectureArea .gridSearchPrefecture05 > *.gridCol05 { width: 98.2199%; } #proshop .prefecture #prefectureArea .gridSearchPrefecture05 > *:first-child + * + * + * + * ~ * { margin-top: 5px; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .prefecture #prefectureArea .gridSearchPrefecture05 { width: 106.48464%; margin-left: -6.48464%; } #proshop .prefecture #prefectureArea .gridSearchPrefecture05:before, #proshop .prefecture #prefectureArea .gridSearchPrefecture05:after { content: ""; display: table; } #proshop .prefecture #prefectureArea .gridSearchPrefecture05:after { clear: both; } #proshop .prefecture #prefectureArea .gridSearchPrefecture05 > * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 43.51536%; margin-left: 6.48464%; } #proshop .prefecture #prefectureArea .gridSearchPrefecture05 > *.gridCol02 { width: 93.51536%; } #proshop .prefecture #prefectureArea .gridSearchPrefecture05 > *:first-child + * ~ * { margin-top: 5px; } } #proshop .prefecture #gMapArea { position: relative; padding: 0; } #proshop .prefecture #gMapArea #gMap { height: 700px; width: 100%; font-size: 0; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .prefecture #gMapArea #gMap { height: 280px; width: auto; } } /* map ----------------------------------------*/ #proshop .map #gMapArea { position: relative; padding: 0; } #proshop .map #gMapArea #gMap { height: 700px; width: 100%; font-size: 0; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .map #gMapArea #gMap { height: 280px; width: auto; } } #proshop td.icoLabo { padding-left: 76px; background: url("../img/i_labo01.png") 6px 50% no-repeat; background-size: 60px auto; } /* detail ----------------------------------------*/ #proshop .detail { margin-top: 0; } #proshop .detail .gridCenter { margin-left: auto; margin-right: auto; float: none; } #proshop .detail #detailTitleArea { overflow: hidden; margin: 0 -500% 18px; padding: 0 500%; background-color: #5570b2; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail #detailTitleArea { overflow: visible; } } #proshop .detail #detailTitleArea .detailTitleInner { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; background-color: #0b3290; padding: 23px 646px 16px 30px; min-height: 353px; color: #fff; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail #detailTitleArea .detailTitleInner { padding: 12px 22px 0 !important; min-height: inherit; } } #proshop .detail #detailTitleArea .detailTitleInner.nonPhoto { padding: 23px 646px 23px 30px; min-height: inherit; } #proshop .detail #detailTitleArea .detailTitleInner.nonPhoto .detailTitleMainImg { height: 230px; left: 450px; text-align: center; } #proshop .detail #detailTitleArea .detailTitleInner.nonPhoto .detailTitleMainImg:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; } #proshop .detail #detailTitleArea .detailTitleInner.nonPhoto .detailTitleMainImg > * { display: inline-block; vertical-align: middle; } #proshop .detail #detailTitleArea .detailTitleMessage p { padding:0 21px; text-align: left;} @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail #detailTitleArea .detailTitleMessage p {padding: 0; padding-top: 15px; padding-bottom: 40px} } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail #detailTitleArea .detailTitleInner.nonPhoto .detailTitleMainImg { height: auto; left: auto; padding-bottom: 36px; } } #proshop .detail #detailTitleArea .detailTitleInner.nonPhoto .detailTitleInfo { margin-top: 0; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail #detailTitleArea .detailTitleInner.nonPhoto .detailTitleInfo { margin-top: 8px; } } #proshop .detail #detailTitleArea .detailTitleLogo { text-align: center; } #proshop .detail #detailTitleArea .detailTitleInfo { text-align: center; margin-top: 15px; max-width: 460px; } #proshop .detail #detailTitleArea p.detailTitleLogo img { margin-top: -4px; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail #detailTitleArea .detailTitleInfo { margin-top: 8px; } } #proshop .detail #detailTitleArea .detailTitleInfo h2 b { font-size: 143%; font-weight: 700; display: block; line-height: 1.4; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail #detailTitleArea .detailTitleInfo h2 b { font-size: 129%; } } #proshop .detail #detailTitleArea .detailTitleInfo .detailTitleTel { display: inline-block; font-size: 186%; color: #fbf500; font-weight: 700; padding-left: 28px; background: url("../img/i_tel01.png") 0 0.24em no-repeat; } #proshop .detail #detailTitleArea .detailTitleInfo .detailTitleTel a { color: #fbf500; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail #detailTitleArea .detailTitleInfo .detailTitleTel { font-size: 171%; background-size: 19px auto; } } #proshop .detail #detailTitleArea .detailTitleMainImg { position: absolute; top: 0; left: 359px; height: 353px; } #proshop .detail #detailTitleArea .detailTitleMainImg img { position: absolute; top: -100%; bottom: -100%; width: 619px; height: auto; margin: auto 0; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail #detailTitleArea .detailTitleMainImg { width: 100%; text-align: center; position: static; top: auto; left: auto; height: auto; } #proshop .detail #detailTitleArea .detailTitleMainImg img { position: static; top: auto; bottom: auto; margin: 0 auto; } } #proshop .detail #detailTitleArea .detailTitleProduct { min-width: 346px; padding: 6px 0 4px 5px; position: absolute; top: 0; right: 5px; font-weight: 700; background-color: rgba(6, 25, 72, 0.6); -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail #detailTitleArea .detailTitleProduct { min-width: 346px; top: auto; bottom: 0px; left: -12px; right: -12px; height: auto; } } #proshop .detail #detailTitleArea .detailTitleProduct > dt { padding-left: 5px; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail #detailTitleArea .detailTitleProduct > dt { padding-top: 2px; font-size: 86%; } } #proshop .detail #detailTitleArea .detailTitleProduct [class^="ico"] { position: relative; padding-left: 24px; font-size: 86%; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail #detailTitleArea .detailTitleProduct [class^="ico"] { font-size: 71%; } } #proshop .detail #detailTitleArea .detailTitleProduct [class^="ico"]:before { position: absolute; top: -0.3em; bottom: 0; left: 0; width: 20px; height: 20px; margin: auto; font-weight: 700; text-align: center; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; line-height: 1.8; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail #detailTitleArea .detailTitleProduct [class^="ico"]:before { width: 16px; height: 16px; } } #proshop .detail #detailTitleArea .detailTitleProduct .icoEx:before { content: 'E'; background-color: #BC0A20; } #proshop .detail #detailTitleArea .detailTitleProduct .icoDiamond:before { content: 'D'; background-color: #bfa548; } #proshop .detail #detailTitleArea .detailTitleProduct .icoFresh:before { content: 'F'; background-color: #FFEE00; } #proshop .detail #detailTitleArea .detailTitleProduct .icoCrystal:before { content: 'C'; background-color: #1ba7d8; } #proshop .detail #detailTitleArea .detailTitleProduct .icoPure:before { content: 'P'; background-color: #eb6100; } #proshop .detail #detailTitleArea .detailTitleProduct .icoSp:before { content: 'S'; background-color: #76C305; } #proshop .detail #detailContestArea { position: relative; border: 2px solid #b09f42; padding: 2px; background-color: #e9debf; } #proshop .detail #detailContestArea .detailContestInner { background-color: #fff; padding: 14px 18px 14px; } #proshop .detail #detailContestArea .headingLv04 { border-top: 1px solid #b09f42; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y3ZjRkMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-linear-gradient(top, #f7f4d1, #ffffff 26px); background-image: -moz-linear-gradient(top, #f7f4d1, #ffffff 26px); background-image: linear-gradient(top, #f7f4d1, #ffffff 26px); filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFD9F1FF', endColorstr='#FFFFFFFF'); } #proshop .detail #detailContestArea .detailContestList li { border-bottom: 1px solid #b09f42; padding: 10px 6px 8px 40px; position: relative; } #proshop .detail #detailContestArea .detailContestList li:first-child { border-top: 1px solid #b09f42; } #proshop .detail #detailContestArea .detailContestList [class^="ico"]:before { content: ''; position: absolute; top: 0.4em; bottom: 0; left: 4px; display: block; width: 30px; height: 30px; } #proshop .detail #detailContestArea .detailContestList .icoRankEntry:before { background: url("../img/i_detail_contest_entry.png") 0 0 no-repeat; } #proshop .detail #detailContestArea .detailContestList .icoRank01:before { background: url("../img/i_detail_contest_rank01.png") 0 0 no-repeat; } #proshop .detail #detailContestArea .detailContestList .icoRank02:before { background: url("../img/i_detail_contest_rank02.png") 0 0 no-repeat; } #proshop .detail #detailContestArea .detailContestList .icoRank03:before { background: url("../img/i_detail_contest_rank03.png") 0 0 no-repeat; } #proshop .detail #detailContestArea .detailContestList .icoRank04:before { background: url("../img/i_detail_contest_rank04.png") 0 0 no-repeat; } #proshop .detail #detailAccessArea #gMap { height: 400px; width: 100%; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail #detailAccessArea #gMap { height: 280px; width: auto; } } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail #detailPhotologArea { margin-top: 20px !important; } } #proshop .detail #detailPhotologArea h3 { margin: -14px -18px 5px; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail #detailPhotologArea h3 { margin: -8px -10px 5px; } } #proshop .detail #detailPhotologArea .detailPhotologList > li:before, #proshop .detail #detailPhotologArea .detailPhotologList > li:after { content: ""; display: table; } #proshop .detail #detailPhotologArea .detailPhotologList > li:after { clear: both; } #proshop .detail #detailPhotologArea .detailPhotologList > li a { float: left; } #proshop .detail #detailPhotologArea .detailPhotologList > li dl { margin-left: 156px; } #proshop .detail #contactArea { padding: 14px 32px 18px; background-color: #e6eaf4; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail #contactArea { padding: 8px 16px 12px; } } #proshop .detail #contactArea .headingContact { background-color: #0b3290; color: #fff; font-size: 129%; font-weight: 700; text-align: center; margin: -14px -32px 18px; padding: 9px 12px 7px; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -ms-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail #contactArea .headingContact { margin: -8px -16px 12px; } } #proshop .detail #contactArea .contactList { vertical-align: middle; } #proshop .detail #contactArea .contactList li { vertical-align: middle; } #proshop .detail .sNavProshop { margin: 0 -500%; padding: 0 500%; background-color: #061948; position: relative; z-index: 2; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail .sNavProshop { display: none; position: relative; } } #proshop .detail .sNavProshop > ul { background-color: #061948; width: 100%; margin-left: 0%; } #proshop .detail .sNavProshop > ul:before, #proshop .detail .sNavProshop > ul:after { content: ""; display: table; } #proshop .detail .sNavProshop > ul:after { clear: both; } #proshop .detail .sNavProshop > ul > * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 20%; margin-left: 0%; } #proshop .detail .sNavProshop > ul > *.gridCol02 { width: 40%; } #proshop .detail .sNavProshop > ul > *.gridCol03 { width: 60%; } #proshop .detail .sNavProshop > ul > *.gridCol04 { width: 80%; } #proshop .detail .sNavProshop > ul > *.gridCol05 { width: 100%; } #proshop .detail .sNavProshop > ul > *:first-child + * + * + * + * ~ * { margin-top: 0px; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail .sNavProshop > ul > li { position: relative; float: none !important; width: auto !important; } } #proshop .detail .sNavProshop > ul > li > a { border-right: 1px solid #5b76b5; position: relative; color: #fff; text-align: center; display: block; padding: 12px 4px 16px; font-weight: 700; border-bottom: none; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail .sNavProshop > ul > li > a { padding: 12px 12px 10px; text-align: left; } } #proshop .detail .sNavProshop > ul > li > a:before { position: absolute; content: ''; bottom: 4px; left: 6px; right: 6px; border-top: 6px solid #8599c8; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop .detail .sNavProshop > ul > li > a:before { height: auto; left: 10px; right: 10px; border-top: 1px solid #4175f2; } } #proshop .detail .sNavProshop > ul > li > a:after { content: ''; position: absolute; bottom: -7px; right: 0; left: 0; height: 0px; width: 0px; margin: 0 auto; content: ""; position: absolute; border-top: 10px solid #061948; border-right: 6px solid transparent; border-bottom: 10px solid transparent; border-left: 6px solid transparent; } #proshop .detail .sNavProshop > ul > li > a.active, #proshop .detail .sNavProshop > ul > li > a:hover { color: #fbf500; } #proshop .detail .sNavProshop > ul > li > a.active:before, #proshop .detail .sNavProshop > ul > li > a:hover:before { border-top: 6px solid #fbf500; -webkit-transition-property: all; -moz-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; transition-timing-function: ease-out; } #proshop .detail .sNavProshop > ul > li > a.active + .mbDropdownBtn, #proshop .detail .sNavProshop > ul > li > a:hover + .mbDropdownBtn { background: #0a3190; } #proshop .detail .sNavProshop > ul > li > a.active + .mbDropdownBtn:after, #proshop .detail .sNavProshop > ul > li > a:hover + .mbDropdownBtn:after { content: ""; position: absolute; border-top: 9px solid white; border-right: 6px solid transparent; border-bottom: 9px solid transparent; border-left: 6px solid transparent; } #proshop .detail .sNavProshop > ul > li > a.active + .mbDropdownBtn.active:after, #proshop .detail .sNavProshop > ul > li > a:hover + .mbDropdownBtn.active:after { top: -12px; bottom: 0; content: ""; position: absolute; border-top: 9px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid white; border-left: 6px solid transparent; } #proshop .detail .sNavProshop > ul > li:first-child > a { border-left: 1px solid #5b76b5; } /*download*/ #proshop #download img { border: 1px solid #cccccc; margin-bottom: 4px; } #proshop #download dl { background: #EEE; padding: 20px; margin-top: 20px; } #proshop #download dl dt { font-weight: bold; font-size: 110%; } #detailPhotologArea { position: relative; background: #fff; padding: 14px 18px 18px; } /*custom*/ .shop_frame { padding-top: 2px; padding-bottom: 1px; padding-right: 1px; padding-left: 1px; border: 1px solid red; font-weight: bold; } .label-update-red { background: #E60012; display: inline-block; height: 13px; font-size: 12px; font-weight: normal; color: #fff; padding: .2em .6em; line-height: 1; border-radius: .25em; } /*2021 K*/ #proshop #detailCoatingArea ul.gridSection06, #proshop #detailServiceArea ul.gridSection06 { width: 100%; margin-left:0 } #proshop #detailCoatingArea .gridSection06:before, #proshop #detailCoatingArea .gridSection06:after { content: ""; display: table; } #proshop #detailCoatingArea .gridSection06:after { clear: both; } #proshop #detailCoatingArea .gridSection06 li{ box-sizing: border-box; float: left; width: 60px; margin-left:30px; } #proshop #detailServiceArea .gridSection06:before, #proshop #detailServiceArea .gridSection06:after { content: ""; display: table; } #proshop #detailServiceArea .gridSection06:after { clear: both; } #proshop #detailServiceArea .gridSection06 li{ box-sizing: border-box; float: left; width: 60px; margin-left:30px; } #reserve_area.pc { margin-top: 15px; } #reserve_area.sp, #shop_contact_area.sp, #pro_shop_blog.sp, #detailPhotologArea.sp { display: none; } @media screen and (min-width: 0px) and (max-width: 667px) { #proshop #detailCoatingArea ul.gridSection06, #proshop #detailServiceArea ul.gridSection06 { width: 88%; margin-left: 0; display: inline-block; } #proshop #detailCoatingArea .gridSection06 li{ margin: 0 4% 6% 4%; } #proshop #detailServiceArea .gridSection06 li{ margin: 0 4% 0 4%; } #reserve_area.sp, #shop_contact_area.sp, #pro_shop_blog.sp, #detailPhotologArea.sp { display: block; } #reserve_area.pc, #shop_contact_area.pc, #pro_shop_blog.pc, #detailPhotologArea.pc { display: none; } } .reserve_status { padding: 0.5em 1em; margin: 2em 0; color: #333; font-size: 15.5px; font-weight: bold; } .go_reserve_admin { padding: 0.5em 1em; margin: 2em 0; color: #FFF; background: #6eb7ff; border-bottom: solid 6px #3f87ce; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); border-radius: 9px; } .web_reserve_information { max-width: 281px; padding: 8px; margin: 10px auto 0; border: 3px #0b3290 double; font-size: 13px; word-break: break-all; }