@charset "utf-8";

/*ここでは
	TOPページ
	などを記述します
*/


#main_img_area {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	height: 750px;
	text-align: center;
}
#main_img_area::after {
	clear: both;
	content: " ";
	display: block;
}
#main_img_area .slide {
	text-align: center;
	width: 100%;
	height: 100%;
	/*height: 80%;*/
}
#main_img_area h1{
	position: absolute;
	z-index: 2;
	top: 49%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	/*text-shadow: 0px 0px 7px #000;*/
	min-width: 250px;
	color: #FFFFFF;
	font-weight: 450;
}
#main_img_area h1 p{
	font-size: 30px;
	margin-top: 2em;
	letter-spacing: 3px;
	}
#main_img_area .slide:nth-of-type(1) {
	background: url(../img/top/main_img.jpg) no-repeat center center / cover;
}
#main_img_area .slide:nth-of-type(2) {
	background: url(../img/top/main_img.jpg) no-repeat center bottom 15% / cover;
}
#main_img_area .slide:nth-of-type(3) {
	background: url(../img/top/main_img.jpg) no-repeat center center / cover;
}
.scroll{
	position: absolute;
	bottom: 1%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	z-index: 2;
	}


.click{
	position: absolute;
	z-index: 2;
	right: 6%;
	bottom: 5%;
	display: inline-block;
	background: url(../img/top/bg_click.png);
	border: 4px solid #e7ff00;
	padding: 2% 3%;
	border-radius: 500px;
	-webkit-border-radius: 500px;
	-moz-border-radius: 500px;
	}
.click img{
	max-width: 130px;
	border: 1px solid #626262;
	}
.click::before {
	position: absolute;
	content: '';/*何も入れない*/
	display: inline-block;/*忘れずに！*/
	background: url(../img/top/click.png) no-repeat top center / auto 100%;
	width: 150px;
	height: 40px;
	top: -30px;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	}
	
	.click2 {
    position: absolute;
    z-index: 2;
    right: 5%;
    bottom: 5%;
    display: inline-block;
    background: url(https://www.kanko-setagaya.jp/en/shared_html/img/top/bg_click.png);
    border: 4px solid #e7ff00;
    padding: 2% 2%;
    border-radius: 500px;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
}

.click2::before {
    position: absolute;
    content: '';
    display: inline-block;
    background: url(https://www.kanko-setagaya.jp/en/shared_html/img/top/click.png) no-repeat top center / auto 100%;
    width: 150px;
    height: 40px;
    top: -30px;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
.click2 img {
    max-width: 120px;
}


.smt_bnr_setagaya{
	text-align: center;
	padding: 12px 0;
	width: 90%;
	margin: 0 auto;
	}
.smt_bnr_setagaya a{
	display: inline-block;
	}
.smt_bnr_setagaya a img{
	border: 2px solid #e4007f;
	}

@media screen and (max-width: 1280px) {

}
@media screen and (max-width: 990px) {
	#main_img_area {
		height: 600px;
	}
	#main_img_area h1{
		min-width: 230px;
		}
	#main_img_area h1 p{
		font-size: 23px;
		margin-top: 1.5em;
		letter-spacing: 2px;
		}
	.click{
		display: none;
		}
	.click2{
		display:none;
		}
	.scroll{
		bottom: 0;
		}


}
@media screen and (max-width: 681px) {
	#main_img_area{
		height: 470px;
		}
	#main_img_area h1{
		min-width: 160px;
		top: 48%;
		}
	#main_img_area h1 p{
		font-size: 18px;
		}
	#main_img_area .slide:nth-of-type(2) {
		background: url(../img/top/main_img.jpg) no-repeat left 25% bottom 15% / cover;
	}
	.scroll{
		width: 35px;
		}
	
}


/*-----RECOMMENDED COURSE-----*/

#recommended_area{
	background: url(../img/top/bg_recommend.jpg) no-repeat top center / cover;
	}
#recommended_area .bg_w{
	background: url(../img/parts/w_bg_3x3.gif);
	padding-bottom: 75px;
	}
/*#recommended_area::before {
	position: absolute;
	content: '';
	background: url(../img/parts/w_bg_3x3.gif);
	width: 100%;
	height: 100%;
	z-index: 0;
	}*/

.bg_twinarea{
	background: url(../img/parts/w.gif) repeat-x bottom center / auto 500px;
	}

.from_box{
	width: 70%;
	margin: 0 auto;
	}
.shinjuku{}
.shibuya{}

.from_box .box{
	background: #FFFFFF;
	padding: 10px;
	}

.from_box .box .text{
	margin: 2em 3em 2em;
	display: block;
	}
.from_box .box .text p{
	}
.from_box .box .title{
	font-size: 30px;
	margin-bottom: 0.5em;
	text-align: center;
	}

@media screen and (max-width: 1280px) {
	.from_box{
		width: 75%;
		}
	.from_box > img{
		max-height: 30px;
		}
	.from_box .box .text{
		margin: 1.2em 1.5em 1.2em;
		}
	
	.from_box .box .title{
		font-size: 28px;
		line-height: 1.3em;
		margin-bottom: 0;
		}
	.from_box .box .text p{
		line-height: 1.45em;
		}
	
	
}
@media screen and (max-width: 990px) {
	#recommended_area{
		background: #f7f7f7;
		}
	#recommended_area .bg_w{
		padding: 0;
		}
	.bg_twinarea .l50{
		position: relative;
		padding: 45px 0;
		background: url(../img/top/bg_shinjuku.jpg) no-repeat center center;
		margin: 0;
		}
		.bg_twinarea .l50::after {
			position: absolute;
			content: '';/*何も入れない*/
			display: block;/*忘れずに！*/
			background: url(../img/parts/w_bg_3x3.gif);
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 0;
			}
	.bg_twinarea .r50{
		position: relative;
		padding: 45px 0;
		background: url(../img/top/bg_shibuya.jpg) no-repeat center center;
		margin: 0;
		}
		.bg_twinarea .r50::after {
			position: absolute;
			content: '';/*何も入れない*/
			display: block;/*忘れずに！*/
			background: url(../img/parts/w_bg_3x3.gif);
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 0;
			}
	
	.from_box{
		z-index: 1;
		position: relative;
		}
	.from_box > img{
		max-height: 50px;
		}
	
	.from_box .box .title{
		font-size: 25px;
		line-height: 1.1em;
		margin-bottom: 0.8em;
		}
}
@media screen and (max-width: 681px) {
	.bg_twinarea .l50{
		padding: 35px 0;
		}
	.from_box{
		width: 75%;
		}
	.from_box > img{
		max-height: 24px;
		}
	.from_box .box{
		padding: 5px;
		}
	.from_box .box .text{
		margin: 0.9em 3px 1.6em;
		}
	.from_box .box .text p{
		display: none;
		}
	.from_box .box .title{
		font-size: 17px;		
		line-height: 1.2em;
		margin-bottom: 1.4em;
		}
	.from_box .box .text .btn_area{
		margin: 0;
		}
}


/*-----FOOD AND DRINK-----*/

#food_area{
	position: relative;
	}
#food_area::after { clear: both; content: " "; display: block;}
#food_area .h3_title{
	position: absolute;
	background: none;
	}

.food_box{
	float: left;
	width: 50%;
	}
	.food_box .b_bg{
		background: url(../img/parts/b_bg_3x3.gif);
		}
	.food01{
		background: url(../img/top/bg_food01.png) no-repeat center center / cover;
		}
	.food02{
		background: url(../img/top/bg_food02.png) no-repeat center center / cover;
		}
	.food03{
		background: url(../img/top/bg_food03.png) no-repeat center center / cover;
		}
	.food05{
		background: url(../img/top/bg_food05.png) no-repeat center center / cover;
		}
	.food06{
		background: url(../img/top/bg_food06.png) no-repeat center center / cover;
		}

.food_text{
	padding: 85px 75px;
	}
.food_text > img{
	display: none;
	}
.food_text a.title{
	font-size: 28px;
	}
.food_text p{
	font-size: 22px;
	}


@media screen and (max-width: 1280px) {
	.food_text{
		padding: 35px 40px;
		}
	.food_text a.title{
		}

}
@media screen and (max-width: 990px) {
	#food_area{
		position: relative;
		background: url(../img/top/bg_food_smt.jpg) no-repeat top center / 100% auto;
		padding-bottom: 60px;
		}
		#food_area::after {
			position: absolute;
			content: '';/*何も入れない*/
			display: block;/*忘れずに！*/
			background: url(../img/parts/b_bg_3x3.gif);
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 0;
			}
	#food_area .h3_title{
		position: relative;
		z-index: 1;
		}
	.food01,.food02,.food03,.food05,.food06{
		display: none !important;
		}
	.food_box{
		float: none;
		width: 100%;
		position: relative;
		z-index: 1;
		}
	.food04{
		width: 75%;
		margin: 0 auto;
		background: #FFFFFF;
		}
	.food_text{
		padding: 10px;
		}
	.food_text > img{
		display: block;
		margin-bottom: 20px;
		}
	.food_text a.title{
		font-size: 25px;
		line-height: 1.15em;
		margin: 0 15px 0.8em;
		}
	.food_text p{
		margin: 0 15px;
		font-size: 20px;
		}
	
}
@media screen and (max-width: 681px) {
	.food_text > img{
		margin-bottom: 12px;
		}
	.food_text a.title{
		font-size: 20px;
		line-height: 1.2em;
		margin: 0 3px 0.8em;
		}
	.food_text p{
		margin: 0 3px;
		font-size: 16px;
		}
}
@media screen and (max-width: 414px) {
	.food_text .btn_area{
		margin: 5px auto 20px;
		}
	
}

/*-----EVENTS-----*/

#events_area{
	background: #f8f8f8;
	overflow: hidden;
	}
#events_area::after { clear: both; content: " "; display: block;}

@media screen and (max-width: 1280px) {

}
@media screen and (max-width: 990px) {
	#events_area ul{
		width: 96%;
		margin: 0 auto;
		}


}
@media screen and (max-width: 681px) {



}

/*-----LOCATION AND ACCESS-----*/
#access_area{}
.map_bg{
	background: url(../img/top/bg_map_03.gif) repeat-y bottom center;
	text-align: center;
	}
.map_setagaya{
	text-align: center;
	background: #f3ffcd;
	padding: 5%;
	}

#access_area .cont{
	margin-top: 40px;
	}

@media screen and (max-width: 1280px) {

}
@media screen and (max-width: 990px) {
	.map_bg{
		background: none;
		}
}
@media screen and (max-width: 681px) {
	#access_area{}
	.map_bg .l50{
		margin: 0;
		}
	.map_bg .l50 img{
		max-width: 90%;
		}
	#access_area .cont{
		margin: 20px 0 0;
		width: auto;
		}
}
@media screen and (max-width: 414px) {
	.map_setagaya .r25{
		margin: 0;
		}
	.map_setagaya .r25 img{
		width: 42%;
		}
	.map_bg .l50 img{
		max-width: 80%;
		}
	
}

/*-----Wi-Fi SPOT-----*/
#wifi_area{
	background: #f2f2ee;
	overflow: hidden;
	padding-bottom: 85px;
	}
.free_wifi{
	background: url(../img/top/bg_wifi.png) no-repeat top center;
	padding-top: 140px;
	padding-bottom: 75px;
	}
.free_wifi::after { clear: both; content: " "; display: block;}

.free_wifi .title{
	color: #e4007f;
	font-size: 27px;
	}

.wifi_gmap{
	border: 1px solid #01813e;
	margin-bottom: 60px;
	padding: 0;
	}
.wifi_gmap iframe{
	height: auto;
	min-height: 500px;
	border: none;
	margin: 0;
	padding: 0;
	}



.wifi_step{
	background: #FFFFFF;
	padding: 40px;
	}
.wifi_step::after { clear: both; content: " "; display: block;}

.wifi_step .obi{
	background: #00833f;
	color: #FFFFFF;
	text-align: center;
	padding: 0.3em;
	font-weight: 500;
	font-size: 25px;
	margin-bottom: 25px;
	}
.wifi_step .obi b{
	font-size: 35px;
	font-weight: 700;
	letter-spacing: 2px;
	}
.wifi_step ul{
	margin-bottom: 30px;
	}
.wifi_step ul::after { clear: both; content: " "; display: block;}
.wifi_step ul li{
	float: left;
	width: 33.3%;
	}
.wifi_step ul li .box{
	padding: 0 20px;
	border-right: 5px dotted #00b3cd;
	display: block;
	}
	.wifi_step ul li:last-child .box{
		border-right: none;
		}
	.wifi_step ul li .box img{
		margin-bottom: 20px;
		}
	.wifi_step ul li .box p{
		padding-left: 1.8em;
		line-height: 1.4em;
		}

p.attention{
	background: #fff9bb;
	border: 1px solid #FF0000;
	padding: 9px 1em;
	font-size: 17px;
	}

@media screen and (max-width: 1280px) {
	.free_wifi{
		background: url(../img/top/bg_wifi.png) no-repeat top center / auto 110px;
		padding-top: 120px;
		}

}
@media screen and (max-width: 990px) {
	#wifi_area{
		padding-bottom: 45px;
		}
	.free_wifi{
		padding-top: 140px;
		}
	.free_wifi .l20{
		text-align: center;
		}
	.wifi_step{
		padding: 20px;
		}
	.wifi_step .obi{
		font-size: 23px;
		}
	.wifi_step .obi b{
		font-size: 33px;
		}
	.wifi_step ul{
		margin-bottom: 25px;
		}
	.wifi_step ul li{
		float: none;
		width: auto;
		text-align: center;
		}
	.wifi_step ul li .box{
		border-right: none;
		border-bottom: 5px dotted #00b3cd;
		padding: 25px 20px;
		}
	
	.wifi_gmap iframe{
		min-height: 400px;
		}
}
@media screen and (max-width: 681px) {
	#wifi_area{
		padding-bottom: 35px;
		}
	.free_wifi{
		background: url(../img/top/bg_wifi.png) no-repeat top 5px center / auto 55px;
		padding-top: 70px;
		padding-bottom: 25px;
		}
	.free_wifi .l20 img{
		width: 40%;		
		}
	.free_wifi .title{
		font-size: 17px;
		line-height: 1.2em;
		}
	.wifi_gmap{
		margin-bottom: 35px;
		}
	.wifi_gmap iframe{
		min-height: 350px;
		}
	.wifi_step{
		padding: 10px;
		}
	.wifi_step .obi{
		padding: 10px;
		font-size: 12px;
		line-height: 1.3em;
		margin-bottom: 15px;
		}
	.wifi_step .obi b{
		font-size: 18px;
		display: block;
		word-break: break-all;
		line-height: 1.3em;
		}
	.wifi_step ul{
		margin-bottom: 10px;
		}
	.wifi_step ul li .box{
		padding: 20px 0;
		border-bottom: 3px dotted #00b3cd;
		}
	p.attention{
		padding: 5px 8px;
		font-size: 15px;
		line-height: 1.2em;
		}
}
@media screen and (max-width: 414px) {
	.wifi_gmap{
		width: 94%;
		margin: 0 auto 35px;
		}
	.wifi_gmap iframe{
		min-height: 300px;
		}
	.free_wifi{
		padding-bottom: 0;
		}
	.free_wifi .l20 img{
		width: 35%;		
		}
}

.smt_click{
	display: none;
	padding: 20px;
	text-align: center; 
	}
.smt_click a{
	display: inline-block;
	border: 3px solid #e4007f;
	}
.smt_click a img{
	}

@media screen and (max-width: 1280px) {

}
@media screen and (max-width: 990px) {
	.smt_click{
		display: block;
		}


}
@media screen and (max-width: 681px) {
	.smt_click{
		padding: 12px;
		}
	.smt_click a{
		border: 2px solid #e4007f;
		}
	
	
}
@media screen and (max-width: 414px) {



}
@media screen and (max-width: 375px) {



}



@media screen and (max-width: 1280px) {

}
@media screen and (max-width: 990px) {



}
@media screen and (max-width: 681px) {



}
@media screen and (max-width: 414px) {



}
@media screen and (max-width: 375px) {



}
.r75{
	max-height:325px;
}
.l20{
	max-height:325px;
}
