@charset "utf-8"; /* @import "reset.css"; */ @import "reset.2.0.css"; @import "common.css"; @import "module.css"; /* ================================================================ CSS Document - styles.css ------------------------------------------------------------------ billiard green [ main color / #005c42 , sub color / #DFEAE7 ] ------------------------------------------------------------------ =================================================================== 共通 =================================================================== HOMEページ | #home ------------------------------------------------------------------ 事務所案内ページ | #office ------------------------------------------------------------------ サービスについて | #service ------------------------------------------------------------------ 導入までの流れ | #flow ------------------------------------------------------------------ 料金について | #price ------------------------------------------------------------------ アックス歯科実務研究会とは | #about ------------------------------------------------------------------ お問い合わせ | #contact ------------------------------------------------------------------ よくあるご質問 | #faq ＠archive-faq_pt.php ------------------------------------------------------------------ 歯科医院経営サポートブログ | #blog ------------------------------------------------------------------ =================================================================== media screen and (max-width: 1010px) [#side] 非表示 ------------------------------------------------------------------ media screen and (max-width: 710px) [#contents] WIDTH変動：START ------------------------------------------------------------------ media screen and (max-width: 685px) [#header] 変動ADJUST★ ------------------------------------------------------------------ media screen and (max-width: 660px) [#header] 変動ADJUST★ ------------------------------------------------------------------ media screen and (max-width: 635px) ------------------------------------------------------------------ media screen and (max-width: 610px) [#header] 変動ADJUST★ ------------------------------------------------------------------ media screen and (max-width: 585px) [#header] 変動ADJUST★ ------------------------------------------------------------------ media screen and (max-width: 572px) [nav#gNavi] PULLDOWN：START [#header/dl ] 非表示 ------------------------------------------------------------------ media screen and (max-width: 480px) ------------------------------------------------------------------ media screen and (max-width: 400px) ================================================================ */ /**/ /* ================================================================================================================= 共通 -------------------------------------------------- dl.flowUnit -------------------------------------------------- -------------------------------------------------- ================================================================================================================== */ /* dl.flowUnit ----------------------------------------------- */ dl.flowUnit dt{ margin: 0px 0px 30px 0px; padding: 0px; background: url(../img/common/parts/bg_title01.png) left bottom repeat-x; border-bottom: 2px solid #fbfbfb; font-size: 130%; font-weight: bold; line-height: 1; letter-spacing: 0.1em;} dl.flowUnit dt:after{ content: " "; display: block; clear: both;} dl.flowUnit dt span{ float: left; padding: 0px 15px 0px 5px; border-bottom: 6px solid #005c42;} dl.flowUnit dd{ margin-bottom: 35px; padding-bottom: 35px; background: url(../img/home/arr_10.png) no-repeat 35% 100%;} dl.flowUnit dd:after{ content: " "; display: block; clear: both;} dl.flowUnit dd.last{ margin-bottom: 0px; padding-bottom: 0px; background: none;} dl.flowUnit dd p.photo{ float: right; width: 220px; margin-left: 30px;} dl.flowUnit dd p.photo img{ width: 100%;} /* media screen and =========================== */ @media screen and (max-width: 710px) { dl.flowUnit dd{ background: url(../img/home/arr_10.png) no-repeat 50% 100%;} /**/}/**/ /* media screen and =========================== */ @media screen and (max-width: 480px) { dl.flowUnit dd{ padding-bottom: 0px; background: none;} #contents dl.flowUnit dd p.photo{ float: none; margin-right: auto; margin-bottom: 0px; margin-left: auto;} /**/}/**/ /* media screen and =========================== */ @media screen and (max-width: 400px) { dl.flowUnit dt{ margin: 0px 0px 20px 0px; font-size: 120%; letter-spacing: 0em;} dl.flowUnit dd p.photo{ width: 100%; margin-top: -15px;} /**/}/**/ /**/ /* ================================================================================================================= HOMEページ | #home -------------------------------------------------- #mainImg | -------------------------------------------------- #unit01 ================================================================================================================== */ /* 背景WIDE用 #home #mainImg{ background-image: url(../img/home/mainimg_bg.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat;} #home #mainImg .wrap{ background: url(../img/common/parts/bg_11.png) 0 0;} */ /* #mainImg | slider or ----------------------------------------------- */ /*#home #mainImg{ min-width: 1000px;}*/ #home #mainImg h2, #home #mainImg ul.main_img{ width: 1000px;} /* #unit01 ----------------------------------------------- */ #home #unit01 dl{ margin-bottom: 15px; margin-left: 5px; padding-bottom: 15px; padding-left: 70px; background-position: 0px 3px; background-repeat: no-repeat; border-bottom: 1px dotted #d6d6d6; font-weight: bold; font-size: 105%;} #home #unit01 dt{ margin-bottom: 3px; color: #D20000; font-weight: bold; font-size: 110%; line-height: 1;} #home #unit01 dt span{ font-size: 120%;} #home #unit01 dd{} #home #unit01 dl.arr01{ background-image: url(../img/home/arr_01.png);} #home #unit01 dl.arr02{ background-image: url(../img/home/arr_02.png);} #home #unit01 dl.arr03{ background-image: url(../img/home/arr_03.png);} #home #unit01 dl.arr04{ background-image: url(../img/home/arr_04.png); margin-bottom: 0px; padding-bottom: 0px; border-bottom: none;} /**/ /* media screen and ============================================================================================== */ @media screen and (max-width: 1010px) { /* ============================================ */ /* #mainImg | slider or ----------------------------------------------- */ #home #mainImg h2, #home #mainImg ul.main_img{ width: auto;} #home #mainImg h2 img, #home #mainImg ul.main_img img{ width: 100%; height: auto;} /**/}/* ======================================= */ /* media screen and ============================================================================================== */ @media screen and (max-width: 710px) { /* ============================================ */ /* #mainImg ----------------------------------------------- */ #home #mainImg h2, #home #mainImg ul.main_img{ width: auto;} #home #mainImg h2 img, #home #mainImg ul.main_img img{ width: 100%; height: auto;} /**/}/* ======================================= */ /* media screen and ============================================================================================== */ @media screen and (max-width: 565px) { /* ============================================ */ /* #unit01 =============================================== */ #home #unit01 dl{ padding-left: 50px; background-size: 50px auto; font-size: 95%;} #home #unit01 dd{ line-height: 1.4;} /**/}/* ======================================= */ /**/ /* ================================================================================================================= 事務所案内ページ | #office -------------------------------------------------- #unit01 | ごあいさつ -------------------------------------------------- #unit02 | 事務所概要 ================================================================================================================== */ /* #unit01 | ごあいさつ ----------------------------------------------- */ #office #unit01 .photo{ float: left; width: 230px;} #office #unit01 .photo img{ width: 100%;} #office #unit01 .text { float: right; width: 430px;} /* iframe ----------------------------------------------- */ #office #contents iframe{ width: 100%; height: 470px;} /**/ /* media screen and ============================================================================================== */ @media screen and (max-width: 710px) { /* ============================================ */ /* #unit01 ----------------------------------------------- */ #office #unit01 .photo{ width: 200px; margin-right: 30px;} #office #unit01 .text{ float: none; width: auto;} /* iframe ----------------------------------------------- */ #office #contents iframe{ height: 270px;} /**/}/* ======================================= */ /* media screen and ============================================================================================== */ @media screen and (max-width: 565px) { /* ============================================ */ /* #unit01 ----------------------------------------------- */ #office #unit01 .photo{ width: 200px;} /* iframe ----------------------------------------------- */ #office #contents iframe{ height: 250px;} /**/}/* ======================================= */ /* media screen and ==================================================================================== */ @media screen and (max-width: 480px) { /* ============================================ */ /* #unit01 ----------------------------------------------- */ #office #unit01 .photo{ float: none; width: 200px; margin-right: auto; margin-left: auto;} /* .tableLine */ #contents table.tableLine { border: none; } #contents table.tableLine th, #contents table.tableLine td{ display: block; width: auto; } #contents table.tableLine th{ padding: 0px 10px; border: none; text-align: left; white-space: normal;} #contents table.tableLine td{ margin-bottom: 10px; padding: 5px 10px;} #contents table.tableLine tr:last-child td{ margin-bottom: 0px;} /* iframe ----------------------------------------------- */ #office #contents iframe{ height: 220px;} /**/}/* ======================================= */ /* media screen and ============================================================================================== */ @media screen and (max-width: 400px) { /* ============================================ */ /* #unit01 ----------------------------------------------- */ #office #unit01 .photo{ width: 100%;} /* iframe ----------------------------------------------- */ #office #contents iframe{ height: 200px;} /**/}/* ======================================= */ /**/ /* ================================================================================================================= サービスについて | #service -------------------------------------------------- #service -------------------------------------------------- #service01：歯科医院開業 -------------------------------------------------- #service02：節税対策 -------------------------------------------------- #service03：創業融資 -------------------------------------------------- #service04：分院設立 -------------------------------------------------- #service05：経理代行 -------------------------------------------------- #service06：決算代行 ================================================================================================================== */ /* .listBox dl =============================================== */ #service dl.listBox dt{ margin-bottom: 10px; padding-bottom: 0px; border-bottom:1px #ccc dotted; color: #333; font-size: 120%; font-weight: bold;} #service dl.listBox dt a.dtLink{ padding-left: 10px;} #service dl.listBox dt a.dtLink:link, #service dl.listBox dt a.dtLink:visited{ background: url(../img/common/parts/icon_arr04.png) no-repeat 0 0.4em;} #service dl.listBox dt a.dtLink:hover, #service dl.listBox dt a.dtLink:active{ background: url(../img/common/parts/icon_arr03.png) no-repeat 0 0.4em; color: #555;} #service dl.listBox dd{ margin-bottom: 25px;} #service dl.listBox dd:last-child{ margin-bottom: 0px;} /**/ /* .h2_wrap ＠.serviceUnit =============================================== */ #contents .serviceUnit .h2_wrap{ padding-left: 0px; background: url(../img/common/parts/bg_02.png) 0% 10% repeat-x;} #contents .serviceUnit .h2_wrap h2{ padding: 0px; border:none; background: none;} #contents .serviceUnit .h2_wrap h2 span.head{ display: block; float: left; margin-left: 15px; padding: 0px 10px; background: #fff; color: #333; font-size: 65%;} #contents .serviceUnit .h2_wrap h2 span.btm{ display: block; clear: left; color: #333;} /* -------------------------------------------- */ @media screen and (max-width: 565px) { #contents .serviceUnit .h2_wrap h2 span.head{ font-size: 90%;} /**/}/**/ /* ============================================ */ /**/ /* ol.meritList =============================================== #contents .serviceUnit .meritList li{ margin-bottom: 20px !important; margin-left: 0px; padding: 0px 0px 20px 120px; background-position: 15px 0; background-repeat: no-repeat; border-bottom: 1px dotted #d6d6d6;} #contents .serviceUnit .meritList li:nth-child(1){ background-image: url(../img/service/merit01.png) ;} #contents .serviceUnit .meritList li:nth-child(2){ background-image: url(../img/service/merit02.png) ;} #contents .serviceUnit .meritList li:nth-child(3){ background-image: url(../img/service/merit03.png) ;} #contents .serviceUnit .meritList li:nth-child(4){ background-image: url(../img/service/merit04.png) ;} #contents .serviceUnit .meritList li:nth-child(5){ background-image: url(../img/service/merit05.png) ;} #contents .serviceUnit .meritList li:nth-child(6){ background-image: url(../img/service/merit06.png) ;} @media screen and (max-width: 565px) {#contents .serviceUnit .meritList li{ padding: 0px 0px 20px 110px; background-position: 10px 0; }} @media screen and (max-width: 480px) {#contents .serviceUnit .meritList li{ padding: 45px 0px 20px 0px; background-position: center top;}} ============================================ */ /* ol.list01 =============================================== */ #contents .serviceUnit ol.list01{ margin-top: 25px; } /* -------------------------------------------- */ @media screen and (max-width: 710px) { #contents .serviceUnit ol.list01{ margin-top: 15px;} /**/}/**/ /* -------------------------------------------- */ @media screen and (max-width: 565px) { #contents .serviceUnit ol.list01{ line-height: 1.4;} /**/}/**/ /* ============================================ */ /* .photoBox =============================================== */ .serviceUnit .photoBox{ position: relative; margin-bottom: 1.8em; padding: 0px; overflow: hidden;} .serviceUnit .photoBox p{ position: absolute; width: 227px; height: auto; top: 0px; left: 0px; overflow: hidden;} .serviceUnit .photoBox p img{ width: 227px; height: auto;} .serviceUnit .photoBox div{ margin-left: 230px; padding: 20px; border: 1px solid #d6d6d6; background: url(../img/common/parts/bg_10.png) 0 0;} #contents .serviceUnit .photoBox div ol{ margin-bottom: 0px !important;} /* -------------------------------------------- */ @media screen and (max-width: 565px) { .serviceUnit .photoBox div{ margin-left: 133px;} .serviceUnit .photoBox p{ width: 150px; left: -20px;} /**/}/**/ /* -------------------------------------------- */ @media screen and (max-width: 480px) { .serviceUnit .photoBox div{ margin-left: 83px; padding: 15px;} .serviceUnit .photoBox p{ position: absolute; width: 150px; left: -70px;} /**/}/**/ /* -------------------------------------------- */ @media screen and (max-width: 565px) { .serviceUnit img.btn{ width: 100%;} /**/}/**/ /* ============================================ */ /* .sTxtB /* ============================================ */ .serviceUnit .sTxtB{ font-size: 145%; color: #333333;} /* -------------------------------------------- */ @media screen and (max-width: 565px) { .serviceUnit .sTxtB{ font-size: 120%;} /**/}/**/ /* -------------------------------------------- */ @media screen and (max-width: 400px) { .serviceUnit .sTxtB{ font-size: 115%; font-weight: bold;} /**/}/**/ /* ============================================ */ /**/ /* ================================================================================================================= #service ================================================================================================================== */ /* .photo ----------------------------------------------- */ #service #contents .photo{ float: right;} #service #contents .photo img{ margin-left: 30px;} /* media screen and =========================== */ @media screen and (max-width: 480px) { #service #contents .photo{ float: none; text-align: center; width: auto; margin-bottom: 20px;} #service #contents .photo img{ display: block; margin-right: auto; margin-left: auto;} /**/}/**/ @media screen and (max-width: 400px) { #service #contents .photo img{ width: 100%; margin-top: -15px; margin-bottom: -15px; margin-left: 0px; padding: 0px; border: none;} /**/}/* ======================================= */ /**/ /* ================================================================================================================= 導入までの流れ | #flow ================================================================================================================== */ /**/ /* ================================================================================================================= 料金について | #price ================================================================================================================== */ #price #contents p.more{ margin-bottom: 0px; padding-bottom: 1.8em; padding-left: 33px; background: url(../img/common/parts/icon_arr05.png) no-repeat 0 0; } /**/ /* ================================================================================================================= アックス歯科実務研究会とは | #about ================================================================================================================== */ /* #unit04 =============================================== */ #about #unit04 img.ph{ width: 210px; height: auto; margin-left: 30px;} /* media screen and ============================================================================================== */ @media screen and (max-width: 565px) { /* ============================================ */ #about #unit04 .fL, #about #unit04 .fR{ float: none; width: 100%; margin-bottom: 25px;} #about #unit04 img.ph{ display: block; margin-right: auto; margin-left: auto; } /**/}/* ======================================= */ /* media screen and ============================================================================================== */ @media screen and (max-width: 400px) { /* ============================================ */ #about #unit04 .fR img{ width: 100%; padding: 0px; border: none;} /**/}/* ======================================= */ /**/ /**/ /* ================================================================================================================= #voice お客様の声 ==================================================================================================================*/ /**/ /* ================================================================================================================= お問い合わせ | #contact ================================================================================================================== */ #contact #contents table{ margin: 0px auto 20px auto;} #contact #contents table th, #contact #contents table td{ padding: 12px 30px; } #contact #contents table th span { margin-left: 10px; padding: 2px 4px; background-color: #F03; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; color:#FFF; font-size: 80%; font-weight:normal; line-hright: 1; } #contact #contents table td input{ width: 80%; padding: 5px 8px; margin-right: 10px; border:1px #D6D6D6 solid; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; } #contact #contents table td textarea{ width: 80%; height: 5em; padding: 5px 8px; margin-right: 10px; border: 1px #D6D6D6 solid; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px;} #contact #contents .submitUnit{ text-align:center;} #contact #contents .submitUnit input{ width: 350px; height: 60px; background: url(../img/common/btn_contact10_bg.png) repeat-x left center; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border: none; color: #fff; cursor: pointer; font-size: 120%; font-weight: bold;} #contact #contents .submitUnit input:hover {filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;} /* 強制 */ .wpcf7 div.wpcf7-validation-errors, .wpcf7 div.wpcf7-mail-sent-ok{ margin-top: 0px; margin-bottom: 20px; padding: 20px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px;} .wpcf7 div.wpcf7-validation-errors { margin-bottom: 0px; border: 2px solid #f00; color: #f00;} .wpcf7 .submitUnit div.wpcf7-validation-errors { margin-bottom: 20px;} .wpcf7 div.wpcf7-mail-sent-ok{ border: 2px solid #398f14; color: #f00;} .wpcf7 span.wpcf7-not-valid-tip { padding-top: 8px; font-size: 90%; color: #f00; line-height: 1.2; font-weight: bold;} /**/ #contact #conatct39 p { border: none; text-align: left; padding: 0px; background: none; margin: 0px 0px 20px 0px ;} /**/ /* media screen and ============================================================================================== */ @media screen and (max-width: 565px) { /* ============================================ */ #contact #contents table td input{ width: 90%;} #contact #contents table td textarea{ width: 90%;} #contact #contents .submitUnit input{ width: 100%;} /**/}/* ======================================= */ /* ================================================================================================================= よくあるご質問 | #faq ＠archive-faq_pt.php ================================================================================================================== */ /* .faqUnit */ #faq .faqUnit dl{ margin-bottom: 20px; padding: 20px 20px 30px 20px; border: 1px solid #d6d6d6;} #faq .faqUnit dt{ margin-bottom: 20px; padding: 0px 0px 15px 40px; background:url(../img/faq/ico_q01.png) no-repeat top left; border-bottom:1px dotted #d6d6d6; color: #333; font-size: 120%; font-weight: bold; } #faq .faqUnit dd{ padding-left: 40px;} #faq .faqUnit dd div{} /**/ /* ================================================================================================================= 歯科医院経営サポートブログ | #blog ================================================================================================================== */ /* .blogUnit =========================================== */ /* ：投稿機能・補助 ----------------------- */ .blogUnit em { font-style: italic; } .blogUnit blockquote{margin: 20px 0 25px 0;background-color: #fff;border: 1px solid #e6e6e6;margin-left: 2em;padding: 1em 2em 0.8em 3em;position:relative;} .blogUnit blockquote:before{content:"“";padding: 5px;font-size:600%;line-height:1em;font-family:"ＭＳ Ｐゴシック",sans-serif;color:#999;position:absolute;left:0;top:0;} .blogUnit .aligncenter { display: block; margin: 0 auto;} .blogUnit .alignright { float: right; margin-left:20px;} .blogUnit .alignleft { float: left; margin-right:20px;} .blogUnit img[class*="wp-image-"], .blogUnit img[class*="attachment-"] { height: auto; max-width: 100%;} /* .dateCate */ .blogUnit .dateCate{ text-align: right; } .blogUnit .dateCate span.new{ color: #f00; font-size: 90%; font-weight: bold;} /**/ /* .blogList ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ =============================================== */ /**/ .blogList:after{ content: " "; display: block; clear: both;} .blogList dl{ /*clear: left; float: left; width: 335px; margin-right: 30px; */margin-bottom: 70px;} .blogList dl:nth-child(even){ margin-right: 0px;} /* same as h3 */ .blogList dl dt{ margin: 0px; padding: 0px; background: url(../img/common/parts/bg_title01.png) repeat-x left bottom; border-bottom: 2px solid #fbfbfb; font-size: 130%; font-weight: bold; line-height: 1; letter-spacing: 0.1em;} .blogList dl dt:after{ content: " "; display: block; clear: both;} .blogList dl dt a{ display: block; float: left; padding: 0px 15px 0px 5px; border-bottom: 6px solid #005c42; color: #333; line-height: 1.4; text-decoration: none;} .blogList dd{ margin: 0px; padding: 2px 0px; border-bottom: 1px dotted #d6d6d6;} .blogList dd a{ display: block; padding: 10px 5px;} .blogList dd a:after { content: " "; display: block; clear: both;} .blogList dd a:link, .blogList dd a:visited{ text-decoration: none;} .blogList dd a:hover, .blogList dd a:active{ background-color: #DFEAE7; text-decoration: none;} /**/ .blogList dd span{ display: block; float: left; margin-right: 1em; padding-right: 1em; border-right: 1px solid #d6d6d6;} .blogList dd span.new{ color: #f00; font-weight: bold;} /**/ /* .blogUnitList =============================================== */ .blogUnitList{ } .blogUnitList ol{ margin-bottom: 40px; padding-top: 0px; border-top: 1px solid #d6d6d6;} #contents .blogUnitList ol li{ display: block; margin: 10px 0px 0px 0px; padding: 8px 0px 15px 0px; background: none; border-bottom: 1px solid #d6d6d6;} .blogUnitList ol li:after { content: " "; display: block; clear: both;} .blogUnitList ol li div{ padding: 0px 10px 5px 10px; display: inline; float: left;} .blogUnitList ol li div a{ font-size: 115%; font-weight: bold;} #contents .blogUnitList ol li p{ padding-top: 10px; line-height: 1.6;} .blogUnitList ol li span{ display:block; float: left; margin-right: 1em; padding-right: 1em; border-right: 1px solid #d6d6d6;} .blogUnitList ol li span.new{ color: #f00; font-weight: bold;} .blogUnitList ol li span.cat{ } /**/ /* #prenextLinks =============================================== */ #blog #blogPageNavi:after { content: " "; display: block; clear: both;} #blog #blogPageNavi span{ display:block;} #blog #blogPageNavi span.pre { float: left;} #blog #blogPageNavi span.next { float: right;} #blog #blogPageNavi a{ margin: 2px 2px 2px 0; padding: 3px 7px 3px 7px; background-color: #fff; color: #555; text-decoration: none; border: 1px solid #ccc;} #blog #blogPageNavi a:hover{ background-color: #ccc; border: 1px solid #ccc; color: #fff;} /**/ /* #paginationBox =============================================== */ #paginationBox{ text-align: center;} #paginationBox .pagination { padding: 20px 0; font-size: 100%;} #paginationBox .pagination span, #paginationBox .pagination a { margin: 2px 2px 2px 0; padding: 3px 7px 3px 7px; background-color: #fff; color: #555; text-decoration: none; border: 1px solid #ccc;} #paginationBox .pagination a:hover{ background-color: #ccc; border: 1px solid #ccc; color: #fff;} #paginationBox .pagination .current{ padding: 3px 7px 3px 7px; background-color: #ccc; border: 1px solid #ccc; color: #fff;}