@charset "utf-8"; /************************************************************ * 初期化 ************************************************************/ body, form, img, div, p, ol, ul, li, dl, dt, dd, h1, h2, h3, h4, table,td ,select { margin: 0; padding: 0; -webkit-text-size-adjust:none; } ul { list-style: none; } img { border: none; vertical-align: bottom; } table { border-spacing: 0; } /* clearfix */ .cFix:after { content: ""; display: block; clear: both; height: 0; visibility: hidden; } .cFix { min-height: 1px; _height: 1px; } /************************************************************ * アンカー ************************************************************/ a { text-decoration: none; } a:link { color: #4c4c80; } a:visited { color: #896958; } a:hover, a:active { color: #7878CC; text-decoration: underline; } a.fgBGray:link { color: #435b67; } a .imgFrame { -webkit-transition: border .2s linear; -moz-transition: border .2s linear; -ms-transition: border .2s linear; -o-transition: border .2s linear; transition: border .2s linear; } a:hover .imgFrame { border: 1px solid #999999; -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .05); } .imgFrame { border: 1px solid #EEEEEE; padding: 1px; } /************************************************************ * フォント ************************************************************/ body, input, select, table, td, li ,a { font-family: 'メイリオ', Meiryo, 'MS Pゴシック', 'MS P Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', arial, sans-serif, verdana, Helvetica; } body, input, select, table { color: #333333; font-size: 12px; line-height: 1.5; } h1, h2 { font-size: 12px; } .fFg { font-family: 'メイリオ', Meiryo, 'MS Pゴシック', 'MS P Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', arial, sans-serif, verdana, Helvetica; } .fFm { font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','MS Pゴシック',MS PGothic,sans-serif; } /************************************************************ * IDS ************************************************************/ /* ヘッダー */ #headerWrapper { border-bottom: 2px solid #998a8a; border-top: 16px solid #BFB4AB; zoom: 1; } #header { width: 1000px; margin: 0 auto -2px; position: relative; border-bottom: 2px solid #998a8a; } #headSummary { font-size: 10px; font-weight: normal; color: #FFFFFF; padding-left: 18px; margin-top: -16px; position: absolute; } #logoNavi { height: 68px; position: relative; z-index: 0; } #logo { position: absolute; top: 9px; left: 12px; z-index: 0; } .user { position: absolute; top: 0; right: 20px; line-height: 33px; z-index: 1; } .user .arrowR { display: inline-block; background-position: -196px -234px; background-repeat: no-repeat; } .move { position: absolute; bottom: -2px; _bottom: -3px; right: 20px; z-index: 3; } /* ラッパー */ #wrapper { width: 1000px; margin: 0 auto; position: relative; } /* プレコンテンツ */ #preContents { padding: 0 20px; } .preCotentsLink { float: right; text-align: right; margin-top: 8px; width: 180px; } /* コンテンツ */ #contents { padding: 0 20px; min-height: 300px; _height: 300px; } #mainContents { float: left; width: 960px; } .maincatch{ height: 44px; position: relative; z-index: 0; } .maincatchLink{ position: absolute; top: 0px; right: 0px; z-index: 1; } .mainLink{ position: absolute; bottom: 0px; right: 0px; z-index: 1; } .mainSubtilte{ position: absolute; bottom: 0px; z-index: 1; } #sideContents { float: right; width: 180px; letter-spacing: -1px; } /* マイエリア */ #myMenu { background-position: -5430px 0; background-repeat: repeat-y; } #myMenuHead { background-position: -5070px top; background-repeat: no-repeat; } #myMenuBottom { background-position: -5250px bottom; background-repeat: no-repeat; padding: 4px 4px 7px; zoom: 1; } .bookmarkList dd{ padding-left: 8px; margin-bottom: 3px; } .bookmarkList dd:last-child{ margin-bottom: 0; } /* フッター */ .footerwrapper { background:#f6f4f3 url("/CSP/img/top/bg_footerwrapper.gif?switch=2026110215") top; background-repeat: repeat-x; } #copyright { position: absolute; top: 10px; left: 30px; } #footerLinks { font-size: 10px; overflow: hidden; position: absolute; top: 20px; right: 30px; } #footerLinks li { float: left; border-right: 1px solid #DDD; padding-right: 15px; *padding-right: 16px; margin-left: 15px; margin-right: -1px; } /************************************************************ * CLASSES(コンポーネント) ************************************************************/ /* メインコンテンツフッター */ .mainContentsFooter { width: 1000px; margin: 0 auto; } /* メインコンテンツフッターリンク */ .mainContentsFooterLinks { padding-top: 30px; margin: 0px 20px; } .mainContentsFooterLinks2 { padding-top: 15px; margin: 15px 20px 0px; background: url("/CSP/img/top/all_companies_border.gif?switch=2026110215"); background-repeat: repeat-x; background-position: top; } .mainContentsFooterLinks li:first-child { display: block; font-weight: bold; font-size: 12px; color: #CCCCCC; margin: 3px 0px; } .mainContentsFooterLinks li { display: inline; font-size: 10px; color: #4c4c80; line-height: 20px; } .mainContentsFooterLinks2 li { display: inline; font-size: 10px; color: #4c4c80; line-height: 20px; } .mainContentsFooterLinks3 ul { overflow: hidden; } .mainContentsFooterLinks3 li { border-left: 1px solid #CCC; color: #333; display: inline-block; font-size: 10px; margin-left: -10px; padding: 0 20px 0 10px; } /* メインコンテンツフッターバナー */ .mainContentsFooterBanners { margin-top: 20px; } .mainContentsFooterBanners li { float: left; margin-top: 10px; margin-right: 10px; } /* SEOリンク */ .seoLinkList { margin-top: 20px; } .seoLinkList li { display: inline; font-size: 10px; color: #CCC; } /* ジャンルボックス */ .topGenreBox { background: url("/CSP/img/bt/map/bg/bg_topGenereBox.gif?switch=2026110215"); background-repeat: repeat-y; } .topGenreBoxHead { background: url("/CSP/img/bt/map/bg/bg_topGenereBoxHead.gif?switch=2026110215") top no-repeat; } .topGenreBoxBottom { background: url("/CSP/img/bt/map/bg/bg_topGenereBoxBottom.gif?switch=2026110215") bottom no-repeat; padding: 7px; overflow: hidden; position: relative; z-index: 10; zoom:1; } /* マイエリア */ .myMenuTop { background-position: -900px -20px; } .myMenuTopTitle { height: 29px; margin: 0 4px; } .txtMypage { background-position: -1100px -20px; width: 73px; height: 13px; } .myMenuTopBody { padding: 0 5px; text-align: center; } .myMenuTitle { margin: 10px 5px 0; } .txtPoint { background-position: -1100px -20px; background-repeat: no-repeat; width: 49px; height: 13px; } .txtLastReservedSalon { background-position: -1100px -40px; background-repeat: no-repeat; width: 116px; height: 13px; } .txtLastViewedSalon { background-position: -1100px -60px; background-repeat: no-repeat; width: 90px; height: 13px; } .txtMyMenu { background-position: -1100px -80px; background-repeat: no-repeat; width: 77px; height: 12px; } .txtInformation { background-position: -1100px -100px; background-repeat: no-repeat; width: 49px; height: 13px; } .myMenuBodyUnlogined { background-position: -7240px 0; background-repeat: repeat-y; margin-top: 10px; } .myMenuBodyHeadUnlogined { background-position: -7412px top; background-repeat: no-repeat; } .myMenuBodyBottomUnlogined { background-position: -7584px bottom; background-repeat: no-repeat; padding: 7px 8px; overflow: hidden; position: relative; z-index: 10; zoom:1; } .myMenuBodyUnlogined .arrowR { background-position: -196px -3506px !important; } .myMenuBody { background-position: -5954px 0; background-repeat: repeat-y; margin-top: 10px; } .myMenuBodyHead { background-position: -5610px top; background-repeat: no-repeat; } .myMenuBodyBottom { background-position: -5782px bottom; background-repeat: no-repeat; padding: 7px 8px; overflow: hidden; position: relative; z-index: 10; zoom:1; } .myMenuMainBox { background-position: -5782px bottom; background-repeat: no-repeat; padding-left: 5px; padding-right: 5px; padding-top: 10px; overflow: hidden; position: relative; z-index: 10; zoom:1; } .myMenuList { margin-top: -13px; zoom:1; } .myMenuListCassette { padding-top: 5px; margin-top: 5px; border-top: 1px dotted #999999; position: relative; zoom: 1; z-index: 0; } .myMenuItems { margin-top: -10px; zoom: 1; } .myMenuItemsCassette { padding-bottom: 10px; position: relative; zoom: 1; z-index: 0; } .myMenuListBottom { margin-top: 5px; padding-top: 5px; border-top: 2px solid #D9D9D9; } .iconReserve { color: #FFF; background-color: #CC0000; font-size: 9px; padding: 1px 4px; margin-right: 5px; } .iconBrown { background-color: #AA3355; color: #FFF; text-align: center; font-size: 10px; margin-right: 5px; } .iconPurple { background-color:DarkMagenta; color: #FFF; text-align: center; font-size: 10px; margin-right: 5px; } .myPointBody a{ text-decoration: none; color: #4c4c80; } .myPointBody a:hover{ color: #7878CC; text-decoration: underline; } .grayPointBody p{ color:#FFF; letter-spacing: normal; line-height: 120%; font-size: 10px; font-family: 'メイリオ', 'Meiryo', 'MS Pゴシック', 'MS P Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', arial, sans-serif, verdana, Helvetica; } .grayPointBody p span, .usePointBody p span{ font-size:16px; line-height: 110% } .alertRed, .usePointBody p a.alertRed, .myPointBody .alertRed { color:#DD0000; } .usePointBody p a{ font-weight: bold; text-decoration: none; color: #4c4c80; } .usePointBody p a:hover{ text-decoration: underline; } /* 検索ボックス */ .searchBox { float: right; width: 328px; height: 24px; background-position: 0 -260px; } .findBySalon { background-position: -400px -260px; width: 88px; height: 11px; } .inputSalonName { border: 1px solid #CCCCCC; border-radius: 4px; box-sizing: border-box; font-size: 12px; height: 24px; line-height: 24px; width: 257px; } .inputSalonName::placeholder { color: #909090; } :root .inputSalonName { line-height: normal; } .hint { color: #C0C0C0; } /* ショートカットリンク */ .sideShortcutSearchBox { margin-top: -1px; } .sideShortcutSearchCassette { border-top: 1px dotted #CCCCCC; padding-top: 10px; margin-bottom: 10px; } /* プライバシーマーク */ .privacyMarkCaption { width: 105px; font-size: 10px; } /* 白背景画像用ボーダー */ .bdImgGray { border: 1px solid #EEE; } /*a:hover .bdImgGray { border: 2px solid #F47892; }*/ /* インフォメーション */ .infoList { margin-top: 15px; } .infoListCassette { padding: 0px 20px; } /* フォーム系 */ .tfF { border-top: 1px solid #8E8E8E; border-right: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; border-left: 1px solid #8E8E8E; } .taF { border-top: 1px solid #8E8E8E; border-right: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; border-left: 1px solid #8E8E8E; } .pdF { border-top: 1px solid #8E8E8E; border-right: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; border-left: 1px solid #8E8E8E; } .cbF { *width: 1.5em; height: 1.5em; vertical-align: middle; margin: 0 5px 0 5px; *margin: 0 2px 0 3px; padding: 0; } .sbmF { cursor: pointer; } /* 見出し */ .boxTitle { color: #88796B; font-weight: bold; font-size: 14px; line-height: 1; } .boxTitle h2 { font-size: 14px; } .boxTitle a { font-size: 12px; font-weight: normal; line-height: 1.5; } .skinHeadingWrapper { height: 12px; border-bottom: 1px solid #959595; background: url(/CSP/img/bt/icons/icon_heading_bt.png?switch=2026110215) no-repeat 0 0; padding-left: 24px; padding-bottom: 9px; line-height: 16px; } .skinHeadingWrapper1 { height: 12px; border-bottom: 1px solid #959595; background: url(/CSP/img/bt/icons/icon_heading_bt.png?switch=2026110215) no-repeat 0 0; padding-left: 24px; padding-bottom: 9px; line-height: 16px; /*display:none;*/ /*ヘアカタログサイト時使用*/ } .skinHeadingWrapper2 { height: 12px; border-bottom: 1px solid #959595; background: url(/CSP/img/bt/icons/icon_heading_bt.png?switch=2026110215) no-repeat 0 0; padding-left: 24px; padding-bottom: 9px; line-height: 16px; display:none; /*総合、全国トップ時使用*/ } .skinHeadingWrapper h3, .skinHeadingWrapper1 h3, .skinHeadingWrapper2 h3 { font-size:13px; color:#444444; font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'MS Pゴシック', 'MS P Gothic', 'Osaka', arial, sans-serif, verdana, Helvetica; } /* 見出しの画像テキスト */ /* ↓削除予定↓ */ .headingHairCatalog { background: url(/CSP/img/reserve/hair_catalog.png?switch=2026110215) no-repeat 0 0; width: 171px; height: 18px; } .headingContents { background: url(/CSP/img/reserve/contents.png?switch=2026110215) no-repeat 0 0; width: 170px; height: 15px; } .headingBeautySelection { background: url(/CSP/img/reserve/beauty_selection.png?switch=2026110215) no-repeat 0 0; width: 268px; height: 18px; } .headingCampaign { background: url(/CSP/img/reserve/campaign.png?switch=2026110215) no-repeat 0 0; width: 150px; height: 18px; } .headingInformation { background: url(/CSP/img/reserve/information.png?switch=2026110215) no-repeat 0 0; width: 139px; height: 15px; } .headingReview { background: url(/CSP/img/reserve/review.png?switch=2026110215) no-repeat 0 0; width: 114px; height: 15px; } /* ↑削除予定↑ */ /* 背景 */ .insertArea { background-position: -900px -340px; display: block; width:190px; height:300px; } .ranking1Small { background-position: 0 -320px; width: 46px; height: 16px; } .ranking2Small { background-position: -60px -320px; width: 46px; height: 16px; } .ranking3Small { background-position: -120px -320px; width: 46px; height: 16px; } .ranking4Small { background-position: -180px -320px; width: 46px; height: 16px; } .ranking5Small { background-position: -240px -320px; width: 46px; height: 16px; } /* 地図 */ .bgSalonMap { width: 421px; height: 358px; position: relative; z-index: 0; } /* ヘアカタログタブ */ .hairStyleTabLinks { min-height: 57px !important; _height: 57px !important; } .hairStyleTabLinks2 { min-height: 28px !important; _height: 28px !important; } .tabSliderWrapper { overflow-x: hidden; overflow-y: hidden; position: relative; zoom: 1 !important; width: 556px; } .tabSlider { position: relative; left: 0; width: 1136px; } .tabContent { width: 547px; } /* 性別判定モーダル */ .genderSelect { background-color: #BFB4AB; border-radius: 6px; left: 100px; padding: 15px; position: absolute; top: 35px; width: 770px; z-index: 100; } .genderSelectCnt { background-color: #FFFFFF; position: relative; } .genderSelectCnt:before, .genderSelectCnt:after { background: url(/CSP/img/bt/sprites/selectGenderSet.png?switch=2026110215) no-repeat; content: ""; display: block; height: 224px; position: absolute; width: 205px; } .genderSelectCnt:before { background-position: 0 0; left: 14px; top: 15px; } .genderSelectCnt:after { background-position: -515px 0; right: 35px; top: 15px; } .genderSelectCntInner { margin: 0 auto; padding: 10px 20px 10px 0; text-align: center; width: 335px; } .genderSelectCntInner:before, .genderSelectCntInner:after { border-color: transparent; border-style: solid; content: ""; display: block; height: 0; position: absolute; right: 0; top: 0; width: 0; } .genderSelectCntInner:before { border-left-color: #E6E6E6; border-width: 35px 0 0 35px; } .genderSelectCntInner:after { border-right-color: #BFB4AB; border-width: 0 35px 35px 0; } .genderSelectTtl { border-bottom: 1px solid #BFB4AB; color: #665555; font-size: 16px; font-weight: bold; padding-bottom: 6px; } .genderSelectLead { color: #665555; display: inline-block; font-size: 12px; font-weight: bold; margin-top: 15px; padding: 0 15px; position: relative; } .genderSelectLead:before, .genderSelectLead:after { background-color: #665555; border-radius: 3px; content: ""; display: block; height: 17px; position: absolute; width: 2px; } .genderSelectLead:before { left: 0; top: 0; -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } .genderSelectLead:after { right: 0; top: 0; -webkit-transform: rotate(20deg); transform: rotate(20deg); } .genderBtnWrap { font-size: 0; margin-top: 10px; position: relative; text-align: center; } .genderBtn { border: 1px solid #FFFFFF; border-radius: 5px; box-sizing: border-box; color: #FFFFFF !important; display: inline-block; font-size: 13px; font-weight: bold; padding: 9px 10px 7px; text-align: center; width: 160px; } .genderBtn + .genderBtn { margin-left: 15px; } .genderLadies { background-color: #E25983; border: solid #D43666; border-width: 0 0 3px 0; } .genderMens { background-color: #0F94D2; border: solid #0867A9; border-width: 0 0 3px 0; } .genderBtn:hover { -ms-filter: alpha(opacity="70"); filter: alpha(opacity="70"); opacity: 0.7; text-decoration: none; } .genderSelectCloseBtn { background-color: #BFB4AB; border-radius: 6px; float: right; height: 30px; position: relative; right: -15px; top: -15px; width: 30px; z-index: 1; } .genderSelectCloseBtn:before, .genderSelectCloseBtn:after { background-color: #FFFFFF; border-radius: 3px; content: ""; display: block; height: 20px; position: absolute; right: 17px; top: 9px; width: 2px; } .genderSelectCloseBtn:before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .genderSelectCloseBtn:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .genderSelectCloseBtn > a { position: relative; display: block; height: 100%; width: 100%; z-index: 101; } .genderSelectLeadList { margin: 8px auto 0; text-align: left; width: 300px; } .genderSelectLeadList li { color: #665555; font-size: 13px; } .genderSelectLeadList li + li { margin-top: 2px; } .genderSelectImg { margin-top: 10px; } /************************************************************ * スプライト画像 - 横長画像(y.png) ************************************************************/ .yS { background-image: url(/CSP/img/bt/sprites/y.png?switch=2026110215); } /* 見出し */ .mainContentsTitleNHOuter { background-position: -6126px top; background-repeat: no-repeat; background-color: #AA3355; } .mainContentsTitleNHInner { background-position: -6683px bottom; background-repeat: no-repeat; color: #FFFFFF; font-size: 16px; padding: 8px 10px; } .mainContentsTitleNHInner h2 { font-size: 16px; } .mainContentsTitleNHInner h3 { font-size: 16px; } .mainContentsTitleNOuter { background-position: -6126px top; background-repeat: no-repeat; background-color: #AA3355; } .mainContentsTitleNInner { background-position: -6683px bottom; background-repeat: no-repeat; color: #FFFFFF; font-size: 14px; padding: 6px 10px; } .mainContentsTitleNInner h2 { font-size: 16px; } /************************************************************ * スプライト画像 - 横長画像(y2.png) ************************************************************/ .y2S { background-image: url(/CSP/img/bt/sprites/y2.png?switch=2026110215); } /* ランキングボックス */ .rankingBox { background-position: -5262px 0; background-repeat: repeat-y; } .rankingBoxHead { background-position: -5368px top; background-repeat: no-repeat; } .rankingBoxBottom { background-position: -5474px bottom; background-repeat: no-repeat; padding: 7px; overflow: hidden; position: relative; z-index: 10; zoom:1; } /************************************************************ * スプライト画像 - 横長画像(y3.png) ************************************************************/ .y3S { background-image: url(/CSP/img/bt/sprites/y3.png?switch=2026110215); background-color: transparent;} .otherGenreAreaTopBT { background-position: -2919px top; background-repeat: no-repeat; } .otherGenreAreaBottomBT { background-position: -3575px bottom; background-repeat: no-repeat; padding-left: 7px; padding-right: 5px; padding-top: 4px; } .otherGenreAreaKR { background-position: -4231px 0; background-repeat: repeat-y; overflow: hidden; } .otherGenreAreaTopKR { background-position: -3903px top; background-repeat: no-repeat; } .otherGenreAreaBottomKR { background-position: -4559px bottom; background-repeat: no-repeat; padding-left: 7px; padding-right: 5px; padding-top: 4px; } /************************************************************ * スプライト画像 - 横長画像(y4.png) ************************************************************/ .y4S { background-image: url(/CSP/img/bt/sprites/y4.png?switch=2026110215);} .grayPointBodyHead {background-position: -324px top; background-repeat: no-repeat; padding-top: 6px;} .grayPointBodyBox {background-position: -648px bottom; background-repeat: no-repeat; padding-bottom: 6px;} .grayPointBody{ background-position: -486px 0; background-repeat: repeat-y; padding-left: 5px; padding-right: 5px; padding-top: 1px; } .usePointBodyBox {background-position: -162px bottom; background-repeat: no-repeat; padding-bottom: 6px;} .usePointBody{ background-position: 0 0; background-repeat: repeat-y; padding-left: 5px; padding-right: 5px; padding-top: 7px; } /************************************************************ * CLASSES(プロパティ) ************************************************************/ /* WIDTH */ .wFull { width: 100%; } .wHalf { width: 49.9%; _width: 49.9%; } .w66 { width: 66px; } .w79 { width: 79px; } .w81 { width: 81px; } .w89 { width: 89px; } .w94 { width: 94px; } .w98 { width: 98px; } .w100 { width: 100px; } .w104 { width: 104px; } .w106 { width: 106px; } .w130 { width: 130px; } .w141 { width: 141px; } .w150 { width: 150px; } .w154 { width: 154px; } .w158 { width: 158px; } .w159 { width: 159px; } .w160 { width: 160px; } .w172 { width: 178px; } .w180 { width: 180px; } .w183 { width: 183px; } .w185 { width: 185px; } .w188 { width: 188px; } .w191 { width: 191px; } .w200 { width: 200px; } .w250 { width: 250px; } .w260 { width: 260px; } .w273 { width: 273px; } .w300 { width: 300px; } .w306 { width: 306px; } .w316 { width: 316px; } .w328 { width: 328px; } .w343 { width: 343px; } .w358 { width: 358px; } .w360 { width: 360px; } .w371 { width: 371px; } .w377 { width: 377px; } .w382 { width: 382px; } .w383 { width: 383px; } .w385 { width: 385px; } .w421 { width: 421px; } .w422 { width: 422px; } .w454 { width: 454px; } .w460 { width: 460px; } .w470 { width: 470px; } .w480 { width: 480px; } .w550 { width: 550px; } .w557 { width: 557px; } .w558 { width: 558px; } .w749 { width: 749px; } .w780 { width: 780px; } /* HEIGHT */ .h24 { height: 24px; } .h31 { height: 31px; } .h50 { height: 50px; } .h88 { height: 88px; } .h135 { height: 135px; } .h138 { height: 138px; } .h156 { height: 156px; } .h173 { height: 173px; } .h178 { height: 178px; } .h180 { height: 180px; } .h197 { height: 197px; } .h200 { height: 200px; } /* LINE-HEIGHT */ .lhDe { line-height: 1; } .lh14 { line-height: 14px; } .lh16 { line-height: 16px; } .lh19 { line-height: 19px; } .lh24 { line-height: 24px; } .lh130 { line-height: 130%; } /* MARGIN */ .mTN1 { margin-top: -1px; } .mTN20 { margin-top: -20px; } .mT1 { margin-top: 1px; } .mT2 { margin-top: 2px; } .mT3 { margin-top: 3px; } .mT4 { margin-top: 4px; } .mT5 { margin-top: 5px; } .mT6 { margin-top: 6px; } .mT7 { margin-top: 7px; } .mT8 { margin-top: 8px; } .mT9 { margin-top: 9px; } .mT10 { margin-top: 10px; } .mT11 { margin-top: 11px; } .mT12 { margin-top: 12px; } .mT13 { margin-top: 13px; } .mT14 { margin-top: 14px; } .mT15 { margin-top: 15px; } .mT18 { margin-top: 18px; } .mT20 { margin-top: 20px; } .mT25 { margin-top: 25px; } .mT30 { margin-top: 30px; } .mT36 { margin-top: 36px; } .mT37 { margin-top: 37px; } .mT38 { margin-top: 38px; } .mT39 { margin-top: 39px; } .mT40 { margin-top: 40px; } .mT0 { margin-top: 0px !important;} .mR1 { margin-right: 1px; } .mR5 { margin-right: 5px; } .mR9 { margin-right: 9px; } .mR10 { margin-right: 10px; } .mR15 { margin-right: 15px; } .mR20 { margin-right: 20px; } .mR25 { margin-right: 25px; } .mR30 { margin-right: 30px; } .mR40 { margin-right: 40px; } .mLN4 { margin-left: -4px; } .mL3 { margin-left: 3px; } .mL4 { margin-left: 4px; } .mL5 { margin-left: 5px; } .mL10 { margin-left: 10px; } .mL15 { margin-left: 15px; } .mL20 { margin-left: 20px; } .mL25 { margin-left: 25px; } .mL30 { margin-left: 30px; } .mL90 { margin-left: 90px; } .mB0 { margin-bottom: 0px !important;} .mB3 { margin-bottom: 3px; } .mB5 { margin-bottom: 5px; } .mBN6 { margin-bottom: -6px; } .mB10 { margin-bottom: 10px; } .mB15 { margin-bottom: 15px; } .mB20 { margin-bottom: 20px; } .mB30 { margin-bottom: 30px; } .mB40 { margin-bottom: 40px; } .mHA { margin-left: auto; margin-right: auto; } /* PADDING */ .pT2 { padding-top: 2px; } .pT3 { padding-top: 3px; } .pT4 { padding-top: 4px; } .pT5 { padding-top: 5px; } .pT7 { padding-top: 7px; } .pT8 { padding-top: 8px; } .pT10 { padding-top: 10px; } .pT15 { padding-top: 15px; } .pT20 { padding-top: 20px; } .pT30 { padding-top: 30px; } .pR2 { padding-right: 2px; } .pR5 { padding-right: 5px; } .pR10 { padding-right: 10px; } .pR15 { padding-right: 15px; } .pR20 { padding-right: 20px; } .pR30 { padding-right: 30px; } .pB2 { padding-bottom: 2px; } .pB3 { padding-bottom: 3px; } .pB4 { padding-bottom: 4px; } .pB5 { padding-bottom: 5px; } .pB10 { padding-bottom: 10px; } .pB15 { padding-bottom: 15px; } .pB20 { padding-bottom: 20px; } .pB30 { padding-bottom: 30px; } .pB40 { padding-bottom: 40px; } .pL5 { padding-left: 5px; } .pL10 { padding-left: 10px; } .pL15 { padding-left: 15px; } .pL20 { padding-left: 20px; } .pL22 { padding-left: 22px; } .pL30 { padding-left: 30px; } .pV5 { padding-top: 5px; padding-bottom: 5px; } .pV10 { padding-top: 10px; padding-bottom: 10px; } .pV15 { padding-top: 15px; padding-bottom: 15px; } .pV20 { padding-top: 20px; padding-bottom: 20px; } .pH5 { padding-left: 5px; padding-right: 5px; } .pH10 { padding-left: 10px; padding-right: 10px; } .pH15 { padding-left: 15px; padding-right: 15px; } .pH20 { padding-left: 20px; padding-right: 20px; } .p3 { padding: 3px; } .p5 { padding: 5px; } .p8 { padding: 8px; } .p10 { padding: 10px; } .p15 { padding: 15px; } .p20 { padding: 20px; } .p30 { padding: 30px; } .pClear { padding: 0 !important; } /* DISPLAY */ .dn { display: none !important; } .db { display: block; } .di { display: inline; } .dib { display: inline-block !important; } .dibBL { display: inline-block !important; *display: inline !important; zoom: 1; } .offL { text-indent: -9999px; overflow: hidden; } .fgClear{ font-size: 0; line-height: 0; } .oh { overflow: hidden; } .zoom1 { zoom: 1; } .nowrap { white-space: nowrap; } .wwbw { word-wrap: break-word; } .tdn{text-decoration: none !important;} /* POSITION */ .fl { float: left; } .fr { float: right; } .taL { text-align: left !important; } .taR { text-align: right !important; } .taC { text-align: center !important; } .vaT { vertical-align: top; } .vaM { vertical-align: middle; } .pr { position: relative; } .pa { position: absolute; } .top0 { top: 0; } .top5 { top: 5px; } .top8 { top: 8px; } .top10 { top: 10px; } .top15 { top: 15px; } .top20 { top: 20px; } .topN20 { top: -20px; } .topHalf { top: 50%; margin-top: -8px; } .topHalfH24 { top: 50%; margin-top: -12px; } .left0 { left: 0; } .left5 { left: 5px; } .left10 { left: 10px; } .left15 { left: 15px; } .left20 { left: 20px; } .left210 { left: 210px; } .right0 { right: 0; } .right5 { right: 5px; } .right8 { right: 8px; } .right10 { right: 10px; } .right15 { right: 15px; } .right20 { right: 20px; } .bottom0 { bottom: 0; } .bottom5 { bottom: 5px; } .bottom10 { bottom: 10px; } .bottom15 { bottom: 15px; } .bottom20 { bottom: 20px; } .zi0 { z-index: 0; } .zi1 { z-index: 1; } /* FOREGROUNG */ .fgRed { color: #FF0000; } .fgWRed { color: #A5184B; } .fgPink { color: #CC4466; } .fgGray { color: #817162; } .fgDGray { color: #333333; } .fgHGray{ color: #666666; } .fgLGray{ color: #999999; } .fgLLGray{ color: #595959; } .fgBlack{ color: #555555; } .fgPurple{ color: #964E95; } .fgWhite{ color: #FFFFFF; } .b { font-weight: bold !important; } .n { font-weight: normal !important; } .fs9 { font-size: 9px; } .fs10 { font-size: 10px; } .fs12 { font-size: 12px; } .fs14 { font-size: 14px; } .fs16 { font-size: 16px; } /* BACKGROUNG */ .bgGray { background-color: #FAF9F1; } .bgGray2{ background-color: #D9D9D9; } .bgLGray5 { background-color: #DDDDDD; } .bgPink3{ background-color: #FFE6E6; } .bgWRed { background-color: #AA3355; } /* BORDER */ .sp { border-right: 1px solid #CCC; margin-right: 10px; padding-right: 10px; } .sp_l { border-left: 1px solid #CCC; margin-left: 10px; padding-left: 10px; } .bdGray { border: 1px solid #DDDDDD; } .bdGrayT { border-top: 1px solid #999999; } .bdDotGrayT { border-top: 1px dotted #999999; } .bdDotGrayB { border-bottom: 1px dotted #999999; } .bdGrayR { border-right: 1px solid #DDDDDD; } .bdPink { border: 1px solid #FF7799; } .bdDPink { border: 1px solid #E6BBBB; } .bdDPinkB { border-bottom: 1px solid #E6BBBB; } .bdDotPinkB { border-bottom: 1px dotted #E6BBBB; } .bdDotPurpleB { border-bottom: 1px dotted #A36FA2; } .fgOrange {color: #E46C0A;} /****** 追加 ********************************************************/ .iS { background-image: url(/CSP/img/bt/sprites/i.png?switch=2026110215) !important; background-repeat: no-repeat; } .newS { background-position: -178px -1540px; width: 22px; height: 11px; margin-left: 5px; } .arrowR { background-position: -196px -240px; display: inline-block; padding-left: 8px; } .arrowROff { background-position: -196px -460px; display: inline-block; padding-left: 8px; } .pcweb { background-position: -183px -4877px; } .point { background-position: -183px -5030px; } .balloon{ background-position: -183px -5079px; } .rPoint{background-position: -187px -5200px; padding-left: 17px; height: 13px;} .alertIcon{background-position: -185px -5236px; padding-left: 18px; height: 14px; display: inline-block;} /* WIDTH */ .w118 { width: 118px; } .w100m { min-width: 100px; _width: 100px; } .w300 { width: 300px; } /* BACKGROUNG */ .bgWhite2 { background-color: #F6F3E3; } .bgLLPink { background-color: #FFEDF0; } /* BORDER */ .bdPink3 { border: 1px solid #E6BBBB; } #bottomSummary { color:#666666; text-align:right; margin-right: 20px } /* 検索ボックス ワードアシスト例 */ .wordAssistExPanel { border: 1px solid #BEB09E; color: #444444; display: none; font-size: 13px; position: absolute; width: 255px; z-index: 11; } .wordAssistExList li { display: inline-block; padding-right: 10px; vertical-align: baseline; } .btnCloseWrap { background-color: #F0EBE5; border-top: 1px solid #BEB09E; cursor: pointer; padding-top: 5px; padding-bottom: 5px; text-align: center; } .closeText { background: url(../../../CSP/img/hc/icons/icon_tb_close.png?switch=2026110215) no-repeat left center; color: #BFB4AB; font-weight: bold; font-size: 14px; padding-left: 20px; text-decoration: none; } .btnCloseWrap a:link, .btnCloseWrap a:hover, .btnCloseWrap a:visited, .btnCloseWrap a:active { color: #BFB4AB; } /* フッターリンク */ .footerLink { margin-top: 20px; position: relative; } .pageTopLink{ position: absolute; right: 0px; } .inService { background: url("/CSP/img/common/hed_service_new.gif?switch=2026110215") no-repeat; display: block; width:140px; height:22px; } .recruitSite { background: url("/CSP/img/bt/icons_buttons/hed_recruitsite.gif?switch=2026110215") no-repeat; display: block; width:114px; height:22px; } .aboutHPB { width:620px; font-weight: bold; } /************************************************************ * スプライト画像 - 共通(c.png) ************************************************************/ .cS { background-image: url(/CSP/img/bt/sprites/c.png?switch=2026110215) !important; background-repeat: no-repeat; border: 0; } .viewDetailReservation { background-position: -300px -560px; background-repeat: no-repeat; display: block; width: 115px; height: 24px; } .viewDetailReservation:hover{ background-position: -300px -584px; } .tradePoint { background-position: -20px -480px; display: block; width: 142px; height: 30px; } .tradePoint:hover { background-position: -20px -510px; } .regist { background-position: -393px -480px; display: block; width:146px; height:24px; margin: 0 auto; } .regist:hover { background-position: -393px -504px; } .login { background-position: -260px -480px; display: block; width:69px; height:24px; } .login:hover { background-position: -260px -504px; } .tabLadies { background-position: -19px -240px; display: block; background-repeat: no-repeat; margin-bottom: -1px; width: 90px; height: 25px; position:relative;} .tabLadies:hover { background-position: -19px -265px; display: block; background-repeat: no-repeat; margin-bottom: -1px; width: 90px; height: 25px; position:relative; } .tabLadies span.selected { background-position: -19px -265px; display: block; background-repeat: no-repeat; margin-bottom: -1px; width: 90px; height: 25px; position:relative; } .tabMans { background-position: -121px -240px; display: block; background-repeat: no-repeat; margin-bottom: -1px; width: 90px; height: 25px; position:relative; } .tabMans:hover { background-position: -121px -265px; display: block; background-repeat: no-repeat; margin-bottom: -1px; width: 90px; height: 25px; position:relative; } .tabMans span.selected { background-position: -121px -265px; display: block; background-repeat: no-repeat; margin-bottom: -1px; width: 90px; height: 25px; position:relative; } /*予約ボタン*/ .salonReserve { background-position: -339px -480px; display: block; width: 42px; height: 16px; } .salonReserve:hover { background-position: -339px -496px; } /************************************************************ * スプライト画像 - 横長画像(b.png) ************************************************************/ .bS { background-image: url(/CSP/img/bt/sprites/b.png?switch=2026110215); background-repeat: no-repeat; background-color: transparent; border: 0; } .viewMore { background-position: 0 -60px; display: block; width: 79px; height: 24px; } .viewMore:hover { background-position: 0 -84px; } .reserveMenu { background-position: -1460px -520px; width: 190px; height: 32px; } .reserveMenu:hover { background-position: -1460px -552px; } /* area search */ /********************************************************** * ↓↓↓削除予定↓↓↓ ***********************************************************/ /* .searchHairSalon { background-image: url(/CSP/img/bt/text/search_hair.png?switch=2026110215); background-repeat: no-repeat; width: 95px; height: 15px; } .searchNailSalon { background-image: url(/CSP/img/bt/text/search_nail.png?switch=2026110215); background-repeat: no-repeat; width: 203px; height: 13px; } .searchRelaxSalon { background-image: url(/CSP/img/bt/text/search_relax.png?switch=2026110215); background-repeat: no-repeat; width: 340px; height: 13px; } .searchEstheSalon { background-image: url(/CSP/img/bt/text/search_esthe.png?switch=2026110215); background-repeat: no-repeat; width: 155px; height: 13px; } */ /********************************************************** * ↑↑↑削除予定↑↑↑ ***********************************************************/ .searchHairSalon { background-image: url(/CSP/img/bt/text/search_hair.png?switch=2026110215); background-repeat: no-repeat; width: 95px; height: 15px; } .searchNailSalon { background-image: url(/CSP/img/bt/text/search_nail.gif?switch=2026110215); background-repeat: no-repeat; width: 186px; height: 12px; } .searchRelaxSalon { background-image: url(/CSP/img/bt/text/search_relax.gif?switch=2026110215); background-repeat: no-repeat; width: 312px; height: 12px; } .searchEstheSalon { background-image: url(/CSP/img/bt/text/search_esthe.gif?switch=2026110215); background-repeat: no-repeat; width: 107px; height: 12px; } .regionList { padding-bottom: 6px; font-size: 10px; } .regionList li { display: inline; } .split { border-left: 1px solid #4C4C80; margin-left: 4px; padding-left: 4px; } /* プレコンテンツ */ .pankuzuShort { width: 765px; } .pankuzu { float: left; font-size: 10px; padding: 12px 0; } .pankuzu li { display: inline; } .pankuzu strong { font-weight: normal; } .subtitle { width: 765px; height: 30px; color: #444; font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','MS Pゴシック',MS PGothic,sans-serif; border-bottom: solid 2px #CDCABF; } .searchBox input[type="text"] { padding: 0 5px; margin: 0; } .searchBoxbg { background-position: -815px -800px; width: 257px; height: 24px; } .searchBoxbg input:-webkit-autofill { border: 1px solid #A8A5A1; border-radius: 4px; box-sizing: border-box; width: 257px; } .searchButton { background-color: #F6F6F6; border: 1px solid #CCCCCC; border-radius: 4px; color: #666666; cursor: pointer; font-weight: bold; height: 24px; padding-left: 18px; padding-right: 18px; } .searchButton:hover { opacity: 0.7; } .tabBody { background-color: #FDFDF5; width: 392px; padding: 0px 15px; border: 1px solid #BFB4AB; } .hairStyleTabLinks2 { min-height: 28px !important; _height: 28px !important; } .tabBodyHead { align-items: center; border-bottom: 1px dotted #999999; color: #444444; display: flex; font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","MS Pゴシック",MS PGothic,sans-serif; height: 18px; justify-content: space-between; padding-bottom: 2px; width: 100%; } .tabBodyHead h3 { font-size: 13px; } /* テキストリンク */ .commonTextLinkWithHelpIcon { background: url(/CSP/img/svg/pc/icon_help_navy.svg?switch=2026110215) left center / 14px no-repeat; display: inline-block; font-size: 11px; line-height: 16px; padding-left: 18px; text-decoration: none; } .commonTextLinkWithHelpIcon:visited { color: #4C4C80; } .hairStyleList, .hairStyleListShop { color: #333; font-size: 10px; } .hairStyleList a { display: block; text-decoration: none !important; } .tabGender a { display: block; height: 30px; background-image: url(/CSP/img/bt/sprites/tab_gender.png?switch=2026110215); background-repeat: no-repeat; margin-bottom: -1px; position: relative; z-index: 0; } .tabGenderLadys { background-position: 0 0; width: 100px; } .tabGenderLadys:hover { background-position: 0 -30px; } .current .tabGenderLadys { background-position: 0 -60px; } .tabGenderMens { background-position: -150px 0; width: 100px; } .tabGenderMens:hover { background-position: -150px -30px; } .current .tabGenderMens { background-position: -150px -60px; } .icnCrown1 { padding-left: 40px; background: url(/CSP/img/bt/icons/icon_crown1.png?switch=2026110215) no-repeat 0 0; } .icnCrown2 { padding-left: 38px; background: url(/CSP/img/bt/icons/icon_crown2.png?switch=2026110215) no-repeat 0 0; } .icnCrown3 { padding-left: 38px; background: url(/CSP/img/bt/icons/icon_crown3.png?switch=2026110215) no-repeat 0 0; } .icnCrownOther { padding-left: 28px; background: url(/CSP/img/bt/icons/icon_crown_other.png?switch=2026110215) no-repeat 0 0; } .rankingListHeading { margin-bottom: 6px; } *:first-child+html .hairStyleList img { -ms-interpolation-mode: bicubic; } .hairStyleList a .hairStyleListInnerAnchor { text-decoration: none !important; } .hairStyleList a .hairStyleListInnerAnchor:hover { text-decoration: underline !important; } .styleListImg { align-items: center; display: flex; justify-content: center; } .styleRankingFirstWrapper .hairStyleList:nth-child(1) .styleListImg { height: 173px; width: 130px; } .styleRankingFirstWrapper .hairStyleList:nth-child(1) .styleListImg > img { max-height: 173px; max-width: 130px; } .styleRankingFirstWrapper .hairStyleList:nth-child(2) .styleListImg, .styleRankingFirstWrapper .hairStyleList:nth-child(3) .styleListImg { height: 138px; width: 104px; } .styleRankingFirstWrapper .hairStyleList:nth-child(2) .styleListImg > img, .styleRankingFirstWrapper .hairStyleList:nth-child(3) .styleListImg > img { max-height: 138px; max-width: 104px; } .styleRankingSecondWrapper .styleListImg { height: 119px; width: 89px; } .styleRankingSecondWrapper .styleListImg > img { max-height: 119px; max-width: 89px; } .styleListNewWrapper .styleListImg { height: 88px; width: 66px; } .styleListNewWrapper .styleListImg > img { max-height: 88px; max-width: 66px; } .mapArea { position: absolute; top: 0px; left: 0px; z-index:1; } .copyHeadline { position: absolute; top: 11px; left: 13px; z-index:2; font-weight:bold; color: #463413; font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','MS Pゴシック',MS PGothic,sans-serif; } .copyList { position: absolute; top: 37px; left: 13px; z-index:2; } .copyList li { line-height:24px; } /************************************************************ * buttons ************************************************************/ /* ボタン */ .btn { border: 0; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; display: block; font-weight: bold; text-align: center; text-decoration: none; } .btn:hover { text-decoration: none; } .btn > span > input, .btn > span > span { background: none; border: none; cursor: pointer; display: block; font-weight: bold; height: 100%; width: 100%; } /* btn1 */ .btn1H30, .btn1H42, .btn1H44, .btn1H50, .btn1H60 { background: #F95A6B; background: linear-gradient(to bottom, #FF9BA2 0%,#F95A6B 75%,#F85164 100%); border: 1px solid #DA949B; border-radius: 4px; box-shadow: inset 1px 1px 3px #F9D8DB, inset -1px -1px 3px #FFA6AE; color: #FFFFFF !important; padding: 1px; } .btn1H30:hover, .btn1H42:hover, .btn1H44:hover, .btn1H50:hover, .btn1H60:hover { background: #FA7A88; background: linear-gradient(to bottom, #FFB0B6 0%,#FA7A88 75%,#FA7584 100%); } .btn1H30 { line-height: 26px; } .btn1H42 { line-height: 38px; } .btn1H42.btnWlines { line-height: 15px; padding-top: 5px; padding-bottom: 5px; } .btn1H44 { line-height: 40px; } .btn1H44.btnWlines { line-height: 16px; padding-top: 5px; padding-bottom: 5px; } .btn1H50 { line-height: 46px; } .btn1H50.btnWlines { line-height: 18px; padding-top: 7px; padding-bottom: 7px; } .btn1H60 { line-height: 56px; font-size: 15px; } /* btn2 */ .btn2H24, .btn2H28, .btn2H30, .btn2H32, .btn2H50 { background: #FDF5F6; background: linear-gradient(to bottom, #FFFFFF 0%,#FAE5E7 100%); border: solid 1px #E5848E; border-radius: 3px; color: #E53B4E !important; padding-left: 1px; padding-right: 1px; } .btn2H24:hover, .btn2H28:hover, .btn2H30:hover, .btn2H32:hover, .btn2H50:hover { -ms-filter: alpha(opacity="70"); filter: alpha(opacity="70"); opacity: 0.7; } .btn2H24 { height: 24px; line-height: 22px; } .btn2H28 { height: 28px; line-height: 26px; } .btn2H30 { height: 30px; line-height: 28px; } .btn2H32 { height: 32px; line-height: 30px; } .btn2H50 { font-size: 13px; height: 50px; } .btn2H50.btnWlines { line-height: 18px; padding-top: 7px; padding-bottom: 7px; } /* btn3 */ .btn3H19, .btn3H24, .btn3H32, .btn3H50 { background: #FFFFFF; background: linear-gradient(to bottom, #FFFFFF 0%,#F2F2F2 100%); border: solid 1px #A29697; border-radius: 3px; color: #666666 !important; padding: 1px; } .btn3H19:hover, .btn3H24:hover, .btn3H32:hover, .btn3H50:hover { background: #FDFDFD; background: linear-gradient(to bottom, #FFFFFF 0%,#F7F7F7 100%); border: solid 1px #C7C0C1; color: #A4A4A4 !important; } .btn3H19 input, .btn3H24 input, .btn3H32 input, .btn3H50 input { color: #666666; } .btn3H19:hover input, .btn3H24:hover input, .btn3H32:hover input, .btn3H50:hover input { color: #A4A4A4; } .btn3H19 { height: 19px; line-height: 15px; } .btn3H24 { height: 24px; line-height: 20px; } .btn3H32 { height: 32px; line-height: 28px; } .btn3H50 { height: 50px; line-height: 46px; } /* サロンダイレクト */ /* height30px */ .btn3H30SD { background: url('/CSP/img/bt/sprites/btn2.png?switch=2026110215') no-repeat left -1050px; line-height: 30px; } .btn3H30SD > span { background: url('/CSP/img/bt/sprites/btn2.png?switch=2026110215') no-repeat right -1110px; } .btn3H30SD > span > input { height: 30px; } .btn3H30SD > span > input, .btn3H30SD > span > span { background: url('/CSP/img/bt/sprites/btn2.png?switch=2026110215') repeat-x 0 -1170px; color: #666666; } .btn3H30SD:hover { background-position: 0 -1080px; } .btn3H30SD:hover > span { background-position: right -1140px; } .btn3H30SD:hover > span > input, .btn3H30SD:hover > span > span { background-position: 0 -1200px; color: #A3A3A3; } /* height50px */ .btn3H50SD { background: url('/CSP/img/bt/sprites/btn2.png?switch=2026110215') no-repeat left -750px; line-height: 50px; } .btn3H50SD > span { background: url('/CSP/img/bt/sprites/btn2.png?switch=2026110215') no-repeat right -850px; } .btn3H50SD > span > span { background: url('/CSP/img/bt/sprites/btn2.png?switch=2026110215') repeat-x 0 -950px; color: #666666; } .btn3H50SD:hover { background-position: 0 -800px; } .btn3H50SD:hover > span { background-position: right -900px; } .btn3H50SD:hover > span > span { background-position: 0 -1000px; color: #A3A3A3; } /* ヘアスタイル動画 */ .styleVideoTime { align-items: center; background-color: rgba(51,51,51,0.8); border-radius: 2px; bottom: 4px; color: #FFFFFF; display: flex; font-size: 12px; font-weight: bold; line-height: 1; padding: 4px; position: absolute; right: 4px; } .styleVideoTime::before { background: url(/CSP/img/svg/pc/icon_play_white.svg?switch=2026110215) center / contain; content: ""; height: 12px; margin-right: 2px; width: 12px; }