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

* {
	margin: 0px;
	padding: 0px;	
}

a {
  color: black;
}


.tabtext{
	font-family: "Noto Sans Japanese";
	font-weight:lighter;
	font-size: 12pt;
	border:solid 0px;
}



.title{
	
	font-size: 18pt;
	letter-spacing: 1px;
	opacity: 0.4;
	font-weight: bold;
	margin-bottom: 15px;
	font-family: 'Lato',sans-serif;
}


#background{
	
	width: auto;
    height: auto;
	margin-left: auto;
    margin-right: auto;
	border: solid 0px;
	overflow: hidden;
}

#link1{
	
	margin-top: 0px;
	
}


.tab{
	
	font-family:sans-serif;
	list-style: none;
	font-family: 'Lato',sans-serif;
    font-size: 11pt;
	cursor: pointer;
	border:solid 0px;
	margin-top:15px;
	opacity:0.6;
	
}
h2{
	
	font-family: "Noto Sans Japanese" ;
	font-weight: normal;
	opacity: 0.6;
}

#sidebar{
    width: 15vw;
    height: 7000px;
    border-right: 0.2px solid rgba(176,196,222,0.50);
    position: fixed;
    margin-left: 2.5vw;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
	z-index: 1000;
}

#rogo{
	
	width: 40px;
	margin-top:40px;
	cursor: pointer;
	
}

/*
#name1{
	font-family: "Noto Sans Japanese" ;
    position: absolute;
    font-size: 22pt;
    margin-top: 30px;
	letter-spacing: 5px;
	opacity: 0.6;
	cursor: pointer;
}

#name2{
	font-family: 'Lato',sans-serif;
	position: absolute;
    font-size: 11pt;
	letter-spacing: 1px;
	margin-left: 2px;
	margin-top: 67.5px;
	
	
}

*/

#hamburger{
	
	visibility: hidden;
}

#tab{
	margin-top: 60px;
	letter-spacing: 1px;
	border: solid 0px;
}


#tab3d{
	
	list-style: none;
	font-family: 'Lato',sans-serif;
	cursor: pointer;
}


.tab:hover{
	
	color: #4E70C9;
}

#tab1:hover:after{
	
  transform: scale(1); /*ホバー時に等倍へ拡大*/
}

#tab1:after{
	
  content: ""; /*疑似要素の中身は空（記述は必須）*/
  display: block;	
  left: 0; /*長さはテキストの両端まで*/
  right: 0; /*長さはテキストの両端まで*/
  bottom: 0px;  /*線の上下位置*/
  width:55%; /*線の長さ*/
  height: 1px; /*線の太さ*/
  background-color: #4E70C9; /*線の色*/
  transform: scale(0, 1); /*横方向に0状態から全体まで線を入れる*/
  transform-origin: left; /*中央を起点にアニメーション*/
  transition: transform .2s; /*アニメーションの時間*/
}

#tab2:hover:after{
	
  transform: scale(1); /*ホバー時に等倍へ拡大*/
}

#tab2:after{
	
  content: ""; /*疑似要素の中身は空（記述は必須）*/
  display: block;	
  left: 0; /*長さはテキストの両端まで*/
  right: 0; /*長さはテキストの両端まで*/
  bottom: 0px;  /*線の上下位置*/
  width: 85%; /*線の長さ*/
  height: 1px; /*線の太さ*/
  background-color: #4E70C9; /*線の色*/
  transform: scale(0, 1); /*横方向に0状態から全体まで線を入れる*/
  transform-origin: left; /*中央を起点にアニメーション*/
  transition: transform .2s; /*アニメーションの時間*/
}

#tab3:hover:after{
	
  transform: scale(1); /*ホバー時に等倍へ拡大*/
}

#tab3:after{
	
  content: ""; /*疑似要素の中身は空（記述は必須）*/
  display: block;	
  left: 0; /*長さはテキストの両端まで*/
  right: 0; /*長さはテキストの両端まで*/
  bottom: 0px;  /*線の上下位置*/
  width: 25%; /*線の長さ*/
  height: 1px; /*線の太さ*/
  background-color: #4E70C9; /*線の色*/
  transform: scale(0, 1); /*横方向に0状態から全体まで線を入れる*/
  transform-origin: left; /*中央を起点にアニメーション*/
  transition: transform .2s; /*アニメーションの時間*/
}

#tab3d:hover{
	
	color:cadetblue;
}

#tab4:hover:after{
	
  transform: scale(1); /*ホバー時に等倍へ拡大*/
}

#tab4:after{
	content: ""; /*疑似要素の中身は空（記述は必須）*/
  display: block;	
  left: 0; /*長さはテキストの両端まで*/
  right: 0; /*長さはテキストの両端まで*/
  bottom: 0px;  /*線の上下位置*/
  width: 33%; /*線の長さ*/
  height: 1px; /*線の太さ*/
  background-color: #4E70C9; /*線の色*/
  transform: scale(0, 1); /*横方向に0状態から全体まで線を入れる*/
  transform-origin: left; /*中央を起点にアニメーション*/
  transition: transform .2s; /*アニメーションの時間*/
	
}



.link{
	height: 50px;
	border: solid 0px;
}


#banner{
	
	margin-left: 0vw;
	border: solid 1px;
	width: auto;
	
}

#link2{
	
	margin-top: 100px;
}

#link3{
	
	margin-top: 100px;
}

#Reframing{
	border: solid 0px;
	margin-left: 20vw;
	margin-right:5vw;
	margin-top: 0px;
	letter-spacing: 3.5px;
    height: auto;	
}

.img{
	
	width: 75vw;
	margin-top: 40px;
}


#link4{
    margin-top: 100px;
	}



#btt{
	
	margin-top:100px;
	margin-left:19vw;
	margin-right:auto;
	border: solid 0.25px gray;
	width:70px;
	min-width:95px;
	height: 30px;
	text-align: center;
	cursor: pointer;
	color:gray;
	font-size:13pt;
}


#footer {
	
	width: 82.5vw;
	height: 400px;
	border: solid 0px;
	margin-left:17.5vw;
	background-color: Lightslategray;
	margin-top:15px;
}



@media (max-width:768px)
{
	
	
	#background{
		
		height: auto;
	}
	
	#tab{
	display: none;
	
	}
	
	#rogo{
		
		margin-top:25px;
		margin-left: 5vw;
	}
	
	#hamburger{
		
		visibility:visible;
	}	

/*	
	.menubtn{
    width:100%;
    max-width: 50px;
	position:absolute;	
	right:5vw;
	margin-top:22px;
	z-index: 2000;	
}

	*/
.menubtn{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  position: absolute;
  top: 65%;
  right:3.5vw;
  width: 45px;
  height: 4px;
  background: #26344a;
  margin: 0;
  padding: 0;
  border: none;
  transition: all 0.5s;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 2000;
}

.menubtn::before{
  display: block;
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  width: 100%;
  height: 100%;
  background: #26344a;
  transition: all 0.5s;
}

.menubtn::after{
  display: block;
  content: "";
  position: absolute;
  bottom: -16px;
  left: 0;
  width: 100%;
  height: 100%;
  background: #26344a;
  transition: all 0.5s;
}

.menubtn.active{
  background: transparent;
}

.menubtn.active::before{
  top: 0;
  transform: rotate(-45deg);
}

.menubtn.active::after{
  bottom: 0;
  transform: rotate(45deg);
}
	

nav{
    background-color:#ccc;
	
    padding: 100px 5vw 50px;
	height: auto;
	width: 100%;
	opacity: 0.95;
}
	
	.menutext{
		
		list-style:none;
		font-family: "Noto Sans Japanese";
		font-weight:lighter;
	    font-size: 17pt;
		margin-bottom: 17px;
		cursor: pointer;
	}	
	
	
	
	
	.topimage{
	
		width:90vw;
		margin-left: 5vw;
		margin-top: 75px;
	}

	#name1{
		margin-top:13px;
		font-size:18pt;
		margin-left:5vw;
	}
	#name2{
		margin-top:44px;
		font-size:12pt;
		margin-left:5.1vw;
		
	}
	#sidebar{
		border:solid 0px;
		background-color:white;
		width:100vw;
		height: 68px;
		margin-left: 0;
		z-index: 1000;
		position:fixed;
		
	}


#news{
	
	border: solid 0px;
	margin-left: 5vw;
	margin-top:50px;
	
}

#banner{

	margin-left: 0vw;
	border: solid 0px;
	
}
	
	#link1{
		
		margin-top: 100px;
	}	
	
#link2{
	
	margin-top:100px;
		
		
	}	
	

#profile{
	
	border: solid 0px;
	margin-top:50px;
	margin-left: 5vw;	
}
	

	#link3{
		
		margin-top:100px;
	}	
	
#Reframing{
	border: solid 0px;
	margin-left: 5vw;
	margin-top: 50px;
	font-size: 9pt;
	line-height: 250%;
	
	
}
	
.img{
	
	width: 90vw;
	left: 5vw;
}	

	#play{
	left:0vw;
	margin-top:40px;
	width:110px;	
		
	}	
	
	#link4{
		
		margin-top:100px;
	}	
		

.tabtext{
	
	font-size: 16pt;
}



.title{
	
	font-size: 25pt;
	
}
	
#banner{
	position: absolute;
	left: auto;
	border: solid 0px;
	width:90vw;	
}
	
	#btt{
		
		margin-left:15px;
		font-size: 16pt;
		width: 120px;
	}	
	
#footer{
		
	margin-top: 15px;
	width: 100vw;
	height:250px;
	margin-left:0vw;
}