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

@media screen and (min-width:300px){
body{
margin: 0px;	
width: 100%;
font-family: neue-haas-unica,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 12px;
line-height: 16px;
    color: #7d7d7d;

	}}
@media screen and (min-width:700px){
body{
        margin: 0px;
        width: 100%;
        font-family: neue-haas-unica,sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 11px;
        line-height: 13.5px;
        color: #7d7d7d;
    }}
@keyframes fadeIn {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}
@keyframes color {
  0% { background: #FFFFFF; }

  100% { background: #000000;  }
}
@keyframes color_day {
  0% { background: #000000; }

  100% { background: #FFFFFF;  }
}
.darkmode{
animation: color 2s;
	animation-fill-mode: forwards;
}
.darkmode_a{
	color: rgba(214, 214, 214, 1);
}

.lightmode{
animation: color_day 2s;
	animation-fill-mode: forwards;
}

.disappear{
	display: none;

}
.appear{
	
	display: block!important;
}
#day{cursor: pointer;
display: none}
#night{cursor: pointer;
	margin-right: 0px;
}
.day_and_night{
    position: fixed;
    right: 15px;
    top: 10px;

    font-size: 15px;

}
@media screen and (min-width:300px){
.mov01{
	width: 100%;
	}}

@media screen and (min-width:700px){
.mov01{
	width: 50%;
	}}
@media screen and (min-width:300px){
.mov02{
	margin-left: 0%;
	width: 100%;
	}}
@media screen and (min-width:700px){
.mov02{
	margin-left: 5%;
	width: 45%;
	}}

@media screen and (min-width:300px){
.video{
	display: block;
	}}


@media screen and (min-width:700px){
.video{
	display: flex;
	}}


#cv{
padding-top: 50px;	
}
.text{
	        width: 68%;
	line-height: 14px;
margin-bottom: 10px;
}


img{
	pointer-events: none;
}

.italic{
	margin-top: 5px;
	font-size: 12px;
	line-height: 12px;
	font-style: italic;
}
@media screen and (min-width:300px){
	.sp{
		width: 100%;
		display: block;
	}}
@media screen and (min-width:700px){
	.sp{width: 100%;
		display: none;
	}}
@media screen and (min-width:300px){
	.pc{width: 100%;
			display: none;
	}}
@media screen and (min-width:700px){
	.pc{width: 100%;
display: block;
	}}





body a{
  color: rgba(73, 100, 204, 1);

}
::selection {
    background: #AAAAAA;
color: #AAAAAA;

}
::-webkit-scrollbar{
  width:17px;

}
::-webkit-scrollbar-track{
  background: white;
  border: none;
  border-radius: 0px;
 border-right: 17px solid rgba(194, 136, 63, 1);
}
::-webkit-scrollbar-thumb{
  background:gray;
  border-radius: 0px;
  box-shadow: none;

}


@media screen and (min-width:300px){
img{
	pointer-events: none;
	}}

@media screen and (min-width:700px){
img{
	pointer-events: inherit;
	}}
a{
text-decoration: none;
color:#AAAAAA;

}
a:hover{
color:rgba(55,255,143,1.00);
}

#wrapper{
padding-top: 0px;
border: px solid black;
width: 95%;
margin: 0px auto;
}

@media screen and (min-width:300px){
.flex{
        width: 100%;
        margin: 10px auto;
        display: block;
        margin-bottom: 60px;
        border: 0px solid black;
    
    }}
@media screen and (min-width:700px){
.flex{
        width: 100%;
        margin: 10px auto;
        display: flex;
        margin-bottom: 60px;
        border: 0px solid black;
    
    }}
@media screen and (min-width:300px){	
.flex01{
	width: 100%;
	margin: 10px auto;
	display: block;
	margin-bottom: 100px;
	border: 0px solid black;
	}}


@media screen and (min-width:700px){	
.flex01{
	width: 100%;
	margin: 10px auto;
	display: flex;
	margin-bottom: 60px;
	border: 0px solid black;
	}}

@media screen and (min-width:300px){
.flex02{
	width: 100%;
	margin: 10px auto;
	display: block;
	margin-bottom: 100px;
	border: 0px solid black;
	}}

@media screen and (min-width:700px){
.flex02{
	width: 100%;
	margin: 10px auto;
	display: flex;
	margin-bottom: 60px;
	border: 0px solid black;
	}}

@media screen and (min-width:300px){
.flex03{
	width: 100%;
	margin: 10px auto;
	display: block;
	margin-bottom: 100px;
	border: 0px solid black;
	}}
@media screen and (min-width:700px){
.flex03{
	width: 100%;
	margin: 10px auto;
	display: flex;
	margin-bottom: 60px;
	border: 0px solid black;
	}}

@media screen and (min-width:300px){
.flex04{
	width: 100%;
	margin: 10px auto;
	display: block;
	margin-bottom: 100px;
	border: 0px solid black;
	}}

@media screen and (min-width:700px){
.flex04{
	width: 100%;
	margin: 10px auto;
	display: flex;
	margin-bottom: 60px;
	border: 0px solid black;
	}}

@media screen and (min-width:300px){
.flex05{
	width: 100%;
	margin: 10px auto;
	display: block;
	margin-bottom: 100px;
	border: 0px solid black;
	}}

@media screen and (min-width:700px){
.flex05{
	width: 100%;
	margin: 10px auto;
	display: flex;
	margin-bottom: 60px;
	border: 0px solid black;
	}}


@media screen and (min-width:300px){
.flex06{
	width: 100%;
	margin: 10px auto;
	display: block;
	margin-bottom: 100px;
	border: 0px solid black;
	}}



@media screen and (min-width:700px){
.flex06{
	width: 100%;
	margin: 10px auto;
	display: flex;
	margin-bottom: 60px;
	border: 0px solid black;
	}}

@media screen and (min-width:300px){
.flex07{
	width: 100%;
	margin: 10px auto;
	display: block;
	margin-bottom: 300px;
	border: 0px solid black;
	}}


@media screen and (min-width:700px){
.flex07{
	width: 100%;
	margin: 10px auto;
	display: flex;
	margin-bottom: 60px;
	border: 0px solid black;
	}}



@media screen and (min-width:300px){
.flex08{
	width: 100%;
	margin: 10px auto;
	display: block;
	margin-bottom: 600px;
	border: 0px solid black;
	}}


@media screen and (min-width:700px){
.flex08{
	width: 100%;
	margin: 10px auto;
	display: flex;
	margin-bottom: 60px;
	border: 0px solid black;
	}}

@media screen and (min-width:300px){
.flex09{
	width: 100%;
	margin: 10px auto;
	display: block;
	margin-bottom: 300px;
	border: 0px solid black;
	}}


@media screen and (min-width:700px){
.flex09{
	width: 100%;
	margin: 10px auto;
	display: flex;
	margin-bottom: 60px;
	border: 0px solid black;
	}}

@media screen and (min-width:300px){
.flex10{
	width: 100%;
	margin: 10px auto;
	display: block;
	margin-bottom: 300px;
	border: 0px solid black;
	}}


@media screen and (min-width:700px){
.flex10{
	width: 100%;
	margin: 10px auto;
	display: flex;
	margin-bottom: 60px;
	border: 0px solid black;
	}}


@media screen and (min-width:300px){
.flex000{
	width: 100%;
	margin: 10px auto;
	display: block;
	margin-bottom: 300px;
	border: 0px solid black;
	}}


@media screen and (min-width:700px){
.flex000{
	width: 100%;
	margin: 10px auto;
	display: flex;
	margin-bottom: 60px;
	border: 0px solid black;
	}}

@media screen and (min-width:300px){
.flex11{
	width: 100%;
	margin: 10px auto;
	display: block;
	margin-bottom: 300px;
	border: 0px solid black;
	}}


@media screen and (min-width:700px){
.flex11{
	width: 100%;
	margin: 10px auto;
	display: flex;
	margin-bottom: 60px;
	border: 0px solid black;
	}}


@media screen and (min-width:300px){
.flex12{
	width: 100%;
	margin: 10px auto;
	display: block;
	margin-bottom: 300px;
	border: 0px solid black;
	}}


@media screen and (min-width:700px){
.flex12{
	width: 100%;
	margin: 10px auto;
	display: flex;
	margin-bottom: 60px;
	border: 0px solid black;
	}}



@media screen and (min-width:300px){
.flex13{
	width: 100%;
	margin: 10px auto;
	display: block;
	margin-bottom: 300px;
	border: 0px solid black;
	}}


@media screen and (min-width:700px){
.flex13{
	width: 100%;
	margin: 10px auto;
	display: flex;
	margin-bottom: 60px;
	border: 0px solid black;
	}}



@media screen and (min-width:300px){
.flex14{
	width: 100%;
	margin: 10px auto;
	display: block;
	margin-bottom: 300px;
	border: 0px solid black;
	}}


@media screen and (min-width:700px){
.flex14{
	width: 100%;
	margin: 10px auto;
	display: flex;
	margin-bottom: 60px;
	border: 0px solid black;
	}}




@media screen and (min-width:300px){
.flex15{
	width: 100%;
	margin: 10px auto;
	display: block;
	margin-bottom: 300px;
	border: 0px solid black;
	}}


@media screen and (min-width:700px){
.flex15{
        width: 100%;
        margin: 10px auto;
        display: flex;
        margin-bottom: 60px;
        border: 0px solid black;
    
    }}



@media screen and (min-width:300px){
.flex16{
        width: 100%;
        margin: 10px auto;
        display: block;
        margin-bottom: 150px;
        border: 0px solid black;
    
    }}


@media screen and (min-width:700px){
.flex16{
        width: 100%;
        margin: 10px auto;
        display: flex;
        margin-bottom: 60px;
        border: 0px solid black;
    
    }}



@media screen and (min-width:300px){
.flex17{
        width: 100%;
        margin: 10px auto;
        display: block;
        margin-bottom: 150px;
        border: 0px solid black;
    
    }}


@media screen and (min-width:700px){
.flex17{
        width: 100%;
        margin: 10px auto;
        display: flex;
        margin-bottom: 60px;
        border: 0px solid black;
    
    }}


@media screen and (min-width:300px){
.flex017{
        width: 100%;
        margin: 10px auto;
        display: block;
        margin-bottom: 150px;
        border: 0px solid black;
    
    }}


@media screen and (min-width:700px){
.flex017{
        width: 100%;
        margin: 10px auto;
        display: flex;
        margin-bottom: 60px;
        border: 0px solid black;
    
    }}
.line{
	width: 100%;
	margin-bottom: 0px;
	}

.line_m{
	width: 77%;
	margin-left: 23%;
	margin-bottom: 0px;
	}

.flex .c2{
		line-height:13px;
	
}
@media screen and (min-width:300px){
.flex .c3{
        text-align: left;
        width: 190px;
        margin-left: 0px;
        margin-bottom: 100px;
        margin-top: 40px!important;
        line-height: 13px;
    
    }}

@media screen and (min-width:700px){
.flex .c3{
        text-align: right;
        position: static;
        border: px solid black;
        width: 35%;
	height: 15px;

  color: rgba(73, 100, 204, 1);
        line-height: 15px;
        margin-top: 0px!important;
        margin-left: 0px!important;
    }}
.flex .c3:hover{
		cursor: pointer;
	   color: #7d7d7d;
}

@media screen and (min-width:300px){
.flex .c4{
        text-align: right;
        /* margin-left: 142px; */
        width: calc(100vw - 40px);
        top: 50px;
        position: absolute;
        line-height: 11.5px;
    
    }}
@media screen and (min-width:700px){
.flex .c4{
        position: static;
        border: 0px solid black;
        width: 28%;
        margin-left: 15px;
        margin-top: 0px;
        line-height: 11px;
    
    }}
@media screen and (min-width:300px){
.flex07 a{
	color:rgba(73, 100, 204, 1)!important;
	}}

@media screen and (min-width:700px){
.flex07 a{
	color:rgba(73, 100, 204, 1);
	}}

.flex07 a:hover{
	 
	color:#AAAAAA;
}

a:hover{
		color:#AAAAAA!important;
}
@media screen and (min-width:300px){
.flex01 a{
	color:rgba(55,255,143,1.00);
	}}

@media screen and (min-width:700px){
.flex01 a{
	color: #AAAAAA;
	}}


@media screen and (min-width:300px){
.flex08 a{
	color:rgba(55,255,143,1.00);
	}}

@media screen and (min-width:700px){
.flex08 a{
	color: #AAAAAA;
	}}

@media screen and (min-width:300px){
.flex09 a{
	color:rgba(55,255,143,1.00);
	}}

@media screen and (min-width:700px){
.flex09 a{
	color: #AAAAAA;
	}}


@media screen and (min-width:300px){
.c1{
        border: 0px sozqlid black;
        width: 50%;
        height: 20px;
        margin-bottom: 10px;
    
    }}

@media screen and (min-width:700px){
.c1{
		border: 0px solid black;
	width: 13%;
	}}

@media screen and (min-width:300px){
.c2{
        text-align: left;
        border: px solid black;
        width: 50%;
        margin-left: 180px;
        margin-top: -30px;
        margin-bottom: 70px;
    
    }}

@media screen and (min-width:700px){
.c2{
        margin-left: 2%;
        margin-top: 0px;
        text-align: left;
        border: 0px solid black;
        width: 10%;
    
    }}
.c1 a{
	line-height: 20px;
	letter-spacing: 0.4px;
	      border-bottom: 1px solid black;
}

.c2 a{
	line-height: 20px;
	letter-spacing: 0.4px;
	      border-bottom: 1px solid black;
}

@media screen and (min-width:300px){
.c2_toptext{
        text-align: left;
        border: px solid black;
        width: 54%;
        line-height: 13px;
        margin-left: 0px;
        margin-top: 30px;
        margin-bottom: 0px;
    
    }}

@media screen and (min-width:700px){
.c2_toptext{
        margin-left: 2%;
        margin-top: 0px;
        text-align: left;
        border: 0px solid black;
        width: 20%;
        line-height: 12px;
    }}

@media screen and (min-width:300px){
.c3{
		border: 0px solid black;
	width: 100%;
	line-height: 15px;
	
	}}

@media screen and (min-width:700px){
.c3{
        border: 0px solid black;
        width: 46%;
        line-height: 15px;
    
    }}

@media screen and (min-width:300px){
.c4{
	margin-top: 10px;
		border: 0px solid black;
	width: 100%;
	line-height: 16px;
	}}
@media screen and (min-width:700px){
.c4{
        margin-top: 0px;
        border: 0px solid black;
        width: 28%;
        line-height: 14px;
    }}

@media screen and (min-width:300px){
.c3 img{
	vertical-align: top;
	max-width: 100%;
	width: 100%!important;
	height: auto;
margin-bottom: 10px;
	
	}}
	
@media screen and (min-width:700px){
.c3 img{
	vertical-align: top;
	
	max-width:120px;
	height: auto;

	
	}}
@media screen and (min-width:300px){
.c3 video{
	vertical-align: top;
	max-width: 100%;
	width: 100%!important;
	height: auto;
margin-bottom: 10px;
	
	}}
	
@media screen and (min-width:700px){
.c3 video{
	vertical-align: top;
	
	max-width:120px;
	height: auto;

	
	}}
@media screen and (min-width:300px){	
span img{

	min-width:0px;
	max-width:0px;
	height: auto;
   display: none;

	}}

@media screen and (min-width:700px){	
span img{
	z-index: 99999!important;
	min-width:530px;
	max-width:530px;
	height: auto;
		 margin-top: -60px!important; 
   	display: block;
	}}


@media screen and (min-width:700px){	
span video{
	z-index: 99999!important;
	min-width:450px;
	max-width:530px;
	height: auto;
		 margin-top: -60px!important; 
   	display: block;
	}}
@media screen and (min-width:300px){	
.small img{
	z-index: 9999!important;
	min-width:380px;
	max-width:330px;
		
	height: auto;
   	display: block;
	}}
@media screen and (min-width:700px){	
.small img{
	z-index: 9999!important;
	min-width:380px!important;
	max-width:330px!important;
	margin-top: -40px!important;
	height: auto;
	display: block;
	}}

@media screen and (min-width:300px){	
.small_more img{
	z-index: 9999!important;

	max-width:330px;
		
	height: auto;
   	display: block;
	}}
@media screen and (min-width:700px){	
.small_more img{
	z-index: 9999!important;
	min-width:250px!important;
		min-width:auto;
position: absolute;
margin-left: 100px;
	height: auto;
	display: block;
	}}
@media screen and (min-width:300px){	
.middle img{
	z-index: 9999!important;
	min-width:380px;
	max-width:330px;
	
	height: auto;
   	display: block;
	}}
@media screen and (min-width:700px){	
.middle img{
	z-index: 9999!important;
	margin-left: 7px!important;
	min-width: 450px;
	max-width: 450px;
	margin-top: -100px!important;
	height: auto;
	display: block;
	}}



@media screen and (min-width:1400px){	
.middle img{
	z-index: 9999!important;
	margin-left: 111px!important;
	min-width: 450px;
	max-width: 450px;
	margin-top: -100px!important;
	height: auto;
	display: block;
	}}




@media screen and (min-width:300px){	
.yoko img{
	z-index: 9999!important;
	min-width:380px;
	max-width:330px;
	
	height: auto;
   	display: block;
	}}
@media screen and (min-width:700px){	
.yoko img{
z-index: 9999!important;
margin-left: 7px!important;
min-width: 520px;
max-width: 510px;
margin-top: 0px!important;
height: auto;
display: block;
	}}



@media screen and (min-width:1400px){	
.yoko img{
	z-index: 9999!important;
	margin-left: 111px!important;
	min-width: 550px;
	max-width: 550px;
	margin-top: 0px!important;
	height: auto;
	display: block;
	}}

a.web_pop span { 
		z-index: 99999!important;
		width: 100%;
		margin:0px auto!important;  
	display: none;	
 }
@media screen and (min-width:300px){
a.web_pop:hover span { 
	
	display: none;

	}}
@media screen and (min-width:700px){
a.web_pop:hover span { 
	z-index: 99999!important;
	width: 0%;
	height: auto;
	border: none;
	display: block;
	position:fixed;
	left: 54%;
	top: 250px!important;	
	}}
.web_pop img{
	border-radius: 6px!important;
}
p.web_pop{
	margin: 0px;
	padding: 0px;
	
}

p.web_pop:hover{
	margin: 0px;
	padding: 0px;
color: lightgray;
	cursor: not-allowed;
}


p.web_pop span { 
		z-index: 99999!important;
		width: 100%;
		margin:0px auto!important;  
	display: none;	
 }

p.web_pop:hover span { 

	z-index: 99999!important;
display: block;
	position:fixed;
	left: 54%;
	top: 250px!important;
	cursor:pointer;
 }

a.p span { 
		z-index: 99999!important;
		width: 100%;
		margin:0px auto!important;  
	display: none;	
 }

@media screen and (min-width:300px){
a.p:hover span { 

 
	display: none; 
	
	}}

@media screen and (min-width:700px){
a.p:hover span {
	z-index: 99999!important;
	width: 0%;
	height: auto;
	border: none;
	display: block;
	position:fixed;
	left: 54%;
	top: 200px!important;
	}}
@media screen and (min-width:700px){
a.p:hover .small { 
	z-index: 99999!important;
	width: 100%;
	height: auto;
	border: none;     
	display: block; 
position:fixed;
left: 60%!important;
top: 60px!important;	
	
	}}

	@media screen and (min-width:700px){
a.p:hover .small { 
	z-index: 99999!important;
	width: 100%;
	height: auto;
	border: none;     
	display: block; 
position:fixed;
left: 60%!important;
top: 100px!important;	
	
	}}
	

@media screen and (min-width:700px){
a.p:hover .small_ more{ 
	z-index: 99999!important;
	width: 100%;
	height: auto;
	border: none;     
	display: block; 
position:fixed;
left: 60%!important;
top: 60px!important;	
	
	}}

	@media screen and (min-width:700px){
a.p:hover .small { 
	z-index: 99999!important;
	width: 100%;
	height: auto;
	border: none;     
	display: block; 
position:fixed;
left: 60%!important;
top: 100px!important;	
	
	}}


@media screen and (min-width:300px){
a.p:hover .long { 
display: none;	
	
	}}

	@media screen and (min-width:700px){
a.p:hover .long { 
	z-index: 99999!important;
	width: auto;
	height:200px;
	border: none;     
	display: block; 
position:fixed;
left: 55%!important;
top: 420px!important;	
	
	}}
.gray{
	z-index: 1!important;
	filter: invert(50%);
	opacity: 0.5;
}

@media screen and (min-width:300px){
.colum{
	display: flex;
	}}

@media screen and (min-width:700px){
.colum{
	margin-left: 0px;
	display: flex;
	}}



@media screen and (min-width:300px){
.year{
	margin-left: 10px;
	width:25%;
	}}

@media screen and (min-width:700px){
.year{
        width: 35%;
	}}
@media screen and (min-width:300px){
.cv_title{
	padding-bottom: 2px;
	letter-spacing: 0.1px;
	margin-top: 20px;
	margin-left: 0px;
	margin-bottom: 12px;
	border-bottom: 1px solid  gray;
	}}
@media screen and (min-width:700px){
.cv_title{
		margin-top: 19px;
		margin-left: 0px;
	}}

.web{
	border: 1px solid #AAAAAA;
margin-left: -100px;
	min-width:730px!important;
	max-width:730px!important;
	
}
@media screen and (min-width:300px){
.profile{
        vertical-align: top;
        max-width: 40% !important;
        width: 100% !important;
        height: auto;
        margin-left: 180px;
        margin-bottom: 30px !important;
	}}
@media screen and (min-width:700px){
.profile{
		margin-left: 0px;
vertical-align: top;
max-width: 20%!important;
width: 100%!important;
height: auto;
margin-bottom: 30px;
	}}
.waku{
	border: 1px solid rgba(223,223,223,1.00);
}