@charset "utf-8";


/*
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

  Last Updated: October 16, 2015

  shared
  nextBtn / prevBtn (slide, carousel)
  p.paging
  ul.thumbBox
  div.contents
  div.sideBar
  form design
  #loginPage
  #forgot
  #error

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/


/* ============================================================
shared
============================================================ */
div.contents,
div.sideBar {
  padding: 0 10px;
}
/* clearfix */
.clearfix:after { content: ""; display: block; clear: both; }

/* for IE6 */
* html .clearfix { display: inline-block; }

/* for IE7 */
* + html .clearfix { display: inline-block; }


/* ============================================================
nextBtn / prevBtn (slide, carousel)
============================================================ */
p.nextBtn,
p.prevBtn {
  width: 32px;
  height: 32px;
  text-indent: 100%;
  overflow: hidden;
  cursor: pointer;
}
p.nextBtn {
  background: url(../img/shared/slide_arrow_r.png) 0 0 no-repeat;
}
p.prevBtn {
  background: url(../img/shared/slide_arrow_l.png) 0 0 no-repeat;
}


/* ============================================================
p.paging
============================================================ */
p.paging {
  text-align: right;
}
p.paging span {
  font-weight: bold;
}
p.paging a {
  text-decoration: underline;
}


/* ============================================================
ul.thumbBox
============================================================ */
ul.thumbBox {}
ul.thumbBox:after {
  content: "";
  display: table;
  clear: both;
}
ul.thumbBox li {
  margin: 0 20px 20px 0;
  float: left;
  position: relative;
}
ul.thumbBox li a {
  display: block;
  background-color: #FFFFFF;
}
ul.thumbBox li a:hover {
  background-color: #F5F5F7;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
ul.thumbBox li p.badge {
  height: 30px;
}
ul.thumbBox li p.image,
ul.thumbBox li p.name,
ul.thumbBox li p.price,
ul.thumbBox li p.brand,
ul.thumbBox li p.num,
ul.thumbBox li p.spec {
  text-align: center;
  padding: 0 5px;
}
ul.thumbBox li p.image {
  margin-bottom: 5px;
}
ul.thumbBox li p.price {
  font-size: 14px;/*font-size: 12px;*/
  font-weight: bold;
}
ul.thumbBox li p.price span.del {
  font-size: 11px;
  font-weight: normal;
  text-decoration: line-through;
  padding-right: 3px;
  display:none; /* double Price */
  color: #000;
}
ul.thumbBox li.discPrice p.price span.del {
  display: none;
}
ul.thumbBox li.salePrice p.price span.del,
ul.thumbBox li.c_isSale p.price span.del {
  display: inline;
}
ul.thumbBox li.discPrice p.price,
ul.thumbBox li.salePrice p.price,
ul.thumbBox li p.price span.sale,
ul.thumbBox li p.price span.off {
  color: #FF0000;
}
ul.thumbBox li p.price span.sale {
  padding-right: 3px;
}
ul.thumbBox li p.price span.tax {
  font-size: 10px;
  font-weight: normal;
}
ul.thumbBox li p.price span.off {
  font-size: 10px;
  font-weight: normal;
  display: none;
}
ul.thumbBox li p.brand {
  font-size: 10px;
  margin-bottom: 3px;
}
ul.thumbBox li p.num {
  font-size: 10px;
}
ul.thumbBox li p.num.soldout {
  color: #FF0000;
}
ul.thumbBox li p.num.comingsoon {
  color: #009AE2;
}
ul.thumbBox li p.spec {
  font-size: 10px;
}
ul.thumbBox li p.spec span.pc {
  color: #4659B6;
}
ul.thumbBox li p.spec span.bifocal {
  color: #009966;
}
ul.thumbBox3,
ul.thumbBox4 {
  width: 800px;
}

/* thumbBox3 */
ul.thumbBox3 li,
ul.thumbBox3 li a {
  width: 246px;
  height: 243px;
}
ul.thumbBox3 li p.fav {
  width: 27px;
  height: 27px;
  position: absolute;
  right: 3px;
  top: 3px;
  z-index: 999;
  cursor: pointer;
}
ul.thumbBox3 li p.fav span {
  display: block;
  width: 27px;
  height: 27px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background: url(../img/shared/thumbbox_badge_fav.png) 0 0 no-repeat;
}
ul.thumbBox3 li p.fav span.active {
  background: url(../img/shared/thumbbox_badge_fav_active.png) 0 0 no-repeat;
}

/* thumbBox4 */
ul.thumbBox4 li,
ul.thumbBox4 li a {
  width: 180px;
  height: 188px;
}

/* thumbBox4carousel */
div.thumbBox4carousel {
  height: 188px;
  width: 780px;
  padding: 4px;
  margin-left: -4px;
  overflow: hidden;
  position: relative;
}
div.thumbBox4carousel p.nextBtn,
div.thumbBox4carousel p.prevBtn {
  position: absolute;
  top: 80px;
}
div.thumbBox4carousel p.prevBtn {
  left: 4px;
}
div.thumbBox4carousel p.nextBtn {
  right: 4px;
}


/* ============================================================
div.contents
============================================================ */
div.contents {
  width: 780px;
}


/* ============================================================
div.sideBar
============================================================ */
div.sideBar {
  width: 180px;
}
div.sideBar > div {
  margin-bottom: 20px;
  background: #FFFFFF;
  border-bottom: #E0E0E0 1px solid;
}
div.sideBar div h3 {
  color: #009AE2;
  font-size: 12px;
  padding: 10px 10px 3px;
  border-bottom: #009AE2 1px solid;
}

/* div.shop */
div.sideBar > div.shop {
  padding-bottom: 5px;
}
div.sideBar > div.shop div.shopNews a:hover img {
  opacity: 0.7;
}
div.sideBar > div.shop div.shopList {
  padding: 0 10px;
}
div.sideBar > div.shop div.shopList h4 {
  margin-top: 8px;
}
div.sideBar > div.shop div.shopList a:hover {
  text-decoration: underline;
}
div.sideBar > div.shop div.shopList a.blank {
  display: inline-block;
  padding-right: 15px;
  background: url(../img/shared/icon_blank.png) 100% 50% no-repeat;
}

/* div.search */
div.search form.searchform {
  width: 158px;
  height: 32px;
  margin: 10px auto;
  border: #E0E0E0 1px solid;
  position: relative;
}
div.search form.searchform .keywords {
  width: 117px;
  height: 30px;
  border: none;
  outline: none;
  padding: 0 4px;
  /*padding: 4px;*/
}
div.search form.searchform .searchBtn {
  position: absolute;
  _top: 1px;
  left: 125px;
}
*:first-child + html div.search form.searchform .searchBtn {
  top: 1px;
}

/* div.list */
div.list ul li a {
  display: block;
  padding: 10px 20px 8px 10px;
  background: url(../img/shared/list_arrow_r.png) 165px 50% no-repeat;
}
div.list ul li.more a {
  background: url(../img/shared/list_arrow_b.png) 163px 50% no-repeat;
}
div.list ul li.close a {
  background: url(../img/shared/list_arrow_t.png) 163px 50% no-repeat;
}
div.list ul li a:hover {
  background-color: #EEEEEE;
}
div.list ul li.current a {
  background: #CCEBF9;
}

/* category */
div.category ul li {
  border-bottom: #CCCCCC 1px dotted;
}
div.category ul li:last-child {
  border-bottom: 0;
}
div.category ul li a {
  display: block;
  color: #666666;
  font-weight: bold;
  height: 31px;
  padding: 18px 75px 5px 10px;
  background-position:  108px 50%;
  background-repeat: no-repeat;
}
div.category ul li a:hover {
  text-decoration: underline;
}
div.category ul li.glasses a {
  background-image: url(../img/shared/sidebar_category_image_glasses.jpg);
}
div.category ul li.sunglasses a {
  background-image: url(../img/shared/sidebar_category_image_sunglasses.jpg);
}
div.category ul li.accessory a {
  background-image: url(../img/shared/sidebar_category_image_accessory.jpg);
}
div.category ul li.supplement a {
  background-image: url(../img/shared/sidebar_category_image_supplement.jpg);
}

/* sns */
div.sideBar > div.sns {
  background: none;
  border-bottom: none;
  padding-top: 10px;
}
div.sns ul {
  padding-left: 32px;
}
div.sns ul li {
  float: left;
  padding-right: 10px;
}
div.sns ul li a:hover img {
  filter: alpha(opacity=60);
  opacity: 0.6;
}

/* bnr */
div.sideBar > div.bnr {
  background: none;
  border-bottom: none;
}
div.sideBar > div.bnr a:hover img {
  filter: alpha(opacity=60);
  opacity: 0.6;
}
div.sideBar > div.bnr .detail {
  margin-top: 8px;
  text-align: center;
}
div.sideBar > div.bnr .detail a {
  background: url(../img/shared/icon_pdf.png) no-repeat scroll 100% 50%;
  padding-right: 19px;
  display: inline-block;
}
div.sideBar > div.bnr .detail a:link {
  text-decoration: underline;
}
div.sideBar > div.bnr .detail a:hover {
  text-decoration: none;
}


/* ============================================================
form design
============================================================ */
/* text */
form input[type=text],
form input[type=password],
form textarea {
  font-family: Helvetica, “ヒラギノ角ゴ Pro W3″, ”Hiragino Kaku Gothic Pro W3″, メイリオ, Meiryo, sans-serif;
  font-size: 12px;
  padding: 6px;
  border: solid 1px #E0E0E0;
}

/* select */
form div.select {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  height: 29px;
}
form div.select > div {
  width: 112px;
  height: 27px;
  padding: 0 38px 0 10px;
  border: #E0E0E0 1px solid;
  position: relative;
}
form div.select > div.disabled {
  opacity: 0.3;
  cursor: default;
}
form div.select > div > p {
  font-size: 12px;
  padding-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  -webkit-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
form div.select > div:after {
  content: url(../img/shared/form_select.png);
  width: 28px;
  height: 27px;
  position: absolute;
  right: 0;
  top: 0;
}
form div.select select {
  font-size: 12px;
  font-family: “ヒラギノ角ゴ Pro W3″, ”Hiragino Kaku Gothic Pro W3″, メイリオ, Meiryo, sans-serif;
  width: 152px;
  height: 29px;
  position: absolute;
  zoom: 1.1;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}

/* radio */
form div.radio input[type=radio] {
  display: none;
  /*appearance: none;*/
}
form div.radio label {
  display: inline-block;
  padding-left: 22px;
  margin-right: 20px;
  cursor: pointer;
  position: relative;
  font-size: 12px;
}
form div.radio label:before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: #FFFFFF;
  border: #CCCCCC 1px solid;
  border-radius: 8px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
form div.radio input:checked + label:after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: #009AE2;
  position: absolute;
  top: 3px;
  left: 3px;
}

/* checkbox */
form div.checkbox input[type=checkbox] {
  display: none;
}
form div.checkbox label {
  display: inline-block;
  padding-left: 22px;
  margin-right: 20px;
  cursor: pointer;
  position: relative;
}
form div.checkbox label:before {
  content: "";
  width: 13px;
  height: 13px;
  background-color: #FFFFFF;
  border: #CCCCCC 1px solid;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
form div.checkbox input:checked + label:after {
  content: url(../img/shared/form_check.png);
  position: absolute;
  top: 0;
  left: 3px;
}


/* ============================================================
#loginPage
============================================================ */
#loginPage {
  width: 930px;
  padding: 25px;
  margin: 0 auto 30px;
  /*background: #FFFFFF url(../img/shared/bdr_h_dot_cccccc.png) 390px 0 repeat-y;*/
  background: #FFFFFF url(../img/shared/bdr_h_dot_cccccc.png) 490px 0 repeat-y;
}
#loginPage:after {
  content: "";
  display: table;
  clear: both;
}
#loginPage div.login {
  /*width: 340px;*/
  width: 440px;
  float: left;
}
#loginPage div.entry {
  /*width: 540px;*/
  width: 440px;
  float: right;
}
#loginPage h2 {
  font-size: 18px;
  margin-bottom: 5px;
}
#loginPage p.lead {
  font-size: 13px;
  padding-bottom: 20px;
  background: #FFFFFF url(../img/shared/bdr_dot_cccccc.png) 0 100% repeat-x;
}
#loginPage div.go {
  padding: 20px;
  background-color: #F3F3F5;
}
#loginPage div.go p.button,
#loginPage div.go p.or {
  text-align: center;
  margin-bottom: 10px;
}
#loginPage div.go p.or {
  color: #666666;
  font-size: 12px;
  font-weight: bold;
}
#loginPage div.go p.button p {
  height: 40px;
  display: inline;
}
#loginPage a.blank {
  display: inline-block;
  padding-right: 15px;
  background: url(../img/shared/icon_blank.png) 100% 50% no-repeat;
}
#loginPage a:hover {
  text-decoration: underline;
}

/* div.login */
#loginPage div.login table {
  margin-bottom: 10px;
}
#loginPage div.login table tr th,
#loginPage div.login table tr td {
  padding: 15px 10px;
  background: #FFFFFF url(../img/shared/bdr_dot_cccccc.png) 0 100% repeat-x;
}
#loginPage div.login table tr th {
  text-align: left;
  width: 110px;
}
#loginPage div.login table tr td {
  /*width: 190px;*/
  width: 290px;
}
#loginPage div.login table tr td p {
  margin-bottom: 5px;
}
#loginPage div.login table tr td p:last-child {
  margin-bottom: 0;
}
#loginPage div.login table tr td input[type="text"],
#loginPage div.login table tr td input[type="password"] {
  /*width: 178px;*/
  width: 278px;
}
#loginPage div.login p.button input[type=submit],
#loginPage div.login p.button input[type=button] {
  display: inline-block;
  vertical-align: bottom;
  width: 200px;
  height: 40px;
  text-indent: -9999px;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  background: url(../img/shared/login_btn_login.png) 0 0 no-repeat;
}
#loginPage div.login div.go div.snsBadge {
  width: 200px;
  margin: 0 auto;
  padding: 5px 0;
  background-color: #FFFFFF;
}
#loginPage div.login div.go div.snsBadge.btns {
  width: 400px;
  padding: 0;
  background: none;
}
  #loginPage div.login div.go div.snsBadge.btns a {
    width: 195px; height: 40px; margin-bottom: 10px;
  }
  #loginPage div.login div.go div.snsBadge.btns a:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  filter: alpha(opacity=70);  -khtml-opacity: 0.7;  -moz-opacity: 0.7;  opacity: 0.7;
  }
  #loginPage div.login div.go div.snsBadge.btns a.left {
    float: left; clear: both;
  }
  #loginPage div.login div.go div.snsBadge.btns a.right {
    float: right;
  }
  #loginPage div.login div.go div.snsBadge.btns a:last-child,
  #loginPage div.login div.go div.snsBadge.btns a:nth-last-child(2) {
    margin-bottom: 0px;
  }


/* div.entry */
#loginPage div.entry p.what {
  font-size: 12px;
  margin: 15px 0 10px;
}
#loginPage div.entry dl.merit {
  color: #0099E1;
  /*width: 500px;*/
  width: 400px;
  padding: 15px;
  margin-bottom: 20px;
  border: #D9F0FB 5px solid;
  position: relative;
}
#loginPage div.entry dl.merit dt {
  font-size: 12px;
  font-weight: bold;
  width: 120px;
  position: absolute;
}
#loginPage div.entry dl.merit dd {
  padding-left: 130px;
  text-indent: -1em;
}
#loginPage div.entry div.go div.snsBadge {
  width: 300px;
  margin: 0 auto;
  padding: 5px 0;
  background-color: #FFFFFF;
}
#loginPage div.entry div.button {
  text-align: center;
  margin-top: 20px;
}
#loginPage div.entry div.button p {
  height: 40px;
  display: inline;
  margin: 0 5px;
}
#loginPage div.entry div.button input[type=submit],
#loginPage div.entry div.button input[type=button] {
  display: inline-block;
  vertical-align: bottom;
  width: 200px;
  height: 40px;
  text-indent: -9999px;
  border: 0;
  cursor: pointer;
  overflow: hidden;
}
#loginPage div.entry div.button input.buy {
  background: url(../img/shopping/login_btn_buy_no.png) 0 0 no-repeat;
}

/* button hover */
#loginPage div.login p.button input[type=submit]:hover,
#loginPage div.login p.button input[type=button]:hover,
#loginPage div.entry p.button a:hover img,
#loginPage div.entry div.button input[type=submit]:hover,
#loginPage div.entry div.button input[type=button]:hover {
  opacity: 0.7;
}


/* ============================================================
#forgot
============================================================ */
#forgot {
  width: 545px;
  padding: 20px;
  margin: 0 auto;
}
#forgot h1 {
  margin-bottom: 20px;
}
#forgot div.container {
  padding: 30px 20px;
  background: #FFFFFF;
  position: relative;
}
#forgot div.container p.lead {
  font-size: 13px;
  margin-bottom: 20px;
}
#forgot div.container p span.notice {
  color: #FF0000;
}
#forgot table {
  color: #333333;
  border-collapse: collapse;
  border-spacing: 0;
  border-top: #CCCCCC 1px dotted;
  /*background: url(../img/shared/bdr_dot_cccccc.png) 0 0 repeat-x;*/
}
#forgot table tr th,
#forgot table tr td{
  font-size: 12px;
  text-align: left;
  vertical-align: middle;
  padding: 15px 10px;
  background: url(../img/shared/bdr_dot_cccccc.png) 0 100% repeat-x;
}
#forgot table tr th {
  width: 120px;
}
#forgot table tr td {
  width: 345px;
}
#forgot table tr td input {
  width: 250px;
}
#forgot p.button {
  text-align: center;
  margin-top: 20px;
}
#forgot p.button input[type=submit],
#forgot p.button input[type=button] {
  display: inline-block;
  vertical-align: bottom;
  width: 180px;
  height: 40px;
  text-indent: -9999px;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  background: url(../img/shared/form_btn_next.png) 0 0 no-repeat;
}
#forgot p.button input[type=submit]:hover,
#forgot p.button input[type=button]:hover {
  opacity: 0.7;
}

/* div.reSetup */
#forgot.reSetup {
  width: 780px;
  margin: 0 auto 30px;
}
#forgot.reSetup h2 {
  margin-bottom: 20px;
}
#forgot.reSetup div.content {
  padding: 30px 25px;
  background: #FFFFFF;
}
#forgot.reSetup div.content p.notice {
  color: #FF0000;
  font-size: 13px;
  font-weight: bold;
}
#forgot.reSetup div.content p.lead {
  font-size: 13px;
  margin-bottom: 20px;
}
#forgot.reSetup div.input table {
  margin-bottom: 20px;
  color: #000000;
}
#forgot.reSetup div.input table tr th,
#forgot.reSetup div.input table tr td {
  padding: 15px 10px 15px 0;
  vertical-align: middle;
}
#forgot.reSetup div.input table tr th {
  text-align: left;
  width: 190px;
}
#forgot.reSetup div.input table tr td.must {
  width: 40px;
}
#forgot.reSetup div.input table tr td.cont {
  font-size: 12px;
  width: 470px;
}
#forgot.reSetup div.input table tr td.cont p.notice {
  font-size: 11px;
  font-weight: normal;
}
#forgot.reSetup div.input table tr.password td.cont input {
  width: 280px;
  margin-top: 10px;
}
#forgot.reSetup div.content div.button {
  text-align: center;
}
#forgot.reSetup div.content div.button p {
  display: inline;
  height: 40px;
  margin: 0 5px;
}
#forgot.reSetup div.button input[type=submit],
#forgot.reSetup div.button input[type=button] {
  display: inline-block;
  vertical-align: bottom;
  width: 180px;
  height: 40px;
  text-indent: -9999px;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  background: url(../img/shared/form_btn_set.png) 0 0 no-repeat;
}
#forgot.reSetup div.button input[type=submit]:hover,
#forgot.reSetup div.button input[type=button]:hover,
#forgot.reSetup div.complete div.button a:hover img {
  opacity: 0.7;
}
#forgot.reSetup div.complete p.notice {
  margin-bottom: 20px;
}
#forgot.reSetup div.complete p.lead {
  margin-bottom: 10px;
}
#forgot.reSetup div.complete div.button {
  margin-top: 20px;
}


/* ============================================================
#error
============================================================ */
#error {
  font-size: 12px;
  padding: 80px 0;
  text-align: center;
}
#error p {
  margin-bottom: 30px;
}
#error p a {
  text-decoration: underline;
}
#error p.textImage {
  margin-bottom: 40px;
}