@charset "shift_jis";

header {
    position: absolute;
}



.gravure #center {
    max-width:1200px;
	width:100%;
	margin: 0 0 10px 0;
}

.gravurelist{
	margin:0 auto;
	max-width:1215px;
	}

.gravurelist ul{
	display:inline-block;
	width:285px;
	padding:10px;
	box-sizing: border-box;
	border: 2px solid #eee;
	margin:8px 5px;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	color:#a67b2d;
	position:relative;
	background-color: #ff7aaf;
	background-image: url(../images/hedbg.png);
	color:#fff;
	}
	
.gravurelist ul a{
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	top:0;
	}
	

.gravurelist ul span{
	font-size:15px;
	}

.gravurelist ul:hover{
	border: 2px solid #eee;
	background-color:#444;
  filter: drop-shadow(1px 1px 3px rgba(100,50,0,0.7));
	}
	
.gravurelist ul:hover span{
	color:#fff;
	}
	
.gravuremain{
	position:relative;
	background-color: #ff7aaf;
	padding:34px 0 33px 34px;
	margin-bottom: 50px;
	background-image: url(../images/hedbg.png);
	border-radius:20px;
	}
	
.gravuremain .slick-dotted.slick-slider {
    margin-bottom: 0;
}
	
.gravuremain .slick-list{
	width:500px;
	vertical-align:top;
	display:inline-block;
	z-index:50;
	}
	
.gravuremain .slick-dots{
    display: inline-block;
        max-width: 605px;
		margin:27px 0 0 27px;
		}

.gravuremain .slick-dots li{
	display: inline-block;
    width:90px;
}

.gravuremain .slick-dots li img{
	display:block;
	margin:0;
	padding:0;
}

.gravuremain .slick-dots .slick-active{
	vertical-align:top;
	}
	
.gravuremain .slick-dots .slick-active img{
	border: 5px solid #FF9900;
	box-sizing: border-box;
	border-radius:20px;
	}
	
.profbg{
	background-color:#FFF;
	width:100%;
	position:absolute;
	bottom: 59px;
left: 0;
padding:20px 0 15px 562px;
box-sizing: border-box;
	}
	
.offprof{
	text-align: center;
	}
	
.offprof div{
	display:inline-block;
	}
	
.graoff{
	position:absolute;
	top: 56px;
	right:0;
	}
	
	
/*-----------------------------------------------------*/
	
@media screen and (max-width: 1290px){	




.gravure #center {
    max-width:1000px;
}

.gravurelist{
	margin:0 auto;
	max-width:910px;
	}
	
.gravuremain{
padding: 34px 0 33px 26px;
		}
	
.gravuremain .slick-dots{
    display: inline-block;
        max-width:442px;
		margin:16px 0 0 10px;
		}

.gravuremain .slick-dots li {
    width: 78px;
}

.profbg {
    padding: 20px 0 15px 535px;
}



}

@media screen and (max-width: 1070px){

header{
    position: fixed;
}

.gravuremain{
padding: 34px 10px 33px 10px;
text-align:center;
		}

.gravuremain .slick-dots {
    max-width: 352px;
}

.profbg {
    background-color: #FFF;
    width: 100%;
    position: static;
    bottom: 59px;
    left: 0;
    padding:15px 0 10px 0;
    box-sizing: border-box;
}

.headerbottom{
	height:50px !important;
	}

}

@media screen and (max-width: 900px){

#center {
    margin: 0 0 10px 0;
    width:100%;
    text-align: center;
}


.gravuremain {
    padding: 34px 0px 33px 0px;
}

.gravurelist ul {
    width: 200px;
}

.gravuremain .slick-dots li {
    width: 49px;
    margin:-1px 2px;
}

.gravuremain .slick-dots {
    max-width: 490px;
    margin: 0 0 10px 0;
}


}

@media screen and (max-width: 820px){



@media screen and (max-width: 660px){




}

@media screen and (max-width: 500px){


.gravuremain .slick-list{
	max-width:500px;
	width:100%;
	}
	
.gravurelist ul {
    width:150px;
	margin:2px 0;
}


}