@charset "utf-8";


@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/YakuHanJP/YakuHanJP-Thin.woff2") format("woff2"),
    url("../fonts/YakuHanJP/YakuHanJP-Thin.woff") format("woff");
}

@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/YakuHanJP/YakuHanJP-Light.woff2") format("woff2"),
    url("../fonts/YakuHanJP/YakuHanJP-Light.woff") format("woff");
}


* {
	margin: 0;
	padding: 0;
	/*-webkit-backface-visibility: hidden;*/
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: none;
	background: #f7f7f7;
}

body {
	margin: 0;
	padding: 0;
	width: 100%;
	font-weight: 400;
	font-size: 16px;
	font-family: YakuHanJP, "Zen Kaku Gothic New", "Hiragino Sans", "ヒラギノ角ゴ Pro W3", 'Hiragino Kaku Gothic Pro', 'Noto Sans JP', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Osaka", verdana, sans-serif;
	font-feature-settings: 'palt' 1;
	text-align: center;
	line-height: 2;
	-webkit-font-smoothing: antialiased;
	letter-spacing: 0.08em;
	color: #454545;
	background: #f7f6f6;
}





h1,
h2,
h3,
h4,
h5,
h6 {
	padding: 0;
	margin: 0;
	font-weight: 400;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

p {
	padding: 0;
	margin: 0;
}

img {
	width: 100%;
	-webkit-touch-callout: none;
	-ms-interpolation-mode: bicubic;
	vertical-align: bottom;
}

a {
	word-break: break-all;
	text-decoration: underline;
	color: #454545;
	text-decoration-thickness: 1px;
	outline: none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-transition: 0.4s cubic-bezier(.57,0,.26,1);
	transition: 0.4s cubic-bezier(.57,0,.26,1);
}

button {
	outline: none;
	border: none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

a:active,
a:hover,
a:focus {
	outline: none;
}

@media (any-hover: hover) {
	a:hover {
		opacity: .4;
	}
}

table {
	border-collapse: collapse;
}

.wrapper ::before,
.wrapper ::after {
	font-family: "Zen Kaku Gothic New", "Hiragino Sans", "ヒラギノ角ゴ Pro W3", 'Hiragino Kaku Gothic Pro', 'Noto Sans JP', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Osaka", verdana, sans-serif;
	font-feature-settings: normal;
}


@-webkit-keyframes fadeIn {
	0% { opacity: 0;}
	100% { opacity: 1;}
}

@keyframes fadeIn {
	0% { opacity: 0;}
	100% { opacity: 1;}
}

/*--------------------------------------
loading
--------------------------------------*/


.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: #b0c0c5;
	animation: hueShift 20s linear infinite;
	z-index: 5000;
}

.loading p {
	margin: -20px 0 0 -20px;
	padding-top: 40px;
	overflow: hidden;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 42px;
	height: 0;
	border: 1px solid #fff;
	border-radius: 50%;
	border-top-color: transparent;
	animation: spin 0.75s infinite linear;
	z-index: 5002;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}


.loading::before {
	content: "";
	margin: -20px 0 0 -20px;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(199, 199, 204, .2);
	border-radius: 50%;
	z-index: 5001;
}

/*--------------------------------------
コンテンツ
--------------------------------------*/
.wrapper {
	position: relative;
	width: 100%;
}


.container {
	position: relative; /*toTop用*/
	text-align: left;
	width: 100%;
}

/*--------------------------------------
header
--------------------------------------*/
#top {
	padding: 24px;
	display: flex;
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100vh;
	background: #f7f6f6;
	z-index: 1000;
}

#top .visual {
	padding-top: calc(100vh - 24px * 2);
	position: relative;
	display: block;
	overflow: hidden;
	width: 50%;
	height: 0;
	background: url(../images/common/header/visual.webp) no-repeat center bottom;
	background-size: 100% auto;
	transition: opacity 1s cubic-bezier(.57,0,.26,1) 0s, transform 2s cubic-bezier(.57,0,.26,1) 0s;
}

body.active #top .visual {
}

body.w #top .visual {
	background-position: center center;
	background-size: cover;
}

body.w2 #top .visual {
}

body.h #top .visual,
body.h2 #top .visual,
body.h3 #top .visual {
	position: absolute;
	top: 24px;
	left: 24px;
	width: calc(100% - 24px * 2);
	background-position: center center;
	background-size: cover;
}

#top .visual figcaption {
	position: absolute;
	bottom: 1em;
	right: 1em;
	display: block;
	line-height: 1.2;
	color: #f7f6f6;
	font-size: 13px;
	font-weight: 500;
	-webkit-user-select: none;
	user-select: none;
}

.siteTitle {
	padding-top: calc(100vh - 24px * 2);
	display: block;
	overflow: hidden;
	width: 50%;
	height: 0;
	z-index: 6;
}

@media only screen and (max-width: 1080px) {
}

#top.active .siteTitle {
}

body.w .siteTitle {
	background: url(../images/common/header/title_w.svg) no-repeat center center #b0c0c5;
	background-size: 90% auto;
}

body.w2 .siteTitle {
	background: url(../images/common/header/title_w.svg) no-repeat center center #b0c0c5;
	background-size: 90% auto;
}

body.w3 .siteTitle {
	background: url(../images/common/header/title_w.svg) no-repeat center center #b0c0c5;
	background-size: 90% auto;
}

body.h .siteTitle,
body.h2 .siteTitle,
body.h3 .siteTitle {
	padding-top: 20%;
	position: absolute;
	top: 50%;
	left: 24px;
	width: calc(100% - 24px * 2);
	background: url(../images/common/header/title.svg) no-repeat center center #b0c0c5;
	background-size: 90% auto;
	transform: translateY(-160%);
}

nav {
	position: absolute;
	top: 40px;
	left: 40px;
	transition: opacity 1s cubic-bezier(.57,0,.26,1) 2s;
	z-index: 100;
}

#top.active nav {
}

.sns-link {
	position: absolute;
	top: 0;
	left: 0;
	display:flex;
	gap: 6px;
	width: 134px;
	z-index: 18;
}

@media only screen and (max-width: 1080px) {
	.sns-link {
	}
}

.sns-link li {
	width: calc((100% - 6px * 2) / 3);
}

.sns-link .facebook a,
.sns-link .x a,
.sns-link .line a {
	padding: 100% 0 0;
	position: relative;
	overflow: hidden;
	display: block;
	width: 100%;
	height: 0;
}

.sns-link .facebook a {
	background: url(../images/common/nav/sns/facebook.svg) no-repeat center center;
	background-size: 100% auto;
}

.sns-link .x a {
	background: url(../images/common/nav/sns/x.svg) no-repeat center center;
	background-size: 100% auto;
}

.sns-link .line a {
	background: url(../images/common/nav/sns/line.svg) no-repeat center center;
	background-size: 100% auto;
}

body.h3 .sns-link .facebook a,
body.h2 .sns-link .facebook a,
body.h .sns-link .facebook a {
	background: url(../images/common/nav/sns/facebook_h.svg) no-repeat center center;
	background-size: 100% auto;
}

body.h3 .sns-link .x a,
body.h2 .sns-link .x a,
body.h .sns-link .x a {
	background: url(../images/common/nav/sns/x_h.svg) no-repeat center center;
	background-size: 100% auto;
}

body.h3 .sns-link .line a,
body.h2 .sns-link .line a,
body.h .sns-link .line a {
	background: url(../images/common/nav/sns/line_h.svg) no-repeat center center;
	background-size: 100% auto;
}


#top .scroll {
	padding: 0 0 0;
	overflow: hidden;
	position: absolute;
	bottom: 9.5em;
	right: 21px;
	width: 51px;
	height: 14vh;
	font-size: 16px;
	font-family: "Work Sans", 'Zen Kaku Gothic New', "Hiragino Sans", "ヒラギノ角ゴ Pro W3", 'Hiragino Kaku Gothic Pro', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Osaka", verdana, sans-serif;
	font-weight: 400;
	z-index: 122;
}

body.w3 #top .scroll,
body.w2 #top .scroll,
body.w #top .scroll {
	right: auto;
	left: 18px;
	bottom: 7.5em;
}

#top.active .scroll {
}

body.scroll #top.active .scroll {
}

#top .scroll::before,
#top .scroll::after {
	content: "";
	margin: 0 auto;
	display: block;
	width: 1px;
	height: 100%;
	background: rgba(255, 255, 255, .3);
}

#top .scroll::after {
	background: #f7f6f6;
	-webkit-animation: scrollDown 3s cubic-bezier(.17,.67,.07,.99) 0s infinite forwards;
	animation: scrollDown 3s cubic-bezier(.17,.67,.07,.99) 0s infinite forwards;
}

/* scrollDown */
@-webkit-keyframes scrollDown {
	0% { transform: translate3d(0, -28vh, 0);}
	100% { transform: translate3d(0, 0px, 0);}
}

@keyframes scrollDown {
	0% { transform: translate3d(0, -28vh, 0);}
	100% { transform: translate3d(0, 0px, 0);}
}

#top .scroll p {
	display: none;
}

#top::before {
	content: "SCROLL";
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 0;
	right: 18px;
	width: 54px;
	height: 9em;
	overflow: hidden;
	writing-mode: vertical-rl;
	font-size: 16px;
	font-family: "Work Sans", 'Zen Kaku Gothic New', "Hiragino Sans", "ヒラギノ角ゴ Pro W3", 'Hiragino Kaku Gothic Pro', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Osaka", verdana, sans-serif;
	font-weight: 400;
	line-height: 1;
	color: #f7f6f6;
	z-index: 15;
}

body.w3 #top::before,
body.w2 #top::before,
body.w #top::before {
	right: auto;
	left: 18px;
	height: 7em;
}

#top.active::before {
}

body.scroll #top.active::before {
}

/*--------------------------------------
 * コンテンツ
 * ---------------------------------------*/

.primary {
	padding: 60px 0 0;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	z-index: 100;
}

.notice li:not(:last-child) {
	padding-bottom: 4px;
	padding: 0;
}

.notice p {
	display: flex;
	font-size: 14px;
	line-height: 1.6;
}

.notice p::before {
	content: "※";
}

section {
	position: relative;
	width: 100%;
	z-index: 10;
}

.primary section h2 {
	padding-bottom: 40px;
	font-family: "Work Sans", sans-serif;
	font-weight: 500;
	font-size: 60px;
	color: #d0d6ea;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	-webkit-user-select: none;
	user-select: none;
	padding: 0;
	overflow: hidden;
	height: 0;
}

@media only screen and (max-width: 1240px) {
	.primary section h2 {
	}
}

.primary section .contents {
	margin: 0 auto;
	padding: 0 64px 0;
	position: relative;
	width: 100%;
	max-width: 1240px;
}

@media only screen and (max-width: 1140px) {
	.primary section h2 {
	}
}

.item {
	opacity: 0;
	transform: translateY(3vh);
	transition: opacity 1.5s cubic-bezier(.57,0,.26,1) 0s, transform 1s cubic-bezier(.57,0,.26,1) 0s;
}

.item.active {
	opacity: 1;
	transform: translateY(0);
}

.link > li {
	display: inline-block;
}

.link a {
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.link a::before {
	content: "";
	display: block;
	width: 0.7em;
	height: 0.7em;
	background: url(../images/common/nav/link.svg) no-repeat;
	background-size: 100% auto;
}


/*--------------------------------------
dialogue
---------------------------------------*/
#dialogue {
	overflow: hidden;
}

#dialogue .contents {
	position: static;
}

#dialogue .contents > div:not(.profile) {
	padding: 64px 120px 0;
	background: #fff;
}

@media only screen and (max-width: 1080px) {
	#dialogue .contents > div:not(.profile) {
		padding: 56px 48px 0;
	}
}

#dialogue .lead {
	padding-bottom: 48px;
	font-size: 20px;
}

#dialogue .contents > div > p {
	padding-bottom: 1em;
	line-height: 2.3;
}

#dialogue .interviewer {
	display: flex;
	gap: 0.7em;
}

#dialogue .interviewer::before {
	content: "";
	margin-top: 1.1em;
	flex-shrink: 0;
	display: block;
	width: 2.4em;
	height: 1px;
	background: #454545;
}

#dialogue .interviewer:nth-of-type(1)::before {
	width: 4.4em;
}

#dialogue p.konno,
#dialogue p.ozaki {
	margin-left: 3em;
	text-indent: -3em;
}

#dialogue .contents > div > p:not(.interviewer):nth-child(-n+3) {
	margin-left: 5em;
	text-indent: -5em;
}

#dialogue .contents > div:not(.profile) > dl {
	padding: 32px 80px 64px;
	background: #fff;
	text-align: center;
}

#dialogue .contents > div:not(.profile) > dl::before {
	content: "";
	margin: 0 auto 56px;
	display: block;
	width: 240px;
	height: 1px;
	background: #454545;
}

#dialogue .contents > div:not(.profile) > dl .link a {
	justify-content: center;
}


#dialogue .profile {
	padding: 56px 0 88px;
}

#dialogue .profile dl {
	padding: 40px 0 0;
	overflow: hidden;
	position: relative;
}

#dialogue .profile dl::before {
	content: "";
	padding-top: 20%;
	float: left;
	display: block;
	width: 20%;
	height: 0;
}

#dialogue .profile dl.konno::before {
	background: url(../images/contents/profile/konno.webp) no-repeat;
	background-size: 100% auto;
}

#dialogue .profile dl.gg::before {
	background: url(../images/contents/profile/ozaki.webp) no-repeat;
	background-size: 100% auto;
}

#dialogue .profile dt {
	margin-left:  calc(20% + 24px);
	padding-bottom: 16px;
	font-size: 20px;
	line-height: 1.2;
}

#dialogue .profile dd {
	margin-left:  calc(20% + 24px);
}

#dialogue .profile dd p,
#dialogue .profile .link a {
	font-size: 14px;
}

#dialogue .profile .link {
	padding-top: 16px;
}

.panel {
	padding: 0 16px 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	background: #fff;
}

.panel li {
	width: calc((100% - 16px * 2) / 3);
}

.panel::after {
	content: "©紺野アキラ／小学館";
	display: block;
	width: 100%;
	text-align: right;
	font-size: 14px;
	line-height: 1.2;
}

.panel .p1 img {
	background: url(../images/contents/p1.webp) no-repeat;
	background-size: cover;
}

.panel .p2 img {
	background: url(../images/contents/p2.webp) no-repeat;
	background-size: cover;
}

.panel .p3 img {
	background: url(../images/contents/p3.webp) no-repeat;
	background-size: cover;
}

#dialogue .release {
	margin-top: 32px;
	padding: 32px;
	position: relative;
	overflow: hidden;
	border: solid 1px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
}

#dialogue .release::before {
	content: "";
	padding-top: 20%;
	display: block;
	float: left;
	width: 20%;
	height: 0;
}

#dialogue .release h3,
#dialogue .release > ul {
	margin-left: calc(20% + 16px);
}

#dialogue .release h3 {
	padding-bottom: 8px;
	font-size: 20px;
	line-height: 1.2;
}

#dialogue .release h3 span {
	padding-bottom: 8px;
	display: block;
	font-size: 15px;
	font-weight: 500;
}

#dialogue .release > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

#dialogue .release .track {
	width: 100%;
}

#dialogue .release .date {
	width: 100%;
}

#dialogue .release .date p {
	font-size: 18px;
	line-height: 1.2;
}

#dialogue .release .jacket {
	position: absolute;
	top: 32px;
	left: 32px;
	width: calc((100% - 32px * 2) * 0.2);
}

#dialogue .release .jacket figure {
	background: url(../images/contents/release/VTCL-35394.webp) no-repeat;
	background-size: 100% auto;
}

#dialogue .release .ec a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4em;
	color: #f7f6f6;
	font-family: "Work Sans", 'Zen Kaku Gothic New', "Hiragino Sans", "ヒラギノ角ゴ Pro W3", 'Hiragino Kaku Gothic Pro', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Osaka", verdana, sans-serif;
	font-size: 14px;
	line-height: 2;
	text-decoration: none;
	background: #454545;
}



/*--------------------------------------
playlist
---------------------------------------*/
#playlist {

}

#playlist::before {
	content: "";
	margin: 0 auto 100px;
	display: block;
	width: 240px;
	height: 1px;
	background: #454545;
}

#playlist .contents > ul {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}

#playlist .contents > ul > li {
	width: calc((100% - 40px) / 2);
}

#playlist .contents > ul > li.youtube {
	width: 100%;
}

#playlist .contents > ul > li iframe {
	width: 100%;
}

#playlist .contents > ul > li.apple iframe {
	border: solid 1px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
}


.youtube {
}

.youtube figure {
	position: relative;
	padding: 30px 0 56.25%;
	height: 100%;
}

.youtube iframe,
.youtube object,
.youtube embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}

.youtube figcaption {
	position: absolute;
	top: -64px;
	display: block;
	width: 100%;
	text-align: center;
	line-height: 64px;
	border-top: solid 1px;
}



/*--------------------------------------
上部へボタン
---------------------------------------*/

ul.toTop {
	overflow: hidden;
	position: fixed;
	bottom: 0;
	right: 0;
	opacity: 0;
	transition: opacity 1s cubic-bezier(.57,0,.26,1) 0s;
	z-index: 1;
}

body.on ul.toTop {
	opacity: 1;
	z-index: 3000;
}

ul.toTop a {
	padding-top: 56px;
	position: relative;
	display: block;
	overflow: hidden;
	width: 56px;
	height: 0;
}

ul.toTop a::before {
	content: "";
	margin: -5px 0 0 -10px;
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 18px;
	height: 18px;
	transform: rotate(45deg);
	border: solid 1px #454545;
	border-right: none;
	border-bottom: none;
	-webkit-transition: 0.4s ease-in-out;
	-moz-transition: 0.4s ease-in-out;
	-ms-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
}

ul.toTop a:hover {
}

ul.toTop a:hover::before {
}

/*--------------------------------------
フッター
---------------------------------------*/

footer {
	padding: 120px 0;
	position: relative;
	overflow: hidden;
	width: 100%;
	text-align: center;
	z-index: 2999;
}

footer .link {
	padding-bottom: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 48px;
}

footer .link a {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-size: 24px;
	font-weight: 500;
	text-decoration: none;
	line-height: 1.2;
	-webkit-user-select: none;
	user-select: none;
}

footer .link a::before {
	content: "";
	display: block;
	width: 0.4em;
	height: 0.4em;
	border-top: solid 1px;
	border-right: solid 1px;
	transform: rotate(45deg);
}

footer .copyright p {
	font-family: "Work Sans", 'Zen Kaku Gothic New', "Hiragino Sans", "ヒラギノ角ゴ Pro W3", 'Hiragino Kaku Gothic Pro', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Osaka", verdana, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
}

footer .copyright br {
	display: none;
}

footer .copyright a {
	text-decoration: underline;
}


/*--------------------------------------------------------------------------------------------------*/

@media only screen and (max-width: 980px) {

	body {
		font-size: 15px;
	}

}

/*--------------------------------------------------------------------------------------------------*/


@media only screen and (max-width: 880px) {
}

/*--------------------------------------------------------------------------------------------------*/

@media only screen and (max-width: 680px) {

	body {
		font-size: 14px;
		line-height: 1.7;
	}

	#top {
		padding: 8px;
	}

body.h #top .visual,
body.h2 #top .visual,
body.h3 #top .visual,
	#top .visual {
	padding-top: calc((100% - 8px * 2) * 1.367);
	top: auto;
	bottom: 8px;
	left: 8px;
	width: calc(100% - 8px * 2);
	height: 0;
	background: url(../images/common/header/visual_sp.webp) no-repeat center bottom;
	background-size: 100% auto;
	transition: opacity 1s cubic-bezier(.57,0,.26,1) 0s, transform 2s cubic-bezier(.57,0,.26,1) 0s;
}

	#top .visual figcaption {
		right: auto;
		left: 8px;
		bottom: 8px;
		font-size: 13px;
	}

	.siteTitle,
	body.h .siteTitle,
	body.h2 .siteTitle,
	body.h3 .siteTitle {
	top: 8px;
	left: 8px;
	width: calc(100% - 8px * 2);
	background: #b0c0c5;
	transform: none;
}

	#top .scroll {
		bottom: 6em;
		right: 2px;
		height: 14vh;
		font-size: 15px;
	}

	#top::before {
		right: 0px;
		width: 54px;
		height: 5.5em;
		font-size: 15px;
	}

	nav {
		padding-top: 41%;
		top: 8px;
		left: 8px;
		width: calc(100% - 8px * 2);
	background: url(../images/common/header/title_w.svg) no-repeat center center;
	background-size: 90% auto;
}

	.sns-link {
		margin: 0 auto;
		width: 94px;
		top: 12px;
		left: auto;
		right: 8px;
		gap: 4px;
	}

@media only screen and (max-width: 375px) {
		.siteTitle,
		body.h .siteTitle,
		body.h2 .siteTitle,
		body.h3 .siteTitle {
		background: url(../images/common/header/title_w.svg) no-repeat center center #b0c0c5;
		background-size: 90% auto;
	}

		nav {
		padding-top: 0 !important;
			top: auto;
		bottom: 0;
		background: none;
	}

		.sns-link {
		margin: 0 auto;
			width: 94px;
			top: auto;
			left: auto;
		bottom: 16px;
			right: 40px;
	}
}

	.sns-link .facebook a,
	body.h3 .sns-link .facebook a,
	body.h2 .sns-link .facebook a,
	body.h .sns-link .facebook a {
		background: url(../images/common/nav/sns/facebook.svg) no-repeat center center;
		background-size: 100% auto;
	}

	.sns-link .x a,
	body.h3 .sns-link .x a,
	body.h2 .sns-link .x a,
	body.h .sns-link .x a {
		background: url(../images/common/nav/sns/x.svg) no-repeat center center;
		background-size: 100% auto;
	}

	.sns-link .line a,
	body.h3 .sns-link .line a,
	body.h2 .sns-link .line a,
	body.h .sns-link .line a {
		background: url(../images/common/nav/sns/line.svg) no-repeat center center;
		background-size: 100% auto;
	}

	.primary {
		padding: 32px 0 0;
	}

	.primary section .contents {
		padding: 0 24px 0;
	}

	#dialogue .lead {
		padding-bottom: 24px;
		font-size: 15px;
	}

	#dialogue .contents > div:not(.profile) {
		padding: 24px 16px 0;
	}

	#dialogue .contents > div > p {
		line-height: 1.8;
	}

	#dialogue .interviewer::before {
		margin-top: 1em;
	}

	#dialogue .contents > div:not(.profile) > dl {
		padding: 32px 0px 48px;
	}

	#dialogue .contents > div:not(.profile) > dl::before {
		margin: 0 auto 48px;
	}

	.panel {
		gap: 8px 4px;
}

	.panel li {
		width: calc((100% - 4px * 2) / 3);
	}

	.panel::after {
		font-size: 12px;
	}

	#dialogue .profile {
		padding: 0 0 56px;
	}

	#dialogue .profile dl::before {
		display: none;
	}

	#dialogue .profile dt {
		margin-left: 0;
		padding-bottom: 12px;
		font-size: 18px;
	}

	#dialogue .profile dt::after {
		content: "";
		margin-top: 12px;
		display: block;
		width: 2.4em;
		height: 1px;
	background: #454545;
	}

	#dialogue .profile dd {
		margin-left: 0;
	}

#dialogue .profile dd::before {
	content: "";
	margin: 0 0 8px 8px;
	padding-top: 38%;
	float: right;
	display: block;
	width: 38%;
	height: 0;
}

#dialogue .profile .konno dd::before {
	background: url(../images/contents/profile/konno.webp) no-repeat;
	background-size: 100% auto;
}

#dialogue .profile .gg dd::before {
	background: url(../images/contents/profile/ozaki.webp) no-repeat;
	background-size: 100% auto;
}

	#dialogue .release {
		margin-top: 32px;
		padding: 16px;
	}

	#dialogue .release::before {
		padding-top: 24%;
		width: 24%;
	}

	#dialogue .release .jacket {
		top: 16px;
		left: 16px;
		width: calc((100% - 16px * 2) * 0.24);
	}

#dialogue .release h3, #dialogue .release > ul {
		margin-left: calc(24% + 8px);
	}

	#playlist::before {
		margin: 0 auto 56px;
	}

	#playlist .contents > ul {
		flex-direction: column;
		gap: 24px;
	}

	#playlist .contents > ul > li {
		width: 100%;
	}

	ul.toTop a {
		padding-top: 35px;
		width: 35px;
	}

	footer {
		padding: 48px 0 56px;
	}

	footer .link {
		padding-bottom: 24px;
		flex-direction: column;
		gap: 16px;
	}

	footer .link a {
		font-size: 18px;
	}

	footer .copyright::before {
		margin: 0 auto 24px;
		padding-top: calc(42% * 0.4);
		width: calc(100% * 0.4);
	}

	footer .copyright p {
		font-size: 12px;
		line-height: 1.5;
		}

	footer .copyright br {
		display: block;
	}
}

@media only screen and (max-width: 375px) {
}

@media screen and (orientation: landscape) {



}