@charset="utf-8";

body{
	background-color: #8eecd7;
	background-image: linear-gradient(90deg, #ffffffa1 3px, transparent 3px), linear-gradient(#ffffffa1 3px, transparent 3px);
	background-position: 10px 10px;
	background-size: 46px 46px;
	margin:0;
	padding:0;
	color:#5B4137;
}

a{				/*リンクの下線を消す*/
	text-decoration:none;
	color:#5B4137;
}

.img-center{
	text-align:center;
	margin-top:15px;
}
.pagetop{
	text-align:right;
}
.top{
	display:block;
	width:fit-content;
	margin-left:auto;
	margin-right:10px;
	font-size:140%;
	padding:5px 10px 15px 10px;
	font-weight:bold;
}

.top a:hover{
	color:red;
	border-radius:10px;
}
.name{
	font-size:180%;
	font-weight:bold;
}
/*ヘッダー------------------------------------------------------*/
header{
	width:100%;
}
.fuwafuwa {			/*ミントちゃんに動きを付ける*/
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  background: url(../image/ミントちゃん.PNG) no-repeat center center / 500px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width:100%;
  height: 700px;
  margin-top: 15px;
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}

/*ナビゲーション*/
nav{
	font-weight:bold;
	margin-top:20px;
	margin-bottom:30px;
}
nav li{
	display:inline;
	padding:0 10px 0 0;
	margin:0 50px;
}
nav ul{
	text-align:center;
	font-size:190%;
}
nav a:hover{
	color:#FF974E;
}

/*アーティクル----------------------------------------*/
article{
	/*background-color:yellow;*/
	width:100%;
}
section{
	background-color:#ffffff;
	margin:50px 50px;
	border-radius:10px;
}
h1{
	text-align:center;
	font-size:270%;
	margin:40px 0;
	clear:both;
}
.profile{
	padding:0;
	margin:0 10px;
}
/*.float{
	float:right;
}*/
.flex{
	display:flex;
}
.text{
	font-size:150%;
	margin:10px 15px;
	/*background-color:blue;*/
}
.flex1{
	display:flex;
	justify-content:space-evenly;
	width:100%
}
.skill{
	display:flex;
	flex-direction:column;
	margin:10px;
	font-size:120%;
	width:230px;
	height:auto;
}
.shadow{
	box-shadow:3px 3px 6px 3px #D7D7D7;
	margin:10px 10px;
}
.work img:hover{
	opacity:0.5;
}
.flex3{
	display:flex;
	justify-content:space-evenly;
	gap:20px;
}
.work{
	display:flex;
	flex-direction:column;
	transition:.3s;
}	
.work-text{
	text-align:center;
	font-size:120%;
}
.center{			
	text-align:center;
	margin:20px;
}
.center img:hover{
	opacity:0.4;
}
h2{
	font-size:180%;
	padding:15px;
}
.think{
	font-size:120%;	
	padding:3px 20px 3px 20px;
}
.contact{
	text-align:center;
}
.contact-text{
	font-size:120%;
	padding:50px 0 10px 0;
}
.mail{
	font-size:200%;
	font-weight:bold;
	color:#FA883C;
}

/*フッター----------------------------------------------*/

footer{
	text-align:center;
}
/*1024px以下の場合-----------------------------------------*/

@media(max-width:1024px){

.fuwafuwa{
  background: url(../image/ミントちゃん.PNG) no-repeat center center / 300px auto;
  width:100%;
  height: 700px;
}

nav li{
	display:block;
}
.top{
	font-size:120%;
}
h1{
	font-size:200%;
}
.profile img{
	width:330px;
	height:auto;
}
.flex{
	display:block;
	text-align:center;
}
.flex1{
	display:block;
}
.skill{
	display:flex;
	flex-direction:row;
	width:100%;
	margin:10px;
}
.skill-text{
	margin:0 15px;
}
.flex3{
	display:block;
}
.shadow{
	width:80%;
	height:auto;
}
.work{
	text-align:center;
}
}