@charset "utf-8";
body {
	font-family:Avenir, 'Open Sans', sans-serif, "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #777;
}



.header {
	position:relative;
	display:block;
	max-width:960px;
	height:80px;
	background:#fff;
     margin:0 auto 0;
     color: #ddd;
     border-bottom: 1px solid #fff;
	 padding-bottom:10px
 }
.header-wrap{
	position:absolute;
	left:80px;
	bottom:5px;
}
  .header-logo{
	 margin-left:5px;
	 margin-top:25px;
	 float:left;
	 }

.header-button{
	font-size:1.2em;
	font-weight:600;
	color:#999;
	background:#fff;
  /* border: 1px solid #eee;*/
	border-radius:5px;
	padding-left:0.5em;
	padding-right:0.5em;
	padding-top:0.1em;
	padding-bottom:0.11em;
}
 
#layout,
#layout {
    position: relative;
    left: 0;
    padding-left: 0;
}
.content {
    margin: 0 auto;
    padding: 0 2em;
    max-width: 960px;
    line-height: 1.6em;
}



 .header-inner{
	 display:block;
	 width:100%;
	 background:#ccc;
 }
    .header h1 {
		color:#666;
        margin: 0.2em 0;
        font-size: 3em;
        font-weight: 300;
    }
     .header h2 {
        font-weight: 300;
        color: #ccc;
        padding: 0;
        margin-top: 0;
    }
.content-subhead {
    margin: 50px 0 20px 0;
    font-weight: 300;
    color: #888;
	text-align:center;
}
p.b-break {/*自動折り返し*/
	word-break: break-all;
}
.pure-img-responsive {
    max-width: 100%;
    height: auto;
}
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------L-box↓-----------------------------------------*/
.L-box{
	background:#fff;
	box-sizing:border-box;
	display:block;
}
/*------------onMouse↓-----------------------------------------*/
.imgonmouse {
	display:block;
	margin:0 5px;
	}
.imgonmouse img {
  margin-top: 0;
  margin-bottom: 5px;
}
.imgonmouse ul {
  padding: 0px;
  margin:0;
  }
.imgonmouse ul li img {
	box-sizing:border-box;
  height: auto;
  width: auto;
  border: 1px solid #eee;
  padding: 2px;

  margin-bottom: 5px;
}
.imgonmouse ul li {
	width:20%;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  float: left;
}
/*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/
/*------------R-box↓-----------------------------------------*/
.R-box {
	background:#fff;
	box-sizing:border-box;
	display:block;
}
#info-box{
	margin:0 0 5px 0;
}
#info-box .adjust-box {
    position: relative;
    width: 100%;
    height: auto;
    background: #fff;
	margin:0 0 5px 0;
}
#info-box .box-title:before {
	background:#fff;
    content: "";
    display: block;
    padding-top: 10%;
	margin:10px 0 5px 0;
}
#info-box .box-info:before {
    content: "";
    display: block;
    padding-top: 84%;
}
#info-box .inner {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}
#info-box .center {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
/*------------R-box↓-----------------------------------------*/
.title-box{
	width:100%;
	height:10%;
	background:#fff;
	margin:0 0 5px 0;
	padding:0;
}
.product-info{
	width:100%;
	height:40%;
	background:#fff;
	margin:0 5px;
}
.price-box{
	width:100%;
	height:10%;
	background:#fff;
	margin:0 0 5px 0 ;
	padding:0;
}
.pager-box:before{
	content:"";
	display:block;
	padding-top:14%;
}
/*------------slick　設定↓-------------------------------------------------*/
.slider {
	margin: 0 15px;
}
.slick-prev:before, .slick-next:before {/*矢印の色*/
	color: #0ff;
}
.slick-next {/*矢印の位置*/
	right: 20px;
	z-index: 99;
}
.slick-prev {
	left: 15px;
	z-index: 100;
}
.slick-dots li.slick-active button:before, .slick-dots li button:before {
	color: #fff;/*ドットの色*/
}
img {/*画像の横幅*/
	max-width: 100%;
	height: auto;
}
/*------------footer↓------------------------------------------------*/
div.footer-sample {
	text-align:center;
}
div.copyright-sample {
	color: #999;
	font-size: 1em;
}
/*------------Media Queries↓----(1em=16px)----------------------------*/
@media screen and (min-width: 961px) {/*961以上*/
.sp{
	display:none;
}
.product-price{
	font-size:1.5em;
	line-height:1em;
}
#info-box .adjust-box p {
	margin-top:0;
	font-size:1em;
	line-height:1.2em;
}
.product-title{
	font-size:36px;
	line-height:1em;
}
}
@media screen and (max-width: 960px) {/*960まで*/

.sp{
	display:none;
}
.product-title{
	font-size:3.7vw; /* max-width:800pxなので、24px÷800px×100=3vw */
	line-height:1em;
}
#info-box .adjust-box p {
	margin-top:0;
	font-size:1.65vw; /* max-width:800pxなので、24px÷800px×100=3vw */
	line-height:1.2em;
}
.product-price{
	font-size:2.5vw; /* max-width:800pxなので、24px÷800px×100=3vw */
	line-height:1em;
	font-weight:600;
}
}
@media (min-width: 769px) {/*769以上*/

.sp{
	display:none;
}
    .content {
        padding-left: 2em;
        padding-right: 2em;
    }
    #layout {
        padding-left: 150px; /* left col width "#menu" */
        left: 0;
    }
    #layout.active .menu-link {
        left: 150px;
    }
}

@media screen and (max-width: 768px){
 .R-box {
 width: 100%;
}
 .L-box {
 width: 100%;
}
.pc{
	display:none;
}
.sp{
	display:block;
	width:100%;
	height:auto;
	background:#fff;
	margin:0 0 5px 0;
	padding:0;
}

.title-box{
	text-align:center;
	margin:15px 0 5px;
	}
.product-title{
	font-size:7vw; /* max-width:800pxなので、24px÷800px×100=3vw */
	line-height:1em;
}
#info-box .adjust-box p {
	margin-top:0;
	font-size:3.5vw; /* max-width:800pxなので、24px÷800px×100=3vw */
	line-height:1.2em;
}
.product-price{
	font-size:4vw; /* max-width:800pxなので、24px÷800px×100=3vw */
	line-height:1.2em;
	font-weight:600;
}


#info-box{
	margin:0 0 5px 0;
}
#info-box .adjust-box {
    position: initial;
    width: 100%;
    height: initial;
    background: #fff;
	margin:0 0 5px 0;
}
#info-box .box-title:before {
	background:#fff;
    content: initial;
    display: initial;
    padding-top: 10%;
	margin:10px 0 5px 0;
}
#info-box .box-info:before {
    content: initial;
    display: initial;
    padding-top: initial;
}
#info-box .inner {
    position: initial;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}
#info-box .center {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}}

@media screen and (max-width: 768px) and (min-width: 481px) {/*481から768*/
/* .R-box {
 width: 100%;
}
 .L-box {
 width: 100%;
}
#info-box .box-info:before {
    content: "";
    display: block;
    padding-top: 40%;
}
}*/
@media screen and (max-width: 480px) {/*480まで*/
 /*.R-box {
 width: 100%;
}
.L-box {
 width: 100%;
}
#info-box .box-info:before {
    content: "";
    display: block;
    padding-top: 40%;
}*/
}