@charset "utf-8";
/*
 * Nihon Optical Corporate site | home style (1110)
*/

/* ---------- 1.baseLayout ---------- */
body {width: 100%; text-align: center; font: 12px/1.5 'メイリオ', 'Meiryo', sans-serif; color: #333}
a:link {text-decoration: none; color: #191311;}
a:visited {color: #191311}
a:hover {text-decoration: underline}
a:active {text-decoration: none}

body {
	background: url(/images/home/wrap_bg.gif) 50% 0 fixed;
	position: relative;
	overflow: hidden;
	touch-action: none;
}
#wrapper {
	position: relative;
}
#header {
	background:url(/images/home2/bg-globalNav.png) no-repeat 0 0;
	width: 154px;
	height: 584px;
	text-align: left;
	position: fixed;
	left: 20px;
	z-index: 10;
}
#header h1 {
	height: 100px;
	position: relative;
}
#header h1 a {
	position: absolute;
	top: 9px;
	left: 30px;
	width: 90px;
	background: url(/images/home2/logo.png) center 27px no-repeat;
	line-height: 1.1;
	padding-bottom: 60px;
	font-size: 11px;
	font-family:'メイリオ', 'Meiryo', sans-serif;
	color: #000000;
}
#header h1 a:hover {
	text-decoration: none;
}
#globalNavContainer ul {
	overflow: hidden;
}
#globalNavContainer li {
	float: left;
	display: inline;
	line-height: 0;
	font-size: 0;
}
#globalNav {
	margin: 0 0 7px;
	line-height: 0;
	font-size: 0;
}
#sns {
	padding: 0 0 17px 32px;
}
#sns li {
	margin: 0 20px 0 0;
}
#globalNavContainer p.title {
	margin: 0 0 8px 18px;
}
#group {
	padding: 0 0 0 14px;
	line-height: 0;
	font-size: 0;
}
#group li.group01,
#group li.group03,
#group li.group05 {
	margin: 0 5px 6px 0;
}
#group li.group02,
#group li.group04,
#group li.group06 {
	margin: 0 0 6px 0;
}

#contents {
	height: 1000px;
	z-index: 1;
	text-align: left;
}
#contents section {
	text-align: left;
	width: 832px !important;
	padding: 0 300px !important;
/*	background: #fff !important;
*/}

#contents .fieldWrap {
	position: relative;
}

#contents #main {
	background:url(/images/home2/bg-main.png) no-repeat 50% 0;
	height: 580px;
	position: relative;
}
#contents #main #mainImg {
	padding: 2px 0 0 0;
    overflow: hidden;
    width: 828px;
	height: 487px;
}

.bg_img {
	width: 828px;
}
.bg_img .bx-wrapper {
	height: 100%;
}
.bx-window {
	margin-bottom: 10px;
}
.slider {
	width: 100%;
	margin: 0px auto;
	border-radius: 9px 9px 0 0;
    -webkit-border-radius: 9px 9px 0 0;
    -moz-border-radius: 9px 9px 0 0;
}
.bg_img .slider li {
	width: 828px !important;
	height: 487px !important;
	background-repeat: no-repeat;
	background-position: left center;

}
.bg_img .slider li img {
	border-radius: 9px 9px 0 0;
    -webkit-border-radius: 9px 9px 0 0;
    -moz-border-radius: 9px 9px 0 0;
}
.bx-pager {
	position: absolute;
	top: 472px;
	left: 26px;
	width: 828px;
}
.bx-pager a {
	display: block;
	float: left;
	width: 92px;
	height: 60px;
	margin-right: 6px;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
	position: relative;
}
.bx-pager a img {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
.bx-pager a img.box {
	display: none;
}
.bx-pager a.active {
	margin-top: -5px;
}
.bx-pager a.active img {
	display: block;
}

.bx-prev,
.bx-next {
	display: none;
}

#marquee {
	background:url(/images/home2/bg-news.gif) no-repeat 0 0;
	width: 718px;
	height: 22px;
	position: absolute;
	top: 545px;
	left: 11px;
	overflow: hidden;
	padding: 0 0 0 89px;
}

#marquee ul {
	display: block;
	line-height: 1.2;
	position: relative;
	overflow: hidden;
	width: 640px;
	height: 22px;
	float: left;
}

#marquee ul li {
	position: absolute;
	top: -999em;
	left: 0;
	display: block;
	white-space: nowrap;
	padding: 5px 0 0 0;
	font-size: 11px;
}
#marquee ul li span {
	margin-right: 10px;
	color: #bd001e;
}
#marquee p {
	float: right;
	display: inline;
	padding: 4px 5px 0 0;
}


/* 店舗検索 */
#store {
	width: 828px;
	height: 582px;
	position: relative;
/*	background:url(/images/home2/bg-store.png) no-repeat 50% 0;*/
}
#store h2 {
	position: absolute;
	top: 47px;
	left: 420px;
}
#store p {
	position: absolute;
	top: 156px;
	left: 89px;
}

#store .l-map p.gm-style-pbt {
  position: absolute;
  top: 156px;
  left: 89px;
}

#store li {
	position: absolute;
}

#store li.Hokkaido {
	top: 45px;
	left: 605px;
}

#store li.Aomori {
	top: 173px;
	left: 605px;
}
#store li.Iwate {
	top: 210px;
	left: 676px;
}
#store li.Miyagi {
	top: 247px;
	left: 676px;
}
#store li.Akita {
	top: 210px;
	left: 605px;
}
#store li.Yamagata {
	top: 247px;
	left: 605px;
}
#store li.Fukushima {
	top: 284px;
	left: 605px;
}

#store li.Ibaraki {
	top: 357px;
	left: 676px;
}
#store li.Tochigi {
	top: 321px;
	left: 676px;
}
#store li.Gunma {
	top: 321px;
	left: 605px;
}
#store li.Saitama {
	top: 357px;
	left: 605px;
}
#store li.Chiba {
	top: 395px;
	left: 676px;
}
#store li.Tokyo {
	top: 395px;
	left: 605px;
}
#store li.Kanagawa {
	top: 432px;
	left: 605px;
}


#store li.Niigata {
	top: 284px;
	left: 558px;
}
#store li.Toyama {
	top: 284px;
	left: 511px;
}
#store li.Ishikawa {
	top: 284px;
	left: 464px;
}
#store li.Fukui {
	top: 321px;
	left: 464px;
}
#store li.Yamanashi {
	top: 395px;
	left: 558px;
}
#store li.Nagano {
	top: 321px;
	left: 558px;
}
#store li.Gifu {
	top: 321px;
	left: 511px;
}
#store li.Shizuoka {
	top: 432px;
	left: 558px;
}
#store li.Aichi {
	top: 395px;
	left: 511px;
}

#store li.Mie {
	top: 395px;
	left: 464px;
}
#store li.Shiga {
	top: 359px;
	left: 464px;
}
#store li.Kyoto {
	top: 359px;
	left: 417px;
}
#store li.Osaka {
	top: 395px;
	left: 370px;
}
#store li.Hyogo {
	top: 359px;
	left: 370px;
}
#store li.Nara {
	top: 395px;
	left: 417px;
}
#store li.Wakayama {
	top: 432px;
	left: 370px;
}

#store li.Tottori {
	top: 359px;
	left: 323px;
}
#store li.Shimane {
	top: 359px;
	left: 276px;
}
#store li.Okayama {
	top: 395px;
	left: 323px;
}
#store li.Hiroshima {
	top: 395px;
	left: 276px;
}
#store li.Yamaguchi {
	top: 359px;
	left: 229px;
}

#store li.Tokushima {
	top: 478px;
	left: 309px;
}
#store li.Kagawa {
	top: 441px;
	left: 309px;
}
#store li.Ehime {
	top: 441px;
	left: 262px;
}
#store li.Kochi {
	top: 478px;
	left: 262px;
}

#store li.Fukuoka {
	top: 392px;
	left: 124px;
}
#store li.Saga {
	top: 392px;
	left: 77px;
}
#store li.Nagasaki {
	top: 429px;
	left: 77px;
}
#store li.Kumamoto {
	top: 429px;
	left: 124px;
}
#store li.Oita {
	top: 392px;
	left: 171px;
}
#store li.Miyazaki {
	top: 429px;
	left: 171px;
}
#store li.Kagoshima {
	top: 466px;
	left: 77px;
}
#store li.Okinawa {
	top: 516px;
	left: 77px;
}


#store li a img {
	-moz-transition: -moz-transform 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear;
    -o-transition: -o-transform 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear;
    transition: transform 0.3s linear;
    z-index: 100;
}
#store li a img:hover {
	-webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    z-index: 100;
}

#store #area li {
	cursor: pointer;
}
#store #area li.Hokkaido {
	top: 45px;
	left: 605px;
}
#store #area li.Touhoku {
	top: 173px;
	left: 605px;
}
#store #area li.Kantou {
	top: 321px;
	left: 605px;
}
#store #area li.Hokuriku {
	top: 284px;
	left: 464px;
}
#store #area li.Toukai {
	top: 354px;
	left: 511px;
}
#store #area li.Kinki {
	top: 359px;
	left: 370px;
}
#store #area li.Chugoku {
	top: 359px;
	left: 229px;
}
#store #area li.Shikoku {
	top: 441px;
	left: 262px;
}
#store #area li.Kyusyu {
	top: 392px;
	left: 77px;
}

/* コンタクト・メガネ */
#contents #item {
	background:url(/images/home2/bg-item.png) no-repeat 50% 0;
	position: relative;
	height: 575px;
}
#contents .fieldWrap {
	height: 575px;
}
#contents #item h2 {
	padding: 182px 0 116px 60px;
}
#contents #item  li {
	float: left;
	display: inline;
}
#contents #item p:nth-child(2) {
	position: absolute;
	top: 143px;
	left: 146px;
}
#contents #item ul:nth-child(3) {
	position: absolute;
	top: 124px;
	left: 225px;
}
#contents #item ul:nth-child(3) li {
	margin: 0 17px 0 0;
}
#contents #item p:nth-child(4) {
	position: absolute;
	top: 258px;
	left: 146px;
}
#contents #item ul:nth-child(5) {
	position: absolute;
	top: 249px;
	left: 223px;
}
#contents #item ul:nth-child(5) li {
	margin: 0 20px 0 0;
}
#contents #item ul:nth-child(6) {
	position: absolute;
	top: 373px;
	left: 106px;
}
#contents #item ul:nth-child(6) li {
	margin: 0 4px 0 0;
}
#contents #item p:nth-child(7) {
	margin: 0 0 0 44px;
}

#contents #item a img {
	-moz-transition: -moz-transform 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear;
    -o-transition: -o-transform 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear;
    transition: transform 0.3s linear;
}
#contents #item a img:hover {
	-webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
#contents #item p:nth-child(7) a img:hover {
	webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

/* おすすめ商品 */
#osusume {
	position: relative;
}
#osusume h2 {
	text-align: center;
	line-height: 0;
}
#osusume .stageTitle {
  width: 124px;
  height: 124px;
  margin: auto;
  position: relative;
}
#osusume .stageTitle > span {
  color: #16bbca;
  font-size: 1.4em;
  font-weight: bold;
  line-height: 1;
  display: block;
  text-align: center;
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  z-index: 1;
}
#osusume .hajimeteWrap {
	position: relative;
	width: 765px;
	margin: 0 auto;
}

#osusume .hajimeteWrap .box {
	position: absolute;
	top: 142px;
	left: 14px;
}

#osusume .hajimeteWrap .box li{
	background: #d0f1f4;
	float: left;
	min-height: 200px;
	width: 144px;
	padding: 17px 18px 14px 18px;
	margin-right: 4px;
}

#osusume .hajimeteWrap .box li .img{
	font-size: 10px;
	margin-bottom: 1px;
	line-height: 0;
}

#osusume .hajimeteWrap .box li .maker{
	font-size: 12px;
	margin-bottom: 0px;
}

#osusume .hajimeteWrap .box li h3{
	font-size: 12px;
	margin-bottom: -1px;
	line-height: 1;
	font-weight: bold;
	min-height: 30px;
}


#osusume .hajimeteWrap .box li .stit{
	background: #d5242c;
	color: #fff;
	font-size: 10px;
	padding: 2px 4px;
	margin-bottom: -1px;
	font-weight: bold;
}

#osusume .hajimeteWrap .box li .left .stit{
	background: #000;
}

#osusume .hajimeteWrap .box li .price{
	color: #d5242c;
	font-size: 14px;
	font-weight: bold;
	margin-top: -3px;
}

#osusume .hajimeteWrap .box li .left .price{
	color: #000;
}

#osusume .hajimeteWrap .box li .price span{
	font-size: 10px;
	font-weight: normal;
	color: #000;
	display: inline-block;
	margin-left: 3px;
}

#osusume .hajimeteWrap .box li .price_tsujyou{
	font-size: 10px;
	font-weight: normal;
	color: #000;
	display: inline-block;
}
#osusume .hajimeteWrap .btnList{
	margin-top: 4px;
}

#osusume .hajimeteWrap .btnList li{
	float: left;
	margin-right: 10px;
}

#osusume .hajimeteWrap .btnList li:last-child{
	margin-right: 0px;
}

/* クーポン */
#coupon {
	position: relative;
}
#coupon h2 {
	text-align: center;
	margin: 0 0 5px;
}
#coupon ul {
	overflow: hidden;
	margin: 0 0 0 26px;
}
#coupon ul li {
	float: left;
	display: inline;
	margin: 0 0 14px;
	width: 247px;
	height: 190px;
}
#coupon ul li span {
	display: block;
	width: 247px;
	height: 190px;
}

#coupon ul li:first-child{
	margin-left: 118px;
}

#coupon ul li:nth-child(2) {
	margin: 0 23px 14px;
}
#coupon ul li:nth-child(3) {
	margin: 0 23px 14px 0;
}
#coupon ul li:nth-child(4) {
	width: 247px;
	height: 270px;
}
#coupon ul li:nth-child(5) {
	width: 247px;
	height: 270px;
	margin: 0 0 14px 23px;
}
#coupon ul li:nth-child(6) {
	width: 247px;
	height: 270px;
}

/* 安心・安全サポート */
#support {
	position: relative;
}
#support h2 {
	text-align: center;
	margin: 0 0 5px;
}
#support ul {
	overflow: hidden;
	margin: 0 0 0 34px;
}
#support ul li {
	float: left;
	margin: 0 10px 7px 0;
	width: 254px;
	height: 145px;
	overflow: hidden;
}
#support ul li a {
	position: relative;
	display: block;
	width: 254px;
	height: 145px;
	cursor: pointer;
}
#support ul li a div {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: 2;
	width: 254px;
	height: 145px;
}
#support ul li a div.on {
	visibility: hidden;
	z-index: 1;
	width: 254px;
	height: 145px;
}
#support ul li .on p {
	position: absolute;
	z-index: 10;
	padding: 32px 0 0 0;
	text-align: center;
	width: 254px;
	color: #fff;
	font-weight: bold;
}
#support ul li .on img {
	position: absolute;
	opacity:0.9;
	filter: alpha(opacity=90);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=90)";  /* ie 8 */
	-moz-opacity:0.9;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.9;
}
#support .stageTitle {
  width: 124px;
  height: 124px;
  margin: auto;
  position: relative;
}
#support .stageTitle > span {
  color: #ff5d65;
  font-size: 1.4em;
  font-weight: bold;
  line-height: 1;
  display: block;
  text-align: center;
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  z-index: 1;
}


/* fotter */
#footer {
	background: #191311;
	color: #fff;
	text-align: left;
	position: fixed;
	z-index: 100;
	bottom: 0;
	left: 0;
	width: 100%;
	border-top: 6px solid #d82418;
	line-height: 1.3;
}
#menu {
}
#footer p.footArrow {
	position: fixed;
	top: 50px;
	right: 0;
}
#footer p.footArrow a {
	display: block;
	width: 25px;
	height: 80px;
	background: url(/images/home2/foot-menu2.png) no-repeat 50% 50%;
	font-size: 0;
	line-height: 0;
}

#footSitemapWrap {
	background: #f7f7f7;
}
#footSitemap {
	padding: 30px;
	overflow: hidden;
	font-size: 12px;
	position: relative;
	text-align: left;
}
#footSitemap .main,
#footSitemap .support,
#footSitemap .item,
#footSitemap .company,
#footSitemap .group {
	overflow: hidden;
	margin: 0 0 10px;
}
#footSitemap .group {
	margin: 0;
}

#footSitemap p.logo {
	margin: 0;
	position: absolute;
	bottom: 0;
	right: 0;
	display:none;
}
#footSitemap li {
	margin: 0 10px 5px 0;
	float: left;
	display: inline;
}
#footSitemap li a {
	display: inline-block;
	background: url(/images/home2/ico-arrow.gif) no-repeat 0 0;
	padding-left: 18px;
}

#footer #footNavi {
	width: 1000px;
	margin: 0 auto;
	padding: 15px 0;
	font-size: 11px;
}

#footer #footNavi .heartup, #footer #footNavi address{
	float: left;
}

#footer #footNavi .textlink {
	float: right;
}

#footer #footNavi ul {
	float: right;
	width: 650px;
	text-align: right;
	margin-bottom: 5px;
}
#footer #footNavi li {
	display: inline-block;
	margin: 0 2px;
}

#footer #footNavi li:nth-child(11),#footer #footNavi li:last-child {
	margin: 0px;
}

#footer #footNavi a {
	color: #fff;
	text-decoration: none;
}

#loader {
    width: 80px;
    height: 80px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -40px; /* heightの半分のマイナス値 */
    margin-left: -40px; /* widthの半分のマイナス値 */
    z-index: 1000;
}

#fade {
    width: 100%;
    height: 200%;
    background-color: #FFFFFF;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
}

#cboxOverlay {
	height: 2000px !important;
}

p#logoTop {display: none;}

@media screen and (max-width: 1024px){
html { zoom:80%; }
h1 { display: none;}
#globalNavContainer { display: none;}
#header { background: none;}
p#logoTop { display: none;}

#contents section {
	padding: 0 !important;
	margin: 0 !important;
}

}
.c_coment{position: fixed; bottom: 98px; left: 0px; background: #fff; display: block; width: 100%; padding: 10px; z-index: 100;}
.c_coment p{width: 1000px; margin: 0 auto; }
