@charset="utf-8"; 
/***修正済2021-04-07***/

/*required*/
* { margin: 0; padding: 0; webkit-box-sizing: border-box; }

html { font-size: 100%; }

body { font-family: sans-serif; letter-spacing: .1rem; }

img { width: 100%; }

.full-wrapper { overflow-y: hidden; }

/*global*/
.sub-title, .btn { font-family: 'Oswald', sans-serif; }

.btn {
	font-size: 1.24rem; 
	background: transparent; 
	border: 1.7px #746f7d solid;
	border-radius: 5px; 
	padding: 10px 28px; 
	font-family: 'Oswald', sans-serif;
	-webkit-appearance: none; 
	transition: background 1s; 
}

a { 
	display: block;
	text-decoration: none !important;
	-webkit-appearance: none;
	transition: 1s; 
}
 
a:hover, .btn:hover { opacity: .7; }

/*header*/
#header {
	background-image: url(../img/cyber_bg.jpg); 
	background-position: center cneter; 
	background-repeat: no-repeat; 
	background-size: cover; 
	height: 100vh; 
}

.navbar-brand { float: right; height: 100%; width: 248px; }

.mobile_menu { display: none; }

/*concept*/
.concept .flex-box,
.about .flex-box,
#footer .flex-box { display: flex; justify-content: space-around; }

.concept .flex-item { 
	background-image: url(../img/cyberpic1.jpg);
	background-size: cover;
	padding-top: 10%;
	height: 480px;
}

#concept_tokyo { background-image: url(../img/cyberpic2.jpg); background-position: 0 100%;}

.concept .flex-item .sub-title {
	margin: auto;
	color: #fff;   
	min-height: 104px; 
	width: 55%; 
	background: #4E4E50; 
	opacity: .75; 
}

/*about*/
.about { background: #DCDCDC; }

.about .flex-item img { width: 100%; height: 400px; object-fit: cover; box-shadow: 10px 10px 10px rgba(0,0,0,0.6); }

/*access*/
.access .flex-box { justify-content: center; }

li { list-style: none; }

#access_tokyo { display: flex; flex-direction: column; align-items: center; justify-content: center; }

#map_container { width: 100%; }

/*contact*/
.form .btn { background: #000; border: none; padding: 10px 60px; }

.form a { color: #fff; }

.form input[type="text"], .form input[type="email"] { padding: 10px; }
.form textarea { padding: 20px; }

/*footer*/
#footer a { color: #fff; }

#footer ul #f_concept:hover, .global-nav ul #f_concept:hover { color: #c156ff; }
#footer ul #f_events:hover,  .global-nav ul #f_events:hover { color: #3BE40F; }
#footer ul #f_about:hover, .global-nav ul #f_about:hover { color: #FC554A; }
#footer ul #f_access:hover, .global-nav ul #f_access:hover { color: #4962FC; }
#footer ul #f_contact:hover, .global-nav ul #f_contact:hover { color: #FB8F1E; }
#footer .sns-box a:hover { color: yellow;  }

#footer .flex-box { background: #000; }

#footer .navbar-brand { float: none; height: 100%; width: 170px; }

/***for mobileロゴとメニュータブ対曲線におきたかったため、
①ディスプレイのロゴBootstrapで決して❷モバイルのロゴを↓の方にいどうして、
stickyを設定した***/

/*etc----------------------*/
@media (max-width: 1050px) {
	
	/*concept*/
	.concept .flex-box,
	.about .flex-box, 
	.access .flex-box, 
	#footer .flex-box { flex-direction: column; }
	
	#about_tokyo { flex-direction: column-reverse; }
	
	/*access*/
	.access .flex-box { align-items: center; }
	
	#access_tokyo { flex-direction: row; justify-content: center; }
	
	/*footer*/
	
	#footer_tokyo { text-align: center; }
}

@media (max-width: 767px) {
	p, li{ font-size: 4vw; line-height: 25px; }
	
	/*header menu*/
	.mobile_a { position: absolute; }
	header .navbar-brand { 
		position: relative;
		top: 633px; 
		right: -15px; 
		width: 180px;
		height: auto;
	}
	
	.mobile_menu { 
		display: block;
		color: #fff !important;
		position: fixed;
		left: 84%;
		right: 0;
		z-index: 4;
	}
	
	.ghost { font-size: 27px; transform: translateY(20px); transition: all .5s; }
	#menu_text { transform: translateY(20px); transition: all 1s; }
	
	.exit, #close_text { position: relative; top: -150px; transition: .5s; }
	.exit { font-size: 27px; }
	
	.inner { 
		display: flex; 
		flex-direction: column;
		align-items: center;
		position: relative; 
		top: 18px; 
	}
	
	/*animation for menu-button*/
	.mobile_menu a:hover, .exit a:hover { opacity: 1; color: #ff00e0 !important; }
	
	.ghost.clicked, #menu_text.clicked { opacity: 0; transform: translateY(0); }
	.exit.clicked, #close_text.clicked{ top: -30px; }
	
	.mobile_menu.scroll { color: #00ff14 !important; }
	
	#mobile_logo { float: none; position: sticky; left: 25px; }
	
	/*nav*/
	header .global-nav { 
		color: #fff; 
		opacity: 0;
		height: 100%;
		width: 100%;
		background: #000;
		position: fixed;
		z-index: 3; 
		left: 0; 
		transition: all 1s; 
	}
	
	.global-nav ul a { color: #fff; display: block !important; width: 300px; height: 50px; }
	
	.global-nav.clicked { 
		display: flex !important; 
		justify-content: center; 
		align-items: center; 
		opacity: .85; 
	}
}

/*Surface Duo-------------------------------------------*/
@media(min-width: 500px) and (max-device-width: 540px) {
	p, li { font-size: 3vw; }
}