@charset "UTF-8";

/* --------------------------------------------------------------------------------------------------
Adobe Fonts
-------------------------------------------------------------------------------------------------- */

html {
visibility: hidden;
animation: loading 1s;
}

html.wf-active, html.loading-delay {
visibility: visible;
}

@keyframes loading {

0% { opacity: 0; }
100% { opacity: 1; }

}


/* --------------------------------------------------------------------------------------------------
Reset
-------------------------------------------------------------------------------------------------- */

html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, code, del, dfn, em, img, ins,
small, strong, sub, sup, b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
margin: 0;
padding: 0;
}
html {
overflow-x: hidden;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote::before, blockquote::after,
q::before, q::after {
content: '';
content: none;
}
table, table th, table td {
border-collapse: collapse;
border-spacing: 0;
border: none;
}
a {
text-decoration: none;
outline: none;
}
img {
vertical-align: bottom;
}
hr {
display: none;
}
address {
font-style: normal;
}
figure {
margin: 0;
}


/* --------------------------------------------------------------------------------------------------
Default
-------------------------------------------------------------------------------------------------- */

:root {
--color_white: #fff;
--color_black: #000;
--color_orange: #eb6100;
--color_red: #e60012;
--color_pink: #e62e8b;
--color_blue: #00afec;
--color_green: #00984b;
--color_yellow-green: #8fc31f;
--color_yellow: #fff100;
--text_pink: #ea608e;
--text_purple: #a674b0;
--link_text: #d83178;
--bg_navy: #0a2c51;
--body_font: "fot-udkakugo-large-pr6n", sans-serif;
--body_font_size: 1rem;
--body_font_weight: 500;
--body_font_weight_demi: 600;
--body_font_weight_bold: 700;
--label_font: "rocknroll-one", serif;
--label_font_weight: 400;
}

body {
background: url("../img/bg_body.svg") repeat center top / 100% auto var(--bg_navy);
font-family: var(--body_font);
font-size: 1rem;
font-weight: var(--body_font_weight);
font-style: normal;
color: var(--color_black);
-webkit-text-size-adjust: 100%;
position: relative;
}

p:not(:nth-child(1)) {
margin-top: 1em;
}

a {
color: var(--link_text);
text-decoration: none;
transition: all 0.25s ease;
}

img {
width: 100%;
height: auto;
vertical-align: bottom;
}

svg {
vertical-align: bottom;
}

em {
font-weight: var(--body_font_weight_bold);
font-style: normal;
}

.color-or {
color: var(--color_orange);
}

.color-rd {
color: var(--color_red);
}

.color-pk {
color: var(--color_pink);
}

.color-bl {
color: var(--color_blue);
}

.color-gn {
color: var(--color_yellow-green);
}

.color-yl {
color: var(--color_yellow);
}

.br {
display: block;
}

.br-inline {
display: inline-block;
}


/* --------------------------------------------------------------------------------------------------
Layout
-------------------------------------------------------------------------------------------------- */

/**
 * common
 */

.container {
width: 84.375%;
max-width: 1080px;
margin: 0 auto;
}

/**
 * header
 */

#header {
background: transparent;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
width: 100%;
height: 90px;
padding: 0 1.25rem;
position: fixed;
top: 0;
transition: .5s ease;
z-index: 98;
pointer-events: none;
}

#header.active {
/*background: var(--bg_navy);*/
background: rgba(10, 44, 81, 0.9);
}

#site-name img {
width: 8rem;
}

/**
 * hamburger(menu)
 */

.toggle-button-wrapper {
position: fixed;
top: calc((90px - 3rem) / 2);
right: 1.25rem;
z-index: 100;
}

.hamburger-menu {
background-color: var(--color_yellow);
border: 2px solid var(--color_black);
border-radius: 1.5rem;
box-sizing: border-box;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 3rem;
outline: 0;
padding: 0;
-webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
pointer-events: all;
}

.hamburger-menu:hover {
cursor: pointer;
}

.hamburger-menu:active {
position: relative;
top: 2px;
}

.hamburger-menu-icon {
position: relative;
display: block;
}

.hamburger-menu-icon, .hamburger-menu-icon::before, .hamburger-menu-icon::after {
background-color: var(--color_black);
border-radius: 1px;
width: 1.75rem;
height: 2px;
-webkit-transition: all .5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: all .5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.hamburger-menu-icon::before, .hamburger-menu-icon::after {
width: 100%;
}

.hamburger-menu-icon::before, .hamburger-menu-icon::after {
content: "";
position: absolute;
top: -10px;
left: 0;
}

.hamburger-menu-icon::after {
top: 10px;
}

.hamburger-menu[aria-expanded="true"] .hamburger-menu-icon {
background-color: transparent;
}

.hamburger-menu[aria-expanded="true"] .hamburger-menu-icon::before,
.hamburger-menu[aria-expanded="true"] .hamburger-menu-icon::after {
top: 0;
}

.hamburger-menu[aria-expanded="true"] .hamburger-menu-icon::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.hamburger-menu[aria-expanded="true"] .hamburger-menu-icon::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

/**
 * hamburger(modal)
 */

#nav-overlay {
background: transparent;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
visibility: hidden;
z-index: 10;
}

#nav-overlay.active {
visibility: visible;
}

.nav-menu-container {
background: var(--bg_navy);
box-sizing: border-box;
width: 320px;
height: 100%;
position: fixed;
right: -100%;
z-index: 98;
transition: right .25s ease-in-out;
padding: 5.625rem 2.5rem;
}

.nav-menu-container[aria-hidden="false"] {
overflow-y: auto;
right: 0;
transition: right .5s ease-in-out;
}

#nav-menu ul {
margin: 0 auto;
position: relative;
}

#nav-menu ul li {
background: url("../img/pat_line.svg") repeat-x center bottom / auto 6px;
font-size: 1.125rem;
font-weight: var(--body_font_weight_bold);
line-height: 1.5;
}

#nav-menu ul li a {
display: block;
color: var(--color_yellow);
padding: 1.25em 0 calc(1.25em + 6px);
position: relative;
}

#nav-menu ul li:nth-child(1) {
background: url("../img/pat_line.svg") repeat-x center top / auto 6px, url("../img/pat_line.svg") repeat-x center bottom / auto 6px;
}

#nav-menu ul li:nth-child(1) a {
padding-top: calc(1.25em + 6px);
}

#nav-menu ul li a:hover {
opacity: 0.8;
}

#nav-menu .btn-cv {
width: 10rem;
}

#nav-menu .btn-cv a:hover {
opacity: 1;
}

#nav-menu .btn-cv a:active {
position: relative;
top: 2px;
}

/**
 * main(mv/intro)
 */

#main {
background: url("../img/bg_mv.png") no-repeat center top / 100% auto;
position: relative;
}

#mv {
position: relative;
}

#intro {
width: 63.28125%;
margin: 1.875rem auto 0;
}

#intro p {
font-size: clamp(1.125rem, 0.663vw + 0.97rem, 1.5rem);
font-weight: var(--body_font_weight_demi);
color: var(--color_white);
text-align: center;
line-height: 2;
}

/**
 * main(anim)
 */

#main img {
opacity: 0;
}

#tom img.active {
animation: tomSkew .5s cubic-bezier(0.62, -0.32, 0.38, 1.3) forwards;
}

@keyframes tomSkew {
0% { transform: translate(-200px, 100%) scale3d(.7, .7, .7); opacity: 0; }
100% { transform: translate(0, 0) translateZ(0); opacity: 1; }
}

#eimi img.active {
animation: eimiSkew .5s cubic-bezier(0.62, -0.32, 0.38, 1.3) forwards;
}

@keyframes eimiSkew {
0% { transform: translate(200px, 100%) scale3d(.7, .7, .7); opacity: 0; }
100% { transform: translate(0, 0) translateZ(0); opacity: 1; }
}

#maron img.active {
animation: maronSkew .5s cubic-bezier(0.62, -0.32, 0.38, 1.3) forwards;
}

@keyframes maronSkew {
0% { transform: translate(-100px, 100%) scale3d(.7, .7, .7); opacity: 0; }
100% { transform: translate(0, 0) translateZ(0); opacity: 1; }
}

#brand img.active {
animation: siteId .6s cubic-bezier(.215, .61, .355, 1) forwards;
}

@keyframes siteId {
0% { transform: scale3d(.3, .3, .3); opacity: 0; }
20% { transform: scale3d(1.1, 1.1, 1.1); opacity: 1; }
40% { transform: scale3d(.9, .9, .9); }
60% { transform: scale3d(1.03, 1.03, 1.03); }
80% { transform: scale3d(.97, .97, .97); }
100% { transform: translateZ(0); opacity: 1; }
}

#copy img.active {
animation: catchCopy .6s cubic-bezier(.215, .61, .355, 1) forwards;
}

@keyframes catchCopy{
0%{ transform: scaleX(1); }
10%, 20% { transform: scale3d(.9, .9, .9) rotate(-3deg); opacity: 1; }
30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); }
40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); }
100% { transform:scaleX(1); opacity: 1; }
}

#intro p {
opacity: 0;
}

#intro p.active {
animation: fadeIn .6s cubic-bezier(.215, .61, .355, 1) forwards;
}

@keyframes fadeIn {
0% { transform: translate3d(0, 100%, 0); opacity: 0; }
100% { transform: translateZ(0); opacity: 1; }
}

/**
 * title
 */

.main-section-title {
text-align: center;
margin-bottom: clamp(1.875rem, 4.6875vw, 3.75rem)
}

.main-section-title img {
width: clamp(21.09375rem, 52.1875vw, 41.75rem)
}

.section-title {
font-size: clamp(1.5rem, 1.326vw + 1.189rem, 2.25rem);
line-height: 1.5;
}

/**
 * feature
 */

#feature {
background: url("../img/cut01.png") no-repeat center top 10px / clamp(10rem, 18.75vw, 15rem) auto;
padding-top: clamp(calc((345 / 480) * clamp(10rem, 18.75vw, 15rem)), 14.0625vw, 11.25rem);
padding-bottom: clamp(4.375rem, 9.375vw, 7.5rem);
position: relative;
z-index: 1;
}

#feature::before {
background: url("../img/pat_stars_bl-pk.svg") repeat center top / clamp(3.75rem, 9.375vw, 7.5rem) auto #8cd7f6;
mask-image: url("../img/mask-radius.svg");
mask-repeat: no-repeat;
mask-size: 400vw;
mask-position: top center;
content: "";
width: 100%;
height: calc(100% - 10px - clamp(7.5rem, 14.0625vw, 11.25rem));
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
}

#feature::after {
background: url("../img/cut02.png") no-repeat right bottom / clamp(9.625rem, 24.0625vw, 19.25rem) auto;
box-sizing: border-box;
content: "";
width: 93.75%;
max-width: 1200px;
margin: auto;
pointer-events: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}

#feature .container {
background: var(--color_white);
border: 3px solid var(--color_black);
box-sizing: border-box;
position: relative;
}

#feature .container::before, #feature .container::after,
.feature-slider::before, .feature-slider::after {
content: "";
width: 4.6875rem;
height: 4.6875rem;
position: absolute;
}

#feature .container::before {
background: url("../img/corner_left-top.svg") no-repeat left top / 100% auto;
top: -10px;
left: -10px;
}

#feature .container::after {
background: url("../img/corner_right-top.svg") no-repeat right top / 100% auto;
top: -10px;
right: -10px;
}

.feature-slider {
padding: clamp(1.25rem, 3.90625vw, 3.125rem) 12.5% clamp(1.875rem, 5.46875vw, 4.375rem);
position: relative;
}

.feature-slider::before {
background: url("../img/corner_left-bottom.svg") no-repeat left bottom / 100% auto;
bottom: -10px;
left: -10px;
}

.feature-slider::after {
background: url("../img/corner_right-bottom.svg") no-repeat right bottom / 100% auto;
bottom: -10px;
right: -10px;
}

.feature-slider dl dt {
background: url("../img/icon_feature_md.png") no-repeat center top / 100% auto;
margin-bottom: clamp(1.25rem, 2.34375vw, 1.875rem);
}

/**
 * character
 */

#character {
padding: clamp(2.5rem, 4.6875vw, 3.75rem) 0 clamp(3.75rem, 9.375vw, 7.5rem);
}

#character .container {
position: relative;
z-index: 1;
}

#character .container::before {
background: url("../img/cut03.png") no-repeat center center / 100% auto;
content: "";
width: clamp(7.75rem, 26.25vw, 21rem);
padding-top: calc((496 / 672) * clamp(7.75rem, 26.25vw, 21rem));
position: absolute;
top: calc((clamp(2.5rem, 4.6875vw, 3.75rem) + clamp(1.25rem, 2.5vw, 2rem)) * -1);
left: calc(min(4.6875vw, 3.75rem) * -1);
}

#character .container::after {
background: url("../img/cut04.png") no-repeat center center / 100% auto;
content: "";
width: clamp(4.375rem, 13.4375vw, 10.75rem);
padding-top: calc((270 / 344) * clamp(4.375rem, 13.4375vw, 10.75rem));
position: absolute;
top: calc(min(4.8vw, 1.125rem) * -1);
right: calc(min(4.6875vw, 3.75rem) * -1);
}

#character .main-section-title {
background: url("../img/icon_character.png") no-repeat center top / clamp(3.75rem, 9.375vw, 7.5rem) auto;
padding-top: clamp(1.875rem, 4.6875vw, 3.75rem);
position: relative;
}

.character-slider, .thumb-slider {
box-sizing: border-box;
padding: 0 5%;
}

.character-slider .splide__slide {
border: 2px solid var(--color_black);
border-radius: 0.9375rem;
}

.character-slider .splide__slide:has(.card-item[data-character-main]) {
background: url("../img/pat_stars_dots.svg") repeat center top / clamp(10rem, 15.625vw, 12.5rem) auto var(--color_green);
}

.character-slider .splide__slide:has(.card-item[data-character-lab]) {
background: url("../img/pat_stars_dots.svg") repeat center top / clamp(10rem, 15.625vw, 12.5rem) auto var(--color_blue);
}

.character-slider .splide__slide:has(.card-item[data-character-oyatsu]) {
background: url("../img/pat_stars_dots.svg") repeat center top / clamp(10rem, 15.625vw, 12.5rem) auto var(--color_orange);
}

.card-item {
display: flex;
flex-wrap: wrap;
align-items: center;
}

.card-item .character-label {
background: var(--color_yellow);
border-radius: calc(0.9375rem - 2px) calc(0.9375rem - 2px) 0 0;
box-sizing: border-box;
width: 100%;
font-family: var(--label_font);
font-size: clamp(1.875rem, 1.989vw + 1.409rem, 3rem);
text-align: center;
padding: 0.25em;
position: relative;
}

.card-item .character-label span {
line-height: 1;
position: relative;
z-index: 1;
}

.card-item .character-label span::before {
content: attr(data-character);
display: flex;
align-items: center;
font-size: 1em;
color: var(--color_white);
inset: 0;
-webkit-text-stroke: 0.25em var(--color_white);
position: absolute;
z-index: -1;
}

.card-item .pic {
box-sizing: border-box;
width: 45%;
margin: 5% 0 5% 5%;
}

.card-item[data-character-main] .pic {
background: url("../img/cat_main.svg") no-repeat left top / min(20%, 95px) auto;
}

.card-item[data-character-lab] .pic {
background: url("../img/cat_lab.svg") no-repeat left top / min(20%, 95px) auto;
}

.card-item .pic img {
aspect-ratio: 4 / 3;
object-fit: contain;
}

.card-item .text {
box-sizing: border-box;
width: 50%;
padding: 5%;
}

.card-item .text p {
font-size: clamp(1.031rem, 0.829vw + 0.837rem, 1.5rem);
font-weight: var(--body_font_weight_bold);
color: var(--color_white);
line-height: 2;
}

.card-item .text p span {
display: block;
}

.thumb-slider {
margin-top: clamp(1.25rem, 4.6875vw, 3.75rem);
}

.splide__track--nav > .splide__list > .splide__slide.is-active {
border: none;
}

/**
 * news
 */

#news {
padding: clamp(3.75rem, 7.8125vw, 6.25rem) 0;
position: relative;
z-index: 1;
}

#news::before {
background: url("../img/pat_star_pk.svg") repeat center top / clamp(9.375rem, 23.4375vw, 18.75rem) auto #f9d3e3;
mask-image: url("../img/mask-radius.svg");
mask-repeat: no-repeat;
mask-size: 400vw;
mask-position: top center;
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
}

#news .container {
position: relative;
z-index: 1;
}

#news .container::after {
background: url("../img/icon_news.png") no-repeat center center / 100% auto;
content: "";
mask: none;
width: clamp(3.75rem, 7.8125vw, 6.25rem);
padding-top: calc((168 / 160) * clamp(3.75rem, 7.8125vw, 6.25rem));
position: absolute;
top: calc((clamp(3.75rem, 7.8125vw, 6.25rem) + clamp(1.25rem, 2.8125vw, 2.25rem)) * -1);
left: 50%;
transform: translateX(-50%);
}

.news-item-wrapper {
box-sizing: border-box;
width: 90%;
height: 335px;
margin: 0 auto;
padding: 3.75rem 0;
position: relative;
z-index: 2;
}

.news-item-wrapper::before {
background: var(--color_white);
border-radius: 9px;
content: "";
width: calc(100% - 20px);
height: calc(100% - 20px);
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}

.news-item-wrapper::after {
background: #74b5e4;
border-radius: 15px;
content: "";
width: calc(100% + 4px);
height: calc(100% + 4px);
position: absolute;
top: -2px;
left: -2px;
z-index: -1;
}

.dot-border {
width: 100%;
height: 100%;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
pointer-events: none;
}

.news-item-wrapper ul {
box-sizing: border-box;
height: 100%;
overflow-y: auto;
padding: 0 3.75rem;
position: relative;
z-index: 3;
}

.news-item-wrapper ul li {
border-top: 1px dashed #74b5e4;
display: flex;
flex-wrap: wrap;
font-size: clamp(0.938rem, 0.331vw + 0.86rem, 1.125rem);
font-weight: var(--body_font_weight_demi);
line-height: 1.8;
padding: 0.71875em 0;
}

.news-item-wrapper ul li:nth-last-child(1) {
border-bottom: 1px dashed #74b5e4;
}

.news-item-wrapper ul li .pub-date {
width: 7.5em;
}

.news-item-wrapper ul li .news-item {
width: calc(100% - 7.5em);
}

.news-item-wrapper ul li .news-item a:hover {
text-decoration: underline;
}

/**
 * simplebar
 */

.scroll__inner::-webkit-scrollbar {
display: none;
}

.simplebar-scrollbar::before {
background: rgba(116, 181, 228, 0.5);
border-radius: 3px;
width: 6px;
top: 0;
bottom: 0;
}

.simplebar-scrollbar.simplebar-visible::before {
opacity: 1;
}

.simplebar-track {
background: transparent;
width: 10px;
right: 24px;
cursor: pointer;
}

.simplebar-track.simplebar-vertical {
width: 12px;
}

/**
 * trivia
 */

#trivia {
background: #fffde5;
position: relative;
z-index: 1;
}

#trivia::after {
background: url("../img/icon_trivia.png") no-repeat right min(3.125vw, 2.5rem) top min(3.125vw, 2.5rem) / clamp(3.75rem, 9.6875vw, 7.75rem);
content: "";
mask: none;
width: 93.75%;
max-width: 1200px;
height: 100%;
margin-right: auto;
margin-left: auto;
pointer-events: none;
position: absolute;
right: 0;
left: 0;
top: 0;
z-index: 2;
}

#trivia .container-lg {
width: 100%;
margin: 0 auto;
padding: clamp(4.5rem, 7.8125vw, 6.25rem) 0 clamp(14.625rem, 29.0625vw, 23.25rem);
position: relative;
z-index: 1;
}

#trivia .container-lg::before {
background: url("../img/pat_dot_or.svg") repeat center top / clamp(1.5625rem, 3.90625vw, 3.125rem) #ffe450;
mask-image: url("../img/mask-polygon-top.svg"), url("../img/mask-polygon-bottom.svg");
mask-repeat: no-repeat, no-repeat;
mask-size: 100%;
mask-position: top center, bottom center;
mask-composite: add;
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: -1px;
left: 0;
}

#trivia .container-lg::after {
background: url("../img/cut07.png") no-repeat center bottom /  100% auto;
content: "";
mask: none;
width: clamp(18.75rem, 37.5vw, 30rem);
padding-bottom: calc((535 / 960) * clamp(18.75rem, 37.5vw, 30rem));
position: absolute;
bottom: clamp(1.75rem, 3.125vw, 2.5rem);
left: 50%;
transform: translateX(-50%);
}

.trivia-item-wapper dl {
background: #fdeff5;
border: 6px solid #ee87b4;
border-radius: 0.9375rem;
width: 90%;
margin: clamp(0.625rem, 1.5625vw, 1.25rem) auto 0;
}

.trivia-item-wapper dl:nth-child(even) {
background: #f3eaf3;
border-color: #cf9dc6;
}

.trivia-item-wapper dl:nth-child(1) {
margin-top: 0;
}

.trigger {
display: flex;
flex-wrap: wrap;
align-items: center;
cursor: pointer;
font-size: clamp(1.125rem, 0.663vw + 0.97rem, 1.5rem);
font-weight: 700;
color: var(--text_pink);
line-height: 1.6;
padding: 0.625em 0.75em;
position: relative;
}

.trivia-item-wapper dl:nth-child(even) .trigger {
color: var(--text_purple);
}

.trigger::before {
background: url("../img/icon_q_yl.svg") no-repeat center center / 100% auto;
content: "";
width: 3em;
height: 2em;
margin-right: 0.5em;
}

.trigger::after {
background: url("../img/arrow_pk.svg") no-repeat center center / 100% auto;
content: "";
width: clamp(1.25rem, 1.875vw, 1.5rem);
height: clamp(1.25rem, 1.875vw, 1.5rem);
position: absolute;
top: 50%;
right: clamp(0.75rem, 1.875vw, 1.5rem);
transform: translateY(-50%);
transition: all 0.25s ease;
}

.trivia-item-wapper dl:nth-child(even) .trigger::after {
background-image: url("../img/arrow_pu.svg");
}

.trigger.active::after {
transform: translateY(-50%) rotate(180deg);
}

.trigger div {
box-sizing: border-box;
width: calc(100% - (clamp(1.25rem, 1.875vw, 1.5rem) * 2) - 3.5em);
}

.trigger + dd.toggle {
background: var(--color_white);
border-radius: 0 0 0.5625rem 0.5625rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transform: translate3d(0, 0, 0);
}

.trigger + dd.toggle div {
box-sizing: border-box;
font-size: clamp(0.938rem, 0.331vw + 0.86rem, 1.125rem);
line-height: clamp(1.688rem, 0.994vw + 1.454rem, 2.25rem);
padding: calc(clamp(1.25rem, 3.125vw, 2.5rem) - ((clamp(1.688rem, 0.994vw + 1.454rem, 2.25rem) - clamp(0.938rem, 0.331vw + 0.86rem, 1.125rem)) / 2)) clamp(1.25rem, 3.125vw, 2.5rem);
}

.trigger.active + dd.toggle {
max-height: inherit;
overflow: auto;
}

/**
 * lineup
 */

#lineup {
background: url("../img/pat_characters_gn.png") repeat center top / clamp(14.625rem, 34.5625vw, 29.25rem) var(--color_white);
padding: clamp(3.125rem, 7.8125vw, 6.25rem) 0;
}

.lineup-item {
background: linear-gradient(0deg, var(--color_yellow-green) 0, var(--color_yellow-green) 50%, var(--color_green) 50%, var(--color_green) 100%);
border-radius: 0.9375rem;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
position: relative;
z-index: 1;
}

.lineup-item:not(:nth-last-child(1)) {
margin-bottom: clamp(1.25rem, 2.34375vw, 1.875rem);
}

.lineup-item::before {
background: var(--color_white);
border-radius: calc(0.9375rem - 10px);
content: "";
width: calc(100% - 20px);
height: calc(100% - 20px);
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}

.lineup-item .pic {
width: max(270px, 27.5%);
margin: 5%;
position: relative;
}

.lineup-item .badge {
display: block;
width: clamp(5.625rem, 9.375vw, 7.5rem);
position: absolute;
bottom: calc(clamp(1.125rem, 1.5625vw, 1.25rem) * -1);
left: calc(clamp(1.125rem, 1.5625vw, 1.25rem) * -1);
transform-origin: center center;
animation: reading 1.5s linear infinite;
}

.lineup-item .badge button {
appearance: none;
background: none;
border: none;
cursor: pointer;
outline: 0;
padding: 0;
}

@keyframes reading {

0% { transform: rotate(10deg); }
50% { transform: rotate(-10deg); }
100% { transform: rotate(10deg); }

}

.lineup-item .badge:hover img {
transition: transform 1s;
transform: rotate(360deg);
}

.lineup-item .text-group {
width: calc(100% - (max(270px, 27.5%) + 15%));
padding: calc(5% - clamp(1.5rem, 1.326vw + 1.189rem, 2.25rem) * 0.25) 5% 5% 0;
}

.lineup-item .text-group p {
font-size: clamp(0.938rem, 0.331vw + 0.86rem, 1.125rem);
line-height: clamp(1.688rem, 0.994vw + 1.454rem, 2.25rem);
margin-top: calc(1.875rem - ((clamp(1.688rem, 0.994vw + 1.454rem, 2.25rem) - clamp(0.938rem, 0.331vw + 0.86rem, 1.125rem))/ 2) - clamp(1.5rem, 1.326vw + 1.189rem, 2.25rem) * 0.25);
}

.lineup-item .text-group ul {
margin-top: calc(1.875rem - ((clamp(1.688rem, 0.994vw + 1.454rem, 2.25rem) - clamp(0.938rem, 0.331vw + 0.86rem, 1.125rem))/ 2) - clamp(0.844rem, 0.166vw + 0.805rem, 0.938rem) * 0.4);
}

.lineup-item .text-group ul li {
font-size: clamp(0.844rem, 0.166vw + 0.805rem, 0.938rem);
line-height: 1.8;
}

.lineup-item .btn-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(0.5rem, 1.40825vw, 1.125rem);
margin-top: calc(1.875rem - (clamp(0.844rem, 0.166vw + 0.805rem, 0.938rem) * 0.4));
}

.lineup-item .btn-group .btn {
width: calc((100% - (clamp(0.5rem, 1.40825vw, 1.125rem) * 2)) / 3);
max-width: 195px;
}

.lineup-item .btn-group .btn a:active {
position: relative;
top: 2px;
}

.book-modal-slider {
position: relative;
}

.book-modal {
display: none;
}

.book-modal.is-open {
display: block;
}

.book-overlay {
background: var(--color_yellow);
display: flex;
justify-content: center;
align-items: center;
overflow-y: auto;
overscroll-behavior-y: none;
scrollbar-width: none;
padding: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
}

.book-container {
width: 78.125%;
max-width: 1000px;
margin: auto;
position: relative;
}

.book-content-modal-slider {
padding: 5% 7.5%;
position: relative;
}

.book-modal-slider .splide__slide {
transform: translate3d(0, 0, 0);
display: grid;
place-items: center;
}

.book-modal-slider .splide__slide img {
box-sizing: border-box;
width: 100%;
}

.book-close-btn {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
outline: none;
width: 1.75rem;
height: 1.75rem;
padding: 0;
position: absolute;
top: 0;
right: 7.5%;
z-index: 10;
}

.book-close-btn::before, .book-close-btn::after {
background: var(--color_black);
border-radius: 1px;
display: block;
content: "";
width: 100%;
height: 2px;
position: absolute;
}

.book-close-btn::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.book-close-btn::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.book-modal[aria-hidden="false"] .book-overlay {
-webkit-animation: mmfadeIn 0.5s cubic-bezier(0, 0, 0.2, 1);
animation: mmfadeIn 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.book-modal[aria-hidden="false"] .book-container {
-webkit-animation: mmslideIn 0.5s cubic-bezier(0, 0, 0.2, 1);
animation: mmslideIn 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.book-modal[aria-hidden="true"] .book-overlay {
-webkit-animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.book-modal[aria-hidden="true"] .book-container {
-webkit-animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.book-overlay, .book-container {
will-change: transform;
}

@-webkit-keyframes mmfadeIn {

from { opacity: 0; }
to { opacity: 1; }

}

@keyframes mmfadeIn {

from { opacity: 0; }
to { opacity: 1; }
}


@-webkit-keyframes mmfadeOut {

from { opacity: 1; }
to { opacity: 0; }
}

@keyframes mmfadeOut {

from { opacity: 1; }
to { opacity: 0; }

}

@-webkit-keyframes mmslideIn {

from { transform: translateY(15%); }
to { transform: translateY(0); }
}

@keyframes mmslideIn {

from { transform: translateY(15%); }
to { transform: translateY(0); }

}

@-webkit-keyframes mmslideOut {

from { transform: translateY(0); }
to { transform: translateY(15%); }

}

@keyframes mmslideOut {

from { transform: translateY(0); }
to { transform: translateY(15%); }

}

/**
 * voice
 */

#voice {
padding-top: clamp(3.125rem, 7.8125vw, 6.25rem);
padding-bottom: clamp(10.9375rem, 20.3125vw, 16.25rem);
position: relative;
z-index: 1;
}

#voice::before {
background: url("../img/pat_stars_pr-blgn.svg") repeat center top / clamp(3.75rem, 9.375vw, 7.5rem) auto #92d2dc;
mask-image: url("../img/mask-radius.svg");
mask-repeat: no-repeat;
mask-size: 400vw;
mask-position: bottom center;
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}

#voice .main-section-title {
position: relative;
z-index: 1;
}

#voice .main-section-title::after {
background: url("../img/icon_lineup01.png?ver=2025112701") no-repeat left min(7.03125vw, 5.625rem) top / clamp(4.5rem, 11.25vw, 9rem) auto, url("../img/icon_lineup02.png?ver=2025112701") no-repeat right min(7.03125vw, 5.625rem) top / clamp(4.375rem, 11.09375vw, 8.875rem) auto;
mask: none;
content: "";
width: 84.375%;
max-width: 1080px;
height: calc(100% + ((345 / 288) * 84.375%));
margin-right: auto;
margin-left: auto;
position: absolute;
z-index: -1;
top: calc(clamp(0.3125rem, 0.78125vw, 0.625rem) * -1);
right: 0;
left: 0;
}

#voice .container {
background: var(--color_white);
border: 3px solid var(--color_black);
box-sizing: border-box;
position: relative;
z-index: 2;
}

#voice .container::before, #voice .container::after,
.voice-slider::before, .voice-slider::after {
content: "";
width: 4.6875rem;
height: 4.6875rem;
position: absolute;
}

#voice .container::before {
background: url("../img/corner_left-top.svg") no-repeat left top / 100% auto;
top: -10px;
left: -10px;
}

#voice .container::after {
background: url("../img/corner_right-top.svg") no-repeat right top / 100% auto;
top: -10px;
right: -10px;
}

.voice-slider {
box-sizing: border-box;
padding: calc(clamp(2.5rem, 6.25vw, 5rem) - (clamp(1.125rem, 1.326vw + 0.814rem, 1.875rem) * 0.5)) 12.5% clamp(2.5rem, 6.25vw, 5rem);
position: relative;
}

.voice-slider::before {
background: url("../img/corner_left-bottom.svg") no-repeat left bottom / 100% auto;
bottom: -10px;
left: -10px;
}

.voice-slider::after {
background: url("../img/corner_right-bottom.svg") no-repeat right bottom / 100% auto;
bottom: -10px;
right: -10px;
}

.voice-slider .splide__slide {
font-family: var(--label_font);
font-size: clamp(1.125rem, 1.326vw + 0.814rem, 1.875rem);
line-height: 2;
}

.voice-slider .splide__slide span.author {
display: block;
font-family: var(--body_font);
font-size: clamp(0.938rem, 0.331vw + 0.86rem, 1.125rem);
font-weight: var(--body_font_weight_bold);
text-align: right;
line-height: 1;
margin-top: calc(clamp(1.5rem, 3.125vw, 2.5rem) - (clamp(1.125rem, 1.326vw + 0.814rem, 1.875rem) * 0.5));
}

/**
 * splide
 */

.splide__arrow {
background-color: none;
width: 3.75rem;
height: 3.75rem;
opacity: 1;
}

.splide__arrow img {
filter: drop-shadow(0 2px 0 var(--color_black));
}

.splide__arrow img:active {
position: relative;
top: 2px;
}

.splide__arrow:hover:not(:disabled) {
opacity: 1;
}

.splide__arrow--prev, .splide__arrow--next {
background: none;
}

.feature-slider .splide__arrow--prev, .voice-slider .splide__arrow--prev {
left: calc(((3.75rem / 2) + 1.5px ) * -1);
}

.feature-slider .splide__arrow--next, .voice-slider .splide__arrow--next {
right: calc(((3.75rem / 2) + 1.5px ) * -1);
}

.character-slider .splide__arrow--prev {
left: calc((3.75rem / 2) * -1);
}

.character-slider .splide__arrow--next {
right: calc((3.75rem / 2) * -1);
}

.book-container .splide__arrow--prev {
left: calc(7.5% - (3.75rem / 2));
}

.book-container .splide__arrow--next {
right: calc(7.5% - (3.75rem / 2));
}

.splide.is-focus-in .splide__slide:focus, .splide.is-focus-in .splide__arrow:focus,
.splide__arrow:focus-visible {
outline: none;
outline-offset: inherit;
}

.splide__pagination {
gap: 8px;
}

.voice-slider .splide__pagination {
padding-right: 12.5%;
padding-left: 12.5%;
bottom: calc((clamp(2.5rem, 6.25vw, 5rem) - 8px) / 2);
}

.splide__pagination li {
display: inline-flex;
}

.splide__pagination__page {
background: #fff253;
margin: 0;
opacity: 1;
}

.splide__pagination__page.is-active {
background: #00b3cd;
}

.book-container .splide__pagination__page {
background: var(--color_white);
cursor: pointer;
}

.book-container .splide__pagination__page.is-active {
background: var(--link_text);
}

/**
 * footer
 */

#footer {
background: url("../img/bg_footer.png") no-repeat center bottom / 100% auto;
padding: max(6.25rem, 10vw) 0 max(10.75rem, 15.625vw);
position: relative;
}

#footer::before {
background: url("../img/cut08.png?ver=2025112701") no-repeat center center / 100% auto;
content: "";
width: clamp(14.25rem, 25vw, 20rem);
padding-top: calc((533 / 640) * clamp(14.25rem, 25vw, 20rem));
position: absolute;
top: calc(clamp(9.875rem, 17.34375vw, 13.875rem) * -1);
left: 50%;
transform: translateX(-50%);
z-index: 2;
}

#footer::after {
background: url("../img/bg_footer_stars.png") no-repeat center bottom / 100% auto;
content: "";
width: 100%;
height: 100%;
margin-right: auto;
margin-left: auto;
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}

#footer p {
font-size: clamp(0.563rem, 0.331vw + 0.485rem, 0.75rem);
font-weight: var(--body_font_weight_demi);
color: var(--color_white);
text-align: center;
line-height: 1.75;
}

/**
 * pagetop
 */

#pagetop {
cursor: pointer;
opacity: 0;
transition: opacity 400ms ease;
position: fixed;
right: clamp(0.625rem, 1.5625vw, 1.25rem);
z-index: 97;
}

#pagetop.active {
opacity: 1;
animation: moveUpDown 2s ease-in-out infinite;
}

@keyframes moveUpDown {

0% { transform: translateY(0); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0); }

}

#pagetop img {
width: clamp(3.5rem, 7.5vw, 6rem);
}


/* --------------------------------------------------------------------------------------------------
Media Queries (min-width: 481px)
-------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 481px) {

#news .container::before {
background: url("../img/cut05.png") no-repeat center center / 100% auto;
content: "";
mask: none;
width: min(16.5625vw, 13.25rem);
padding-top: calc((378 / 424) * min(16.5625vw, 13.25rem));
position: absolute;
top: calc((min(7.8125vw, 6.25rem) + clamp(3.75rem, 7.8125vw, 6.25rem)) * -1);
right: -3.125vw;
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (min-width: 768px)
-------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) {

#brand {
width: 63.4375%;
margin-right: auto;
margin-left: auto;
position: absolute;
top: 3.4375vw;
right: 0;
left: 0;
z-index: 3;
}

#copy {
width: 28.90625%;
margin-right: auto;
margin-left: auto;
position: absolute;
right: 0;
bottom: 3.90625vw;
left: 0;
z-index: 2;
}

#mv {
aspect-ratio: 10 / 5.25;
}

#mv .character > div {
position: absolute;
z-index: 1;
}

#mv #eimi {
width: 30.3125%;
top: 17.65625vw;
left: 1.5625%;
}

#mv #tom {
width: 27.5%;
top: 6.5625vw;
right: 4.6875%;
}

#mv #maron {
width: 11.875%;
top: 38.59375vw;
right: 20.625%;
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (min-width: 835px)
-------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 835px) {

#nav-menu .btn-cv {
padding: 0;
position: fixed;
top: calc((90px - 50px) / 2);
right: 5.625rem;
z-index: 100;
}

#nav-menu .btn-cv a {
padding: 0;
}

.thumb-slider .splide__list {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 0.78125vw;
}

.thumb-slider .splide__track--nav > .splide__list > .splide__slide {
width: 100% !important;
}
.thumb-slider .splide__track--nav > .splide__list > .splide__slide.is-active {
width: 100% !important;
}

.thumb-slider .splide__list li.splide__clone {
display: none;
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (min-width: 961px)
-------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 961px) {

#trivia::before {
background: url("../img/cut06.png") no-repeat left top / clamp(14.75rem, 22.8125vw, 18.25rem);
content: "";
mask: none;
width: 93.75%;
max-width: 1200px;
height: 100%;
margin-right: auto;
margin-left: auto;
pointer-events: none;
position: absolute;
right: 0;
left: 0;
top: calc(min(11.71875vw, 9.375rem) * -1);
z-index: 2;
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (min-width: 1367px)
-------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 1367px) {

#trivia .container-lg::before {
mask-image: url("../img/mask-polygon-top-lg.svg"), url("../img/mask-polygon-bottom-lg.svg");
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (max-width: 1024px)
-------------------------------------------------------------------------------------------------- */

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

.feature-slider, .voice-slider, .voice-slider .splide__pagination {
padding-right: 10%;
padding-left: 10%;
}

.card-item .pic img {
aspect-ratio: 1 / 1;
max-height: 327px;
}

.news-item-wrapper {
width: 100%;
max-width: 720px;
padding: 3.125rem 0;
height: 299px;
}

.news-item-wrapper ul {
padding: 0 3.125rem;
}

.trivia-item-wapper dl {
border-width: 5px;
width: 100%;
}

.lineup-item::before {
border-radius: calc(0.9375rem - 8px);
width: calc(100% - 16px);
height: calc(100% - 16px);
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (max-width: 960px)
-------------------------------------------------------------------------------------------------- */

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

#news {
padding-bottom: calc((428 / 584) * min(64vw, 14rem) + 0.9375rem);
}

#news::after {
background: url("../img/cut06.png") no-repeat center center / 100% auto;
content: "";
width: min(64vw, 14rem);
padding-top: calc((428 / 584) * min(64vw, 14rem));
mask: none;
position: absolute;
bottom: calc(min(8vw, 2.5rem) + 0.625rem);
left: 50%;
transform: translateX(-50%);
z-index: 2;
}

#trivia::after {
background: url("../img/icon_trivia.png") no-repeat center center / 100% auto;
width: min(16vw, 4.5rem);
max-width: inherit;
height: auto;
padding-top: calc((336 / 248) * min(16vw, 4.5rem));
position: absolute;
top: calc(min(8vw, 2.5rem) * -1);
}

.lineup-item {
flex-direction: column;
}

.lineup-item .pic {
box-sizing: border-box;
width: 100%;
min-width: 270px;
max-width: 297px;
text-align: center;
margin: 5% auto calc(5% - (clamp(1.5rem, 1.326vw + 1.189rem, 2.25rem) * 0.25));
}

.lineup-item .pic > img {

}

.lineup-item .text-group {
box-sizing: border-box;
width: 100%;
padding: 0 5% 5%;
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (max-width: 834px)
-------------------------------------------------------------------------------------------------- */

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

#header {
height: 60px;
padding-right: 0.625rem;
padding-left: 0.625rem;
}

#site-name img {
width: auto;
height: 3rem;
}

.toggle-button-wrapper {
top: calc((60px - 3rem) / 2);
right: 0.625rem;
}

.nav-menu-container {
width: 80%;
max-width: 320px;
padding-top: 3.75rem;
padding-bottom: 3.75rem;
}

#nav-menu ul li {
font-size: 0.9575rem;
}

#nav-menu ul li:nth-last-child(1) {
background: none;
}

#nav-menu ul li a {
padding: 1em 0 calc(1em + 6px);
}

#nav-menu ul li:nth-last-child(1) a {
padding-top: calc(1em + 6px);
}

#feature .container, #voice .container {
border-width: 2px;
}

#feature .container::before, #feature .container::after, .feature-slider::before, .feature-slider::after,
#voice .container::before, #voice .container::after, .voice-slider::before, .voice-slider::after {
width: 3.09375rem;
height: 3.09375rem;
}

.card-item {
flex-direction: column;
text-align: center;
}

.card-item .pic {
width: 85%;
text-align: center;
margin: 7.5%;
}

.card-item .pic img {
max-height: 327px;
}

.card-item .text {
width: auto;
padding: 0 7.5% 7.5%;
}

.card-item .text p {
text-align: left;
}

.thumb-slider .splide__list li {
flex-shrink: 0;
width: calc((100% - (1.5625vw * 5)) / 6) !important;
}

.book-container {
width: 100%;
}

.book-container .splide__pagination {
bottom: 0;
}

.splide__arrow {
width: 2.5rem;
height: 2.5rem;
}

.feature-slider .splide__arrow--prev, .voice-slider .splide__arrow--prev {
left: calc(((2.5rem / 2) + 1px ) * -1);
}

.feature-slider .splide__arrow--next, .voice-slider .splide__arrow--next {
right: calc(((2.5rem / 2) + 1px ) * -1);
}

.character-slider .splide__arrow--prev {
left: calc((2.5rem / 2) * -1);
}

.character-slider .splide__arrow--next {
right: calc((2.5rem / 2) * -1);
}

.book-container .splide__arrow--prev {
left: calc(7.5% - (2.5rem / 2));
}

.book-container .splide__arrow--next {
right: calc(7.5% - (2.5rem / 2));
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (max-width: 767px) and (orientation: portrait)
-------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) and (orientation: portrait) {

#main {
background: url("../img/bg_mv_sp.png") no-repeat center top / 100% auto;
}

#mv {
display: flex;
flex-direction: column;
margin-bottom: calc(8vw - (clamp(1.125rem, 0.663vw + 0.97rem, 1.5rem) * 0.5))
}

#mv .character {
aspect-ratio: 10 / 8.48;
position: relative;
order: 1;
}

#mv .character > div {
position: absolute;
}

#mv #tom {
width: 43%;
top: 11vw;
right: 6.75vw;
}

#mv #eimi {
width: 47%;
top: 24vw;
left: 2.5vw;
}

#mv #maron {
width: 20%;
right: 27.2vw;
bottom: 0;
}

#brand {
width: 96%;
order: 2;
margin: -4vw auto 0;
}

#copy {
width: 50%;
order: 3;
margin: -2vw auto 0;
}

#intro {
width: 90%;
margin: 0 auto;
}

#intro p {
text-align: left;
}

#intro p .br-inline, #intro p .br {
display: inline;
}

#footer {
background-size: 170%;
padding: min(6.25rem, 25.6vw) 0 min(21.875rem, 45vw);
}

#footer::after {
background-image: url("../img/bg_footer_sp.png");
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (max-width: 767px)
-------------------------------------------------------------------------------------------------- */

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

.container {
width: 90%;
}

#feature .container, /*#character .container, */#voice .container {
width: 84.8%;
}

.feature-slider, .voice-slider, .voice-slider .splide__pagination {
padding-right: 7.5%;
padding-left: 7.5%;
}

.character-slider, .thumb-slider {
padding-right: 0;
padding-left: 0;
}

.news-item-wrapper {
max-width: 480px;
height: 324px;
padding: 2.5rem 0;
}

.news-item-wrapper::before {
border-radius: 6px;
width: calc(100% - 16px);
height: calc(100% - 16px);
}

.news-item-wrapper::after {
border-radius: 9px;
}

.news-item-wrapper ul {
padding: 0 2.5rem;
}

.news-item-wrapper ul li {
flex-direction: column;
padding: 0.75em 0;
}

.news-item-wrapper ul li span.pub-date, .news-item-wrapper ul li span.news-item {
width: 100%;
}

.simplebar-track {
right: 16px;
}

.trivia-item-wapper dl {
border-radius: 0.5625rem;
border-width: 4px;
}

.lineup-item::before {
border-radius: calc(0.9375rem - 6px);
width: calc(100% - 12px);
height: calc(100% - 12px);
}

.lineup-item .pic {
width: 80%;
margin-top: 0;
margin-bottom: calc(8vw - (clamp(1.5rem, 1.326vw + 1.189rem, 2.25rem) * 0.25));
padding: 10% 0 0;
}

.lineup-item .text-group {
width: 80%;
margin:  0 auto;
padding: 0 0 10%;
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (max-width: 767px) and (orientation: landscape)
-------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) and (orientation: landscape) {

#site-name img {
width: auto;
height: 3rem;
}

.nav-menu-container {
width: 50%;
}

#brand {
width: 63.4375%;
margin-right: auto;
margin-left: auto;
position: absolute;
top: 3.4375vw;
right: 0;
left: 0;
z-index: 3;
}

#copy {
width: 28.90625%;
margin-right: auto;
margin-left: auto;
position: absolute;
right: 0;
bottom: 3.90625vw;
left: 0;
z-index: 2;
}

#mv {
aspect-ratio: 10 / 5.25;
}

#mv .character > div {
position: absolute;
z-index: 1;
}

#mv #eimi {
width: 30.3125%;
top: 17.65625vw;
left: 1.5625%;
}

#mv #tom {
width: 27.5%;
top: 6.5625vw;
right: 4.6875%;
}

#mv #maron {
width: 11.875%;
top: 38.59375vw;
right: 20.625%;
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (max-width: 600px)
-------------------------------------------------------------------------------------------------- */

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

@keyframes tomSkew {
0% { transform: translate(-150px, 100%); opacity: 0; }
100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes eimiSkew {
0% { transform: translate(150px, 100%); opacity: 0; }
100% { transform: translate(0, 0); opacity: 1; }
}

.thumb-slider .splide__list li {
width: calc((100% - (1.5625vw * 3)) / 4) !important;
}

.news-item-wrapper {
height: 324px;
}

.book-content-modal-slider {
padding-top: 7.5%;
padding-bottom: 7.5%;
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (max-width: 480px)
-------------------------------------------------------------------------------------------------- */

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

@keyframes tomSkew {
0% { transform: translate(-120px, 100%); opacity: 0; }
100% { transform: translate(0, 0); opacity: 1; }
}

.feature-slider dl dt {
background: url("../img/icon_feature.png") no-repeat center top / 35% auto;
}

#character .container {
width: 90%;
}

#character .container::before {
left: 0;
}

#character .container::after {
right: 0;
}

.character-slider, .thumb-slider {
width: 94%;
margin-right: auto;
margin-left: auto;
}

.news-item-wrapper {
width: 100%;
max-width: 337.5px;
height: 394px;
padding: 2.5rem 0;
}

.news-item-wrapper ul {
padding: 0 1.875rem;
}

.simplebar-scrollbar::before {
border-radius: 2px;
width: 4px;
}

.simplebar-track {
right: 12px;
}

.book-content-modal-slider {
padding-top: 10%;
padding-bottom: 10%;
}

#voice .main-section-title::after {
background-position: left top, right top;
}

.splide__pagination {
gap: 6px;
}

.voice-slider .splide__pagination {
bottom: calc((clamp(2.5rem, 6.25vw, 5rem) - 6px) / 2);
}

.splide__pagination__page {
width: 6px;
height: 6px;
}

}