/* --------------------------------------------------
Contents
-------------------------------------------------- */
body #wrapper #contents:not(:has(.sort)) { padding: 26.67% 0 0; }

body #wrapper .pc-layout-container { display: none; }
body #wrapper #contents .sort { position: sticky; left: 0; top: 0; padding: 22.93% 5.33% 16%; font-weight: 500; z-index: 2; }
body #wrapper #contents .sort .sort-toggle { width: 2.2rem; aspect-ratio: 1; position: absolute; right: calc(9.33% - 0.5rem); top: calc(22.93vw - 0.7rem); z-index: 2; }
body #wrapper #contents .sort .sort-toggle a { display: flex; justify-content: center; align-items: center; height: 100%; }
body #wrapper #contents .sort .sort-toggle a i { width: 1.2rem; position: relative; }
body #wrapper #contents .sort .sort-toggle a i::before, body #wrapper #contents .sort .sort-toggle a i::after { display: block; content: ""; height: 0.2rem; position: absolute; left: 0; right: 0; top: calc((100% - 0.2rem) / 2); background: currentColor; }
body #wrapper #contents .sort .sort-toggle a i::before { opacity: 0; transition: opacity 0.2s ease-out 0s, transform 0.2s ease-out 0s; }
body #wrapper #contents .sort .sort-toggle.is-close a i::before { opacity: 1; transform: rotate(-90deg); }
body #wrapper #contents .sort .sort-contents { position: relative; transition: opacity 0.2s ease 0s; }
body #wrapper #contents .sort .sort-contents ul { display: flex; column-gap: 1em; flex-wrap: wrap; }
body #wrapper #contents .sort .sort-contents ul li.is-current { font-weight: 700; }
body #wrapper #contents .sort .sort-contents ul.level-1 { font-size: 1rem; letter-spacing: 0.02em; margin: 0 0 1rem; }
body #wrapper #contents .sort .sort-contents ul.level-2 { font-size: 0.9rem; letter-spacing: 0.02em; line-height: 1.78; }
body #wrapper #contents .sort:has(.sort-toggle.is-close) .sort-contents { opacity: 0; pointer-events: none; }
body #wrapper #contents .news-list { width: 81.33%; margin: 0 auto; display: flex; flex-direction: column; row-gap: calc(var(--vw) * (0.227 * 100)); }
body #wrapper #contents .news-list .news-single { font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: .9rem; line-height: 1.5; position: relative; }
body #wrapper #contents .news-list .news-single .news-date { position: absolute; right: 0; top: 0; }
body #wrapper #contents .news-list .news-single .news-date time { display: block; font-size: 0.65rem; letter-spacing: 0.02em; }
body #wrapper #contents .news-list .news-single .news-single-content .news-head .title { font-size: 1.1rem; margin: 0 0 0.5rem; padding: 0 4rem 0 0; }
body #wrapper #contents .news-list .news-single .news-single-content .news-head .category { display: flex; font-size: 0.95rem; letter-spacing: 0.02em; }
body #wrapper #contents .news-list .news-single .news-single-content .news-head .category li::after { display: inline; content: "/"; margin: 0 .25em; }
body #wrapper #contents .news-list .news-single .news-single-content .news-head .category li:last-child::after { display: none; }
body #wrapper #contents .news-list .news-single .news-single-content .image-container { margin: .8rem 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; row-gap: calc(var(--vw) * (0.013 * 100)); }
body #wrapper #contents .news-list .news-single .news-single-content .image-container .imagearea { position: relative; width: 49.18%; }
body #wrapper #contents .news-list .news-single .news-single-content .image-container .imagearea:first-child { width: 100%; }
body #wrapper #contents .news-list .news-single .news-single-content .textarea { padding: 4rem 0 0; }
body #wrapper #contents .news-list .news-single .news-single-content .textarea p + p { margin: 1.5em 0 0; }
body #wrapper #contents .news-list .news-single .news-single-content .mark { width: 1.4rem; margin: 0 0 0 auto; }

@media screen and (orientation: landscape) { body #wrapper #contents:not(:has(.sort)) { padding: 0; }
  body #wrapper { padding: 11.6% 0 0; }
  body #wrapper header { display: none; }
  body #wrapper .pc-layout-container { display: block; }
  body #wrapper .pc-layout-container .logo { position: fixed; width: 13.06%; left: 4.17%; top: calc(var(--vw) * (0.036 * 100)); z-index: 9; }
  body #wrapper .pc-layout-container .navarea { padding: 4.86% 4.17% 0; position: fixed; right: 0; top: 0; z-index: 9; }
  body #wrapper .pc-layout-container .navarea .nav .artist-nav ul li.menu-production, body #wrapper .pc-layout-container .navarea .nav .artist-nav ul li.menu-news { display: none; }
  body #wrapper #contents .sort { position: fixed; top: auto; bottom: 0; padding: 1.39% calc(var(--vw) * (0.042 * 100)); }
  body #wrapper #contents .sort a:hover { font-style: italic; }
  body #wrapper #contents .sort .sort-toggle { display: none; }
  body #wrapper #contents .sort .sort-contents ul { display: block; }
  body #wrapper #contents .sort .sort-contents ul.level-1, body #wrapper #contents .sort .sort-contents ul.level-2 { font-size: 1.2rem; line-height: 1.67; }
  body #wrapper #contents .sort .sort-contents ul.level-1 { margin: 0 0 1.4rem; }
  body #wrapper #contents .news-list { width: 62.5%; min-width: 800px; max-width: 90%; margin: 0 auto 0 4.17%; row-gap: calc(var(--vw) * (0.083 * 100)); }
  body #wrapper #contents .news-list .news-single { font-weight: 400; font-size: 1.2rem; line-height: 1.67; display: flex; }
  body #wrapper #contents .news-list .news-single .news-date { position: static; width: 23.33%; }
  body #wrapper #contents .news-list .news-single .news-date time { font-size: 1.2rem; }
  body #wrapper #contents .news-list .news-single .news-single-content { flex: 1; }
  body #wrapper #contents .news-list .news-single .news-single-content .news-head .title { font-size: 1.6rem; line-height: 1.25; padding: 0; }
  body #wrapper #contents .news-list .news-single .news-single-content .news-head .category { font-size: 1.4rem; }
  body #wrapper #contents .news-list .news-single .news-single-content .image-container { margin: 2rem 0 0; row-gap: calc(var(--vw) * (0.007 * 100)); }
  body #wrapper #contents .news-list .news-single .news-single-content .image-container .imagearea.portrait { width: 49.28%; }
  body #wrapper #contents .news-list .news-single .news-single-content .textarea p + p { margin: 1.67em 0 0; }
  body #wrapper #contents .news-list .news-single .news-single-content .mark { width: 2.8rem; } }