@charset "UTF-8";

/*-----------------------------------------------------------------------------------slide----------*/

#list_carousel {
position:relative;
width: 100%;
overflow:hidden;
padding-top:40px;
background:url(../images/bg_slide.png) no-repeat center 11px;
}

#list_carousel li {
height: 360px;
float:left;
padding:0 10px;
}

#list_carousel li a:hover{
opacity:0.5;
/*background:url(../images/ichimatsu.png) repeat 0 0;*/
}

.slide_nav {
width: 100%;
margin:0 auto;
position:absolute;
top:40px;
z-index:50;
}

.prev, .next {
zoom:1;
display: block;
width: 50%;
top: 0;
position: absolute;
background:url(../images/ichimatsu.png) repeat 0 0;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}

.prev:hover, .next:hover {
opacity:0.5;
zoom:1;
cursor:pointer;
}

.prev {
left: -450px;/* スライドする画像の横半分の値 */
text-align:right;
border-radius:0 5px 5px 0;
-webkit-border-radius:0 5px 5px 0;
-moz-border-radius:0 5px 5px 0;
}

.next {
right: -450px;/* スライドする画像の横半分の値 */
border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
}

.prev span, .next span{
display:block;
position:absolute;
top:0;
width: 30px;
height:100%;
}
.prev span{
right:0;
background:url(../images/slide_prev.png) no-repeat 0 center;
}
.next span{
left:0;
background:url(../images/slide_next.png) no-repeat 0 center;
}

#pager {
text-align:center;
padding:10px;
}

#pager a {
background-color: #ccc;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px;
}

#pager a:hover { background:#eee; }

#pager a span { display: none; }

#pager a.selected { background-color: #; }


#top-slider {
	position:relative;
	width: 100%;
	overflow:hidden;
	padding-top:40px;
	background:url(../images/bg_slide.png) no-repeat center 11px;
}
#top-slider li {
	height: 360px;
	padding:0;
	width: 100%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	overflow: hidden;
}
#top-slider li a{
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center top;
}

#top-slider li a#slide-1{background-image: url(../images/slide03.jpg);}
#top-slider li a#slide-2{background-image: url(../images/slide01.jpg);}
#top-slider li a#slide-3{background-image: url(../images/slide02.jpg);}
#top-slider li a#slide-4{background-image: url(../images/slide04.jpg);}
#top-slider li a#slide-5{background-image: url(../images/slide05.jpg);}
/* #top-slider .sp-mask{max-height: 210px !important;} */
#top-slider .sp-arrows {
	width: 100%;
	left: 0;
	top: 0;
	margin-top: 0;
}
#top-slider .sp-arrow {
	width: 50%;
	height: 360px;
	background:url(../images/ichimatsu.png) repeat 0 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
#top-slider .sp-arrow:hover{opacity: 0.6;}
#top-slider .sp-arrow:before {
	width: 15px;
	height: 100%;
	background:url(../images/slide_prev.png) no-repeat 0 center;
	left: 94%;
	top: 50%;
	margin-top: -180px;
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
}
#top-slider .sp-arrow:after {display: none;}
#top-slider a {
	-webkit-transition: 0.2s !important;
	-moz-transition: 0.2s !important;
	-ms-transition: 0.2s !important;
	-o-transition: 0.2s !important;
	transition: 0.2s !important;
}

#top-slider .sp-previous-arrow {left: -450px;}
#top-slider .sp-next-arrow {right: -450px;}



@media screen and (max-width: 979px) {

  #list_carousel li { text-align:center; }

  #list_carousel li img {
  width: 90%;
  margin: 0 auto;
  }

  .prev, .next {
  position: absolute;
  top: 0;
  width: 32px;
  height: 100%;
  background-size:10px 10px;
  }

  .prev { left: 0; }

  .next { right: 0; }

  .prev:before {
  display: block;
  content:'＼';
  position: absolute;
  top:-26px;
  right:0;
  color:#;
  font-size:12px;
  }

  #pager a {
  width: 7px;
  height: 7px;
  margin: 0 10px;
  }
  #top-slide .sp-mask{min-height: 200px!important;}
  #top-slider li {min-height: 200px!important;overflow: hidden;}
/*   #top-slider li {min-height: 180px!important;width: 85%!important;overflow: hidden;} */
/*
  #top-slider .sp-arrow {
	  width: 5%;
	  max-height: 
	}
	#top-slider .sp-previous-arrow {left: 0;}
	#top-slider .sp-next-arrow {right: 0;}
	#top-slider .sp-arrow:before {left: 100%;margin-left: -15px;}
*/
}

@media screen and (max-width: 740px) {

  #list_carousel li img {
  width: 80%;
  margin: 0 auto;
  }

}


/*-----------------------------------------------------------------------------------guide----------*/

#guide{
margin:10px auto 0;
width:100%;
background:url( ../images/bg_guide.png) repeat-x 0 0;
}

#guide h2{
text-align:center;
}

#guide ul{
width:876px;
margin:16px auto 0;
}

#guide li{
float:left;
width:180px;
line-height:1.8;
margin-bottom:20px;
margin-left:52px;
}

#guide li:first-child{ margin-left:0; }

#guide li span{
margin-top:20px;
display:block;
}
#guide li a{display: block}
#guide li a:hover{opacity: 0.6;}

@media screen and (min-width: 741px) and (max-width: 979px) {

  #guide{
  margin:30px auto 0;
  }

  #guide ul{
  width:420px;
  margin:16px auto 0;
  }

  #guide li:nth-child(odd){ margin-left:0; }

}

@media screen and (max-width: 740px) {

  #guide{
  margin:30px auto 0;
  }

  #guide ul{ width:300px; }

  #guide li{
	width: 140px;
	margin: 0 0 30px 0;
  }
  #guide li:nth-child(odd){ margin-right:20px; clear: both;}

}


/*-----------------------------------------------------------------------------------about----------*/

#about{
margin-top:20px;
width:100%;
}

#about .photo span{
display:block;
width:100%;
height:300px;
background:url( ../images/about_pic.jpg) no-repeat center center;
background-size:cover;
}

#about-photo{
	z-index: -777;
}
#about-photo span{
	display:block;
	width:100%;
	height:300px;
	top:0;
}
#about-photo span.one{
	background:url( ../images/about_pic.jpg) no-repeat center center;
	/*background-size:cover;*/
}
#about-photo span.two{
	background:url( ../images/about_pic-02.jpg) no-repeat center center;
	/*background-size:cover;*/
}


.box_about{
margin-top:-130px;
width:860px;
margin-left:auto;
margin-right:auto;
z-index: 888;
}

#about h2{
text-align:right;
padding-right:55px;
}

.box_about h3{
margin-top:-110px;
font-weight:bold;
font-size:14px;
color:#;
}

.btn_about{
margin-top:14px;
line-height:1.0;
}

.btn_more {
display:inline-block;
width:240px;
height:42px;
text-align:center;
text-decoration:none;
line-height:42px;
outline:none;
}

.btn_more::before,
.btn_more::after {
position:absolute;
z-index:-1;
display:block;
content:'';
}

.btn_more,
.btn_more::before,
.btn_more::after {
-webkit-transition:all .3s;
transition:all .3s;
}

.btn_more {
border:1px solid #;
color:#;
overflow:hidden;
font-weight:bold;
}

.btn_more:hover {
color:#fff;
background-color:#;
cursor:pointer;
}


@media screen and (max-width: 979px) {

  #about .photo{
  position:relative;
  width:100%;
  }
  #about .photo:before{
  display:block;
  content:'';
  padding-top:23.4375%;
  }
  #about-photo .sp-slides{
	  padding-top:23.4375%;
  }
  #about-photo span{height: 100% !important;background-position: center top;}
  #about-photo .sp-mask{height: 23.4375% !important;}
  #about .photo span{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  }

  .box_about{
  margin-top:28px;
  width:90%;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  }

  #about h2{
  text-align:center;
  padding-right:0;
  height:46px;
  background: url( ../images/title2_about.png) no-repeat center top;
  }

  #about h2 img{ display: none; }

  .box_about h3{
  margin-top:24px;
  font-weight:bold;
  font-size:14px;
  color:#;
  }

}


/*-----------------------------------------------------------------------------------pickup----------*/

#pickup{
background:url( ../images/ichimatsu02.jpg) repeat 0 0;
width:100%;
margin-top:60px;
}

#pickup ul{
width:960px;
margin:0 auto;
padding:30px 0;
}

#pickup li{
width:310px;
float:left;
margin-left:15px;
}

#pickup li:first-child{ margin-left:0px; }

#pickup h3{
color:#fff;
font-weight:bold;
font-size:14px;
margin-top:10px;
background:url( ../images/cir_arrow.png) no-repeat 0 7px;
padding-left:22px;
}

#pickup p{
color:#fff;
line-height:1.8;
}

@media screen and (max-width: 979px) {

  #pickup ul{
  width:100%;
  padding:50px 0 0;
  }

  #pickup li{
  float:none;
  max-width:80%;
  margin:0 auto 45px !important;
  }

}


/*-----------------------------------------------------------------------------------story---------*/

#story{
width:960px;
margin:45px auto 0;
/*background:url( ../images/pic_story.jpg ) no-repeat right top;*/
background:none;
/* height:210px; */
padding-bottom:30px;
}

#story h2{ padding-top:20px; }

#story .read{
margin-top:20px;
line-height:1.8;
}

.btn_story{
margin-top:14px;
line-height:1.0;
}

#story .left{
float:left;
}
#story .right{
float:right;
}

#story-banner li{overflow: hidden;background-color: #;}
#story-banner .sp-mask{max-height: 210px !important;}
#story-banner .sp-arrow {
	width: 40px;
	height: 40px;
	background-color: #f9f9f9;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
#story-banner .sp-arrow:hover{opacity: 0.6;}
#story-banner .sp-next-arrow:after,#story-banner .sp-next-arrow:before,#story-banner .sp-previous-arrow:after,#story-banner .sp-previous-arrow:before {
	width: 10%;
	height: 25%;
	background-color: #;
}
#story-banner .sp-arrow:before {
	left: 40%;
	top: 25%;
}
#story-banner .sp-arrow:after {
	left: 40%;
	top: 50%;
}
#story-banner a {
	-webkit-transition: 0.2s !important;
	-moz-transition: 0.2s !important;
	-ms-transition: 0.2s !important;
	-o-transition: 0.2s !important;
	transition: 0.2s !important;
}

#story-banner .sp-previous-arrow {left: -22px;}
#story-banner .sp-next-arrow {right: -22px;}

.sp-button {
    width: 10px!important;
    height: 10px!important;
	border: none;
	background-color: #ccc;
	margin: 0 8px;
}
.sp-selected-button {background-color: #;}

@media screen and (max-width: 979px) {

  #story{
  width:90%;
  height:auto;
  text-align:center;
  }

  #story .left{
  float:none;
  }
  #story .right{
  float:none;
  margin-top:25px;
  }

}


/*-----------------------------------------------------------------------------------news---------*/

#news{
width:100%;
margin-top:45px;
background-color:#3e3a39;

}

.news_cont{
width:960px;
margin:0 auto;
}

.news_cont h2{
float:left;
padding:20px 20px 20px 0;
border-right:3px solid #fff;
}

.news_cont p{
float:left;
padding-left:20px;
margin-top:25px;

}

.news_cont p a:hover{ color:#999; }

.news_list{
float:right;
padding-left:22px;
background:url( ../images/arrow_blue.png) no-repeat 0 6px;
margin-top:25px;

}
.news_list a{color:#FFF;}
.news_list a:hover{ color:#; }

#news_list{float: left;padding: 25px 20px 10px; }

#news_line {
width:700px;
float:left;
padding-left:20px;
padding-right:20px;

font-size:120%; color:#FFF;
/* margin-top:25px; */
}
#news_line li a{color:#FFF;}
#news_line li a:hover{ color:#FFF; }

@media screen and (max-width: 979px) {

  #news{
  width:100%;
  padding:25px 0;
  text-align:center;
  }

  .news_cont{
  width:90%;
  }

  .news_cont h2{
  float:none;
  padding:20px 0;
  border-right:none;
  }

  .news_cont p{
  float:none;
  padding-left:0;
  }

  .news_list{
  float:none;
  display:inline-block;
  }

  #news_line {
  width:100%;
  float:none;
  padding-left:0;
  padding-right:0;
/*   margin-top:0; */
  }
  
/*   #news_list .sp-mask{min-height: 85px!important} */
  #news_list{float: none;padding: 0;height: 100%!important}
/*   #news_line li{ text-align:center; min-height: 65px!important} */

}