@charset "utf-8";
/*------------------------------------------------------------------------------ TOP --*/
#cont {
	position:relative;
	min-width:960px;
	margin:0 auto;
	padding:100px 0 80px;
    background-color: #fff;
}
#main_ttl {
	position:relative;
	width:100%;
	height:250px;
	margin:0;
	padding:0;
	overflow: hidden;
	z-index:10 !important;
	border-bottom:#7a3d6f 10px solid;
}
#main_ttl h2 {
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	font-size:3.2rem;
	line-height:1.6;
	font-weight:400;
	text-align:center;
	width:100%;
	color:#fff;
}

#main_ttl{
	background:url(../img/scene/kv.jpg) center center no-repeat;
	background-size:cover;
	}

 @media screen and (max-width:767px) {
#cont {
	position:relative;
	min-width:320px;
	margin:0 auto;
	padding:13vw 0 10vw;
	z-index:10 !important;
	background:#fff;
}
#main_ttl {
	position:relative;
	width:100%;
	height:53vw;
	margin:0;
	padding:0;
	overflow: hidden;
	z-index:10 !important;
	border-bottom:#7a3d6f 5px solid;
}
#main_ttl h2 {
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	font-size:4.6rem;
	line-height:1.6;
	font-weight:400;
	text-align:center;
	width:100%;
	color:#fff;
}

#main_ttl{
	background:url(../img/scene/sp/kv.jpg) center center no-repeat;
	background-size:cover;
	}

}

/* SCENE
----------------------------------------*/
#scene_cont {
    margin-top: 60px;
    font-size:1.4rem;
    line-height:1.8;
    text-align: center;
    letter-spacing: 0.1em;
}

#scene_photo {
    margin: 50px　auto;
}


#scene_photo li {
    float: left;
    width: 25%;
}

#scene_photo li a {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000;
}

#scene_photo li img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
}

#scene_photo li a:hover img {
    opacity: 0.6;
    filter: alpha(opacity=60);
}

.index_back img{
    width: 150px;
    height: 150px;
}

.index_back a{
    width: 150px;
    height: 150px;
    display: block;
    margin: 30px auto;
    color: #fff;
    overflow: hidden;
    transition: 0.5s;
}

.index_back a:hover{
    opacity: 0.6;
    transform: scale(0.95,0.95);
}


 @media screen and (max-width:767px) {
     #scene_photo li {
         width: 50%;
         height: auto;
     }

     #scene_photo li a {
         width: 100%;
         height: auto;
     }

     #scene_photo section > div {
         margin: 25px 0 0;
     }
     
     .index_back img{
         width: 120px;
         height: 120px;
     }

     .index_back a{
         width: 120px;
         height: 120px;
     }
}