@charset "utf-8";
/* CSS Document */

body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}

q {	display:none;}

section p {font-size:15px;}
address a{ 	color:#5a2e21;}
address a:hover { opacity:0.6;}

#wrapper {margin:40px auto 0;}
/*タブ部分*/

.container { width:220px;}

@media screen and (min-width:767px) {
	.pc { display:block;}
	.sp { display:none;}
}
@media screen and (max-width:767px) {
	section p {font-size:16px;}
	
	.pc { display:none;}
	.sp { display:block;}
	
	img {width:100%;}
	#wrapper {margin:0 auto; padding: 0;}
	
	#map02 { margin:0 auto 30px;}

}

/*------------------------------------------------------------
						.main
---------------------------------------------------------------*/

#wrapper .main .inner {	position:relative;}
#wrapper .main .inner a { position:absolute;}
#wrapper .main .inner a.links01 {top:10px; right:16px; width:34px; height:33px;}
#wrapper .main .inner a.links02 {bottom:-5px; right:115px; width:34px; height:33px;}

#wrapper .main .inner a.links01:hover ,
#wrapper .main .inner a.links02:hover {opacity:0.6;}

#wrapper .main .inner a.twt01 {
	background:url(../img/icon_twitter.png) no-repeat ;
	right:60px;
}
#wrapper .main .inner a.twt02 {
	background:url(../img/icon_twitter.png) no-repeat ;
	right:160px;
}

#wrapper .main .inner a.inst01 {background:url(../img/icon_insta.png) no-repeat ;	background-size:100%;
}
#wrapper .main .inner a.inst02 {background:url(../img/icon_insta.png) no-repeat ;	background-size:100%;
}

#wrapper .main .inner a.links03 {
	width:148px;
	height:159px;
	background:url(../img/icon_youtube.png) no-repeat ;
	bottom:75px; right:20px;
	background-size:100%;
}
#wrapper .main .inner a.links03:hover { background:url(../img/icon_youtube_on.png) no-repeat ; background-size:100%;}

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

#wrapper .main .inner a.links03 {
	bottom: 19%;
    right: 2%;
}

#wrapper .main .inner a.links01 {
	top:10px; right:16px; width:48px; height:48px;}
#wrapper .main .inner a.links02 {
	bottom:-10px; right:8%; width:48px; height:48px;}
	
#wrapper .main .inner a.twt01 {	
	background:url(../img/icon_twitter_sp.png) no-repeat ;
	right:75px;
	background-size:100%;
}

#wrapper .main .inner a.twt02 {	
	background:url(../img/icon_twitter_sp.png) no-repeat ;
	right:17%;
	background-size:100%;
	}
	
#wrapper .main .inner a.inst01 {
	background:url(../img/icon_insta_sp.png) no-repeat;
	background-size:100%;
}

#wrapper .main .inner a.inst02 {
	background:url(../img/icon_insta_sp.png) no-repeat;
	background-size:100%;
}

}

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

#wrapper .main .inner a.links03 {
	width: 115px;
    height: 123px;
	bottom: 18%;
    right: 1%;
}

#wrapper .main .inner a.links01 {
	top:10px; right:16px; width:35px; height:35px;}
#wrapper .main .inner a.links02 {
	bottom:-10px; right:6%; width:35px; height:35px;}
	
#wrapper .main .inner a.twt01 {	
	right:60px;}

#wrapper .main .inner a.twt02 {	
	right:15%;}
}

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

#wrapper .main .inner a.links03 {
	width: 80px;
    height: 86px;
    bottom: 19%;
    right: 3%;
}

#wrapper .main .inner a.links01 {
	top:5px; right:5px; width:28px; height:28px;}
#wrapper .main .inner a.links02 {
	bottom:-8px; right:6%; width:28px; height:28px;}
	
#wrapper .main .inner a.twt01 {	
	right:40px;}

#wrapper .main .inner a.twt02 {	
	right:15%;}
}

/*------------------------------------------------------------
						.click
---------------------------------------------------------------*/

#wrapper ul.click { 
	display:block; 
	overflow:hidden; 
	clear:both;
	width:720px;
    margin: 10px auto 15px;
	height: 185px;
}

#wrapper ul.foot li a { width:300px; } 

@media screen and (min-width:767px) {

#wrapper .main .inner {
	width: 768px;
    height: 837px;
    display: block;
    background: url(../img/main.jpg) center no-repeat;
    background-size: cover;
    margin: 0 auto;
}

.click li { float:left;}
.click li a{ height:185px; overflow:hidden;}
.click .no01 a{ background:url(../img/navi01.png) bottom no-repeat; width:180px;}
.click .no02 a{ background:url(../img/navi02.png) bottom no-repeat; width:180px;}
.click .no03 a{ background:url(../img/navi03.png) bottom no-repeat; width:180px;}
.click .no04 a{ background:url(../img/navi04.png) bottom no-repeat; width:180px;}

.click a { display:block;}
.click .no01 .active,
.click .no01 a:hover { color:#fff; background:url(../img/navi01_on.png) bottom no-repeat; }
.click .no02 .active,
.click .no02 a:hover { color:#fff; background:url(../img/navi02_on.png) bottom no-repeat; }
.click .no03 .active,
.click .no03 a:hover { color:#fff; background:url(../img/navi03_on.png) bottom no-repeat; }
.click .no04 .active,
.click .no04 a:hover { color:#fff; background:url(../img/navi04_on.png) bottom no-repeat; }

}

.panel {
	max-width:980px;
	margin:0 auto;
}
.click a {
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

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


#wrapper .main .inner {
    max-width: 768px;
    height: auto;
    margin: 0 auto 20px;
}

#wrapper ul.click { 
	max-width: 431px;
	/*width:80%;*/
	height: auto;
}

.click li { 
	display:inline-block;
	vertical-align:bottom;
}

#wrapper ul.foot li { 
    width: 32%;
	height: auto;
}

.click li a{
	width: 100%; 
	max-height:95px;
}

.click li { float:left;}
.click li a{ width :431px; height:179px; overflow:hidden;}
.click .no01 a{ background:url(../img/navi01_sp.png) center no-repeat; background-size:100%;}
.click .no02 a{ background:url(../img/navi02_sp.png) center  no-repeat; background-size:100%;}
.click .no03 a{ background:url(../img/navi03_sp.png) center  no-repeat; background-size:100%;}
.click .no04 a{ background:url(../img/navi04_sp.png) center no-repeat; background-size:100%;}

.click a { display:block;}
.click .no01 .active,
.click .no01 a:hover { background:url(../img/navi01_on_sp.png) no-repeat; background-size:100%;}
.click .no02 .active,
.click .no02 a:hover { background:url(../img/navi02_on_sp.png) no-repeat; background-size:100%;}
.click .no03 .active,
.click .no03 a:hover { background:url(../img/navi03_on_sp.png) no-repeat; background-size:100%;}
.click .no04 .active,
.click .no04 a:hover { background:url(../img/navi04_on_sp.png) no-repeat; background-size:100%;}
.panel {max-width:640px;}

}

@media screen and (max-width: 550px)and (min-width: 430px){ 

#wrapper ul.click { max-width: 360px;}
.click li a{ width :360px; height:80px; overflow:hidden;}

}

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

#wrapper ul.click { max-width: 300px;}
.click li a{ width :300px; height:66px; overflow:hidden;}

}

/*------------------------------------------------------------
						page共通部
---------------------------------------------------------------*/

article section {
	width:768px;
	overflow:hidden;
	margin:0 auto;
}

article .sec02 {position:relative;}
article .sec02 a {	position:absolute;}
article .sec02 a:hover { opacity:0.7;}
article .sec02 a.btn01 {background:url(../img/btn01.png) no-repeat;}
article .sec02 a.btn02 {background:url(../img/btn02.png) no-repeat;}
article .sec02 a.btn02_2 {background:url(../img/btn02_2.png) no-repeat;}
#panel1 article .sec02 a.btn03 {background:url(../img/city_btn.png) no-repeat;}
#panel2 article .sec02 a.btn03 {background:url(../img/minami_btn.png) no-repeat;}
#panel3 article .sec02 a.btn03 {background:url(../img/kamiama_btn.png) no-repeat;}
#panel4 article .sec02 a.btn03 {background:url(../img/aso_btn.png) no-repeat;}

address { 
	width:610px;
	font-weight:600;
	margin:20px auto 0;
	font-size:22px; 
	line-height:28px; 
	color:#5a2e21;
	letter-spacing: 0.01em;
}

#movie {
    width: 585px;
    height: 328px;
	display:block;
    margin: 45px auto;
}

.movie img{
   width: 58%;
    display: block;
    margin: 45px auto;
}

#play_button {
    width: 585px;
    height: 330px;
	background:url(../img/aso_pic01_sp.jpg) no-repeat;
	background-size:100%;
	cursor: pointer;
    margin: 45px auto;
}

@media screen and (max-width: 767px) and (min-width: 600px){

address { 
	max-width:500px;
	font-size:18px; 
}

#play_button {
	width:83%;
	height:250px;
}

#movie { 
	width:83%;
	height:250px;
}

.movie img{	width: 70%;}

}

@media screen and (max-width: 600px)and (min-width: 430px){ 

address { 
	width:350px;
	font-size:15px;
	line-height:23px; 
}

#play_button {
    width: 85%;
    height: 200px;
	margin: 30px auto;
}

#movie {
    width: 85%;
    height: 200px;
	margin: 30px auto;
}

.movie img{	width: 75%;}

}

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

address { 
	width:290px;
	font-size:12px;
	line-height:20px; 
}

#play_button {
    width: 90%;
    height: 170px;
	margin: 20px auto;
}

#movie {
    width: 90%;
    height: 170px;
	margin: 20px auto;
}

.movie img{
	width: 78%;
    margin: 25px auto;
}

}

/*------------------------------------------------------------
						page01
---------------------------------------------------------------*/

#panel1 article .sec02 a.out {background-size:100%;}
#panel1 article .sec02 a.btn03 {background-size:100%;}

@media screen and (min-width:767px) {

#panel1 article .sec02 {
	background:url(../img/city_pic01.jpg) no-repeat;
	height:1081px;
	position:relative;
}

#panel1 article .sec02 a.out {
	width:288px;
	height:44px;
	left:155px;
}

#panel1 article .sec02 a.btn01 {top:610px;}
#panel1 article .sec02 a.btn02 {top:620px;}
#panel1 article .sec02 a.btn02_2 {top:685px;}
#panel1 article .sec02 a.btn03 {
	width: 240px;
    height: 42px;
    top: 720px;
    right: 52px;
}

#panel1 article address span { font-size:17px;}
#panel1 article .sec03 {
	background:url(../img/city_pic02.jpg) no-repeat;
	height:1927px;
	position:relative;
}

#panel1 article .text_in { 
	position: absolute;
	top: 1385px;
    right: 40px;
    width: 330px;
}

#panel1 article .sec04 {
	background:url(../img/city_pic03.jpg) no-repeat;
	height:2015px;
}

#panel1 article .sec05 {
	background:url(../img/city_pic04.jpg) no-repeat;
	height:1487px;
}

#panel1 article #map02 {
	background:url(../img/city_map.jpg) no-repeat;
	height:671px;
	margin:0 auto 30px;
}

}

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

#panel1 article .sec03 {position:relative;}

#panel1 article .text_in { 
    position: absolute;
    top: 71.5%;
    right: 0;
    width: 48%;
    font-size: 2.6vw;
    line-height: 3.6vw;
}

}

/*------------------------------------------------------------
						page02 .box02
---------------------------------------------------------------*/

#panel2 article .sec02 a.out {background-size:100%;}
#panel2 article .sec02 a.btn03 {background-size:100%;}

@media screen and (min-width:767px) {

#panel2 article .sec01 {
	background:url(../img/minami_pic01.jpg) no-repeat;
	height:490px;
}

#panel2 article .sec02 {
	background:url(../img/minami_pic02.jpg) no-repeat;
	height:489px;
	position:relative;
}

#panel2 article .sec02 a.out {
	width:288px;
	height:44px;
	left:141px;
}

#panel2 article .sec02 a.btn01 {top:16px;}
#panel2 article .sec02 a.btn02 {top:70px;}
#panel2 article .sec02 a.btn03 {
	width:268px;
	height:42px;
	top:165px;
	right:48px;
}

#panel2 article address span { font-size:17px;}

#panel2 article .sec03 {
	background:url(../img/minami_pic03.jpg) no-repeat;
	height:2163px;
}

#panel2 article .sec04 {
	background:url(../img/minami_pic04.jpg) no-repeat;
	height:1383px;
}

#panel2 article #map02 {
	background:url(../img/minami_map.jpg) no-repeat;
	height:1089px;
    margin: 0 auto;
}

}

/*------------------------------------------------------------
						a.btn プラス共通部
---------------------------------------------------------------*/

@media screen and (max-width: 767px) and (min-width: 600px){

article .sec02 a.out {width:230px; height:35px;}
article .sec02 a.btn03 {width:200px; height:40px;}

#panel1 article .sec02 a.out {left:18%;}
#panel1 article .sec02 a.btn01 {top:54%;}
#panel1 article .sec02 a.btn02 {top:59%;}
#panel1 article .sec02 a.btn02_2 {top:64%;}
#panel1 article .sec02 a.btn03 {top: 65%; right: 5%;}

#panel2 article .sec02 a.out {left:5%;}
#panel2 article .sec02 a.btn01 {top:52%;}
#panel2 article .sec02 a.btn02 {top:52%;}
#panel2 article .sec02 a.btn03 {top: 69%; right: 4%;}

#panel3 article .sec02 a.out {right:8%;}
#panel3 article .sec02 a.btn01 {top:28.5%;}
#panel3 article .sec02 a.btn02 {top:29%;}
#panel3 article .sec02 a.btn03 {top: 31.3%; left: 8.6%;}

}

@media screen and (max-width: 600px) and (min-width: 500px){ 

article .sec02 a.out {width:230px; height:35px;}
article .sec02 a.btn03 {width:170px; height:30px;}

#panel1 article .sec02 a.out {left:16%;}
#panel1 article .sec02 a.btn01 {top:55%;}
#panel1 article .sec02 a.btn02 {top:58%;}
#panel1 article .sec02 a.btn02_2 {top:63%;}
#panel1 article .sec02 a.btn03 {top: 65%; right: 4%;}

#panel2 article .sec02 a.out {left:5%;}
#panel2 article .sec02 a.btn01 {top:52%;}
#panel2 article .sec02 a.btn02 {top:52%;}
#panel2 article .sec02 a.btn03 { top: 69%; right: 5%;}

#panel3 article .sec02 a.out {right:3%;}
#panel3 article .sec02 a.btn01 {top:28.5%;}
#panel3 article .sec02 a.btn02 {top:29%;}
#panel3 article .sec02 a.btn03 {top: 31.3%; left: 7.5%;}

}

@media screen and (max-width: 500px) and (min-width: 430px){ 

article .sec02 a.out {	width:180px; height:27px;}
article .sec02 a.btn03 {width:160px; height:30px;}

#panel1 article .sec02 a.out {left:15%;}
#panel1 article .sec02 a.btn01 {top:56%;}
#panel1 article .sec02 a.btn02 {top:59%;}
#panel1 article .sec02 a.btn02_2 {top:64%;}
#panel1 article .sec02 a.btn03 {top: 65%; right: 3.5%;}

#panel2 article .sec02 a.out {left:6%;}
#panel2 article .sec02 a.btn01 {top:52%;}
#panel2 article .sec02 a.btn02 {top:52%;}
#panel2 article .sec02 a.btn03 {top: 69%; right: 4%; }

#panel3 article .sec02 a.out {right:3%;}
#panel3 article .sec02 a.btn01 {top:28.5%;}
#panel3 article .sec02 a.btn02 {top:29%;}
#panel3 article .sec02 a.btn03 {top: 31.3%; left: 7.5%;}

}

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

article .sec02 a.out {width:150px; height:25px;}
article .sec02 a.btn03 {width:140px; height:22px;}

#panel1 article .sec02 a.out {left:18%;}
#panel1 article .sec02 a.btn01 {top:53%;}
#panel1 article .sec02 a.btn02 {top:58%;}
#panel1 article .sec02 a.btn02_2 {top:63%;}
#panel1 article .sec02 a.btn03 {width:125px; top: 65%; right: 3%;}

#panel2 article .sec02 a.out {left:8%;}
#panel2 article .sec02 a.btn01 {top:52%;}
#panel2 article .sec02 a.btn02 {top:52%;}
#panel2 article .sec02 a.btn03 {top: 69%; right: 4%;}

#panel3 article .sec02 a.out {right:8%;}
#panel3 article .sec02 a.btn01 {top:28.5%;}
#panel3 article .sec02 a.btn02 {top:29%;}
#panel3 article .sec02 a.btn03 {top: 31.3%; left: 7.5%;}

}

/*------------------------------------------------------------
						page03
---------------------------------------------------------------*/

#panel3 article .sec02 a.out {background-size:100%;}
#panel3 article .sec02 a.btn03 {background-size:100%;}

@media screen and (min-width:767px) {

#panel3 article .sec02 {
	background:url(../img/kamiama_pic01.jpg) no-repeat;
	height:1913px;
	position:relative;
}

#panel3 article .sec02 a.out {
	width:288px;
	height:44px;
	right:80px;
}

#panel3 article .sec02 a.btn01 {top:525px;}
#panel3 article .sec02 a.btn02 {top:545px;}
#panel3 article .sec02 a.btn03 {
	width: 269px;
    height: 42px;
    top: 575px;
    left: 72px;
}

#panel3 article address span { font-size:17px;}
#panel3 article address small { font-size:15px; margin-left: 47px;}

#panel3 article .sec03 {
	background:url(../img/kamiama_pic02.jpg) no-repeat;
	height:1914px;
	position:relative;
}

#panel3 article .text_in { 
	position: absolute;
	top: 1385px;
    right: 67px;
    width: 300px;
}

#panel3 article #map02 {
	background:url(../img/kamiama_map.jpg) no-repeat;
	height:706px;
	margin:0 auto 30px;
}

}

/*------------------------------------------------------------
						page04
---------------------------------------------------------------*/

#panel4 article .sec02 a.out {background-size:100%;}
#panel4 article .sec02 a.btn03 {background-size:100%;}

@media screen and (min-width:767px) {

#panel4 article .sec02 {
	background:url(../img/aso_pic01.jpg) no-repeat;
	height:1045px;
}

#panel4 article .sec02 a.out {
	width:288px;
	height:44px;
	left:20%;
}

#panel4 article .sec02 a.btn01 {top:55.5%;}
#panel4 article .sec02 a.btn02 {top:60%;}
#panel4 article .sec02 a.btn03 {
	width:240px;
	height:43px;
	top:65%;
	right:7%;
}

#panel4 article address span { font-size:17px;}
#panel4 article .sec03 {
	background:url(../img/aso_pic02.jpg) no-repeat;
	height:1903px;
	position:relative;
}

#panel4 article .sec04 {
	background:url(../img/aso_pic03.jpg) no-repeat;
	height:1816px;
}

#panel4 article .sec05 {
	background:url(../img/aso_pic04.jpg) no-repeat;
	height:1555px;
}

#panel4 article #map02 {
	background:url(../img/aso_map.jpg) no-repeat;
	height:1336px;
    margin: 0 auto;
}

}

/*------------------------------------------------------------
						04 a.btn 
---------------------------------------------------------------*/

@media screen and (max-width: 767px) and (min-width: 600px){

#panel4 article .sec02 a.out {left:18%;}
#panel4 article .sec02 a.btn01 {top:54%;}
#panel4 article .sec02 a.btn02 {top:58%;}
#panel4 article .sec02 a.btn03 {top: 65%; right: 5%;}

}

@media screen and (max-width: 600px) and (min-width: 500px){ 

#panel4 article .sec02 a.out {left:17%;}
#panel4 article .sec02 a.btn01 {top:55.5%;}
#panel4 article .sec02 a.btn02 {top:60%;}
#panel4 article .sec02 a.btn03 {top: 65%; right: 5%;}

}

@media screen and (max-width: 500px) and (min-width: 430px){ 

#panel4 article .sec02 a.out {left:18%;}
#panel4 article .sec02 a.btn01 {top:54.5%;}
#panel4 article .sec02 a.btn02 {top:59%;}
#panel4 article .sec02 a.btn03 {top: 65%; right: 4%;}

}

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

#panel4 article .sec02 a.out {left:18%;}
#panel4 article .sec02 a.btn01 {top:53.8%;}
#panel4 article .sec02 a.btn02 {top:58%;}
#panel4 article .sec02 a.btn03 {top: 65%; right: 3.5%;}

}

/*---------------------------------------------------------------------
						#pageTop
----------------------------------------------------------------------*/

.top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display:block;
}

.top a {
    display: block;
    z-index: 999;
    width: 129px;
    height: 130px;
}

#pageTop01 a { background: url(../img/icon_top01.png)center no-repeat; 	background-size:cover;}
#pageTop02 a { background: url(../img/icon_top02.png)center no-repeat; 	background-size:cover;}
#pageTop03 a { background: url(../img/icon_top03.png)center no-repeat; 	background-size:cover;}
#pageTop04 a { background: url(../img/icon_top04.png)center no-repeat; 	background-size:cover;}


@media screen and (max-width:767px) {
	
	
.top a {
    display: block;
    z-index: 999;
    width: 64px;
    height: 65px;
}	
	
}


/*---------------------------------------------------------------------
						footer
----------------------------------------------------------------------*/

footer {
	overflow:hidden;
	max-width:768px;
	position:relative;
	z-index:-100;
}

.caution {position: relative;}
.caution h2 a{
	background: url(../img/home.png) no-repeat;
	background-size: 100%;
    display: block;
    position: absolute;
	width: 252px;
    height: 37px;
    right: 25%;
    top: 16px;
}

.caution h2 a:hover{opacity:0.6;}

.caution > img{
	max-width:680px;
}

footer > img{
	max-width:680px;
	width:100%;
	margin:0 auto 40px;
}



@media screen and (min-width:767px) {
	
footer {
	height:83px;
	margin:0 auto;
	background:url(../img/foot_bg.jpg) bottom no-repeat;
}

.caution {
	height:69px;
	margin:30px auto 0;
	background:url(../img/caution.jpg) bottom no-repeat;
	position: relative;
}


}

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

.caution {margin:20px auto 0}

.caution h2 a{
    width: 180px;
    height: 30px;
    left: 50%;
    top: 30%;
}

}

@media screen and (max-width: 580px) and (min-width: 460px){


.caution h2 a{
    width: 150px;
    height: 25px;
    left: 50%;
    top: 30%;
}

}

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

.caution {margin:10px auto 0}

.caution h2 a{
    width: 120px;
    height: 20px;
    left: 50%;
    top: 30%;
}

}