@charset "UTF-8";
/* CSS Document */


/* reset */
* {box-sizing:border-box;}
body , html {margin:0; padding:0; }
p , ul , li , dl , dt , dd , figure {margin:0; padding:0; list-style:none;}
h1 , h2 , h3 , h4 , h5 {margin:0; padding:0; line-height:1; font-weight:normal;}
a {text-decoration:none;}
img {width:100%; height:auto; vertical-align:bottom; border:none;}
em ,  strong {font-weight:normal; font-style:normal;}

/* layout */
#wrapper {width:100%; text-align:center; font-size:1.6rem; }
section {width:100%; margin-bottom:80px;}
#mainContent{ margin:0 auto; text-align:left; width:100%;}
.rightContent {background:#f9f9f9;}


@media screen and (max-width:767px){
    body , html{font-size:8px;}
	#wrapper { line-height:1.6;}
	.content {padding:20px;}
}

@media screen and (min-width:768px){
    body , html{font-size:10px;}
	#wrapper { line-height:1.8;}
}


/* common */
#wrapper { letter-spacing:1px; color:#333; font-family: 'Noto Sans JP', sans-serif; font-weight:400;}
a {color:#333;}
section h2 {margin-bottom:30px; padding-bottom:20px; border-bottom:#B7B8B6 1px solid;font-size:3.6rem; text-align:center; font-weight:700; color:#666666; font-family: 'Oswald', sans-serif; }
h3 {font-size:1.6rem; margin-bottom:20px;}

h5 {font-size:1rem;}
.txt_large {font-size:1.8rem;}
.txt_small {font-size:1.2rem}
.alignLeft {text-align:left;}
.alignRight {text-align:right}
.alignCenter {text-align:center;}
.check {margin:10px 0 20px; padding:10px; background:#404040e6; border-radius:5px; font-size:1.4rem; color:#fff;}
.check li{position:relative; padding-left:1.3em;}
.check li::before {position:absolute; left:0; content:''; display:inline-block; width:15px; height:15px; background:url("../img/parts/check.png") no-repeat; background-size:cover;}
.notice {font-size:1.2rem; margin-top:10px; line-height:1.3; color:#e9dfe5;}


@media screen and (max-width:767px){
	.pc {display:none!important;}
	.sp {display:block!important;}
	h4 {font-size:1.4rem; line-height:1.6;}
    .check li::before { top:5px;}
}

@media screen and (min-width:768px){
	.pc {display:block!important;}
	.sp {display:none!important;}
	h4 {font-size:1.6rem; line-height:1.6;}
    .check li::before { top:6px;}
}


/* header */
header {position:fixed; display:block; top:-50px; left:0; width:100%; height:50px; background:rgba(0,0,0,0); color:#fff; text-align:left; z-index:7; transition:all .5s; }
header h1 {position:fixed; top:5px; left:10px; font-size:12px; display:none; line-height:1.4; z-index:9999;}
header h1 span {display:inline-block; }
header h1 span.brandLogo {width:36px; height:36px; background:url("https://www.kyoto-meglas.com/pic-labo/dustbox-logo.png	"); background-size:cover; margin-right:5px;}
header h1 strong{display:block; font-size:16px; font-weight:700;}
header.open {top:0px; background-color: #000000!important;}
header h1.show {display:inline-block;}
header h1 a {color:#fff; }

@media screen and (max-width:767px){
}

@media screen and (min-width:768px){
}

/* nav */

nav {position:fixed; z-index:6; text-align:left; padding-top:65px; top:0; right:0; display:none;  width:80%; max-width:300px; height:100vh; background:#ffffffeb;}
nav > div {padding:.8em; font-size:14px;}
nav h3 {display:block; margin-bottom:8px; padding-bottom:8px; border-bottom:#444444 1px solid; font-weight:700; font-size:16px; color:#444444;}
nav h3 a {color:#fef263;}
nav h3 a span {display:block; text-align:left; margin-bottom:8px;}
nav h3.set a span { width:100px!important;}
nav h3.single a span { width:30px!important;}
nav h3 a span img{width:100%;}
nav ul {margin-bottom:30px; text-align:center; }
nav ul li {margin-bottom:5px; padding-bottom:5px; text-align:left; overflow:hidden; }
nav ul li a{position:relative; color:#444444; display:inline-block; font-weight:700; transition:all .4s;}
nav ul li a::before {content:''; position:absolute; bottom:-2px; left:-100%; display:block; width:100%; height:4px; background-color:rgba(255,255,255,.5); transition:all .4s;}
nav ul li a::after {content:''; width:14px; height:14px; background:url("../img/parts/goto.png") no-repeat; background-size:cover; position:absolute; top:5px; left:-14px; transition:all .4s; opacity: .7;}

@media screen and (max-width:767px){
	nav {overflow: scroll;}
	nav ul li a {padding-left:1.4em;}
	nav ul li a::after {left:0; }
}


@media screen and (min-width:768px){
	nav ul li a:hover {padding-left:1.4em;}
    nav ul li a:hover::before {left:0;}
	nav ul li a:hover::after {left:0;}
}



.topImg {
	position:relative;
	width:100%;

}

/*footer*/
.copyRight {padding:20px 0; font-size:1rem; text-align:center; background:#404040; color:#fff;}


/* copyArea */

    .copy , .introImg {margin-bottom:30px;}

@media screen and (max-width:767px){
    .imgLine2 li:first-child p {margin-bottom:4px;}
    .imgLine4 {display:flex; flex-wrap: wrap;}
    .imgLine4 li{max-width:50%; margin:0 0 2px 0;} 
    .imgLine4 li p{margin:1px 2px;}
}

@media screen and (min-width:768px){
    .introImg {display:table; width:100%;}
    .imgLine2 li{display:table-cell; width:50%; vertical-align:top;} 
    .imgLine2 li:first-child p {margin-right:2px;}
    .imgLine2 li:last-child p {margin-left:2px;}
    .imgLine4 li{display:table-cell; width:25%; vertical-align:top;} 
    .imgLine4 li p {margin:1px;}
}

/* content */
.contentInner {
	max-width:1280px; margin:0 auto;
	padding:10px;
}


/* menu button */
.menuBtn {position:fixed; right:10px; top:5px; z-index:9;  /*background:#000; border-radius:8px;*/ cursor: pointer;}
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 24px;
  height: 24px;
margin:8px 8px 0;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 11px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(11px) rotate(-315deg);
  transform: translateY(11px) rotate(-315deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-11px) rotate(315deg);
  transform: translateY(-11px) rotate(315deg);
}


/*line-up*/
.lineUp{display:flex; flex-wrap: wrap; /*justify-content: space-evenly;*/}
.lineUp {text-align:center;}
.lineUp .sum {position:relative; display:block; margin:0 auto; cursor:pointer; overflow:hidden; border-radius:8px;}
.lineUp .sum em{position: absolute; top:2px; left:2px; display:inline-block; padding:2px 5px; color:#fff; font-size:12px; font-family: 'Oswald', sans-serif; z-index:4;}
.lineUp .sum img { border-radius:8px;}

@media screen and (min-width:768px){
  .lineUp .sum { padding:10px;}
	.lineUp .sum img { transition:all .5s;}
	.lineUp .sum:hover img {opacity:.7; transform:scale(1.04);}
}

@media screen and (max-width:767px){
  .lineUp .sum { padding:2px;}  
}


.detailWindow { width:100%; height:100%; position: fixed;  top:0; left:0; background:rgba(183, 184, 182,.9); z-index:10; text-align:center; color:#fff; }

.praceAndRelated {text-align:left;}

.praceAndRelated dl {width:100%;}
.praceAndRelated dt {width:100%;}

.praceAndRelated dl * {display:block; font-family: 'Noto Sans JP', sans-serif; font-weight:400;}
.praceAndRelated a { padding:.5em; text-align:center; border-radius:6px; }
.praceAndRelated dl dt{margin-bottom:1em;}
.praceAndRelated dl dt h3 {font-size:2.4rem; padding:3px 10px 5px; line-height:1.5; font-family: 'Oswald', sans-serif;}
.praceAndRelated dl dt strong {width:100%; font-size:1.8rem; margin-bottom:10px; border-bottom:#fff 1px solid;}
.praceAndRelated dl dt a {background:#fff; color:#000; font-weight:bold; padding:10px .5em;}
.praceAndRelated dl dt p strong:before {content:'品番：'; font-size:1.2rem;} 


.praceAndRelated dl dd {margin-bottom:15px;}
.praceAndRelated dl dd a {margin-bottom:5px; color:#fff; border:#fff 2px solid;}
.detailClose {position:fixed; top:12px; left:10px; display:block; z-index:5; width:40px; height:40px; background:#fff; border-radius:8px; cursor:pointer;}
.detailClose span {display:block; position:relative; text-align:center;}
.detailClose span::before {content:''; display:block; width:25px; position:absolute; top:19px; left:7px; border-top:3px solid #000; z-index:11; transform:rotate(45deg); margin:0 auto;}
.detailClose span::after {content:''; display:block; width:25px; position:absolute; top:19px; left:7px; border-bottom:3px solid #000; z-index:11; transform:rotate(-45deg); margin:0 auto;}

.pop {background:#836267;}
.cute {background:#ee787d;}
.cool {background:#40386D;}
.solo {background:#8d6449;}

@media screen and (max-width:767px){
    .detailWindow {overflow:scroll;}
    .detailWindowInner {position:relative; margin:20px auto; padding:0 20px; }
	.lineUp > li {width:50%;}
   
}

@media screen and (min-width:768px){
	.lineUp > li {width:25%;}
    .praceAndRelated dl {margin-left:1em;}
    .detailWindow { display:flex; align-items:center;}
    .detailWindowInner {display:flex; margin:0 auto; width:100%; max-width:1040px;}
    .swiperWrap , .praceAndRelated{width:50%;}
    .swiper-wrapper {width:100%!important;}
    .swiper-slide {width:100%!important;}
    .swiper-slide img {width:100%!important;}    
}


#credit {background:#fcfcfc; border-top:#ececec 1px solid;}
#credit > div {padding:3em 10px; margin:0 auto; max-width:1040px; text-align:left;}
#credit dl {margin-bottom:20px;}
#credit dl dt {margin-bottom:5px; font-size:2rem;}
#credit strong {font-weight:700;}

.imgComment {display:table; width:100%;}
.imgComment li { display:table-cell; vertical-align:top;}

.imgComment li p {margin-left:10px;}

.shopBtn {display:block; margin:10px;}
.shopBtn a{display:inline-block; padding:5px 20px; border:#404040 1px solid; color:#000; border-radius:5px;}
.shopBtn a.shopLink {background:#404040; color:#fff; font-weight:700; padding:10px 20px;}

@media screen and (max-width:767px){
    #credit {font-size:1.8rem;}
    .imgComment li figure {width:150px;}
    .shopBtn a {display:block; padding:5px 0; text-align:center;}
}

@media screen and (min-width:768px){
    #credit {font-size:1.6rem;}
    .imgComment li figure {width:200px;} 
    .shopBtn a{display:inline-block; padding:5px 20px; transition:all .5s;}
	.shopBtn a:hover {background:#eee;}
	.shopBtn a.shopLink:hover {background:#000; opacity:.3;}	
}



/*****************************
		LOADING
*****************************/

#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.loader,
.loader:before,
.loader:after {
  background: #666;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader {
  color: #666;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

.loaded {
  opacity: 0;
  visibility: hidden;
}
    
.loadInner {
	display:block;
	width:100%;
	position:absolute;
	top:30vh;
}

/***********関連商品*************/

	.bnrWrap {max-width:1280px; margin:0 auto 80px;}
	.bnrWrap ul {list-style:none; margin:0; padding:0;}
	.bnrWrap ul li {margin-bottom:10px;}
	.bnrWrap img {max-width:1280px;}
	.bnrWrap a img{border-radius:5px;}
	
	@media screen and (min-width:768px){
		.bnrWrap ul {displaay:table; width:100%;}
		.bnrWrap ul li {display:table-cell; padding:5px; vertical-align:top; }
		.bnrWrap a img{transition:all .5s;}
		.bnrWrap a:hover img {opacity:.7;}
	}

	@media screen and (max-width:767px){
		.bnrWrap ul li {padding:10px; }
	}


/***********TOPボタン*************/
.topBtn {
	display:block;
	position:fixed;
	bottom:20px;
	right:20px;
	z-index:8!important;
	background:rgba(0,0,0,.7);
	opacity:0;
	transition: all 1s;
	border-radius:30px;
}

.topBtn.btnHide {
	background:#B7B8B6;
	opacity: 1;
	transition: all 1s;
}

.topBtn span {
	display:block;
	width:10px;
	height:10px;
	border-top:#fff 2px solid;
	border-left:#fff 2px solid;
	margin:18px 17px 15px;
	transform: rotate(45deg);
}

.komidashi{
margin-bottom:30px; font-size:2.6rem; text-align:center; font-weight:600; color:#666666; font-family: 'Shippori Mincho B1', sans-serif;
}