@charset "UTF-8";
/* CSS Document */
body{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
#pagetop {
	position: fixed;
	bottom: 10px;
	right: 7px;
}
footer a{
	color:#FFF;
	text-decoration: none
}
#logo a{
	color:#FFF;
	text-decoration: none
}
.detail2 a{
	color:#FFF;
	text-decoration:none
}

@media screen and (min-width:769px){
	.black{
		clear: both;
		background: #000;
		color:#FFF;
		padding-top:25px;
		padding-bottom:25px
	}
	.logo{
		clear: both;
		background: #000;
		color:#FFF;
		margin:0;
		padding-top:5px;
		padding-bottom:5px
	}
	#logo{
		font-size:1.5em;
		padding-left:15px
	}
	.black1{
		clear: both;
		background: #000;
		color:#FFF;
		padding-top:0px;
		padding-bottom:0px
	}
	.black h1{
		font-size:3em;
		text-align:center
	}
	.black2{
		background: #000;
		color:#FFF;
		padding-top:25px;
		padding-bottom:45px
	}
	.black2 h1{
		font-size: 3em
	}
	.black3{
		clear: both;
		background: #000;
		color:#FFF;
		padding-top:0px;
		padding-bottom:0px
	}
	.black4{
		clear: both;
		background: #000;
		color:#FFF;
		padding-top:60px;
		padding-bottom:60px
	}
	.black5{
		clear: both;
		background: #000;
		color:#FFF;
		padding-top:5px;
		padding-bottom:5px
	}
	.white{
		clear: both;
		width:1020px;
		margin-right: auto;
		margin-left: auto;
		padding:25px 0px 65px 15px;
		
	}
	.white h1{
		font-size:3em;
	}
	.white2{
		clear: both;
		width:1020px;
		margin-right: auto;
		margin-left: auto;
		padding-top:25px;
		padding-bottom:0px
	}
	header{
		width:1020px;
		margin-right: auto;
		margin-left: auto;
		padding:0;
	}
	header h1{
		display: inline-block;
	}
	header p{
		float: right;
		padding-top: 0px;
		padding-right:15px
	}
	nav{
		display: none
	}
	#key_v{
		width:1020px;
		margin-right: auto;
		margin-left: auto;
		padding:0;
		background:url(../images/img01.jpg) no-repeat;
		height: 560px;
		font-family: Soft Gothic Medium
	}
	#copy{
		padding-top:80px;
		padding-left:50px;
	}
	#copy p{
		font-size:3em;
		color:#FFFF00
	}
	.kokuchi{
		width:1020px;
		margin-right:auto;
		margin-left:auto;
		padding:0;
		background: url(../images/img02.jpg) no-repeat;
		height:300px
	}
	section{
		clear: both;
		width:1020px;
		margin-right: auto;
		margin-left: auto;
		padding:0;
	}
	#beach{
		background: url(../images/img06.jpg) no-repeat;
		height: 600px;
		padding-top: 60px
	}
	#beach p{
		font-size:1.3em
	}
	aside{
		width:1020px;
		margin-right: auto;
		margin-left: auto;
		padding:0;
	}
	.fee{
		display: inline-block;
		width:27%;
		padding:0 30px;
		text-align: center;
	}
	.fee p{
		padding-left:10px
	}
	.fee_area{
		font-size:2em;
		margin-top:0px
	}
	.others{
		display: inline-block;
		padding:0px 0px 10px 20px ;
		margin:0;
	}
	
	#btn_guest{
		background:#F9B24B;
		padding-top:40px;
		padding-right:90px;
		padding-bottom:30px;
		padding-left:90px;
		text-decoration: none;
		color:#000;
		border-radius: 10px;
		font-size:2em
	}
	#btn_tsuika{
		background:#CC33FF;
		padding-top:47px;
		padding-right:20px;
		padding-bottom:32px;
		padding-left:20px;
		text-decoration: none;
		color:#FFF;
		border-radius: 10px;
		font-size:1.5em;
		
	}
	.title1{
		text-align: center;
		font-size:3em
	}
	.title2{
		text-align: center;
		font-size:1em
	}
	.title3{
		text-align: center;
		font-size:1.5em
	}
	.sub {
		text-align: center;
	}
	.sub p#kokuchi{
		font-size:2em
	}
	.sub p#kokuchi2{
		font-size:1.5em;
		padding-bottom:1em;
	}
	.date{
		font-size:3em
	}
	section{
		display: block
	}
	.col{
		clear: both;
		padding-top: 30px;
	}
	.collast{
		clear: both;
		padding-top: 30px;
	}
	.text{
		float:left;
		width:45%;
		padding:0 20px 20px 20px
	}
	.photo1{
		display:inline-block;
		padding:20px
	}
	
	.photo1 img{
		margin-left:30px;
		padding-left:30px
	}
	
	.live{
		float:left;
		clear: both
	}
	.detail{
		margin-left:20px;
		float:left;
	}
	.detail2{
		text-align: center;
		margin-top: 75px;
		padding-top:75px;
	}
	
	.detail2 p{
		margin-top:-10px
	}
	
	.text2{
		width:430px
	}
	.text2-1{
		width:430px
	}
	.kako{
		float: left;
		width:72%
	}
	.about{
		width:100%
	}
	#mike{
		float:right;
		width:25%;
		padding-top:25px;
		padding-bottom:45px

	}
	.detail3{
		float: left;
		width:35%;
		margin:10px 20px 10px 10px;
	}
	.detail3 a{
		color:#000
	}
	.detail3 a:hover{
		opacity: 0.7;
        filter: alpha(opacity=70);
        -ms-filter: "alpha(opacity=70)";
	}
	.detail4{
		float: left;
		width:60%;
		margin:10px 10px 65px 10px
	}
	.map a{
		color:#000
	}
	.map a:hover{
		opacity: 0.7;
        filter: alpha(opacity=70);
        -ms-filter: "alpha(opacity=70)";
	}
	.map img{
		float:left;
		width:253px;
		margin-right: 10px;
		margin-bottom: 10px
	}
	.map p{
	}
	.menu{
		clear: left;
		margin-top:10px
	}
	.menu a{
        color:#000
	}
	.menu a:hover{
		opacity: 0.7;
        filter: alpha(opacity=70);
        -ms-filter: "alpha(opacity=70)";
	}
	.menu img{
		float:left;
		width:253px;
		margin-right: 10px;
		margin-bottom: 10px
	}
	#access{
		height:550px;
		padding-top:10px
	}
	.detail5{
		width:45%;
		float:left;
		margin:10px 20px 10px 10px;
		background:#fff;
		color:#000;
		padding:10px;
	}
	.detail5 img{
		float:left;
		margin-bottom:10px
	}
	.train_detail{
		clear:left;
		padding-top:20px;
		line-height: 120%
	}
	.detail6{
		width:45%;
		float:left;
		margin:10px;
		background:#fff;
		color:#000;
		padding:10px;
	}
	.train{
		float:left
	}
	.train p{
		margin-left:10px;
		font-size:2.5em;
	}
	.detail6 img{
		float:left;
		padding-top:15px;
	}
	.car{
		float:left;
		
	}
	.car p{
		margin-left:10px;
		font-size:2.5em
	}
	.car_detail{
		clear:left;
		padding-top:19px;
		line-height: 120%
	}
	#g_map{
		/*width:100%;
		height: 500px;*/
	}
	#g_map2{
		display: none
	}
	.toi{
		text-align:center
	}
	#apply{
		color:#603813
	}
	#kigen{
		font-size:2.5em;
		color:#F21616
	}
	#guest_uke{
		margin-top:-25px;
		font-size:1.3em;
		color:#603813
	}
	#guest{
		font-size:3em;
		color:#F21616
	}
	.telbtn{
		text-align:center;
	}
	.telbtn p{
		font-size:1.5em
	}
	  #btn a:hover{
		opacity: 0.7;
        filter: alpha(opacity=70);
        -ms-filter: "alpha(opacity=70)";
	}
	#btn{
		font-size:3em
	}
	#btn a{
		padding:25px;
		border-radius: 20px;
		background:#EA1515;
		color:#FFF;
		text-decoration: none
	}
	#tanto{
		font-size:0.5em
	}
}

@media screen and (max-width:768px){
	#container{
		overflow: hidden
	}
	.black{
		clear: both;
		background: #000;
		color:#FFF;
		padding:25px 5px 25px
	}
	.logo{
		clear: both;
		background: #000;
		color:#FFF;
		margin:0;
		padding-top:5px;
		padding-bottom:5px
	}
	#logo{
		font-size:1.5em
	}
	header{
		width:100%;
		margin-right: auto;
		margin-left: auto;
		padding:0 0px 50px 10px;
	}
	header h1{
		/*display: inline-block;*/
		font-size:1em
	}
	header p{
		float: left;
		padding-top: 0px;
		margin-top:-10px
	}
	.black1{
		clear: both;
		background: #000;
		color:#FFF;
		padding-top:0px;
		padding-bottom:0px
	}
	.black h1{
		font-size:2.5em;
		text-align:center
	}
	.black2{
		background: #000;
		color:#FFF;
		padding-top:25px;
		padding-bottom:45px
	}
	.black2 h1{
		font-size: 2em
	}
	.black3{
		clear: both;
		background: #000;
		color:#FFF;
		padding-top:0px;
		padding-bottom:0px;
	}
	.black4{
		clear: both;
		background: #000;
		color:#FFF;
		padding-top:60px;
		padding-bottom:60px
	}
	.black5{
		clear: both;
		background: #000;
		color:#FFF;
		padding-top:5px;
		padding-bottom:5px
	}
	.white{
		clear: both;
		width:100%;
		margin-right: auto;
		margin-left: auto;
		padding-top:25px;
		padding-bottom:65px;
	}
	.white h1{
		font-size:2em;
		text-align:center
	}
	.white2{
		clear: both;
		width:100%;
		/*height:800px;*/
		margin-right: auto;
		margin-left: auto;
		padding-top:25px;
		padding-bottom:65px
	}
	#g_map{
		display:none	
	}
	#g_map2{
		
	}
	nav{
		display: none
	}
	#key_v{
		width:100%;
		margin-right: auto;
		margin-left: auto;
		padding:0;
		background:url(../images/img01.jpg) no-repeat -310px -50px;
		height: 560px;
		font-family: Soft Gothic Medium
	}
	#copy{
		padding-top:10px;
		padding-left:10px;
	}
	#copy p{
		font-size:1.7em;
		color:#FFFF00
	}
	.kokuchi{
		width:100%;
		margin-right:auto;
		margin-left:auto;
		padding:0;
		/*background: url(../images/img02.jpg) no-repeat;*/
		height:400px
	}
	section{
		clear: both;
		width:100%;
		margin-right: auto;
		margin-left: auto;
		padding:0;
	}
	#beach{
		background: url(../images/img06.jpg) no-repeat -120px -20px;
		height: 600px;
		padding-top: 50px;
	}
	#beach p{
		font-size:1.3em
	}
	aside{
		width:100%;
		margin-right: auto;
		margin-left: auto;
		padding:0;
	}
	.fee{
		/*display: inline-block;
		width:27%;
		padding:0 30px;*/
		text-align: center;
	}
	.fee p{
		padding-left:10px
	}
	.fee_area{
		font-size:2em;
		margin-top:0px
	}
	.others{
		/*display: inline-block;*/
		padding:0px 20px 10px 20px ;
		margin:0 0 -30px 0;
	}
	
	#btn_guest{
		background:#F9B24B;
		padding-top:40px;
		padding-right:40px;
		padding-bottom:30px;
		padding-left:30px;
		text-decoration: none;
		color:#000;
		border-radius: 10px;
		font-size:1.5em;
		text-align:center
	}
	#btn_tsuika{
		background:#CC33FF;
		padding-top:47px;
		padding-right:20px;
		padding-bottom:32px;
		padding-left:20px;
		text-decoration: none;
		color:#FFF;
		border-radius: 10px;
		font-size:1.5em;
		text-align:center
		
	}
	.title1{
		text-align: center;
		font-size:2.5em
	}
	.title2{
		text-align: center;
		font-size:1em
	}
	.title3{
		text-align: center;
		font-size:1.2em
	}
	.sub {
		text-align: center;
	}
	.sub p#kokuchi{
		font-size:2em
	}
	.sub p#kokuchi2{
		font-size:1.5em;
		padding-bottom:1em;
	}
	.date{
		font-size:2.2em
	}
	section{
		display: block
	}
	.col{
		clear: both;
		padding-top: 30px;
	}
	.collast{
		clear: both;
		padding-top: 30px;
		margin-bottom:30px
	}
	.text{
		/*float:left;
		width:100%;*/
		padding:0 0px 20px 10px
	}
	.photo1{
		/*display:inline-block;*/
		padding-left:12px
	}
	
	.photo1 img{
		width:96%;
		margin-left:0px;
		padding-left:0px
	}
	
	.live{
		float:left;
		clear: both
	}
	.detail{
		margin-left:0px;
		float:left;
	}
	.detail2{
		text-align: center;
		margin-top: 75px;
		padding-top:75px;
	}
	
	.detail2 p{
		margin-top:-10px
	}
	.text2-1{
		margin-bottom:20px;
		padding-bottom:35px
	}
	.kako{
		padding:0 10px;
		width:99%;
	}
	.about{
		width:99%;
		padding:0
	}
	#mike{
		display: none
	}
	.col img{
		width:95%
	}
	.collast img{
		width:95%
	}
	.detail3{
		float: left;
		width:97%;
		margin:10px;
	}
	.detail3 a{
		color:#000
	}
	.detail3 a:hover{
		opacity: 0.7;
        filter: alpha(opacity=70);
        -ms-filter: "alpha(opacity=70)";
	}
	.detail4{
		/*float: left;*/
		width:99%;
		margin:10px 10px 0px 10px
	}
	.map{
		padding-bottom:20px
	}
	.map a{
		color:#000
	}
	.map a:hover{
		opacity: 0.7;
        filter: alpha(opacity=70);
        -ms-filter: "alpha(opacity=70)";
	}
	.map img{
		/*float:left;*/
		width:95%;
		/*margin-right: 10px;*/
		margin-bottom: 10px
	}
	.map p{
		margin-top:-5px
	}
	.menu{
		/*clear: left;*/
		margin-top:10px
	}
	.menu img{
		width:95%;
		margin-bottom:10px
	}
	.menu p{
		margin-top:-5px
	}
	.menu a{
        color:#000
	}
	.menu a:hover{
		opacity: 0.7;
        filter: alpha(opacity=70);
        -ms-filter: "alpha(opacity=70)";
	}
	
	#access{
		height:810px;
		padding-top:10px
	}
	.detail5{
		width:96%;
		/*float:left;*/
		margin:10px 6px 0 7px;
		background:#fff;
		color:#000;
		padding:20px 0px 0px;
	}
	.detail5 img{
		float:left;
		margin-bottom:10px;
		height:100%;
		padding-left:20px;
		padding-right:15px
	}
	.train_detail{
		/*clear:left;*/
		padding:0px 10px 10px;
		line-height: 120%
	}
	.detail6{
		width:96%;
		/*float:left;*/
		margin:10px 6px 0 7px;
		background:#fff;
		color:#000;
		padding:20px 0px 0px;
	}
	.train{
		/*float:left*/
	}
	.train p{
		margin-left:10px;
		font-size:2.5em;
	}
	.detail6 img{
		float:left;
		padding-top:15px;
		padding-left:10px;
		padding-right:15px
	}
	.car{
		/*float:left;*/
		
	}
	.car p{
		margin-left:10px;
		font-size:2.5em
	}
	.car_detail{
		clear:left;
		padding:0px 10px 10px;
		line-height: 120%
	}
	.toi{
		text-align:center
	}
	#apply{
		color:#603813
	}
	#kigen{
		font-size:1.8em;
		color:#F21616
	}
	#guest_uke{
		margin-top:-25px;
		font-size:1.3em;
		color:#603813
	}
	#guest{
		font-size:2em;
		color:#F21616
	}
	.telbtn{
		text-align:center;
	}
	.telbtn p{
		font-size:1.2em;
		padding-top:10px
	}
	  #btn a:hover{
		opacity: 0.7;
        filter: alpha(opacity=70);
        -ms-filter: "alpha(opacity=70)";
	}
	.telbtn img{
		width:40px;
		height: 40px;
		vertical-align:bottom
	}
	#btn{
		font-size:1.4em
	}
	#btn a{
		padding:25px;
		border-radius: 20px;
		background:#EA1515;
		color:#FFF;
		text-decoration: none
	}
	#btn p img{
		height:60px
		
	}
	#tanto{
		font-size:0.5em
	}	

}

@media screen and (max-width:736px){
	#beach{
		background: url(../images/img06.jpg) no-repeat -150px -20px;
		height: 600px;
		padding-top: 50px;
	}
}

@media screen and (max-width:667px){
	#beach{
		background: url(../images/img06.jpg) no-repeat -190px -20px;
		height: 600px;
		padding-top: 50px;
	}
}

@media screen and (max-width:568px){
	#beach{
		background: url(../images/img06.jpg) no-repeat -220px -20px;
		height: 600px;
		padding-top: 50px;
	}
}

@media screen and (max-width:414px){
	#beach{
		background: url(../images/img06.jpg) no-repeat -310px -20px;
		height: 600px;
		padding-top: 50px;
	}
}

@media screen and (max-width:375px){
	#beach{
		background: url(../images/img06.jpg) no-repeat -325px -20px;
		height: 600px;
		padding-top: 50px;
	}
}

@media screen and (max-width:320px){
        #access{
		height:850px;
		padding-top:10px
}
        .detail6 img{
                height:103px
}
	.train p{
		margin-top:-5px;
		margin-left:10px;
		font-size:2.5em
}
        .car p{
		margin-top:-5px;
		margin-left:10px;
		font-size:2.5em
	}
	#btn{
		font-size:1.2em
	}
}