@charset "utf-8";
/*要素のフォントサイズやマージン・パディングをリセットしています*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, button, input, select, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-align: left; }

/*行の高さをフォントサイズと同じにしています*/
body {
  line-height: 1.0; }

/*文字サイズの自動調整を無効化しています*/
body {
  line-height: 1.0;
  -webkit-text-size-adjust: none; }

/*新規追加要素のデフォルトはすべてインライン要素になっているので、
section要素などをブロック要素へ変更しています*/
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
  display: block; }

/*ホバー、アクティブ時のアウトラインを消しています*/
a:hover,
a:active {
  outline: 0; }

/*ol、ulのマーカー（行頭記号）を表示しないようにしています*/
ol, ul {
  list-style: none; }

/*引用符の表示が出ないようにしています*/
blockquote, q {
  quotes: none; }

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

/*スタイリングを再指定しています*/
abbr[title] {
  border-bottom: 1px dotted; }

b, strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

/*pre,code等のフォントを指定しています*/
pre, code, kbd, samp {
  font-family: monospace, monospace;
  _font-family: 'courier new', monospace;
  font-size: 1em; }

/*pre-formatted textの読みやすさを改善しています*/
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を
親要素のベースラインに揃えるようにしています*/
a {
  color:#000;
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }
a:visited, a:hover, a:active, a:focus {
    color: #000;
}
a:link {border-bottom:1px dotted #000;
            text-decoration: none;}

.mash a {
	border-bottom: 0 none #666;
	}

/*ins要素のデフォルトをセットし、
色を変える場合はここで変更できるようにしています*/
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/*mark要素のデフォルトをセットし、
色やフォントスタイルを変える場合はここで変更できるようにしています
また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、
目立たせる際に使用するようです*/
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

/*テキストに打ち消し線が付くようにしています*/
del {
  text-decoration: line-through; }

/*IEではデフォルトで点線を下線表示する設定ではないので、
下線がつくようにしています
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/
table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show; }

/*テーブルの中身を天地中央にします*/
th, td {
  vertical-align: middle; }

/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/
/****打消し中！！***
hr {
  background-image: url(../img/hr.png);
  display: block;
  height: 70px;
  border: 0;
  margin: 1em 0;
  padding: 0; }
*/

/*フォームの入力項目をいい感じに配置します*/
button, input, select, textarea {
  vertical-align: baseline;
  *vertical-align: middle;
  font-family: sans-serif; }

button, input {
  line-height: normal;
  *overflow: visible; }

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button; }

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; }

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input::placeholder {
  color: #ccc; }

input::-moz-placeholder {
  color: #ccc; }

input::-webkit-input-placeholder {
  color: #ccc; }

/*フォームの入力値が正常だった場合のスタイルです*/
:valid {
  background-color: green; }

/*フォームの入力値が異常だった場合のスタイルです*/
:invalid {
  background-color: pink; }

/*フォームの入力値が範囲内だった場合のスタイルです*/
:in-range {
  background-color: lightgreen; }

/*フォームの入力値が範囲外だった場合のスタイルです*/
:out-of-range {
  background-color: red; }

/*フォームへの入力が必須の場合のスタイルです*/
:required {
  border-style: solid; }

/*フォームへの入力が必須でない場合のスタイルです*/
:optional {
  border-style: dashed; }

/*縦方向の揃え位置を中央揃えに指定しています*/
input, select {
  vertical-align: middle; }

/*テキストエリアのスクロールバーを削除し、上寄せにしています*/
textarea {
  overflow: auto;
  vertical-align: top; }

/*画像を縦に並べたときに隙間が空かないようにしています*/
img {
  vertical-align: bottom;
  font-size: 0;
  line-height: 0;
  border: 0; }

/* mixin諸々
------------------------------------------------- */
/* transform 変形
------------------------------------------------- */
/* transition 時間的変化
------------------------------------------------- */
/* animation アニメーション
------------------------------------------------- */
/* 汎用パーツ 書き出しあり
------------------------------------------------- */
.invisible {
  visibility: hidden; }

.displayNone {
  display: none; }

/* 汎用パーツ 書き出しなし
------------------------------------------------- */
#why ul li, .information .informationThumb, .lens .sectionBody .shopWrap, .lens .sectionBody .shopWrap .shopEyemirror, #globalfooter #dlBox {
  zoom: 1; }
  #why ul li:before, .information .informationThumb:before, .lens .sectionBody .shopWrap:before, .lens .sectionBody .shopWrap .shopEyemirror:before, #globalfooter #dlBox:before, #why ul li:after, .information .informationThumb:after, .lens .sectionBody .shopWrap:after, .lens .sectionBody .shopWrap .shopEyemirror:after, #globalfooter #dlBox:after {
    content: "\0020";
    display: table; }
  #why ul li:after, .information .informationThumb:after, .lens .sectionBody .shopWrap:after, .lens .sectionBody .shopWrap .shopEyemirror:after, #globalfooter #dlBox:after {
    clear: both; }


/*要素のwidth,heightをpadding、border込みで算出するようにしています*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

/*リンク（訪問前・後）の色を指定してます*/
header a:link{color: #000000}
header a:visited{color:#000000}
header a:active{color:#000000}
footer a:link{color: #666666}
footer a:visited{color:#666666}
footer a:active{color:#ffffff}

.share  {
	text-align: left;
	padding-left: 350px;
}
.share li {
	display: inline-block;
	padding-right: 10px;
	margin-top: 10px;
}

.fb_iframe_widget > span {
  vertical-align: baseline !important;
}

/*--------------------------------*/
#fancybox-wrap, #fancybox-wrap *{
    -moz-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
    -safari-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

/* 汎用文字スタイル
------------------------------------------------- */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%; }

.red {
  color: red; }
  .red a {
    color: inherit;
    border-bottom-color: red; }
    .red a:hover {
      color: orange; }

.bold {
  font-weight: bold; }

.large {
  font-size: 1.8rem; }
.l-line {
  border-left: 10px double #262331;
  padding-left: 10px;
}
/* 文字装飾　蛍光マーカー風
------------------------------------------------- */
.font_ill {
  background-color: #fef263;
}  

/* ランサー広告表示部分中央寄せ+間隔
------------------------------------------------- */
.info-box .center {
  text-align: center;
  margin-bottom: 30px;
  padding-left: 0;
}

/*
------------------------------------------------- */

body {
  line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif;
  font-size: 1.2rem;
  font-size: 12px\9;
  color: #333;
  background: #fff; }

/* TOP部分　文字色
------------------------------------------------- */
.kv {
	background: #262331 url(../img/top.jpg) no-repeat center top;
	width: 100%;
	height: 650px;
}

#main{
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}
.red {
	color: #FF0004;
}


/* お知らせ関連
------------------------------------------------- */

.info-box {
  margin: 50px 0 40px;
}

.info {
	padding-left: 70px;
  padding-bottom: 25px;
	font-size: 1.8rem;
}

.pinfo {
	padding-left: 70px;
	margin-left: auto;
	margin-right: auto;
	width: 850px;
	line-height: 25px;
}

.infoimg {
	background: url(../img/meganeimg.jpg) no-repeat center;
	width: 100%;
	height: 298px;
  margin-bottom: 70px;
}

/* 商品画像　ネロモデル部分
------------------------------------------------- */

 .neromodel{
  position:relative;
  width: 800px;
  height:222.5px;
  margin-bottom:30px;
  background-repeat:no-repeat;
  background-position: center;
  margin-right: auto;
  margin-left: auto;
  border-radius:10px;
  -webkit-background-clip:padding-box;
  background-clip:padding-box;
  background: url(../img/nero/nero_megane.jpg) no-repeat;
 }
 .model:hover{
  background-position:0px -223px
 }

 @media screen and (min-width: 800px) {
  .model:hover {
    background-position:0px -223px
  }
}

.neroimg {
	background-image: url(../img/nero_img.png);
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 727px;
}
.eyewearimg {
	padding-top: 480px;
	border-collapse: collapse;
	width: 910px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	padding-left: 50px;
}
.nero p  {
	position: absolute;
	line-height: 1.4;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

  .nero .eyewearImg {
	display: block;
	top: 633px;
  }
  .nero a {
	border-style: none;
}
  .nero img {
  border-style: none;
  border: solid 1px #666;
  margin-top: 3px;
  }

/* 商品画像popup サムネイル部分
------------------------------------------------- */  

  #nero1 {
    position:relative;
    top: 0;
    left: 0; }
  #nero2 {
    position:relative;
    top: 0;
    left: -2px; }
  #nero3 {
    position:relative;
    top: 0;
    left: -4px; }
  #nero4 {
    position:relative;
    top: 0;
    left: -6px; }
  #nero5 {
    position:relative;
    top: 0px;
    left: -8px; }
  #nero6 {
    position:relative;
    top: 1px;
    left: 0px; }
  #nero7 {
    position:relative;
    top: 1px;
    left: -2px; }
  #nero8 {
    position:relative;
    top: 1px;
    left: -4px; }
  #nero9 {
    position:relative;
    top: 1px;
    left: -6px; }
  #nero10 {
    position:relative;
    top: 1px;
    left: -8px; }


/*初回生産ご購入特典
---------------------------------*/
#tokuten {
	width: 750px;
	margin-top: 200px;
	margin-bottom: 65px;
	margin-left: auto;
	margin-right: auto;
}

#tokuten h1 {
	height: 70px;
	line-height: 70px;
	text-align: center;
    font-size: 2.2rem;
	font-weight: normal;
	letter-spacing: 0.15em;
	color: #fff;
	background-color: #3D316E;
	border: 1px solid #3d316e;
	border-bottom: none;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	background-clip: padding-box;
}

#tokuten .sectionBody{
	padding-top: 30px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 30px;
	border: 1px solid #3d316e;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
#tokuten .sectionBody p{
	text-align: center;
	
}
/* 購入方法
------------------------------------------------- */
#buy {
	margin-top: 770px;
	margin-bottom: 65px;
	width: 750px;
	margin-left: auto;
	margin-right: auto;
}
  #buy h1 {
	height: 70px;
	line-height: 70px;
	text-align: center;
    font-size: 2.2rem;
	font-weight: normal;
	letter-spacing: 0.15em;
	color: #fff;
	background-color: #262331;
	border: 1px solid #262331;
	border-bottom: none;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	background-clip: padding-box;
}
  #buy .sectionBody {
	padding: 30px 60px;
	border: 1px solid #262331;
	border-top: none;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	background-clip: padding-box;
}
    #buy .sectionBody h2 {
      padding: 10px 0;
      margin-bottom: 10px;
      font-size: 1.8rem;
      border-bottom: 1px solid #999; }
    #buy .sectionBody p {
	margin-bottom: 10px;
	line-height: 2.0;
}
    #buy .sectionBody h3 {
        font-weight : normal;
        line-height: 20px;
        margin-top: -10px;
        margin-bottom: 20px;
    }

    #buy .sectionBody p + h2 {
        margin-top: 30px; }
    #buy .sectionBody ul {
      padding-left: 20px;
       }
      #buy .sectionBody ul + h2 {
        margin-top: 30px; }
    #buy .sectionBody li {
	margin-bottom: 5px;
	line-height: 20px;
}

    #buy .sectionBody .button {
      padding: 20px 0 30px; }
      #buy .sectionBody .button a {
	display: block;
	width: 100%;
	height: 70px;
	line-height: 70px;
	text-align: center;
	text-decoration: none;
	color: #fff;
    font-size: 1.6rem;
	font-weight: bold;
	letter-spacing: 0.15em;
	background: #262331;
	border: none;
	border-radius: 10px;
}
        #buy .sectionBody .button a:hover {
          color: #999;
          background: #fff;
          border: 2px solid #999; }


/* FGO初回特典メガネ拭き画像
------------------------------------------------- */
.fow {
	background: url(../img/tokuten.jpg) no-repeat center;
	width: 100%;
	height: 291px;
	margin-top: 30px;
	margin-bottom: 15px;
}
/* 度付きメガネをご希望の方へ
------------------------------------------------- */
.lens {
  margin-bottom: 65px; 
	width: 750px;
	margin-left: auto;
	margin-right: auto;
}
  .lens h1 {
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-size: 2.2rem;
    font-weight: normal;
    letter-spacing: 0.15em;
    color: #fff;
    background: #262331;
    border: 1px solid #262331;
    border-bottom: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background-clip: padding-box; }

  .lens .sectionBody {
    padding: 30px 60px;
    border: 1px solid #262331;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-clip: padding-box; }

    .lens .sectionBody h2 {
      padding: 10px 0;
      margin-bottom: 10px;
      margin-top: 30px;
      font-size: 1.4rem;
      border-bottom: 1px solid #4f4f4f; }

    .lens .sectionBody .m_top {
      margin: 30px 0 15px;
    }

    .lens .sectionBody p {
      margin-bottom: 10px;
      text-align: left;
      line-height: 2.0; }
      .lens .sectionBody p + h2 {
        margin-top: 30px; }

/* 【店舗タブ】動く方　タブ切り替え全体のスタイル
---------------------------------------------*/
.tabs {
  padding-bottom: 40px;
  background-color: #fff;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 950px;
  margin: 10px auto 65px;}

/* 【店舗タブ】タブのスタイル
---------------------------------------------*/
.tab_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #262331;
  border-top: 1px solid #4c4c4c;
  border-left: 1px solid #4c4c4c;
  border-right: 1px solid #4c4c4c;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  background-color: #efefef;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
@media (max-width: 980px) {
 .tab_item {
  height: 100px;
  font-size: 4rem;
  padding-top: 25px;
 }
}
.tab_item:hover {
  opacity: 0.75;
}
@media (max-width: 980px) {
    .tab_item:hover {
        opacity: 1.0;
    }
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  padding: 15px 15px 0;
  clear: both;
  overflow: hidden;
}

#b_content {
  padding-top: 0;
}
#c_content {
  padding-top: 0;
}

/*選択されているタブのコンテンツのみを表示*/
#a:checked ~ #a_content,
#b:checked ~ #b_content,
#c:checked ~ #c_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #262331;
  color: #fff;
}

/* 【店舗タブ】店舗表示
------------------------------------------------- */
.shopEyemirror h2 {
    font-size: 1.5rem;
}
@media (max-width: 980px) {
    .shopEyemirror h2 {
        font-size: 4.0rem;
    }
}
.shopEyemirror ul li {
    font-size: 1.2rem;
    line-height: 2.0rem;
}
@media (max-width: 980px) {
    .shopEyemirror ul li {
        font-size: 3.5rem;
        line-height: 5.0rem;
    }
}
.shopEyemirror ul {
    margin: 20px 0;
}
.shopEyemirror .map{
	max-width: 920px;
	height: auto;
}
@media (max-width: 980px) {
    .shopEyemirror .map{
        margin: 20px auto;
        width: 920px;
        height: auto;
    }
   .shopEyemirror .map p iframe {
        width: 920px;
    }
}
.shopEyemirror .map a{
	color:#00bbcc
}


/* To be continue　ボタン画像＋位置
------------------------------------------------- */
  .next {
  background: url(../img/tama.png) no-repeat center;
  width: 100%;
  height: 200px;
  margin: 75px 0 20px;
  }

/* Fateリンクバナー
------------------------------------------------- */
.fatelink {
	width: 750px;
	margin: 0 auto 80px auto;
	text-align: center;
}

.fatelink p {
	display: inline-block;
	padding: 15px 80px;
}
/*
.fatelink :nth-child(2){
	margin-right: 150px;
}*/


/* 協力店舗
------------------------------------------------- */
#shopCooperate {
  margin-bottom: 65px; }
  #shopCooperate h1 {
    margin-bottom: 20px;
    letter-spacing: .15em;
    font-size: 1.5rem;
    color: #333; }
  #shopCooperate p {
    margin-bottom: 20px;
    padding-left: 40px; }
  #shopCooperate ul {
    margin-bottom: 15px;
    padding-left: 40px;
    line-height: 1.8; }
  #shopCooperate strong {
    color: red; }

/* Q&A
------------------------------------------------- */
#qa {
  margin-bottom: 65px; }
  #qa h1 {
    margin-bottom: 20px;
    letter-spacing: .15em;
    font-size: 1.5rem;
    color: #333; }
  #qa p {
    margin-bottom: 20px;
    padding-left: 40px; }

#footer {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	background-color: #262331;
	width: 100%;
	background-size: 106px 61px,1235px 26px;
	background-repeat: no-repeat;
	background-position: center 150px,center 0%;
}
#footer ul {
	text-align:center;
	font-size: 0.8em;
	
}
#footer ul li {
	display: inline-block;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	border-left: #000000 1px solid;
	padding-left: 20px;
	padding-right: 20px;
}
#footer ul li:first-child {
	border-left: none;
}

#footer p {
	text-align: center;
  color: #d3d3d3;
	font-size: 0.8em;
}

/* フッター部分のaリンクテキストのみ有効　色変えしたい場合はここを変更して下さい */
#footer a {
  color: #d3d3d3;
}