@charset "utf-8";

#mainvisual {
  width: 100%;
  background: url(../images/main.jpg) no-repeat 50% 50%;
  background-size: cover;
  box-shadow: 0 3px 5px rgba(0,0,0,.3) inset;
}
#mainvisual .container {
  text-align: center;
  height: 100%;
  position: relative;
}
#mainvisual .container .circle {
  position: absolute;
}

#point {
  background: url(../common/images/bg_wood.png) repeat 0 0;
  box-shadow: 0 3px 5px rgba(0,0,0,.3) inset;
  text-align: center;
}
#access {
  background: #F4F7D3 url(../images/bg_access.jpg) no-repeat 50% 0;
  background-size: 100% auto;
}
#access .container {
  text-align: center;
  font-feature-settings: normal;
}
#access .borderbox {
  border: 4px double /*#009244*/#E4007F;
  background: /*#fff*/#FCE5F2;
  text-align: left;
}
#access .borderbox h3 {
  background: /*#009244*/#E4007F;
  color: #fff;
  text-align: center;
  line-height: 1;
}

#group {
	overflow: hidden;
}
#group ul li {
	float: left;
}
#group ul li a {
	display: block;
	background: #fff;
	box-shadow: 0 0 5px rgba(0,0,0,.5);
	width: 100%;
}
#group ul li a img {
	width: 100%;
	height: auto;
}
#group h4 {
	width: auto;
	max-width: 50%;
	margin: auto;
}

/* attbox */
.attbox {
  border: 3px solid #ddd;
  width: 100%;
  max-width: 980px;
  margin: 0 auto 30px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,.5);
  font-feature-settings: normal;
}

.banner.gallery {
  border: 2px solid #009244;
  position: relative;
}
.banner.gallery a > span:nth-child(3) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.banner.nagayama {
  border: 2px solid #E0251D;
}


/*-----------------------------------------------
スマホ向けスタイル（～768px）
-----------------------------------------------*/
@media only screen and (max-width: 768px) {
  #mainvisual {
    height: 200px;
  }
  #mainvisual .container {
    padding: 30px 20px;
  }
  #mainvisual .container .circle {
    right: -5px;
    bottom: -15px;
    width: 100px;
  }
  
  #point {
    padding: 15px 3%;
  }
  #point h2 img {
    display: block;
    height: 20px;
    margin: auto;
  }
  #point h2 img + img {
    margin-top: 5px;
  }
  #point ul {
    padding: 10px 0;
    overflow: hidden;
  }
  #point ul li {
    width: 33.33%;
    display: block;
    float: left;
  }
  #point ul li:nth-child(1),
  #point ul li:nth-child(2) {
    width: 50%;
  }
  #point ul li img {
    display: block;
  }
  
  #access {
    padding: 15px 0 50px;
  }
  #access h2 {
    margin-bottom: 10px;
  }
  #access .borderbox h3 {
    padding: 5px 10px;
  }
  #access .borderbox h3 img {
    display: block;
    margin: auto;
    height: 24px;
  }
  #access .borderbox h3 img + img {
    margin-top: 5px;
  }
  #access .borderbox .l_row {
    padding: 8px 3%;
  }
  #access .borderbox .l_row > *:nth-child(2) {
    text-align: center;
  }
  #access .borderbox .l_row > *:nth-child(2) img {
    width: 25%;
  }
  #access #gmap {
    height: 250px;
    margin: 15px 0;
  }
  #access .banner {
    margin-top: 30px;
  }
  
	#group {
		padding: 20px 0 5px 7px;
		margin: 0 -7px 0 -5px;
	}
	#group ul li {
		width: 33.33%;
		padding: 7px 7px 0 0; 
	}
	#group ul li a {
		padding: 2px;
	}
  
  /* attbox */
  .attbox {
    margin: 10px auto 25px;
    text-align: left;
  }
  
  #access .banner.gallery {
    margin-top: 15px;
  }
  .banner.gallery a > span:nth-child(2) {
    display: none;
  }
  .banner.gallery a > span:nth-child(3) {
    width: 313px;
    height: 30px;
  }
  #access .banner.nagayama + .banner.top {
    margin-top: 15px;
  }
	
}

/*-----------------------------------------------
PC・タブレット向けスタイル（769px～）
-----------------------------------------------*/
@media only screen and (min-width: 769px), print {
  #mainvisual {
    height: 500px;
  }
  #mainvisual .container {
    padding: 80px 0 0;
  }
  #mainvisual .container .circle {
    right: -30px;
    bottom: -35px;
  }
  
  #point {
    padding: 30px 0;
  }
  #point ul {
    display: table;
    width: auto;
    table-layout: fixed;
    border-spacing: 10px;
    margin: 10px auto;
  }
  #point ul li {
    display: table-cell;
  }
  
  #access {
    padding: 40px 0 120px;
  }
  #access h2 {
    margin-bottom: 20px;
  }
  #access .borderbox h3 {
    padding: 10px;
  }
  #access .borderbox h3 img {
    display: inline-block;
    vertical-align: middle;
  }
  #access .borderbox h3 img + img {
    margin-left: 10px;
  }
  #access .borderbox .l_row {
    padding: 15px 25px 20px;
  }
  #access .borderbox .l_row > *:nth-child(1) {
    /*width: 70%;*/
    width: 80%;
  }
  #access .borderbox .l_row > *:nth-child(2) {
    width: 15%;
    position: relative;
  }
  #access .borderbox .l_row > *:nth-child(2) img {
    position: absolute;
    right: 10px;
    top: -55px;
    width: 120px;
  }
  #access .borderbox .l_row > .youtube {
    width: 30%;
    padding-left: 20px;
  }
  #access #gmap {
    height: 315px;
    margin: 30px 0;
  }
  #access .banner {
    margin-top: 50px;
  }
	
	#group {
		padding: 50px 5px;
		margin: 0 -15px 0 -5px;
	}
	#group ul {
		width: 100%;
	}
	#group ul li {
		width: 16.66%;
		padding: 15px 15px 0 0;
	}
	#group ul li a {
		padding: 3px;
	}
	#group ul li a:hover {
		opacity: .5;
	}
  #access .banner.gallery {
    margin-top: 25px;
  }
  .banner.gallery a > span:nth-child(3) {
    width: 481px;
    height: 46px;
  }
  .banner.gallery a:hover {
    opacity: .7;
  }
  .banner.nagayama a:hover {
    opacity: .7;
  }
  #access .banner.nagayama + .banner.top {
    margin-top: 25px;
  }
  
}

@media only screen and (min-width: 1500px) {
  #mainvisual {
    background-position: 50% 40%;
  }
}