@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: "Homemade Apple", serif;
	font-weight: 500;
	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;
	font-size:3vw;
	color:#476956;
	margin:0;
	padding:0;
	
	}

/*セクションタイトル*/
.title{
	padding:1vh 0;
	display:block;
	text-align:center;
	background-image:url(img/line.png);
	background-repeat:no-repeat;
	background-position:bottom;
	background-size:cover;
	font-size:8vw;
	line-height:1.5em;
	
	}

.little{
	font-size:4vw;
	
	}

@media(min-width:700px){
	.title{
		font-size:4vw;
		background-size:contain;
		
		}
	
	.little{
		font-size:3vw;
		
		}
	
}

/*セクション説明*/
.explanation{
	padding:5vh 0;
	text-align:center;
	font-size:3vw;
	font-weight:600;
	
	}

@media(min-width:700px){
	.explanation{
		padding:10vh 0 10vh;
		font-size:1.3vw;
		
		}
}

/*リンク*/
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;
	
	}

/*リスト*/
ul{
	list-style-type:none;
	margin:0;
	padding:0;
	
	}

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

/*--大箱（コンテナ）設定--*/
.container{
	padding:10vh 10vw;
	text-align:center;
	}

@media(min-width:1100px){
	.container{
		padding:20vh 15vw;
		
		}
	
}

/*-----ブロックごとの設定-----*/
/*--ヘッダー--*/
.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;
		
		}
	
}

/*ハンバーガーメニュー*/
input[type="checkbox"] {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	
	}

.hamburger {
	display: block;
	width: 10vw;
	height: 5vh;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	
	}

.hamburger span,.hamburger span::before,.hamburger span::after {
	position: absolute;
	display: block;
	content: "";
	width: 100%;
	height: 2px;
	background-color: #f9fbf9;
	transition:all 0.5s;

	}

.hamburger span::before {
	top: -1.5vh;
	
	}

.hamburger span::after {
	bottom: -1.5vh;
	
	}

input[type="checkbox"]:checked + .hamburger span {
	background-color: transparent;
	z-index:200;
	
	}

input[type="checkbox"]:checked + .hamburger span::before {
	top: 0;
	transform: rotate(45deg);
	z-index:200;
	
	}

input[type="checkbox"]:checked + .hamburger span::after {
	transform: rotate(-45deg);
	bottom: 0;
	z-index:200;
	
	}

nav{
	position: fixed;
	width: 40%;
	height: 100vh;
	top:0;
	right: -100%;
	background-color:rgba(119, 198, 117,0.5);
	color: #f9fbf9;
	padding: 10% 0;
	transition:all 0.5s;
	
	}

nav ul{
	list-style-type:none;
	padding-left:20%;
	
	}

nav li a{
	display:block;
	font-size: 4vw;
	padding: 5%;
	text-decoration: none;
	font-family: "Cormorant Garamond", serif;
	font-weight: 300;
	font-style: normal;
	color:#f9fbf9;
	transition: all 0.3s;
	
	}

nav li a:visited{
	color:#f9fbf9;
	text-decoration:none;
	
	}

nav li a:hover {
	transform:scale(1.1, 1.1);
	transition:0.3s;
	color:#476956;
	
	}

input[type="checkbox"]:checked ~ nav {
	right: 0;
	
	}

@media(min-width:700px){
	.hamburger{
		display:none;
		
		}
	
	nav{
		display:block;
		width:13vw;
		height:0;
		right:0;
		background:none;
		margin:0;
		padding:0;
		
		}
	
	nev ul{
		padding:50%;
		
		}
	
	nav li a{
		font-size:1vw;
		font-weight:600;
		padding:3%;
		margin:0;
		
		}
	
}

/*--ヒーロー--*/
.hero{
	background:linear-gradient(to bottom, rgba(218,254,222,0) 0%, rgba(218,254,222,0.3) 95%, rgba(218,254,222,1) 100%),url(img/hero.jpg);
	background-position:center;
	background-size:cover;
	width:100%;
	height:90vh;
	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{
	font-size:3vw;
	font-family: "Cormorant Garamond", serif;
	font-weight: 600;
	font-style: normal;
	color:#f9fbf9;
	
	}

@media(min-width:700px){
	.hero-text{
		top:35vh;
		
		}
	
	.hero-text h1{
		font-size:5vw;
		
		}
	
	.hero-text p{
		font-size:2vw;
		
		}
	
}

/*--about--*/
.about{
	text-align:center;
	padding:20vh 10vw;
	
	}

.about p{
	font-size:3vw;
	font-weight:600;
	
	}

@media(min-width:1100px){
	.about{
		text-align:center;
		padding:40vh 10vw;
		
		}
	
	.about p{
		font-size:1.3vw;
		
		}

	
}

/*--learned(A) & works(B)--*/
/*中箱*/
.contents-containerA,.contents-containerB{
	padding:10% 0;
	display:grid;
	gap:2vh;
	
	}

@media(min-width:700px){
	.contents-containerA,.contents-containerB{
		display:grid;
		gap:2vh;
		}
	
}

/*小箱*/
.contents-containerA .default-view{
	display:grid;
	gap:8vh;
	
	}

.contents-containerA .hidden-view{
	display:grid;
	gap:2vh;
	
	}

.contents-containerB .default-view{
	display:grid;
	gap:2vh;
	
	}

.contents-containerB .hidden-view{
	display:grid;
	gap:2vh;
	
	}


@media(min-width:700px){
	.contents-containerA .default-view,.contents-containerA .hidden-view{
		display:grid;
		grid-template-columns: repeat(4, 22.8%);
		gap:8vh 2vw;
		
		}
	
	.contents-containerB .default-view,.contents-containerB .hidden-view{
		display:grid;
		grid-template-columns: repeat(3, 31.4%);
		gap:3vh 2vw;
		
		}
	
}

/*コンテンツ*/
.contentsA{
	height:27vh;
	padding:3vh 5vw;
	display:flex;
	flex-direction:column;
	gap:2vh 0;
	
	}

.contentsB{
	height:48vh;
	padding:3vh 5vw;
	border-radius:20px;
	background-color:#f9fbf9;
	display:flex;
	flex-direction:column;
	gap:3vh 0;
	
	}

.contentsC{
	height:40vh;
	padding:3vh 5vw;
	border-radius:4px;
	background-color:#fff;
	display:flex;
	flex-direction:column;
	gap:3vh 0;
	
	}

.img-box{
	box-sizing:border-box;
	display: flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	margin:0;
	padding:0;
	
	}

.img-box img{
	aspect-ratio: 16 / 9;
	object-fit:contain;
	margin:0;
	padding:0;
	border:none;
	
	}

.learned img{
	width:35vw;
	height:auto;
	
	}

@media(min-width:700px){
	.learned img{
		width:8vw;
		height:auto;
		
		}
	
}

.credit{
	font-size:0.3vw;
	
	}

.ww-img{
	background-color:#aaccc4;
	padding:1vh 2vw;
	border-radius:10px;
	display: flex;
	justify-content: center;
	align-items: center;
	
	}

.ww-img img{
	aspect-ratio: 16 / 9;
	object-fit:cover;
	width: 100%;
	height: 100%;
	
	}

.contentsA h2{
	text-align:center;
	font-size:3.5vw;
	font-weight:600;
	
	}

.contentsB h2{
	text-align:center;
	font-size:3.5vw;
	font-weight:600;
	height:10vh;
	
	}

.contentsC h2{
	text-align:center;
	font-size:3.5vw;
	font-weight:600;
	height:8vh;
	
	}

.me{
	line-ehight:1em;
	padding:0.5em 0.5em;
	background-color:#f3a7fe;
	border-radius:70% 60% 70% 60% / 60% 80% 60% 70%;
	color:#f9fbf9;
	font-size:3vw;
	display:block;
	padding:0.5em;
	margin:1vh 20vw;
	text-align:center;
	
	}

.school{
	line-ehight:1em;
	padding:0.5em 0.5em;
	background-color:#bfbfdf;
	border-radius:70% 60% 50% 50% / 50% 60% 70% 80%;
	color:#f9fbf9;
	font-size:3vw;
	display:block;
	padding:0.5em;
	margin:1vh 20vw;
	text-align:center;
	
	}

.collabo{
	line-ehight:1em;
	padding:0.5em 0.5em;
	background-color:#b5d67e;
	border-radius:70% 40% 50% 50% / 50% 60% 70% 60%;
	color:#f9fbf9;
	font-size:3vw;
	display:block;
	padding:0.5em;
	margin:1vh 20vw;
	text-align:center;
	
	}

.h2-big{
	font-size:4.5vw;
	
	}

.contentsA p,.contentsB p{
	text-align:left;
	font-size:3vw;
	
	}

.contentsC p{
	text-align:center;
	font-size:3vw;
	
	}

@media(min-width:700px){
	.contentsA{
		height:12vh;
		padding:3vh 2vw;
		gap:1vh;
		
		}
	
	.contentsB{
		height:25vh;
		padding:3vh 2vw;
		gap:1vh;
		
		}
	
	.contentsC{
		height:20vh;
		padding:3vh 2vw;
		gap:1vh;
		
		}
	
	.ww-img{
		padding:0.5vh 0.5vw;
		
		}
	
	.contentsA h2{
		font-size:1vw;
		
		}
	
	.contentsB h2{
		font-size:1vw;
		height:5vh;
		
		}
	
	.contentsC h2{
		font-size:1vw;
		height:3vh;
		
		}
	
	.contentsA p,.contentsB p,.contentsC p{
		font-size:1vw;
		
		}
	
	.me,.school,.collabo{
		line-ehight:0.5em;
		padding:0.5em;
		margin:0 7vw;
		font-size:1vw;
		
		}
	
	.h2-big{
		font-size:1.3vw;
		
		}
	
}

@media(min-width:1100px){
	.contentsA{
		height:32vh;
		padding:3vh 2vw;
		gap:2vh;
		
		}
	
	.contentsB{
		height:57vh;
		padding:3vh 2vw;
		gap:2vh;
		
		}
	
	.contentsC{
		height:45vh;
		padding:3vh 2vw;
		gap:2vh;
		
		}
	
	.ww-img{
		padding:1vh 0.5vw;
		
		}
	
	.contentsB h2{
		height:12vh;
		
		}
	
	.contentsC h2{
		height:10vh;
		
		}
	
	.me,.school,.collabo{
		margin:0 5vw;
		
		}
	
}

/*--message--*/
.messag .explanation{
	padding-bottom:2vh;
	font-weight:600;
	
	}

.atogaki{
	text-align:;
	padding:2vh 0;
	
	}

.arrow{
	font-size:3vw;
	font-weight:600;
	text-align:center;
	
	}

.msg-btn{
	padding:2vh 20vw 15vh;
	text-align:center;
	
	}

.btn-m{
	background: transparent;
	border: none;
	outline: none;
	box-shadow: none;
	
	}

.btn-m a{
	background-color:#dee9e3;
	line-height:3em;
	padding:2vh 6vw;
	border-radius:40px;
	font-size:4vw;
	font-weight:600;
	color:unset;
	text-decoration:none;
	border: none;
	outline: none;
	box-shadow: none;
	
	}

@media(min-width:700px){
	.atogaki{
		font-size:1.3vw;
		padding:3vh 0;
		
		}
	
	.msg-btn{
		padding:2vh 20vw;
		
		}
	
	.arrow{
		font-size:2vw;
		
		}
	
	.btn-m a{
		font-size:2vw;
		
		}
	
	.btn-m:hover{
		transform:scale(1.1, 1.1);
		transition:0.5s;
		
		}
	
}

/*--profile--*/
.p-container{
	background-color:rgba(249,251,249,0.7);
	border-radius:20px;
	display:grid;
	gap:2vh;
	text-align:center;
	
	}

.p-left{
	display:grid;
	gap:2vh;
	
	}

.p-left h1{
	background:none;
	
	}

.p-left-img{
	padding:5vh 20vw;
	
	}

.p-right h2{
	font-size:7vw;
	
	}

.p-right p{
	text-align:left;
	padding:4vh 6vw;
	
	}

@media(min-width:700px){
	.p-container{
		display:grid;
		grid-template:'p-left  p-right' auto / 42% 54%;
		gap:2vh;
		
		}
	
	.p-left{
		padding:0 0 2vh 2vw;
		
		}
	
	.title-container{
		position:relative;
		
		}
	
	.p-left .title{
		position:absolute;
		left:-3vw;
		font-size:4vw;
		text-align:left;
		left:-3vw
		
		}
	
	.p-left-img{
		padding:0 6vw;
		display:flex;
		align-items:center;
		
		}
	
	.p-right{
		padding:0 2vw 2vh 0;
		
		}
	
	.p-right h2{
		margin:3vh 10vw;
		font-size:3vw;
		
		}
		
	.p-right p{
		font-size:1vw;
		padding:2vh 1vw;
		
		}
	
}

@media(min-width:1100px){
	.profile{
		padding:50vh 15vw 5vh;
		
		}
		
}

/*--last--*/
.last h1{
	font-size:7vw;
	color:#98baa7;
	background:none;
	
	}

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


/*--フッター--*/
.footer{
	text-align:center;
	padding-bottom:4vh;
	position:sticky;
	top:100vh;
	margin:0;
	
	}

.footer h1{
	font-size:2vw;
	
	}

.footer p{
	font-family: "Cormorant Garamond", serif;
	font-weight: 300;
	font-style: normal;
	font-size:3.5vw;
	
	}

@media(min-width:700px){
	.footer{
		padding-bottom:2vh;
		
		}
	
	.footer h1{
		font-size:1.3vw;
		
		}
	
	.footer p{
		font-size:2vw;
		
		}
	
}

@media(min-width:1100px){
	.footer p{
		font-size:1.4vw;
		
		}
	
}


/*-----sub.htmlに追加するCSS-----*/
/*サブ-セクションタイトル*/
.sub-title{
	padding-bottom:1vh;
	background:none;
	text-align:left;
	font-size:8vw;
	color:#98baa7;
	line-height:1.5em;
	
	}

.sub-little{
	background:none;
	text-align:left;
	font-size:4vw;
	color:#98baa7;
	
	}

@media(min-width:700px){
	.sub-title{
		font-size:3vw;
		
		}
	
	.sub-little{
		font-size:2vw;
		
		}
	
}

/*サブ大箱*/
.sub-container{
	padding:10vh 5vw 5vh;
	text-align:center;
	
	}

@media(min-width:700px){
	.sub-container{
		padding:5vh 12vw 5vh;
		
		}
}

/*サブコンテンツ-全体*/
.sub-contents{
	display:grid;
	gap:3vh 3vw;
	
	}

@media(min-width:1100px){
	.sub-contents{
		height:65vh;
		display:grid;
		grid-auto-flow: column;
		grid-template:'p-left  p-right' auto / 48% 48%;
		gap:2vh 3vw;
		
		}
	
	/*スクロール設定（左右共通）*/
	.sub-web .sub-img{
		height:57vh;
		overflow: scroll;
		
		}
	
	.sub-web .sub-link{
		height:8vh;
		
		}
	
	.sub-gr .sub-img{
		height:65vh;
		overflow: scroll;
		
		}
	
	.sub-right{
		height:65vh;
		overflow: scroll;
		
		}
	
	.sub-img::-webkit-scrollbar {
		background:#dafede;
		width: 0.4vw;
		height:0;
		
		}
	
	.sub-img::-webkit-scrollbar-thumb{
		background-color:#98baa7;
		
		}
	
	.sub-right::-webkit-scrollbar {
		background:#f9fbf9;
		width: 0.4vw;
		height:0;
		
		}
	
	.sub-right::-webkit-scrollbar-thumb{
		background-color:#98baa7;
		
		}
	
}

/*サブコンテンツ-左（画像・リンク）*/
.sub-img{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-template-rows: repeat(10vh);
	gap:1vh 2vw;
	
	}

.sub-img a:hover{
	transform:none;
	
	}

.item:first-child{
	grid-column: 1 / 4;
	grid-row: 1 / 3;
	
	}

.item img{
	height:10vh;
	object-fit:contain;
	
	}

.item1 img{
	width:100%;
	height:22vh;
	object-fit:contain;
	
	}

.sub-link{
	display:flex;
	flex-direction:column;
	gap:1vw;
	padding:3vh 2vw;
	
	}

.link-explanation{
	font-size:4vw;
	font-weight:600;
	
	}

.link-rul a{
	background-color:#dee9e3;
	padding:0 3vw;
	border-radius:20px;
	font-size:2vw;
	font-weight:600;
	color:unset;
	text-decoration:none;
	
	}

.link-rul a:visited{
	color:unset;
	
	}

.link-rul:hover{
	transform:scale(1.03, 1.03);
	transition:0.5s;
	
	}

@media(min-width:700px){
	.sub-img{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		grid-template-rows: repeat(15vh);
		gap:2vh 2vw;
		
		}
	.item img{
		height:15vh;
		object-fit:contain;
		
		}
	
	.item1 img{
		width:100%;
		height:32vh;
		object-fit:contain;
		
		}
	
	.sub-link{
		display:flex;
		flex-direction:row;
		justify-content:center;
		gap:1vw;
		align-items:end;
		padding:2vh 2vw;
		
		}
	
	.sub-link p{
		font-size:1vw;
		padding-bottom:0;
		
		}
	
	.link-rul a{
		font-size:1vw;
		padding:1vh 1vw;
		
		}
	
}

@media(min-width:1100px){
	.sub-left{
		display:flex:
		flex-direction:column;
		gap:2vh;
		
		}
	
	.sub-img{
		display: grid;
		grid-template-columns: repeat(3,11vw);
		grid-template-rows: repeat(20vh);
		gap:4vh 1vw;
		
		}
	
	.item1 img{
		width:100%;
		height:41vh;
		object-fit:contain;
		
		}
	
	.sub-link{
		display:flex;
		flex-direction:row;
		gap:1vw;
		align-items:end;
		padding:0 2vw;
		
		}
	
	.sub-link p{
		font-size:1vw;
		padding-bottom:0;
		
		}
	
	.link-rul a{
		font-size:0.8vw;
		padding:1vh 1vw;
		
		}
	
}

/*サブコンテンツ-右（コメント）*/
.sub-right{
	padding:1vh 2vw 3vh;
	background-color:#f9fbf9;
	display:grid;
	gap:2vh;
	
	}

.sub-right h2{
	line-height:1.5em;
	text-align:left;
	font-size:5vw;
	font-weight:600;
	
	}

.sub-right .me,.sub-right .school,.sub-right .collabo{
	display:block;
	text-align:center;
	padding:0;
	margin:0 60vw 0 0;
	
	}

.comment-box{
	display:flex;
	flex-direction:column;
	gap:1em;
	
	}

.comment-box li{
	text-align:left;
	
	}

.comment-list{
	display:flex;
	justify-content:left;
	
	}

.list-title{
	box-sizing:border-box;
	width:30vw;
	
	}

.list-explanation{
	box-sizing:border-box;
	text-indent:-1.5em;
	width:40vw;
	
	}

.comment-box h3{
	text-align:left;
	font-size:4vw;
	font-weight:600;
	
	}

.comment-box p{
	text-align:left;
	font-size:4vw;
	
	}

.indent1{
	padding:0 1em;
	
	}

.indent2{
	padding:0 1em 0 2em;
	
	}

@media(min-width:700px){
	.sub-right{
		padding:0 2vw;
		
		}
	
	.sub-right h2{
		padding-top:1vh;
		font-size:1.5vw;
		
		}
	
	.sub-right .me,.sub-right .school,.sub-right .collabo{
		font-size:1.2vw;
		padding:0.5vh 0.5vw;
		margin:0 60vw 0 0;
		
		}
	
	.list-title{
		box-sizing:border-box;
		width:10vw;
		
		}

	.list-explanation{
		box-sizing:border-box;
		text-indent:-1.5em;
		width:50vw;
		
		}
	
	.comment-box h3{
		font-size:1.2vw;
		
		}
	
	.comment-box p{
		font-size:1vw;
		
		}
	
	.comment:last-child{
		padding-bottom:3vh;
		
		}
	
}

@media(min-width:1100px){
	.sub-right .me,.sub-right .school,.sub-right .collabo{
		margin:0 25vw 0 0;
		
		}
	
	.sub-right h2{
		padding-top:3vh;
		font-size:1.5vw;
		
		}
	
	.list-title{
		width:8vw;
		
		}

	.list-explanation{
		width:20vw;
		
		}
	
}