html{
	touch-action: manipulation;
}

body{
	margin:0px;
	padding: 0;
	-webkit-text-size-adjust: 100%;
	background-color:#eee;
}
#container{
	margin: 0px auto;
	text-align:center;
	background-color: white;
}

h1{
	margin: 0;
    display: flex;
    align-items: center; /* 縦方向の中央揃え */	
	justify-content: center; /* 横方向の中央揃え */
	font-size: 100%;
	background-color: black;
	font-weight: bold;
	color: white;
	height: 6vh;
}
h2{
	display: inline-block;
	width: 90%;
	font-size: 100%;
	border-bottom: solid 2px;
}
.top-link{
	margin: 4vh 2vh;
	text-decoration: none;
}

main{
	height: 100%;
}
p{
	margin: 1vh;
}
select {
	height: 4vh;
	width: 12vh;
	text-align: center;
	border: solid 2px black;
}
.box {
	display: flex;	/* 左右に要素を並べる */
	align-items: flex-start;	/* 上揃え */
	border-bottom: 2px solid #222;	/* 枠線 */
	padding: 1vh;
	margin: 0;
}
.title {
	font-weight: bold;
	margin: 1vh;
}
.description {
	flex-grow: 1; /* 説明文の領域を広げる */
	text-align: left;
	margin-left: 2vh;
}
.link_button {
	flex: 1;
	font-size: 1.4vh;
	height: 3vh;
	width: 8vh;
	border-radius: 0.5vh;
	background-color: rgb(111, 111, 126);
	border: none;
	color: white;
	margin-right: 1vh;
}

.picture_box{
	display: inline-block;
	margin-top: 2vh;
	width: 14%;
	padding: 2%;
}
.picture{
	width: 100%;
	border: solid 2px #aaa;
}

a{
	font-weight: bold;
}
a:link {color:#666;}
a:visited{color:#666;}
a:hover{color:#aaa;}
a:active{color:#666;}

@media screen and (min-device-width: 481px) {
	#container{
		width:800px;
	}
	.thumbnail_small {
		height: 12vh;
	}
}
@media screen and (max-device-width: 480px) {
	body { 
		font-size : 1.5vh;

	}
	select{
		font-size : 1.5vh;
	}
	.thumbnail_small {
		height: 8vh;
	}
}