:root { --color-black: rgba(0, 0, 0, 1); --color-white: rgba(255, 255, 255, 1); --color-yellow: #F2EB38; --color-border: #DDDDDD; } :root { --fs-10-12: 2.56vw; --fs-10-14: 2.56vw; --fs-10-24: 2.56vw; --fs-11-12: 2.82vw; --fs-11-21: 2.82vw; --fs-11-28: 2.82vw; --fs-11-32: 2.82vw; --fs-12-13: 3.08vw; --fs-12-14: 3.08vw; --fs-13-15: 3.33vw; --fs-13-16: 3.33vw; --fs-13-34: 3.33vw; --fs-14-16: 3.59vw; --fs-14-18: 3.59vw; --fs-14-24: 3.59vw; --fs-14-33: 3.59vw; --fs-15-18: 3.85vw; --fs-15-19: 3.85vw; --fs-17-20: 4.36vw; --fs-20: 5.13vw; --fs-21-30: 5.38vw; --fs-23-31: 5.9vw; --fs-26-37: 6.67vw; --fs-35-55: 8.97vw; --fs-40-63: 10.26vw; --fs-th: 3.59vw; --fs-td: 3.59vw; --fs-btn: 4.1vw; } @media all and (min-width: 864px) { :root { --fs-10-12: 0.94vw; --fs-10-14: 0.78vw; --fs-10-24: 1.88vw; --fs-11-12: 0.94vw; --fs-11-21: 1.64vw; --fs-11-28: 2.19vw; --fs-11-32: 2.5vw; --fs-12-13: 1.02vw; --fs-12-14: 1.09vw; --fs-13-15: 1.17vw; --fs-13-16: 1.25vw; --fs-13-34: 2.66vw; --fs-14-16: 1.25vw; --fs-14-18: 1.41vw; --fs-14-33: 2.58vw; --fs-14-24: 1.88vw; --fs-15-18: 1.41vw; --fs-15-19: 1.48vw; --fs-17-20: 1.56vw; --fs-21-30: 2.34vw; --fs-23-31: 2.42vw; --fs-26-37: 2.89vw; --fs-35-55: 4.3vw; --fs-40-63: 4.92vw; --fs-th: 1.25vw; --fs-td: 1.25vw; --fs-btn: 1.56vw; } } :root { --header-height: 12.82vw; --inner-width: 92.3%; --external-link-height: 26.15vw; --btn-height: 16.67vw; --btn-play-width: 16.67vw; --hide-y: 7.69vw; } @media all and (min-width: 864px) { :root { --header-height: 6.25vw; --inner-width: 92.18%; --external-link-height: 12.34vw; --btn-height: 5.47vw; --btn-play-width: 9.38vw; --hide-y: 3.13vw; } } /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } html { font-size: 3.125vw; } body { font-size: 14px; font-size: 1.4rem; } /* Small Devices, Tablets */ @media all and (min-width: 768px) { html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } } /* PC */ :root { --vh: 100vh; } body { overflow-x: hidden; overflow-y: visible; } body { color: #000; font-family: "Noto Sans JP", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior-y: none; touch-action: manipulation; overflow-wrap: anywhere; word-break: normal; line-break: strict; } a { color: #000; text-decoration: none; text-decoration-thickness: 1px; } li { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } .textbox { text-box: trim-both cap alphabetic; } img { width: 100%; height: auto; vertical-align: top; } .mr-b { font-family: "Manrope", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; } .c-icon { position: relative; display: block; } .c-icon svg { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } .u-pc { display: none; } button[data-menu] { position: fixed; display: block; cursor: pointer; top: 3.08vw; right: 3.85vw; z-index: 10; } button[data-menu] span.txt { font-size: var(--fs-13-16); position: relative; line-height: 1.46; } button[data-menu] span.txt:after { content: ""; width: 100%; height: 1px; background: var(--color-black); position: absolute; left: 0px; bottom: 0px; } button[data-menu] .is_open { display: none; } header#global_header { width: 100%; height: var(--header-height); position: fixed; top: 0px; left: 0px; z-index: 10; --header-logo-width: 57.44vw; --header-logo-height: 8.46vw; } header#global_header p.logo { width: var(--header-logo-width); height: var(--header-logo-height); aspect-ratio: 250/37; position: absolute; left: 3.85vw; top: calc((var(--header-height) - var(--header-logo-height)) / 2); } header#global_header .c-list_share { display: none; } .scrolled header#global_header { background: var(--color-white); border-bottom: 1px solid var(--color-black); --header-logo-width: 41.03vw; --header-logo-height: 6.02vw; } footer#global_footer { width: 100%; background: var(--color-black); position: relative; } footer#global_footer .footer_inner { padding: 12.31vw 0 12.31vw 0; width: var(--inner-width); margin-inline: auto; } footer#global_footer .c-list_external { width: 100%; } footer#global_footer .c-list_external ul { width: 100%; display: flex; flex-direction: column; row-gap: 3.85vw; } footer#global_footer .c-list_external ul li { width: 100%; } footer#global_footer .c-list_external ul li a { display: block; border: 1px solid var(--color-white); height: var(--external-link-height); } footer#global_footer .c-list_external ul li .inr { display: flex; column-gap: 6.67vw; padding-left: 6.67vw; align-items: center; height: calc(var(--external-link-height) - 2px); } footer#global_footer .c-list_external ul li figure { height: 14.87vw; width: auto; } footer#global_footer .c-list_external ul li figure img { height: 100%; width: auto; } footer#global_footer .c-list_external ul li dl dt { color: var(--color-white); font-size: var(--fs-21-30); line-height: 1; white-space: nowrap; } footer#global_footer .c-list_external ul li dl dd { font-size: var(--fs-13-15); line-height: 1; color: var(--color-white); margin-top: 2.05vw; } footer#global_footer .txt_logo { width: 100%; margin-top: 15.38vw; } footer#global_footer .txt_logo p { width: 100%; aspect-ratio: 360/48; } footer#global_footer .cols { width: 100%; display: flex; margin-top: 12.56vw; } footer#global_footer .cols .l { width: 30.55%; } footer#global_footer .cols .m { width: 40.83%; } footer#global_footer .cols .r { width: 28.62%; } footer#global_footer .l ul, footer#global_footer .m ul { display: flex; flex-direction: column; row-gap: 2.56vw; } footer#global_footer .l ul li a, footer#global_footer .m ul li a { color: var(--color-white); font-size: var(--fs-12-14); display: block; width: fit-content; height: 5.13vw; } footer#global_footer .c-list_sns ul { display: flex; flex-direction: column; row-gap: 2.56vw; } footer#global_footer .c-list_sns ul li a { display: block; color: var(--color-white); } footer#global_footer .c-list_sns ul li .inr { display: flex; align-items: center; column-gap: 2.56vw; } footer#global_footer .c-list_sns ul li .c-icon { width: 5.13vw; height: 5.13vw; } footer#global_footer .c-list_sns ul li .c-icon svg { fill: var(--color-white); } footer#global_footer .c-list_sns ul li span.txt { font-family: "Manrope", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; color: var(--color-white); font-size: var(--fs-12-14); } footer#global_footer .c-copy { width: 96.92%; margin-inline: auto; padding-bottom: 14.1vw; } footer#global_footer .c-copy p { color: var(--color-white); font-size: var(--fs-12-14); font-family: "Manrope", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; text-transform: uppercase; } .show_menu #b-glbnav { opacity: 1; pointer-events: auto; transition: opacity 0.6s ease; } .show_menu button[data-menu] span.is_close { display: none; } .show_menu button[data-menu] span.is_open { display: block; color: var(--color-black); } .show_menu button[data-menu] span.is_open:after { background: var(--color-black); } .show_menu header#global_header p.logo svg { fill: var(--color-black); } .show_menu header#global_header .c-list_share dt { color: var(--color-black); } #b-glbnav { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(255, 255, 255, 0.9); z-index: 9; backdrop-filter: blur(20px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } #b-glbnav .glbnav_inner { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; overflow-y: auto; } #b-glbnav .glbnav_content { padding-top: var(--header-height); } #b-glbnav .c-list_nav { width: var(--inner-width); margin-inline: auto; padding-top: 30.26vw; } #b-glbnav .c-list_nav ul { display: flex; flex-direction: column; row-gap: 9.74vw; } #b-glbnav .c-list_nav ul li a { display: block; width: fit-content; } #b-glbnav .c-list_nav ul li a span.txt { display: block; position: relative; } #b-glbnav .c-list_nav ul li a span.txt:after { content: ""; width: 100%; height: 2px; background: var(--color-black); position: absolute; bottom: -8px; left: 0px; } #b-glbnav .c-list_nav ul li:nth-child(1) span.txt { width: 16.03vw; aspect-ratio: 84/35; } #b-glbnav .c-list_nav ul li:nth-child(2) span.txt { width: 31.03vw; aspect-ratio: 162/35; } #b-glbnav .c-list_nav ul li:nth-child(3) span.txt { width: 25.9vw; aspect-ratio: 134/29; } #b-glbnav .c-list_nav ul li:nth-child(4) span.txt { width: 34.74vw; aspect-ratio: 182/35; } #b-glbnav .c-list_nav ul li:nth-child(5) a:after { content: ""; width: 100%; height: 2px; background: var(--color-black); position: absolute; bottom: -8px; left: 0px; } #b-glbnav .c-list_nav ul li:nth-child(5) span.t0 { width: 68.21vw; height: 6.67vw; } #b-glbnav .c-list_nav ul li:nth-child(5) span.t1 { width: 43.59vw; height: 6.92vw; margin-top: 4.1vw; } #b-glbnav .c-list_share { width: var(--inner-width); margin-inline: auto; margin-top: 20.51vw; display: block; } #b-glbnav .c-list_share p { font-size: var(--fs-20); margin-bottom: 5.13vw; } #b-glbnav .c-list_share ul { display: flex; align-items: center; column-gap: 8.21vw; } #b-glbnav .c-list_share ul li { width: 12.82vw; height: 12.82vw; } #b-glbnav .c-list_share ul button { width: 12.82vw; height: 12.82vw; display: grid; place-content: center; background: var(--color-black); border-radius: 100vmax; } #b-glbnav .c-list_share ul button .c-icon { width: 6.41vw; height: 6.41vw; } #b-glbnav .c-list_share ul button svg { fill: var(--color-white); } @media all and (min-width: 864px) { .u-sp { display: none; } .u-pc { display: block; } button[data-menu] { top: 1.72vw; left: 2.34vw; right: auto; z-index: 10; } header#global_header { --header-logo-width: 31.25vw; --header-logo-height: 4.61vw; } header#global_header p.logo { left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); } header#global_header .c-list_share { height: 3.13vw; position: absolute; right: 2.34vw; top: 1.56vw; display: block; } header#global_header .c-list_share dl { display: flex; align-items: center; column-gap: 1.17vw; } header#global_header .c-list_share dl dt { font-size: var(--fs-14-16); padding-right: 0.39vw; } header#global_header .c-list_share dl dd button { width: 3.13vw; height: 3.13vw; display: grid; place-content: center; border-radius: 100vmax; } header#global_header .c-list_share dl dd button .c-icon { width: 1.56vw; height: 1.56vw; } footer#global_footer { position: relative; } footer#global_footer .footer_inner { padding: 6.25vw 0 3.13vw 0; width: var(--inner-width); margin-inline: auto; } footer#global_footer .c-list_external ul { justify-content: space-between; flex-direction: revert; row-gap: 0; } footer#global_footer .c-list_external ul li { width: 47.71%; } footer#global_footer .c-list_external ul li a { border-width: 1.5px; } footer#global_footer .c-list_external ul li .inr { display: flex; column-gap: 3.13vw; padding-left: 3.13vw; } footer#global_footer .c-list_external ul li figure { height: 7.03vw; } footer#global_footer .c-list_external ul li dl dd { margin-top: 0.78vw; } footer#global_footer .txt_logo { width: 74%; margin-inline: auto; margin-top: 5.08vw; } footer#global_footer .cols { margin-top: 4.69vw; } footer#global_footer .cols .l { width: 24.4%; } footer#global_footer .cols .m { width: 30%; } footer#global_footer .cols .r { width: 33%; } footer#global_footer .l ul, footer#global_footer .m ul { row-gap: 0.78vw; } footer#global_footer .l ul li a, footer#global_footer .m ul li a { height: 1.56vw; } footer#global_footer .c-list_sns ul { row-gap: 0.78vw; } footer#global_footer .c-list_sns ul li .inr { column-gap: 0.78vw; } footer#global_footer .c-list_sns ul li .c-icon { width: 1.56vw; height: 1.56vw; } footer#global_footer .c-copy { width: 12.71%; position: absolute; margin-inline: 0; padding-bottom: 0; bottom: 3.13vw; right: 3.91vw; } footer#global_footer .c-copy p { color: var(--color-white); font-family: "Manrope", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; text-transform: uppercase; } #b-glbnav { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px); } #b-glbnav .glbnav_inner { overflow-y: visible; display: flex; align-items: center; } #b-glbnav .c-list_nav { width: 100%; margin-inline: 0; padding-left: 8.2vw; padding-top: 0; } #b-glbnav .c-list_nav ul { display: flex; flex-direction: column; row-gap: 4.22vw; } #b-glbnav .c-list_nav ul li a span.txt:after { height: 2px; background: var(--color-black); position: absolute; bottom: -10px; left: 0px; } #b-glbnav .c-list_nav ul li:nth-child(1) span.txt { width: 6.56vw; } #b-glbnav .c-list_nav ul li:nth-child(2) span.txt { width: 12.66vw; } #b-glbnav .c-list_nav ul li:nth-child(3) span.txt { width: 10.47vw; } #b-glbnav .c-list_nav ul li:nth-child(4) span.txt { width: 14.22vw; } #b-glbnav .c-list_nav ul li:nth-child(5) a { display: flex; position: relative; } #b-glbnav .c-list_nav ul li:nth-child(5) a:after { bottom: -10px; } #b-glbnav .c-list_nav ul li:nth-child(5) a span.txt:after { display: none; } #b-glbnav .c-list_nav ul li:nth-child(5) span.t0 { width: 27.81vw; height: 2.73vw; } #b-glbnav .c-list_nav ul li:nth-child(5) span.t1 { width: 17.66vw; height: 2.77vw; margin-top: 0; margin-left: 1.56vw; } #b-glbnav .c-list_nav ul li { /* &:nth-child(5){ span.txt{ width: mx.pcW(202);} } */ } #b-glbnav .c-list_share { display: none; } } a.c-btn { display: block; width: 100%; height: var(--btn-height); border: 1.5px solid var(--color-black); } a.c-btn.round { border-radius: 100vmax; } a.c-btn .inr { width: 100%; height: calc(var(--btn-height) - 3px); display: flex; align-items: center; justify-content: center; } a.c-btn span.txt { font-size: var(--fs-btn); } .c-list_movies { display: flex; flex-direction: column; row-gap: 25.64vw; padding-bottom: 25.64vw; } .c-movie_list .c-movie { margin-bottom: 5.13vw; } .c-list_movie .c-ttl_movie { margin-bottom: 2.31vw; } .c-list_movie .c-ttl_movie h4 span.w_t { width: 79.23vw; aspect-ratio: 309/25; display: block; } .c-list_movie .c-movie_list .c-movie .ttl_movie { margin-bottom: 3.85vw; } .c-list_movie .c-movie_list .c-movie .c-movie_player { width: 100%; aspect-ratio: 360/203; position: relative; } .c-list_movie .c-movie_list .c-movie .c-movie_player .player, .c-list_movie .c-movie_list .c-movie .c-movie_player iframe { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background: #ddd; } .c-list_movie .c-movie_list .c-movie .c-movie_player button { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: block; cursor: pointer; transition: opacity 0.3s ease; } .c-list_movie .c-movie_list .c-movie .c-movie_player button .circle { width: var(--btn-play-width); height: var(--btn-play-width); display: grid; place-content: center; border: 2px solid var(--color-white); position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); border-radius: 100vmax; } .c-list_movie .c-movie_list .c-movie .c-movie_player button .circle span.txt { color: var(--color-white); font-size: var(--fs-14-24); } .c-list_movie .c-movie_list .c-movie .c-movie_player video { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: #ddd; transition: opacity 0.3s ease; } .c-list_movie .c-movie_list .c-movie .c-movie_player.playing button, .c-list_movie .c-movie_list .c-movie .c-movie_player.playing video { opacity: 0; pointer-events: none; } .c-list_movie .c-movie_list .c-btn_wrap { margin-top: 10.26vw; } #friend .ttl_movie h5 span.w_t { width: 75.9vw; display: block; } #friend .c-movie_txt.u-sp { width: 87.18vw; } #friend .c-movie_txt.u-sp p { display: flex; flex-direction: column; row-gap: 2.56vw; } #friend .c-movie_txt.u-sp span { display: block; width: 100%; } #friend .c-movie_txt.u-sp span.t0 { width: 87.44vw; height: 3.08vw; } #friend .c-movie_txt.u-sp span.t0 img { width: 87.44vw; height: 3.08vw; } #friend .c-movie_txt.u-sp span.t1 { width: 44.36vw; height: 3.08vw; } #friend .c-movie_txt.u-sp span.t1 img { width: 44.36vw; height: 3.08vw; } #friend .c-movie_txt.u-sp span.t2 { width: 75.9vw; height: 3.08vw; } #friend .c-movie_txt.u-sp span.t2 img { width: 75.9vw; height: 3.08vw; } #clock .ttl_movie h5 span.w_t { width: 68.72vw; display: block; } #clock .c-movie_txt.u-sp { width: 86.67vw; } #clock .c-movie_txt.u-sp p { display: flex; flex-direction: column; row-gap: 2.56vw; } #clock .c-movie_txt.u-sp span { display: block; width: 100%; } #clock .c-movie_txt.u-sp span.t0 { width: 51.03vw; height: 3.08vw; } #clock .c-movie_txt.u-sp span.t0 img { width: 51.03vw; height: 3.08vw; } #clock .c-movie_txt.u-sp span.t1 { width: 63.59vw; height: 3.08vw; } #clock .c-movie_txt.u-sp span.t1 img { width: 63.59vw; height: 3.08vw; } #clock .c-movie_txt.u-sp span.t2 { width: 71.79vw; height: 3.08vw; } #clock .c-movie_txt.u-sp span.t2 img { width: 71.79vw; height: 3.08vw; } .cols .col_l { margin-bottom: 17.95vw; } .c-list_cast .cols { display: flex; flex-direction: column; row-gap: 12.82vw; } .c-list_cast .cols .col_r { display: flex; flex-direction: column; row-gap: 12.82vw; } .c-list_cast .cols .c-cast .c-col2 { display: block; overflow: hidden; } .c-list_cast .cols .c-cast .c-col2 .img { width: 45.83%; float: left; margin: 0 3.85vw 1.28vw 0; } .c-list_cast .cols .c-cast .c-col2 h5 { font-size: var(--fs-17-20); } .c-list_cast .cols .c-cast .c-col2 h5 span { display: block; } .c-list_cast .cols .c-cast .c-col2 p.description { margin-top: 5.13vw; font-size: var(--fs-11-12); line-height: 1.65; } .c-table dl { display: flex; border-bottom: 1px solid var(--color-border); padding: 2.56vw 0 4.1vw; } .c-table dl dt { font-size: var(--fs-th); letter-spacing: -0.03em; line-height: 1.5; width: 26.38%; } .c-table dl dd { font-size: var(--fs-td); letter-spacing: -0.03em; line-height: 1.5; width: 73.62%; } @media all and (min-width: 864px) { .c-list_movies { row-gap: 12.03vw; padding-bottom: 9.77vw; } .c-movie_cols { display: flex; justify-content: space-between; } .c-movie_list { width: calc(100% - 10.94vw); } .c-movie_list .c-movie { margin-bottom: 3.91vw; } .c-list_movie .c-ttl_movie { margin-bottom: 0.94vw; } .c-list_movie .c-ttl_movie h4 span.w_t { width: 55.16vw; aspect-ratio: 706/57; } .c-list_movie .c-movie_list .c-movie .ttl_movie { margin-bottom: 2.34vw; } .c-list_movie .c-movie_list .c-btn_wrap { width: 345px; margin-top: 3.13vw; } #friend .ttl_movie h5 span.w_t { width: 50.08vw; display: block; } #friend .c-movie_txt.u-pc { width: 5.47vw; margin-top: 6.56vw; margin-right: 0.78vw; } #friend .c-movie_txt.u-pc p { top: 7.03vw; position: sticky; } #clock .c-ttl_movie { display: flex; justify-content: flex-end; } #clock .c-movie_cols { flex-direction: row-reverse; } #clock .ttl_movie h5 { display: flex; justify-content: flex-end; } #clock .ttl_movie h5 span.w_t { width: 42.5vw; display: block; } #clock .c-movie_txt.u-pc { width: 5.47vw; margin-top: 6.56vw; margin-left: 0.78vw; } #clock .c-movie_txt.u-pc p { top: 7.03vw; position: sticky; } .cols .col_l { margin-bottom: 0; } .c-list_cast .cols { display: flex; flex-direction: revert; row-gap: 0; column-gap: 5.34%; } .c-list_cast .cols .col_l { width: 50%; } .c-list_cast .cols .col_l .c-cast .c-col2 { justify-content: space-between; } .c-list_cast .cols .col_l .c-cast .c-col2 .img { width: 38.13%; float: none; } .c-list_cast .cols .col_l .c-cast .c-col2 hgroup { display: block; width: 58.64%; } .c-list_cast .cols .col_l .c-cast .c-col2 p.description { line-height: 1.84; margin-top: 1.09vw; } .c-list_cast .cols .col_r { width: 44.66%; row-gap: 2.34vw; } .c-list_cast .cols .c-cast .c-col2 { display: flex; justify-content: space-between; } .c-list_cast .cols .c-cast .c-col2 .img { width: 30.36%; float: none; margin: 0 0; } .c-list_cast .cols .c-cast .c-col2 hgroup { width: 65.84%; display: block; } .c-list_cast .cols .c-cast .c-col2 h5 { font-size: var(--fs-17-20); display: flex; } .c-list_cast .cols .c-cast .c-col2 h5 span { display: block; } .c-list_cast .cols .c-cast .c-col2 p.description { margin-top: 0.63vw; font-size: var(--fs-11-12); line-height: 1.5; } .b-song .c-list_cast { width: 47.88%; } .b-song .c-list_cast .c-cast .c-col2 .img { width: 35.39%; float: none; margin: 0 0; } .b-song .c-list_cast .c-cast .c-col2 hgroup { width: 60.17%; display: block; } .b-song .c-list_cast .c-cast .c-col2 h5 { font-size: var(--fs-17-20); display: flex; } .b-song .c-list_cast .c-cast .c-col2 h5 span { display: block; } .b-song .c-list_cast .c-cast .c-col2 p.description { margin-top: 1.09vw; font-size: var(--fs-11-12); line-height: 1.5; } .c-table dl { padding: 0.94vw 0 1.41vw; } } section { width: 100%; position: relative; min-height: 100svh; } .c-kv { width: 100%; height: 100svh; position: relative; overflow: hidden; } .c-kv .canvas-container { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } .c-kv canvas { width: 100%; height: 100%; top: 0px; left: 0px; position: absolute; max-width: 100%; }