@charset "UTF-8";
/* CSS Document */
/*-----------------------*/
/* 1.Reset */
/* 2.Font */
/* 3.Link */
/* 4.cf */
/*-----------------------*/

/*============================================================ */
/* 1.Reset
============================================================== */

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, p, blockquote, th, td, form, fieldset, legend, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
}
article, header, footer, section, nav, asidef, figcaption, aside { display: block; }
img {
	border-style:none;
	vertical-align: middle;
}
address, em { font-style: normal; }
ul li { list-style: none; }

/*============================================================ */
/* 2.Font
============================================================== */
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 100;
  src: url(../fonts/NotoSerifJP-Light.woff) format('woff');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/NotoSerifJP-Regular.woff) format('woff');
}


html {
  font-size: 62.5%; /* ベースフォントサイズ10px */
}
body {
	color:#333;
	font-family: 'Noto Sans Japanese', 'Open Sans',"メイリオ", "Meiryo", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	line-height: 1.4rem;
	font-size: 10px; /*ie用*/
	font-size: 1.0rem; /* 10px */
}

h2, h3, .nav, p.pickup, .cbp_tmtime { font-family: "Noto Serif Japanese", "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-weight: 600;　transform: rotate(0.001deg); }

p, btn, table, dd, dt, li { font-size: 1.4rem; line-height: 2.2rem;}
#form { font-size: 1.4rem;}
.sm { font-size: 1.2rem; line-height: 2.0rem;}

h1, h2 { font-size: 2.4rem; line-height: 3.0rem; color: #663300; }

h3 { font-size: 2.2rem; line-height: 2.4rem; color: #663300; }
h3.pearl, h3.diamond, h3.glasses {font-size: 1.8rem; line-height: 2.4rem;}

p.pickup { font-size: 1.8rem; line-height: 2.0rem;}
p.price, .jirei p.price { font-size: 2.4rem; line-height: 2.0rem; font-weight: 500;}
.price span.zei, .jirei .price span.sub { font-size: 1.2rem; font-weight: nomal; }

figcaption { font-size: 1.4rem; line-height: 2.0rem; margin-top:1rem;}

#header span { font-size: 1.2rem;}
#header ul.nav { font-size:1.2rem; }
footer p { font-size: 1.2rem;}
address  { font-size: 1.4rem;}
address span { font-size: 1.2rem;}

.text-12 { font-size: 1.2rem;}
.text-16 { font-size: 1.6rem;}
.text-18 { font-size: 1.8rem;}
.text-20 { font-size: 2.0rem;}

.text-in-14 {text-indent: 1.4rem; }

span.nobr {
    white-space: nowrap;
}

/*============================================================ */
/* 3.link
============================================================== */
/*
============================================================== */
a:link, a:visited, a:active { color: #993300; text-decoration: none; }
a:hover { color: #993300; text-decoration: none; }

a img:hover {
	opacity: 0.6 ;
	filter: alpha(opacity=50) ;	/* Ie用 */
	-webkit-transition: 0.6s ;
	transition: 0.6s ;
}



.breadcrumb a:link, .breadcrumb a:visited,.breadcrumb  a:active { color: #663333; text-decoration: none; }
.breadcrumb a:hover { color: #663333; text-decoration: none; }

a.btn-info, a.btn-detail {
	color: #fff;
}

.btn-info.active:focus, .btn-info:hover, .btn-info:active, .btn-info:active:hover, .btn-info:active:focus {
	background-color: #553117;
    border-color: #553117;
}

.btn-info, .btn-info:visited {
    background-color: #462812;
    border-color: #462812;
}
a.btn-info:hover {
	background-color: #553117;
    border-color: #553117;
} 

a.btn-info:after, .btn-detail:after {
	content: "\f0a9";
	font-family: FontAwesome;
	-moz-osx-font-smoothing: grayscale;
	padding-left: 0.5em;
}

.btn-detail.active:focus, .btn-detail:hover, .btn-detail:active, .btn-detail:active:hover, .btn-detail:active:focus {
	background-color: #553117;
    border-color: #553117;
}

.btn-detail, .btn-detail:visited {
    background-color: #462812;
    border-color: #462812;
}
a.btn-detail:hover {
	background-color: #553117;
    border-color: #553117;
    color: #fff;
} 

/*============================================================ */
/* 4.Reset
============================================================== */
.cf:before, .cf:after { /* For modern browsers */
	content:"";
	display:table;
}
.cf:after { clear:both;}
.cf { zoom:1;} /* For IE 6/7 (trigger hasLayout) */


/* block,space
----------------------------------------------------------------- */
.col-btm-01 { margin-bottom: 30px;}
.col-btm-02 { margin-bottom: 60px;}
.col-btm-03 { margin-bottom: 120px;}
.col-tb-01 { margin-top: 10px; margin-bottom: 10px;}
.col-tb-02 { margin-top: 20px; margin-bottom: 20px;}
.col-tb-03 { margin-top: 30px; margin-bottom: 30px;}
.col-tb-04 { margin-top: 40px; margin-bottom: 40px;}
.col-tb-06 { margin-top: 60px; margin-bottom: 60px;}
.col-tb-08 { margin-top: 80px; margin-bottom: 80px;}
.col-top-01 { margin-top: 30px;}
.col-top-02 { margin-top: 60px;}
.col-top-03 { margin-top: 120px;}
.col-top-04 { margin-top: 240px;}
.col-ofst { padding-right: 0px;padding-left: 0px;}
.col-rl-15 { margin-right: 15px; margin-left: 15px;}


section[title="pearl"], section[title="pearl_sp"], section[title="reform"], section[title="repair"], section[title="glasses"], section[title="reading-glasses"] {
    margin-top: -100px;
    padding-top: 100px;
}