@charset"utf-8";

/*-----memo-----*/
/*font--
しっぽり明朝
.shippori-mincho-regular {
	font-family: "Shippori Mincho", serif;
	font-weight: 400;
	font-style: normal;
}

しっぽり明朝B1
.shippori-mincho-b1-regular {
	font-family: "Shippori Mincho B1", serif;
	font-weight: 400;
	font-style: normal;
}

kiwi maru
.kiwi-maru-light {
	font-family: "Kiwi Maru", serif;
	font-weight: 300;
	font-style: normal;
}

手描き日本語
.klee-one-regular {
	font-family: "Klee One", cursive;
	font-weight: 400;
	font-style: normal;
}

タンジェリン（筆記）
.tangerine-regular {
	font-family: "Tangerine", serif;
	font-weight: 400;
	font-style: normal;
}

アップル（手描き筆記）
.homemade-apple-regular {
	font-family: "Homemade Apple", serif;
	font-weight: 400;
	font-style: normal;
}

（細め筆記）
.explora-regular {
	font-family: "Explora", serif;
	font-weight: 400;
	font-style: normal;
}

コーモラント・ガラモンド（静的セリフ）
.cormorant-garamond-light {
	font-family: "Cormorant Garamond", serif;
	font-weight: 300;
	font-style: normal;
}

コーモラント・ガラモンド（静的セリフ／イタリック）
.cormorant-garamond-light-italic {
	font-family: "Cormorant Garamond", serif;
	font-weight: 300;
	font-style: italic;
}

cinzel（大文字セリフ）
.cinzel-<uniquifier> {
	font-family: "Cinzel", serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
}

丸みセリフ
.eb-garamond-<uniquifier> {
	font-family: "EB Garamond", serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
}
font--*/

/*--color
文字基本
#476956;

文字中間
#98baa7;

文字ライトグレー
#f9fbf9;

全体背景
#dafede;

グリーン斜幕(グラデーション)
rgba(154,190,169,0.3);
rgba(218,254,222,1);

ライトグレー斜幕(グラデーション)
rgba(248,251,249,0.5);
rgba(218,254,222,1);

ハンバーガー背景
rgba(119, 198, 117,0.5);

カード背景
#f9fbf9;
rgba(249,251,249,0.7);

web画面背景
#aaccc4;

自主制作
#f3a7fe;

授業課題
#bfbfdf;

共同制作
#b5d67e;

ボタン背景
#639e91;

リンク背景
#dee9e3;
color--*/
/*-----memo end-----*/


/*-----共通-----*/
html{
	height:100%;
	
	}

body{
	margin:0;
	padding:0;
	font-family:suns-serif;
	color:#476956;
	background-color:#dafede;
	height:100%;
	
	}

/*--フォント・文字設定--*/
/*フォント*/
h1{
	font-family: "Shippori Mincho", serif;
	font-weight: 400;
	font-style: normal;
	color:#476956;
	margin:0;
	padding:0;
	
	}

h2,h3,p,button{
	/*font-family: "Shippori Mincho B1", serif;
	font-weight: 400;
	font-style: normal;*/
	font-family: "Klee One", cursive;
	font-weight: 400;
	font-style: normal;
	color:#476956;
	margin:0;
	padding:0;
	
	}

/*リンク*/
a{
	color:unset;
	text-decoration:none;
	margin:0;
	padding:0;
	
	}

a:visited{
	color:unset;
	margin:0;
	padding:0;
	
	}

a:hover{
	transform:scale(1.03, 1.03);
	transition:0.5s;
	
	}


/*--画像--*/
img{
	width:100%;
	height:auto;
	margin:0;
	padding:0;
	border:none;
	
	}

/*-----ブロックごとの設定-----*/
/*--ヘッダー--*/
.header{
	width:95%;
	height:0;
	padding:1% 2%;
	position:fixed;
	z-index:100;
	animation-name:fadeinanime;
	animation-duration:2s;
	animation-fill-mode:forwards;
	opacity:0;
	
	}

@keyframes fadeinanime{
	from{
		opacity:0;
		
		}
	
	to{
		opacity:1;
		
		}
	
}

.header-container{
	display: flex;
	justify-content: space-between;
	align-items:center;
	
	}

.header h1{
	font-size:4vw;
	color:#f9fbf9;
	
	}

.header h1 a:hover {
	transform:scale(1.1, 1.1);
	transition:1.5s;
	color:#476956;
	
	}

@media(min-width:700px){
	.header h1{
		font-size:1.3vw;
		
		}
	
}

/*--ヒーロー--*/
.hero{
	background:linear-gradient(to bottom, rgba(82, 83, 82, 0.7) 0%, rgba(82, 83, 82, 0.7) 95%, rgba(218,254,222,1) 100%),url(img/hero.jpg);
	background-position:center;
	background-size:cover;
	width:100%;
	height:100vh;
	position:relative;
	animation-name:fadeinanime;
	animation-duration:4s;
	animation-fill-mode:forwards;
	opacity:0;
	
	}

@keyframes fadeinanime{
	from{
		opacity:0;
		
		}
	
	to{
		opacity:1;
		
		}
	
}

.hero-text{
	position:absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align:center;
	
	}

.hero-text h1{
	width:100%;
	font-size:7vw;
	color:#f9fbf9;
	
	}

.hero-text p{
	width:100%;
	font-size:4vw;
	font-family: "Cormorant Garamond", serif;
	font-weight: 400;
	font-style: normal;
	color:#f9fbf9;
	
	}

.hero-text .syokugyou{
	margin-top:3vh;

	}

.hero-text .cs{
	font-size:6vw;
	margin-top:5vh;

	}

.hero-text .ya{
	font-suze:2vw;
	margin-top:2vh;

	}

.hero-kunren{
	font-size:3vw;
	margin-top:5vh;

	}

.hero-text .hero-url{
	font-suze:2vw;
	
	}

@media(min-width:700px){
	.hero-text{
		top:50vh;
		
		}
	
	.hero-text h1{
		font-size:4vw;
		
		}
	
	.hero-text .syokugyou{
		font-size:2vw;
		margin-top:4vh;

		}
	
	.hero-text .cs{
		font-size:3vw;
	
		}
	
	.hero-text .ya{
		font-size:2vw;
		margin-top:5vh;
	
		}
	
	.hero-text .hero-kunren{
		font-size:2vw;
		margin-top:5vh;

		}

	.hero-text .hero-url{
		font-size:3vw;
	
		}

}

@media(min-width:1100px){
	.hero-text{
		top:50vh;
		
		}
	
	.hero-text h1{
		font-size:2vw;
		
		}
	
	.hero-text .syokugyou{
		font-size:1vw;
		margin-top:2vh;

		}
	
	.hero-text .cs{
		font-size:1.5vw;
	
		}
	
	.hero-text .ya{
		font-size:1.5vw;
		margin-top:5vh;
	
		}
	
	.hero-text .hero-kunren{
		font-size:1vw;
		margin-top:5vh;

		}

	.hero-text .hero-url{
		font-size:1.5vw;
	
		}
	
}