body {
	font: 13px Arial, Helvetica, Sans-serif;
}

#container {
	width: 100%;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#menuScreen {
	display: none;
}

#headerDiv {
	font-weight: bold;
	width: 100%;
	margin-bottom: 30px;
}

#schoolDiv {
	position: relative;
	text-align: right;
	display: flex;
	align-items: center;
	margin-left: auto;
}

#logo {
	z-index: 1;
}

#title {
	color: #555555;
	margin: 0px;
}

#backGround {
	position: relative;
	background: linear-gradient(180deg, black 0%, black 50%, #414141 50%, #414141 100%);
	z-index: 0;
}

.headerPath {
	color: white !important;
	display: flex;
	justify-content: space-between;
	position: relative;
	top: 1px;
}

#headerMenu {
	color: white;
	z-index: 1;
}

#container {
	width: 1300px;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#logo {
	margin-left: 21px;
	position: absolute;
	bottom: -15px;
}

#topDiv {
	margin-left: 160px;
	display: flex;
}

#title {
	font-size: 40px;
}

#backGround {
	position: relative;
	background: linear-gradient(180deg, black 0%, black 50%, #414141 50%, #414141 97%,
		black 97%, black 100%);
	height: 50px;
}

#wrapper {
	position: relative;
	display: inline-block;
	left: 140px;
	top: 10px;
}

#globalNavi {
	display: inline-block;
	margin-left: 20px;
	color: white;
}

#bottomItem {
	grid-template-columns: 1fr 1fr 1fr;
}

#upload {
	grid-column: 2/3;
	align-self: center;
	text-align: center;
}

#download {
	grid-column: 3/4;
	justify-self: center;
}

.box {
	height: 700px;
	border: 1px solid #333;
	text-align: left;
}

#backGround li {
	display: table-cell;
	border-right: 2px solid #ccc;
	border-left: 2px solid #ccc;
	padding: 0px 10px;
	text-align-last: justify;
	font-weight: normal;
}

#backGround li+li {
	border-left: 0px;
	border-right: 2px solid #ccc;
}

nav ul li a {
	display: block;
}

@media screen and (min-width:768px) {
	#container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	#logo {
		margin-left: 21px;
		position: absolute;
		bottom: -15px;
	}
	#title {
		font-size: 40px;
		min-height: 55p;
	}
	#backGround {
		position: relative;
		background: linear-gradient(180deg, black 0%, black 50%, #414141 50%, #414141 100%);
		white-space: nowrap;
		min-width: max-content;
		display: flex;
		align-items: center;
		height: 55px;
	}
	#mobileWrapper {
		display: none;
	}
	#wrapper {
		position: relative;
		display: inline-block;
		top: 0;
	}
	#btnNavi {
		display: none;
	}
	#globalNavi {
		display: inline-block;
		margin-left: 20px;
		color: white;
	}
	#homeLnk {
		position: absolute;
		right: 0px;
		top: 10px;
		color: white;
		background: #414141;
		padding: 5px;
	}
	#mobileTitle {
		font-size: 31px;
		color: white;
		margin-left: 70px;
		position: relative;
		display: none;
	}
	#globalNavi ul {
		font-size: 18px;
		display: flex;
	}
	.top {
		width: 60px;
	}
	.about {
		width: 130px;
	}
	.gaiyou {
		width: 80px;
	}
	.templates {
		width: 60px;
	}
	.stay {
		width: 120px;
	}
	.nittei {
		width: 80px;
	}
	.kaijou {
		width: 80px;
	}
	.kyosan {
		width: 70px;
	}
	.sankahi {
		width: 110px;
	}
	.official {
		width: 110px;
	}
	.syukanko {
		display: none !important;
	}
	#homeLnk {
		position: absolute;
		right: 0px;
		top: 10px;
		color: white;
		background: #414141;
		padding: 5px;
	}
	#bottomItem {
		grid-template-columns: 1fr 1fr 1fr;
		display: -ms-grid;
		-ms-grid-columns: 1fr 1fr 1fr;
		-ms-grid-rows: 1fr;
	}
	#upload {
		grid-column: 2/3;
		-ms-grid-column: 2;
		-ms-grid-row: 1;
		align-self: center;
		text-align: center;
	}
	#download {
		grid-column: 3/4;
		-ms-grid-column: 3;
		-ms-grid-row: 1;
		justify-self: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		margin-right: 10%;
	}
	.box {
		height: 780px;
		border: 1px solid #333;
		text-align: left;
	}
	.headerMenuList {
		display: table-cell;
		border-right: 2px solid white;
		border-left: 2px solid white;
		padding: 0px 10px;
		text-align-last: justify;
		width: 100px;
		font-weight: normal;
	}
	.headerMenuList+.headerMenuList {
		border-left: 0px;
		border-right: 2px solid white;
	}
	nav ul li a {
		display: flex;
		justify-content: space-between;
	}
}

@media screen and (max-width:768px) {
	@-ms-viewport {
		width: 420px;
	}
	#container {
		width: 420px;
	}
	#menuScreen {
		z-index: 1;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		opacity: 0.2;
		background-color: #000000;
		position: fixed;
	}
	#headerDiv {
		margin-bottom: 30px;
		position: relative;
	}
	#topDiv {
		display: none;
	}
	#backGround {
		background: transparent;
		display: flex;
		margin-bottom: 20px;
	}
	#logo {
		width: 70px;
		height: 70px;
		left: 5px;
		margin-left: 0px;
		position: absolute;
		top: 10px;
	}
	#t1 {
		top: 10px;
	}
	#t2 {
		top: 45px;
	}
	.mobile_title {
		position: absolute;
		display: inline-block;
		left: 80px;
		margin: 0px;
		font-size: 27px;
		margin: 0px;
	}
	#wrapper {
		display: none;
	}
	/*
	* モバイルでメニューアイコン分ページが寄ってしまうためabsoluteに設定
	*/
	#mobileWrapper {
		position: absolute;
	}
	#mobileWrapper nav {
		position: absolute;
		z-index: 2;
		right: -420px;
		width: 0px;
		top: -10px;
		padding-top: 40px;
		background: #333;
		font-size: 16px;
		box-sizing: border-box;
		height: 100vh;
		display: none;
	}
	#mobileWrapper nav ul {
		top: 20px;
		position: relative;
		background: #333;
	}
	#mobileWrapper nav ul li {
		display: list-item;
		list-style: none;
		border-right: none;
		border-left: none;
	}
	#mobileWrapper nav ul li a {
		text-decoration: none;
		color: #ddd;
		display: block;
		padding: 15px 10px;
	}
	#mobileWrapper #btnNavi {
		position: fixed;
		z-index: 3;
		top: 0px;
		right: 20px;
		width: 30px;
		height: 24px;
		box-sizing: border-box;
		cursor: pointer;
		-webkit-transition: all 400ms;
		transition: all 400ms;
		dispay: block;
	}
	#mobileWrapper #btnNavi span {
		position: absolute;
		width: 30px;
		height: 4px;
		background: #666;
		border-radius: 10px;
		-webkit-transition: all 400ms;
		transition: all 400ms
	}
	#mobileWrapper #btnNavi span:nth-child(1) {
		top: 0
	}
	#mobileWrapper #btnNavi span:nth-child(2) {
		top: 10px
	}
	#mobileWrapper #btnNavi span:nth-child(3) {
		top: 20px
	}
	#mobileWrapper #btnNavi.open span {
		background: #fff;
		width: 30px;
	}
	#mobileWrapper #btnNavi.open span:nth-child(1) {
		transform: rotate(-45deg);
		top: 15px;
	}
	#mobileWrapper #btnNavi.open span:nth-child(2) {
		display: none;
	}
	#mobileWrapper #btnNavi.open span:nth-child(3) {
		transform: rotate(45deg);
		top: 15px;
	}
	.box {
		height: 100%;
		border: 1px solid #333;
		text-align: left;
	}
	.headerList {
		border-top: 2px solid white;
		border-bottom: 2px solid white;
		padding: 0px 10px;
		text-align-last: justify;
	}
	.headerList+.headerList {
		border-top: 0px;
		border-bottom: 2px solid white;
	}
	#upload {
		margin-top: 40px;
	}
	.menues {
		width: 90%;
		min-width: 0px;
	}
	#bottomItem {
		display: unset;
		text-align: center;
	}
	#download {
		display: inline-block;
	}
}