@charset "utf-8";
@import "./print.css" print;
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100..700&display=swap');

body {
}

header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem;
	border-bottom: 1px solid silver;

	h1, div.title {
		font-size: 1rem;
		font-weight: 600;
		margin-bottom: 0;

		a {
			text-decoration: none;
			color: inherit;
		}
	}

	nav {
		margin-right: 0.5rem;
		ul {
			list-style-type: none;
			margin: 0;
			display: flex;

			li {
				margin-left: 1.2rem;
			}

			a {
				text-decoration: none;
				vertical-align: sub;
			}
		}
	}
}

main {
	padding: 1.75rem 0.5rem 3.0rem;

	h1 {
		margin-bottom: 2.5rem;
		font-size: 1.5rem;
	}

	.p-link {
		display: flex;
		list-style-type: none;
		font-size: 2.0rem;

		.p-link__movie {
			color: red;
		}
		.p-link__pdf {
			color: red;
		}
		.p-link__ireal {
			color: red;
		}

		a {
			color: inherit;
		}
	}
}

footer {
	padding: 0.5rem;
	border-top: 1px solid silver;
	text-align: center;

	nav {
		ul {
			list-style-type: none;
			display: flex;
			justify-content: flex-end;
			margin-bottom: 0;

			li {
				margin: 0 0.5rem;
			}
		}
	}

	.p-copy {
		margin: 0;
	}
}

a {
	text-decoration: none;
}

sub {
	bottom: 0;
}

.p-totop {
	margin: 0px;
	display: none;
}

.p-index {
	h2 {
		font-size: 1.4rem;
		margin-bottom: 0.5rem;
	}

	section {
		margin-bottom: 4rem;
	}
}

.p-search {
	margin-bottom: 1.75rem;
}

.p-detail {
	position: relative;

	h1 {
		span {
			display: block;
			font-size: 1.0rem;
			margin-left: 0.5rem;

			@media screen and (min-width: 768px) {
				display: inline;
				margin-left: 1.0rem;
			}
		}
	}

	.p-font {
		position: absolute;
		top: 4.5rem;
		right: 0.5rem;
		display: flex;
		list-style-type: none;

		@media screen and (min-width: 768px) {
			top: 1.5rem;
		}

		li {
			margin-left: 0.15rem;
		}

		span.btn {
			font-size: 0.9rem;
		}
	}

	.p-detail-qr {
		position: absolute;
		top: 1.5rem;
		right: 1.5rem;
		display: none;
	}

	.p-detail-chords {
		font-family: "M PLUS 1 Code", monospace;
		font-optical-sizing: auto;
		padding-top: 3.0rem;

		@media screen and (min-width: 768px) {
			padding-top: 0;
		}

		dl {
			margin-bottom: 2.0rem;
			font-weight: 600;
			break-inside: avoid;
		}
		dt {
			color: blue;
		}
		dd {
			margin-left: 0;
			margin-bottom: 0.25rem;
		}
	}

	.p-detail-excerpt {
		margin-top: 5.0rem;
		font-size: 0.8rem;

		th {
			width: 120px;
		}
	}
}

.p-list {
	h1 {
		margin-bottom: 0.5rem;
	}
	.p-list-date {
		margin-bottom: 2rem;
	}
}

.p-qr {
	text-align: center;

	.p-qr-image {
		margin-bottom: 1.0rem;
	}
}