/* 旧デザイン (style.css) を活かしたまま、jQuery なしで動かすための追加スタイル */

html { scroll-behavior: smooth; }

#menuButton {
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
}
#menu { display: block; visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s; }
#menu.open { visibility: visible; opacity: 1; }
#menu ul { top: 50%; transform: translateY(-50%); }

/* 高さ揃え（旧 jquery.tile の代わり） */
.worksList { display: flex; flex-wrap: wrap; }
.worksList li { float: none; }

/* トップのオープニング */
#op { transition: opacity 1s; }
#op p { transform: translateY(-10px); transition: transform .5s, opacity .5s; }
#op div { transform: scale(1.1); transition: transform 1s, opacity 1s; }
#op.show div { transform: scale(1); opacity: 1; }
#op.show p { transform: translateY(0); opacity: 1; }
#op.hide { opacity: 0; pointer-events: none; }
#op.skip { display: none; }

/* 本文 */
.detailTxt a, .liveInfo a { color: #222; word-break: break-all; }
.detailTxt img, .liveInfo img { max-width: 100%; height: auto; }
.detailTxt p + p, .liveInfo p + p { margin-top: 1em; }
.liveInfo p { margin-bottom: 1em; }
.embed { margin: 1.5em 0; line-height: 0; }
.embed iframe { max-width: 100%; border: 0; }
.embed-video { position: relative; aspect-ratio: 16 / 9; }
.embed-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
#liveDetail .detailImg { margin-bottom: 30px; }
#liveDetail .pageNation { clear: both; }

/* トップの TOPICS（旧サイトでは別CSSが当たっていなかったため最低限を補う） */
#topTopics { position: relative; padding: 0 50px; margin: 0 0 120px; z-index: 10; }
#topTopics h3 { font-size: 36px; font-family: 'Lato', sans-serif; font-weight: 700; width: 36px; position: absolute; top: -130px; left: 5%; text-align: center; line-height: 60px; }
#topTopics .topicsList { max-width: 480px; margin: 0 auto; }
#topTopics .topicsList li { padding-bottom: 16px; margin-bottom: 16px; border-bottom: #000 solid 1px; font-family: 'Lato', sans-serif; font-size: 12px; letter-spacing: 1px; }
#topTopics .topicsList a { color: #222; text-decoration: none; }
#topTopics .topicsList a:hover { color: #999; }
#topTopics .topicsList .date { color: #999; margin-top: 4px; }
#topTopics .btnMore, .worksMore { text-align: center; }
#topTopics .btnMore a, .worksMore a { color: #222; text-decoration: none; font-size: 14px; font-weight: bold; }
#topTopics .btnMore a:hover, .worksMore a:hover { color: #999; }

/* お問い合わせ */
.contactForm { max-width: 600px; }
.contactForm label { display: block; font-size: 14px; margin-bottom: 20px; }
.contactForm input, .contactForm textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px; border: #efe7dc solid 1px; font: inherit; }
.contactForm button { padding: 10px 40px; border: #222 solid 1px; background: #fff; font: inherit; cursor: pointer; }
.contactNote { text-align: center; margin-bottom: 80px; }
.contactLink { text-align: center; font-size: 14px; line-height: 2; margin-bottom: 100px; }
.contactButton { margin: 40px 0 20px; }
.contactButton a { display: inline-block; padding: 14px 48px; border: #222 solid 1px; color: #222; text-decoration: none; font-family: 'Lato', sans-serif; letter-spacing: 2px; }
.contactButton a:hover { background: #faf6f0; }
.contactSmall { font-size: 11px; color: #999; }
.contactSmall a { color: #666; }
.formrunWrap { max-width: 640px; margin: 30px auto 20px; text-align: left; min-height: 200px; }
.formrunWrap iframe { width: 100%; border: 0; }
.contactForm .hp { position: absolute; left: -9999px; }
.contactForm .formStatus { text-align: center; font-size: 14px; min-height: 1.5em; }
.contactForm button:disabled { opacity: .5; cursor: default; }

@media screen and (max-width: 736px) {
	#topTopics { padding: 0 20px; margin-bottom: 60px; }
	#topTopics h3 { position: static; width: auto; font-size: 20px; line-height: 30px; letter-spacing: 10px; text-align: left; margin-bottom: 20px; }
	#topTopics h3 br { display: none; }
	.liveInfo, .detailImg, .trackList { float: none; width: 100%; padding-right: 0; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.disc01, .disc02 { animation: none; }
	#op { display: none; }
}