body {
	font-family: "Times New Roman", serif, 'PT Sans', "Hiragino Kaku Gothic ProN", "¥Ò¥é¥®¥Î³Ñ¥´ Pro W3", "Hiragino Kaku Gothic Pro", "Þâ¥´¥·¥Ã¥¯ÂÎ", "Yu Gothic", "YuGothic",'Meiryo UI', "£Í£Ó £Ð¥´¥·¥Ã¥¯", "MS PGothic", "¥á¥¤¥ê¥ª", sans-serif!important;
  color: #2b2c33!important;
}

.bx-wrapper .bx-caption {
   background: transparent!important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .1);
  text-align:right;
}
.bx-wrapper .bx-caption span {
    color:#fff!important;
    font-family: Arial;
    display: block;
    font-size: 160%!important;
    letter-spacing:.5px!important;
   font-family: "Times New Roman", serif, 'PT Sans', "Hiragino Kaku Gothic ProN", "¥Ò¥é¥®¥Î³Ñ¥´ Pro W3", "Hiragino Kaku Gothic Pro", "Þâ¥´¥·¥Ã¥¯ÂÎ", "Yu Gothic", "YuGothic",'Meiryo UI', "£Í£Ó £Ð¥´¥·¥Ã¥¯", "MS PGothic", "¥á¥¤¥ê¥ª", sans-serif!important;
  padding:10px 15px!important;
}




.ttl-h2 {
    margin-top:40px;
    margin-bottom:30px;
}
.recommend-items {
  padding:30px 0
}
.forcas-box {
  padding-bottom:30px;
}
@media (max-width: 768px) {
  .recommend-items {
  padding:10px 0
}
  #header-wrapper {margin-bottom: 0;}
  .bx-wrapper .bx-caption span {text-align:center;}
  .bx-wrapper .bx-caption {display:none;}
  .slide-container {padding:0!important;}
  .slide-box2 {padding:0!important;}
  .prd-lst {padding:1.5px!important;}
  .recommend-box {padding:1.5px!important;}
  .forcas-box {padding:0 15px 15px 15px!important;}
  .ttl-h2 {margin-top:20px;margin-bottom:10px;}
.effect1 {
	position: relative;
	overflow: hidden;
	width: 100%;
	height:100%;
}
.effect1-caption {
	width: 100%;
	height: 100%;
	text-align:center;
}
.effect1-caption h3 {
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:200px;
	height:25px;
	font-weight: 500;
	font-size:180%;
	margin:auto;
	position: absolute;
	letter-spacing:1px;
	color:rgba(255,255,255,.8);	
}
  .effect2-caption h3 {
    display:none;
  }
}


.after-box {
  margin-bottom:15px;
}

.after {
    background: rgba(232,235,243,.5);padding: 50px 15px;margin:0;text-align:center;font-size:150%;box-shadow: 0 1px 1px rgba(0, 0, 0, .2), inset 0 1px 1px rgba(255, 255, 255, .3);z-index:100;
  }



@media (min-width: 768px) {
  .effect1,.effect2 {
	position: relative;
	overflow: hidden;
	width: 100%;
	height:100%;
}
.effect1-caption,.effect2-caption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(7,6,8,.3);
	-webkit-transition: .8s;
	transition: .8s;
	opacity: 0;
	text-align:center;
	color:#fff;
}
.effect1:hover .effect1-caption,.effect2:hover .effect2-caption {
	opacity: 1;
}
.effect1-caption h3,.effect2-caption h3 {
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:200px;
	height:30px;
	margin:auto;
	position:absolute;
	letter-spacing:1px;
   font-size:230%;
}
  .after {
    background: rgba(232,235,243,.5);padding: 50px 15px;margin:0;text-align:center;font-size:200%;box-shadow: 0 1px 1px rgba(0, 0, 0, .2), inset 0 1px 1px rgba(255, 255, 255, .3);z-index:100;
  }
}


/*--slide202006--*/
#slideshow {height: 100%;box-shadow: 0px 0px 2px -2px #000000;}
	
.cb-slideshow,
.cb-slideshow:after {width: 100vw;height: 100vh;top: 0px;left: 0px;z-index: 0;margin-right: -15px;margin-left: -15px;list-style: none;}
	
.cb-slideshow li span {width: 100vw;height: 100vh;position: absolute;top: 0px;left: 0px;color: transparent;background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;opacity: 0;z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 30s linear infinite 0s;
    -moz-animation: imageAnimation 30s linear infinite 0s;
    -o-animation: imageAnimation 30s linear infinite 0s;
    -ms-animation: imageAnimation 30s linear infinite 0s;
    animation: imageAnimation 30s linear infinite 0s; }
	
.cb-slideshow li div {z-index: 1000;position: absolute;left: 0%;top: 30%;width: 100%;opacity: 0;color: #fff;
     -webkit-animation: titleAnimation 30s linear infinite 0s;
    -moz-animation: titleAnimation 30s linear infinite 0s;
    -o-animation: titleAnimation 30s linear infinite 0s;
    -ms-animation: titleAnimation 30s linear infinite 0s;
    animation: titleAnimation 30s linear infinite 0s; }
/*slider-text
.cb-slideshow li div h3 {z-index: 50;font-family: 'Playfair Display', serif;font-size: 8vmin;olor: #fff;font-weight: bold;line-height: 1.2;text-align: center;}
.cb-slideshow li div h3 i {display: block;font-size: 3vmin;}
.cb-slideshow li div h3 em {color: #bb342e;font-size: 10vmin;font-weight: bold;}
*/
.cb-slideshow li:nth-child(1) span {background-image: url("https://masana-jewelry.com/images/online/1l.jpg");
}
.cb-slideshow li:nth-child(2) span {background-image:  url("https://masana-jewelry.com/images/online/2l.jpg");
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {background-image:  url("https://masana-jewelry.com/images/online/3l.jpg");
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;   
}
.cb-slideshow li:nth-child(4) span {background-image:  url("https://masana-jewelry.com/images/online/4l.jpg");
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {background-image:  url("https://masana-jewelry.com/images/online/5l.jpg");
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;   
}
.cb-slideshow li:nth-child(2) div {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;   
}
	.cb-slideshow li:nth-child(4) div {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;   
}

	
@keyframes imageAnimation {
    0% { opacity: 0; animation-timing-function: ease-in; }
    4% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes titleAnimation {
    0% { opacity: 0 }
    4% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}	
	
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
    opacity: 1;
}		
	@media (min-width: 768px) {
		.cb-slideshow,
.cb-slideshow:after {width: 50vw;height: 100vh;top: 0px;left: 0px;z-index: 0;margin: 0;list-style: none;}
	.cb-slideshow li span {width: 50vw;left: 0px;color: transparent;background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;opacity: 0;z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 30s linear infinite 0s;
    -moz-animation: imageAnimation 30s linear infinite 0s;
    -o-animation: imageAnimation 30s linear infinite 0s;
    -ms-animation: imageAnimation 30s linear infinite 0s;
    animation: imageAnimation 30s linear infinite 0s; }
      
	.cb-slideshow2 li span {width: 50vw;height: 100vh;position: absolute;top: 0px;right: 0px;color: transparent;background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;opacity: 0;z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 30s linear infinite 0s;
    -moz-animation: imageAnimation 30s linear infinite 0s;
    -o-animation: imageAnimation 30s linear infinite 0s;
    -ms-animation: imageAnimation 30s linear infinite 0s;
    animation: imageAnimation 30s linear infinite 0s; }
      
	.cb-slideshow2 li:nth-child(1) span {background-image: url("https://masana-jewelry.com/images/online/1r.jpg");
}
.cb-slideshow2 li:nth-child(2) span {background-image:  url("https://masana-jewelry.com/images/online/2r.jpg");
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.cb-slideshow2 li:nth-child(3) span {background-image:  url("https://masana-jewelry.com/images/online/3r.jpg");
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;   
}
		.cb-slideshow2 li:nth-child(4) span {background-image:  url("https://masana-jewelry.com/images/online/4r.jpg");
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
.cb-slideshow2 li:nth-child(5) span {background-image:  url("https://masana-jewelry.com/images/online/5r.jpg");
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;   
}


.cb-slideshow2 li:nth-child(2) div {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.cb-slideshow2 li:nth-child(3) div {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;   
}
		.cb-slideshow2 li:nth-child(4) div {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
.cb-slideshow2 li:nth-child(5) div {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;   
}
}
      


    
