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

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


.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;
}


.tab{
	
	font-family:'Lato',sans-serif;
	cursor: pointer;
	list-style: none;
	border:solid 0px;
	
}
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: 2px;
	letter-spacing: 5px;
	opacity: 0.6;
}

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

*/

#hamburger{
	
	visibility: hidden;
}

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

#tab1{
	
    font-size: 11pt;
	border:solid 0px;
	
}



#tab2{
	
    font-size: 11pt;
	border:solid 0px;
	margin-top:10px;
	
}

#works{
	
	font-family: 'Lato',sans-serif;
    font-size:14pt;
	margin-top:50px;
	font-weight:1000;
	opacity: 0.3;
	list-style: none;
}

#tab3{
	
    font-size: 11pt;
	margin-top:15px;
}

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

#tab4{

    font-size: 10pt;
	margin-top:12px;
	font-weight: 250;
}

#tab5{

    font-size: 10pt;
	margin-top:10px;
	font-weight: 250;
}



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

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

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

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

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


.topimage {
	
	width: 77vw;
	object-fit: cover;
	object-position: top;
	margin-top: 10px;
	margin-left: 20vw;
	border: solid 0px;
	max-height: 750px;
	
}


#slideshow{
	
	z-index: 100;
}

/* スライドショーCSSここから*/
.slideshow {
	/* スライドショー幅（PC）*/
　list-style-type: none;
　position: relative;	
border: solid 0px;	
	
}

.slideshow > li {
  opacity: 0;
  position: absolute;
  transition: opacity 3s ease-in-out;	
}

.slideshow > li.showSlide {
  opacity: 1;
}


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


#link1{
	
	
	margin-top: 800px;
}

#news{
	
	border: solid 0px;
	margin-left: 20vw;
	margin-top: 14px;
	height: 700px;
	
}

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

#link2{

	margin-top:70px;
	
}

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

#link3{
	
	margin-top: 480px;
}

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

.rm{
	
	color:black;
	font-size: 80%;
	text-decoration: none;
	cursor: pointer;
	
	
}

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

.circle{
	
	border-radius: 50%;
	width:30px;
	height:30px;
	display: inline-block;
	border: solid 0.5px gray;
	
}


.arrow{
    position: relative;
  padding-left: 30px;
	padding-bottom: 5px;
	border:solid 0px;
}


.arrow::before{
   content: "";
  position: absolute;
  top: 7.5px; /* 要素の下からの距離 */
  left: 8px;
  width: 13px;
  height: 13px;
  border-top: 1px solid gray;
  border-right: 1px solid gray;
}
.arrow::after{
  content: "";
  position: absolute;
  top: 14.5px; /* 要素の下からの距離 */
  left: 4.5px;
  width: 20px;
  height: 1px;
  background: gray;
  transform: rotate(135deg); /* 棒の角度調整 */
}

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


#link4{
    margin-top: 200px;
	}

#nikoichi{
	border: solid 0px;
	margin-left: 20vw;
	margin-right:5vw;
	margin-top: 0px;
	line-height: 170%;
	letter-spacing: 3.5px;
}

.nikoimg{
	
	width: 75vw;
	margin-top: 55px;
}

.nikoimg2{
  width:75vw;
 margin-top: 55px;	
  	
}

#nikoimg{
	
	width:60vw;
	height: auto;
	border:solid 0px;
	margin-top: 50px;
}

#link5{
	
	margin-top:200px;
}

#kakera{
	border: solid 0px;
	margin-left: 20vw;
	margin-right:5vw;
	margin-top: 0px;
	line-height: 170%;
	letter-spacing: 3.5px;
}

#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;
	}
	
	#rogo{
		
		margin-top:25px;
		margin-left: 5vw;
	}
	
	#tab{
	display: none;
	
	}
	
	#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;
	height:auto;
	
}

#banner{

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

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

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

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

#nikoichi{
		
	border: solid 0px;
	margin-left: 5vw;
	margin-right:5vw;
	margin-top: 50px;
	font-size: 9pt;
	line-height: 200%;
}
	
.nikoimg{
	
	width: 90vw;
	left: 5vw;
	border:solid 0px;	
}
	
	.nikoimg2{
	width: 90vw;	
		
	}	
#nikoimg{
		
	width:90vw;
	}
	
#kakera{
		
	border: solid 0px;
	margin-left: 5vw;
	margin-right:5vw;
	margin-top: 50px;
	font-size: 9pt;
	line-height: 200%;
}		
.scroll{
	scroll-snap-type: x mandatory;
	scroll-snap-type: x mandatory;
    width: 100%;
	height:100%;
    overflow-x: scroll;
    display: flex;
    -webkit-overflow-scrolling: touch; /*(スマホ対応のため必須)*/	
    overflow-scrolling: touch; /*(スマホ対応のため必須)*/
	border: solid 0px;
	align-items: center;
}


.scroll >div{
	scroll-snap-align: center;
    height: 100%;
    width: 100%;
    flex: none;
}	

	

.tabtext{
	
	font-size: 16pt;
}



.title{
	
	font-size: 25pt;
	
}
	
.arrow{
    position: relative;
  padding-left: 30px;
	padding-bottom: 5px;
	border:solid 0px;
}


.arrow::before{
   content: "";
  position: absolute;
  top: 11px; /* 要素の下からの距離 */
  left: 8px;
  width: 13px;
  height: 13px;
  border-top: 1px solid gray;
  border-right: 1px solid gray;
}
.arrow::after{
  content: "";
  position: absolute;
  top: 18px; /* 要素の下からの距離 */
  left: 4.5px;
  width: 20px;
  height: 1px;
  background: gray;
  transform: rotate(135deg); /* 棒の角度調整 */
}
	

	
#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;
}