/*ページの全体の設定*/
	html, body{
		width: 100%;
		height: 100%;
	}
	
	body{
		font-family:'Libre Bodoni', sans-serif;
		margin: 0px;
		background-color: #fffbf7;
	}

	/*余白設定*/
	.space{
		width: 20%;
		margin: 0px;
	}

	/*ヘッダー設定*/
	header{
		display:flex;
		border-bottom:solid 3px #00a199;
	}


	.Top{
		display:flex;
		align-items: center;
		width: 60%;
		text-align:center;
		vertical-align: middle;
		justify-content: center;
		margin: 0px;
		border-right:solid 3px #00a199;
		border-left:solid 3px #00a199;
		color: #00a199;
		background: #fffbf7;
		font-size: 150%;
	}

	.NSP{
		color: #00a199;
		text-decoration: underline;
		width: 20%;
		text-align:center;
		margin: 0px;
		font-size: 300%;
	}

	.drower img{
		width: 0px;
		height: 0px;
	}

	#nav{
		background-color: #00a199;
		width: 270px;
		height: 100%;
		position: fixed;
		right: -270px;
		top: 0;
		z-index: 3;
	}

	/*メニューおよびメイン*/
	main{
		display:flex;
	}


	/*メニュー*/
	nav{
		width: 20%;
	}

	ul{
		padding:0px;
		padding-left: 20%;
		padding-top:20%;
		margin: 0px;
	}

	main nav ul li{
		padding-top: 2%;
		list-style:none;
		font-size: 150%;
		color: #00a199;
	}

	li a{
		color: #00a199;
		text-decoration: none;
	}

	li a:hover{
		text-decoration: none;
		color: #fe8f44;
		transition-duration: 0.5s;
	}


	/*猫のイラスト*/
	.cat img{
		padding-left:10%;
		padding-top: 10%;
		width: 90%;
		height: 35%;
	}

	/*メイン*/
	section{
		width: 60%;
		border-right:solid 3px #00a199;
		border-left:solid 3px #00a199;
		position: relative;
	}

	.title{
		padding-top: 2%;
		padding-left: 2%;
		position: absolute;
		text-align: center;
	}

	h2{
		color: #00a199;
		font-size: 3vw;
		margin: 0px;
	}
	
	.presented{
		color: #00a199;
		margin: 0px;
		font-size: 1.1vw;
	}
	
	/*みなとみらい写真*/
	.mainphoto{
		padding-top: 8%;
		margin: 0px;
		text-align:center;
		padding-bottom: 2%;
	}

	 

	.mainphoto img{
		width: 98%;
		height: 60%;
	}
	
	
	/*みなとみらいスマホ写真*/
	.mainphotophone {
		padding-top: 0%;
		margin: 0px;
		text-align:center;
		padding-bottom: 2%;
	}

	.mainphotophone img{
		width: 0%;
		height: 0%;
	}

	/*右部分*/
	.suit{
		width: 20%;
		margin: 0px
	}

	/*スーツ写真*/
	.suit img{
		padding-left:15%;
		padding-top: 130%;
		width: 67%;
		height: 32%;
	}

	/*フッター*/
	footer{
		display:flex;
	}

	footer .suit{
		width: 0%;
		height: 0%;
	}

	.author{
		width:60%;
		border-top:solid 3px #00a199;
		border-right:solid 3px #00a199;
		border-left:solid 3px #00a199;
		text-align: center;
	}
	
	.author p{
		padding-top: 1%;
		margin: 0;
	}

	.author p img{
		width: 7%;
		height: 7%;
	}

	h6{
		color: #00a199;
		text-align:center;
		margin: 0px;
		font-size: 50%;
	}
	
	/*最初に出るやつ*/
	.logo_fadein{
	background: #fffbf7;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 999;
	}
	
	.logo_fadein p {
	position: fixed;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	display: none;
	z-index: 9999;
	margin: 0;
	text-align: center;
}

.logo_fadein p img{
	width: 50%;
	height:50%;
}
/*スマホ対応*/
@media only screen and (max-width: 920px){
	body{
		font-family:'Libre Bodoni', sans-serif;
		margin: 0px;
		background-color: #fffbf7;
	}

	/*余白設定*/
	.space{
		width: 5%;
		margin: 0px;
		border-right:solid 3px #00a199;
	}

	/*ヘッダー設定*/
	header{
		display:flex;
		border-bottom:solid 3px #00a199;
		width: 100%;
		height: 50px;
		position:fixed;
		top: 0;
		right: 0;
		z-index: 2; /*ヘッダを内容が書かれているページの上に重ねる*/
		background: #fffbf7;
	}
	
	.Top{
		width: 85%;
		border-right:solid 0px #00a199;
		border-left:solid 0px #00a199;
	}
	
	.NSP{
		display: none;
	}
	
/*ドロワーの設定*/

	.humburger{
		width: 10%;
		margin: 0px;
		display:flex;
		align-items: center;
		vertical-align: middle;
		justify-content: center;
	}
	
	
	.drower{
		padding-top: 8%;
		text-align: center;
	}

	.drower img{
		width: 35px;
		height: 35px;
		cursor: pointer;
	}

	#nav{
		background-color: #00a199;
		width: 270px;
		height: 100%;
		position: fixed;
		right: -270px;
		top: 0;
		z-index: 3; /*ヘッダの上にドロワーを重ねる*/
	}

	/*ドロワーを出現させる*/
	.show{
		transform: translate3d(-270px, 0, 0);
	}

	/*ハンバーガーメニューの見た目*/
	.first{
		display:flex;
		height: 50px;
		border-bottom:solid 3px #fff;
	}

	.second{
		display:flex;
		height: 90%;
	}

	.hspace{
		width: 10%;
		border-right:solid 3px #fff;
		margin: 0px;
	}



	.bigNSP{
		color: #fff;
		margin: auto;
		font-size: 200%;
		text-decoration: underline;
	}

	.batu{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		margin-top: auto;
		margin-bottom: auto;
	}

	.batu img{
		width: 40px;
		height: 40px;
		cursor: pointer;
	}

	.menu{
		padding-top: 3%;
		padding-left: 3%;
	}


	.menu li{
		list-style: none;
		padding-top: 10%;
		flex-shrink: 0;
	}

	.menu li a{
		color: #fff;
		text-decoration: none;
		font-size: 150%;
		display:inline-block;
	}

	.menu li a:hover{
		text-decoration: none;
		color: #fe8f44;
		transition-duration: 0.5s;
	}	


	/*開く閉じるアニメーション*/
	#nav{
		transition: all 0.5s 0.3s ease-in-out;
	}

	
	/*メイン設定*/
	main{
		padding-top: 50px;
	}
	
	main nav{
		display: none;
	}
	
	.sumahospace{
		width: 5%;
	}
	
	section{
	width: 90%;
	border-right:solid 3px #00a199;
	}
	
	.mainphoto img{
		display: none;
	}

	/*みなとみらいスマホ写真*/

	.kasane {
		position:relative;
	}

	.mainphotophone {
		padding-top: 12%;
		margin: 0px;
		text-align:center;
		padding-bottom: 15%;
	}

	 

	.mainphotophone img{
		width: 98%;
		height: 60%;
	}

	.title{
		top:50px;
		left:20px;
		position: absolute;
		text-align: center;
	}

	.kasane h2 {
		font-size: 7vw;
	}
	
	.presented{
		font-size: 3vw;
	}
	
	main .suit{
		display: none;
	}
	
	/*フッター設定*/
	
	#elese{
		display: none;
	}
	
	.author{
		width: 90%;
		border-top:solid 3px #00a199;
		border-right:solid 3px #00a199;
		border-left:solid 3px #00a199;
	}
	
	.author p a img{
		width: 10%;
		height: 10%;
		cursor: pointer;
	}
	
		
	footer .space{
		border-right:solid 0px #00a199;
	}		
	
	footer .suit{
		width: 100%;
		height: 60%;
		text-align: right;
	}
	
	footer .suit img{
		padding: 0;
		width: 98%;
		height: 100%;
	}
	
	
	h6{
	color: #00a199;
	text-align:center;
	margin: 0px;
	padding-top: 1%;
	font-size: 50%;
	}

}

@media only screen and (max-width: 300px){
	
	/*ヘッダー設定*/	
	.Top{
		width: 80%;
		border-right:solid 0px #00a199;
	}
	
	.humburger{
		width: 15%;
	}
	
	.title{
		padding-top: 2%;
		padding-left: 2%;
		position: absolute;
		text-align: center;
	}
	
	.mainphoto{
		padding-top: 20%;
	}
	
	.presented{
		font-size: 50%;
	}
	
	/*フッター設定*/
	
	.author p a img{
		width: 10%;
		height: 10%;
		cursor: pointer;
	}
	
	footer .suit{
		width: 100%;
		height: 50%;
		text-align: right;
	}
}