body {
	width: 80%;
	max-width: 1280px;
	min-width: 640px;
	margin-right: auto;
	margin-left: auto;
	background-color: #F4F4F4;
}
.accordion {
	display: none;
	width: 50%;
	margin: 0 auto;
	/*padding: 10px;*/
}
.accordion .ac-content {
	margin: 0 10px;
}
.accordion input {
	display: none;
}
.accordion label {
	display: block;
	background: #9fb7d4;
	cursor: pointer;
	padding: 2px;
	border-bottom: 1px solid #fff;
}
.accordion label:hover {
	background: #ccc;
}
.accordion .ac-cont {
	transition: 0.2s;
	height: 0;
	overflow: hidden;
	background: #ddd;
	padding: 0 2px;
}
.accordion input:checked + .ac-cont {
	height: auto;
	padding: 2px;
}

input.year {
	width: 60px;
}
input.month {
	width: 40px;
}
input.day {
	width: 40px;
}
div.topMainOut {
	width: 100%;
	background-color: #FFFFFF;
}
div.topMainIn {
	width: 640px;
	height: 640px;
	background-color: #FFFFFF;
}
div.top {
	max-width: 1280px;
	min-width: 640px;
	border-bottom: medium solid #768ABA;
	background-color: #FFFFFF;
}
div.menu {
	margin-top: 1%;
	margin-right: 1%;
	margin-left: 1%;
	overflow: auto;
	width: 20%;
	float: left;
	background-color: #FFFFFF;
}
div.main {
	margin-top: 1%;
	margin-right: 1%;
	overflow: auto;
	width: 77%;
	float: left;
	background-color: #FFFFFF;
}

div.main2 {
	overflow: auto;
	width: 100%;
	background-color: #FFFFFF;
}

img#landing_logo {
	max-width: 400px;
}

div#book {
	width: 150px;
	height: 150px;
	background-color: #5ECCF3;
	border-radius: 75px;
	position: absolute;
	margin-left: 245px;
	margin-top: 0px;
	text-align: center;
	color: #FFFFFF;
	font-size: 30px;
	text-decoration: none;
	text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
}
div#news {
	width: 150px;
	height: 150px;
	background-color: #7E6EF5;
	border-radius: 75px;
	position: absolute;
	margin-left: 418px;
	margin-top: 72px;
	text-align: center;
	color: #FFFFFF;
	font-size:30px;
	text-decoration: none;
	text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
}
div#magazine {
	width: 150px;
	height: 150px;
	background-color: #D35EF4;
	border-radius: 75px;
	position: absolute;
	margin-left: 490px;
	margin-top: 245px;
	text-align: center;
	color: #FFFFFF;
	font-size:30px;
	text-decoration: none;
	text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
}
div#paper {
	width: 150px;
	height: 150px;
	background-color: #FD5C79;
	border-radius: 75px;
	position: absolute;
	margin-left: 418px;
	margin-top: 418px;
	text-align: center;
	color: #FFFFFF;
	font-size:30px;
	text-decoration: none;
	text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
}
div#DB {
	width: 150px;
	height: 150px;
	background-color: #FFB05D;
	border-radius: 75px;
	position: absolute;
	margin-left: 245px;
	margin-top: 490px;
	text-align: center;
	color: #FFFFFF;
	font-size:30px;
	text-decoration: none;
	text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
}
div#web {
	width: 150px;
	height: 150px;
	background-color: #FFDC5D;
	border-radius: 75px;
	position: absolute;
	margin-left: 72px;
	margin-top: 418px;
	text-align: center;
	color: #FFFFFF;
	font-size:30px;
	text-decoration: none;
	text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
}
div#field {
	width: 150px;
	height: 150px;
	background-color: #F1FE5D;
	border-radius: 75px;
	position: absolute;
	margin-left: 0px;
	margin-top: 245px;
	text-align: center;
	color: #FFFFFF;
	font-size:25px;
	text-decoration: none;
	text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
}
div#media {
	width: 150px;
	height: 150px;
	background-color: #8BFA5C;
	border-radius: 75px;
	position: absolute;
	margin-left: 72px;
	margin-top: 72px;
	text-align: center;
	color: #FFFFFF;
	font-size:25px;
	text-decoration: none;
	text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
}
div.output a {
	width: 200px;
	height: 34px;
	background-color: #6993F4;
	border-radius: 5px;
	float: right;
	margin-top: -43px;
	text-align: center;
	vertical-align: bottom;
	color: #FFFFFF;
	font-size: 25px;
	text-decoration: none;
	padding-top: 9px;
	text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
}

div.shima table {
	border: 1px solid #ccc;
}

.shima th {
	border: none;
}

.shima td {
	border-top: 1px solid #ececec;
	border-right: 1px solid #ccc;
	border-bottom: none;
	border-left: 1px solid #ccc;
}

.shima thead tr {
	border-right: 1px solid #AAAAAA;
	border-bottom: 1px solid #AAAAAA;
	border-left: 1px solid #AAAAAA;
	background-color: #AAAAAA;
}

.shima tbody tr {
	border-bottom: 1px solid #ccc;
	background-color: white;
}

.shima tbody tr:nth-child(even) {
	background-color: #ECECEC; /* whiteと適度に差がある配色 */
}

div.referenceNarrow table {
	display: none;
}

div.referenceWide table, div.referenceWide td {
	border: 1px solid;
}

div.dateInput table, div.dateInput td {
	border: 0;
}

div.referenceEdit table {
	display: table;
	border-collapse: separate;
	border-spacing: 0;
}
div.referenceEdit table, div.referenceEdit td {
	border: 1px solid;
}
div.referenceEdit table {
	width: 90%;
}
div.referenceEdit input {
	width: 100%;
}
div.referenceEdit td {
	padding: 7px;
}

/*  ================================== */

@media screen and (max-width: 768px) {
	body {
		width: 100%;
		min-width: auto;
		margin-right: auto;
		margin-left: auto;
		background-color: #F4F4F4;
	}

	.accordion {
		width: auto;
		height: auto;
		display: block;
		float: right;
		position: relative;
		margin-top: -4.5vh;
		right: 0;
		text-align: right;
	}
	.accordion .ac-content {
		margin: 0 10px;
	}
	.accordion input {
		display: none;
	}
	.accordion label {
		display: block;
		background: #9fb7d4;
		cursor: pointer;
		/*padding: 10px;*/
		border-bottom: 1px solid #fff;
	}
	.accordion label:hover {
		background: #ccc;
	}
	.accordion .ac-cont {
		transition: 0.2s;
		height: 0;
		overflow: hidden;
		background: #ddd;
		/*padding: 0 10px;*/
	}
	.accordion input:checked + .ac-cont {
		height: auto;
		/*padding: 10px;*/
	}
	
	div.topMainOut {
		width: 100%;
		height: 85vh;
		background-color: #FFFFFF;
	}
	div.topMainIn {
		width: auto;
		height: auto;
		background-color: #FFFFFF;
	}
	div.top {
		width: 100%;
		height: auto;
		min-width: auto;
		border-bottom: medium solid #768ABA;
		background-color: #FFFFFF;
	}
	div.menu {
		margin-top: 1%;
		margin-right: 1%;
		margin-left: 1%;
		overflow: auto;
		width: 20%;
		float: left;
		background-color: #FFFFFF;
		display: none;
	}
	div.main {
		margin-top: 1%;
		margin-right: 1%;
		overflow: auto;
		width: 100%;
		float: left;
		background-color: #FFFFFF;
	}
	.main td {
		font-size: 1em;  /*150%*/
	}
	.main input {
		font-size: 1em;  /*150%*/
		width: auto;
	}
	.main select {
		font-size: 150%;
	}

	img#landing_logo {
		max-width: min(400px, 80%);
	}

	div#book {
		width: 30vw;
		height: 30vw;
		border-radius: 15vw;
		background-color: #5ECCF3;
		position: absolute;
		margin-left: 17.5vw;
		margin-top: 0;
		text-align: center;
		color: #FFFFFF;
		font-size: max(2.5vw, 16px);
		text-decoration: none;
		text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
	}
	div#news {
		width: 30vw;
		height: 30vw;
		border-radius: 15vw;
		background-color: #7E6EF5;
		position: absolute;
		margin-left: 52.5vw;
		margin-top: 0;
		text-align: center;
		color: #FFFFFF;
		font-size: max(2.5vw, 16px);
		text-decoration: none;
		text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
	}
	div#magazine {
		width: 30vw;
		height: 30vw;
		border-radius: 15vw;
		background-color: #D35EF4;
		position: absolute;
		margin-left: 52.5vw;
		margin-top: 35vw;
		text-align: center;
		color: #FFFFFF;
		font-size: max(2.5vw, 16px);
		text-decoration: none;
		text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
	}
	div#paper {
		width: 30vw;
		height: 30vw;
		border-radius: 15vw;
		background-color: #FD5C79;
		position: absolute;
		margin-left: 52.5vw;
		margin-top: 70vw;
		text-align: center;
		color: #FFFFFF;
		font-size: max(2.5vw, 16px);
		text-decoration: none;
		text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
	}
	div#DB {
		width: 30vw;
		height: 30vw;
		border-radius: 15vw;
		background-color: #FFB05D;
		position: absolute;
		margin-left: 52.5vw;
		margin-top: 105vw;
		text-align: center;
		color: #FFFFFF;
		font-size: max(2.5vw, 16px);
		text-decoration: none;
		text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
	}
	div#web {
		width: 30vw;
		height: 30vw;
		border-radius: 15vw;
		background-color: #FFDC5D;
		position: absolute;
		margin-left: 17.5vw;
		margin-top: 105vw;
		text-align: center;
		color: #FFFFFF;
		font-size: max(2.5vw, 16px);
		text-decoration: none;
		text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
	}
	div#field {
		width: 30vw;
		height: 30vw;
		border-radius: 17.5vw;
		background-color: #F1FE5D;
		position: absolute;
		margin-left: 17.5vw;
		margin-top: 70vw;
		text-align: center;
		color: #FFFFFF;
		font-size: max(2.5vw, 16px);
		text-decoration: none;
		text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
	}
	div#media {
		width: 30vw;
		height: 30vw;
		border-radius: 17.5vw;
		background-color: #8BFA5C;
		position: absolute;
		margin-left: 17.5vw;
		margin-top: 35vw;
		text-align: center;
		color: #FFFFFF;
		font-size: max(2.5vw, 16px);
		text-decoration: none;
		text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
	}
	div#girl {
		display: none;
	}

	input.year {
		width: 120px;
	}
	input.month {
		width: 80px;
	}
	input.day {
		width: 80px;
	}

	div.main2 {
		overflow: auto;
		width: 100%;
		background-color: #FFFFFF;
	}

	div.output a {
		display: none;
		width: auto;
		height: auto;
		background-color: #6993F4;
		border-radius: 5px;
		float: right;
		margin-top: -6vw;
		margin-right: 0;
		text-align: center;
		color: #FFFFFF;
		font-size: max(2.5vw, 16px);
		text-decoration: none;
		padding: 1vw 1vw;
		text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
	}

	video {
		width: 90%;
	}

	div.referenceWide table {
		display: none;
	}
	div.referenceNarrow table {
		display: table;
		border-collapse: separate;
		border-spacing: 0;
	}
	div.referenceNarrow table, div.referenceNarrow td {
		border: 1px solid;
	}
	div.referenceNarrow table {
		width: 90%;
	}
	div.referenceNarrow input {
		width: 100%;
	}
	div.referenceNarrow td {
		padding: 7px;
	}

	div.shima table {
		border: 1px solid #ccc;
		font-size: max(10px, min(2.5vw, 16px));
	}

	.shima th {
		border: none;
	}

	.shima td {
		border-top: 1px solid #ececec;
		border-right: 1px solid #ccc;
		border-bottom: none;
		border-left: 1px solid #ccc;
	}

	.shima thead tr {
		border-right: 1px solid #AAAAAA;
		border-bottom: 1px solid #AAAAAA;
		border-left: 1px solid #AAAAAA;
		background-color: #AAAAAA;
	}

	.shima tbody tr {
		border-bottom: 1px solid #ccc;
		background-color: white;
	}

	.shima tbody tr:nth-child(even) {
		background-color: #ECECEC; /* whiteと適度に差がある配色 */
	}

	div.output2 a {
		width: 200px;
		height: 34px;
		background-color: #6993F4;
		border-radius: 5px;
		float: right;
		margin-top: -9999px;
		text-align: center;
		vertical-align: bottom;
		color: #FFFFFF;
		font-size: 25px;
		text-decoration: none;
		padding-top: 9px;
		text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
	}
}

@media screen and (min-width: 769px) {

div.output2 a {
	width: 200px;
	height: 34px;
	background-color: #6993F4;
	border-radius: 5px;
	float: right;
	margin-top: -43px;
	text-align: center;
	vertical-align: bottom;
	color: #FFFFFF;
	font-size: 25px;
	text-decoration: none;
	padding-top: 9px;
	text-shadow: black 0.5px 0.5px 0px, black -0.5px 1px 0px, black 0.5px -0.5px 0px, black -0.5px -0.5px 0px;
}
}