@charset "UTF-8";
.btn_en {
	border-radius: 30px !important;
}
.underonstruction {
	min-height: 20vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.underonstruction p {
	font-size: 1.25rem;
	color: var(--pale2);
	letter-spacing: .1em;
}
.btn_en_w {
	background: var(--main);
	color: var(--white);
	border: 1px solid var(--white);
	border-radius: 30px;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	padding: .55em 1.4em;
	cursor: pointer;
}
.footer-wave--sub {
	display: block;
	width: 100%;
	height: 30px;
	margin-top: 100px;
	background: url("../img/footer-wave-sub.svg") no-repeat center / 100% 100%;
}
.wave--blue {
	fill: var(--footer);
}
/* =====================================================
   page
   ===================================================== */

[hidden] {
 display: none !important;
}
.page-head {
	padding-block: 30px 20px;
}
.page-title {
	font-size: clamp(1.6rem, 4.6vw, 2.1rem);
	letter-spacing: 0;
	font-weight: 600;
	line-height: 1.4;
	color: var(--main);
	text-align: center;
	margin-bottom: 20px;
	font-family: var(--serifE);
	letter-spacing: .03em;
}
.page-lead {
	margin-top: 1.6rem;
}
.section-title {
	font-size: 1.7rem;
	letter-spacing: .1em;
	margin: 56px 0 18px;
}
.text-link {
	color: var(--link);
	text-underline-offset: 4px;
}
/* ===== profile ===== */

.profile {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
	margin-top: 0;
}
.profile-photo {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 4;
	display: grid;
	place-items: center;
	background: var(--pale);
	color: var(--ink-sub);
 font-size: .95rem;
	padding: 5px;
}
.profile-photo img {
	display: block;
	width: 100%;
	height: auto;
}
.profile-photo figcaption {
	position: absolute;
	left: 5px;
	bottom: 5px;
	margin: 0;
	padding: .2em .7em;
	background: rgba(0, 0, 0, .55);
	color: var(--pale);
 font-size: .8rem;
	line-height: 1.5;
	text-align: right;
}
.profile-name {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 16px;
}
.profile-name h2 {
	font-size: 1.8rem;
	letter-spacing: .12em;
}
.profile-name span.roma {
	font-size: 1rem;
	letter-spacing: .06em;
}
.profile-body p {
	margin-top: 1rem;
	line-height: 2;
}
.history {
	display: grid;
	grid-template-columns: 1fr;
	margin: 0;
	border-top: 1px solid var(--ink);
}
.history dt, .history dd {
	margin: 0;
 padding: .85rem 0;
	border-bottom: 1px solid var(--line);
}
.history dt {
	color: var(--main);
	font-weight: 700;
	border-bottom: 0;
	padding-bottom: 0;
}
/* ===== archive ===== */

.filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}
.chip {
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	padding: .55em 1.4em;
	background: var(--bg);
	color: var(--main);
	border: 1px solid var(--main);
	cursor: pointer;
	border-radius: var(--btn_rd);
	flex: 1 1 calc(50% - 5px);
}
.chip:hover {
	background: var(--white);
	border: 1px solid var(--main-soft);
}
.chip[aria-pressed="true"] {
	background: var(--main);
	border-color: var(--main);
	color: var(--white);
	font-weight: 700;
}
.count {
	margin-top: 26px;
 font-size: .875rem;
}
.songs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 20px;
}
.songs li {
	background: var(--bg);
	border: 1px solid var(--line);
	padding: 22px 22px 20px;
}
.s-ye {
	display: block;
	color: var(--main);
	font-weight: 700;
	font-size: 1rem;
}
.s-ti {
	font-size: 1.125rem;
	letter-spacing: .04em;
	line-height: 1.2;
 margin: .3rem 0;
}
.s-si {
	font-size: 1rem;
}
.s-de {
 margin-top: .6rem;
 font-size: .85rem;
	line-height: 1.4;
	color: var(--ink-sub);
}
.s-de:empty {
	display: none;
}
.more {
	margin-top: 28px;
	text-align: center;
}
.disco {
	margin-top: 36px;
	text-align: center;
}
button.text-link {
	font: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
}
.view-top {
	margin-top: 10px;
}
.songs-head, .songs.is-table li {
	display: grid;
 grid-template-columns: 4.6em minmax(0, 1fr) minmax(0, .8fr);
	gap: 0 1rem;
	align-items: baseline;
}
.songs-head {
	margin-top: 20px;
 padding: .6rem .5rem;
	border-top: 1px solid var(--ink);
	border-bottom: 2px solid var(--ink);
	font-weight: 700;
}
.songs.is-table {
	grid-template-columns: 1fr;
	gap: 0;
	margin-top: 0;
}
.songs.is-table li {
 padding: .6rem .5rem;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: transparent;
}
.songs.is-table li:hover {
	background: var(--pale);
}
.songs.is-table .s-ye {
	font-size: 1rem;
}
.songs.is-table .s-ti {
	margin: 0;
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.6;
}
.songs.is-table .s-si {
	line-height: 1.6;
}
.songs.is-table .s-label, .songs.is-table .s-de {
	display: none;
}
/* ===== contact ===== */

.tel-box {
	border: 2px solid var(--main);
	padding: 20px 22px;
	margin-top: 22px;
}
.tel-title {
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 700;
}
.tel-number {
	font-size: 1.5rem;
	font-weight: 500;
 margin: .5rem 0;
	line-height: 1.5;
}
.tel-box p + p {
	font-size: 1rem;
}
.notes {
	margin-top: 20px;
}
.notes li {
	padding-left: 1em;
	text-indent: -1em;
}
.form-panel {
	margin: 20px auto;
	border: 1px solid var(--line);
}
.req {
	display: inline-block;
	background: var(--req);
	color: #fff;
 font-size: .72rem;
	font-weight: 700;
	line-height: 1.7;
	padding: .05em .6em;
	margin-left: .5em;
	vertical-align: .1em;
}
.form-note {
	line-height: 1.6;
}
.form-note .req {
	margin: 0 .4em 0 0;
}
.f-field {
	margin-top: 26px;
	border: 0;
	padding: 0;
	min-width: 0;
}
.f-label {
	display: block;
	font-weight: 700;
 margin-bottom: .5rem;
	padding: 0;
}
.f-field input[type="text"], .f-field input[type="email"], .f-field input[type="tel"], .f-field textarea {
	display: block;
	width: 100%;
	font: inherit;
	color: var(--ink);
	background: var(--white);
	border: 2px solid var(--line);
	border-radius: 5px;
	padding: .8em 1em;
	line-height: 1.6;
}
.f-field textarea {
	min-height: 14rem;
	resize: vertical;
}
 .f-field ::placeholder {
 color: var(--placeholder);
 opacity: 1;
}
 .f-field input:focus-visible, .f-field textarea:focus-visible {
 outline: 3px solid #e9a93b;
 outline-offset: 2px;
}
.choices {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
.choice {
	position: relative;
	display: block;
	cursor: pointer;
}
.choice input {
	position: absolute;
	opacity: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}
.choice span {
	display: block;
	padding: .8em 1em;
	border: 2px solid var(--line);
	background: var(--white);
	line-height: 1.6;
	border-radius: 5px;
}
 .choice span::before {
 content: "\25CB ";
}
.choice input:checked + span {
	background: var(--main);
	border-color: var(--main);
	color: var(--white);
	font-weight: 700;
}
 .choice input:checked + span::before {
 content: "\25CF ";
}
 .choice input:focus-visible + span {
 outline: 3px solid #e9a93b;
 outline-offset: 2px;
}
.agree {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-top: 30px;
}
.agree input {
	width: 1.6rem;
	height: 1.6rem;
	margin: 0;
	accent-color: var(--main);
}
.agree .req {
	margin-left: 0;
}
.submit {
	display: block;
	position: relative;
	width: 100%;
	margin-top: 30px;
	font: inherit;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--white);
	background: var(--main);
	border: 0;
	border-radius: 40px;
	padding: 1em 2em;
	cursor: pointer;
}
 .submit::after {
 content: "";
 position: absolute;
 right: 24px;
 top: 50%;
 transform: translateY(-50%);
 width: 16px;
 height: 16px;
 background: url("../img/arrow.svg") center / contain no-repeat;
 filter: invert(1);
}
.submit:hover {
	background: #174a6e;
}
.form-status {
	margin-top: 16px;
	min-height: 1.8em;
	font-size: 1rem;
}
/* =====  discography ===== */

.disc-jk {
	margin: 0;
}
.disc-jk img {
	display: block;
	width: 100%;
	height: auto;
}
.spec {
	margin: 1.4rem 0;
	border-top: 1px solid var(--line);
}
.spec div {
	display: grid;
	grid-template-columns: 4.5em 1fr;
	gap: 0 1em;
 padding: .6rem 0;
	border-bottom: 1px solid var(--line);
}
.spec dt {
	font-weight: 700;
}
.spec dd {
	margin: 0;
}
.btn-blue {
	display: inline-block;
	padding: .8em 2em;
	background: var(--main);
	color: var(--white);
	font-weight: 700;
	letter-spacing: .06em;
	text-decoration: none;
}
.btn-blue:hover {
	filter: brightness(.88);
}
.cd-note {
	color: var(--ink-sub);
}
.disc {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 48px;
	padding-top: 36px;
	border-top: 1px solid var(--ink);
}
.disc-title {
	font-size: 1.5rem;
	letter-spacing: .06em;
}
.disc-sets {
	margin-top: 1rem;
}
.disc-set1set {
	margin-top: 1rem;
}
.disc-set + .disc-set {
	margin-top: 1.6rem;
}
.disc-side {
 margin: 0 0 .6rem;
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 700;
	color: var(--link);
}
.disc ol {
	margin: 0;
	padding-left: 2.4em;
}
.disc li {
 padding: .15rem 0;
	line-height: 1.7;
}
.subcontents li {
	background: var(--bg);
	border: 2px solid var(--line);
	padding: 22px 22px 20px;
	margin-bottom: 20px;
	max-width: 600px;
	margin: 0 auto 20px;
	border-radius: var(--btn_rd);
	transition: background-color 0.2s;
}
.subcontents li a {
	color: var(--main);
	font-family: var(--sans);
	font-size: 1.25rem;
	font-weight: 700;
	text-decoration: none;
	position: relative;
	padding-right: 30px;
	display: block;
}
 .subcontents li a::after {
 content: "";
 position: absolute;
 right: 4px;
 top: 50%;
 width: 10px;
 height: 10px;
 border-top: 2px solid var(--main);
 border-right: 2px solid var(--main);
 transform: translateY(-50%) rotate(45deg);
}
.subcontents li:hover {
	background: var(--white);
	border: 2px solid var(--main-soft);
}
.subcontents li:hover a::after {
 border-top: 2px solid var(--main-soft);
 border-right: 2px solid var(--main-soft);
}
.subcontents li.cs {
	pointer-events: none;
	background: var(--pale);
}
/*-- NEWS */
.singlepage {
	color: var(--ink);
	font-family:var(--serif);
	padding: 20px 16px 80px;
}
.singlepage__inner {
	max-width: 811px;
	margin: 0 auto;
}
.singlepage__thumb img {
	display: block;
	width: 100%;
	height: auto;
}
.singlepage__meta {
	display: flex;
	align-items: baseline;
	gap: 1.2em;
	margin-top: 28px;
	letter-spacing: 0.15em;
}
.singlepage__date {
	font-size: 15px;
}
.singlepage__cat {
	font-size: 12px;
	letter-spacing: 0.1em;
}
.singlepage__title {
	margin: 14px 0 0;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.02em;
}
.singlepage__body {
	margin-top: 28px;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.1em;
}
.singlepage__body p {
	margin: 0 0 1.5em;
	font-size: 1rem;
}
.singlepage__body a {
	color: var(--main);
	text-decoration: underline;
}
.singlepage__body a.is-external::after {
 content: "";
 display: inline-block;
 width: 0.9em;
 height: 0.9em;
 margin-left: 0.6em;
 vertical-align: -0.1em;
 background: currentColor;
 -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M12 9v5H2V4h5M10 2h4v4M14 2L7 9'/%3E%3C/svg%3E") center / contain no-repeat;
 mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M12 9v5H2V4h5M10 2h4v4M14 2L7 9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.singlepage__next {
	margin: 48px 0 0;
	font-size: 14px;
	letter-spacing: 0.15em;
}
.singlepage__next a {
	display: inline-flex;
	align-items: center;
	gap: 1.2em;
	color: var(--main);
	text-decoration: none;
}
.singlepage__back {
	margin: 48px 0 0;
	font-size: 14px;
	letter-spacing: 0.15em;
	text-align: left;
}
.singlepage__back a {
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 1.2em;
	color: var(--main);
	text-decoration: none;
}
.singlepage__back svg {
	transform: scaleX(1);
}
.singlepage__next {
	grid-column: 2;
	justify-self: end;
	margin: 40px 0 0;
	font-size: 14px;
	letter-spacing: 0.15em;
}
.singlepage__next a {
	display: inline-flex;
	align-items: center;
	gap: 1.2em;
	color: var(--main);
	text-decoration: none;
}
.singlepage__back {
	margin: 48px 0 0;
	font-size: 14px;
	letter-spacing: 0.15em;
}
.singlepage__back a {
	display: inline-flex;
	align-items: center;
	gap: 1.2em;
	color: var(--main);
	text-decoration: none;
}
 @media (min-width: 768px) {
 .singlepage__next svg {
 transition: transform 0.3s;
}
 .singlepage__next a:hover svg {
 transform: translateX(4px);
}
 .singlepage__back svg {
 transition: transform 0.3s;
}
 .singlepage__back a:hover svg {
 transform: translateX(-4px);
}
}
/* =====================================================
   responsive
   ===================================================== */

@media (min-width: 481px) {
 .profile-photo {
 max-width: 400px;
}
 .history {
 grid-template-columns: 8.8em 1fr;
}
 .history dt {
 border-bottom: 1px solid var(--line);
 padding-bottom: .85rem;
}
 .form-panel {
 padding: 36px 36px 42px;
 max-width: 800px;
 margin: 20px auto;
}
 .chip {
 flex: 1 1 calc(25% - 7.5px);
}
 .zukan-product {
 grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
 gap: 20px 40px;
}
 .zukan-product-head {
 grid-column: 1 / -1;
}
 .disc {
 grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
 gap: 40px;
 align-items: start;
}
}
 @media (min-width: 761px) {
 .profile {
 grid-template-columns: 3.5fr 6.5fr;
 gap: 34px;
}
 .choices {
 grid-template-columns: 1fr 1fr;
}
 .submit {
 width: 60%;
 margin: 40px auto 0;
}
 .songs {
 grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (min-width: 1025px) {
 .tools {
 border-radius: 0 0 0 14px;
}
 .disc {
 display: flex;
}
 .disc-jk {
 flex: 1;
 min-width: 0;
}
 .disc-body {
 flex: 3;
 min-width: 0;
}
 .disc-sets {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 1.6rem 40px;
 align-items: start;
}
 .disc-set + .disc-set {
 margin-top: 0;
}
}