@charset "UTF-8";
/* CSS Document */
/* 2021.coded by Natsuha nakamura*/

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

html {/*小画面用650px以下*/
	font-family: 'Merriweather Sans', sans-serif;
	font-size: 62.5%;
}

body { 
	margin: 0;
    padding: 0;
	font-size: 18px;
	font-size: 1.8rem;  /* 14px は 1.4rem */
  /* body 要素のフォントサイズを指定（10px にならないように） */
}


#topvideo video {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	background-size: cover;
	background: url('poster.jpg') no-repeat;
	
	/*margin-right:640px;
	height: 100vh;
	width: auto;
	background-position: center;
	background-size: auto 100%;
	background-repeat: no-repeat;*/
	

}

/*@media screen and (max-width: 960px) {
.topvideo video {
	position:absolute;
	left:50%;
	height: 100vh;
	}
}*/
#logo {
	position:absolute;
	top: 20px;
	left: 20px;
	z-index: 1;
}

#logo a svg {/*650px以下のミタリロゴサイズ*/
	width: 60px;
	padding: 1px;
}

#menu{
	position: absolute;
	top: 34px;
	left: 78px;
	padding: 3px 0 3px 0;
}

#menu ul {
	width: 100%;
	max-width: 700px; 
	margin: 0 auto auto;
}
#menu ul li a {
	width: 159px;
	color: #fff;
	text-align: center;
	margin-left: 15px;
	margin-right: 15px;
	text-decoration: none;
		}
#menu li{
	margin: 0 1px 0 0;
	float: left;
	 list-style: none;
}

#menu ul #who a {
	opacity: 0.2;/*メニュー準備中のため半透明*/
}
#menu ul #portfolio a {
	opacity: 0.2;/*メニュー準備中のため半透明*/
}

#menu{
	transition:.2s ease-in-out;
	overflow:hidden;
	}
/*Who is Mitari?のhoverアクション*/
#menu ul #who a::after{
	content:'';
	position:absolute;
	top:0px;
	left:10px;
	width:135px;
	height:100%;
	transform:translateY(-100%);
	background-color:#000000;
	transition:transform .2s ease-out;z-index:-1;
	cursor:pointer;}
#menu ul #who a:hover{
	color:#fff;
	transition:.2s ease-out}
#menu ul #who a:hover::after{
	transform:translateY(0);
	transition:transform .2s ease-in
}

/*Memberのhoverアクション*/
#menu ul #member a::after{
	content:'';
	position:absolute;
	top:0px;
	left:165px;
	width:85px;
	height:100%;
	transform:translateY(-100%);
	background-color:#000000;
	transition:transform .2s ease-out;z-index:-1;
	cursor:pointer;}
#menu ul #member a:hover{
	color:#fff;
	transition:.2s ease-out}
#menu ul #member a:hover::after{
	transform:translateY(0);
	transition:transform .2s ease-in
}
/*Portfolioのhoverアクション*/
#menu ul #portfolio a::after{
	content:'';
	position:absolute;
	top:0px;
	left:272px;
	width:85px;
	height:100%;
	transform:translateY(-100%);
	background-color:#000000;
	transition:transform .2s ease-out;z-index:-1;
	cursor:pointer;}
#menu ul #portfolio a:hover{
	color:#fff;
	transition:.2s ease-out}
#menu ul #portfolio a:hover::after{
	transform:translateY(0);
	transition:transform .2s ease-in
}

@media screen and (max-width:650px) {/*小画面（650px以下）*/
	#menu {
		display: none;
	}
		
	#logo {
		left: 0px;
		width: 100%;
	text-align: center;
	}
}

ul.mobile_menu {
	list-style-type: none;
	padding-left: 0;
	margin-right: 15px;
	}

ul.mobile_menu li a {
	font-size: 90%;
	color: #FFFFFF;
	text-decoration: none;
	margin-left: 30px;
	position: relative;
	top: 90px;
}

.mobile_menu {
	display: flex;/*flex*/
	justify-content: center;
}

ul.mobile_menu #who2 a {
	text-align: center;
	white-space: nowrap;
	opacity: 0.2;/*メニュー準備中のため半透明*/
}
ul.mobile_menu #Portfolio2 a {
	opacity: 0.2;/*メニュー準備中のため半透明*/
}

/*650px以上のウィンドウサイズでは小型用メニュー欄を非表示にする　確定*/
@media screen and (min-width: 650px){
	ul.mobile_menu {
		display: none;
	}}

#contact{
	float:right;
	margin-top: 30px;
	margin-right: 15px;
	
	}

#contact span{
	text-decoration: none;
	list-style: none;
	margin-left:20px;
}

#contact span a svg {
	width: 27px;
	filter: invert(100%);
}
#contact #youtube_icon{
	position:relative;
	bottom: 3px;
}
#contact #instagram_icon{
	width: 25px;
}

#contact_hover :hover{
  transform: scale(0.95);
}
	
	/*885px以下のウィンドウサイズでは横表示コンタクト欄を非表示にする　確定*/
@media screen and (max-width : 760px ){
	#contact {
		display:none;
	}
}

.mobile_contact {
	float:right;
	position:relative;
	top: 33px;
	right: 15px;
	/*display:none; 他の調整ができるまで一旦消えてもらう。終わったらコメントあうと*/
}
	
.mobile_contact ul{
	text-decoration: none;
	list-style: none;
	
	}

.mobile_contact label svg{
	width:  29px;
	filter: invert(100%);
	transform: rotate( 90deg );  /* 2D(平面)で回転 */
}

.mobile_contact ul li a{
	filter: invert(100%);
}

.mobile_contact ul li a svg {
	width: 27px;
}

.mobile_contact label, li{
	cursor: pointer;    /* ボタンにカーソルを合わせた時に指アイコンを表示 */
	margin-bottom: 19px;
}

.mobile_contact li:hover,
label:hover{
  transform: scale(0.95);
}

/** チェックボックス **/
.mobile_contact input {
    display: none; /* 非表示 */
}

.mobile_contact .dropdown {
	visibility: hidden; /* 非表示 */ /* 文字を非表示 */
    transition: 0.1s;  /* 文字が表示・非表示される時のスピード */	
}

/** チェックボックスにチェックが入った時の、テキストの処理 **/
.mobile_contact input:checked ~ .dropdown {
    height: auto;
    visibility: visible/* 文字を表示 */
}
	
	/*885px以上のウィンドウサイズでは縦表示コンタクト欄が非表示 確定*/
@media screen and (min-width : 760px ){
	.mobile_contact{
		display: none;}
}
/*650px以下のウィンドウサイズでは縦表示コンタクト欄がメニューにくっつく*/
@media screen and (max-width:650px){
	.mobile_contact {
		float:right;
		right: 30px;
		top:100px;
}}
	
footer {
	font-size: 0.5em;
	opacity: 0.25;
	width: 100%;
	text-align: center;
	position: fixed;
	bottom: 3px;
	}

footer p{
	position:absolute;
	top:1px;
	right: 95px;
	text-align: center;
	width: 100%;
}