@@charset "UTF-8";

/*共通部分*/
html{
	font-size: 100%
}

body{
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1.7;
    color: #432;
}

a{
	text-decoration: none;
}

img{
	max-width: 100%;
}


/*header*/

.main-nav{
	display: flex;
	font-size: 1.25rem;
	text-transform: uppercase;
	margin-top: 34px;


}

.main-nav li{
	margin-left: 18px;
	margin-right: 18px;
	list-style: none;

}

.main-nav a{
	color: #432
}

.main-nav a:hover{
	color: #0bd;
}

.wrapper{
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 4%;
}

.page-tittle{
	font-size: 4rem;
	font-family: 'Philosopher',serif;
	text-transform: uppercase;;
	font-weight: normal;
	text-align: center;
	margin-top: 30px;
}

#Profile{
	background-image: url(../images/top.png),linear-gradient(#0090aa,#ffafbd);
	background-blend-mode: screen;
	min-height: 200px;
	background-position: center;
}


.profile-content{
	opacity: 0; /* ←初期値を変更。透明に。*/
	cursor: pointer;
}

.fade{

 	animation: fadeIn 1s ease 0.2s 1 normal;
	animation-fill-mode: forwards;
}

@keyframes fadeIn { /*animetion-nameで設定した値を書く*/

	from { opacity: 0; }
    to { opacity: 1; }

}





/* footer */

footer{
	background: #432;
	text-align: center;
	padding: 16px 0;
}

footer p{
	color: #fff;
	font-size: 0.8rem;
}


/* main */
article{
	width: 50%;
	text-align: center;
	margin: auto;
	margin-bottom: 50px;

}

article img{
	margin-top: 100px;
	margin-bottom: 40px;
	max-width: 200px;
}

article p{
	margin-bottom: 100px;
}