@charset "utf-8";

/* structure
------------------------------------------------------------*/
div#header{
	background:url(../img/bk_0.85.png) repeat center center;
	z-index:10;
}
div#container{
	margin:100vh auto 0;
}
#contents{
	max-width:100%;
	margin-top:-45px;
	background:transparent;
}
#contents-inner{
	padding:0;
}
div#contents h2{
	font-size:24px;
	text-align:center;
}
@media only screen and (max-width: 1000px){
	div#contents-wrap{
		margin:0;
	}
}
@media only screen and (max-width: 767px){
	div#contents-wrap{
		margin:0 15px;
	}
}

/* slideshow
------------------------------------------------------------*/
div#slideshow,
div.slider-wrapper,
ul#slider,
ul#slider li,
ul#slider li a,
ul#slider li span{
	display:block;
	width:100%;
	height:100vh;
}
div#slideshow{
	position:absolute;
	top:0;
	z-index:0;
}
div#slideshow p#logo60th{
	width:45vh;
	height:45vh;
	max-width:450px;
	max-height:450px;
	position:absolute;
	top:30vh;
	left:50%;
	margin-left:-22.5vh;
	text-align:center;
	z-index:2;
}
div#slideshow p#logo60th img{
	width:100%;
}
ul#slider li a,
ul#slider li span{
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}


/* topics
------------------------------------------------------------*/
div#topics{
	width:1024px;
	position:relative;
	margin:0 auto 35px;
	overflow:hidden;
	z-index:2000;
}
div#topics h2{
	margin:0 0 25px;
	padding-bottom:40px;
	text-align:center;
	background:url(../img/deco.png) no-repeat center bottom;
}
@media only screen and (max-width: 1064px){
	div#topics{
		width:auto;
	}
}


/* refine */
#topics #refine{
	margin: 0 auto;
	text-align:center;
}
#topics #refine li{
	width:290px;
	margin:0 22px 0 0;
	text-align:center;
	box-shadow:0px 0px 5px 3px #ccc;
	background-color:white;
}
#topics #refine li.all{
	width:74px;
	margin:0;
}
#topics #refine li a{
	display:block;
	padding:10px 0 9px;
	text-align:center;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
#topics #refine li a:hover{
	color:white;
	background-color:#ff6400;
}
@media only screen and (max-width: 1064px){
	#topics #refine{
		width: auto;
	}
	#topics #refine li,
	#topics #refine li.all{
		width:23%;
		margin: 5px 1%;
	}

}


/* pick up */
div#topics ul.pickup{
	width:100%;
	margin:10px 0 30px;
	text-align:center;
}
div#topics ul.pickup li{
	width:300px;
	margin:0 57px 0 0;
	text-align:center;
}
div#topics ul.pickup li:nth-child(3){
	margin:0;
}
	
div#topics ul.pickup li span{
	display:block;
	width:300px;
	height:300px;
	border:1px #ccc solid;
	overflow:hidden;
	background-color:white;
	background-repeat:no-repeat;
	background-position:center top;
	background-size:cover;
}
div#topics ul.pickup li a:hover{
    opacity:0.50;
    filter: alpha(opacity=50);
}
div#topics ul.pickup li a{
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
div#topics ul.pickup li span.ttl{
	width:auto;
	height:auto;
	margin-top:5px;
    padding-left:15px;
	text-align:left;
	border:none;
	background:url(../img/arr.png) no-repeat left 0.4em;
}	

@media only screen and (max-width: 1064px){
	div#topics ul.pickup li{
		width:30%;
		margin:0 5% 0 0;
	}
	div#topics ul.pickup li span{
		width:100%;
		height:200px;
	}
}

@media only screen and (max-width: 640px){
	div#topics ul.pickup li span{
		height:150px;
	}
}
@media only screen and (max-width: 360px){
	div#topics ul.pickup{
		margin:10px 0;
	}
	div#topics ul.pickup li{
		width:100%;
		margin:0 0 10px 0;
		padding:0 0 10px 0;
		border-bottom:1px #ccc dotted;
	}
	div#topics ul.pickup li span{
		float:right;
		display:block;
		width:120px;
		height:90px;
		border:1px #ccc solid;
	}
	div#topics ul.pickup li span.ttl{
		float:none;
		width:auto;
		margin-top:0;
		padding-right:20px;
		border:none;
	}
	div#topics ul.pickup li:nth-child(3){
		margin:0;
		padding:0;
		border-bottom:none;
	}
}




/* list */
div#topics .list{
	margin:10px 0;
}
#topics .list li{
	padding:10px 0 10px 20px;
	border-top:1px #ccc dotted;
}

div#topics ul.list li.icon-topics::before {content: "お知らせ";background-color: #5a7896;}
div#topics ul.list li.icon-event:before {content:"イベント";background-color:#967878;}
div#topics ul.list li.icon-cs:before    {content:"社会貢献";background-color:#508778;}

div#topics ul.list li::before {
    display: inline-block;
    width: 8em;
    margin: 0 2em 0 0;
    padding: 0;
    color: white;
    text-align: center;
}

div#topics .list li span.new{
	padding:0 0 0 5px;
	color:#ff7388;
	font-weight:bold;
}
div#topics p.link{
	clear:both;
	margin:20px auto 0;
	border-top:1px solid #969696;
}
div#topics p.link a{
    display:block;
	width:280px;
	margin:20px auto;
	padding:10px 0 11px;
	text-align:center;
	box-shadow:0px 0px 5px 3px #ccc;
	background-color:white;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
div#topics p.link a:hover{
	color:white;
	background-color:#ff6400;
}
@media only screen and (max-width: 510px){
	#topics .list li {
		padding: 10px 0;
	}
}
@media only screen and (max-width: 360px){
	div#topics ul.list li::before {
		margin: 0;
	}
}


/* sns
------------------------------------------------------------*/
div#sns{
	width:auto;
	margin:30px auto;
	padding:30px 10px 30px 25px;
	text-align:center;
	overflow:hidden;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	background-color:white;
}
@media only screen and (max-width: 800px){
	div#sns{
		padding:30px 0;
	}
	div.image-box{margin-left:0!important;}
}


/* service and omotenashi
------------------------------------------------------------*/

div#service,
div#omotenashi{
	clear:both;
	margin:60px 0 35px;
}
div#service div.inner,
div#omotenashi div.inner{
	margin-bottom:30px;
	padding:50px 0;
	background:url(../img/top/service_bk.jpg) no-repeat center center;
}
div#service h2{
	margin:0 0 15px;
	text-shadow:#fff 0px 0px 2px,#fff 0px 0px 2px,#fff 0px 0px 2px,#fff 0px 0px 3px,#fff 0px 0px 3px,#fff 0px 0px 3px,#fff 0px 0px 3px,#fff 0px 0px 3px,#fff 0px 0px 5px,#fff 0px 0px 5px;
}
div#service p{
	text-align:center;
	text-shadow:#fff 0px 0px 1px,#fff 0px 0px 1px,#fff 0px 0px 1px,#fff 0px 0px 2px,#fff 0px 0px 2px,#fff 0px 0px 2px,#fff 0px 0px 3px,#fff 0px 0px 3px,#fff 0px 0px 3px,#fff 0px 0px 3px ;
}
div#service ul,
div#omotenashi ul{
	text-align:center;
}
div#service ul li,
div#omotenashi ul li{
	width:32%;
	max-width:460px;
	margin:0 2% 30px 0;
}
div#service ul li:nth-child(3n),
div#omotenashi ul li:nth-child(3n){
	margin:0 0 30px 0;
}
div#service ul li a,
div#omotenashi ul li a{
	width:100%;
    display:block;
	padding-top:325px;
	background-repeat:no-repeat;
	background-position:center top;
	background-size:auto 320px;
}
div#service ul li.service      a{background-image:url(../img/top/service.jpg);}
div#service ul li.celebration  a{background-image:url(../img/top/celebration.jpg);}
div#service ul li.party        a{background-image:url(../img/top/party.jpg);}
div#service ul li.ceremony     a{background-image:url(../img/top/ceremony.jpg);}
div#service ul li.catering     a{background-image:url(../img/top/catering.jpg);}
div#service ul li.presentation a{background-image:url(../img/top/presentation.jpg);}
div#service ul li.hishiya      a{background-image:url(../img/top/omotenashi_hishiya.png);}
div#omotenashi ul li.ichigo     a{background-image:url(../img/top/omotenashi_ichigo.png);}
div#omotenashi ul li.momenchaya a{background-image:url(../img/top/omotenashi_momenchaya.png);}

div#service ul li a:hover,
div#omotenashi ul li a:hover{
    opacity:0.50;
    filter: alpha(opacity=50);
}

div#service ul li a span,
div#omotenashi ul li a span{
    display:block;
	padding-left:15px;
	background:url(../img/arr.png)  no-repeat left 0.4em;
}


@media only screen and (max-width: 767px){
	div#service div.inner,
	div#omotenashi div.inner{
		padding:50px 15px;
	}
	div#service ul li,
	div#omotenashi ul li{
		width:48%;
		margin:0 4% 30px 0;
	}
	
	div#service ul li:nth-child(3n),
	div#omotenashi ul li:nth-child(3n){
		margin:0 4% 30px 0;
	}
	div#service ul li:nth-child(2n),
	div#omotenashi ul li:nth-child(2n){
		margin:0 0 30px 0;
	}
}
@media only screen and (max-width: 510px){
	div#service ul li,
	div#omotenashi ul li{
		width:100%;
		margin:0 0 30px 0!important;
	}
}


/* omotenashi
------------------------------------------------------------*/
div#omotenashi h2{
	margin:0 0 25px;
	padding-bottom:40px;
	text-align:center;
	background:url(../img/deco.png) no-repeat center bottom;
}
div#omotenashi div.inner{
	margin-bottom:20px;
	padding:0;
	background:none;
}