/* CSS Document */
html, body {
  margin: 0;
  height: 100%;
}

html{
    font-size: 62.5%;
	counter-reset: number 0;
}

body{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	position: relative;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
    font-size:1.6rem;/* 16px*/
    line-height: 1.75;
	background:#00b7e9;
	padding: 0;
	margin: 0;
}

header {
	background:#fff;
	padding: 10px 5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height:80px;
	position: fixed;
	width:100%;
	z-index: 10;
	box-shadow: 0px 3px 3px rgba(100,100,100,0.5);
	
}

header h1 {
	height:50px;
	display: flex;
	justify-content: space-between;
	align-content: center;
}

header h1 a {
	width:100%;
	max-height:50px;
	display: flex;
	justify-content: space-between;
	align-content: center;
}

header h1 a img {
	max-height: 50px;
}

header nav {
	margin-right: 10px;
}


main {
	flex: 1;
	margin-top: 80px;
}

main article section.contentbox {
	width:1000px;
	margin: 3em auto;
	background: #fff;
	padding: 3em 2em;
	border-radius: 2em;
	box-shadow: 3px 3px 3px rgba(100,100,100,0.5);
}

main h2 {
	text-align: center;
	font-size: 2.4rem;
	font-weight: 600;
	color: rgba(0,7,152,1.00);
	margin-top: -1em;
	margin-bottom: 1em;
}

main h2 span{
	text-align: center;
	font-size: 1.4rem;
	font-weight: 600;
	color:rgba(151,167,253,1.00);
	display: block;
	line-height: 0.75;
}

main ol#Present li {
	display: flex;
	justify-content: space-between;
	width:600px;
	margin: 0 auto;
	font-size: 2rem;
	font-weight: 600;
background-image: linear-gradient(to right, #000000 2px, transparent 2px);
  background-size: 12px 2px; /* 点の幅、線の太さ */
  background-repeat: repeat-x;
  background-position: center; 
}

main ol#Present li span {
	background: #fff;
}

main ol#Present li span.shohin {
	color: rgba(0,2,156,1.00);
	padding-right: 0.25em;
}

main ol#Present li span.ninzu {
	color:rgba(199,0,3,1.00);
	font-size: 2.4rem;
	padding-left: 0.25em;
}

footer {
	padding: 2em 0;
	width:100%;
	background: #000;
	text-align: center;
	font-size: 1.4rem;
	color: #fff;
}

footer nav {
	display: flex;
	justify-content: center;
	gap: 1em;
}

footer nav li {
	list-style: none;
}

footer nav li a:link 	{	color: #fff;	}
footer nav li a:hover	{	color: #ffc;	}
footer nav li a:visited	{	color: #fff;	}

footer address {
	font-style: normal;
}

.btn {
	color: #fff;
	font-weight: 700;
	background: rgba(255,68,71,1.00);
	font-size: 1.6rem;
	padding: 0.75em  2em;
	border-radius: 2em;
	display: inline-block;
	text-decoration: none;
	transition: background-color 0.4s ease; 
}

.btn:hover {
	background: rgba(255,122,88,1.00);
}

.btn-entry {
	background: rgba(255,68,71,1.00);
	font-size: 1.6rem;
	padding: 0.75em  2em 0.75em 1.5em;
	border-radius: 2em;
}

.btn-entry::before {
	content: "✍️";
	text-align: center;
	background: #fff;
	display: inline-block;
	width:3rem;
	height: 3rem;
	margin-right: 0.25em;
	border-radius: 2em;
	z-index: 2;
}

.mt1 {
	margin-top:2em;
}
.center {
	text-align: center;
}

@media screen and (max-width: 999px) {/* 640px以下*/
	header h1 {
		width:96%;
		height:auto;
		position: inherit;
		margin: 0.1em auto;
	}
	
	main article section.contentbox {
		width:96%;
		margin: 3em auto;
	}
	main h2 {
		text-align: center;
		font-size: 2.4rem;
		font-weight: 600;
		color: rgba(0,7,152,1.00);
		margin-top: -1em;
		margin-bottom: 1em;
	}


	main ol#Present li {
		display:block;
		justify-content: space-between;
		width:100%;
		margin: 0 auto;
		font-size: 2rem;
		font-weight: 600;
	}

	main ol#Present li span {
		background: #fff;
		display:block;
	}

	main ol#Present li span.shohin {
		color: rgba(0,2,156,1.00);
		padding-right: 0.25em;
	}

	main ol#Present li span.ninzu {
		color:rgba(199,0,3,1.00);
		font-size: 2.4rem;
		padding-left: 0.25em;
		text-align: right;
		margin-bottom: 1em;
	}
	
	main ol#Present li span.ninzu::before {
		content: "……";
	}
	.btn-head {
		position: fixed;
		bottom: 0;
		width:100%;
		left: 0;
		border-radius: 0;
		text-align: center;
	}
	
	footer {
		padding-bottom: 4em;
	}
}