@charset "UTF-8";
/* ======================================================== */
/*  ALL */
/* ======================================================== */
/* ----------------------------------------
   base
---------------------------------------- */

html,body {
    height: 100%;
}

img{
	
	max-width:100%;}
	
	
/** PC版 **/
@media screen and (min-width: 769px) {
body {
	background:url(../../img/left_bg.jpg) 0 0 no-repeat;
}

#wrapper{
    margin: 0 auto;
position:relative;	
	}
	
	

#wrapper #left_area h1{
	width:90%;
	position:relative;
	z-index:100;
}
#wrapper #left_area nav li:nth-child(2){
	background:url(../../img/navi_arrow.png) 0 0 no-repeat;
	background-size:12%;
}

#wrapper #main_area{
	
		
	float:right;
	padding-top:66px;
	padding-bottom:50px;
	background:url(../img/main_bg.jpg) 0 0 no-repeat;
	background-size:cover;
	width:78%;
	/*margin-right:-5%;*/
height:100%;
	position:relative;
	overflow:hidden;
	}
	
#main_area .content{
	max-width:760px;
	width:70%;
	padding-left:5%;
	padding-right:5%;
	margin:0 auto;
	padding-top:65px;
	background:url(../../img/top_bg.gif) 0 0 repeat-x;
	background-color:#FBF8EF;
	position:relative;
	padding-bottom:50px;
	margin-bottom:60px;
}
#main_area .content h2{
	text-align:center;
	
}
#main_area .content h2 img{
	max-width:100%;
	width:auto;
	position:relative;
	z-index:2;
}
#main_area .content .leaf{
	position:absolute;
	top:-40px;
	right:100px;
	width:50%;
	z-index:1;
}

#main_area .content h3{
	border-top:1px solid #7d7c77;
	position:relative;
	margin-top:125px;
}
#main_area .content h3 p{
	position:absolute;
	top:-20px;
	left:0px;
	width:100%;
	text-align:center;
}



#main_area .content h3 p img{
	width:auto;
}


#main_area .story nav{

margin: 0 auto;
padding-top:3%;
padding-left:5%;
}


#main_area .story nav li{

width:14%;
border:solid 2px #ac75a9;
float:left;
margin:0.3em;
text-align:center;
box-sizing:border-box;
color:#892a83;
font-size:16px;
padding:0.3em 0;
}


#main_area .story nav li a{

text-decoration:none;
color:#892a83;
}


#main_area .story nav li.active{


background:#892a83;
color:#fff;
}


#main_area .story .index {
	
	clear:both;
	padding-top:5%;
	width:60%;
	margin:0 auto;
	}
	
#main_area .story .intro {
clear:both;	
font-size:28px;
text-align:center;
padding:1% 0 2% 0;
	}
	

#main_area .story .index .num{
	
	background:url(../img/title_bg.png) 50% 50% no-repeat;
	background-size:contain;
	font-size:30px;

	color:#fff;	
	width:185px;
	height:87px;
	text-align:center;
letter-spacing:-2px;
float:left;
text-indent:-3px;
		}
	
#main_area .story .index .num span{

		font-weight:bold;
		font-size:48px;
	}	

#main_area .story .index .title{

font-size:48px;
color:#892a83;
float:left;
padding-left:2%;
	}	
	
#main_area .story .index .title rt{	

font-size:14px;

}


#main_area .story .multiple-item{
	
	clear:both;
	padding:0 0 1% 0!important;
	margin-top:0!important;
	
	}
}



@media screen and (min-width: 750px) and (max-width: 768px){
/*アイテム*/



#main_area .item .banner{
width:46%;
margin:7% auto 0 auto;
text-align:center;

}

#main_area .content h3{
	border-top:1px solid #7d7c77;
	position:relative;
	margin-top:20%!important;
}
#main_area .content h3 p{
	position:absolute;
	top:-20px;
	left:0px;
	width:100%;
	text-align:center;
}

#main_area .content h3 p img{
width:35%!important;
}




}
	

@media screen and (max-width: 768px) {
	html,body {
	height:auto;
}
#wrapper{
	height:auto;
	position:relative;
	background-color:#faf6e9;
}
#wrapper #main_area{
		
	padding-top:30px;
	padding-bottom:150px;
	background:url(../img/main_bg.jpg) 0 0 no-repeat;
	background-size:cover;
	width:100%;
	position:relative;
	}
	
#main_area .content{
	width:80%;
	padding-left:5%;
	padding-right:5%;
	margin:0 auto;
	padding-top:40px;
	background:url(../../img/top_bg.gif) 0 0 repeat-x;
	background-size:2em;
	background-color:#FBF8EF;
	position:relative;
	padding-bottom:30px;
}
#main_area .content h2{
	text-align:center;
	width:35%;
	margin:0 auto;
}
#main_area .content h2 img{
	max-width:100%;
	width:auto;
	position:relative;
	z-index:2;
}
#main_area .content .leaf{
	position:absolute;
	top:-20px;
	right:30px;
	width:50%;
	z-index:1;
}

#main_area .content .logo{
	text-align:center;
	width:70%;
	margin:1% auto;
}

#main_area .content h3{
	border-top:1px solid #7d7c77;
	position:relative;
	margin-top:30px;
}
#main_area .content h3 p{
	position:absolute;
	top:-15px;
	left:0px;
	width:100%;
	text-align:center;
}
#main_area .content h3 p img{
	width:50%;
}




}



@media screen and (max-width: 768px){
/*アイテム*/

#main_area .content{padding-bottom:50px;}

#main_area .content h3{
	border-top:1px solid #7d7c77;
	position:relative;
	margin-top:20%!important;
}
#main_area .content h3 p{
	position:absolute;
	top:-20px;
	left:0px;
	width:100%;
	text-align:center;
}

#main_area .story nav{

margin: 0 auto;
padding-top:3%;
padding-left:2%;
}



#main_area .story nav ul{

}


#main_area .story nav li{
width:4.5em;
border:solid 2px #ac75a9;
float:left;
margin:0.3em;
text-align:center;
box-sizing:border-box;
color:#892a83;
font-size:14px;
padding:0.3em 0;
}

#main_area .story nav li.active{


background:#892a83;
color:#fff;
}



#main_area .story nav li a{

text-decoration:none;
color:#892a83;
}




#main_area .story .index {
	
	clear:both;
	padding-top:5%;
	width:auto;
	margin:0 auto;
	}
	


#main_area .story .index .num{
	
	background:url(../img/title_bg.png) 0 0 no-repeat;
	background-size:contain;
	font-size:24px;

	color:#fff;	
	width:5.5em;
	height:3em;

	text-align:center;
letter-spacing:-2px;
float:left;
text-indent:-3px;

		}
	
#main_area .story .index .num span{

		font-weight:bold;
		font-size:36px;
	}	

#main_area .story .index .title{

font-size:36px;
color:#892a83;
float:left;
padding-top:1%;
padding-left:1%;
text-align:center;
	}	


#main_area .story .intro {
clear:both;	
font-size:20px;
text-align:center;
padding:1% 0 1% 0;
	}
	

#main_area .story .index .title rt{	

font-size:14px;

}




}

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

#main_area .content h3 p img{
width:30%!important;
}
}



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




}

	.multiple-item
{
	max-width:695px!important;
	margin:5% auto!important;
	float:none!important;
	
	}
	
.slick-dots
{
    position: absolute;
    bottom: -55px!important;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0 auto!important;

    list-style: none;
    text-align: center;
	width:100%!important;
			float:none!important;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 35px!important;
    height: 35px!important;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
		background:url(../img/pager.png) 50% 50% no-repeat;
		backgrund-size:contain;
		float:none!important;

}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active 
{

		background:url(../img/pager_on.png) 50% 50% no-repeat!important;
		backgrund-size:contain;

}