@charset "utf-8";
/*
*html5doctor 1.6.1: CSS Reset
*/
@import "css/reset-html5.css";
/*
*CSS START
*/
html { font-size: 62.5%; }
body {
color: #1b1b1b;
-webkit-text-size-adjust: 100%;
font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
background: url(images/sp/bg-body.png) repeat-x left top;
padding-top: 6px;
}
p {
font-size: 1.4rem;
line-height: 24px;
margin-top: 15px;
}
a img:hover, .hl01:hover, .tog:hover, input[type="image"]:hover, .opa:hover {
filter: alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
a {
outline: none;
color: #3366FF;
text-decoration: underline;
}
a:hover {
color: #cf4c42;
text-decoration: none;
}
em {
font-style: normal;
color: #F90;
font-weight: bold;
}
input[type="image"] {
-webkit-appearance: none;
border-radius: 0;
}
.tog, .opa { cursor: pointer; }
/*.tog.active { background: #ffc300; }*/
header {
width: 310px;
margin-right: auto;
margin-left: auto;
padding: 0px 5px;
}
.hl00 {
width: 310px;
margin-top: 10px;
}
.sc { padding-left: 4px; }
.topNavi { overflow: hidden; }
.topNavi a {
float: left;
display: block;
}
.contents {
width: 310px;
margin: 0px auto;
padding: 0px 5px;
}
.cover {
background: #EEE;
margin-top: 10px;
overflow: hidden;
padding-bottom: 10px;
border-bottom: 1px solid #BBB;
text-align: center;
}
.catalog_img {
background: #EEE url(images/sp/bg-catalog-img.png) no-repeat left top;
margin-top: 10px;
overflow: hidden;
padding-bottom: 10px;
border-bottom: 1px solid #BBB;
text-align: center;
}
.colorsample {
background: #FFF;
margin-top: 10px;
overflow: hidden;
padding-bottom: 10px;
border-bottom: 1px solid #BBB;
}
.siteguide {
background: #FFF;
overflow: hidden;
padding-bottom: 10px;
border-bottom: 1px solid #BBB;
margin-top: 10px;
}
.siteguide ul {
font-size: 1.6rem;
line-height: 20px;
list-style: square outside;
margin: 15px 0px 15px 18px;
}
.siteguide ul li { margin-bottom: 10px; }
.siteguide ul li a { color: #333; }
.siteguide ul li a:hover { color: #456EFC; ; }
.pagenum {
font-size: 1.4rem;
margin: 5px 0px 10px;
}
.mhla {
font-size: 1.4rem;
line-height: 14px;
clear: both;
margin-bottom: 10px;
}
.mhld {
font-size: 1.6rem;
line-height: 22px;
border-left: 5px solid #666;
margin: 10px 0px 10px 5px;
padding: 5px 0px 5px 10px;
font-weight: bold;
text-align: left;
}
.mhle {
font-size: 1.6rem;
line-height: 22px;
border-left: 5px solid #666;
margin: 0px 0px 10px;
padding: 8px 0px 7px 10px;
font-weight: bold;
text-align: left;
background: url(images/sp/bg-catalog-img.png) left top;
}
.mhlf {
font-size: 1.6rem;
line-height: 16px;
margin: 15px 0px 10px;
font-weight: bold;
padding-bottom: 5px;
border-bottom: 1px solid #333;
}
.etc-tbl {
border-collapse: collapse;
border: solid 1px #CCC;
font-size: 1.3rem;
line-height: 16px;
width: 290px;
margin: 15px auto 0px;
text-align: left;
}
.etc-tbl td, .etc-tbl th {
border: 1px solid #CCC;
padding: 5px;
}
.etc-tbl th {
background-color: #EEE;
width: 80px;
}
.prevnext, .btnpdf {
margin-left: 6px;
overflow: hidden;
}
.prevnext li {
float: left;
margin-right: 7px;
}
.btnpdf li {
float: left;
margin-right: 4px;
}
.prevnext li:last-child, .btnpdf li:last-child { margin-right: 0px; }
.mhlb {
font-size: 1.6rem;
font-weight: bold;
background: url(images/sp/icon-01.png) no-repeat left 0px;
background-size: 15px 15px;
line-height: 16px;
border-bottom: 1px solid #333;
padding: 0px 0px 10px 24px;
margin-top: 15px;
}
.colorsample ul {
width: 310px;
letter-spacing: -0.4em;
}
.colorsample li {
vertical-align: top;
display: inline-block;
width: 100px;
letter-spacing: 0em;
margin: 0px 4px 10px 0px;
}
.colorsample li:nth-child(3n) { margin-right: 0; }
.etcimg.tog {
font-size: 1.6rem;
line-height: 16px;
background: url(images/sp/bg-cs-continue.png) no-repeat left top;
background-size: 310px 30px;
text-align: center;
color: #81511C;
text-decoration: underline;
margin: 0px 0px 10px;
padding: 8px 0px 6px;
}
.etcimg.tog.active {
background: url(images/sp/bg-cs-continue-a.png) no-repeat left top;
background-size: 310px 30px;
color: #FFF;
}
.menulist {
width: 310px;
margin-top: 10px;
color: #212121;
font-size: 1.6rem;
line-height: 22px;
font-weight: bold;
overflow: hidden;
}
.menulist li {
height: 70px;
width: 155px;
float: left;
position: relative;
}
.menulist li:nth-child(even) { margin-right: 0px; }
.menulist li a {
color: #212121;
text-decoration: none;
display: block;
}
.menulist li .bgm0 {
background: url(images/sp/bg-menu-01a.png) no-repeat left top;
background-size: 155px 70px;
height: 70px;
width: 155px;
}
.menulist li .bgm1 {
background: url(images/sp/bg-menu-02a.png) no-repeat left top;
background-size: 155px 70px;
height: 70px;
width: 155px;
}
.menulist li .bgm2 {
background: url(images/sp/bg-menu-03a.png) no-repeat left top;
background-size: 155px 69px;
height: 69px;
width: 155px;
}
.menulist li .bgm3 {
background: url(images/sp/bg-menu-04a.png) no-repeat left top;
background-size: 155px 69px;
height: 69px;
width: 155px;
}
.menulist li .bgm4 {
background: url(images/sp/bg-menu-05a.png) no-repeat left top;
background-size: 155px 69px;
height: 69px;
width: 155px;
}
.menulist li .bgm5 {
background: url(images/sp/bg-menu-06a.png) no-repeat left top;
background-size: 155px 69px;
height: 69px;
width: 155px;
}
.menulist li .bgm6 {
background: url(images/sp/bg-menu-07a.png) no-repeat left top;
background-size: 155px 69px;
height: 69px;
width: 155px;
}
.menulist li .bgm7 {
background: url(images/sp/bg-menu-08a.png) no-repeat left top;
background-size: 155px 69px;
height: 69px;
width: 155px;
}
.menulist li a:hover {
color: #777777;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
.menulist span {
display: table-cell;
width: 90px;
height: 66px;
vertical-align: middle;
padding-left: 62px;
padding-right: 5px;
padding-top: 4px;
}
.menu-catalog { margin: 10px 0 0px; }
.menu-catalog li { margin-top: -1px; }
.menu-mid {
width: 310px;
font-weight: bold;
}
.menu-mid li {
background: url(images/sp/bg-menu-1.png) no-repeat left top;
background-size: 310px 41px;
height: 41px;
width: 310px;
font-size: 1.8rem;
line-height: 18px;
text-align: center;
margin-top: -1px;
}
.menu-mid li a {
display: table-cell;
vertical-align: middle;
height: 38px;
width: 310px;
text-decoration: none;
color: #333;
padding-top: 3px;
}
.menu-mid li:hover {
filter: alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
.menu-mid li a:hover { color: #666; }
.ohla {
font-size: 1.6rem;
font-weight: bold;
color: #cf4c42;
text-align: center;
padding: 8px 0px;
margin-top: 15px;
line-height: 16px;
clear: both;
border-top: 4px solid #cf4c42;
border-bottom: 4px solid #cf4c42;
}
.ohlb {
font-size: 1.6rem;
font-weight: bold;
color: #cf4c42;
padding: 8px 0px;
margin-top: 15px;
line-height: 24px;
clear: both;
border-top: 4px solid #cf4c42;
border-bottom: 4px solid #cf4c42;
}
.hotitem, .catitemlist {
width: 310px;
margin-top: 15px;
overflow: hidden;
font-size: 1.4rem;
line-height: 22px;
letter-spacing: -0.4em; /* 文字間を詰めて隙間を削除する */
clear: both;
}
.hotitem li, .catitemlist li {
width: 150px;
display: inline-block;
letter-spacing: normal;
margin: 0px 8px 10px 0px;
vertical-align: top;
}
.hotitem li span, .catitemlist li span {
color: #F00;
font-size: 1.2rem;
}
.hotitem li:nth-child(even), .catitemlist li:nth-child(even) { margin-right: 0; }
.hotimg, .catitemlist li a:nth-child(1) img {
border: 1px solid #999;
height: 148px;
width: 148px;
margin-bottom: 8px;
}
.information {
width: 310px;
overflow: auto;
height: 150px;
margin-top: 10px;
font-size: 1.4rem;
line-height: 18px;
border: 1px solid #CCC;
}
.information dt {
margin: 10px 0px 0px 10px;
clear: both;
}
.information dd {
background: #f6f6f6;
padding: 10px;
margin: 5px 10px 10px;
overflow: hidden;
}
.information dd img {
float: left;
margin: 0px 15px 5px 0px;
}
.information .news-new {
padding: 2px 3px;
background-color: #EE3A67;
color: #FFF;
float: left;
margin: 0px 5px 0px 0px;
font-size: 1.2rem;
line-height: 12px;
}
.information dd h3 {
font-weight: bold;
margin-bottom: 5px;
}
dl.information dd p {
font-size: 1.4rem;
line-height: 22px;
margin-top: 0px;
}
.menu-bot {
width: 310px;
margin-top: 10px;
}
.menu-bot li {
background: url(images/sp/bg-menu-2.png) no-repeat left top;
background-size: 310px 41px;
height: 41px;
width: 310px;
font-size: 1.8rem;
line-height: 18px;
text-align: center;
margin-top: -1px;
font-weight: bold;
}
.menu-bot li a {
display: table-cell;
vertical-align: middle;
height: 38px;
width: 310px;
text-decoration: none;
color: #333;
padding-top: 3px;
}
.menu-bot li:hover {
filter: alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
.menu-bot li a:hover { color: #666; }
.tel-bot {
border: 3px solid #d2d2d2;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
}
.tel-bot img { margin-bottom: 10px; }
.tel-bot p {
line-height: 24px;
font-size: 1.6rem;
color: #666666;
margin-top: 10px;
}
.item-bot {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 15px;
}
.item-bot img { margin-bottom: 10px; }
.item-bot p {
line-height: 24px;
font-size: 1.6rem;
color: #666;
margin-top: 10px;
}
.gotop {
text-align: center;
display: block;
width: 310px;
font-size: 1.4rem;
line-height: 20px;
color: #333;
text-decoration: underline;
margin: 0px auto;
}
/* パンくず */
/* START */
.breadcrumb {
font-size: 1.4rem;
margin-top: 10px;
line-height: 18px;
}
.breadcrumb div { display: inline; }
.breadcrumb a { color: #434343; }
/* END */
/* 	商品連動出力 */
/* START */
#shop_items {
margin: 10px 0px 0px 2px;
letter-spacing: -0.4em; /* 文字間を詰めて隙間を削除する */
font-size: 1.4rem;
}
#shop_items li {
display: inline-block;
letter-spacing: 0;
border: 1px solid #707070;
padding: 5px;
width: 136px;
vertical-align: top;
margin: 0px 0px 10px 10px;
overflow: hidden;
}
#shop_items li:nth-child(odd) { margin-left: 0; }
#shop_items a {
color: #03F;
text-decoration: none;
}
#shop_items a:hover {
color: #F96;
text-decoration: underline;
}
.img_box { margin-bottom: 8px; }
.img_box img {
height: 135px;
width: 135px;
}
#shop_items p.name {
width: 136px;
margin: 0px 0px 5px;
line-height: 20px;
}
#shop_items p.price {
color: #F30;
text-align: center;
margin: 0px;
}
#shop_items p.shosai {
text-align: center;
margin: 5px 0px 0px;
}
/* END */
#box_item_right, .shohindetail {
font-size: 1.4rem;
line-height: 22px;
border: 1px solid #CCC;
padding: 9px;
clear: both;
overflow: hidden;
}
#box_item_right .kakaku, .shohindetail .price3 {
font-size: 1.8rem;
line-height: 24px;
font-weight: bold;
color: #f05c00;
margin-bottom: 15px;
}
.shohindetail h2, .shohindetail .price2 {
font-weight: normal;
font-size: 1.3rem;
color: #707070;
}
input[name="frame_color_num"], input[name="cloth_color_num"] {
width: 162px;
height: 20px;
}
.btn-item-cart, #inquiry {
width: 290px;
margin: 0px auto 15px;
text-align: center;
}
.btn-item-cart input:hover {
filter: alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
.goprev {
cursor: pointer;
background: url(images/sp/icon-1.png) no-repeat 10px center;
background-size: 19px 19px;
text-align: center;
font-size: 1.6rem;
line-height: 16px;
text-decoration: underline;
padding-top: 12px;
padding-bottom: 10px;
border: 1px solid #333;
}
.goprev:hover {
filter: alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
.mhlc {
background: url(images/sp/bg-menu-2-1.png) no-repeat left top;
background-size: 310px 64px;
height: 64px;
width: 310px;
font-size: 1.8rem;
line-height: 18px;
text-align: center;
margin-top: -1px;
font-weight: bold;
cursor: pointer;
}
.mhlc span {
display: table-cell;
vertical-align: middle;
height: 61px;
width: 310px;
text-decoration: none;
color: #333;
padding-top: 3px;
}
.mhlc span:hover {
filter: alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
.mhlc.tog.active {
background: url(images/sp/bg-menu-2-1-a.png) no-repeat left top;
background-size: 310px 64px;
}
p.exp1 {
color: #666;
line-height: 20px;
}
span.txt1 {
font-size: 1.2rem;
line-height: 16px;
padding-top: 5px;
display: block;
}
.lista {
font-size: 1.4rem;
line-height: 24px;
list-style: circle outside;
margin: 15px 0px 0px 18px;
}
.footerbg {
background: url(images/sp/bg-body.png) repeat-x left bottom;
padding-bottom: 6px;
}
footer {
width: 320px;
margin-right: auto;
margin-left: auto;
padding-top: 15px;
padding-bottom: 0px;
clear: both;
}
p.ue {
font-size: 1.8rem;
text-align: center;
margin-right: auto;
background: #FFC300;
width: 200px;
margin-left: auto;
margin-top: 0px;
clear: left;
padding-top: 5px;
padding-bottom: 5px;
}
.cr {
font-size: 1.3rem;
text-align: center;
padding-top: 0px;
padding-bottom: 10px;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Google カスタムサーチ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gSearch {
width: auto;
height: 32px;
font-size: 16px!important;
line-height: 16px!important;
text-align: left;
margin: 15px 0 5px;
}
input.gsc-input {
/*height: 30px!important;*/
height: 18px!important;
}
button.gsc-search-button, button.gsc-search-button-v2 {
padding: 11px 20px 10px!important;
}
@media all and (-ms-high-contrast: none) {	/* IE10以上 */
button.gsc-search-button, button.gsc-search-button-v2 {
padding: 11px 20px 2px!important;
}
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dis_bl { display: block; }
.dis_no { display: none; }
.mgt0 { margin-top: 0; }
.mgt5 { margin-top: 5px; }
.mgt10 { margin-top: 10px; }
.mgt15 { margin-top: 15px; }
.mgt20 { margin-top: 20px; }
.mgt30 { margin-top: 30px; }
.mgt40 { margin-top: 40px; }
.mgb0 { margin-bottom: 0; }
.mgb5 { margin-bottom: 5px; }
.mgb10 { margin-bottom: 10px; }
.mgb15 { margin-bottom: 15px; }
.mgb20 { margin-bottom: 20px; }
.mgb30 { margin-bottom: 30px; }
.mgb40 { margin-bottom: 40px; }