@charset "utf-8";
/*
 * Nihon Optical Corporate site | home style (1110)
*/

/* ---------- 1.baseLayout ---------- */
body {width: 100%; text-align: center; font: 12px/1.6 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo, Osaka,'ＭＳ Ｐゴシック','MS P Gothic',sans-serif; color: #333}
html.sizeSmall body {font-size: 10px}
html.sizeMedium body {font-size: 12px}
html.sizeLarge body {font-size: 14px}
.nav li,
.nav dd {position: relative; overflow: hidden}
.nav li img,
.nav dd img {position: absolute}
a:link {text-decoration: none; color: #388ad1}
a:visited {color: #2449bb}
a:hover {text-decoration: underline; color: #499be2}
a:active {text-decoration: none}

#wrapperBg {border-top: 3px solid #ba0100; background: url(/images/home/wrap_bg.gif) 50% 0 no-repeat}
#header {height: 72px}
#branding {padding-top: 20px}
#wrapperBg,
#branding {width: 100%}
#header {width: 960px}
#slider {width: 770px}
#globalNavContainer,#contentsWrapper {width: 962px}
#header,#globalNavContainer,#branding,#slider,#contentsWrapper {position: relative; margin: 0 auto; text-align: left}

#header #headerNavContainer #headerNav a,
#header #headerNavContainer #headerNav img,
#header #headerNavContainer #fontSizeNav a,
#header #headerNavContainer #fontSizeNav img,
#globalNavContainer #globalNav a,
#globalNavContainer #globalNav img,
#slider a,
#slider img,
#slider,
.column4 ul li a,
.column4 ul li img {-webkit-tap-highlight-color: rgba(255,255,255,0)}


/* ---------- 2.header ---------- */
#header #headerLogo {float: left; background: url(/images/home/h_bg_03.png) 0 0 no-repeat; width: 458px; height: 73px; position: relative}
#header #headerLogo p {position: relative; top: 6px; left: 11px; width: 156px; height: 55px}
#header #headerLogo dl {position: absolute; top: 6px; right: 12px; width: 264px; height: 55px}
#header #headerLogo dt { margin-bottom: 6px; line-height: 0;}
#header #headerLogo dd a:hover img  {filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; background-color: #ffffff}
#header #headerLogo dd {float: left; margin-right: 10px}
#header #headerLogo dd.last {margin-right: 0px}
#header h1 {position: absolute; top: 10px; right: 22px; text-align: right; font-size: .8em}
#header #headerNavContainer {position: absolute; top: 36px; right: 20px}
#header #headerNavContainer #headerNav {float: left; padding-top: 3px}
#header #headerNavContainer #fontSizeNav {position: relative; float: right; width: 134px; height: 25px}

#header #headerNavContainer #headerNav li,
#header #headerNavContainer #fontSizeNav dd {float: left}
#header #headerNavContainer #headerNav li {margin-right: 16px}
#header #headerNavContainer #headerNav li,
#header #headerNavContainer #headerNav li a {height: 18px}
#header #headerNavContainer #headerNav li.home,
#header #headerNavContainer #headerNav li.home a {width: 60px}
#header #headerNavContainer #headerNav li a img {top: 0; left: 0}
#header #headerNavContainer #headerNav li a.hover img {top: -18px; left: 0}
#header #headerNavContainer #headerNav li.inquiry,
#header #headerNavContainer #headerNav li.inquiry a {width: 98px}
#header #headerNavContainer #headerNav li.beginner,
#header #headerNavContainer #headerNav li.beginner a {width: 97px}

#header #headerNavContainer #fontSizeNav {background: url(/images/home/fontSizeNav_bg.png) 0 0 no-repeat}
#header #headerNavContainer #fontSizeNav dt {display: none}
#header #headerNavContainer #fontSizeNav dd {position: absolute; top: 5px; width: 15px; height: 15px}
#header #headerNavContainer #fontSizeNav dd#sizeSmall {left: 74px}
#header #headerNavContainer #fontSizeNav dd img {top: 0; left: 0}
#header #headerNavContainer #fontSizeNav dd.hover img {top: -15px; left: 0}
#header #headerNavContainer #fontSizeNav dd#sizeMedium {left: 92px}
#header #headerNavContainer #fontSizeNav dd#sizeLarge {left: 110px}
html.sizeSmall #header #headerNavContainer #fontSizeNav dd#sizeSmall img,
html.sizeMedium #header #headerNavContainer #fontSizeNav dd#sizeMedium img,
html.sizeLarge #header #headerNavContainer #fontSizeNav dd#sizeLarge img {top: -15px; left: 0}


/* ---------- 3.globalNav ---------- */
#globalNavContainer {margin-top: 10px}
#globalNavContainer,
#globalNavContainer #globalNav,
#globalNavContainer #globalNav li,
#globalNavContainer #contactsNav,
#globalNavContainer #contactsNav li {line-height: 0; font-size: 10px !important}
#globalNavContainer #globalNav li {float: left; margin-right: 4px}
#globalNavContainer #globalNav li.last-child {float: right; margin-right: 0}
#globalNavContainer #globalNav li,
#globalNavContainer #globalNav li a {display: block; width: 134px; height: 40px; overflow: hidden}
#globalNavContainer #globalNav li a img {top: 0; left: 0}
#globalNavContainer #globalNav li a.hover img {top: -40px; left: 0}

#globalNavContainer #contactsNav {width: 960px; height: 12px; margin-top: 5px; padding-top: 20px; background: url(/images/home/contactsNav_bg.png) 0 0 no-repeat; text-align: center}
#globalNavContainer #contactsNav li {display: inline; margin-right: 10px; border-right: 1px solid white; padding-right: 10px}
#globalNavContainer #contactsNav li.last-child {margin-right: 0; border-right: none; padding-right: 0}
#globalNavContainer #contactsNav li a {color: white}


/* ---------- 4.branding ---------- */
#branding {height: 364px}
#slider {display: none; height: 364px !important}
#slider .nivo-controlNav {position: absolute; top: 320px; width: 770px; text-align: center}
#slider .nivo-controlNav img {width: 77px; top: auto; left: auto; position: static; opacity: .5}
#slider .nivo-controlNav .nivo-control {margin-right: 10px}
#slider .nivo-controlNav .nivo-control:last-child {margin-right: 0}
#slider .nivo-controlNav a {display: inline-block; width: 77px; height: 32px; padding: 13px 3px 3px}
#slider .nivo-controlNav a:hover img,#slider .nivo-controlNav a.active img {opacity: 1}
#slider .nivo-controlNav a.active {background: url(/images/home/slider_thumb_bg.png) 0 0 no-repeat}
#slider .nivo-directionNav a {display: block; width: 132px; height: 132px; text-indent: -9999px; overflow: hidden}
#slider .nivo-directionNav .nivo-prevNav {top: 94px; left: -100px; background: url(/images/home/slider_arrow_l.png) 0 0 no-repeat}
#slider .nivo-directionNav .nivo-prevNav.hover {background-image: url(/images/home/slider_arrow_l_hov.png)}
#slider .nivo-directionNav .nivo-nextNav {top: 94px; right: -100px; background: url(/images/home/slider_arrow_r.png) 0 0 no-repeat}
#slider .nivo-directionNav .nivo-nextNav.hover {background-image: url(/images/home/slider_arrow_r_hov.png)}


/* ---------- 5.contents ---------- */
#contentsWrapper {margin-top: 20px; padding-bottom: 10px}
#contentsWrapper .column,
#contentsWrapper .column .section {position: relative}
#contentsWrapper div.column1, #contentsWrapper div.column2, #contentsWrapper div.column3 {float: left; width: 237px}
#contentsWrapper div.column2, #contentsWrapper div.column3 {margin-left: 8px}
#contentsWrapper div.column4 {float: right; width: 227px}
#contentsWrapper div.column .section {position: relative; margin-bottom: 8px; padding: 9px 12px 13px 10px}
#contentsWrapper div.column1 .section, #contentsWrapper div.column2 .section, #contentsWrapper div.column3 .section {background: url(/images/home/column_bg_m.png) 0 100% no-repeat}
#contentsWrapper div.column4 .section {background: url(/images/home/column_bg_s.png) 0 100% no-repeat}
#contentsWrapper .column h3 {z-index: 10}
#contentsWrapper .column ul.headlineNav {position: absolute; top: -28px; right: 12px; z-index: 20}
#contentsWrapper .column ul.headlineNav li,
#contentsWrapper .column ul.headlineNav li a {display: block; height: 19px; overflow: hidden}
#contentsWrapper .column ul.headlineNav li.area {width: 87px}
#contentsWrapper .column ul.headlineNav li.index {width: 40px}
#contentsWrapper .column ul.headlineNav li a img {top: 0; left: 0}
#contentsWrapper .column ul.headlineNav li a.hover img {top: -19px; left: 0}

#contentsWrapper .column .section ul.areaList {width: 215px; line-height: 2}
#contentsWrapper .column .section ul.areaList li {display: inline-block; word-break: keep-all}
#contentsWrapper .column .section ul.areaList li a {margin-right: 4px; padding-left: 8px; background: url(/images/home/bp_list.png) 0 45% no-repeat}
.flexdropdownmenu, .flexdropdownmenu ul {position: absolute; left: 0; top: 0; list-style-type: none; background-color: white; border: 3px solid #a2a2a2; visibility: hidden; display: none; -webkit-box-shadow: 2px 2px 4px rgba(100,100,100,.7); -moz-box-shadow: 2px 2px 4px rgba(100,100,100,.7); box-shadow: 2px 2px 4px rgba(100,100,100,.7)}
.flexdropdownmenu li {position: relative;text-align: left}
.flexdropdownmenu li a {display: block; width: 6em; background: url(/images/home/bp_list.png) #f6f6f6 8px 45% no-repeat; text-decoration: none; padding: 4px 5px 4px 16px}
* html .flexdropdownmenu li {display: inline-block; width: 6em}
.flexdropdownmenu li a:hover, .flexdropdownmenu li.selected a {background-color: #ffd2d2; color: #333}
.rightarrowclass {position: absolute; top: 6px; right: 5px}

#contentsWrapper .column .section #keywordsCont li a {padding-left: 8px; background: url(/images/home/bp_list.png) 0 45% no-repeat}

#contentsWrapper .column .section dl.information {font-size: .9em}
#contentsWrapper .column .section dl.information dt {color: #d70c18}
#contentsWrapper .column .section dl.information dd,
#contentsWrapper .column .section dl.banner dd {margin-bottom: 8px; border-bottom: 1px dotted #e3e3e3; padding-bottom: 8px; line-height: 1.3}
#contentsWrapper .column .section dl.information dd.last-child,
#contentsWrapper .column .section dl.banner dd.last-child {margin-bottom: 0; border-bottom: none; padding-bottom: 0}
#contentsWrapper .column .section dl.banner dt {text-align: center}
#contentsWrapper .column .section dl.banner dd {margin-top: 3px; font-size: .85em}
#contentsWrapper .column .section dl.banner a.hover img,
#contentsWrapper .column .section div.couponBox .coupon a.hover img {opacity: .6}
#contentsWrapper .column .section div.couponBox {margin-bottom: 10px; padding: 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #f3f3f3}
#contentsWrapper .column .section div.last-child {margin-bottom: 0}
#contentsWrapper .column .section div.couponBox .coupon {float: right; width: 51px; height: 51px}
#contentsWrapper .column .section div.couponBox .outline {margin-right: 60px}
#contentsWrapper .column .section div.couponBox .outline h5 {font-size: 1em; font-weight: bold}
#contentsWrapper .column .section div.couponBox .outline p {line-height: 1.3; font-size: .8em}
#contentsWrapper .column .section #rankingContainer {margin-top: -8px}
#contentsWrapper .column .section #rankingContainer .rankingSwitcher li,
#contentsWrapper .column .section #rankingContainer .rankingSwitcher li a {display: block; width: 102px; height: 30px; overflow: hidden}
#contentsWrapper .column .section #rankingContainer .rankingSwitcher li.realstore {float: left}
#contentsWrapper .column .section #rankingContainer .rankingSwitcher li.realstore a img {top: 0; left: 0}
#contentsWrapper .column .section #rankingContainer .rankingSwitcher li.realstore a.hover img,
#contentsWrapper .column .section #rankingContainer .rankingSwitcher li.ui-tabs-selected a.realstore img {top: -30px; left: 0}
#contentsWrapper .column .section #rankingContainer .rankingSwitcher li.onlineshop {float: right}
#contentsWrapper .column .section #rankingContainer .rankingSwitcher li.onlineshop a img {top: 0; left: -103px}
#contentsWrapper .column .section #rankingContainer .rankingSwitcher li.onlineshop a.hover img,
#contentsWrapper .column .section #rankingContainer .rankingSwitcher li.ui-tabs-selected a.onlineshop img {top: -30px; left: -103px}
.ui-tabs {position: relative}
.ui-tabs .ui-tabs-nav li {position: relative}
.ui-tabs .ui-tabs-panel {display: block}
.ui-tabs .ui-tabs-hide {display: none !important}
#contentsWrapper .column .section #rankingContainer .ranking .rankBox {margin-bottom: 8px; border-bottom: 1px dotted #e3e3e3; padding-bottom:8px; line-height: 1.3; font-size: .8em}
#contentsWrapper .column .section #rankingContainer .ranking .last-child {margin-bottom: 0; border-bottom: none; padding-bottom: 0}
#contentsWrapper .column .section #rankingContainer .ranking .rankBox .itemPhoto {padding: 8px 0; text-align: center}
#contentsWrapper .column .section #rankingContainer .ranking .rankBox .itemInfo {min-height: 28px; padding-left: 38px; background: 0 0 no-repeat}
#contentsWrapper .column .section #rankingContainer .ranking .rank1 .itemInfo {background-image: url(/images/home/bp_rank_1st.png)}
#contentsWrapper .column .section #rankingContainer .ranking .rank2 .itemInfo {background-image: url(/images/home/bp_rank_2nd.png)}
#contentsWrapper .column .section #rankingContainer .ranking .rank3 .itemInfo {background-image: url(/images/home/bp_rank_3rd.png)}
#contentsWrapper .column .section #rankingContainer .ranking .rank4 .itemInfo {background-image: url(/images/home/bp_rank_4th.png)}
#contentsWrapper .column .section #rankingContainer .ranking .rank5 .itemInfo {background-image: url(/images/home/bp_rank_5th.png)}
#contentsWrapper .column .section #rankingContainer .ranking .rankBox .itemInfo strong {font-size: 1.1em}

#contentsWrapper .column ul.ecNav {margin-bottom: 8px}
#contentsWrapper .column ul.ecNav li.onlineShop {width: 227px; height: 74px}
#contentsWrapper .column ul.ecNav li.onlineShop a img {top: 0; left: 0}
#contentsWrapper .column ul.ecNav li.onlineShop a.hover img {top: -74px; left: 0}


/* ---------- 6.footer reseet ---------- */
#footerWrap{
background: none !important;
}
#footerWrap, #footerWrap02 {
clear: both;
min-height: auto !important;
height: auto !important;
background: none !important;
}
#footer, #footerWrap, #footerWrap02 {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
font: 12px/1.6 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo, Osaka,'ＭＳ Ｐゴシック','MS P Gothic',sans-serif !important;
color: #333 !important;
}
#footTopic {
padding-bottom: 0 !important;
width: 960px !important;
margin: 0 auto !important;
}

#footNavi {
width: 100%;
top: 0 !important;
margin: 20px auto 0;
padding: 10px 0;
background: url(/images/home/foot_footNavi_bg.png) 0 0 repeat-x;
text-align: center;
}


/* ---------- 7.footer topics ---------- */
#footTopic #topicContainer {border: 1px solid #e3e3e3; padding: 9px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background-color: #f3f3f3; -moz-box-shadow: box-shadow: 2px 2px 3px rgba(0,0,0,.1); -webkit-box-shadow: box-shadow: 2px 2px 3px rgba(0,0,0,.1); box-shadow: 2px 2px 3px rgba(0,0,0,.1)}
#footTopic #topicContainer .topicBox {width: 306px; height: 125px; background: url(/common/images/footer/foot_topic_box_bg.png) 0 0 no-repeat; text-align: left}
#footTopic #topicContainer .box1 {float: left}
#footTopic #topicContainer .box2 {float: left; margin-left: 10px}
#footTopic #topicContainer .box3 {float: right}
#footTopic #topicContainer .topicBox h4 {margin-left: 10px}
#footTopic #topicContainer .topicBox .section {padding: 10px 10px 0}
#footTopic #topicContainer .topicBox .section li {width: 94px; height: 35px}
#footTopic #topicContainer .topicBox .section li.store1,
#footTopic #topicContainer .topicBox .section li.store2,
#footTopic #topicContainer .topicBox .section li.store4,
#footTopic #topicContainer .topicBox .section li.store5 {float: left}
#footTopic #topicContainer .topicBox .section li.store3,
#footTopic #topicContainer .topicBox .section li.store6 {float: right}
#footTopic #topicContainer .topicBox .section li.store2,
#footTopic #topicContainer .topicBox .section li.store5 {margin-left: 2px}
#footTopic #topicContainer .topicBox .section li.store4,
#footTopic #topicContainer .topicBox .section li.store5,
#footTopic #topicContainer .topicBox .section li.store6 {margin-top: 4px}
#footTopic #topicContainer .box3 .section {background: url(/common/images/footer/foot_topic_mm_bg.png) 95% 100% no-repeat}
#footTopic #topicContainer .box3 .section ul li {width: auto; height: auto}
#footTopic #topicContainer .box3 .section ul,
#footTopic #topicContainer .box3 .section ul li {line-height: 1.4}
#footTopic #topicContainer .box3 .section ul.enter {margin-top: 6px}
#footTopic #topicContainer .box3 .section ul.guide li {font-size: 10px !important}
#footTopic #topicContainer .box3 .section ul.guide li a {padding-left: 7px; background: url(/common/images/footer/foot_topic_bp.png) 0 50% no-repeat}


/* ---------- 8.footer navigation ---------- */
#footNavi #naviContainer {width: 960px; margin: 0 auto; padding-bottom: 10px}
#footNavi #naviContainer .naviBox {text-align: left}
#footNavi #naviContainer .box1, #footNavi #naviContainer .box2, #footNavi #naviContainer .box3 {float: left}
#footNavi #naviContainer .box4 {float: right}
#footNavi #naviContainer .box1, #footNavi #naviContainer .box3, #footNavi #naviContainer .box4 {width: 188px}
#footNavi #naviContainer .box2 {width: 372px}
#footNavi #naviContainer .box2, #footNavi #naviContainer .box3 {margin-left: 8px}
#footNavi #naviContainer .box1 h4, #footNavi #naviContainer .box3 h4, #footNavi #naviContainer .box4 h4 {background: url(/common/images/footer/foot_footNavi_navBox_bg_top_s.png) 0 0 no-repeat}
#footNavi #naviContainer .box2 h4 {background: url(/common/images/footer/foot_footNavi_navBox_bg_top_m.png) 0 0 no-repeat}
#footNavi #naviContainer .box1 .listContainer, #footNavi #naviContainer .box3 .listContainer, #footNavi #naviContainer .box4 .listContainer {background: url(/common/images/footer/foot_footNavi_navBox_bg_bottom_s.png) 0 100% no-repeat}
#footNavi #naviContainer .box2 .listContainer {background: url(/common/images/footer/foot_footNavi_navBox_bg_bottom_m.png) 0 100% no-repeat}
#footNavi #naviContainer .naviBox h4 {padding: 12px 12px 0}
#footNavi #naviContainer .naviBox h4 span {padding-left: 20px; background: url(/common/images/footer/foot_footNavi_h4_bp.png) 0 50% no-repeat}
#footNavi #naviContainer .naviBox h4 a {color: #d70c18 !important; font-weight: bold}
#footNavi #naviContainer .naviBox h4 span {display: inline-block; padding-top: 1px; padding-bottom: 1px}
#footNavi #naviContainer .naviBox .listContainer {padding: 2px 16px 6px}
#footNavi #naviContainer .naviBox .listContainer hr {display: block; height: 1px; visibility: visible; border-top: 1px dotted #d70c18; border-right: none; border-bottom: none; border-left: none}
#footNavi #naviContainer .naviBox .listContainer ul {font-size: .8em}
#footNavi #naviContainer .naviBox .listContainer ul li {padding-top: 4px; padding-left: 10px; background: url(/common/images/footer/foot_footNavi_list_bp.png) 0 .85em no-repeat}
#footNavi #naviContainer .naviBox .listContainer ul li a {color: #333}
#footNavi #naviContainer .naviBox .listContainer .list1 {float: left; width: 164px}
#footNavi #naviContainer .naviBox .listContainer .list2 {float: right; width: 164px}
ul.pageTopNav {width: 960px; margin: 0 auto; padding: 10px 0}
ul.pageTopNav li,
ul.pageTopNav li a {position: relative; display: block; width: 108px; height: 28px; overflow: hidden}
ul.pageTopNav li {float: right}
ul.pageTopNav li a img {position: absolute; top: 0; left: 0}
ul.pageTopNav li a:hover img {top: -28px}